YouTube Fullscreen Enhancer

This userscript improves YouTube's fullscreen mode by enabling the customization of the viewing experience. Users can hide the video title, player controls, and annotations, as well as stabilize captions when pausing or resuming playback. All these features can be easily toggled.

当前为 2023-02-25 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name YouTube Fullscreen Enhancer
  3. // @description This userscript improves YouTube's fullscreen mode by enabling the customization of the viewing experience. Users can hide the video title, player controls, and annotations, as well as stabilize captions when pausing or resuming playback. All these features can be easily toggled.
  4. // @author Wanten
  5. // @copyright 2023 Wanten
  6. // @license MIT
  7. // @supportURL https://github.com/WantenMN/userscript-youtube/issues
  8. // @icon https://youtube.com/favicon.ico
  9. // @homepageURL https://github.com/WantenMN/userscript-youtube
  10. // @namespace https://greasyfork.org/en/scripts/460569
  11. // @version 0.0.9
  12. // @match http*://*.youtube.com/*
  13. // @match http*://youtube.com/*
  14. // @match http*://*.youtu.be/*
  15. // @match http*://youtu.be/*
  16. // @run-at document-end
  17. // @grant GM_addStyle
  18. // ==/UserScript==
  19.  
  20.  
  21. (function () {
  22. "use strict";
  23.  
  24. // Keyboard shortcut to toggle the script on and off
  25. const toggleKey = 'e';
  26. // Whether to hide or show the player progress bar when the video is paused
  27. // true: hide
  28. // false: show
  29. const hideProgressBar = true;
  30. // Whether to show or hide the video title and player control bar on mousemove
  31. // true: show
  32. // false: hide
  33. const isMouseMoveToggle = true;
  34.  
  35. const enableStyle = `
  36. .ytp-chrome-top {
  37. display: none !important;
  38. }
  39. .ytp-gradient-top {
  40. display: none !important;
  41. }
  42. .ytp-chrome-controls {
  43. display: none !important;
  44. }
  45. .ytp-gradient-bottom {
  46. display: none !important;
  47. }
  48. .ytp-progress-bar-container {
  49. bottom: 10px !important;
  50. ${hideProgressBar ? 'display: none !important;' : ''}
  51. }
  52. .caption-window, .caption-window.ytp-caption-window-bottom, .caption-window ytp-caption-window-top {
  53. margin-bottom: 0px !important;
  54. margin-top: 0px !important;
  55. }
  56. .annotation {
  57. display: none !important;
  58. }
  59. `;
  60.  
  61. let isEnabled = false;
  62. let styleTag = null;
  63. let mouseMoveTimeout = null;
  64.  
  65. const addStyleTag = () => {
  66. styleTag = GM_addStyle(enableStyle);
  67. };
  68.  
  69. const removeStyleTag = () => {
  70. if(styleTag) {
  71. styleTag.parentNode.removeChild(styleTag);
  72. styleTag = null;
  73. }
  74. };
  75.  
  76. const handleKeyDown = (event) => {
  77. if (event.key !== toggleKey) {
  78. return;
  79. }
  80.  
  81. clearTimeout(mouseMoveTimeout);
  82. isEnabled = !isEnabled;
  83.  
  84. if (styleTag) {
  85. removeStyleTag();
  86. }
  87.  
  88. if (isEnabled) {
  89. addStyleTag();
  90. }
  91. };
  92.  
  93. const handleMouseMove = (event) => {
  94. if (!isMouseMoveToggle || !isEnabled) {
  95. return;
  96. }
  97.  
  98. clearTimeout(mouseMoveTimeout);
  99. if (styleTag) {
  100. removeStyleTag();
  101. }
  102.  
  103. mouseMoveTimeout = setTimeout(() => {
  104. if (isEnabled) {
  105. addStyleTag();
  106. }
  107. }, 3500);
  108. };
  109.  
  110. window.addEventListener("keydown", handleKeyDown);
  111. window.addEventListener("mousemove", handleMouseMove);
  112. })();