☰

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.  
  77.   const handleKeyDown = (event) => {
  78.     if (event.key !== toggleKey) {
  79.       return;
  80.     }
  81.  
  82.     clearTimeout(mouseMoveTimeout);
  83.     isEnabled = !isEnabled;
  84.  
  85.     if (styleTag) {
  86.       removeStyleTag();
  87.     }
  88.  
  89.     if (isEnabled) {
  90.       addStyleTag();
  91.     }
  92.   };
  93.  
  94.   const handleMouseMove = (event) => {
  95.     if (!isMouseMoveToggle || !isEnabled) {
  96.       return;
  97.     }
  98.  
  99.     clearTimeout(mouseMoveTimeout);
  100.     if (styleTag) {
  101.       removeStyleTag();
  102.     }
  103.  
  104.     mouseMoveTimeout = setTimeout(() => {
  105.       if (isEnabled) {
  106.         addStyleTag();
  107.       }
  108.     }, 3500);
  109.   };
  110.  
  111.   window.addEventListener("keydown", handleKeyDown);
  112.   window.addEventListener("mousemove", handleMouseMove);
  113. })();