☰

YouTube Video Controls - Toggle Visibility

這是為了切換Youtube Video Controls 元素

  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.6
  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', 'BUTTON'
  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):not(.ytp-caption-window-container) {
  39.         visibility: collapse;
  40.         pointer-events: none;
  41.     }
  42.     html.hide-controls #movie_player .ytp-right-controls {
  43.         transform: translateY(100vh) !important;
  44.     }
  45.         `;
  46.         document.documentElement.appendChild(style);
  47.     }
  48.     attachStyle();
  49.  
  50.     function pageKeyDownfunction(evt) {
  51.         // passive = false
  52.         // capture = true
  53.  
  54.         if (keyEventWhen(evt)) {
  55.  
  56.             if (!allowList.includes(evt.target.nodeName)) return;
  57.  
  58.             if (!document.querySelector('html ytd-watch-flexy #movie_player video')) return
  59.  
  60.             evt.preventDefault();
  61.             evt.stopPropagation();
  62.             evt.stopImmediatePropagation();
  63.  
  64.             document.documentElement.classList.toggle('hide-controls')
  65.  
  66.         }
  67.     }
  68.  
  69.     document.addEventListener('keydown', pageKeyDownfunction, true)
  70.  
  71.     //ytp-ce-video ytp-ce-top-left-quad ytp-ce-size-853 ytp-ce-element-show
  72.  
  73.     // Your code here...
  74. })();