Youtube New UI Fix

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

当前为 2016-10-02 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Youtube New UI Fix
  3. // @namespace YtNewUIFix
  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-youtube-new-ui-fix
  7. // @include https://www.youtube.com/*
  8. // @include https://youtube.googleapis.com/embed/*
  9. // @include https://www.youtube-nocookie.com/embed/*
  10. // @version 2.2.2
  11. // @grant none
  12. // ==/UserScript==
  13. /* Original typescript code: https://mega.nz/#!gVIDxJgZ!-xXTYG6lNc7aGtW4ITPq0yNe62emBNGdfKg9cB58whs */
  14. var YtNewUIFix = (function () {
  15. function YtNewUIFix() {
  16. this.isEmbedded = window.top !== window.self;
  17. this.mouseMoveEvent = document.createEvent("Events");
  18. this.mouseMoveEvent.initEvent("mousemove", true, false);
  19. this.addWatchLater = this.getStorage("addWatchLater", true);
  20. this.showControlsFullscreen = this.getStorage("showControlsFullscreen", true);
  21. this.showControlsNonFullscreen = this.getStorage("showControlsNonFullscreen", true);
  22. this.changeColorsFullscreen = this.getStorage("changeColorsFullscreen", true);
  23. this.changeColorsNonFullscreen = this.getStorage("changeColorsNonFullscreen", true);
  24. this.removeAnimations = this.getStorage("removeAnimations", false);
  25. this.optionsReversed = this.getStorage("optionsReversed", false);
  26. this.progressBigger = this.getStorage("progressBigger", false);
  27. this.showTitleOnHover = this.getStorage("showTitleOnHover", false);
  28. this.alwaysVolume = this.getStorage("alwaysVolume", false);
  29. }
  30. YtNewUIFix.prototype.applyFix = function () {
  31. var _this = this;
  32. if (document.body.innerHTML.length === 0) {
  33. // empty page can be ignored (in share tab before it's active)
  34. return;
  35. }
  36. this.addCSS();
  37. if (localStorage) {
  38. this.addOptions();
  39. }
  40. this.checkMoviePlayer();
  41. window.setInterval(function () {
  42. _this.checkMoviePlayer();
  43. }, 1000);
  44. };
  45. YtNewUIFix.prototype.getStorage = function (key, defaultVal) {
  46. if (!localStorage) {
  47. return defaultVal;
  48. }
  49. var result = localStorage.getItem(key);
  50. if (result) {
  51. return result === "true";
  52. }
  53. else {
  54. return defaultVal;
  55. }
  56. };
  57. YtNewUIFix.prototype.checkMoviePlayer = function () {
  58. if (!this.moviePlayer || !this.moviePlayer.parentNode) {
  59. this.moviePlayer = document.querySelector("div.html5-video-player");
  60. }
  61. else if (!this.moviePlayer.classList.contains("seeking-mode") &&
  62. !this.moviePlayer.classList.contains("dragging-mode") &&
  63. (this.showControlsNonFullscreen && !this.moviePlayer.classList.contains("ytp-fullscreen") || this.showControlsFullscreen && this.moviePlayer.classList.contains("ytp-fullscreen"))) {
  64. this.moviePlayer.dispatchEvent(this.mouseMoveEvent);
  65. }
  66. if (this.moviePlayer) {
  67. /*var settings: HTMLDivElement = <HTMLDivElement>document.querySelector(".ytp-settings-menu .ytp-panel-menu");
  68. if (settings && !settings.querySelector(".yt-fix-settings"))
  69. {
  70. var settingsDiv: HTMLDivElement = <HTMLDivElement>document.createElement("div"); //<div tabindex="0" role="menuitem" aria-haspopup="true" class="ytp-menuitem yt-fix-settings">
  71. settingsDiv["role"] = "menuitem";
  72. settingsDiv["aria-haspopup"] = "true";
  73. settingsDiv.classList.add("ytp-menuitem");
  74. settingsDiv.classList.add("yt-fix-settings");
  75. settingsDiv.innerHTML = "<div class='ytp-menuitem-label'>Youtube New UI Fix Settings</div> <div class='ytp-menuitem-content'></div>";
  76. settingsDiv.onclick = () =>
  77. {
  78. alert("settings");
  79. };
  80. settings.appendChild(settingsDiv);
  81. }*/
  82. if (this.addWatchLater) {
  83. var watchLater = document.querySelector(".ytp-chrome-top .ytp-watch-later-button");
  84. var settingsButton = document.querySelector(".ytp-settings-button");
  85. if (watchLater && settingsButton) {
  86. settingsButton.parentNode.insertBefore(watchLater, settingsButton);
  87. }
  88. }
  89. if (this.showTitleOnHover) {
  90. this.moviePlayer.classList.remove("ytp-hide-info-bar");
  91. }
  92. }
  93. };
  94. YtNewUIFix.prototype.addCSS = function () {
  95. var css = "";
  96. css = this.fixColors(css);
  97. css = this.fixControls(css);
  98. css = this.fixBigMode(css);
  99. css = this.addExtras(css);
  100. var style = document.createElement("style");
  101. style.id = "YoutubeNewUIFix-Style";
  102. style.textContent = css;
  103. document.head.appendChild(style);
  104. };
  105. YtNewUIFix.prototype.fixControls = function (css) {
  106. // options
  107. css += "h3.optionChanged::after { content: 'Refresh page to save changes'; color: red; position: relative; left: 15px; }\n\n";
  108. css += ".html5-video-player.ytp-fullscreen .html5-video-container { height: 100vh; }";
  109. css += ".html5-video-player:not(.ytp-fullscreen) .html5-video-container { height: 100%; }";
  110. css += ".ytp-chrome-bottom { left: 0 !important; }\n";
  111. css += ".ytp-chrome-controls { margin: 0 -12px; }\n";
  112. css += "body:not(.ytwp-window-player) #page:not(.watch-stage-mode) #watch7-sidebar { transform: translateY(-35px); }\n";
  113. css += "body:not(.ytwp-window-player) #page.watch-stage-mode #watch-appbar-playlist { margin-top: 35px; }\n";
  114. css += ".html5-main-video { top: 0!important; }\n";
  115. // progressbar
  116. css += ".ytp-progress-bar-container:not(.ytp-pulling) { height: 5px!important; bottom: 30.5px!important; }\n";
  117. css += ".ytp-progress-list { transform-origin: center top; }\n\n";
  118. css += ".ytp-big-mode .ytp-progress-list { transform: scaleY(0.6); }\n\n";
  119. // scale down
  120. css += ".ytp-chrome-bottom { height: 35px!important; padding: 0!important; }\n";
  121. css += ".ytp-chrome-controls .ytp-button:not(.ytp-watch-later-button) { width: 33px!important; }\n";
  122. css += ".ytp-chrome-controls .ytp-watch-later-button { width: 24px!important; }\n";
  123. css += ".ytp-left-controls { margin-left: 5px }\n";
  124. css += ".ytp-time-display { height: 31px; line-height: 32px!important; font-size: 12px!important; }\n";
  125. css += ".ytp-left-controls, .ytp-right-controls { height: 32px!important; margin-top: 3px; line-height: 36px; }\n\n";
  126. // badges
  127. 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";
  128. css += ".ytp-settings-button.ytp-hd-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik01LDcgTDYsNyBMNiw4IEw1LDggTDUsNyBaIE0xMCwzIEwxMCw0IEw4LDQgTDgsMyBMMTAsMyBaIE0zLDYgTDMsNSBMNSw1IEw1LDYgTDMsNiBaIE0yLDcgTDMsNyBMMyw4IEwyLDggTDIsNyBaIE03LDcgTDEwLDcgTDEwLDggTDcsOCBMNyw3IFogTTEwLDYgTDExLDYgTDExLDcgTDEwLDcgTDEwLDYgWiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIwLjY0NzEiIGZpbGwtcnVsZT0iZXZlbm9kZCIgLz48cGF0aCBkPSJNNSw3IEw1LDYgTDUsNSBMMyw1IEwzLDYgTDMsNyBMMiw3IEwyLDIgTDMsMiBMMyw0IEw1LDQgTDUsMiBMNiwyIEw2LDcgTDUsNyBaIE0xMSw2IEwxMCw2IEwxMCw3IEw3LDcgTDcsMiBMMTAsMiBMMTAsMyBMMTEsMyBMMTEsNiBaIE0xMCw0IEwxMCwzIEw4LDMgTDgsNCBMOCw2IEwxMCw2IEwxMCw0IFoiIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgLz48L3N2Zz4=)!important; }";
  129. css += ".ytp-settings-button.ytp-4k-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0xMCw0IEwxMSw0IEwxMSw1IEwxMCw1IEwxMCw0IFogTTEwLDcgTDExLDcgTDExLDggTDEwLDggTDEwLDcgWiBNOCw1IEwxMCw1IEwxMCw2IEw4LDYgTDgsNSBaIE03LDcgTDgsNyBMOCw4IEw3LDggTDcsNyBaIE01LDYgTDYsNiBMNiw3IEw1LDcgTDUsNiBaIE00LDcgTDUsNyBMNSw4IEw0LDggTDQsNyBaIE0yLDYgTDQsNiBMNCw3IEwyLDcgTDIsNiBaIE0zLDQgTDQsNCBMNCw1IEwzLDUgTDMsNCBaIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9IjAuNjQ3MSIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjxwYXRoIGQ9Ik0xMSw1IEwxMSw3IEwxMCw3IEwxMCw2IEwxMCw1IEwxMSw1IFogTTEwLDUgTDgsNSBMOCw2IEw4LDcgTDcsNyBMNywyIEw4LDIgTDgsNCBMMTAsNCBMMTAsNSBaIE00LDQgTDMsNCBMMyw1IEw0LDUgTDQsNCBaIE00LDcgTDQsNiBMMiw2IEwyLDQgTDMsNCBMMywzIEw0LDMgTDQsMiBMNSwyIEw1LDUgTDYsNSBMNiw2IEw1LDYgTDUsNyBMNCw3IFogTTEwLDIgTDExLDIgTDExLDQgTDEwLDQgTDEwLDIgWiIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjwvc3ZnPg==)!important; }";
  130. css += ".ytp-settings-button.ytp-5k-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0xMCw0IEwxMSw0IEwxMSw1IEwxMCw1IEwxMCw0IFogTTEwLDcgTDExLDcgTDExLDggTDEwLDggTDEwLDcgWiBNOCw1IEwxMCw1IEwxMCw2IEw4LDYgTDgsNSBaIE03LDcgTDgsNyBMOCw4IEw3LDggTDcsNyBaIE01LDYgTDYsNiBMNiw3IEw1LDcgTDUsNiBaIE0yLDcgTDUsNyBMNSw4IEwyLDggTDIsNyBaIE0yLDUgTDUsNSBMNSw2IEwyLDYgTDIsNSBaIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9IjAuNjQ3MSIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjxwYXRoIGQ9Ik0xMSw1IEwxMSw3IEwxMCw3IEwxMCw2IEwxMCw1IEwxMSw1IE0xMCw1IEw4LDUgTDgsNiBMOCw3IEw3LDcgTDcsMiBMOCwyIEw4LDQgTDEwLDQgTDEwLDUgTTEwLDIgTDExLDIgTDExLDQgTDEwLDQgTDEwLDIgTTIsNiBMNSw2IEw1LDcgTDIsNyBNNSw1IEw2LDUgTDYsNiBMNSw2IE01LDQgTDMsNCBMMywzIEw2LDMgTDYsMiBMMiwyIEwyLDUgTDUsNSBMNSw0IFoiIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgLz48L3N2Zz4=)!important; }";
  131. css += ".ytp-settings-button.ytp-8k-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0xMCw0IEwxMSw0IEwxMSw1IEwxMCw1IEwxMCw0IFogTTEwLDcgTDExLDcgTDExLDggTDEwLDggTDEwLDcgWiBNOCw1IEwxMCw1IEwxMCw2IEw4LDYgTDgsNSBaIE03LDcgTDgsNyBMOCw4IEw3LDggTDcsNyBaIE01LDYgTDYsNiBMNiw3IEw1LDcgTDUsNiBaIE0zLDUgTDUsNSBMNSw2IEwzLDYgTDMsNSBaIE0zLDMgTDUsMyBMNSw0IEwzLDQgTDMsMyBaIE01LDQgTDYsNCBMNiw1IEw1LDUgTDUsNCBaIE0yLDQgTDMsNCBMMyw1IEwyLDUgTDIsNCBaIE0yLDYgTDMsNiBMMyw3IEwyLDcgTDIsNiBaIE0zLDcgTDUsNyBMNSw4IEwzLDggTDMsNyBaIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9IjAuNjQ3MSIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjxwYXRoIGQ9Ik0xMSw1IEwxMSw3IEwxMCw3IEwxMCw2IEwxMCw1IEwxMSw1IE0xMCw1IEw4LDUgTDgsNiBMOCw3IEw3LDcgTDcsMiBMOCwyIEw4LDQgTDEwLDQgTDEwLDUgTTEwLDIgTDExLDIgTDExLDQgTDEwLDQgTDEwLDIgTTMsNiBMNSw2IEw1LDcgTDMsNyBNMywyIEw1LDIgTDUsMyBMMywzIEwzLDIgWiBNNSw1IEw2LDUgTDYsNiBMNSw2IEw1LDUgWiBNMyw0IEw1LDQgTDUsNSBMMyw1IEwzLDQgWiBNNSwzIEw2LDMgTDYsNCBMNSw0IEw1LDMgWiBNMiw1IEwzLDUgTDMsNiBMMiw2IEwyLDUgWiBNMiwzIEwzLDMgTDMsNCBMMiw0IEwyLDMgWiIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjwvc3ZnPg==)!important; }";
  132. 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; }";
  133. css += ".ytp-color-white .ytp-settings-button.ytp-hd-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik01LDcgTDUsNiBMNSw1IEwzLDUgTDMsNiBMMyw3IEwyLDcgTDIsMiBMMywyIEwzLDQgTDUsNCBMNSwyIEw2LDIgTDYsNyBMNSw3IFogTTExLDYgTDEwLDYgTDEwLDcgTDcsNyBMNywyIEwxMCwyIEwxMCwzIEwxMSwzIEwxMSw2IFogTTEwLDQgTDEwLDMgTDgsMyBMOCw0IEw4LDYgTDEwLDYgTDEwLDQgWiIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjwvc3ZnPg==)!important; }";
  134. css += ".ytp-color-white .ytp-settings-button.ytp-4k-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0xMSw1IEwxMSw3IEwxMCw3IEwxMCw2IEwxMCw1IEwxMSw1IFogTTEwLDUgTDgsNSBMOCw2IEw4LDcgTDcsNyBMNywyIEw4LDIgTDgsNCBMMTAsNCBMMTAsNSBaIE00LDQgTDMsNCBMMyw1IEw0LDUgTDQsNCBaIE00LDcgTDQsNiBMMiw2IEwyLDQgTDMsNCBMMywzIEw0LDMgTDQsMiBMNSwyIEw1LDUgTDYsNSBMNiw2IEw1LDYgTDUsNyBMNCw3IFogTTEwLDIgTDExLDIgTDExLDQgTDEwLDQgTDEwLDIgWiIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjwvc3ZnPg==)!important; }";
  135. css += ".ytp-color-white .ytp-settings-button.ytp-5k-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0xMSw1IEwxMSw3IEwxMCw3IEwxMCw2IEwxMCw1IEwxMSw1IE0xMCw1IEw4LDUgTDgsNiBMOCw3IEw3LDcgTDcsMiBMOCwyIEw4LDQgTDEwLDQgTDEwLDUgTTEwLDIgTDExLDIgTDExLDQgTDEwLDQgTDEwLDIgTTIsNiBMNSw2IEw1LDcgTDIsNyBNNSw1IEw2LDUgTDYsNiBMNSw2IE01LDQgTDMsNCBMMywzIEw2LDMgTDYsMiBMMiwyIEwyLDUgTDUsNSBMNSw0IFoiIGZpbGwtcnVsZT0iZXZlbm9kZCIgLz48L3N2Zz4=)!important; }";
  136. css += ".ytp-color-white .ytp-settings-button.ytp-8k-quality-badge:after { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMgOSIgd2lkdGg9IjEwMCUiPjxwYXRoIGQ9Ik0xMSw1IEwxMSw3IEwxMCw3IEwxMCw2IEwxMCw1IEwxMSw1IE0xMCw1IEw4LDUgTDgsNiBMOCw3IEw3LDcgTDcsMiBMOCwyIEw4LDQgTDEwLDQgTDEwLDUgTTEwLDIgTDExLDIgTDExLDQgTDEwLDQgTDEwLDIgTTMsNiBMNSw2IEw1LDcgTDMsNyBNMywyIEw1LDIgTDUsMyBMMywzIEwzLDIgWiBNNSw1IEw2LDUgTDYsNiBMNSw2IEw1LDUgWiBNMyw0IEw1LDQgTDUsNSBMMyw1IEwzLDQgWiBNNSwzIEw2LDMgTDYsNCBMNSw0IEw1LDMgWiBNMiw1IEwzLDUgTDMsNiBMMiw2IEwyLDUgWiBNMiwzIEwzLDMgTDMsNCBMMiw0IEwyLDMgWiIgZmlsbC1ydWxlPSJldmVub2RkIiAvPjwvc3ZnPg==)!important; }";
  137. 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; }";
  138. // closed captions (line under the button, and position of captions)
  139. css += ".ytp-chrome-controls .ytp-button[aria-pressed='true']::after { width: 18px; left: 8px; }\n";
  140. css += ".caption-window.ytp-caption-window-bottom { margin-bottom:40px!important }\n";
  141. return css;
  142. };
  143. YtNewUIFix.prototype.fixBigMode = function (css) {
  144. /* big mode: smaller scrubber */
  145. css += ".ytp-big-mode .ytp-scrubber-button { height: 13px!important; width: 13px!important; border-radius: 6.5px!important; }\n";
  146. css += ".ytp-big-mode .ytp-scrubber-container { top: -4px; left: -6.5px; }\n\n";
  147. /* big mode: 24px edges instead of 12px */
  148. css += ".ytp-big-mode .ytp-left-controls { margin-left: -7px }\n";
  149. css += ".ytp-big-mode .ytp-fullscreen-button { margin-right: -7px }\n\n";
  150. /* big mode: smaller volume slider */
  151. css += ".ytp-big-mode .ytp-volume-slider-handle { width: 12px; height: 12px; border-radius: 6px; margin-top: -6px; }\n";
  152. css += ".ytp-big-mode .ytp-volume-slider-active .ytp-volume-panel { width: 72px; }\n\n";
  153. return css;
  154. };
  155. YtNewUIFix.prototype.fixColors = function (css) {
  156. if (this.changeColorsNonFullscreen) {
  157. 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";
  158. css += ".html5-video-player:not(.ytp-big-mode) .ytp-gradient-bottom { display: none!important; }\n";
  159. css += ".html5-video-player:not(.ytp-big-mode) .ytp-chrome-controls svg path { fill: #8E8E8E }\n";
  160. }
  161. else {
  162. css += ".html5-video-player:not(.ytp-big-mode) .ytp-chrome-bottom { border-left: 12px solid transparent; border-right: 12px solid transparent; }\n";
  163. if (this.showControlsNonFullscreen) {
  164. css += ".html5-video-player:not(.ytp-fullscreen) .ytp-gradient-bottom { display: none!important; }\n";
  165. }
  166. }
  167. if (this.changeColorsFullscreen) {
  168. css += ".ytp-big-mode .ytp-chrome-bottom { background-color: #1B1B1B; border-left: 24px solid #1B1B1B; border-right: 24px solid #1B1B1B; }\n";
  169. css += ".ytp-big-mode .ytp-gradient-bottom { display: none!important; }\n";
  170. css += ".ytp-big-mode .ytp-chrome-controls svg path { fill: #8E8E8E }\n";
  171. }
  172. else {
  173. css += ".ytp-big-mode .ytp-chrome-bottom { border-left: 24px solid transparent; border-right: 24px solid transparent; }\n";
  174. if (this.showControlsFullscreen) {
  175. css += ".html5-video-player.ytp-fullscreen .ytp-gradient-bottom { display: none!important; }\n";
  176. }
  177. }
  178. css += ".ytp-gradient-top { display: none!important; }\n";
  179. css += "\n";
  180. return css;
  181. };
  182. YtNewUIFix.prototype.addExtras = function (css) {
  183. if (this.showControlsFullscreen) {
  184. css += ".html5-video-player.ytp-fullscreen:not(.ytp-hide-controls) .html5-main-video { height: calc(100% - 35px)!important; }\n";
  185. css += ".html5-video-player.ytp-fullscreen:not(.ytp-hide-controls) .ytp-chrome-bottom { opacity: 1!important; }\n";
  186. }
  187. if (this.showControlsNonFullscreen) {
  188. css += ".html5-video-player:not(.ytp-fullscreen):not(.ytp-hide-controls) .html5-main-video { height: calc(100% - 35px)!important; }\n";
  189. css += ".html5-video-player:not(.ytp-fullscreen):not(.ytp-hide-controls) .ytp-chrome-bottom { opacity: 1!important; }\n";
  190. css += "html:not(.floater) #movie_player:not(.ytp-fullscreen):not(.ytp-hide-controls) { height: calc(100% + 35px)!important; }\n";
  191. css += "#theater-background { padding-bottom: 35px; }\n\n";
  192. css += "#placeholder-player { padding-bottom: 35px; }\n";
  193. }
  194. if (!this.showControlsFullscreen && !this.showControlsNonFullscreen) {
  195. css += ".html5-video-player .html5-main-video { height: 100%!important; }\n";
  196. }
  197. if (!this.showTitleOnHover) {
  198. // hide always
  199. css += ".ytp-chrome-top { display: none!important; }\n";
  200. }
  201. if (this.removeAnimations) {
  202. css += ".ytp-bezel { display: none!important; }\n";
  203. css += ".html5-endscreen *, .html5-video-player div { transition-property: none !important; animation: none !important; }\n";
  204. }
  205. if (this.optionsReversed) {
  206. css += ".ytp-panel { display: -webkit-flex; -webkit-flex-direction: column; display: flex; flex-direction: column; }\n";
  207. css += ".ytp-panel-header { order: 2; border-top: 1px solid #444; border-bottom: none; }\n";
  208. css += ".ytp-panel-content { order: 1; }\n";
  209. }
  210. if (this.alwaysVolume) {
  211. /* Have the volume slider always be visible */
  212. css += ".ytp-volume-panel { width: 52px; margin-right: 3px; } .ytp-big-mode .ytp-volume-panel { width: 78px; }";
  213. }
  214. if (this.progressBigger) {
  215. /* Make the progressbar fill up the entire space when not hovering over (thanks to Takato) */
  216. css += ".ytp-progress-bar-container:not(:hover):not(.ytp-pulling) .ytp-progress-list { width: calc(100% + 24px); left: -12px; }";
  217. css += ".ytp-big-mode .ytp-progress-bar-container:not(:hover):not(.ytp-pulling) .ytp-progress-list { width: calc(100% + 48px); left: -24px; }";
  218. }
  219. return css;
  220. };
  221. YtNewUIFix.prototype.addOptions = function () {
  222. if (window.location.href.indexOf("account_playback") < 0) {
  223. return;
  224. }
  225. var content = document.querySelector("div.account-content");
  226. var footer = document.querySelector("div.account-footer");
  227. if (content && footer) {
  228. var accSection = document.createElement("div");
  229. accSection.classList.add("account-section");
  230. var header = document.createElement("h3");
  231. header.classList.add("account-section-header");
  232. header.textContent = "Youtube New UI Fix Options";
  233. accSection.appendChild(header);
  234. {
  235. accSection.appendChild(this.createOption(header, this.addWatchLater, "addWatchLater", "Add the watch later button to the controls"));
  236. accSection.appendChild(this.createOption(header, this.changeColorsNonFullscreen, "changeColorsNonFullscreen", "Change the colors back to their original gray (in non-full-screen mode)"));
  237. accSection.appendChild(this.createOption(header, this.changeColorsFullscreen, "changeColorsFullscreen", "Change the colors back to their original gray in full-screen mode"));
  238. accSection.appendChild(this.createOption(header, this.showControlsNonFullscreen, "showControlsNonFullscreen", "Always show the controls (in non-full-screen mode)"));
  239. accSection.appendChild(this.createOption(header, this.showControlsFullscreen, "showControlsFullscreen", "Always show the controls in full-screen mode"));
  240. accSection.appendChild(this.createOption(header, this.removeAnimations, "removeAnimations", "Remove all animations"));
  241. accSection.appendChild(this.createOption(header, this.optionsReversed, "optionsReversed", "Move the 'go back' button in the settings menus to the bottom"));
  242. accSection.appendChild(this.createOption(header, this.progressBigger, "progressBigger", "Make the progressbar take up the whole width (but not when hovering over)"));
  243. accSection.appendChild(this.createOption(header, this.showTitleOnHover, "showTitleOnHover", "Have the title show when hovering over the video"));
  244. accSection.appendChild(this.createOption(header, this.alwaysVolume, "alwaysVolume", "Have the volume slider be always visible"));
  245. }
  246. content.insertBefore(accSection, footer);
  247. }
  248. };
  249. YtNewUIFix.prototype.createOption = function (container, optionValue, name, description) {
  250. var accDiv = document.createElement("div");
  251. accDiv.classList.add("account-section-setting");
  252. 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>";
  253. var accInput = accDiv.querySelector("input[name='" + name + "']");
  254. accInput.onclick = function () {
  255. localStorage.setItem(name, String(accInput.checked));
  256. container.classList.add("optionChanged");
  257. };
  258. return accDiv;
  259. };
  260. return YtNewUIFix;
  261. }());
  262. new YtNewUIFix().applyFix();
  263. //# sourceMappingURL=Youtube_New_UI_Fix.user.js.map