Youtube UI Fix

Moves the controls under the video and makes the UI look like it was before august 2015

当前为 2023-09-26 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Youtube UI Fix
  3. // @namespace YtUIFix
  4. // @description Moves the controls under the video and makes the UI look like it was before august 2015
  5. // @author Roy Scheerens
  6. // @homepageURL https://greasyfork.org/en/scripts/11485
  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.4.14
  12. // @grant none
  13. // ==/UserScript==
  14. var YtNewUIFix = /** @class */ (function () {
  15. function YtNewUIFix() {
  16. var _this = this;
  17. this.prefix = "ytfix::";
  18. this.isEmbedded = window.top !== window.self;
  19. this.isSettingsPage = window.location.href.toLowerCase().match("(\\.com\\/embed|\\.com)\\/ui_fix_options") !== null;
  20. document.body.classList.add("yt-ui-fix");
  21. this.readOptions();
  22. addEventListener("storage", function (e) {
  23. if (e.key && e.key.indexOf(_this.prefix) >= 0) {
  24. _this.readOptions();
  25. _this.showOptions();
  26. _this.addCSS();
  27. _this.handleWatchLater();
  28. }
  29. });
  30. }
  31. YtNewUIFix.prototype.readOptions = function () {
  32. this.setOption("addWatchLater", true);
  33. this.setOption("showControlsFullscreen", true);
  34. this.setOption("showControlsNonFullscreen", true);
  35. this.setOption("changeColorsFullscreen", true);
  36. this.setOption("changeColorsNonFullscreen", true);
  37. this.setOption("removeAnimations", false);
  38. this.setOption("optionsReversed", false);
  39. this.setOption("progressBigger", false);
  40. this.setOption("alwaysVolume", false);
  41. };
  42. YtNewUIFix.prototype.applyFix = function () {
  43. var _this = this;
  44. if (document.body.innerHTML.length === 0) {
  45. // empty page can be ignored (in share tab before it's active)
  46. return;
  47. }
  48. if (!this.isSettingsPage) {
  49. this.addCSS();
  50. this.checkMoviePlayer();
  51. window.setInterval(function () {
  52. _this.checkMoviePlayer();
  53. _this.handleWatchLater();
  54. }, 1000);
  55. }
  56. this.addOptions();
  57. };
  58. YtNewUIFix.prototype.setOption = function (key, defaultVal) {
  59. if (!localStorage) {
  60. this[key] = defaultVal;
  61. }
  62. var result = this.getSetting(key);
  63. if (result) {
  64. this[key] = (result === "true");
  65. }
  66. else {
  67. this[key] = defaultVal;
  68. }
  69. };
  70. YtNewUIFix.prototype.getSetting = function (key) {
  71. return localStorage.getItem(this.prefix + key);
  72. };
  73. YtNewUIFix.prototype.setSetting = function (key, value) {
  74. localStorage.setItem(this.prefix + key, String(value));
  75. };
  76. YtNewUIFix.prototype.checkMoviePlayer = function () {
  77. if (!this.moviePlayer || !this.moviePlayer.parentNode) {
  78. this.moviePlayer = document.querySelector(".html5-video-player");
  79. }
  80. if (this.moviePlayer && this.moviePlayer.parentNode) {
  81. if (!this.moviePlayer.classList.contains("seeking-mode") &&
  82. !this.moviePlayer.classList.contains("dragging-mode") &&
  83. (this.showControlsNonFullscreen && !this.moviePlayer.classList.contains("ytp-fullscreen") || this.showControlsFullscreen && this.moviePlayer.classList.contains("ytp-fullscreen"))) {
  84. var video = this.moviePlayer.querySelector("video");
  85. var progressBarWidthsCollection_1 = this.moviePlayer.querySelectorAll(".ytp-progress-bar-padding");
  86. if (video && progressBarWidthsCollection_1) {
  87. var totalProgressBarWidth = 0;
  88. for (var i = 0; i < progressBarWidthsCollection_1.length; i++) {
  89. totalProgressBarWidth += progressBarWidthsCollection_1[i].offsetWidth;
  90. }
  91. var durationWidthRatio_1 = video.duration / totalProgressBarWidth;
  92. var updateProgress = function (progressBarChaptersCollection, progress) {
  93. if (progressBarChaptersCollection) {
  94. // loop inside chapters
  95. var chaptersPixelWidthUntilCurrentChapter = 0;
  96. for (var i = 0; i < progressBarWidthsCollection_1.length; i++) {
  97. if (progress > durationWidthRatio_1 * (chaptersPixelWidthUntilCurrentChapter + progressBarWidthsCollection_1[i].offsetWidth)) {
  98. progressBarChaptersCollection[i].style.transform = "scaleX(1)";
  99. chaptersPixelWidthUntilCurrentChapter += progressBarWidthsCollection_1[i].offsetWidth;
  100. }
  101. else {
  102. var currentTimeInChapterInSeconds = progress - (durationWidthRatio_1 * chaptersPixelWidthUntilCurrentChapter);
  103. var currentChapterLengthInSeconds = durationWidthRatio_1 * progressBarWidthsCollection_1[i].offsetWidth;
  104. var currentChapterTimeRatio = currentTimeInChapterInSeconds / currentChapterLengthInSeconds;
  105. progressBarChaptersCollection[i].style.transform = "scaleX(" + currentChapterTimeRatio + ")";
  106. break;
  107. }
  108. }
  109. }
  110. };
  111. updateProgress(this.moviePlayer.querySelectorAll(".ytp-play-progress"), video.currentTime);
  112. updateProgress(this.moviePlayer.querySelectorAll(".ytp-load-progress"), video.buffered.end(video.buffered.length - 1));
  113. var currentTime = this.moviePlayer.querySelector(".ytp-time-current");
  114. if (currentTime) {
  115. currentTime.innerText = this.prettifyVideoTime(video);
  116. }
  117. }
  118. }
  119. }
  120. };
  121. YtNewUIFix.prototype.prettifyVideoTime = function (video) {
  122. var seconds = "" + Math.floor(video.currentTime % 60);
  123. var minutes = "" + Math.floor((video.currentTime % 3600) / 60);
  124. var hours = "" + Math.floor(video.currentTime / 3600);
  125. if (video.currentTime / 60 > 60) {
  126. return hours + ":" + minutes.padStart(2, '0') + ":" + seconds.padStart(2, '0');
  127. }
  128. else {
  129. return minutes + ":" + seconds.padStart(2, '0');
  130. }
  131. };
  132. YtNewUIFix.prototype.handleWatchLater = function () {
  133. if (!this.watchLaterbutton || !this.settingsButton) {
  134. this.watchLaterbutton = document.querySelector(".ytp-chrome-top .ytp-watch-later-button");
  135. if (!this.watchLaterbutton)
  136. return;
  137. this.settingsButton = document.querySelector(".ytp-settings-button");
  138. if (this.watchLaterbutton && this.watchLaterbutton.parentElement) {
  139. this.oldWatchParent = this.watchLaterbutton.parentElement;
  140. }
  141. }
  142. if (this.watchLaterbutton && this.settingsButton) {
  143. if (this.addWatchLater && this.settingsButton.parentNode) {
  144. if (this.watchLaterbutton.parentNode !== this.settingsButton.parentNode) {
  145. this.settingsButton.parentNode.insertBefore(this.watchLaterbutton, this.settingsButton);
  146. }
  147. }
  148. else {
  149. this.oldWatchParent.appendChild(this.watchLaterbutton);
  150. }
  151. }
  152. };
  153. YtNewUIFix.prototype.addCSS = function () {
  154. var css = "";
  155. var StyleId = "YoutubeNewUIFix-Style";
  156. css = this.fixColors(css);
  157. css = this.fixControls(css);
  158. css = this.fixBigMode(css);
  159. css = this.addExtras(css);
  160. var style = document.getElementById(StyleId);
  161. if (style && style.parentNode) {
  162. style.parentNode.removeChild(style);
  163. }
  164. style = document.createElement("style");
  165. style.id = StyleId;
  166. style.textContent = css;
  167. document.head.appendChild(style);
  168. };
  169. YtNewUIFix.prototype.fixControls = function (css) {
  170. // options
  171. css += "h3.optionChanged::after { content: 'Refresh page to save changes'; color: red; position: relative; left: 15px; }\n\n";
  172. css += ".account-content-on-player { top: 0px; left: 0px; position: absolute; padding: 0; margin: 0; width: 100%; height: 100% }";
  173. css += ".account-content-on-player account-section { top: 50px; left: 50px; z-index: 100; background-color: white; padding: 10px 25px 30px; margin: 0; }";
  174. css += ".html5-video-player.ytp-fullscreen .html5-video-container { height: 100vh; }";
  175. css += ".html5-video-player:not(.ytp-fullscreen) .html5-video-container { height: 100%; }";
  176. css += ".ytp-chrome-bottom { left: 0 !important; }\n";
  177. css += ".ytp-chrome-controls { margin: 0 -12px; }\n";
  178. css += "body:not(.ytwp-window-player) #page:not(.watch-stage-mode) #watch7-sidebar { transform: translateY(-35px); }\n";
  179. css += "body:not(.ytwp-window-player) #page.watch-stage-mode #watch-appbar-playlist { margin-top: 35px; }\n";
  180. css += ".html5-main-video { top: 0!important; }\n";
  181. // move content below video down in the material layout
  182. css += "ytd-watch-flexy[theater] #columns { margin-top: 35px!important; }";
  183. css += "ytd-watch-flexy:not([theater]) #below { margin-top: 35px!important; }";
  184. // remove stupid border rounding
  185. css += "ytd-player { overflow: visible!important; border-radius: 0!important; }";
  186. // width correction of the controls in the material layout
  187. css += ".html5-main-video { max-width: 100%; }";
  188. css += "ytd-watch-flexy[theater] .html5-main-video { object-fit: contain!important; }";
  189. css += ".ytp-chrome-bottom { max-width: calc(100% - 24px); width: calc(100% - 24px); }";
  190. // progressbar
  191. css += ".ytp-progress-bar-container:not(.ytp-pulling) { height: 5px!important; bottom: 30px!important; }\n";
  192. css += ".ytp-progress-list { transform-origin: center top; }\n\n";
  193. css += ".ytp-big-mode .ytp-progress-list { transform: scaleY(0.6); }\n\n";
  194. // scale down
  195. css += ".ytp-chrome-bottom { height: 35px!important; padding: 0!important; }\n";
  196. css += ".ytp-chrome-controls .ytp-button:not(.ytp-chapter-title):not(.ytp-watch-later-button) { width: 33px!important; }\n";
  197. css += ".ytp-chrome-controls .ytp-watch-later-icon { width: 24px; height: 24px; }\n";
  198. css += ".ytp-chrome-controls .ytp-watch-later-button { opacity: 1!important; width: 24px!important; display: inline-block!important; }\n";
  199. css += ".ytp-left-controls { margin-left: 5px }\n";
  200. css += ".ytp-time-display { height: 31px; line-height: 32px!important; font-size: 12px!important; }\n";
  201. css += ".ytp-left-controls, .ytp-right-controls { height: 32px!important; margin-top: 3px; line-height: 36px; }\n\n";
  202. // badges
  203. 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";
  204. css += ".ytp-settings-button.ytp-hd-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik01LDcgTDYsNyBMNiw4IEw1LDggTDUsNyBaIE0xMCwzIEwxMCw0IEw4LDQgTDgsMyBMMTAsMyBaIE0zLDYgTDMsNSBMNSw1IEw1LDYgTDMsNiBaIE0yLDcgTDMsNyBMMyw4IEwyLDggTDIsNyBaIE03LDcgTDEwLDcgTDEwLDggTDcsOCBMNyw3IFogTTEwLDYgTDExLDYgTDExLDcgTDEwLDcgTDEwLDYgWiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIwLjY0NzEiIGZpbGwtcnVsZT0iZXZlbm9kZCIgLz48cGF0aCBkPSJNNSw3IEw1LDYgTDUsNSBMMyw1IEwzLDYgTDMsNyBMMiw3IEwyLDIgTDMsMiBMMyw0IEw1LDQgTDUsMiBMNiwyIEw2LDcgTDUsNyBaIE0xMSw2IEwxMCw2IEwxMCw3IEw3LDcgTDcsMiBMMTAsMiBMMTAsMyBMMTEsMyBMMTEsNiBaIE0xMCw0IEwxMCwzIEw4LDMgTDgsNCBMOCw2IEwxMCw2IEwxMCw0IFoiIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgLz48L3N2Zz4=)!important; }";
  205. css += ".ytp-settings-button.ytp-4k-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0xMCw0IEwxMSw0IEwxMSw1IEwxMCw1IEwxMCw0IFogTTEwLDcgTDExLDcgTDExLDggTDEwLDggTDEwLDcgWiBNOCw1IEwxMCw1IEwxMCw2IEw4LDYgTDgsNSBaIE03LDcgTDgsNyBMOCw4IEw3LDggTDcsNyBaIE01LDYgTDYsNiBMNiw3IEw1LDcgTDUsNiBaIE00LDcgTDUsNyBMNSw4IEw0LDggTDQsNyBaIE0yLDYgTDQsNiBMNCw3IEwyLDcgTDIsNiBaIE0zLDQgTDQsNCBMNCw1IEwzLDUgTDMsNCBaIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9IjAuNjQ3MSIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjxwYXRoIGQ9Ik0xMSw1IEwxMSw3IEwxMCw3IEwxMCw2IEwxMCw1IEwxMSw1IFogTTEwLDUgTDgsNSBMOCw2IEw4LDcgTDcsNyBMNywyIEw4LDIgTDgsNCBMMTAsNCBMMTAsNSBaIE00LDQgTDMsNCBMMyw1IEw0LDUgTDQsNCBaIE00LDcgTDQsNiBMMiw2IEwyLDQgTDMsNCBMMywzIEw0LDMgTDQsMiBMNSwyIEw1LDUgTDYsNSBMNiw2IEw1LDYgTDUsNyBMNCw3IFogTTEwLDIgTDExLDIgTDExLDQgTDEwLDQgTDEwLDIgWiIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjwvc3ZnPg==)!important; }";
  206. css += ".ytp-settings-button.ytp-5k-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0xMCw0IEwxMSw0IEwxMSw1IEwxMCw1IEwxMCw0IFogTTEwLDcgTDExLDcgTDExLDggTDEwLDggTDEwLDcgWiBNOCw1IEwxMCw1IEwxMCw2IEw4LDYgTDgsNSBaIE03LDcgTDgsNyBMOCw4IEw3LDggTDcsNyBaIE01LDYgTDYsNiBMNiw3IEw1LDcgTDUsNiBaIE0yLDcgTDUsNyBMNSw4IEwyLDggTDIsNyBaIE0yLDUgTDUsNSBMNSw2IEwyLDYgTDIsNSBaIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9IjAuNjQ3MSIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjxwYXRoIGQ9Ik0xMSw1IEwxMSw3IEwxMCw3IEwxMCw2IEwxMCw1IEwxMSw1IE0xMCw1IEw4LDUgTDgsNiBMOCw3IEw3LDcgTDcsMiBMOCwyIEw4LDQgTDEwLDQgTDEwLDUgTTEwLDIgTDExLDIgTDExLDQgTDEwLDQgTDEwLDIgTTIsNiBMNSw2IEw1LDcgTDIsNyBNNSw1IEw2LDUgTDYsNiBMNSw2IE01LDQgTDMsNCBMMywzIEw2LDMgTDYsMiBMMiwyIEwyLDUgTDUsNSBMNSw0IFoiIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgLz48L3N2Zz4=)!important; }";
  207. css += ".ytp-settings-button.ytp-8k-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0xMCw0IEwxMSw0IEwxMSw1IEwxMCw1IEwxMCw0IFogTTEwLDcgTDExLDcgTDExLDggTDEwLDggTDEwLDcgWiBNOCw1IEwxMCw1IEwxMCw2IEw4LDYgTDgsNSBaIE03LDcgTDgsNyBMOCw4IEw3LDggTDcsNyBaIE01LDYgTDYsNiBMNiw3IEw1LDcgTDUsNiBaIE0zLDUgTDUsNSBMNSw2IEwzLDYgTDMsNSBaIE0zLDMgTDUsMyBMNSw0IEwzLDQgTDMsMyBaIE01LDQgTDYsNCBMNiw1IEw1LDUgTDUsNCBaIE0yLDQgTDMsNCBMMyw1IEwyLDUgTDIsNCBaIE0yLDYgTDMsNiBMMyw3IEwyLDcgTDIsNiBaIE0zLDcgTDUsNyBMNSw4IEwzLDggTDMsNyBaIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9IjAuNjQ3MSIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjxwYXRoIGQ9Ik0xMSw1IEwxMSw3IEwxMCw3IEwxMCw2IEwxMCw1IEwxMSw1IE0xMCw1IEw4LDUgTDgsNiBMOCw3IEw3LDcgTDcsMiBMOCwyIEw4LDQgTDEwLDQgTDEwLDUgTTEwLDIgTDExLDIgTDExLDQgTDEwLDQgTDEwLDIgTTMsNiBMNSw2IEw1LDcgTDMsNyBNMywyIEw1LDIgTDUsMyBMMywzIEwzLDIgWiBNNSw1IEw2LDUgTDYsNiBMNSw2IEw1LDUgWiBNMyw0IEw1LDQgTDUsNSBMMyw1IEwzLDQgWiBNNSwzIEw2LDMgTDYsNCBMNSw0IEw1LDMgWiBNMiw1IEwzLDUgTDMsNiBMMiw2IEwyLDUgWiBNMiwzIEwzLDMgTDMsNCBMMiw0IEwyLDMgWiIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjwvc3ZnPg==)!important; }";
  208. 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; }";
  209. css += ".ytp-color-white .ytp-settings-button.ytp-hd-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik01LDcgTDUsNiBMNSw1IEwzLDUgTDMsNiBMMyw3IEwyLDcgTDIsMiBMMywyIEwzLDQgTDUsNCBMNSwyIEw2LDIgTDYsNyBMNSw3IFogTTExLDYgTDEwLDYgTDEwLDcgTDcsNyBMNywyIEwxMCwyIEwxMCwzIEwxMSwzIEwxMSw2IFogTTEwLDQgTDEwLDMgTDgsMyBMOCw0IEw4LDYgTDEwLDYgTDEwLDQgWiIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjwvc3ZnPg==)!important; }";
  210. css += ".ytp-color-white .ytp-settings-button.ytp-4k-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0xMSw1IEwxMSw3IEwxMCw3IEwxMCw2IEwxMCw1IEwxMSw1IFogTTEwLDUgTDgsNSBMOCw2IEw4LDcgTDcsNyBMNywyIEw4LDIgTDgsNCBMMTAsNCBMMTAsNSBaIE00LDQgTDMsNCBMMyw1IEw0LDUgTDQsNCBaIE00LDcgTDQsNiBMMiw2IEwyLDQgTDMsNCBMMywzIEw0LDMgTDQsMiBMNSwyIEw1LDUgTDYsNSBMNiw2IEw1LDYgTDUsNyBMNCw3IFogTTEwLDIgTDExLDIgTDExLDQgTDEwLDQgTDEwLDIgWiIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjwvc3ZnPg==)!important; }";
  211. css += ".ytp-color-white .ytp-settings-button.ytp-5k-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0xMSw1IEwxMSw3IEwxMCw3IEwxMCw2IEwxMCw1IEwxMSw1IE0xMCw1IEw4LDUgTDgsNiBMOCw3IEw3LDcgTDcsMiBMOCwyIEw4LDQgTDEwLDQgTDEwLDUgTTEwLDIgTDExLDIgTDExLDQgTDEwLDQgTDEwLDIgTTIsNiBMNSw2IEw1LDcgTDIsNyBNNSw1IEw2LDUgTDYsNiBMNSw2IE01LDQgTDMsNCBMMywzIEw2LDMgTDYsMiBMMiwyIEwyLDUgTDUsNSBMNSw0IFoiIGZpbGwtcnVsZT0iZXZlbm9kZCIgLz48L3N2Zz4=)!important; }";
  212. css += ".ytp-color-white .ytp-settings-button.ytp-8k-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0xMSw1IEwxMSw3IEwxMCw3IEwxMCw2IEwxMCw1IEwxMSw1IE0xMCw1IEw4LDUgTDgsNiBMOCw3IEw3LDcgTDcsMiBMOCwyIEw4LDQgTDEwLDQgTDEwLDUgTTEwLDIgTDExLDIgTDExLDQgTDEwLDQgTDEwLDIgTTMsNiBMNSw2IEw1LDcgTDMsNyBNMywyIEw1LDIgTDUsMyBMMywzIEwzLDIgWiBNNSw1IEw2LDUgTDYsNiBMNSw2IEw1LDUgWiBNMyw0IEw1LDQgTDUsNSBMMyw1IEwzLDQgWiBNNSwzIEw2LDMgTDYsNCBMNSw0IEw1LDMgWiBNMiw1IEwzLDUgTDMsNiBMMiw2IEwyLDUgWiBNMiwzIEwzLDMgTDMsNCBMMiw0IEwyLDMgWiIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjwvc3ZnPg==)!important; }";
  213. 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; }";
  214. // closed captions (line under the button, and position of captions)
  215. css += ".ytp-chrome-controls .ytp-button[aria-pressed='true']::after { width: 18px; left: 8px; }\n";
  216. css += ".caption-window.ytp-caption-window-bottom { margin-bottom:40px!important }\n";
  217. css += ".ytp-player-content { top: 48px !important; bottom: 49px !important; }\n";
  218. // fix watch later messing up embedded
  219. css += ".ytp-chrome-bottom .ytp-watch-later-title { display: none; }\n";
  220. if (this.isEmbedded && this.addWatchLater) {
  221. css += ".ytp-watch-later-button { margin: 0!important; }\n";
  222. }
  223. return css;
  224. };
  225. YtNewUIFix.prototype.fixBigMode = function (css) {
  226. /* big mode: smaller scrubber */
  227. css += ".ytp-big-mode .ytp-scrubber-button { height: 13px!important; width: 13px!important; border-radius: 6.5px!important; }\n";
  228. css += ".ytp-big-mode .ytp-scrubber-container { top: -4px; left: -6.5px; }\n\n";
  229. /* big mode: 24px edges instead of 12px */
  230. css += ".ytp-big-mode .ytp-left-controls { margin-left: -7px }\n";
  231. css += ".ytp-big-mode .ytp-fullscreen-button { margin-right: -7px }\n\n";
  232. /* big mode: smaller volume slider */
  233. css += ".ytp-big-mode .ytp-volume-slider-handle { width: 12px; height: 12px; border-radius: 6px; margin-top: -6px; }\n";
  234. css += ".ytp-big-mode .ytp-volume-slider-active .ytp-volume-panel { width: 72px; }\n\n";
  235. /* padding around volume should be 0 2 */
  236. css += ".ytp-button.ytp-mute-button { padding: 0 2px!important; }\n\n";
  237. return css;
  238. };
  239. YtNewUIFix.prototype.fixColors = function (css) {
  240. if (this.changeColorsNonFullscreen) {
  241. 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";
  242. css += ".html5-video-player:not(.ytp-big-mode) .ytp-gradient-bottom { display: none!important; }\n";
  243. css += ".html5-video-player:not(.ytp-big-mode) .ytp-chrome-controls svg path { fill: #8E8E8E }\n";
  244. }
  245. else {
  246. css += ".html5-video-player:not(.ytp-big-mode) .ytp-chrome-bottom { border-left: 12px solid transparent; border-right: 12px solid transparent; }\n";
  247. if (this.showControlsNonFullscreen) {
  248. css += ".html5-video-player:not(.ytp-fullscreen) .ytp-gradient-bottom { display: none!important; }\n";
  249. }
  250. }
  251. if (this.changeColorsFullscreen) {
  252. css += ".ytp-big-mode .ytp-chrome-bottom { background-color: #1B1B1B; border-left: 24px solid #1B1B1B; border-right: 24px solid #1B1B1B; }\n";
  253. css += ".ytp-big-mode .ytp-gradient-bottom { display: none!important; }\n";
  254. css += ".ytp-big-mode .ytp-chrome-controls svg path { fill: #8E8E8E }\n";
  255. }
  256. else {
  257. css += ".ytp-big-mode .ytp-chrome-bottom { border-left: 24px solid transparent; border-right: 24px solid transparent; }\n";
  258. if (this.showControlsFullscreen) {
  259. css += ".html5-video-player.ytp-fullscreen .ytp-gradient-bottom { display: none!important; }\n";
  260. }
  261. }
  262. css += ".ytp-gradient-top { display: none!important; }\n";
  263. css += "\n";
  264. return css;
  265. };
  266. YtNewUIFix.prototype.addExtras = function (css) {
  267. if (this.showControlsFullscreen) {
  268. 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";
  269. css += ".html5-video-player.ytp-fullscreen:not(.ytp-hide-controls) .ytp-chrome-bottom { opacity: 1!important; display: block!important; }\n";
  270. }
  271. if (this.showControlsNonFullscreen) {
  272. 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";
  273. css += ".html5-video-player:not(.ytp-fullscreen):not(.ytp-hide-controls) .ytp-chrome-bottom { opacity: 1!important; display: block!important; }\n";
  274. if (!this.isEmbedded) {
  275. 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";
  276. }
  277. css += "html.floater .html5-video-player, html.iri-always-visible .html5-video-player { padding-bottom: 35px; }\n";
  278. css += "#theater-background { padding-bottom: 35px; }\n\n";
  279. css += "#placeholder-player { padding-bottom: 35px; }\n";
  280. }
  281. if (!this.showControlsFullscreen && !this.showControlsNonFullscreen) {
  282. css += ".html5-video-player .html5-main-video { height: 100%!important; }\n";
  283. }
  284. if (this.removeAnimations) {
  285. css += ".ytp-bezel { display: none!important; }\n";
  286. css += ".html5-endscreen *, .html5-video-player div { transition-property: none !important; animation: none !important; }\n";
  287. }
  288. if (this.optionsReversed) {
  289. css += ".ytp-panel { display: -webkit-flex; -webkit-flex-direction: column; display: flex; flex-direction: column; }\n";
  290. css += ".ytp-panel-header { order: 2; border-top: 1px solid #444; border-bottom: none; }\n";
  291. css += ".ytp-panel-content { order: 1; }\n";
  292. }
  293. if (this.alwaysVolume) {
  294. /* Have the volume slider always be visible */
  295. css += ".ytp-volume-panel { width: 52px; margin-right: 3px; } .ytp-big-mode .ytp-volume-panel { width: 78px; }";
  296. }
  297. if (this.progressBigger) {
  298. /* Make the progressbar fill up the entire space when not hovering over (thanks to Takato) */
  299. 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; }";
  300. 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; }";
  301. }
  302. return css;
  303. };
  304. YtNewUIFix.prototype.showOptions = function () {
  305. var options = document.querySelectorAll("#YoutubeNewUIFix-Options input");
  306. if (options.length > 0) {
  307. for (var i = 0; i < options.length; i++) {
  308. options[i].checked = (this.getSetting(options[i].name) === "true");
  309. }
  310. }
  311. };
  312. YtNewUIFix.prototype.addOptions = function () {
  313. var _this = this;
  314. if (localStorage) {
  315. var accSection_1 = document.createElement("div");
  316. accSection_1.id = "YoutubeNewUIFix-Options";
  317. accSection_1.classList.add("account-section");
  318. var header = document.createElement("h3");
  319. header.classList.add("account-section-header");
  320. header.textContent = "Youtube UI Fix Options";
  321. accSection_1.appendChild(header);
  322. {
  323. accSection_1.appendChild(this.createOption("addWatchLater", "Add the watch later button to the controls"));
  324. accSection_1.appendChild(this.createOption("changeColorsNonFullscreen", "Change the colors back to their original gray (in non-full-screen mode)"));
  325. accSection_1.appendChild(this.createOption("changeColorsFullscreen", "Change the colors back to their original gray in full-screen mode"));
  326. accSection_1.appendChild(this.createOption("showControlsNonFullscreen", "Always show the controls (in non-full-screen mode)"));
  327. accSection_1.appendChild(this.createOption("showControlsFullscreen", "Always show the controls in full-screen mode"));
  328. accSection_1.appendChild(this.createOption("removeAnimations", "Remove all animations"));
  329. accSection_1.appendChild(this.createOption("optionsReversed", "Move the 'go back' button in the settings menus to the bottom"));
  330. accSection_1.appendChild(this.createOption("progressBigger", "Make the progressbar take up the whole width (but not when hovering over)"));
  331. accSection_1.appendChild(this.createOption("alwaysVolume", "Have the volume slider be always visible"));
  332. }
  333. var content = document.querySelector(".account-content");
  334. var footer = document.querySelector(".account-footer");
  335. var selectedItem = document.querySelector(".creator-sidebar-item.selected");
  336. if (!content) {
  337. content = document.querySelector("#contents");
  338. if (!content) {
  339. return;
  340. }
  341. }
  342. if (!selectedItem) {
  343. selectedItem = document.querySelector(".ytd-settings-sidebar-renderer[active]");
  344. }
  345. if (this.isSettingsPage) {
  346. document.head.innerHTML = document.body.innerHTML = "";
  347. document.body.appendChild(accSection_1);
  348. }
  349. else if (content && selectedItem.innerHTML.indexOf("Playback") >= 0) {
  350. if (footer) {
  351. content.insertBefore(accSection_1, footer);
  352. }
  353. else {
  354. content.appendChild(accSection_1);
  355. }
  356. }
  357. var exportBtn_1 = document.createElement("button");
  358. exportBtn_1.classList.add("yt-uix-button", "yt-uix-button-size-default", "yt-uix-button-primary", "account-action-button");
  359. exportBtn_1.type = "button";
  360. exportBtn_1.textContent = "Export Settings";
  361. exportBtn_1.onclick = function () {
  362. var settingsScript = "// ==UserScript==\n";
  363. settingsScript += "// @name Youtube UI Fix Settings\n";
  364. settingsScript += "// @namespace YtUIFix\n";
  365. settingsScript += "// @description Sets the settings for Youtube UI Fix\n";
  366. settingsScript += "// @author Roy Scheerens\n";
  367. settingsScript += "// @homepageURL https://greasyfork.org/en/scripts/11485\n";
  368. settingsScript += "// @include https://www.youtube.com*\n";
  369. settingsScript += "// @include https://youtube.googleapis.com/embed*\n";
  370. settingsScript += "// @include https://www.youtube-nocookie.com/embed*\n";
  371. settingsScript += "// @version 0.0.1\n";
  372. settingsScript += "// @grant none\n";
  373. settingsScript += "// ==/UserScript==\n";
  374. settingsScript += "\n";
  375. settingsScript += "localStorage.setItem('ytfix::addWatchLater', String(" + String(_this["addWatchLater"]) + "));\n";
  376. settingsScript += "localStorage.setItem('ytfix::showControlsFullscreen', String(" + String(_this["showControlsFullscreen"]) + "));\n";
  377. settingsScript += "localStorage.setItem('ytfix::showControlsNonFullscreen', String(" + String(_this["showControlsNonFullscreen"]) + "));\n";
  378. settingsScript += "localStorage.setItem('ytfix::changeColorsFullscreen', String(" + String(_this["changeColorsFullscreen"]) + "));\n";
  379. settingsScript += "localStorage.setItem('ytfix::changeColorsNonFullscreen', String(" + String(_this["changeColorsNonFullscreen"]) + "));\n";
  380. settingsScript += "localStorage.setItem('ytfix::removeAnimations', String(" + String(_this["removeAnimations"]) + "));\n";
  381. settingsScript += "localStorage.setItem('ytfix::optionsReversed', String(" + String(_this["optionsReversed"]) + "));\n";
  382. settingsScript += "localStorage.setItem('ytfix::progressBigger', String(" + String(_this["progressBigger"]) + "));\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();