油管剧场小窗模式

Youtube在剧场模式下，如果是小窗口(宽度小于876像素），视频会出现迷之黑边，去掉它们并保证视频占据整个窗口。并让顶部工具栏只在鼠标悬停时显示。（推荐配合WebAPP模式、窗口置顶工具一同使用）
当前为 2023-12-31 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         油管剧场小窗模式
// @version      1.0.1
// @description  Youtube在剧场模式下，如果是小窗口(宽度小于876像素），视频会出现迷之黑边，去掉它们并保证视频占据整个窗口。并让顶部工具栏只在鼠标悬停时显示。（推荐配合WebAPP模式、窗口置顶工具一同使用）
// @author       CWBeta
// @include      *youtube.com*
// @icon         https://www.google.com/s2/favicons?domain=youtube.com
// @namespace    https://greasyfork.org/users/670174
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';
    function CheckBlackFrame(){
        if (window.innerWidth >= 876){
            return;
        }
        var videoWindow = document.querySelector(".video-stream.html5-main-video");
        var videoWrapper = document.querySelector("#full-bleed-container");
        var topValue = videoWindow.style.top;
        var height = parseInt(videoWindow.style.height.substr(0,videoWindow.style.height.length-2));
        var width = parseInt(videoWindow.style.width.substr(0,videoWindow.style.width.length-2));
        if (videoWindow.getAttribute("cw-width") !=window.innerWidth
            || videoWindow.getAttribute("cw-height") != window.innerHeight)
        {
            console.log("窗口变化，重置黑边！")
            videoWindow.style["top"] = "0px";
            videoWrapper.style["height"] = window.innerHeight + "px";
            videoWindow.style["top"] = (window.innerHeight - height) / 2 + "px";
            //videoWrapper.style["height"] = height;
            videoWrapper.style["min-height"] = "0px";
            videoWrapper.style["max-height"] = "99999px";
        }
        videoWindow.setAttribute("cw-width",window.innerWidth);
        videoWindow.setAttribute("cw-height",window.innerHeight);
    }

    function CheckPageLoad(){
        if(cwData["href"] != location.href){
            Refresh();
        }
    }

    function AddStyle(){
        var oldStyle = document.getElementById("cw-style");
        if(oldStyle != undefined){
            oldStyle.parentNode.removeChild(oldStyle);
        }

        var style = document.createElement("style");
        style.id = "cw-style";
        style.type = "text/css";
        var cssString = "html::-webkit-scrollbar { width: 0;} "
        if (location.href.indexOf("/watch?") != -1){
            cssString += "html{--ytd-toolbar-height:0px} #masthead-container.ytd-app{opacity:0; transition:1s;} #masthead-container.ytd-app:hover{opacity:1}"
        }
        try
        {
            style.appendChild(document.createTextNode(cssString));
        }
        catch(ex)
        {
            style.styleSheet.cssText = cssString;//针对IE
        }
        var head = document.getElementsByTagName("head")[0];
        head.appendChild(style);
    }

    function Update(){
        CheckBlackFrame();
        CheckPageLoad();
    }

    function OnLoad(){
        console.log("【油管小窗口模式】运行中！")
        Refresh();
    }

    function Refresh(){
        console.log("刷新状态！")
        AddStyle();
        cwData["href"] = location.href;
        if(cwData["updateInterval"] != undefined){
            clearInterval(cwData["updateInterval"]);
        }
        cwData["updateInterval"] = setInterval(Update,500);
        cwData["href"] = location.href;
    }

    var cwData = {};

    window.addEventListener("load", function() {
        OnLoad();
    });

})();