Youtube New UI Fix

Fixes the new UI to one that resembles old one

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

  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. // @include https://www.youtube.com/*
  7. // @version 1.4.5
  8. // @grant none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12. var addWatchLater = true;
  13. var watchLaterAdded = false;
  14. //mouse over the controls to update them (this seems to also work with 2000ms instead of 1000ms)
  15. var evObj = document.createEvent('Events');
  16. evObj.initEvent("mousemove", true, false);
  17. var moviePlayer = document.querySelector(".html5-video-player");
  18. setInterval(function()
  19. {
  20. if (!moviePlayer)
  21. {
  22. moviePlayer = document.querySelector(".html5-video-player");
  23. }
  24. else if (!moviePlayer.classList.contains("seeking-mode"))
  25. {
  26. moviePlayer.dispatchEvent(evObj);
  27. }
  28. if (addWatchLater && !watchLaterAdded && moviePlayer)
  29. {
  30. var watchLater = document.querySelector(".ytp-watch-later-button");
  31. if (watchLater)
  32. {
  33. var qaulitybutton = document.querySelector(".ytp-subtitles-button") || document.querySelector(".ytp-settings-button");
  34. if (qaulitybutton)
  35. {
  36. qaulitybutton.parentNode.insertBefore(watchLater, qaulitybutton.nextSibling);
  37. watchLaterAdded = true;
  38. }
  39. }
  40. }
  41. }, 1000);
  42.  
  43. //the css:
  44. var css = document.createElement('style');
  45. css.type = "text/css";
  46. css.textContent = [
  47. /* fixing the colors */
  48. " .ytp-chrome-bottom { background-color: #1B1B1B!important; }",
  49. " .ytp-svg-fill { fill: #8E8E8E!important; }",
  50. " #movie_player { height: calc(100% + 35px)!important; }",
  51. " .html5-video-content { background-color: black!important; }",
  52. " .ytp-panelpopup { background: rgb(28, 28, 28) none repeat scroll 0% 0%!important; } ",
  53.  
  54. /* moving the content below down */
  55. " #watch7-content, div.watch-stage-mode #watch7-sidebar { transform: translateY(35px)!important; }",
  56.  
  57. /* controls always visible */
  58. " .ytp-chrome-bottom { opacity: 1!important; }",
  59.  
  60. /* move controls to the right place */
  61. " #movie_player { height: calc(100% + 35px)!important; }",
  62. " .ytp-gradient-bottom, .ytp-gradient-top, .ytp-chrome-top { display: none!important; }",
  63. " .ytp-chrome-controls { width: calc(100% + 24px)!important; transform: translateX(-12px)!important; }",
  64.  
  65. /* Fix the theater black bars */
  66. " .watch-stage-mode #theater-background::after { content: ''; height: 35px; bottom: -35px; left: 0px; position: absolute; background-color: black; width: 100%; }",
  67.  
  68. /* scale down the controls */
  69. " .ytp-chrome-bottom { transform: translateY(5px)!important; }",
  70. " .ytp-chrome-bottom::before {content: ''; bottom: 0px; top: -1px; left: -12px; right: -12px; position: absolute; background-color: #1B1B1B; z-index: -1000; }",
  71. " .ytp-chrome-controls { height: 31px!important; line-height: 31px!important; font-size: 11px!important; }",
  72. " .ytp-chrome-controls .ytp-button:not(.ytp-play-button):not(.ytp-watch-later-button) { width: 32px!important; }",
  73. " .ytp-play-button { width: 41px!important; }",
  74. " .ytp-progress-bar-container:not(.ytp-pulling) { height: 5px!important; }",
  75.  
  76. /* scale down the controls big mode */
  77. " .ytp-big-mode .ytp-chrome-bottom { transform: translateY(24px)!important; }",
  78. " .html5-video-container { height: 100%!important; }",
  79. " .html5-main-video { max-height: calc(100% - 35px)!important; }",
  80. " .ytp-big-mode .ytp-progress-bar-container { transform: translateY(-1px)!important; }",
  81.  
  82. /* Fix the quality badge (red HD rectangle) */
  83. " .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",
  84. " {",
  85. " content:''!important;",
  86. " position:absolute!important;",
  87. " top:6px!important;",
  88. " right:4px!important;",
  89. " height:9px!important;",
  90. " width:13px!important;",
  91. " background-color:#f12b24!important;",
  92. " border-radius:1px!important;",
  93. " line-height:normal!important;",
  94. " background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTMgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4NCiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsLW9wYWNpdHk9IjAuNjQ3MSIgZmlsbD0iIzAwMDAwMCIgZD0iTTUsNyBMNiw3IEw2LDggTDUsOCBMNSw3IFogTTEwLDMgTDEwLDQgTDgsNCBMOCwzIEwxMCwzIFogTTMsNiBMMyw1IEw1LDUgTDUsNiBMMyw2IFogTTIsNyBMMyw3IEwzLDggTDIsOCBMMiw3IFogTTcsNyBMMTAsNyBMMTAsOCBMNyw4IEw3LDcgWiBNMTAsNiBMMTEsNiBMMTEsNyBMMTAsNyBMMTAsNiBaIj48L3BhdGg+DQogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0ZGRkZGRiIgZD0iTTUsNyBMNSw2IEw1LDUgTDMsNSBMMyw2IEwzLDcgTDIsNyBMMiwyIEwzLDIgTDMsNCBMNSw0IEw1LDIgTDYsMiBMNiw3IEw1LDcgWiBNMTEsNiBMMTAsNiBMMTAsNyBMNyw3IEw3LDIgTDEwLDIgTDEwLDMgTDExLDMgTDExLDYgWiBNMTAsNCBMMTAsMyBMOCwzIEw4LDQgTDgsNiBMMTAsNiBMMTAsNCBaIj48L3BhdGg+DQo8L3N2Zz4NCg==')!important;",
  95. " padding: 0!important;",
  96. " }",
  97.  
  98. /* Makes sure the captions/subtitles are at the correct height and don't move up and down */
  99. " .ytp-player-content, .ytp-subtitles-player-content { bottom: 49px!important; } ",
  100. /* rules for the watch later button */
  101. " .ytp-watch-later-button { width: 24px!important; float: right!important; }",
  102. " .ytp-tooltip-image-enabled { bottom: 49px!important; top: auto!important; }"
  103. ].join("\n");
  104. document.head.appendChild(css);
  105. })();