Youtube New UI Fix

Fixes the new UI to one that resembles old one

Od 10.07.2016.. Pogledajte najnovija verzija.

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==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