☰

YouTube CSS + Downloader (reload page!)

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

目前为 2024-01-12 提交的版本。查看 最新版本。

  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-icon-and-title');
  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()},2000);
  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.              
  75.               #logo.ytd-masthead:not(:hover) {opacity:0}
  76.               #guide-button.ytd-masthead:not(:hover) {opacity:0}
  77.               #voice-search-button.ytd-masthead:not(:hover) {opacity:0}
  78.               #search-icon-legacy.ytd-searchbox:not(:hover) {background-color: transparent !important}
  79.               #search-icon-legacy.ytd-searchbox:not(:hover) {border-left:none !important}
  80.  
  81.               #buttons.ytd-masthead:not(:hover) {opacity:0}
  82.  
  83.               #chips-wrapper.ytd-feed-filter-chip-bar-renderer:not(:hover) {opacity:0}
  84.               #container.yt-chip-cloud-renderer:not(:hover) {opacity:0}
  85.                yt-chip-cloud-chip-renderer.yt-chip-cloud-renderer {margin-top: 0 !important; margin-bottom: 0 !important}
  86.                #contents.ytd-rich-grid-renderer {padding-top:0 !important}
  87.  
  88.               ytd-comment-simplebox-renderer:not(:hover) {opacity:0}
  89.               ytd-comments-header-renderer {margin: 0 !important}
  90.               ytd-mini-guide-entry-renderer[system-icons]:not(:hover) .title.ytd-mini-guide-entry-renderer {opacity:0}
  91.  
  92.         
  93.               .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline {display:none}
  94.               .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {background: rgba(0,0,0,.05) !important}
  95.  
  96.               /* Channel page transparent upper bar */
  97.               #contentContainer.tp-yt-app-header {opacity:0.9}
  98.  
  99.               
  100.                .html5-video-player {width:100%}
  101.                .ytp-time-separator {opacity: 0 !important}
  102.                .ytp-title {display: none !important}
  103.                .ytp-gradient-top {display: none !important}
  104.                .ytp-chrome-top-buttons {display: none !important}
  105.                .ytp-fullerscreen-edu-chevron {display: none !important}
  106.  
  107.  
  108.                /* compact feed */
  109.                ytd-rich-item-renderer {margin: 0 !important}
  110.                #meta.ytd-rich-grid-media {padding:0 !important}
  111.                ytd-compact-video-renderer.ytd-item-section-renderer {margin: 0 !important}
  112.                ytd-compact-playlist-renderer.ytd-item-section-renderer {margin: 0 !important}
  113.                ytd-compact-video-renderer.ytd-watch-next-secondary-results-renderer:not([expansion="collapsed"]) {margin: 0 !important}
  114.  
  115.                /* shorts */
  116.                #items.yt-horizontal-list-renderer > .yt-horizontal-list-renderer {padding: 0px !important}
  117.                #rich-shelf-header.ytd-rich-shelf-renderer {margin: 0px !important}
  118.                #dismissible.ytd-rich-shelf-renderer {margin: 0px !important;border: 0px !important}
  119.                /* preview */
  120.                .ytp-inline-preview-ui .ytp-inline-preview-controls {top:0 !important;right:0 !important}
  121.                /*ytd-thumbnail-overlay-time-status-renderer.ytd-thumbnail {margin: 0 !important}*/
  122.                /*#time-status.ytd-thumbnail-overlay-time-status-renderer {color: black !important; background-color: white !important}*/
  123.                /*#time-status.ytd-thumbnail-overlay-time-status-renderer {padding-top: 1px;padding-right: 0px;padding-bottom: 0px;padding-left: 1px;}*/
  124.  
  125.                /* live chat */
  126.                yt-live-chat-viewer-engagement-message-renderer {display: none !important}
  127.                ytd-live-chat-frame {border:none !important}
  128.  
  129.  
  130.               /* likes seperator */
  131.               .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start::after {display:none !important}
  132.               /* no button backgrounds until hover */
  133.               #top-row.ytd-watch-metadata:not(:hover) .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {background-color:transparent !important}
  134.               #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}
  135.               /* Info Card */
  136.               ytd-info-panel-content-renderer[has-menu] {border: none !important}
  137.  
  138.  
  139.               /* survey */
  140.               #attached-survey.ytd-rich-grid-media {display: none !important}
  141.  
  142.               /* hide left green border on subscription button */
  143.               .animated-action__background-container {display: none !important}
  144.  
  145.               
  146.               #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}
  147.  
  148.               /* padding over video player */
  149.               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}
  150.  
  151.  
  152. `);
  153.  
  154.  
  155. };
  156.  
  157. //---------------------------------------------------------------------------------------------------------------------------
  158. if (currentURL.startsWith("https://m.youtube.com")) {
  159.  
  160.  
  161. GM_addStyle(`
  162.                .downloadbutton:before {content: "Download ⤓" !important}
  163.                .downloadbutton {color: gray !important; margin: 5px !important}
  164.  
  165.                 ytm-comment-thread-renderer .comment-icon,
  166.                 .slim-owner-profile-icon,
  167.                 .channel-thumbnail-icon,
  168.                 ytm-profile-icon,
  169.                 .ytm-comments-entry-point-teaser-avatar,
  170.                 .video-thumbnail-container-compact-rounded,
  171.                 .collections-stack-wiz__collection-stack1--medium,
  172.                 ytm-reel-item-renderer.rounded-reel-item .video-thumbnail-container-vertical,
  173.                 ytm-reel-item-renderer.rounded-reel-item .reel-item-metadata,
  174.                 .video-thumbnail-container-large.rounded-thumbnail
  175.                 {border-radius: 0 !important}
  176.  
  177.                 /* dark mode navbar*/
  178.                 ytm-pivot-bar-renderer {background-color: transparent !important; background: linear-gradient(180deg, rgba(0,0,0,0) 10%, rgba(0,0,0,0.5032212714187237) 56%, rgba(0,0,0,1) 100%) !important}
  179.                 ytm-pivot-bar-renderer c3-icon {color: white !important}
  180.                .pivot-bar-item-title {display:none !important}
  181.                 ytm-pivot-bar-renderer {border:none !important}
  182.  
  183.                /* dark mode above/under videoplayer */
  184.                .mobile-topbar-header[data-mode="watch"] {background-color: rgba(0,0,0,1) !important}
  185.                .draggable .engagement-panel-section-list-header-wrapper {background-color: black !important;color: gray !important}
  186.                .draggable .engagement-panel-section-list-header {border: none !important}
  187.                /* number of comments */
  188.                .engagement-panel-section-list-header-context > span:nth-child(1) {color: gray !important}
  189.                .engagement-panel-drag-line {opacity:0 !important}
  190.                .draggable .engagement-panel-container {border-radius: 0 !important}
  191.                ytm-single-column-watch-next-results-renderer .single-column-watch-next-modern-panels ytm-comments-entry-point-header-renderer.modern-styling {border-radius: 0 !important}
  192.                ytm-comments-header-renderer ytm-comment-simplebox-renderer {background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0,0,0,0.5032212714187237) 20%, rgba(0, 0, 0,0) 35%) !important}
  193.  
  194.                /* "comments" text */
  195.                .comments-entry-point-header-text {display: none !important}
  196.  
  197.               /* comments panel close button */
  198.               .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text {color: gray !important}
  199.  
  200.  
  201.                /* player */
  202.                #player-control-overlay.fadein .player-controls-background {background: rgba(0,0,0,.3) !important}
  203.                ytm-custom-control .player-controls-top {opacity: .4 !important}
  204.                ytm-custom-control .player-controls-middle {opacity: .7 !important}
  205.                .time-delimiter {opacity: 0 !important}
  206.                ytm-custom-control .player-controls-bottom .icon-button {opacity: 0.8 !important}
  207.                #player-control-overlay .player-controls-background-container {visibility: hidden !important}
  208.                 ytm-custom-control .player-controls-middle .player-control-play-pause-icon.icon-button > c3-icon {height: 46px !important; width: 46px !important}
  209.                 .YtProgressBarProgressBarPlayheadDot {height: 30px !important; border-radius: 50px !important}
  210.  
  211.                /* player tip scrubber popup */
  212.                .tooltip-wrapper {display: none !important}
  213.  
  214.                /* make more space for the video content */
  215.                .player-controls-pb {left: 15px !important; right: 15px !important}
  216.                ytm-custom-control .player-controls-bottom {left: 0 !important; right: 0 !important}
  217.                ytm-custom-control .player-controls-top {top: -8px !important}
  218.  
  219.  
  220.               .fullscreen-action-menu {display:none !important}
  221.  
  222.               .slim-video-metadata-header .slim-video-information-content.slim-video-information-empty-badge {padding-top: 0 !important}
  223.               ytm-slim-video-metadata-section-renderer ytm-slim-owner-renderer {padding-top: 0 !important}
  224.                          
  225.  
  226.               .modern-styling {margin:0 !important}
  227.               ytm-comments-header-renderer {border:none !important}
  228.               ytm-comment-renderer {padding:0 !important}
  229.               ytm-comment-thread-renderer {padding:0 !important}
  230.               .comment-content {padding: 0 4px !important}
  231.               ytm-comment-replies-renderer {margin:0 !important}
  232.               .comment-simplebox-placeholder {border: none !important}
  233.               .comments-simplebox-placeholder {background: none !important}
  234.               ytm-single-column-watch-next-results-renderer .single-column-watch-next-modern-panels ytm-comments-entry-point-header-renderer.modern-styling {padding: 0 !important}
  235.               ytm-slim-video-metadata-section-renderer ytm-slim-owner-renderer {padding-bottom: 0 !important}
  236.               .rich-grid-sticky-header { display: none !important}
  237.  
  238.               /* landscape comments panel */
  239.               @media (min-width: 931px) and (orientation: landscape) {ytm-engagement-panel {width: 40% !important}}
  240.               /* landscape sidebar recommendations */
  241.               @media (min-width: 931px) and (orientation: landscape) {ytm-single-column-watch-next-results-renderer [section-identifier="related-items"]       {padding:0 !important}}
  242.               @media (min-width: 931px) and (orientation: landscape) {ytm-single-column-watch-next-results-renderer [section-identifier="related-items"] .item {padding:0 !important}}
  243.  
  244.               /* account avatar, search button, login button */
  245.               .topbar-menu-button-avatar-button, ytm-mobile-topbar-renderer ytm-menu .icon-button {display:block !important}
  246.               .topbar-menu-button-avatar-button:not(:hover)                {opacity: 0.3 !important}
  247.               ytm-mobile-topbar-renderer ytm-menu .icon-button:not(:hover) {opacity: 0.3 !important}
  248.               .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--text:not(:hover) {opacity: 0.3 !important}
  249.               .mobile-topbar-header-sign-in-button:not(:hover)             {opacity: 0.3 !important}
  250.  
  251.               /* padding uploader avatar and subscribe button */
  252.               ytm-slim-video-metadata-section-renderer ytm-slim-owner-renderer {padding: 0 !important}
  253.               .slim-owner-profile-icon {margin-right: 2px !important}
  254.               /* Title under player */
  255.               .slim-video-metadata-header .slim-video-information-content.slim-video-information-empty-badge {padding:0 !important}
  256.  
  257.            
  258.  
  259.               .mobile-topbar-header-endpoint:not(:hover), .logo-in-player-endpoint:not(:hover) {opacity: 0 !important}
  260.  
  261.               .ytp-unmute-animated .ytp-unmute-icon {border-bottom: none !important;border-radius: 50px !important;background-color: rgba(255, 255, 255, 0.59) !important}
  262.               .ytp-unmute-shrink .ytp-unmute-text {opacity: 0 !important}
  263.               .ytp-unmute-shrink .ytp-unmute-box {width: 0 !important}
  264.               ytm-reel-shelf-renderer .reel-shelf-header {margin:0 !important}
  265.               .chip-bar {display: none !important}
  266.  
  267.  
  268.  
  269.               #logo.ytd-masthead:not(:hover) {opacity:0}
  270.               #guide-button.ytd-masthead:not(:hover) {opacity:0}
  271.               #voice-search-button.ytd-masthead:not(:hover) {opacity:0}
  272.               #buttons.ytd-masthead:not(:hover) {opacity:0}
  273.               #chips-wrapper.ytd-feed-filter-chip-bar-renderer:not(:hover) {opacity:0}
  274.               .related-chips-sentinel {display: none !important}
  275.               ytd-mini-guide-entry-renderer[system-icons] .title.ytd-mini-guide-entry-renderer:not(:hover) {opacity:0}
  276.               yt-button-shape.ytd-subscribe-button-renderer:not(:hover) {opacity:0.07}
  277.  
  278.               ytm-item-section-renderer {border: none !important}
  279.  
  280.  
  281.  
  282.               /* Feed */
  283.               ytm-media-item[use-vertical-layout] .details {margin-top: 0 !important}
  284.               ytm-rich-item-renderer ytm-media-item .details {margin-left: 0 !important}
  285.               /* Thumbnail Time */
  286.               ytm-thumbnail-overlay-time-status-renderer {margin-right: 0 !important}
  287.               /* video recommendations under player */
  288.               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}
  289.  
  290.  
  291.  
  292.               /* Shorts */
  293.               ytm-reel-shelf-renderer {border: none !important; margin: 0 !important}
  294.               ytm-reel-shelf-renderer .reel-shelf-items > * {margin: 0 !important}
  295.               .reel-shelf-menu {display: none !important}
  296.  
  297.               /* hide left green border on subscription button */
  298.               .animated-action__background-container {display: none !important}
  299.  
  300.               /* action buttons spacing */
  301.               .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {background: rgba(0,0,0,.05) !important}
  302.               .yt-spec-button-shape-next--size-m {padding: 0 6px !important; height: 33px !important}
  303.               .slim-video-action-bar-actions > .slim_video_action_bar_renderer_button, .slim-video-action-bar-actions > yt-smartimation, .slim-video-action-bar-actions > ytm-account-link-button-renderer {margin-right: 5px !important}
  304.               /* downvotes arent shown anyway */
  305.               .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-button.yt-spec-button-shape-next--segmented-end {width: min-content !important}
  306.               .slim-video-action-bar-actions {padding: 3px 3px !important}
  307.  
  308.              /* description box */
  309.              .draggable ytm-structured-description-content-renderer {padding: 0 !important}
  310.              ytm-expandable-video-description-body-renderer.expandable-video-description-modern {margin: 0 !important}
  311.              /* description statistics */
  312.              ytm-video-description-header-renderer .factoids {padding: 0 !important}
  313.  
  314.  
  315.              /* name / views and time / chapter separator */
  316.              .ytm-badge-and-byline-separator, .middot {opacity: 0 !important}
  317.  
  318.              /* weird empty space after going fullscreen and leaving fullscreen video */
  319.              .related-chips-slot-wrapper.slot-open {transform: none !important}
  320.  
  321. `);
  322. }