☰

Youtube New UI Fix

Fixes the new UI to one that resembles old one

当前为 2015-08-09 提交的版本，查看 最新版本。

  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. // @include     https://www.youtube.com/*
  7. // @version     1.5.1
  8. // @grant       none
  9. // ==/UserScript==
  10. var YtNewUIFix = (function () {
  11.     function YtNewUIFix() {
  12.         this.watchLaterAdded = false;
  13.         this.moviePlayer = document.querySelector("div.html5-video-player");
  14.         this.mouseMoveEvent = document.createEvent('Events');
  15.         this.mouseMoveEvent.initEvent("mousemove", true, false);
  16.         this.addWatchLater = this.getStorage("addWatchLater", true);
  17.         this.removePlayPauseAnim = this.getStorage("removePlayPauseAnim", true);
  18.         this.autoHideFullScreen = this.getStorage("autoHideFullScreen", false);
  19.     }
  20.     YtNewUIFix.prototype.getStorage = function (key, defaultVal) {
  21.         if (!localStorage) {
  22.             return defaultVal;
  23.         }
  24.         var result = localStorage.getItem(key);
  25.         if (result) {
  26.             return result == "true";
  27.         }
  28.         else {
  29.             return defaultVal;
  30.         }
  31.     };
  32.     YtNewUIFix.prototype.addOptions = function () {
  33.         var content = document.querySelector("div.account-content");
  34.         var footer = document.querySelector("div.account-footer");
  35.         if (content && footer) {
  36.             var accSection = document.createElement("div");
  37.             accSection.classList.add("account-section");
  38.             var header = document.createElement("h3");
  39.             header.classList.add("account-section-header");
  40.             header.textContent = "Youtube New UI Fix Options";
  41.             accSection.appendChild(header);
  42.             accSection.appendChild(this.createOption(this.addWatchLater, "addWatchLater", "Add the watch later button to the controls", header));
  43.             accSection.appendChild(this.createOption(this.removePlayPauseAnim, "removePlayPauseAnim", "Remove the animation in the middle of the video when pausing/resuming", header));
  44.             accSection.appendChild(this.createOption(this.autoHideFullScreen, "autoHideFullScreen", "Have the controls automatically hide in full-screen mode", header));
  45.             content.insertBefore(accSection, footer);
  46.         }
  47.     };
  48.     YtNewUIFix.prototype.createOption = function (optionValue, name, description, changeNotifier) {
  49.         var accDiv = document.createElement("div");
  50.         accDiv.classList.add("account-section-setting");
  51.         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>";
  52.         var accInput = accDiv.querySelector("input[name='" + name + "']");
  53.         accInput.onclick = function () {
  54.             localStorage.setItem(name, String(accInput.checked));
  55.             changeNotifier.classList.add("optionChanged");
  56.         };
  57.         return accDiv;
  58.     };
  59.     YtNewUIFix.prototype.applyFix = function () {
  60.         var _this = this;
  61.         this.addCSS();
  62.         if (localStorage) {
  63.             this.addOptions();
  64.         }
  65.         setInterval(function () {
  66.             _this.checkMoviePlayer();
  67.             _this.checkWatchLater();
  68.         }, 1000);
  69.     };
  70.     YtNewUIFix.prototype.checkMoviePlayer = function () {
  71.         if (!this.moviePlayer) {
  72.             this.moviePlayer = document.querySelector("div.html5-video-player");
  73.         }
  74.         else if (!this.moviePlayer.classList.contains("seeking-mode") && (!this.autoHideFullScreen || !this.moviePlayer.classList.contains("ytp-fullscreen"))) {
  75.             this.moviePlayer.dispatchEvent(this.mouseMoveEvent);
  76.         }
  77.     };
  78.     YtNewUIFix.prototype.checkWatchLater = function () {
  79.         if (this.addWatchLater && !this.watchLaterAdded && this.moviePlayer) {
  80.             var watchLater = document.querySelector("button.ytp-watch-later-button");
  81.             if (watchLater) {
  82.                 var qaulitybutton = (document.querySelector("button.ytp-subtitles-button") || document.querySelector("button.ytp-settings-button"));
  83.                 if (qaulitybutton) {
  84.                     qaulitybutton.parentNode.insertBefore(watchLater, qaulitybutton.nextSibling);
  85.                     this.watchLaterAdded = true;
  86.                 }
  87.             }
  88.         }
  89.     };
  90.     YtNewUIFix.prototype.addCSS = function () {
  91.         var css = document.createElement("style");
  92.         css.textContent = "/* fixing the colors */\n            .ytp-chrome-bottom { background-color: #1B1B1B!important; }\n            .ytp-svg-fill { fill: #8E8E8E!important; }\n            #movie_player { height: calc(100% + 35px)!important; }\n            .html5-video-content { background-color: black!important; }\n            .ytp-panelpopup { background: rgb(28, 28, 28) none repeat scroll 0% 0%!important; }\n\n            /* moving the content below down */\n            #watch7-content, 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            #movie_player { height: calc(100% + 35px)!important; }\n            .ytp-gradient-bottom, .ytp-gradient-top, .ytp-chrome-top { display: none!important; }\n            .ytp-chrome-controls { width: calc(100% + 24px)!important; transform: translateX(-12px)!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            /* 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; }\n\n            /* scale down the controls big mode */\n            .ytp-big-mode .ytp-chrome-bottom { transform: translateY(24px)!important; }\n            .html5-video-container { height: 100%!important; }\n            " + (this.autoHideFullScreen ? "" : ".html5-main-video { max-height: calc(100% - 35px)!important; }") + "\n            .ytp-big-mode .ytp-progress-bar-container { transform: translateY(-1px)!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            /* 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: 49px!important; }\n\n            /* rules for the watch later button */\n            .ytp-watch-later-button { width: 24px!important; float: right!important; }\n            .ytp-tooltip-image-enabled { bottom: 49px!important; top: auto!important; }\n\n            /* disable play/pause animaton */\n            " + (this.removePlayPauseAnim ? ".ytp-bezel { display: none!important; }" : "") + "\n\n            /* rules for the options */\n            h3.optionChanged::after { content: 'Refresh page to save changes'; color: red; position: relative; left: 15px; }";
  93.         document.head.appendChild(css);
  94.     };
  95.     return YtNewUIFix;
  96. })();
  97. new YtNewUIFix().applyFix();
  98. //# sourceMappingURL=Youtube_New_UI_Fix.user.js.map