☰

Youtube UI Fix (2022)

Moves the controls under the video and makes the UI look like it was before august 2015 + removes round UI that was updated by youtube in October 2022

  1. // ==UserScript==
  2. // @name        Youtube UI Fix (2022)
  3. // @namespace   YtUIFix22
  4. // @description Moves the controls under the video and makes the UI look like it was before august 2015 + removes round UI that was updated by youtube in October 2022
  5. // @author      Roy Scheerens and Anton Borisovich
  6. // @homepageURL https://greasyfork.org/en/scripts/454068
  7. // @include     https://www.youtube.com*
  8. // @include     https://youtube.com*
  9. // @include     https://youtube.googleapis.com/embed*
  10. // @include     https://www.youtube-nocookie.com/embed*
  11. // @version     2.5.1
  12. // @grant       none
  13. // ==/UserScript==
  14.  
  15. // Original by @Roy192 (https://greasyfork.org/en/scripts/11485)
  16. // Anton Borisovich (@"40 Seconds Cat") is not the original author. I just customized this for myself and want to share it
  17.  
  18. // 2022 06 fixes by Anton Borisovich#8400
  19. //  Fixed mute button size
  20. //  Removed autoplay button
  21. //  Fixed video position in fullscreen mode
  22. //  Fixed volume slider in fullscreen mode
  23.  
  24. // 2022 11 fixes for new round UI by Anton Borisovich#8400
  25. //  Removed "pills" below video player (subscribe, like, share, etc. buttons), now they are rounded squares
  26. //  Searchbox now rounded square as well
  27.  
  28. var YtNewUIFix = /** @class */ (function () {
  29.     function YtNewUIFix() {
  30.         var _this = this;
  31.         this.prefix = "ytfix::";
  32.         this.isEmbedded = window.top !== window.self;
  33.         this.isSettingsPage = window.location.href.toLowerCase().match("(\\.com\\/embed|\\.com)\\/ui_fix_options") !== null;
  34.         this.mouseMoveEvent = document.createEvent("Events");
  35.         this.mouseMoveEvent.initEvent("mousemove", false, false);
  36.         document.body.classList.add("yt-ui-fix");
  37.         this.readOptions();
  38.         addEventListener("storage", function (e) {
  39.             if (e.key && e.key.indexOf(_this.prefix) >= 0) {
  40.                 _this.readOptions();
  41.                 _this.showOptions();
  42.                 _this.addCSS();
  43.                 _this.handleWatchLater();
  44.             }
  45.         });
  46.     }
  47.     YtNewUIFix.prototype.readOptions = function () {
  48.         this.setOption("addWatchLater", false);
  49.         this.setOption("showControlsFullscreen", false);
  50.         this.setOption("showControlsNonFullscreen", true);
  51.         this.setOption("changeColorsFullscreen", true);
  52.         this.setOption("changeColorsNonFullscreen", true);
  53.         this.setOption("removeAnimations", false);
  54.         this.setOption("optionsReversed", false);
  55.         this.setOption("progressBigger", true);
  56.         this.setOption("showTitleOnHover", false);
  57.         this.setOption("alwaysVolume", false); // do not hide volume slider
  58.         this.setOption("FixRoundUI", true); // Remove "pills"
  59.     };
  60.     YtNewUIFix.prototype.applyFix = function () {
  61.         var _this = this;
  62.         if (document.body.innerHTML.length === 0) {
  63.             // empty page can be ignored (in share tab before it's active)
  64.             return;
  65.         }
  66.         if (!this.isSettingsPage) {
  67.             this.addCSS();
  68.             this.checkMoviePlayer();
  69.             window.setInterval(function () {
  70.                 _this.checkMoviePlayer();
  71.                 _this.handleWatchLater();
  72.             }, 1000);
  73.         }
  74.         this.addOptions();
  75.     };
  76.     YtNewUIFix.prototype.setOption = function (key, defaultVal) {
  77.         if (!localStorage) {
  78.             this[key] = defaultVal;
  79.         }
  80.         var result = this.getSetting(key);
  81.         if (result) {
  82.             this[key] = (result === "true");
  83.         }
  84.         else {
  85.             this[key] = defaultVal;
  86.         }
  87.     };
  88.     YtNewUIFix.prototype.getSetting = function (key) {
  89.         return localStorage.getItem(this.prefix + key);
  90.     };
  91.     YtNewUIFix.prototype.setSetting = function (key, value) {
  92.         localStorage.setItem(this.prefix + key, String(value));
  93.     };
  94.     YtNewUIFix.prototype.checkMoviePlayer = function () {
  95.         if (!this.moviePlayer || !this.moviePlayer.parentNode) {
  96.             this.moviePlayer = document.querySelector(".html5-video-player");
  97.         }
  98.         if (this.moviePlayer && this.moviePlayer.parentNode) {
  99.             if (!this.moviePlayer.classList.contains("seeking-mode") &&
  100.                 !this.moviePlayer.classList.contains("dragging-mode") &&
  101.                 (this.showControlsNonFullscreen && !this.moviePlayer.classList.contains("ytp-fullscreen") || this.showControlsFullscreen && this.moviePlayer.classList.contains("ytp-fullscreen"))) {
  102.                 this.moviePlayer.dispatchEvent(this.mouseMoveEvent);
  103.             }
  104.             if (this.showTitleOnHover) {
  105.                 this.moviePlayer.classList.remove("ytp-hide-info-bar");
  106.             }
  107.         }
  108.     };
  109.     YtNewUIFix.prototype.handleWatchLater = function () {
  110.         if (!this.watchLaterbutton || !this.settingsButton) {
  111.             this.watchLaterbutton = document.querySelector(".ytp-chrome-top .ytp-watch-later-button");
  112.             if (!this.watchLaterbutton) return;
  113.             this.settingsButton = document.querySelector(".ytp-settings-button");
  114.             if (this.watchLaterbutton && this.watchLaterbutton.parentElement) {
  115.                 this.oldWatchParent = this.watchLaterbutton.parentElement;
  116.             }
  117.         }
  118.         if (this.watchLaterbutton && this.settingsButton) {
  119.             if (this.addWatchLater && this.settingsButton.parentNode) {
  120.                 if (this.watchLaterbutton.parentNode !== this.settingsButton.parentNode) {
  121.                     this.settingsButton.parentNode.insertBefore(this.watchLaterbutton, this.settingsButton);
  122.                 }
  123.             }
  124.             else {
  125.                 this.oldWatchParent.appendChild(this.watchLaterbutton);
  126.             }
  127.         }
  128.     };
  129.     YtNewUIFix.prototype.addCSS = function () {
  130.         var css = "";
  131.         var StyleId = "YoutubeNewUIFix-Style";
  132.         css = this.fixColors(css);
  133.         css = this.fixControls(css);
  134.         css = this.fixBigMode(css);
  135.         css = this.addExtras(css);
  136.         var style = document.getElementById(StyleId);
  137.         if (style && style.parentNode) {
  138.             style.parentNode.removeChild(style);
  139.         }
  140.         style = document.createElement("style");
  141.         style.id = StyleId;
  142.         style.textContent = css;
  143.         document.head.appendChild(style);
  144.     };
  145.     YtNewUIFix.prototype.fixControls = function (css) {
  146.         // options
  147.         css += "h3.optionChanged::after { content: 'Refresh page to save changes'; color: red; position: relative; left: 15px; }\n\n";
  148.         css += ".account-content-on-player { top: 0px; left: 0px; position: absolute; padding: 0; margin: 0; width: 100%; height: 100% }";
  149.         css += ".account-content-on-player account-section { top: 50px; left: 50px; z-index: 100; background-color: white; padding: 10px 25px 30px; margin: 0; }";
  150.         css += ".html5-video-player.ytp-fullscreen .html5-video-container { height: 100vh; }";
  151.         css += ".html5-video-player:not(.ytp-fullscreen) .html5-video-container { height: 100%; }";
  152.         css += ".ytp-chrome-bottom { left: 0 !important; }\n";
  153.         css += ".ytp-chrome-controls { margin: 0 -12px; }\n";
  154.         css += "body:not(.ytwp-window-player) #page:not(.watch-stage-mode) #watch7-sidebar { transform: translateY(-35px); }\n";
  155.         css += "body:not(.ytwp-window-player) #page.watch-stage-mode #watch-appbar-playlist { margin-top: 35px; }\n";
  156.         //css += ".html5-main-video { top: 0!important; }\n"; // removed cus' useless and ugly (when playing 16:9 video on 4:3 monitor in fullscreen mode video appears on top)
  157.         //  move content below video down in the material layout
  158.         css += "ytd-watch[theater] #main { padding-top: 35px!important; }";
  159.         css += "ytd-watch:not([theater]) #content-separator { padding-bottom: 35px!important; }";
  160.         // width correction of the controls in the material layout
  161.         css += ".html5-main-video { max-width: 100%; }";
  162.         css += ".ytp-chrome-bottom { max-width: calc(100% - 24px); width: calc(100% - 24px); }";
  163.         // progressbar
  164.         css += ".ytp-progress-bar-container:not(.ytp-pulling) { height: 6px!important; bottom: 29px!important;  }\n";
  165.         css += ".ytp-progress-list { transform-origin: center top; }\n\n";
  166.         css += ".ytp-big-mode .ytp-progress-list { transform: scaleY(0.6); }\n\n";
  167.         // scale down buttons
  168.  
  169.         css += ".ytp-chrome-bottom { height: 35px!important; padding: 0!important; }\n";
  170.         css += ".ytp-chrome-controls .ytp-button:not(.ytp-chapter-title,.ytp-live-badge) { width: 33px!important; }\n"; // scaling down some buttons
  171.         css += ".ytp-chrome-controls .ytp-button.ytp-live-badge:before { margin-top: 13px!important; }\n"; // scaling "LIVE" circle
  172.         css += ".ytp-chrome-controls .ytp-button.ytp-chapter-title { height: 31px; line-height: 32px!important; font-size: 12px!important; }\n"; // scaling chapter title
  173.         css += ".ytp-chrome-controls .ytp-watch-later-icon { width: 24px; height: 24px; }\n";
  174.         css += ".ytp-chrome-controls .ytp-watch-later-button { opacity: 1!important; display: inline-block!important; transform: translateY(-4px); }\n";
  175.         css += ".ytp-left-controls { margin-left: 5px }\n"; // moving buttons away from the left edge
  176.         css += ".ytp-time-display { height: 31px; line-height: 32px!important; font-size: 12px!important; }\n"; // scaling time
  177.         css += ".ytp-left-controls, .ytp-right-controls { height: 32px!important; margin-top: 3px; line-height: 36px; }\n"; // adjusting the gaps between the buttons
  178.         css += ".ytp-right-controls > button:first-child {display: none!important;}\n"; // deleting autoplay button
  179.         css += ".ytp-popup.ytp-settings-menu { bottom: 45px; }\n"; // scaling settings popup
  180.  
  181.         //scale down mute button and volume slider
  182.         css += ".ytp-left-controls .ytp-volume-area > button:first-child {padding: 4px;}\n"; // fixing mute bitton size
  183.         css += ".ytp-left-controls .ytp-volume-area .ytp-volume-slider { bottom: 1px!important }\n"; // fixing slider
  184.  
  185.         // badges
  186.         css += ".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 { content:''!important; top:6px!important; right:4px!important; height:9px!important; width:13px!important; padding: 0!important; }\n";
  187.         css += ".ytp-settings-button.ytp-hd-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik01LDcgTDYsNyBMNiw4IEw1LDggTDUsNyBaIE0xMCwzIEwxMCw0IEw4LDQgTDgsMyBMMTAsMyBaIE0zLDYgTDMsNSBMNSw1IEw1LDYgTDMsNiBaIE0yLDcgTDMsNyBMMyw4IEwyLDggTDIsNyBaIE03LDcgTDEwLDcgTDEwLDggTDcsOCBMNyw3IFogTTEwLDYgTDExLDYgTDExLDcgTDEwLDcgTDEwLDYgWiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIwLjY0NzEiIGZpbGwtcnVsZT0iZXZlbm9kZCIgLz48cGF0aCBkPSJNNSw3IEw1LDYgTDUsNSBMMyw1IEwzLDYgTDMsNyBMMiw3IEwyLDIgTDMsMiBMMyw0IEw1LDQgTDUsMiBMNiwyIEw2LDcgTDUsNyBaIE0xMSw2IEwxMCw2IEwxMCw3IEw3LDcgTDcsMiBMMTAsMiBMMTAsMyBMMTEsMyBMMTEsNiBaIE0xMCw0IEwxMCwzIEw4LDMgTDgsNCBMOCw2IEwxMCw2IEwxMCw0IFoiIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgLz48L3N2Zz4=)!important; }";
  188.         css += ".ytp-settings-button.ytp-4k-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0xMCw0IEwxMSw0IEwxMSw1IEwxMCw1IEwxMCw0IFogTTEwLDcgTDExLDcgTDExLDggTDEwLDggTDEwLDcgWiBNOCw1IEwxMCw1IEwxMCw2IEw4LDYgTDgsNSBaIE03LDcgTDgsNyBMOCw4IEw3LDggTDcsNyBaIE01LDYgTDYsNiBMNiw3IEw1LDcgTDUsNiBaIE00LDcgTDUsNyBMNSw4IEw0LDggTDQsNyBaIE0yLDYgTDQsNiBMNCw3IEwyLDcgTDIsNiBaIE0zLDQgTDQsNCBMNCw1IEwzLDUgTDMsNCBaIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9IjAuNjQ3MSIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjxwYXRoIGQ9Ik0xMSw1IEwxMSw3IEwxMCw3IEwxMCw2IEwxMCw1IEwxMSw1IFogTTEwLDUgTDgsNSBMOCw2IEw4LDcgTDcsNyBMNywyIEw4LDIgTDgsNCBMMTAsNCBMMTAsNSBaIE00LDQgTDMsNCBMMyw1IEw0LDUgTDQsNCBaIE00LDcgTDQsNiBMMiw2IEwyLDQgTDMsNCBMMywzIEw0LDMgTDQsMiBMNSwyIEw1LDUgTDYsNSBMNiw2IEw1LDYgTDUsNyBMNCw3IFogTTEwLDIgTDExLDIgTDExLDQgTDEwLDQgTDEwLDIgWiIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjwvc3ZnPg==)!important; }";
  189.         css += ".ytp-settings-button.ytp-5k-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0xMCw0IEwxMSw0IEwxMSw1IEwxMCw1IEwxMCw0IFogTTEwLDcgTDExLDcgTDExLDggTDEwLDggTDEwLDcgWiBNOCw1IEwxMCw1IEwxMCw2IEw4LDYgTDgsNSBaIE03LDcgTDgsNyBMOCw4IEw3LDggTDcsNyBaIE01LDYgTDYsNiBMNiw3IEw1LDcgTDUsNiBaIE0yLDcgTDUsNyBMNSw4IEwyLDggTDIsNyBaIE0yLDUgTDUsNSBMNSw2IEwyLDYgTDIsNSBaIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9IjAuNjQ3MSIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjxwYXRoIGQ9Ik0xMSw1IEwxMSw3IEwxMCw3IEwxMCw2IEwxMCw1IEwxMSw1IE0xMCw1IEw4LDUgTDgsNiBMOCw3IEw3LDcgTDcsMiBMOCwyIEw4LDQgTDEwLDQgTDEwLDUgTTEwLDIgTDExLDIgTDExLDQgTDEwLDQgTDEwLDIgTTIsNiBMNSw2IEw1LDcgTDIsNyBNNSw1IEw2LDUgTDYsNiBMNSw2IE01LDQgTDMsNCBMMywzIEw2LDMgTDYsMiBMMiwyIEwyLDUgTDUsNSBMNSw0IFoiIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgLz48L3N2Zz4=)!important; }";
  190.         css += ".ytp-settings-button.ytp-8k-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0xMCw0IEwxMSw0IEwxMSw1IEwxMCw1IEwxMCw0IFogTTEwLDcgTDExLDcgTDExLDggTDEwLDggTDEwLDcgWiBNOCw1IEwxMCw1IEwxMCw2IEw4LDYgTDgsNSBaIE03LDcgTDgsNyBMOCw4IEw3LDggTDcsNyBaIE01LDYgTDYsNiBMNiw3IEw1LDcgTDUsNiBaIE0zLDUgTDUsNSBMNSw2IEwzLDYgTDMsNSBaIE0zLDMgTDUsMyBMNSw0IEwzLDQgTDMsMyBaIE01LDQgTDYsNCBMNiw1IEw1LDUgTDUsNCBaIE0yLDQgTDMsNCBMMyw1IEwyLDUgTDIsNCBaIE0yLDYgTDMsNiBMMyw3IEwyLDcgTDIsNiBaIE0zLDcgTDUsNyBMNSw4IEwzLDggTDMsNyBaIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9IjAuNjQ3MSIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjxwYXRoIGQ9Ik0xMSw1IEwxMSw3IEwxMCw3IEwxMCw2IEwxMCw1IEwxMSw1IE0xMCw1IEw4LDUgTDgsNiBMOCw3IEw3LDcgTDcsMiBMOCwyIEw4LDQgTDEwLDQgTDEwLDUgTTEwLDIgTDExLDIgTDExLDQgTDEwLDQgTDEwLDIgTTMsNiBMNSw2IEw1LDcgTDMsNyBNMywyIEw1LDIgTDUsMyBMMywzIEwzLDIgWiBNNSw1IEw2LDUgTDYsNiBMNSw2IEw1LDUgWiBNMyw0IEw1LDQgTDUsNSBMMyw1IEwzLDQgWiBNNSwzIEw2LDMgTDYsNCBMNSw0IEw1LDMgWiBNMiw1IEwzLDUgTDMsNiBMMiw2IEwyLDUgWiBNMiwzIEwzLDMgTDMsNCBMMiw0IEwyLDMgWiIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjwvc3ZnPg==)!important; }";
  191.         css += ".ytp-settings-button.ytp-3d-badge-grey:after,.ytp-settings-button.ytp-3d-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0yIDJoNHY1aC00di0xaDN2LTFoLTN2LTFoM3YtMWgtM3pNNyAyaDN2MWgtMnYzaDJ2MWgtM3pNMTAgM2gxdjNoLTF6IiBmaWxsPSIjZmZmIiAvPjxwYXRoIGQ9Ik0yIDNoM3YxaC0zek04IDNoMnYxaC0yek0yIDVoM3YxaC0zek0xMCA2aDF2MWgtMXpNMiA3aDR2MWgtNHpNNyA3aDN2MWgtM3oiIGZpbGw9IiMwMDAiIGZpbGwtb3BhY2l0eT0iMC42NDcxIiAvPjwvc3ZnPg==)!important; }";
  192.         css += ".ytp-color-white .ytp-settings-button.ytp-hd-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik01LDcgTDUsNiBMNSw1IEwzLDUgTDMsNiBMMyw3IEwyLDcgTDIsMiBMMywyIEwzLDQgTDUsNCBMNSwyIEw2LDIgTDYsNyBMNSw3IFogTTExLDYgTDEwLDYgTDEwLDcgTDcsNyBMNywyIEwxMCwyIEwxMCwzIEwxMSwzIEwxMSw2IFogTTEwLDQgTDEwLDMgTDgsMyBMOCw0IEw4LDYgTDEwLDYgTDEwLDQgWiIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjwvc3ZnPg==)!important; }";
  193.         css += ".ytp-color-white .ytp-settings-button.ytp-4k-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0xMSw1IEwxMSw3IEwxMCw3IEwxMCw2IEwxMCw1IEwxMSw1IFogTTEwLDUgTDgsNSBMOCw2IEw4LDcgTDcsNyBMNywyIEw4LDIgTDgsNCBMMTAsNCBMMTAsNSBaIE00LDQgTDMsNCBMMyw1IEw0LDUgTDQsNCBaIE00LDcgTDQsNiBMMiw2IEwyLDQgTDMsNCBMMywzIEw0LDMgTDQsMiBMNSwyIEw1LDUgTDYsNSBMNiw2IEw1LDYgTDUsNyBMNCw3IFogTTEwLDIgTDExLDIgTDExLDQgTDEwLDQgTDEwLDIgWiIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjwvc3ZnPg==)!important; }";
  194.         css += ".ytp-color-white .ytp-settings-button.ytp-5k-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0xMSw1IEwxMSw3IEwxMCw3IEwxMCw2IEwxMCw1IEwxMSw1IE0xMCw1IEw4LDUgTDgsNiBMOCw3IEw3LDcgTDcsMiBMOCwyIEw4LDQgTDEwLDQgTDEwLDUgTTEwLDIgTDExLDIgTDExLDQgTDEwLDQgTDEwLDIgTTIsNiBMNSw2IEw1LDcgTDIsNyBNNSw1IEw2LDUgTDYsNiBMNSw2IE01LDQgTDMsNCBMMywzIEw2LDMgTDYsMiBMMiwyIEwyLDUgTDUsNSBMNSw0IFoiIGZpbGwtcnVsZT0iZXZlbm9kZCIgLz48L3N2Zz4=)!important; }";
  195.         css += ".ytp-color-white .ytp-settings-button.ytp-8k-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0xMSw1IEwxMSw3IEwxMCw3IEwxMCw2IEwxMCw1IEwxMSw1IE0xMCw1IEw4LDUgTDgsNiBMOCw3IEw3LDcgTDcsMiBMOCwyIEw4LDQgTDEwLDQgTDEwLDUgTTEwLDIgTDExLDIgTDExLDQgTDEwLDQgTDEwLDIgTTMsNiBMNSw2IEw1LDcgTDMsNyBNMywyIEw1LDIgTDUsMyBMMywzIEwzLDIgWiBNNSw1IEw2LDUgTDYsNiBMNSw2IEw1LDUgWiBNMyw0IEw1LDQgTDUsNSBMMyw1IEwzLDQgWiBNNSwzIEw2LDMgTDYsNCBMNSw0IEw1LDMgWiBNMiw1IEwzLDUgTDMsNiBMMiw2IEwyLDUgWiBNMiwzIEwzLDMgTDMsNCBMMiw0IEwyLDMgWiIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjwvc3ZnPg==)!important; }";
  196.         css += ".ytp-color-white .ytp-settings-button.ytp-3d-badge-grey:after,.ytp-color-white .ytp-settings-button.ytp-3d-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0yIDJoNHY1aC00di0xaDN2LTFoLTN2LTFoM3YtMWgtM3pNNyAyaDN2MWgtMnYzaDJ2MWgtM3pNMTAgM2gxdjNoLTF6IiBmaWxsPSIjMDAwIiAvPjwvc3ZnPg==)!important; }";
  197.         // closed captions (line under the button, and position of captions)
  198.         css += ".ytp-chrome-controls .ytp-button[aria-pressed='true']::after { width: 18px; left: 8px; }\n";
  199.         css += ".caption-window.ytp-caption-window-bottom {	margin-bottom:40px!important }\n";
  200.         css += ".ytp-player-content { top: 48px !important; bottom: 49px !important; }\n";
  201.         // fix for material layout where controls go over title.
  202.         css += "ytd-watch-flexy[theater] #player-theater-container, ytd-watch-flexy #player { margin-bottom: 35px; }\n";
  203.         // fix watch later messing up embedded
  204.         css += ".ytp-chrome-bottom .ytp-watch-later-title { display: none; }\n";
  205.  
  206.         if (this.isEmbedded && this.addWatchLater) {
  207.             css += ".ytp-watch-later-button { margin: 0!important; }\n";
  208.         }
  209.         return css;
  210.     };
  211.     YtNewUIFix.prototype.fixBigMode = function (css) { // fullscreen mode fixes
  212.         /* big mode: smaller scrubber */
  213.         css += ".ytp-big-mode .ytp-scrubber-button { height: 13px!important; width: 13px!important; border-radius: 6.5px!important; }\n";
  214.         css += ".ytp-big-mode .ytp-scrubber-container { top: -4px; left: -6.5px; }\n\n";
  215.         /* big mode: 24px edges instead of 12px */
  216.         css += ".ytp-big-mode .ytp-left-controls { margin-left: -7px }\n";
  217.         css += ".ytp-big-mode .ytp-fullscreen-button { margin-right: -7px }\n\n";
  218.         /* big mode: smaller volume slider */
  219.         css += ".ytp-big-mode .ytp-volume-slider { min-height: 0px!important; padding-top: 4px!important}\n";
  220.         css += ".ytp-big-mode .ytp-volume-slider-handle { min-height: 0px; width: 11px; height: 11px; border-radius: 6px; margin-top: -6px; }\n";
  221.         css += ".ytp-big-mode .ytp-volume-slider-handle:before { height: 3.5px!important; }\n";
  222.         css += ".ytp-big-mode .ytp-volume-slider-handle:after { height: 3.5px!important; }\n";
  223.         css += ".ytp-big-mode .ytp-volume-slider-active .ytp-volume-panel { min-height: 0px; width: 72px; }\n\n";
  224.         return css;
  225.     };
  226.     YtNewUIFix.prototype.fixColors = function (css) {
  227.         if (this.changeColorsNonFullscreen) {
  228.             css += ".html5-video-player:not(.ytp-big-mode) .ytp-chrome-bottom { background-color: #1B1B1B; border-left: 12px solid #1B1B1B; border-right: 12px solid #1B1B1B; }\n";
  229.             css += ".html5-video-player:not(.ytp-big-mode) .ytp-gradient-bottom { display: none!important; }\n";
  230.             css += ".html5-video-player:not(.ytp-big-mode) .ytp-chrome-controls svg path { fill: #8E8E8E }\n";
  231.         }
  232.         else {
  233.             css += ".html5-video-player:not(.ytp-big-mode) .ytp-chrome-bottom { border-left: 12px solid transparent; border-right: 12px solid transparent; }\n";
  234.             if (this.showControlsNonFullscreen) {
  235.                 css += ".html5-video-player:not(.ytp-fullscreen) .ytp-gradient-bottom { display: none!important; }\n";
  236.             }
  237.         }
  238.         if (this.changeColorsFullscreen) {
  239.             css += ".ytp-big-mode .ytp-chrome-bottom { background-color: #1B1B1B; border-left: 24px solid #1B1B1B; border-right: 24px solid #1B1B1B; }\n";
  240.             css += ".ytp-big-mode .ytp-gradient-bottom { display: none!important; }\n";
  241.             css += ".ytp-big-mode .ytp-chrome-controls svg path { fill: #8E8E8E }\n";
  242.         }
  243.         else {
  244.             css += ".ytp-big-mode .ytp-chrome-bottom { border-left: 24px solid transparent; border-right: 24px solid transparent; }\n";
  245.             if (this.showControlsFullscreen) {
  246.                 css += ".html5-video-player.ytp-fullscreen .ytp-gradient-bottom { display: none!important; }\n";
  247.             }
  248.         }
  249.         css += ".ytp-gradient-top { display: none!important; }\n";
  250.         css += "\n";
  251.         return css;
  252.     };
  253.     YtNewUIFix.prototype.addExtras = function (css) {
  254.         if (this.showControlsFullscreen) {
  255.             css += "html:not(.floater):not(.iri-always-visible) .html5-video-player.ytp-fullscreen:not(.ytp-hide-controls) .html5-main-video  { height: calc(100% - 35px)!important; min-height: calc(100% - 35px) !important; max-height: calc(100% - 35px) !important; }\n";
  256.             css += ".html5-video-player.ytp-fullscreen:not(.ytp-hide-controls) .ytp-chrome-bottom { opacity: 1!important; display: block!important; }\n";
  257.         }
  258.         if (this.showControlsNonFullscreen) {
  259.             css += "html:not(.floater):not(.iri-always-visible) .html5-video-player:not(.ytp-fullscreen):not(.ytp-hide-controls) .html5-main-video  { height: calc(100% - 35px)!important; min-height: calc(100% - 35px) !important; max-height: calc(100% - 35px) !important; }\n";
  260.             css += ".html5-video-player:not(.ytp-fullscreen):not(.ytp-hide-controls) .ytp-chrome-bottom { opacity: 1!important; display: block!important; }\n";
  261.             if (!this.isEmbedded) {
  262.                 css += "html:not(.floater):not(.iri-always-visible):not(.part_fullbrowser) #movie_player:not(.ytp-fullscreen):not(.ytp-hide-controls) { height: calc(100% + 35px)!important; }\n";
  263.             }
  264.             css += "html.floater .html5-video-player, html.iri-always-visible .html5-video-player { padding-bottom: 35px; }\n";
  265.             css += "#theater-background { padding-bottom: 35px; }\n\n";
  266.             css += "#placeholder-player { padding-bottom: 35px; }\n";
  267.         }
  268.         if (!this.showControlsFullscreen && !this.showControlsNonFullscreen) {
  269.             css += ".html5-video-player .html5-main-video  { height: 100%!important; }\n";
  270.         }
  271.         if (!this.showTitleOnHover) {
  272.             // hide always
  273.             css += ".ytp-chrome-top { display: none!important; }\n";
  274.         }
  275.         if (this.removeAnimations) {
  276.             css += ".ytp-bezel { display: none!important; }\n";
  277.             css += ".html5-endscreen *, .html5-video-player div { transition-property: none !important; animation: none !important; }\n";
  278.         }
  279.         if (this.optionsReversed) {
  280.             css += ".ytp-panel { display: -webkit-flex; -webkit-flex-direction: column; display: flex; flex-direction: column; }\n";
  281.             css += ".ytp-panel-header { order: 2; border-top: 1px solid #444; border-bottom: none; }\n";
  282.             css += ".ytp-panel-content { order: 1; }\n";
  283.         }
  284.         if (this.alwaysVolume) {
  285.             /* Have the volume slider always be visible */
  286.             css += ".ytp-volume-panel { width: 52px; margin-right: 3px; } .ytp-big-mode .ytp-volume-panel { width: 78px; }";
  287.         }
  288.         if (this.progressBigger) {
  289.             /* Make the progressbar fill up the entire space when not hovering over (thanks to Takato) */
  290.             css += "              .ytp-progress-bar-container:not(:hover):not(.ytp-pulling) .ytp-chapter-hover-container:not(.ytp-exp-chapter-hover-container) .ytp-progress-list { width: calc(100% + 24px); left: -12px; }";
  291.             css += ".ytp-big-mode .ytp-progress-bar-container:not(:hover):not(.ytp-pulling) .ytp-chapter-hover-container:not(.ytp-exp-chapter-hover-container) .ytp-progress-list { width: calc(100% + 48px); left: -24px; }";
  292.         }
  293.         if (this.FixRoundUI) {
  294.             css += ".yt-spec-button-shape-next--size-m:not(.yt-spec-button-shape-next--text) {border-radius: 5px;}"
  295.             css += "ytd-searchbox[desktop-searchbar-style=rounded_corner_borders_light_btn] #container.ytd-searchbox, ytd-searchbox[desktop-searchbar-style=rounded_corner_autofocus] #container.ytd-searchbox {border-radius: 5px 0 0 5px;}"
  296.             css += "ytd-searchbox[desktop-searchbar-style=rounded_corner_borders_light_btn] #search-icon-legacy.ytd-searchbox, ytd-searchbox[desktop-searchbar-style=rounded_corner_autofocus] #search-icon-legacy.ytd-searchbox {border-radius: 0 5px 5px 0;}"
  297.             css += ".yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start {border-radius: 5px 0 0 5px;}"
  298.             css += ".yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-end {border-radius: 0 5px 5px 0;}"
  299.         }
  300.         return css;
  301.     };
  302.     YtNewUIFix.prototype.showOptions = function () {
  303.         var options = document.querySelectorAll("#YoutubeNewUIFix-Options input");
  304.         if (options.length > 0) {
  305.             for (var i = 0; i < options.length; i++) {
  306.                 options[i].checked = (this.getSetting(options[i].name) === "true");
  307.             }
  308.         }
  309.     };
  310.     YtNewUIFix.prototype.addOptions = function () {
  311.         var _this = this;
  312.         if (localStorage) {
  313.             var accSection_1 = document.createElement("div");
  314.             accSection_1.id = "YoutubeNewUIFix-Options";
  315.             accSection_1.classList.add("account-section");
  316.             var header = document.createElement("h3");
  317.             header.classList.add("account-section-header");
  318.             header.textContent = "Youtube UI Fix Options";
  319.             accSection_1.appendChild(header);
  320.             {
  321.                 accSection_1.appendChild(this.createOption("addWatchLater", "Add the watch later button to the controls"));
  322.                 accSection_1.appendChild(this.createOption("changeColorsNonFullscreen", "Change the colors back to their original gray (in non-full-screen mode)"));
  323.                 accSection_1.appendChild(this.createOption("changeColorsFullscreen", "Change the colors back to their original gray in full-screen mode"));
  324.                 accSection_1.appendChild(this.createOption("showControlsNonFullscreen", "Always show the controls (in non-full-screen mode)"));
  325.                 accSection_1.appendChild(this.createOption("showControlsFullscreen", "Always show the controls in full-screen mode"));
  326.                 accSection_1.appendChild(this.createOption("removeAnimations", "Remove all animations"));
  327.                 accSection_1.appendChild(this.createOption("optionsReversed", "Move the 'go back' button in the settings menus to the bottom"));
  328.                 accSection_1.appendChild(this.createOption("progressBigger", "Make the progressbar take up the whole width (but not when hovering over)"));
  329.                 accSection_1.appendChild(this.createOption("showTitleOnHover", "Have the title show when hovering over the video"));
  330.                 accSection_1.appendChild(this.createOption("alwaysVolume", "Have the volume slider be always visible"));
  331.             }
  332.             var content = document.querySelector(".account-content");
  333.             var footer = document.querySelector(".account-footer");
  334.             var selectedItem = document.querySelector(".creator-sidebar-item.selected");
  335.             if (!content) {
  336.                 content = document.querySelector("#contents");
  337.                 if (!content) {
  338.                     return;
  339.                 }
  340.             }
  341.             if (!selectedItem) {
  342.                 selectedItem = document.querySelector(".ytd-settings-sidebar-renderer[active]");
  343.             }
  344.             if (this.isSettingsPage) {
  345.                 document.head.innerHTML = document.body.innerHTML = "";
  346.                 document.body.appendChild(accSection_1);
  347.             }
  348.             else if (content && selectedItem.innerHTML.indexOf("Playback") >= 0) {
  349.                 if (footer) {
  350.                     content.insertBefore(accSection_1, footer);
  351.                 }
  352.                 else {
  353.                     content.appendChild(accSection_1);
  354.                 }
  355.             }
  356.             var exportBtn_1 = document.createElement("button");
  357.             exportBtn_1.classList.add("yt-uix-button", "yt-uix-button-size-default", "yt-uix-button-primary", "account-action-button");
  358.             exportBtn_1.type = "button";
  359.             exportBtn_1.textContent = "Export Settings";
  360.             exportBtn_1.onclick = function () {
  361.                 var settingsScript = "// ==UserScript==\n";
  362.                 settingsScript += "// @name        Youtube UI Fix Settings\n";
  363.                 settingsScript += "// @namespace   YtUIFix\n";
  364.                 settingsScript += "// @description Sets the settings for Youtube UI Fix\n";
  365.                 settingsScript += "// @author      Roy Scheerens\n";
  366.                 settingsScript += "// @homepageURL https://greasyfork.org/en/scripts/11485\n";
  367.                 settingsScript += "// @include     https://www.youtube.com*\n";
  368.                 settingsScript += "// @include     https://youtube.googleapis.com/embed*\n";
  369.                 settingsScript += "// @include     https://www.youtube-nocookie.com/embed*\n";
  370.                 settingsScript += "// @version     0.0.1\n";
  371.                 settingsScript += "// @grant       none\n";
  372.                 settingsScript += "// ==/UserScript==\n";
  373.                 settingsScript += "\n";
  374.                 settingsScript += "localStorage.setItem('ytfix::addWatchLater',              String(" + String(_this["addWatchLater"]) + "));\n";
  375.                 settingsScript += "localStorage.setItem('ytfix::showControlsFullscreen',     String(" + String(_this["showControlsFullscreen"]) + "));\n";
  376.                 settingsScript += "localStorage.setItem('ytfix::showControlsNonFullscreen',  String(" + String(_this["showControlsNonFullscreen"]) + "));\n";
  377.                 settingsScript += "localStorage.setItem('ytfix::changeColorsFullscreen',     String(" + String(_this["changeColorsFullscreen"]) + "));\n";
  378.                 settingsScript += "localStorage.setItem('ytfix::changeColorsNonFullscreen',  String(" + String(_this["changeColorsNonFullscreen"]) + "));\n";
  379.                 settingsScript += "localStorage.setItem('ytfix::removeAnimations',           String(" + String(_this["removeAnimations"]) + "));\n";
  380.                 settingsScript += "localStorage.setItem('ytfix::optionsReversed',            String(" + String(_this["optionsReversed"]) + "));\n";
  381.                 settingsScript += "localStorage.setItem('ytfix::progressBigger',             String(" + String(_this["progressBigger"]) + "));\n";
  382.                 settingsScript += "localStorage.setItem('ytfix::showTitleOnHover',           String(" + String(_this["showTitleOnHover"]) + "));\n";
  383.                 settingsScript += "localStorage.setItem('ytfix::alwaysVolume',               String(" + String(_this["alwaysVolume"]) + "));\n";
  384.                 var hiddenText = accSection_1.getElementsByTagName("textarea")[0] || document.createElement("textarea");
  385.                 hiddenText.textContent = settingsScript;
  386.                 accSection_1.appendChild(hiddenText);
  387.                 hiddenText.select();
  388.                 document.execCommand("cut");
  389.                 accSection_1.removeChild(hiddenText);
  390.                 exportBtn_1.innerHTML = "Settings Userscipt Copied";
  391.             };
  392.             if (footer) {
  393.                 footer.appendChild(exportBtn_1);
  394.             }
  395.             else {
  396.                 content.appendChild(exportBtn_1);
  397.             }
  398.         }
  399.     };
  400.     YtNewUIFix.prototype.createOption = function (name, description) {
  401.         var _this = this;
  402.         var accDiv = document.createElement("div");
  403.         accDiv.classList.add("account-section-setting");
  404.         accDiv.innerHTML = "\n\t\t    <label style=\"font-size: 13px\">\n\t\t\t    <span class='yt-uix-form-input-checkbox-container " + (this[name] ? "checked" : "") + "'>\n                    <input class='yt-uix-form-input-checkbox' name='" + name + "' " + (this[name] ? "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>";
  405.         var accInput = accDiv.querySelector("input[name='" + name + "']");
  406.         accInput.onclick = function () {
  407.             _this.setSetting(name, accInput.checked);
  408.             _this[name] = accInput.checked;
  409.         };
  410.         return accDiv;
  411.     };
  412.     return YtNewUIFix;
  413. }());
  414. new YtNewUIFix().applyFix();