YouTube CSS + Downloader (reload page!)

Adds compact CSS style and download button for mobile and desktop site YouTube

当前为 2024-01-09 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name YouTube CSS + Downloader (reload page!)
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.6
  5. // @description Adds compact CSS style and download button for mobile and desktop site YouTube
  6. // @author Agreasyforkuser
  7. // @match https://*.youtube.com/*
  8. // @exclude https://*.youtube.com/tv*
  9. // @icon https://www.google.com/s2/favicons?domain=youtube.com
  10. // @grant GM_addStyle
  11. // ==/UserScript==
  12.  
  13. var currentURL = window.location.href;
  14.  
  15. //////////////////////// Download Button ///////////////////////////////////////
  16.  
  17. 'use strict';
  18. // Function to handle the redirect
  19. function handleRedirect() {
  20. // Get the current YouTube video URL
  21. var currentUrl = window.location.href;
  22. // Extract the video ID from the URL
  23. var videoIdMatch = currentUrl.match(/\/watch\?v=([^&]+)/);
  24. var videoId = videoIdMatch ? videoIdMatch[1] : null;
  25. if (videoId) {
  26. // Redirect to the new URL with "pp" added
  27. var newUrl = 'https://www.youtubepp.com/watch?v=' + videoId;
  28. // Open the new URL in a new tab
  29. window.open(newUrl, '_blank');
  30. }
  31. }
  32. // Function to create and append the "Download" button
  33. function appendDownloadButton() {
  34. // Create the button element
  35. var downloadButton = document.createElement('button');
  36. //downloadButton.innerText = '';
  37. downloadButton.style.margin = '13px'; // Add some margin for better appearance
  38. downloadButton.style.color = 'white';
  39. downloadButton.style.opacity = '0.8';
  40. downloadButton.style.border = 'none';
  41. downloadButton.style.cursor = 'pointer'; // Set the cursor to pointer on hov
  42. downloadButton.addEventListener('click', handleRedirect);
  43. downloadButton.classList.add('downloadbutton');
  44. var existingElementMobile = document.querySelector('.slim-owner-bylines');
  45. var existingElementDesktop = document.querySelector('.ytp-time-display');
  46. if (existingElementMobile) {
  47. existingElementMobile.parentNode.insertBefore(downloadButton, existingElementMobile.nextSibling);
  48. }
  49. if (existingElementDesktop) {
  50. existingElementDesktop.parentNode.insertBefore(downloadButton, existingElementDesktop.nextSibling);
  51. }
  52. }
  53.  
  54. setTimeout(()=>{appendDownloadButton()},1500);
  55.  
  56. //--------------------------------------------------------------------------------------------------------------------------------
  57. if (currentURL.startsWith("https://www.youtube.com")) {
  58.  
  59.  
  60. GM_addStyle(`
  61. * {border-radius:0px !important}
  62.  
  63. .downloadbutton:before {content: "Download 🡇" !important}
  64. .downloadbutton {background-color: black !important; border-radius: 6px !important}
  65.  
  66.  
  67. /* transparent searchbar */
  68. #masthead-container {z-index:0 !important}
  69. /* placeholder text in searchbar */
  70. ::-moz-placeholder {color:transparent !important}
  71. ::-webkit-input-placeholder {color:transparent !important}
  72.  
  73. #search-icon-legacy.ytd-searchbox yt-icon.ytd-searchbox {opacity:0}
  74. #logo.ytd-masthead:not(:hover) {opacity:0}
  75. #guide-button.ytd-masthead:not(:hover) {opacity:0}
  76. #voice-search-button.ytd-masthead:not(:hover) {opacity:0}
  77. #search-icon-legacy.ytd-searchbox:not(:hover) {background-color: transparent !important}
  78. #search-icon-legacy.ytd-searchbox:not(:hover) {border-left:none !important}
  79.  
  80. #buttons.ytd-masthead:not(:hover) {opacity:0}
  81.  
  82. #chips-wrapper.ytd-feed-filter-chip-bar-renderer:not(:hover) {opacity:0}
  83. #container.yt-chip-cloud-renderer:not(:hover) {opacity:0}
  84. yt-chip-cloud-chip-renderer.yt-chip-cloud-renderer {margin-top: 0 !important; margin-bottom: 0 !important}
  85. #contents.ytd-rich-grid-renderer {padding-top:0 !important}
  86.  
  87. ytd-comment-simplebox-renderer:not(:hover) {opacity:0}
  88. ytd-comments-header-renderer {margin: 0 !important}
  89. ytd-mini-guide-entry-renderer[system-icons]:not(:hover) .title.ytd-mini-guide-entry-renderer {opacity:0}
  90.  
  91. .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline {display:none}
  92. .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {background: rgba(0,0,0,.05) !important}
  93.  
  94. /* Channel page transparent upper bar */
  95. #contentContainer.tp-yt-app-header {opacity:0.9}
  96.  
  97. .html5-video-player {width:100%}
  98. .ytp-time-separator {opacity: 0 !important}
  99. .ytp-title {display: none !important}
  100. .ytp-gradient-top {display: none !important}
  101. .ytp-chrome-top-buttons {display: none !important}
  102. .ytp-fullerscreen-edu-chevron {display: none !important}
  103.  
  104.  
  105. /* compact feed */
  106. ytd-rich-item-renderer {margin: 0 !important}
  107. #meta.ytd-rich-grid-media {padding:0 !important}
  108. ytd-compact-video-renderer.ytd-item-section-renderer {margin: 0 !important}
  109. ytd-compact-playlist-renderer.ytd-item-section-renderer {margin: 0 !important}
  110. ytd-compact-video-renderer.ytd-watch-next-secondary-results-renderer:not([expansion="collapsed"]) {margin: 0 !important}
  111.  
  112. /* shorts */
  113. #items.yt-horizontal-list-renderer > .yt-horizontal-list-renderer {padding: 0px !important}
  114. #rich-shelf-header.ytd-rich-shelf-renderer {margin: 0px !important}
  115. #dismissible.ytd-rich-shelf-renderer {margin: 0px !important;border: 0px !important}
  116. /* preview */
  117. .ytp-inline-preview-ui .ytp-inline-preview-controls {top:0 !important;right:0 !important}
  118. /*ytd-thumbnail-overlay-time-status-renderer.ytd-thumbnail {margin: 0 !important}*/
  119. /*#time-status.ytd-thumbnail-overlay-time-status-renderer {color: black !important; background-color: white !important}*/
  120. /*#time-status.ytd-thumbnail-overlay-time-status-renderer {padding-top: 1px;padding-right: 0px;padding-bottom: 0px;padding-left: 1px;}*/
  121.  
  122. /* live chat */
  123. yt-live-chat-viewer-engagement-message-renderer {display: none !important}
  124. ytd-live-chat-frame {border:none !important}
  125.  
  126.  
  127. /* likes seperator */
  128. .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start::after {display:none !important}
  129. /* no button backgrounds until hover */
  130. #top-row.ytd-watch-metadata:not(:hover) .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {background-color:transparent !important}
  131. #top-row.ytd-watch-metadata:not(:hover) .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled {color: black !important; background-color:transparent !important}
  132. /* Info Card */
  133. ytd-info-panel-content-renderer[has-menu] {border: none !important}
  134.  
  135.  
  136. /* survey */
  137. #attached-survey.ytd-rich-grid-media {display: none !important}
  138.  
  139. /* hide left green border on subscription button */
  140. .animated-action__background-container {display: none !important}
  141.  
  142. #top-row.ytd-watch-metadata:not(:hover) .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading-trailing .yt-spec-button-shape-next__secondary-icon {opacity:0}
  143.  
  144. /* padding over video player */
  145. ytd-watch-flexy[default-layout]:not([no-top-margin]):not([reduced-top-margin]) #primary.ytd-watch-flexy, ytd-watch-flexy[default-layout]:not([no-top-margin]):not([reduced-top-margin]) #secondary.ytd-watch-flexy {padding-top:0 !important}
  146.  
  147.  
  148. `);
  149.  
  150.  
  151. };
  152.  
  153. //---------------------------------------------------------------------------------------------------------------------------
  154. if (currentURL.startsWith("https://m.youtube.com")) {
  155.  
  156.  
  157. GM_addStyle(`
  158. .downloadbutton:before {content: "Download ⤓" !important}
  159. .downloadbutton {color: gray !important; margin: 5px !important}
  160.  
  161. * {border-radius:0px !important}
  162.  
  163. /* dark mode navbar*/
  164. ytm-pivot-bar-renderer {background: rgba(0,0,0,1) !important;}
  165. ytm-pivot-bar-renderer c3-icon {color: rgba(255,255,255,1) !important}
  166. .pivot-bar-item-title {display:none !important}
  167. ytm-pivot-bar-renderer {border:none !important}
  168.  
  169. /* dark mode above/under videoplayer */
  170. .mobile-topbar-header[data-mode="watch"] {background-color: rgba(0,0,0,1) !important}
  171. .draggable .engagement-panel-section-list-header-wrapper {background-color: black !important;color: gray !important}
  172. /* number of comments */
  173. .engagement-panel-section-list-header-context > span:nth-child(1) {color: gray !important}
  174. .engagement-panel-drag-line {opacity:0 !important}
  175.  
  176. /* comments panel close button */
  177. .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text {color: gray !important}
  178.  
  179.  
  180. /* player */
  181. #player-control-overlay.fadein .player-controls-background {background: rgba(0,0,0,.3) !important}
  182. ytm-custom-control .player-controls-top {opacity: .4 !important}
  183. ytm-custom-control .player-controls-middle {opacity: .7 !important}
  184. .time-delimiter {opacity: 0 !important}
  185. ytm-custom-control .player-controls-bottom .icon-button {opacity: 0.8 !important}
  186. #player-control-overlay .player-controls-background-container {visibility: hidden !important}
  187. ytm-custom-control .player-controls-middle .player-control-play-pause-icon.icon-button > c3-icon {height: 46px !important; width: 46px !important}
  188. .YtProgressBarProgressBarPlayheadDot {height: 30px !important; border-radius: 50px !important}
  189.  
  190. /* player tip scrubber popup */
  191. .tooltip-wrapper {display: none !important}
  192.  
  193. /* make more space for the video content */
  194. .player-controls-pb {left: 15px !important; right: 15px !important}
  195. ytm-custom-control .player-controls-bottom {left: 0 !important; right: 0 !important}
  196. ytm-custom-control .player-controls-top {top: -8px !important}
  197.  
  198.  
  199. .fullscreen-action-menu {display:none !important}
  200.  
  201. .slim-video-metadata-header .slim-video-information-content.slim-video-information-empty-badge {padding-top: 0 !important}
  202. ytm-slim-video-metadata-section-renderer ytm-slim-owner-renderer {padding-top: 0 !important}
  203. .slim-video-action-bar-actions {padding: 0 0 !important}
  204. .ytm-autonav-bar {display:none !important}
  205. .modern-styling {margin:0 !important}
  206. .draggable .engagement-panel-section-list-header {padding:0 !important; border: none !important}
  207. ytm-comments-header-renderer {border:none !important}
  208. ytm-engagement-panel-section-list-renderer ytm-comment-simplebox-renderer {display: none !important}
  209. ytm-comment-renderer {padding:0 !important}
  210. ytm-comment-replies-renderer {margin:0 !important}
  211. ytm-single-column-watch-next-results-renderer .single-column-watch-next-modern-panels ytm-comments-entry-point-header-renderer.modern-styling {padding: 0 !important}
  212. ytm-slim-video-metadata-section-renderer ytm-slim-owner-renderer {padding-bottom: 0 !important}
  213. .rich-grid-sticky-header { display: none !important}
  214.  
  215. /* landscape comments panel */
  216. @media (min-width: 931px) and (orientation: landscape) {ytm-engagement-panel {width: 40% !important}}
  217. /* landscape sidebar recommendations */
  218. @media (min-width: 931px) and (orientation: landscape) {ytm-single-column-watch-next-results-renderer [section-identifier="related-items"] {padding:0 !important}}
  219. @media (min-width: 931px) and (orientation: landscape) {ytm-single-column-watch-next-results-renderer [section-identifier="related-items"] .item {padding:0 !important}}
  220.  
  221. /* account avatar, search button, login button */
  222. .topbar-menu-button-avatar-button, ytm-mobile-topbar-renderer ytm-menu .icon-button {display:block !important}
  223. .topbar-menu-button-avatar-button:not(:hover) {opacity: 0.3 !important}
  224. ytm-mobile-topbar-renderer ytm-menu .icon-button:not(:hover) {opacity: 0.3 !important}
  225. .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--text:not(:hover) {opacity: 0.3 !important}
  226. .mobile-topbar-header-sign-in-button:not(:hover) {opacity: 0.3 !important}
  227.  
  228. /* padding uploader avatar and subscribe button */
  229. ytm-slim-video-metadata-section-renderer ytm-slim-owner-renderer {padding: 0 !important}
  230. .slim-owner-profile-icon {margin-right: 2px !important}
  231. /* Title under player */
  232. .slim-video-metadata-header .slim-video-information-content.slim-video-information-empty-badge {padding:0 !important}
  233.  
  234. .mobile-topbar-header-endpoint:not(:hover), .logo-in-player-endpoint:not(:hover) {opacity: 0 !important}
  235.  
  236. .ytp-unmute-animated .ytp-unmute-icon {border-bottom: none !important;border-radius: 50px !important;background-color: rgba(255, 255, 255, 0.59) !important}
  237. .ytp-unmute-shrink .ytp-unmute-text {opacity: 0 !important}
  238. .ytp-unmute-shrink .ytp-unmute-box {width: 0 !important}
  239. ytm-reel-shelf-renderer .reel-shelf-header {margin:0 !important}
  240. .chip-bar {display: none !important}
  241.  
  242.  
  243.  
  244. #logo.ytd-masthead:not(:hover) {opacity:0}
  245. #guide-button.ytd-masthead:not(:hover) {opacity:0}
  246. #voice-search-button.ytd-masthead:not(:hover) {opacity:0}
  247. #buttons.ytd-masthead:not(:hover) {opacity:0}
  248. #chips-wrapper.ytd-feed-filter-chip-bar-renderer:not(:hover) {opacity:0}
  249. ytd-comment-simplebox-renderer:not(:hover) {opacity:0}
  250. ytd-mini-guide-entry-renderer[system-icons] .title.ytd-mini-guide-entry-renderer:not(:hover) {opacity:0}
  251. yt-button-shape.ytd-subscribe-button-renderer:not(:hover) {opacity:0.07}
  252.  
  253.  
  254. ytm-comment-thread-renderer {padding:0 !important}
  255. .comment-content {padding: 0 4px !important}
  256.  
  257. /* Feed */
  258. ytm-media-item[use-vertical-layout] .details {margin-top: 0 !important}
  259. ytm-rich-item-renderer ytm-media-item .details {margin-left: 0 !important}
  260. /* Thumbnail Time */
  261. ytm-thumbnail-overlay-time-status-renderer {margin-right: 0 !important}
  262. /* video recommendations under player */
  263. ytm-single-column-watch-next-results-renderer.full-bleed-wn-thumbs [section-identifier="related-items"] ytm-video-with-context-renderer ytm-media-item .details {margin: 0 !important}
  264.  
  265. /* Shorts */
  266. ytm-reel-shelf-renderer {border: none !important; margin: 0 !important}
  267. ytm-reel-shelf-renderer .reel-shelf-items > * {margin: 0 !important}
  268.  
  269. /* hide left green border on subscription button */
  270. .animated-action__background-container {display: none !important}
  271.  
  272. /* action buttons spacing */
  273. .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {background: rgba(0,0,0,.05) !important}
  274. .yt-spec-button-shape-next--size-m {padding: 0 6px !important; height: 32px !important}
  275.  
  276. /* description box */
  277. .draggable ytm-structured-description-content-renderer {padding: 0 !important}
  278. ytm-expandable-video-description-body-renderer.expandable-video-description-modern {margin: 0 !important}
  279. /* description statistics */
  280. ytm-video-description-header-renderer .factoids {padding: 0 !important}
  281.  
  282.  
  283. /* name / views separator */
  284. .ytm-badge-and-byline-separator {opacity: 0 !important}
  285.  
  286.  
  287. `);
  288. }
  289.