Anix.to windowed fullscreen and theater mode

Add buttons for windowed fullscreen and theater mode

  1. // ==UserScript==
  2. // @name Anix.to windowed fullscreen and theater mode
  3. // @namespace https://github.com/irasnalida
  4. // @match https://anix.to/*
  5. // @match https://anixtv.to/*
  6. // @icon https://www.google.com/s2/favicons?domain=anix.to&sz=128
  7. // @grant none
  8. // @version 2.5.5
  9. // @author irasnalida
  10. // @description Add buttons for windowed fullscreen and theater mode
  11. // @run-at document-end
  12. // @license MIT
  13. // ==/UserScript==
  14.  
  15. const config = {
  16. childList: true,
  17. subtree: false
  18. };
  19. const obs = new MutationObserver(callback);
  20. function callback() {
  21. if (window.location.href.startsWith("https://anix.to/watch") || window.location.href.startsWith("https://anixtv.to/watch"))
  22. checkthenadd();
  23. else{
  24. const stel = document.getElementById('irslda-styleele');
  25. stel.remove();
  26. }
  27. }
  28.  
  29. function runMutation() {
  30. const myInterval = setInterval(() => {
  31. //const el = document.querySelector(".ani-player-control-left>.skiptime");
  32. const el = document.querySelector("head");
  33. if (el) {
  34. clearInterval(myInterval);
  35. obs.observe(el, config);
  36. callback();
  37. }
  38. }, 500);
  39. }
  40. runMutation();
  41.  
  42. function checkthenadd() {
  43. const btn = document.getElementById('irslda-exbtn');
  44. if (!btn) { actualScript(); }
  45. }
  46.  
  47. checkthenadd();
  48.  
  49. function actualScript() {
  50. document.querySelector(".skiptime.dropdown").style.order = "1";
  51. var isMode = 0;
  52. const expandStyle = `
  53. body{overflow: hidden;}
  54. #player > iframe {position: fixed;top: 0px;left: 0px;bottom: 0px;right: 0px;overflow: hidden;backdrop-filter: brightness(0);}
  55. .sidebar,.wrapper > header,.btn-schedule-floating.schedule-toggler,.light.ani-player-control,.ani-season, #ani-episode, .alert-dismissible.alert-primary.alert{display: none !important;}
  56. #ani-player-controls{width: 100%;height: fit-content;position: fixed;padding-block: 5px;top: 0px;left: 0px;opacity: 0;backdrop-filter: blur(22px) brightness(20%) contrast(80%) saturate(250%);transition: opacity 0.22s;}
  57. #ani-player-controls:hover{opacity: 1;}
  58. `;
  59. const theaterStyle = `
  60. .sidebar{display: none !important;}
  61. #ani-player-section{scroll-margin-top: 5px;}
  62. `;
  63. const styleElement = document.createElement('style');
  64. styleElement.id = 'irslda-styleele'
  65. document.head.appendChild(styleElement);
  66.  
  67. let player = document.getElementById('ani-player-section');
  68.  
  69. //event listener for key press
  70. //key event does not work properly due to the iframe player
  71. document.addEventListener("keyup", function (event) {
  72. if (event.target === document.querySelector('input')) {
  73. return;
  74. }
  75. if (event.key === "`" || event.key === "Alt") {
  76. switchMode(2);
  77. }
  78. else if (event.key.toLowerCase() === "t") {
  79. switchMode(3);
  80. }
  81. else if (event.key.toLowerCase() === " ") {
  82. player.scrollIntoView({ behavior: 'smooth' });
  83. }
  84. else { }
  85. });
  86. //add new expand button in control list
  87. let playerControlLeft = document.querySelector('.ani-player-control-left');
  88. const expandBtn = document.createElement('div');
  89. expandBtn.id = 'irslda-exbtn';
  90. expandBtn.className = 'ani-player-control';
  91. expandBtn.innerHTML = "<i class=\"mdi mdi-arrow-expand-all\"></i> <span>Expand</span>";
  92. playerControlLeft.appendChild(expandBtn);
  93. expandBtn.addEventListener('click', function () {
  94. switchMode(2);
  95. });
  96.  
  97. //add new theater button in control list
  98. const theaterBtn = document.createElement('div');
  99. theaterBtn.className = 'ani-player-control';
  100. theaterBtn.innerHTML = "<i class=\"mdi mdi-arrow-expand-horizontal\"></i> <span>Theater</span>";
  101. playerControlLeft.appendChild(theaterBtn);
  102. theaterBtn.addEventListener('click', function () {
  103. switchMode(3);
  104. });
  105. function switchMode(toMode) {
  106. if (isMode === toMode) {
  107. styleElement.innerHTML = ``;
  108. isMode = 0;
  109. }
  110. else {
  111. if (toMode === 2) {
  112. styleElement.innerHTML = expandStyle;
  113. isMode = 2;
  114. }
  115. else if (toMode === 3) {
  116. styleElement.innerHTML = theaterStyle;
  117. player.scrollIntoView({ behavior: 'smooth' });
  118. isMode = 3;
  119. }
  120. }
  121. }
  122. }