☰

YouTube Video Controls - Toggle Visibility

這是為了切換Youtube Video Controls 元素

当前为 2023-02-02 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         YouTube Video Controls - Toggle Visibility
  3. // @name:en      YouTube Video Controls - Toggle Visibility
  4. // @name:ja      YouTube Video Controls - 可視性の切り替え
  5. // @name:zh-TW   YouTube Video Controls - Toggle Visibility
  6. // @name:zh-CN   YouTube Video Controls - Toggle Visibility
  7. // @namespace    http://tampermonkey.net/
  8. // @version      0.1.2
  9. // @description        This is to toggle the visibility of Youtube Video Controls
  10. // @description:ja     Youtube Video Controls 要素を切り替えるためのものです。
  11. // @description:zh-TW  這是為了切換Youtube Video Controls 元素
  12. // @description:zh-CN  這是為了切換Youtube Video Controls 元素
  13. // @description:en     This is to toggle the visibility of Youtube Video Controls
  14. // @author       CY Fung
  15. // @match        https://www.youtube.com/*
  16. // @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  17. // @grant        none
  18. // @license      MIT
  19. // ==/UserScript==
  20.  
  21. /* jshint esversion:6 */
  22. (function () {
  23.     'use strict';
  24.  
  25.     const keyEventWhen = (evt) => evt.code === 'KeyC' && evt.shiftKey;
  26.  
  27.     const allowList = [
  28.         'DIV', 'SPAN', 'BODY', 'HTML', 'VIDEO', 'A',
  29.         'YTD-PLAYER', 'YTD-WATCH-FLEXY', 'YTD-PAGE-MANAGER', 'YTD-MINIPLAYER'
  30.     ];
  31.  
  32.     if(document.querySelector('#tvc-toggle-style')) return;
  33.  
  34.     function attachStyle(){
  35.         let style = document.createElement('style');
  36.         style.id = 'tvc-toggle-style';
  37.         style.textContent = `
  38.     html.hide-controls .html5-video-container ~ [class]:not(.ytp-cued-thumbnail-overlay) {
  39.         visibility: collapse;
  40.         pointer-events: none;
  41.     }
  42.         `;
  43.         document.documentElement.appendChild(style);
  44.     }
  45.     attachStyle();
  46.  
  47.     function pageKeyDownfunction(evt) {
  48.         // passive = false
  49.         // capture = true
  50.  
  51.         if (keyEventWhen(evt)) {
  52.  
  53.             if (!allowList.includes(evt.target.nodeName)) return;
  54.  
  55.             if (!document.querySelector('html ytd-watch-flexy #movie_player video')) return
  56.  
  57.             evt.preventDefault();
  58.             evt.stopPropagation();
  59.             evt.stopImmediatePropagation();
  60.  
  61.             document.documentElement.classList.toggle('hide-controls')
  62.  
  63.         }
  64.     }
  65.  
  66.     document.addEventListener('keydown', pageKeyDownfunction, true)
  67.  
  68.     //ytp-ce-video ytp-ce-top-left-quad ytp-ce-size-853 ytp-ce-element-show
  69.  
  70.     // Your code here...
  71. })();