☰

Youtube New UI Fix

Fixes the new UI to one that resembles old one

目前为 2016-04-22 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name        Youtube New UI Fix
  3. // @namespace   YtNewUIFix
  4. // @description Fixes the new UI to one that resembles old one
  5. // @author      Roy Scheerens
  6. // @homepageURL https://greasyfork.org/en/scripts/11485-youtube-new-ui-fix
  7. // @include     https://www.youtube.com/*
  8. // @include     https://youtube.googleapis.com/embed/*
  9. // @version     1.11.0
  10. // @grant       none
  11. // ==/UserScript==
  12. /* Original typescript code: https://copy.com/TzRldsobyPt8XcKA */
  13. var YtNewUIFix = (function () {
  14.     function YtNewUIFix(isEmbedded) {
  15.         this.watchLaterAdded = false;
  16.         this.playButtonReplaced = false;
  17.         this.isEmbedded = isEmbedded;
  18.         this.moviePlayer = document.querySelector("div.html5-video-player");
  19.         var api = document.querySelector(".player-api");
  20.         this.mouseMoveEvent = document.createEvent('Events');
  21.         this.mouseMoveEvent.initEvent("mousemove", true, false);
  22.         this.addWatchLater = this.getStorage("addWatchLater", true);
  23.         this.autoHideFullScreen = this.getStorage("autoHideFullScreen", false);
  24.         this.removeAllAnimations = this.getStorage("removeAllAnimations", false);
  25.         this.revertScrubber = this.getStorage("revertScrubber", false);
  26.         this.optionsBack = this.getStorage("optionsBack", false);
  27.         this.progressBigger = this.getStorage("progressBigger", false);
  28.         this.showTitleOnHover = this.getStorage("showTitleOnHover", false);
  29.         this.alwaysShowVolume = this.getStorage("alwaysShowVolume", false);
  30.     }
  31.     YtNewUIFix.prototype.applyFix = function () {
  32.         var _this = this;
  33.         this.addCSS();
  34.         if (localStorage) {
  35.             this.addOptions();
  36.         }
  37.         setInterval(function () {
  38.             _this.checkMoviePlayer();
  39.             _this.checkWatchLater();
  40.             _this.removePlayAnim();
  41.         }, 1000);
  42.     };
  43.     YtNewUIFix.prototype.getStorage = function (key, defaultVal) {
  44.         if (!localStorage) {
  45.             return defaultVal;
  46.         }
  47.         var result = localStorage.getItem(key);
  48.         if (result) {
  49.             return result == "true";
  50.         }
  51.         else {
  52.             return defaultVal;
  53.         }
  54.     };
  55.     YtNewUIFix.prototype.addCSS = function () {
  56.         var css = document.createElement("style");
  57.         css.id = "YoutubeNewUIFix-Style";
  58.         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 ? "" : ".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; } .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\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; font-size: 100% }\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(100vh - 35px)!important; }" : ".html5-main-video, .ytp-storyboard-framepreview-img { max-height: calc(100vh - 35px)!important; }") + " /* vh instead of % because chrome is weird */\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: 5px; height: 15px; margin-top: -7.5px; }\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\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 ?
  59.             ".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; }" +
  60.                 ".ytp-progress-bar-container:not(.ytp-pulling) .ytp-scrubber-button { height: 6px!important; width: 6px!important; }" : "");
  61.         document.head.appendChild(css);
  62.     };
  63.     YtNewUIFix.prototype.optionsBackCSS = function () {
  64.         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}";
  65.     };
  66.     YtNewUIFix.prototype.showTitleOnHoverCSS = function () {
  67.         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}";
  68.     };
  69.     YtNewUIFix.prototype.addOptions = function () {
  70.         if (window.location.href.indexOf("account_playback") < 0) {
  71.             return;
  72.         }
  73.         var content = document.querySelector("div.account-content");
  74.         var footer = document.querySelector("div.account-footer");
  75.         if (content && footer) {
  76.             var accSection = document.createElement("div");
  77.             accSection.classList.add("account-section");
  78.             var header = document.createElement("h3");
  79.             header.classList.add("account-section-header");
  80.             header.textContent = "Youtube New UI Fix Options";
  81.             accSection.appendChild(header);
  82.             accSection.appendChild(this.createOption(this.addWatchLater, "addWatchLater", "Add the watch later button to the controls", header));
  83.             accSection.appendChild(this.createOption(this.autoHideFullScreen, "autoHideFullScreen", "Have the controls automatically hide in full-screen mode", header));
  84.             accSection.appendChild(this.createOption(this.removeAllAnimations, "removeAllAnimations", "Remove all animations", header));
  85.             //accSection.appendChild(this.createOption(this.revertScrubber, "revertScrubber", "Revert the scrubber icon to its original", header));
  86.             accSection.appendChild(this.createOption(this.optionsBack, "optionsBack", "Move the 'go back' button in the settings menus to the bottom", header));
  87.             accSection.appendChild(this.createOption(this.progressBigger, "progressBigger", "Make the progressbar take up the whole width (but not when hovering over)", header));
  88.             accSection.appendChild(this.createOption(this.showTitleOnHover, "showTitleOnHover", "Have the title show when hovering over the video (doesn't work in embedded mode)", header));
  89.             accSection.appendChild(this.createOption(this.alwaysShowVolume, "alwaysShowVolume", "Have the volume slider be always visible", header));
  90.             content.insertBefore(accSection, footer);
  91.         }
  92.     };
  93.     YtNewUIFix.prototype.createOption = function (optionValue, name, description, changeNotifier) {
  94.         var accDiv = document.createElement("div");
  95.         accDiv.classList.add("account-section-setting");
  96.         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>";
  97.         var accInput = accDiv.querySelector("input[name='" + name + "']");
  98.         accInput.onclick = function () {
  99.             localStorage.setItem(name, String(accInput.checked));
  100.             changeNotifier.classList.add("optionChanged");
  101.         };
  102.         return accDiv;
  103.     };
  104.     YtNewUIFix.prototype.checkWatchLater = function () {
  105.         if (this.addWatchLater && !this.watchLaterAdded && this.moviePlayer) {
  106.             var watchLater = document.querySelector("button.ytp-watch-later-button");
  107.             if (watchLater) {
  108.                 var qaulitybutton = (document.querySelector("button.ytp-subtitles-button") || document.querySelector("button.ytp-settings-button"));
  109.                 if (qaulitybutton) {
  110.                     qaulitybutton.parentNode.insertBefore(watchLater, qaulitybutton.nextSibling);
  111.                     this.watchLaterAdded = true;
  112.                 }
  113.             }
  114.         }
  115.     };
  116.     YtNewUIFix.prototype.checkMoviePlayer = function () {
  117.         if (!this.moviePlayer || !this.moviePlayer.parentNode) {
  118.             this.moviePlayer = document.querySelector("div.html5-video-player");
  119.         }
  120.         else if (!this.moviePlayer.classList.contains("seeking-mode") && (!this.autoHideFullScreen || !this.moviePlayer.classList.contains("ytp-fullscreen"))) {
  121.             this.moviePlayer.dispatchEvent(this.mouseMoveEvent);
  122.         }
  123.     };
  124.     YtNewUIFix.prototype.removePlayAnim = function () {
  125.         return; //disabled because it messes with things
  126.         /*if (this.removeAllAnimations && !this.playButtonReplaced)
  127.         {
  128.             var button: HTMLButtonElement = <HTMLButtonElement>document.querySelector('button.ytp-play-button');
  129.             var buttonClone: HTMLButtonElement = <HTMLButtonElement>button.cloneNode(false);
  130.             var video = <HTMLVideoElement>document.querySelector("video.html5-main-video");
  131.  
  132.             if (button && buttonClone && video)
  133.             {
  134.                 const svgPlay: string = `
  135.                     <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'>
  136.                         <defs>
  137.                             <path id='ytp-19' d='M11,10 L26,18 11,26'></path>
  138.                         </defs>
  139.                         <use xlink:href='#ytp-19' class='ytp-svg-shadow'></use>
  140.                         <use xlink:href='#ytp-19' class='ytp-svg-fill'></use>
  141.                     </svg>`;
  142.                 const svgPause: string = `
  143.                     <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'>
  144.                         <defs>
  145.                             <path id='ytp-19' d='M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26'></path>
  146.                         </defs>
  147.                         <use xlink:href='#ytp-19' class='ytp-svg-shadow'></use>
  148.                         <use xlink:href='#ytp-19' class='ytp-svg-fill'></use>
  149.                     </svg>`;
  150.                 const svgReplay: string = `
  151.                     <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'>
  152.                         <defs>
  153.                             <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>
  154.                         </defs>
  155.                         <use xlink:href='#ytp-19' class='ytp-svg-shadow'></use>
  156.                         <use xlink:href='#ytp-19' class='ytp-svg-fill'></use>
  157.                     </svg>`;
  158.  
  159.                 if (video.paused)
  160.                 {
  161.                     buttonClone.innerHTML = svgPlay;
  162.                 }
  163.                 else if (video.ended)
  164.                 {
  165.                     buttonClone.innerHTML = svgReplay;
  166.                 }
  167.                 else
  168.                 {
  169.                     buttonClone.innerHTML = svgPause;
  170.                 }
  171.  
  172.                 video.onplay = () =>
  173.                 {
  174.                     buttonClone.innerHTML = svgPause;
  175.                 };
  176.                 video.onpause = () =>
  177.                 {
  178.                     buttonClone.innerHTML = svgPlay;
  179.                 };
  180.                 video.onended = () =>
  181.                 {
  182.                     buttonClone.innerHTML = svgReplay;
  183.                 };
  184.  
  185.                 buttonClone.onclick = () =>
  186.                 {
  187.                     if (button.title == "Replay")
  188.                     {
  189.                         video.currentTime = 0;
  190.                         video.play();
  191.                     }
  192.                     else if (video.paused)
  193.                     {
  194.                         video.play();
  195.                     }
  196.                     else
  197.                     {
  198.                         video.pause();
  199.                     }
  200.                 };
  201.  
  202.                 button.parentElement.replaceChild(buttonClone, button);
  203.                 this.playButtonReplaced = true;
  204.             }
  205.         }*/
  206.     };
  207.     return YtNewUIFix;
  208. }());
  209. new YtNewUIFix(window.top != window.self).applyFix();
  210. //# sourceMappingURL=Youtube_New_UI_Fix.user.js.map