☰

Youtube plus

Small CSS tweaks to youtube with color theme settings

当前为 2019-10-15 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Youtube plus
  3. // @description  Small CSS tweaks to youtube with color theme settings
  4. // @grant        GM_addStyle
  5. // @include *://youtube.com/*
  6. // @include *://www.youtube.com/*
  7. // @run-at document-load
  8. // @version 2.1
  9. // @namespace https://greasyfork.org/users/3167
  10. // ==/UserScript==
  11.  
  12. var defaultcolor = "hsla(3, 60%, 47%, 1)";
  13.  
  14. var customcolor = defaultcolor;
  15.  
  16. var firstrun = false;
  17.  
  18. if (typeof(Storage) !== "undefined") {
  19.   if (localStorage.yt_custom_color) {
  20.       customcolor = localStorage.yt_custom_color;
  21.   } else {
  22.       firstrun = true;
  23.       localStorage.yt_custom_color = customcolor;
  24.   }
  25. }
  26.  
  27. console.log("yt_custom_color", customcolor);
  28.  
  29. var stylesheet = `
  30. body {
  31.     /* --yt-custom-color: " + customcolor + "; */
  32. }
  33. .ytp-pause-overlay {
  34.     display: none;
  35. }
  36. #player-ads { display: none; }
  37. body, ytd-app {
  38.     --yt-brand-paper-button-color: var(--yt-custom-color) !important;
  39.     --yt-brand-color: var(--yt-custom-color) !important;
  40. }
  41. paper-button.ytd-subscribe-button-renderer {
  42.     background: var(--yt-custom-color);
  43. }
  44. a.yt-simple-endpoint.yt-formatted-string, ytd-guide-entry-renderer[active] path.style-scope.yt-icon {
  45.     color: var(--yt-custom-color);
  46. }
  47. #progress.ytd-thumbnail-overlay-resume-playback-renderer, .ytp-red2 .ytp-swatch-background-color, .ytp-red2 .ytp-swatch-background-color-secondary, .ytp-play-progress.ytp-swatch-background-color, .ytp-swatch-background-color-secondary {
  48.     background-color: var(--yt-custom-color);
  49. }
  50. path#lozenge-path, #logo path.style-scope.yt-icon, path.style-scope.ytd-topbar-logo-renderer {
  51.     fill: var(--yt-custom-color);
  52. }
  53. div#top div#player {
  54.     max-height: calc(100vh - var(--ytd-masthead-height, 56px));
  55. }
  56. `;
  57.  
  58. if (typeof GM_addStyle != "undefined") {
  59.   GM_addStyle (stylesheet);
  60. } else {
  61.   var css = document.createElement("style");
  62.   css.type = "text/css";
  63.   css.innerHTML = stylesheet;
  64.   document.head.appendChild(css);
  65. }
  66.  
  67. var customcolorpicker = document.createElement('input');
  68. customcolorpicker.type = "color";
  69. customcolorpicker.onchange = "setcustomcolor(this.value);";
  70. customcolorpicker.style = "display: none;";
  71. customcolorpicker.addEventListener("change", function() {
  72.     setcustomcolor(this.value);
  73.   
  74. });
  75.  
  76.  
  77. var setcustomcolor = function (colorinput) {
  78.   console.log("Changing color theme to: " + colorinput);
  79.   customcolor = colorinput;
  80.   document.body.style.setProperty('--yt-custom-color', customcolor);
  81.  
  82.   localStorage.yt_custom_color = customcolor;
  83.  
  84.   var savedcolor = localStorage.yt_custom_color;
  85.   console.log("Saved color theme: " + savedcolor);
  86.   
  87. }
  88. unsafeWindow.setcustomcolor = setcustomcolor;
  89.  
  90. var pickcustomcolor = function () {
  91.     console.log("click");
  92.     customcolorpicker.click();
  93. }
  94. unsafeWindow.pickcustomcolor = pickcustomcolor;
  95.  
  96. var resetcustomcolor = function () {
  97.     unsafeWindow.setcustomcolor(defaultcolor);
  98. }
  99. unsafeWindow.resetcustomcolor = resetcustomcolor;
  100.  
  101. var video_emitkey = function(keycode) {
  102.   var video_element = document.getElementById("movie_player");
  103.   if (video_element) {
  104.     var ke = new KeyboardEvent('keydown');
  105.     delete ke.keyCode;
  106.     Object.defineProperty(ke, "keyCode", {"value" : keycode});
  107.     video_element.dispatchEvent(ke);
  108.   }
  109. }
  110.  
  111. var volumecontrol_init = function() {
  112.   var video_player = document.getElementById("ytd-player");
  113.   if (video_player) {
  114.  
  115.     if (!video_player.youtubeplus_wheel_hooked) {
  116.       video_player.addEventListener('wheel', function(e) {
  117.         e.preventDefault();
  118.         if (e.deltaY < 0) {
  119.           video_emitkey(38);
  120.         }
  121.         if (e.deltaY > 0) {
  122.           video_emitkey(40);
  123.         }
  124.       }); 
  125.       video_player.youtubeplus_wheel_hooked = true;
  126.     }
  127.   }
  128. }
  129.  
  130. var init = function() {
  131.   setcustomcolor(customcolor);
  132.   volumecontrol_init();
  133.   mutator_init();
  134.   console.log("Youtube++ init!");
  135. }
  136.  
  137. var mutator_callback = function() {
  138.   console.log("Mutation detected...");
  139.   volumecontrol_init();
  140.   mutator_init();
  141. }
  142.  
  143. var mutator_init = function() {
  144.   var targetNode = document.body;
  145.   if (targetNode && !targetNode.youtubeplus_mutator_hooked) {
  146.     var observer = new MutationObserver(mutator_callback);
  147.     observer.observe(targetNode, { childList: true });
  148.     targetNode.youtubeplus_mutator_hooked = true;
  149.   }
  150. }
  151.  
  152. console.log("Youtube++ loaded!");
  153.  
  154. init();
  155.