Youtube New UI Fix

Fixes the new UI to one that resembles old one

Versión del día 10/7/2016. Echa un vistazo a la versión más reciente.

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Necesitará instalar una extensión como Tampermonkey para instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

// ==UserScript==
// @name        Youtube New UI Fix
// @namespace   YtNewUIFix
// @description Fixes the new UI to one that resembles old one
// @author      Roy Scheerens
// @homepageURL https://greatest.deepsurf.us/en/scripts/11485-youtube-new-ui-fix
// @include     https://www.youtube.com/*
// @include     https://youtube.googleapis.com/embed/*
// @version     1.12.0
// @grant       none
// ==/UserScript==
/* Original typescript code: https://copy.com/TzRldsobyPt8XcKA */
var YtNewUIFix = (function () {
    function YtNewUIFix(isEmbedded) {
        this.watchLaterAdded = false;
        this.playButtonReplaced = false;
        this.isEmbedded = isEmbedded;
        this.moviePlayer = document.querySelector("div.html5-video-player");
        var api = document.querySelector(".player-api");
        this.mouseMoveEvent = document.createEvent('Events');
        this.mouseMoveEvent.initEvent("mousemove", true, false);
        this.addWatchLater = this.getStorage("addWatchLater", true);
        this.autoHideFullScreen = this.getStorage("autoHideFullScreen", false);
        this.removeAllAnimations = this.getStorage("removeAllAnimations", false);
        this.revertScrubber = this.getStorage("revertScrubber", false);
        this.optionsBack = this.getStorage("optionsBack", false);
        this.progressBigger = this.getStorage("progressBigger", false);
        this.showTitleOnHover = this.getStorage("showTitleOnHover", false);
        this.alwaysShowVolume = this.getStorage("alwaysShowVolume", false);
    }
    YtNewUIFix.prototype.applyFix = function () {
        var _this = this;
        this.addCSS();
        if (localStorage) {
            this.addOptions();
        }
        setInterval(function () {
            _this.checkMoviePlayer();
            _this.checkWatchLater();
            _this.removePlayAnim();
        }, 1000);
    };
    YtNewUIFix.prototype.getStorage = function (key, defaultVal) {
        if (!localStorage) {
            return defaultVal;
        }
        var result = localStorage.getItem(key);
        if (result) {
            return result == "true";
        }
        else {
            return defaultVal;
        }
    };
    YtNewUIFix.prototype.addCSS = function () {
        var css = document.createElement("style");
        css.id = "YoutubeNewUIFix-Style";
        css.textContent = "/* fixing the colors */\n            .ytp-chrome-bottom { background-color: #1B1B1B!important; }\n            .ytp-chrome-controls svg path { fill: #8E8E8E!important; }\n            " + (this.isEmbedded ? "" : "html:not(.floater) .html5-video-player { height: calc(100% + 35px)!important; }") + "\n            .html5-video-content { background-color: black!important; }\n            .ytp-popup, .ytp-panelpopup { background: rgb(28, 28, 28) none repeat scroll 0% 0%!important; }\n\t\t\t.ytp-menuitem:hover:not([aria-disabled=\"true\"]) { background-color: rgb(40, 40, 40) !important; }\n\n\t\t\t/* always show volume slider */\n            " + (this.alwaysShowVolume ? ".ytp-volume-panel { width: 52px; margin-right: 3px; } .ytp-big-mode .ytp-volume-panel { width: 78px; }" : "") + "\n\n\n\t\t\t/* Fix for youtube+ */\n\t\t\t.html5-video-container { height: unset!important; }\n\n\t\t\t/* fix the scrollbar in the quality menu */\n\t\t\t.ytp-menuitem { line-height: 2; }\n\n            /* moving the content below down, but not when the 'Resize YT To Window Size' script is active (.ytwp-window-player) */\n            //body:not(.ytwp-window-player) #watch7-content, body:not(.ytwp-window-player) div.watch-stage-mode #watch7-sidebar { transform: translateY(35px)!important; }\n\t\t\t#placeholder-player { padding-bottom: 35px; }\n\t\t\tbody:not(.ytwp-window-player) #page:not(.watch-stage-mode) #watch7-sidebar {  transform: translateY(-35px); }\n\n            /* controls always visible */\n            " + (this.autoHideFullScreen ? ".html5-video-player:not(.ytp-big-mode) " : "") + ".ytp-chrome-bottom { opacity: 1!important; }\n\n            /* move controls to the right place */\n            .ytp-gradient-bottom, " + (this.isEmbedded && this.showTitleOnHover ? "" : ".ytp-gradient-top") + " { display: none!important; }\n            .ytp-chrome-controls { width: calc(100% + 24px)!important; transform: translateX(-12px)!important; }\n\n\t\t\t/* Make title a bit smaller and show on hover */\n\t\t\t" + (this.showTitleOnHover ? this.showTitleOnHoverCSS() : ".ytp-chrome-top { display: none!important; }") + "\n\n            /* Fix the theater black bars */\n            .watch-stage-mode #theater-background::after { content: ''; height: 35px; bottom: -35px; left: 0px; position: absolute; background-color: black; width: 100%; }\n\n\t\t\t/* Make the progressbar fill up the entire space when not hovering over (thanks to Takato) */\n\t\t\t" + (this.progressBigger ? ".html5-video-player .ytp-progress-list {width:calc(100% + 24px) !important; margin-left:-12px;}" : "") + "\n\n            /* scale down the controls */\n            .ytp-chrome-bottom { transform: translateY(5px)!important; }\n            .ytp-chrome-bottom::before {content: ''; bottom: 0px; top: -1px; left: -12px; right: -12px; position: absolute; background-color: #1B1B1B; z-index: -1000; }\n            .ytp-chrome-controls { height: 31px!important; line-height: 31px!important; font-size: 11px!important; }\n            .ytp-chrome-controls .ytp-button:not(.ytp-play-button):not(.ytp-watch-later-button) { width: 32px!important; }\n            .ytp-play-button { width: 41px!important; }\n            .ytp-progress-bar-container:not(.ytp-pulling) { height: 5px!important; bottom: 35px!important; }\n\t\t\t.ytp-progress-list { transform-origin: center top; }\n\t\t\t.ytp-scrubber-button { height: 13px!important; width: 13px!important; }\n\t\t\t.ytp-time-display { line-height: inherit!important; font-size: 100%!important; }\n\t\n\t\t\t.html5-main-video { top: 0 !important; }\n\n\t\t\t.video-player-view-component.branded-page-box { padding-bottom: 50px!important; }\n\t\t\t.yt-uix-expander-head { line-height: 3.169em!important; }\n\n            /* scale down the controls big mode */\n            .ytp-big-mode .ytp-chrome-bottom { transform: translateY(24px)!important; }\n            .ytp-big-mode .ytp-progress-bar-container { transform: translateY(-19px)!important; }\n            .html5-video-container .ytp-storyboard-framepreview { height: 100%!important; }\n            .ytp-cards-button { top: 0!important } /* needed or else focusing the card will move it under the controls */\n            //" + (this.autoHideFullScreen ? ".html5-video-player:not(.ytp-fullscreen) .html5-main-video, .html5-video-player:not(.ytp-fullscreen) .ytp-storyboard-framepreview-img { max-height: calc(100% - 35px)!important; }" : ".html5-main-video, .ytp-storyboard-framepreview-img { max-height: calc(100% - 35px)!important; }") + " /* vh instead of % because chrome is weird, or not? */\n            .ytp-big-mode .ytp-scrubber-button { top: -4px!important; transform: scale(0); }\n\t\t\t.ytp-big-mode .ytp-progress-bar-container:hover .ytp-scrubber-button { top: -4px!important; transform: translateX(4px); }\n\t\t\t.ytp-big-mode .ytp-volume-slider-handle { width: 14px; height: 14px; margin-top: -7px; border-radius: -7px; }\n\t\t\t.ytp-big-mode .ytp-volume-slider-active .ytp-volume-panel { width: 74px; }\n\t\t\t.ytp-big-mode .ytp-menuitem-label { padding: 7px 10px; }\n\t\t\t.ytp-big-mode .ytp-contextmenu { font-size: 11px; }\n\t\t\t.ytp-big-mode .ytp-menuitem-label, .ytp-big-mode .ytp-menuitem-content { padding: 0 15px; }\n\t\t\t.ytp-big-mode .ytp-menuitem { height: 33px; }\n\n\t\t\t/* move the tooltips and settings down a bit */\n\t\t\t.ytp-tooltip.ytp-bottom, .ytp-settings-menu { bottom: 44px!important; }\n\n            /* Fix the quality badge (red HD rectangle) */\n            .ytp-settings-button.ytp-hd-quality-badge::after,.ytp-settings-button.ytp-4k-quality-badge::after,.ytp-settings-button.ytp-5k-quality-badge::after,.ytp-settings-button.ytp-8k-quality-badge::after\n            {\n    \t        content:''!important;\n    \t        position:absolute!important;\n    \t        top:6px!important;\n    \t        right:4px!important;\n    \t        height:9px!important;\n    \t        width:13px!important;\n    \t        background-color:#f12b24!important;\n    \t        border-radius:1px!important;\n    \t        line-height:normal!important;\n    \t        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTMgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4NCiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsLW9wYWNpdHk9IjAuNjQ3MSIgZmlsbD0iIzAwMDAwMCIgZD0iTTUsNyBMNiw3IEw2LDggTDUsOCBMNSw3IFogTTEwLDMgTDEwLDQgTDgsNCBMOCwzIEwxMCwzIFogTTMsNiBMMyw1IEw1LDUgTDUsNiBMMyw2IFogTTIsNyBMMyw3IEwzLDggTDIsOCBMMiw3IFogTTcsNyBMMTAsNyBMMTAsOCBMNyw4IEw3LDcgWiBNMTAsNiBMMTEsNiBMMTEsNyBMMTAsNyBMMTAsNiBaIj48L3BhdGg+DQogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0ZGRkZGRiIgZD0iTTUsNyBMNSw2IEw1LDUgTDMsNSBMMyw2IEwzLDcgTDIsNyBMMiwyIEwzLDIgTDMsNCBMNSw0IEw1LDIgTDYsMiBMNiw3IEw1LDcgWiBNMTEsNiBMMTAsNiBMMTAsNyBMNyw3IEw3LDIgTDEwLDIgTDEwLDMgTDExLDMgTDExLDYgWiBNMTAsNCBMMTAsMyBMOCwzIEw4LDQgTDgsNiBMMTAsNiBMMTAsNCBaIj48L3BhdGg+DQo8L3N2Zz4NCg==')!important;\n    \t        padding: 0!important;\n            }\n\n            /* Fix the red line under the subtitle icon */\n            .ytp-chrome-controls .ytp-button[aria-pressed=\"true\"]::after\n            {\n                width: 17px!important;\n                height: 2px!important;\n                left: 8px!important;\n                bottom: 7px!important;\n            }\n\n            /* Makes sure the captions/subtitles are at the correct height and don't move up and down */\n            .ytp-player-content, .ytp-subtitles-player-content { bottom: 44px!important; }\n\n            /* rules for the watch later button */\n            " + (this.addWatchLater ? ".ytp-watch-later-button { width: 24px!important; /*float: right!important; margin-right: 2px!important;*/ }" : "") + "\n            " + (this.addWatchLater ? ".ytp-tooltip-image-enabled { bottom: 44px!important; top: auto!important; }" : "") + "\n\n            /* rules for the options */\n            h3.optionChanged::after { content: 'Refresh page to save changes'; color: red; position: relative; left: 15px; }\n\n            /* no animations */\n            " + (this.removeAllAnimations ? ".ytp-bezel { display: none!important; }" : "") + "\n            " + (this.removeAllAnimations ? ".html5-endscreen *, .html5-video-player div { transition-property: none !important; animation: none !important; }" : "") + "\n            " + (this.removeAllAnimations ? ".videowall-still-image { transform: none !important; }" : "") + "\n\n            " + (this.optionsBack ? this.optionsBackCSS() : "") + "\n\n\t\t\t/* old scrubber button */\n\t\t\t" + (this.revertScrubber ?
            ".ytp-scrubber-button { height: 6px; width: 6px; background: #AEAEAE none repeat scroll 0% 0%; border: 5px solid #EAEAEA; border-radius: 8px; transform: translateY(-1px); bottom: -6px; top: initial !important; }" +
                ".ytp-progress-bar-container:not(.ytp-pulling) .ytp-scrubber-button { height: 6px!important; width: 6px!important; }" : "");
        document.head.appendChild(css);
    };
    YtNewUIFix.prototype.optionsBackCSS = function () {
        return "\n\t\t\t.ytp-panel\n\t\t\t{\n\t\t\t\tdisplay: -webkit-flex;\n\t\t\t\t-webkit-flex-direction: column;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t}\n\n\t\t\t.ytp-panel-header\n\t\t\t{\n\t\t\t\torder: 2;\n\t\t\t\tborder-top: 1px solid #444;\n\t\t\t\tborder-bottom: none;\n\t\t\t}\n\n\t\t\t.ytp-panel-content\n\t\t\t{\n\t\t\t\torder: 1;\n\t\t\t}";
    };
    YtNewUIFix.prototype.showTitleOnHoverCSS = function () {
        return "\n\t\t\t.ytp-tooltip.ytp-top\n\t\t\t{\n\t\t\t\ttop: 30px;\n\t\t\t}\n\n\t\t\t.ytp-chrome-top .ytp-button\n\t\t\t{\n\t\t\t\theight: 26px; padding-top: 2px;\n\t\t\t}\n\n\t\t\t.ytp-big-mode .ytp-chrome-top .ytp-button\n\t\t\t{\n\t\t\t\theight: 30px; padding-top: 4px;\n\t\t\t\twidth: 42px !important;\n\t\t\t}\n\n\t\t\t.ytp-title-link\n\t\t\t{\n\t\t\t\tpadding-top: 6px !important;\n\t\t\t}\n\n\t\t\t.ytp-title\n\t\t\t{\n\t\t\t\tfont-size: " + (this.isEmbedded ? "100" : "125") + "% !important;\n\t\t\t}\n\n\t\t\t.ytp-gradient-bottom\n\t\t\t{\n\t\t\t\tdisplay: none !important;\n\t\t\t}\n\n\t\t\t.ytp-big-mode .ytp-title\n\t\t\t{\n\t\t\t\tfont-size: 125% !important;\n\t\t\t}\n\n\t\t\t.ytp-big-mode .ytp-tooltip.ytp-top\n\t\t\t{\n\t\t\t\ttop: 40px !important;\n\t\t\t}\n\n\t\t\t.html5-video-player:hover .ytp-gradient-top, .html5-video-player:hover .ytp-chrome-top\n\t\t\t{\n\t\t\t\tdisplay: block;\n\t\t\t}\n\n\t\t\t" + (this.autoHideFullScreen ? "" : ".html5-video-player.ytp-fullscreen:hover .ytp-gradient-top, .html5-video-player.ytp-fullscreen:hover .ytp-chrome-top, .ytp-fullscreen .ytp-gradient-top, .ytp-fullscreen .ytp-chrome-top, ") + "\n\t\t\t.html5-video-player.ended-mode:hover .ytp-gradient-top, .html5-video-player.ended-mode:hover .ytp-chrome-top, .ended-mode .ytp-gradient-top, .ended-mode .ytp-chrome-top\n\t\t\t{\n\t\t\t\tdisplay: " + (this.isEmbedded ? "block" : "none") + ";\n\t\t\t}\n\n\t\t\t.ytp-gradient-top\n\t\t\t{\n\t\t\t\tbackground-size: auto 60px !important;\n\n\t\t\t\tbackground-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABjCAYAAABaKWrYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41Ljg3O4BdAAAAtUlEQVQoU3XEz0fDcQAA0O9av7dpKpUlaTJJRhIzRhKJGLNDIqKIyBhjOkwk2SGJJBbJtNhfub3Lhw57hxcN9fWnnn7V1Y++9aWOPvWhd73pVS9q61lPetSDWrpXUw3VVdOdbnWja13pUhc615mqqqisU53oWEc61IFKKqqgfe1pV3ntaFtbymlTWW1oXWtaVUYrWtaSFrWgeaU1F0opqURoVjOa1lRoMjSh8VB8VGP/i40oigaG+Bi47+GMyAAAAABJRU5ErkJggg==) !important;\n\t\t\t}\n\n\t\t\t.ytp-big-mode .ytp-gradient-top\n\t\t\t{\n\t\t\t\tbackground-size: auto 80px !important;\n\n\t\t\t\tbackground-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABjCAYAAABaKWrYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41Ljg3O4BdAAAAtUlEQVQoU3XEz0fDcQAA0O9av7dpKpUlaTJJRhIzRhKJGLNDIqKIyBhjOkwk2SGJJBbJtNhfub3Lhw57hxcN9fWnnn7V1Y++9aWOPvWhd73pVS9q61lPetSDWrpXUw3VVdOdbnWja13pUhc615mqqqisU53oWEc61IFKKqqgfe1pV3ntaFtbymlTWW1oXWtaVUYrWtaSFrWgeaU1F0opqURoVjOa1lRoMjSh8VB8VGP/i40oigaG+Bi47+GMyAAAAABJRU5ErkJggg==) !important;\n\t\t\t}";
    };
    YtNewUIFix.prototype.addOptions = function () {
        if (window.location.href.indexOf("account_playback") < 0) {
            return;
        }
        var content = document.querySelector("div.account-content");
        var footer = document.querySelector("div.account-footer");
        if (content && footer) {
            var accSection = document.createElement("div");
            accSection.classList.add("account-section");
            var header = document.createElement("h3");
            header.classList.add("account-section-header");
            header.textContent = "Youtube New UI Fix Options";
            accSection.appendChild(header);
            accSection.appendChild(this.createOption(this.addWatchLater, "addWatchLater", "Add the watch later button to the controls", header));
            accSection.appendChild(this.createOption(this.autoHideFullScreen, "autoHideFullScreen", "Have the controls automatically hide in full-screen mode", header));
            accSection.appendChild(this.createOption(this.removeAllAnimations, "removeAllAnimations", "Remove all animations", header));
            //accSection.appendChild(this.createOption(this.revertScrubber, "revertScrubber", "Revert the scrubber icon to its original", header));
            accSection.appendChild(this.createOption(this.optionsBack, "optionsBack", "Move the 'go back' button in the settings menus to the bottom", header));
            accSection.appendChild(this.createOption(this.progressBigger, "progressBigger", "Make the progressbar take up the whole width (but not when hovering over)", header));
            accSection.appendChild(this.createOption(this.showTitleOnHover, "showTitleOnHover", "Have the title show when hovering over the video (doesn't work in embedded mode)", header));
            accSection.appendChild(this.createOption(this.alwaysShowVolume, "alwaysShowVolume", "Have the volume slider be always visible", header));
            content.insertBefore(accSection, footer);
        }
    };
    YtNewUIFix.prototype.createOption = function (optionValue, name, description, changeNotifier) {
        var accDiv = document.createElement("div");
        accDiv.classList.add("account-section-setting");
        accDiv.innerHTML = "\n\t\t    <label>\n\t\t\t    <span class='yt-uix-form-input-checkbox-container " + (optionValue ? "checked" : "") + "'>\n                    <input class='yt-uix-form-input-checkbox' name='" + name + "' " + (optionValue ? "checked='checked'" : "") + " type='checkbox'>\n                    <span class='yt-uix-form-input-checkbox-element'></span>\n                </span>\n\t\t\t    " + description + "\n\t\t    </label>";
        var accInput = accDiv.querySelector("input[name='" + name + "']");
        accInput.onclick = function () {
            localStorage.setItem(name, String(accInput.checked));
            changeNotifier.classList.add("optionChanged");
        };
        return accDiv;
    };
    YtNewUIFix.prototype.checkWatchLater = function () {
        if (this.addWatchLater && !this.watchLaterAdded && this.moviePlayer) {
            var watchLater = document.querySelector("button.ytp-watch-later-button");
            if (watchLater) {
                var qaulitybutton = (document.querySelector("button.ytp-subtitles-button") || document.querySelector("button.ytp-settings-button"));
                if (qaulitybutton) {
                    qaulitybutton.parentNode.insertBefore(watchLater, qaulitybutton.nextSibling);
                    this.watchLaterAdded = true;
                }
            }
        }
    };
    YtNewUIFix.prototype.checkMoviePlayer = function () {
        if (!this.moviePlayer || !this.moviePlayer.parentNode) {
            this.moviePlayer = document.querySelector("div.html5-video-player");
        }
        else if (!this.moviePlayer.classList.contains("seeking-mode") && !this.moviePlayer.classList.contains("dragging-mode") && (!this.autoHideFullScreen || !this.moviePlayer.classList.contains("ytp-fullscreen"))) {
            this.moviePlayer.dispatchEvent(this.mouseMoveEvent);
        }
    };
    YtNewUIFix.prototype.removePlayAnim = function () {
        return; //disabled because it messes with things
        /*if (this.removeAllAnimations && !this.playButtonReplaced)
        {
            var button: HTMLButtonElement = <HTMLButtonElement>document.querySelector('button.ytp-play-button');
            var buttonClone: HTMLButtonElement = <HTMLButtonElement>button.cloneNode(false);
            var video = <HTMLVideoElement>document.querySelector("video.html5-main-video");

            if (button && buttonClone && video)
            {
                const svgPlay: string = `
                    <svg width='100%' height='100%' viewBox='0 0 36 36' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
                        <defs>
                            <path id='ytp-19' d='M11,10 L26,18 11,26'></path>
                        </defs>
                        <use xlink:href='#ytp-19' class='ytp-svg-shadow'></use>
                        <use xlink:href='#ytp-19' class='ytp-svg-fill'></use>
                    </svg>`;
                const svgPause: string = `
                    <svg width='100%' height='100%' viewBox='0 0 36 36' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
                        <defs>
                            <path id='ytp-19' d='M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26'></path>
                        </defs>
                        <use xlink:href='#ytp-19' class='ytp-svg-shadow'></use>
                        <use xlink:href='#ytp-19' class='ytp-svg-fill'></use>
                    </svg>`;
                const svgReplay: string = `
                    <svg width='100%' height='100%' viewBox='0 0 36 36' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
                        <defs>
                            <path id='ytp-19' d='M26.466,21.04 L30.966,16 L27.8,16 C26.873,11.435 22.841,8 18.001,8 C12.474,8 8,12.477 8,18 C8,23.523 12.474,28 18.001,28 C21.181,28 24.009,26.511 25.841,24.197 L24.005,22.361 C22.652,24.217 20.471,25.427 18.001,25.427 C13.899,25.427 10.569,22.101 10.569,18 C10.569,13.898 13.899,10.572 18.001,10.572 C21.407,10.572 24.268,12.871 25.142,16 L21.966,16 L26.466,21.04'></path>
                        </defs>
                        <use xlink:href='#ytp-19' class='ytp-svg-shadow'></use>
                        <use xlink:href='#ytp-19' class='ytp-svg-fill'></use>
                    </svg>`;

                if (video.paused)
                {
                    buttonClone.innerHTML = svgPlay;
                }
                else if (video.ended)
                {
                    buttonClone.innerHTML = svgReplay;
                }
                else
                {
                    buttonClone.innerHTML = svgPause;
                }

                video.onplay = () =>
                {
                    buttonClone.innerHTML = svgPause;
                };
                video.onpause = () =>
                {
                    buttonClone.innerHTML = svgPlay;
                };
                video.onended = () =>
                {
                    buttonClone.innerHTML = svgReplay;
                };

                buttonClone.onclick = () =>
                {
                    if (button.title == "Replay")
                    {
                        video.currentTime = 0;
                        video.play();
                    }
                    else if (video.paused)
                    {
                        video.play();
                    }
                    else
                    {
                        video.pause();
                    }
                };

                button.parentElement.replaceChild(buttonClone, button);
                this.playButtonReplaced = true;
            }
        }*/
    };
    return YtNewUIFix;
}());
new YtNewUIFix(window.top != window.self).applyFix();
//# sourceMappingURL=Youtube_New_UI_Fix.user.js.map