Youtube Player Controls below Video

Move YouTube Player Controls below the video
当前为 2023-06-29 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name        Youtube Player Controls below Video
// @description Move YouTube Player Controls below the video
// @namespace   Userscript
// @version     0.1.10
// @match       https://www.youtube.com/*
// @grant       none
// @noframes
// @author      CY Fung
// @license     MIT
// @run-at      document-start
// ==/UserScript==

(() => {
    const { Promise } = this || window;
    const SCRIPT_CLASSNAME = 'yt8447-enabled'
    const SCRIPT_CSS_ID = 'fj74F'

    const css_text = `
  
  html{
      --yt8447-chrome-background: black;
  }
  html[dark] {
      --yt8447-chrome-background: transparent;
  }
  
  .${SCRIPT_CLASSNAME} {
      --yt8446-gap: 64px;
      --yt8447-height: 52px;
      --yt8446-offset-y-min: 4px;
  
      --yt8448-gap: max(var(--yt8446-gap), var(--subs-gap, 0px));
      --yt8448-gap-theater: max(var(--yt8446-gap), var(--subs-gap-theater, 0px));
  
      --yt8446-offset-y: 0px;
      --yt8446-offset-y: calc( ( var(--yt8448-gap) - var(--yt8446-gap) ) / 2 );
      --yy8446-offset-y1: max(var(--yt8446-offset-y-min), var(--yt8446-offset-y, 0px));
  }
  
  .${SCRIPT_CLASSNAME} #columns.ytd-watch-flexy {
      --subs-gap: var(--yt8448-gap);
      --subs-gap-theater: var(--yt8448-gap-theater);
  }
  
  .${SCRIPT_CLASSNAME}:not([fullscreen]) ytd-player#ytd-player .ytp-chrome-bottom {
      bottom: calc( var(--yt8447-height) * -1 - var(--yy8446-offset-y1) );
  }
  
  .${SCRIPT_CLASSNAME}:not([fullscreen]) ytd-player#ytd-player .ytp-chrome-bottom::before {
      position: absolute;
      left: -12px;
      right: -12px;
      content: '';
      display: block;
      bottom: 0px;
      top: calc( -5px - ( var(--yy8446-offset-y1) - 4px ) ); /* actual size 51px instead of 52px */
      background-color: var(--yt8447-chrome-background, transparent);
      z-index: -1;
      transform: translateZ(-1px);
  }
  
  .${SCRIPT_CLASSNAME}:not([fullscreen]) ytd-player#ytd-player #movie_player::after {
      position: absolute;
      display: block;
      content: '';
      left: 0;
      right: 0;
      height: var(--yt8447-height);
      bottom: calc( var(--yt8447-height) * -1 );
      opacity: 0 !important;
      pointer-events: auto !important;
  }
  
  .${SCRIPT_CLASSNAME}:not([fullscreen]) ytd-player#ytd-player #movie_player {
      overflow: visible;
      z-index: 999;
  }
  
  .${SCRIPT_CLASSNAME}[theater]:not([fullscreen]) #below.ytd-watch-flexy, .${SCRIPT_CLASSNAME}[theater]:not([fullscreen]) #secondary.ytd-watch-flexy {
      --yt8448-gap: var(--yt8448-gap-theater);
  }
  
  .${SCRIPT_CLASSNAME}:not([fullscreen]) #below.ytd-watch-flexy, .${SCRIPT_CLASSNAME}[theater]:not([fullscreen]) #secondary.ytd-watch-flexy {
      margin-top: var(--yt8448-gap) !important;
      transition: margin-top 0.25s;
  }
  
  `

    function isItVideoPage() {
        return window.location.href.includes('/watch?v=');
    }

    let mState = 0;
    async function main(evt) {
        await Promise.resolve();

        if (mState === 0) {
            if (document.getElementById(SCRIPT_CSS_ID)) {
                mState = -1;
                console.warn('yt8447: duplicated script');
                return;
            }
            const style = document.createElement('style');
            style.textContent = css_text;
            style.id = SCRIPT_CSS_ID;
            document.head.appendChild(style);
            mState = 1;
        }
        if (mState < 1) return;

        const ytdFlexy = document.querySelector('ytd-watch-flexy');
        if (ytdFlexy !== null) {

            let isValid = true;
            if (ytdFlexy.hasAttribute('hidden')) isValid = false;
            else if (ytdFlexy.matches('[hidden] ytd-watch-flexy')) isValid = false;

            ytdFlexy.classList.toggle(SCRIPT_CLASSNAME, isValid);
        }

    }

    document.addEventListener('yt-navigate-finish', main, false);
    document.addEventListener('yt-page-data-fetched', main, false);
})();