Youtube New UI Fix

Fixes the new UI to one that resembles old one

当前为 2015-08-24 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Youtube New UI Fix
  3. // @namespace YtNewUIFix
  4. // @description Fixes the new UI to one that resembles old one
  5. // @author Roy Scheerens
  6. // @homepageURL https://greasyfork.org/en/scripts/11485-youtube-new-ui-fix
  7. // @include https://www.youtube.com/*
  8. // @version 1.8.10
  9. // @grant none
  10. // ==/UserScript==
  11. /* Original typescript code: https://copy.com/TzRldsobyPt8XcKA */
  12. //new YtNewUIFix().applyFix();
  13. var YtNewUIFix = (function () {
  14. function YtNewUIFix() {
  15. this.watchLaterAdded = false;
  16. this.playButtonReplaced = false;
  17. this.moviePlayer = document.querySelector("div.html5-video-player");
  18. var api = document.querySelector(".player-api");
  19. this.mouseMoveEvent = document.createEvent('Events');
  20. this.mouseMoveEvent.initEvent("mousemove", true, false);
  21. this.addWatchLater = this.getStorage("addWatchLater", true);
  22. this.autoHideFullScreen = this.getStorage("autoHideFullScreen", false);
  23. this.removeAllAnimations = this.getStorage("removeAllAnimations", false);
  24. }
  25. YtNewUIFix.prototype.applyFix = function () {
  26. var _this = this;
  27. this.addCSS();
  28. if (localStorage) {
  29. this.addOptions();
  30. }
  31. setInterval(function () {
  32. _this.checkMoviePlayer();
  33. _this.checkWatchLater();
  34. _this.removePlayAnim();
  35. }, 1000);
  36. };
  37. YtNewUIFix.prototype.getStorage = function (key, defaultVal) {
  38. if (!localStorage) {
  39. return defaultVal;
  40. }
  41. var result = localStorage.getItem(key);
  42. if (result) {
  43. return result == "true";
  44. }
  45. else {
  46. return defaultVal;
  47. }
  48. };
  49. YtNewUIFix.prototype.addCSS = function () {
  50. var css = document.createElement("style");
  51. css.id = "YoutubeNewUIFix-Style";
  52. 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-popup, .ytp-panelpopup { background: rgb(28, 28, 28) none repeat scroll 0% 0%!important; }\n\n /* moving the content below down, but not when the 'Resize YT To Window Size' script is active (.ytwp-window-player) */\n body:not(.ytwp-window-player) #watch7-content, body:not(.ytwp-window-player) div.watch-stage-mode #watch7-sidebar { transform: translateY(35px)!important; }\n\n /* controls always visible */\n " + (this.autoHideFullScreen ? ".html5-video-player:not(.ytp-big-mode) " : "") + ".ytp-chrome-bottom { opacity: 1!important; }\n\n /* move controls to the right place */\n #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 .ytp-storyboard-framepreview { height: 100%!important; }\n .ytp-cards-button { top: 0!important } /* needed or else focusing the card will move it under the controls */\n " + (this.autoHideFullScreen ? "" : ".html5-main-video, .ytp-storyboard-framepreview-img { max-height: calc(100vh - 35px)!important; }") + " /* vh instead of % because chrome is weird */\n .ytp-big-mode .ytp-progress-bar-container { transform: translateY(-1px)!important; }\n .ytp-big-mode .ytp-scrubber-button { top: -4px!important; transform: translateX(4px); }\n .ytp-scrubber-button { width: 13px!important; height: 13px!important; }\n\n /* Fix the quality badge (red HD rectangle) */\n .ytp-settings-button.ytp-hd-quality-badge::after,.ytp-settings-button.ytp-4k-quality-badge::after,.ytp-settings-button.ytp-5k-quality-badge::after,.ytp-settings-button.ytp-8k-quality-badge::after\n {\n \t content:''!important;\n \t position:absolute!important;\n \t top:6px!important;\n \t right:4px!important; \n \t height:9px!important;\n \t width:13px!important;\n \t background-color:#f12b24!important;\n \t border-radius:1px!important;\n \t line-height:normal!important;\n \t background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTMgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4NCiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsLW9wYWNpdHk9IjAuNjQ3MSIgZmlsbD0iIzAwMDAwMCIgZD0iTTUsNyBMNiw3IEw2LDggTDUsOCBMNSw3IFogTTEwLDMgTDEwLDQgTDgsNCBMOCwzIEwxMCwzIFogTTMsNiBMMyw1IEw1LDUgTDUsNiBMMyw2IFogTTIsNyBMMyw3IEwzLDggTDIsOCBMMiw3IFogTTcsNyBMMTAsNyBMMTAsOCBMNyw4IEw3LDcgWiBNMTAsNiBMMTEsNiBMMTEsNyBMMTAsNyBMMTAsNiBaIj48L3BhdGg+DQogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0ZGRkZGRiIgZD0iTTUsNyBMNSw2IEw1LDUgTDMsNSBMMyw2IEwzLDcgTDIsNyBMMiwyIEwzLDIgTDMsNCBMNSw0IEw1LDIgTDYsMiBMNiw3IEw1LDcgWiBNMTEsNiBMMTAsNiBMMTAsNyBMNyw3IEw3LDIgTDEwLDIgTDEwLDMgTDExLDMgTDExLDYgWiBNMTAsNCBMMTAsMyBMOCwzIEw4LDQgTDgsNiBMMTAsNiBMMTAsNCBaIj48L3BhdGg+DQo8L3N2Zz4NCg==')!important;\n \t padding: 0!important;\n }\n\n /* Fix the red line under the subtitle icon */\n .ytp-chrome-controls .ytp-button[aria-pressed=\"true\"]::after\n {\n width: 17px!important;\n height: 2px!important;\n left: 8px!important;\n bottom: 7px!important;\n }\n\n /* Makes sure the captions/subtitles are at the correct height and don't move up and down */\n .ytp-player-content, .ytp-subtitles-player-content { bottom: 49px!important; }\n\n /* rules for the watch later button */\n .ytp-watch-later-button { width: 24px!important; float: right!important; margin-right: 2px!important; }\n .ytp-tooltip-image-enabled { bottom: 49px!important; top: auto!important; }\n\n /* rules for the options */\n h3.optionChanged::after { content: 'Refresh page to save changes'; color: red; position: relative; left: 15px; }\n\n /* no animations */\n " + (this.removeAllAnimations ? ".ytp-bezel { display: none!important; }" : "") + "\n " + (this.removeAllAnimations ? ".html5-video-player div { transition-property: none !important; animation: none !important; }" : "");
  53. document.head.appendChild(css);
  54. };
  55. YtNewUIFix.prototype.addOptions = function () {
  56. var content = document.querySelector("div.account-content");
  57. var footer = document.querySelector("div.account-footer");
  58. if (content && footer) {
  59. var accSection = document.createElement("div");
  60. accSection.classList.add("account-section");
  61. var header = document.createElement("h3");
  62. header.classList.add("account-section-header");
  63. header.textContent = "Youtube New UI Fix Options";
  64. accSection.appendChild(header);
  65. accSection.appendChild(this.createOption(this.addWatchLater, "addWatchLater", "Add the watch later button to the controls", header));
  66. accSection.appendChild(this.createOption(this.autoHideFullScreen, "autoHideFullScreen", "Have the controls automatically hide in full-screen mode", header));
  67. accSection.appendChild(this.createOption(this.removeAllAnimations, "removeAllAnimations", "Remove all animations", header));
  68. content.insertBefore(accSection, footer);
  69. }
  70. };
  71. YtNewUIFix.prototype.createOption = function (optionValue, name, description, changeNotifier) {
  72. var accDiv = document.createElement("div");
  73. accDiv.classList.add("account-section-setting");
  74. 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>";
  75. var accInput = accDiv.querySelector("input[name='" + name + "']");
  76. accInput.onclick = function () {
  77. localStorage.setItem(name, String(accInput.checked));
  78. changeNotifier.classList.add("optionChanged");
  79. };
  80. return accDiv;
  81. };
  82. YtNewUIFix.prototype.checkWatchLater = function () {
  83. if (this.addWatchLater && !this.watchLaterAdded && this.moviePlayer) {
  84. var watchLater = document.querySelector("button.ytp-watch-later-button");
  85. if (watchLater) {
  86. var qaulitybutton = (document.querySelector("button.ytp-subtitles-button") || document.querySelector("button.ytp-settings-button"));
  87. if (qaulitybutton) {
  88. qaulitybutton.parentNode.insertBefore(watchLater, qaulitybutton.nextSibling);
  89. this.watchLaterAdded = true;
  90. }
  91. }
  92. }
  93. };
  94. YtNewUIFix.prototype.checkMoviePlayer = function () {
  95. if (!this.moviePlayer || !this.moviePlayer.parentNode) {
  96. this.moviePlayer = document.querySelector("div.html5-video-player");
  97. }
  98. else if (!this.moviePlayer.classList.contains("seeking-mode") && (!this.autoHideFullScreen || !this.moviePlayer.classList.contains("ytp-fullscreen"))) {
  99. this.moviePlayer.dispatchEvent(this.mouseMoveEvent);
  100. }
  101. };
  102. YtNewUIFix.prototype.removePlayAnim = function () {
  103. if (this.removeAllAnimations && !this.playButtonReplaced) {
  104. var button = document.querySelector('button.ytp-play-button');
  105. var buttonClone = button.cloneNode(false);
  106. var video = document.querySelector("video.html5-main-video");
  107. if (button && buttonClone && video) {
  108. var svgPlay = " <svg width='100%' height='100%' viewBox='0 0 36 36' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>\n\t <defs>\n\t\t <path id='ytp-19' d='M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28'></path>\n\t </defs>\n\t <use xlink:href='#ytp-19' class='ytp-svg-shadow'></use>\n\t <use xlink:href='#ytp-19' class='ytp-svg-fill'></use>\n </svg>";
  109. var svgPause = "<svg width='100%' height='100%' viewBox='0 0 36 36' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>\n\t <defs>\n\t\t <path id='ytp-19' d='M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26'></path>\n\t </defs>\n\t <use xlink:href='#ytp-19' class='ytp-svg-shadow'></use>\n\t <use xlink:href='#ytp-19' class='ytp-svg-fill'></use>\n </svg>";
  110. var svgReplay = "<svg width='100%' height='100%' viewBox='0 0 36 36' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>\n\t <defs>\n\t\t <path id='ytp-19' d='M26.466,21.04 L30.966,16 L27.8,16 C26.873,11.435 22.841,8 18.001,8 C12.474,8 8,12.477 8,18 C8,23.523 12.474,28 18.001,28 C21.181,28 24.009,26.511 25.841,24.197 L24.005,22.361 C22.652,24.217 20.471,25.427 18.001,25.427 C13.899,25.427 10.569,22.101 10.569,18 C10.569,13.898 13.899,10.572 18.001,10.572 C21.407,10.572 24.268,12.871 25.142,16 L21.966,16 L26.466,21.04'></path>\n\t </defs>\n\t <use xlink:href='#ytp-19' class='ytp-svg-shadow'></use>\n\t <use xlink:href='#ytp-19' class='ytp-svg-fill'></use>\n </svg>";
  111. if (video.paused) {
  112. buttonClone.innerHTML = svgPlay;
  113. }
  114. else if (video.ended) {
  115. buttonClone.innerHTML = svgReplay;
  116. }
  117. else {
  118. buttonClone.innerHTML = svgPause;
  119. }
  120. video.onplay = function () { return buttonClone.innerHTML = svgPause; };
  121. video.onpause = function () { return buttonClone.innerHTML = svgPlay; };
  122. video.onended = function () { return buttonClone.innerHTML = svgReplay; };
  123. buttonClone.onclick = function () {
  124. if (video.paused) {
  125. video.play();
  126. }
  127. else {
  128. video.pause();
  129. }
  130. };
  131. button.parentElement.replaceChild(buttonClone, button);
  132. this.playButtonReplaced = true;
  133. }
  134. }
  135. };
  136. return YtNewUIFix;
  137. })();
  138. new YtNewUIFix().applyFix();
  139. //# sourceMappingURL=Youtube_New_UI_Fix.user.js.map