☰

Youtube Player Controls below Video

Move YouTube Player Controls below the video

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

  1. // ==UserScript==
  2. // @name        Youtube Player Controls below Video
  3. // @description Move YouTube Player Controls below the video
  4. // @namespace   Userscript
  5. // @version     0.1.4
  6. // @match       https://www.youtube.com/*
  7. // @grant       none
  8. // @noframes
  9. // @author      CY Fung
  10. // @license     MIT
  11. // @run-at      document-start
  12. // ==/UserScript==
  13.  
  14. (() => {
  15.     const SCRIPT_CLASSNAME = 'yt8447-enabled'
  16.     const SCRIPT_CSS_ID = 'fj74F'
  17.  
  18.     const css_text = `
  19. .${SCRIPT_CLASSNAME} {
  20.     --yt8448-gap: max(58px, var(--subs-gap, 0px));
  21.     --yt8448-gap-theater: max(58px, var(--subs-gap-theater, 0px));
  22.     --yt8447-height: 52px;
  23.     --yt8447-black-background: block;
  24. }
  25.  
  26. .${SCRIPT_CLASSNAME} ytd-player#ytd-player .ytp-chrome-bottom {
  27.     bottom: calc( var(--yt8447-height) * -1 );
  28. }
  29.  
  30. .${SCRIPT_CLASSNAME} ytd-player#ytd-player .ytp-chrome-bottom::before {
  31.     position: absolute;
  32.     left: -12px;
  33.     right: -12px;
  34.     content: '';
  35.     display: var(--yt8447-black-background, none);
  36.     bottom: -6px;
  37.     top: -6px;
  38.     background-color: black;
  39.     z-index: -1;
  40.     transform: translateZ(-1px);
  41. }
  42.  
  43. html[dark][darker-dark-theme] ytd-watch-flexy.style-scope[cinematics-enabled].${SCRIPT_CLASSNAME} {
  44.     --yt8447-black-background: none;
  45. }
  46.     
  47.  
  48. .${SCRIPT_CLASSNAME} ytd-player#ytd-player #movie_player::after {
  49.     position: absolute;
  50.     display: block;
  51.     content: '';
  52.     left: 0;
  53.     right: 0;
  54.     height: var(--yt8447-height);
  55.     bottom: calc( var(--yt8447-height) * -1 );
  56.     opacity: 0 !important;
  57.     pointer-events: auto !important;
  58. }
  59.  
  60. .${SCRIPT_CLASSNAME} ytd-player#ytd-player #movie_player {
  61.     overflow: visible;
  62.     z-index: 999;
  63. }
  64.  
  65. .${SCRIPT_CLASSNAME} #columns.ytd-watch-flexy {
  66.     --subs-gap: var(--yt8448-gap);
  67.     --subs-gap-theater: var(--yt8448-gap-theater);
  68. }
  69.  
  70. .${SCRIPT_CLASSNAME}[theater]:not([fullscreen]) #below.ytd-watch-flexy, .${SCRIPT_CLASSNAME}[theater]:not([fullscreen]) #secondary.ytd-watch-flexy {
  71.     --yt8448-gap: var(--yt8448-gap-theater);
  72. }
  73.  
  74. .${SCRIPT_CLASSNAME} #below.ytd-watch-flexy, .${SCRIPT_CLASSNAME}[theater]:not([fullscreen]) #secondary.ytd-watch-flexy {
  75.     margin-top: var(--yt8448-gap) !important;
  76.     transition: margin-top 0.25s;
  77. }
  78.  
  79. `
  80.  
  81.     function isItVideoPage() {
  82.         return window.location.href.includes('/watch?v=');
  83.     }
  84.  
  85.     let mState = 0;
  86.     function main(evt) {
  87.  
  88.         if (mState === 0) {
  89.             if (document.getElementById(SCRIPT_CSS_ID)) {
  90.                 mState = -1;
  91.                 console.warn('yt8447: duplicated script');
  92.                 return;
  93.             }
  94.             const style = document.createElement('style');
  95.             style.textContent = css_text;
  96.             style.id = SCRIPT_CSS_ID;
  97.             document.head.appendChild(style);
  98.         } else if (mState < 0) {
  99.             return;
  100.         }
  101.         if (evt.type === 'yt-page-data-updated') {
  102.             mState = 1;
  103.         } else if (mState === 0) {
  104.             mState = 2;
  105.         } else if (mState >= 1) {
  106.             return;
  107.         }
  108.  
  109.         const playerElt = document.querySelector('ytd-watch-flexy');
  110.         if (playerElt !== null) {
  111.             if (isItVideoPage()) {
  112.                 playerElt.classList.add(SCRIPT_CLASSNAME);
  113.             } else {
  114.                 playerElt.classList.remove(SCRIPT_CLASSNAME);
  115.             }
  116.         }
  117.  
  118.     }
  119.  
  120.     document.addEventListener('yt-navigate-finish', main);
  121.     document.addEventListener('yt-page-data-fetched', main);
  122. })();