Youtube Player Controls below Video

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

(() => {
    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} {
    --yt8448-gap: max(58px, var(--subs-gap, 0px));
    --yt8448-gap-theater: max(58px, var(--subs-gap-theater, 0px));
    --yt8447-height: 52px;
}

.${SCRIPT_CLASSNAME} ytd-player#ytd-player .ytp-chrome-bottom {
    bottom: calc( var(--yt8447-height) * -1 );
}

.${SCRIPT_CLASSNAME} ytd-player#ytd-player .ytp-chrome-bottom::before {
    position: absolute;
    left: -12px;
    right: -12px;
    content: '';
    display: block;
    bottom: -6px;
    top: -6px;
    background-color: var(--yt8447-chrome-background, transparent);
    z-index: -1;
    transform: translateZ(-1px);
}   

.${SCRIPT_CLASSNAME} 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} ytd-player#ytd-player #movie_player {
    overflow: visible;
    z-index: 999;
}

.${SCRIPT_CLASSNAME} #columns.ytd-watch-flexy {
    --subs-gap: var(--yt8448-gap);
    --subs-gap-theater: var(--yt8448-gap-theater);
}

.${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} #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;
    function main(evt) {

        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);
        } else if (mState < 0) {
            return;
        }
        if (evt.type === 'yt-page-data-updated') {
            mState = 1;
        } else if (mState === 0) {
            mState = 2;
        } else if (mState >= 1) {
            return;
        }

        const playerElt = document.querySelector('ytd-watch-flexy');
        if (playerElt !== null) {
            if (isItVideoPage()) {
                playerElt.classList.add(SCRIPT_CLASSNAME);
            } else {
                playerElt.classList.remove(SCRIPT_CLASSNAME);
            }
        }

    }

    document.addEventListener('yt-navigate-finish', main);
    document.addEventListener('yt-page-data-fetched', main);
})();
欢迎访问Greasy Fork镜像
