☰

YouTube - Non-Rounded Design

This script disables YouTube's new rounded corners (reverts back to the previous layout before 2022 with extra stuff included such as the Explore tab, Auto redirect Shorts to watch interface, old Comment replies UI, etc...)

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

  1. // ==UserScript==
  2. // @name         YouTube - Non-Rounded Design
  3. // @version      3.7.4
  4. // @description  This script disables YouTube's new rounded corners (reverts back to the previous layout before 2022 with extra stuff included such as the Explore tab, Auto redirect Shorts to watch interface, old Comment replies UI, etc...)
  5. // @author       Magma_Craft
  6. // @license MIT
  7. // @match        https://www.youtube.com/*
  8. // @namespace    https://gf.qytechs.cn/en/users/933798
  9. // @icon         https://www.youtube.com/favicon.ico
  10. // @run-at       document-start
  11. // @grant        none
  12. // @require      https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js
  13. // ==/UserScript==
  14.  
  15. // Attributes to remove from <html>
  16. const ATTRS = [
  17.     "darker-dark-theme",
  18.     "darker-dark-theme-deprecate"
  19. ];
  20.  
  21. // Regular config keys.
  22. const CONFIGS = {
  23.     BUTTON_REWORK: false
  24. }
  25.  
  26. // Experiment flags.
  27. const EXPFLAGS = {
  28.     polymer_verifiy_app_state: false,
  29.     enable_header_channel_handler_ui: false,
  30.     kevlar_unavailable_video_error_ui_client: false,
  31.     kevlar_refresh_on_theme_change: false,
  32.     kevlar_watch_cinematics: false,
  33.     kevlar_watch_metadata_refresh: false,
  34.     kevlar_watch_modern_metapanel: false,
  35.     web_amsterdam_playlists: false,
  36.     web_animated_like: false,
  37.     web_button_rework: false,
  38.     web_button_rework_with_live: false,
  39.     web_darker_dark_theme: false,
  40.     web_guide_ui_refresh: false,
  41.     web_modern_ads: false,
  42.     web_modern_buttons: false,
  43.     web_modern_chips: false,
  44.     web_modern_dialogs: false,
  45.     web_modern_playlists: false,
  46.     web_rounded_containers: false,
  47.     web_rounded_thumbnails: false,
  48.     web_searchbar_style: "default",
  49.     web_segmented_like_dislike_button: false,
  50.     web_sheets_ui_refresh: false,
  51.     web_snackbar_ui_refresh: false
  52. }
  53.  
  54. // Player flags
  55. // !!! USE STRINGS FOR VALUES !!!
  56. // For example: "true" instead of true
  57. const PLYRFLAGS = {
  58.     web_rounded_containers: "false",
  59.     web_rounded_thumbnails: "false"
  60. }
  61.  
  62. class YTP {
  63.     static observer = new MutationObserver(this.onNewScript);
  64.  
  65.     static _config = {};
  66.  
  67.     static isObject(item) {
  68.         return (item && typeof item === "object" && !Array.isArray(item));
  69.     }
  70.  
  71.     static mergeDeep(target, ...sources) {
  72.         if (!sources.length) return target;
  73.         const source = sources.shift();
  74.  
  75.         if (this.isObject(target) && this.isObject(source)) {
  76.             for (const key in source) {
  77.                 if (this.isObject(source[key])) {
  78.                     if (!target[key]) Object.assign(target, { [key]: {} });
  79.                     this.mergeDeep(target[key], source[key]);
  80.                 } else {
  81.                     Object.assign(target, { [key]: source[key] });
  82.                 }
  83.             }
  84.         }
  85.  
  86.         return this.mergeDeep(target, ...sources);
  87.     }
  88.  
  89.  
  90.     static onNewScript(mutations) {
  91.         for (var mut of mutations) {
  92.             for (var node of mut.addedNodes) {
  93.                 YTP.bruteforce();
  94.             }
  95.         }
  96.     }
  97.  
  98.     static start() {
  99.         this.observer.observe(document, {childList: true, subtree: true});
  100.     }
  101.  
  102.     static stop() {
  103.         this.observer.disconnect();
  104.     }
  105.  
  106.     static bruteforce() {
  107.         if (!window.yt) return;
  108.         if (!window.yt.config_) return;
  109.  
  110.         this.mergeDeep(window.yt.config_, this._config);
  111.     }
  112.  
  113.     static setCfg(name, value) {
  114.         this._config[name] = value;
  115.     }
  116.  
  117.     static setCfgMulti(configs) {
  118.         this.mergeDeep(this._config, configs);
  119.     }
  120.  
  121.     static setExp(name, value) {
  122.         if (!("EXPERIMENT_FLAGS" in this._config)) this._config.EXPERIMENT_FLAGS = {};
  123.  
  124.         this._config.EXPERIMENT_FLAGS[name] = value;
  125.     }
  126.  
  127.     static setExpMulti(exps) {
  128.         if (!("EXPERIMENT_FLAGS" in this._config)) this._config.EXPERIMENT_FLAGS = {};
  129.  
  130.         this.mergeDeep(this._config.EXPERIMENT_FLAGS, exps);
  131.     }
  132.  
  133.     static decodePlyrFlags(flags) {
  134.         var obj = {},
  135.             dflags = flags.split("&");
  136.  
  137.         for (var i = 0; i < dflags.length; i++) {
  138.             var dflag = dflags[i].split("=");
  139.             obj[dflag[0]] = dflag[1];
  140.         }
  141.  
  142.         return obj;
  143.     }
  144.  
  145.     static encodePlyrFlags(flags) {
  146.         var keys = Object.keys(flags),
  147.             response = "";
  148.  
  149.         for (var i = 0; i < keys.length; i++) {
  150.             if (i > 0) {
  151.                 response += "&";
  152.             }
  153.             response += keys[i] + "=" + flags[keys[i]];
  154.         }
  155.  
  156.         return response;
  157.     }
  158.  
  159.     static setPlyrFlags(flags) {
  160.         if (!window.yt) return;
  161.         if (!window.yt.config_) return;
  162.         if (!window.yt.config_.WEB_PLAYER_CONTEXT_CONFIGS) return;
  163.         var conCfgs = window.yt.config_.WEB_PLAYER_CONTEXT_CONFIGS;
  164.         if (!("WEB_PLAYER_CONTEXT_CONFIGS" in this._config)) this._config.WEB_PLAYER_CONTEXT_CONFIGS = {};
  165.  
  166.         for (var cfg in conCfgs) {
  167.             var dflags = this.decodePlyrFlags(conCfgs[cfg].serializedExperimentFlags);
  168.             this.mergeDeep(dflags, flags);
  169.             this._config.WEB_PLAYER_CONTEXT_CONFIGS[cfg] = {
  170.                 serializedExperimentFlags: this.encodePlyrFlags(dflags)
  171.             }
  172.         }
  173.     }
  174. }
  175.  
  176. window.addEventListener("yt-page-data-updated", function tmp() {
  177.     YTP.stop();
  178.     for (i = 0; i < ATTRS.length; i++) {
  179.         document.getElementsByTagName("html")[0].removeAttribute(ATTRS[i]);
  180.     }
  181.     window.removeEventListener("yt-page-date-updated", tmp);
  182. });
  183.  
  184. YTP.start();
  185.  
  186. YTP.setCfgMulti(CONFIGS);
  187. YTP.setExpMulti(EXPFLAGS);
  188. YTP.setPlyrFlags(PLYRFLAGS);
  189.  
  190. function $(q) {
  191.     return document.querySelector(q);
  192. }
  193.  
  194. // Re-add 'Explore' tab in sidebar (it also replaces the 'Shorts' tab)
  195. function waitForElm(selector) {
  196.     return new Promise(resolve => {
  197.         if (document.querySelector(selector)) {
  198.             return resolve(document.querySelector(selector));
  199.         }
  200.  
  201.         const observer = new MutationObserver(mutations => {
  202.             if (document.querySelector(selector)) {
  203.                 resolve(document.querySelector(selector));
  204.                 observer.disconnect();
  205.             }
  206.         });
  207.  
  208.         observer.observe(document.body, {
  209.             childList: true,
  210.             subtree: true
  211.         });
  212.     });
  213. }
  214.  
  215.     function restoreTrending() {
  216.  
  217.         var trendingData = {
  218.             "navigationEndpoint": {
  219.                 "clickTrackingParams": "CBwQtSwYASITCNqYh-qO_fACFcoRrQYdP44D9Q==",
  220.                 "commandMetadata": {
  221.                     "webCommandMetadata": {
  222.                         "url": "/feed/explore",
  223.                         "webPageType": "WEB_PAGE_TYPE_BROWSE",
  224.                         "rootVe": 6827,
  225.                         "apiUrl": "/youtubei/v1/browse"
  226.                     }
  227.                 },
  228.                 "browseEndpoint": {
  229.                     "browseId": "FEtrending"
  230.                 }
  231.             },
  232.             "icon": {
  233.                 "iconType": "EXPLORE"
  234.             },
  235.             "trackingParams": "CBwQtSwYASITCNqYh-qO_fACFcoRrQYdP44D9Q==",
  236.             "formattedTitle": {
  237.                 "simpleText": "Explore"
  238.             },
  239.             "accessibility": {
  240.                 "accessibilityData": {
  241.                     "label": "Explore"
  242.                 }
  243.             },
  244.             "isPrimary": true
  245.         };
  246.  
  247.         var guidetemplate = `<ytd-guide-entry-renderer class="style-scope ytd-guide-section-renderer" is-primary="" line-end-style="none"><!--css-build:shady--><a id="endpoint" class="yt-simple-endpoint style-scope ytd-guide-entry-renderer" tabindex="-1" role="tablist"><tp-yt-paper-item role="tab" class="style-scope ytd-guide-entry-renderer" tabindex="0" aria-disabled="false"><!--css-build:shady--><yt-icon class="guide-icon style-scope ytd-guide-entry-renderer" disable-upgrade=""></yt-icon><yt-img-shadow height="24" width="24" class="style-scope ytd-guide-entry-renderer" disable-upgrade=""></yt-img-shadow><yt-formatted-string class="title style-scope ytd-guide-entry-renderer"><!--css-build:shady--></yt-formatted-string><span class="guide-entry-count style-scope ytd-guide-entry-renderer"></span><yt-icon class="guide-entry-badge style-scope ytd-guide-entry-renderer" disable-upgrade=""></yt-icon><div id="newness-dot" class="style-scope ytd-guide-entry-renderer"></div></tp-yt-paper-item></a><yt-interaction class="style-scope ytd-guide-entry-renderer"><!--css-build:shady--><div class="stroke style-scope yt-interaction"></div><div class="fill style-scope yt-interaction"></div></yt-interaction></ytd-guide-entry-renderer>`;
  248.         document.querySelector(`#items > ytd-guide-entry-renderer:nth-child(2)`).data = trendingData;
  249.  
  250.         var miniguidetemplate = `<ytd-mini-guide-entry-renderer class="style-scope ytd-mini-guide-section-renderer" is-primary="" line-end-style="none"><!--css-build:shady--><a id="endpoint" class="yt-simple-endpoint style-scope ytd-guide-entry-renderer" tabindex="-1" role="tablist"><tp-yt-paper-item role="tab" class="style-scope ytd-guide-entry-renderer" tabindex="0" aria-disabled="false"><!--css-build:shady--><yt-icon class="guide-icon style-scope ytd-guide-entry-renderer" disable-upgrade=""></yt-icon><yt-img-shadow height="24" width="24" class="style-scope ytd-guide-entry-renderer" disable-upgrade=""></yt-img-shadow><yt-formatted-string class="title style-scope ytd-guide-entry-renderer"><!--css-build:shady--></yt-formatted-string><span class="guide-entry-count style-scope ytd-guide-entry-renderer"></span><yt-icon class="guide-entry-badge style-scope ytd-guide-entry-renderer" disable-upgrade=""></yt-icon><div id="newness-dot" class="style-scope ytd-guide-entry-renderer"></div></tp-yt-paper-item></a><yt-interaction class="style-scope ytd-guide-entry-renderer"><!--css-build:shady--><div class="stroke style-scope yt-interaction"></div><div class="fill style-scope yt-interaction"></div></yt-interaction></ytd-guide-entry-renderer>`;
  251.         document.querySelector(`#items > ytd-mini-guide-entry-renderer:nth-child(2)`).data = trendingData;
  252.  
  253.     }
  254.  
  255.  
  256. waitForElm("#items.ytd-guide-section-renderer").then((elm) => {
  257.     restoreTrending();
  258. });
  259.  
  260. waitForElm("#items.ytd-mini-guide-section-renderer").then((elm) => {
  261.     restoreTrending();
  262. });
  263.  
  264. // Auto redirect shorts to watch page (credit goes to YukisCoffee and Fuim)
  265. var oldHref = document.location.href;
  266. if (window.location.href.indexOf('youtube.com/shorts') > -1) {
  267.     window.location.replace(window.location.toString().replace('/shorts/', '/watch?v='));
  268. }
  269. window.onload = function() {
  270.     var bodyList = document.querySelector("body")
  271.     var observer = new MutationObserver(function(mutations) {
  272.         mutations.forEach(function(mutation) {
  273.             if (oldHref != document.location.href) {
  274.                 oldHref = document.location.href;
  275.                 console.log('location changed!');
  276.                 if (window.location.href.indexOf('youtube.com/shorts') > -1) {
  277.                     window.location.replace(window.location.toString().replace('/shorts/', '/watch?v='));
  278.                 }
  279.             }
  280.         });
  281.     });
  282.     var config = {
  283.         childList: true,
  284.         subtree: true
  285.     };
  286.     observer.observe(bodyList, config);
  287. };
  288.  
  289. /**
  290.  * Shorts URL redirect.
  291.  *
  292.  * This is called on initial visit only. Successive navigations
  293.  * are managed by modifying the YouTube Desktop application.
  294.  */
  295. (function(){
  296.  
  297. /** @type {string} */
  298. var path = window.location.pathname;
  299.  
  300. if (0 == path.search("/shorts"))
  301. {
  302.     // Extract the video ID from the shorts link and redirect.
  303.  
  304.     /** @type {string} */
  305.     var id = path.replace(/\/|shorts|\?.*/g, "");
  306.  
  307.     window.location.replace("https://www.youtube.com/watch?v=" + id);
  308. }
  309.  
  310. })();
  311.  
  312. /**
  313.  * YouTube Desktop Shorts remover.
  314.  *
  315.  * If the initial URL was not a shorts link, traditional redirection
  316.  * will not work. This instead modifies video elements to replace them with
  317.  * regular links.
  318.  */
  319. (function(){
  320.  
  321. /**
  322.  * @param {string} selector (CSS-style) of the element
  323.  * @return {Promise<Element>}
  324.  */
  325. async function querySelectorAsync(selector)
  326. {
  327.     while (null == document.querySelector(selector))
  328.     {
  329.         // Pause for a frame and let other code go on.
  330.         await new Promise(r => requestAnimationFrame(r));
  331.     }
  332.  
  333.     return document.querySelector(selector);
  334. }
  335.  
  336. /**
  337.  * Small toolset for interacting with the Polymer
  338.  * YouTube Desktop application.
  339.  *
  340.  * @author Taniko Yamamoto <kirasicecreamm@gmail.com>
  341.  * @version 1.0
  342.  */
  343. class YtdTools
  344. {
  345.     /** @type {string} Page data updated event */
  346.     static EVT_DATA_UPDATE = "yt-page-data-updated";
  347.  
  348.     /** @type {Element} Main YT Polymer manager */
  349.     static YtdApp;
  350.  
  351.     /** @type {bool} */
  352.     static hasInitialLoaded = false;
  353.  
  354.     /** @return {Promise<bool>} */
  355.     static async isPolymer()
  356.     {
  357.         /** @return {Promise<void>} */
  358.         function waitForBody() // nice hack lazy ass
  359.         {
  360.             return new Promise(r => {
  361.                 document.addEventListener("DOMContentLoaded", function a(){
  362.                     document.removeEventListener("DOMContentLoaded", a);
  363.                     r();
  364.                 });
  365.             });
  366.         }
  367.  
  368.         await waitForBody();
  369.  
  370.         if ("undefined" != typeof document.querySelector("ytd-app"))
  371.         {
  372.             this.YtdApp = document.querySelector("ytd-app");
  373.             return true;
  374.         }
  375.         return false;
  376.     }
  377.  
  378.     /** @async @return {Promise<void|string>} */
  379.     static waitForInitialLoad()
  380.     {
  381.         var updateEvent = this.EVT_DATA_UPDATE;
  382.         return new Promise((resolve, reject) => {
  383.             if (!this.isPolymer())
  384.             {
  385.                 reject("Not Polymer :(");
  386.             }
  387.  
  388.             function _listenerCb()
  389.             {
  390.                 document.removeEventListener(updateEvent, _listenerCb);
  391.                 resolve();
  392.             }
  393.  
  394.             document.addEventListener(updateEvent, _listenerCb);
  395.         });
  396.     }
  397.  
  398.     /** @return {string} */
  399.     static getPageType()
  400.     {
  401.         return this.YtdApp.data.page;
  402.     }
  403. }
  404.  
  405. class ShortsTools
  406. {
  407.     /** @type {MutationObserver} */
  408.     static mo = new MutationObserver(muts => {
  409.         muts.forEach(mut => {
  410.             Array.from(mut.addedNodes).forEach(node => {
  411.                 if (node instanceof HTMLElement) {
  412.                     this.onMutation(node);
  413.                 }
  414.             });
  415.         });
  416.     });
  417.  
  418.     /** @return {void} */
  419.     static watchForShorts()
  420.     {
  421.         /*
  422.         this.mo.observe(YtdTools.YtdApp, {
  423.             childList: true,
  424.             subtree: true
  425.         });
  426.         */
  427.         var me = this;
  428.         YtdTools.YtdApp.arrive("ytd-video-renderer, ytd-grid-video-renderer", function() {
  429.             me.onMutation(this);
  430.  
  431.             // This is literally the worst hack I ever wrote, but it works ig...
  432.             (new MutationObserver(function(){
  433.                 if (me.isShortsRenderer(this))
  434.                 {
  435.                     me.onMutation(this);
  436.                 }
  437.             }.bind(this))).observe(this, {"subtree": true, "childList": true, "characterData": "true"});
  438.         });
  439.     }
  440.  
  441.     /** @return {void} */
  442.     static stopWatchingForShorts()
  443.     {
  444.         this.mo.disconnect();
  445.     }
  446.  
  447.     /**
  448.      * @param {HTMLElement} node
  449.      * @return {void}
  450.      */
  451.     static onMutation(node)
  452.     {
  453.         if (node.tagName.search("VIDEO-RENDERER") > -1 && this.isShortsRenderer(node))
  454.         {
  455.             this.transformShortsRenderer(node);
  456.         }
  457.     }
  458.  
  459.     /** @return {bool} */
  460.     static isShortsRenderer(videoRenderer)
  461.     {
  462.         return "WEB_PAGE_TYPE_SHORTS" == videoRenderer?.data?.navigationEndpoint?.commandMetadata?.webCommandMetadata?.webPageType;
  463.     }
  464.  
  465.     /** @return {string} */
  466.     static extractLengthFromA11y(videoData)
  467.     {
  468.         // A11y = {title} by {creator} {date} {*length*} {viewCount} - play Short
  469.         // tho hopefully this works in more than just English
  470.         var a11yTitle = videoData.title.accessibility.accessibilityData.label;
  471.  
  472.         var publishedTimeText = videoData.publishedTimeText.simpleText;
  473.         var viewCountText = videoData.viewCountText.simpleText;
  474.  
  475.         var isolatedLengthStr = a11yTitle.split(publishedTimeText)[1].split(viewCountText)[0]
  476.             .replace(/\s/g, "");
  477.  
  478.         var numbers = isolatedLengthStr.split(/\D/g);
  479.  
  480.         var string = "";
  481.  
  482.         // Remove all empties before iterating it
  483.         for (var i = 0; i < numbers.length; i++)
  484.         {
  485.             if ("" === numbers[i])
  486.             {
  487.                 numbers.splice(i, 1);
  488.                 i--;
  489.             }
  490.         }
  491.  
  492.         for (var i = 0; i < numbers.length; i++)
  493.         {
  494.             // Lazy 0 handling idc im tired
  495.             if (1 == numbers.length)
  496.             {
  497.                 string += "0:";
  498.                 if (1 == numbers[i].length)
  499.                 {
  500.                     string += "0" + numbers[i];
  501.                 }
  502.                 else
  503.                 {
  504.                     string += numbers[i];
  505.                 }
  506.  
  507.                 break;
  508.             }
  509.  
  510.             if (0 != i) string += ":";
  511.             if (0 != i && 1 == numbers[i].length) string += "0";
  512.             string += numbers[i];
  513.         }
  514.  
  515.         return string;
  516.     }
  517.  
  518.     /**
  519.      * @param {HTMLElement} videoRenderer
  520.      * @return {void}
  521.      */
  522.     static transformShortsRenderer(videoRenderer)
  523.     {
  524.  
  525.         /** @type {string} */
  526.         var originalOuterHTML = videoRenderer.outerHTML;
  527.  
  528.         /** @type {string} */
  529.         var lengthText = videoRenderer.data?.lengthText?.simpleText ?? this.extractLengthFromA11y(videoRenderer.data);
  530.  
  531.         /** @type {string} */
  532.         var lengthA11y = videoRenderer.data?.lengthText?.accessibility?.accessibilityData?.label ?? "";
  533.  
  534.         /** @type {string} */
  535.         var originalHref = videoRenderer.data.navigationEndpoint.commandMetadata.webCommandMetadata.url;
  536.         var href = "/watch?v=" + originalHref.replace(/\/|shorts|\?.*/g, "");
  537.  
  538.         var reelWatchEndpoint = videoRenderer.data.navigationEndpoint.reelWatchEndpoint;
  539.  
  540.         var i;
  541.         videoRenderer.data.thumbnailOverlays.forEach((a, index) =>{
  542.             if ("thumbnailOverlayTimeStatusRenderer" in a)
  543.             {
  544.                 i = index;
  545.             }
  546.         });
  547.  
  548.         // Set the thumbnail overlay style
  549.         videoRenderer.data.thumbnailOverlays[i].thumbnailOverlayTimeStatusRenderer.style = "DEFAULT";
  550.  
  551.         delete videoRenderer.data.thumbnailOverlays[i].thumbnailOverlayTimeStatusRenderer.icon;
  552.  
  553.         // Set the thumbnail overlay text
  554.         videoRenderer.data.thumbnailOverlays[i].thumbnailOverlayTimeStatusRenderer.text.simpleText = lengthText;
  555.  
  556.         // Set the thumbnail overlay accessibility label
  557.         videoRenderer.data.thumbnailOverlays[i].thumbnailOverlayTimeStatusRenderer.text.accessibility.accessibilityData.label = lengthA11y;
  558.  
  559.         // Set the navigation endpoint metadata (used for middle click)
  560.         videoRenderer.data.navigationEndpoint.commandMetadata.webCommandMetadata.webPageType = "WEB_PAGE_TYPE_WATCH";
  561.         videoRenderer.data.navigationEndpoint.commandMetadata.webCommandMetadata.url = href;
  562.  
  563.         videoRenderer.data.navigationEndpoint.watchEndpoint = {
  564.             "videoId": reelWatchEndpoint.videoId,
  565.             "playerParams": reelWatchEndpoint.playerParams,
  566.             "params": reelWatchEndpoint.params
  567.         };
  568.         delete videoRenderer.data.navigationEndpoint.reelWatchEndpoint;
  569.  
  570.         //var _ = videoRenderer.data; videoRenderer.data = {}; videoRenderer.data = _;
  571.  
  572.         // Sometimes the old school data cycle trick fails,
  573.         // however this always works.
  574.         var _ = videoRenderer.cloneNode();
  575.         _.data = videoRenderer.data;
  576.         for (var i in videoRenderer.properties)
  577.         {
  578.             _[i] = videoRenderer[i];
  579.         }
  580.         videoRenderer.insertAdjacentElement("afterend", _);
  581.         videoRenderer.remove();
  582.     }
  583. }
  584.  
  585. /**
  586.  * Sometimes elements are reused on page updates, so fix that
  587.  *
  588.  * @return {void}
  589.  */
  590. function onDataUpdate()
  591. {
  592.     var videos = document.querySelectorAll("ytd-video-renderer, ytd-grid-video-renderer");
  593.  
  594.     for (var i = 0, l = videos.length; i < l; i++) if (ShortsTools.isShortsRenderer(videos[i]))
  595.     {
  596.         ShortsTools.transformShortsRenderer(videos[i]);
  597.     }
  598. }
  599.  
  600. /**
  601.  * I hope she makes lotsa spaghetti :D
  602.  * @async @return {Promise<void>}
  603.  */
  604. async function main()
  605. {
  606.     // If not Polymer, nothing happens
  607.     if (await YtdTools.isPolymer())
  608.     {
  609.         ShortsTools.watchForShorts();
  610.  
  611.         document.addEventListener("yt-page-data-updated", onDataUpdate);
  612.     }
  613. }
  614.  
  615. main();
  616.  
  617. })();
  618.  
  619. // Fix for like and dislike ratio (Return YouTube Dislike is required)
  620. function $(q) {
  621.     return document.querySelector(q);
  622. }
  623.  
  624. addEventListener('yt-page-data-updated', function() {
  625.     if(!location.pathname.startsWith('/watch')) return;
  626.     
  627.     var lds = $('ytd-video-primary-info-renderer div#top-level-buttons-computed');
  628.     var like = $('ytd-video-primary-info-renderer div#segmented-like-button > ytd-toggle-button-renderer');
  629.     var share = $('ytd-video-primary-info-renderer div#top-level-buttons-computed > ytd-segmented-like-dislike-button-renderer + ytd-button-renderer');
  630.     
  631.     lds.insertBefore(like, share);
  632.     
  633.     like.setAttribute('class', like.getAttribute('class').replace('ytd-segmented-like-dislike-button-renderer', 'ytd-menu-renderer force-icon-button'));
  634.     like.removeAttribute('is-paper-button-with-icon');
  635.     like.removeAttribute('is-paper-button');
  636.     like.setAttribute('style-action-button', '');
  637.     like.setAttribute('is-icon-button', '');
  638.     like.querySelector('a').insertBefore(like.querySelector('yt-formatted-string'), like.querySelector('tp-yt-paper-tooltip'));
  639.     try { like.querySelector('paper-ripple').remove(); } catch(e) {}
  640.     var paper = like.querySelector('tp-yt-paper-button');
  641.     paper.removeAttribute('style-target');
  642.     paper.removeAttribute('animated');
  643.     paper.removeAttribute('elevation');
  644.     like.querySelector('a').insertBefore(paper.querySelector('yt-icon'), like.querySelector('yt-formatted-string'));
  645.     paper.outerHTML = paper.outerHTML.replace('<tp-yt-paper-button ', '<yt-icon-button ').replace('</tp-yt-paper-button>', '</yt-icon-button>');
  646.     paper = like.querySelector('yt-icon-button');
  647.     paper.querySelector('button#button').appendChild(like.querySelector('yt-icon'));
  648.     
  649.     var dislike = $('ytd-video-primary-info-renderer div#segmented-dislike-button > ytd-toggle-button-renderer');
  650.     lds.insertBefore(dislike, share);
  651.     $('ytd-video-primary-info-renderer ytd-segmented-like-dislike-button-renderer').remove();
  652.     dislike.setAttribute('class', dislike.getAttribute('class').replace('ytd-segmented-like-dislike-button-renderer', 'ytd-menu-renderer force-icon-button'));
  653.     dislike.removeAttribute('has-no-text');
  654.     dislike.setAttribute('style-action-button', '');
  655.     var dlabel = document.createElement('yt-formatted-stringx');
  656.     dlabel.setAttribute('id', 'text');
  657.     if(dislike.getAttribute('class').includes('style-default-active'))
  658.         dlabel.setAttribute('class', dlabel.getAttribute('class').replace('style-default', 'style-default-active'));
  659.     dislike.querySelector('a').insertBefore(dlabel, dislike.querySelector('tp-yt-paper-tooltip'));
  660.     
  661.     $('ytd-video-primary-info-renderer').removeAttribute('flex-menu-enabled');
  662. });
  663.  
  664. // Restore old comment replies UI
  665. var observingComments = false;
  666. var hl;
  667.  
  668. const cfconfig = {
  669.     unicodeEmojis: false
  670. };
  671.  
  672. const cfi18n = {
  673.     en: {
  674.         viewSingular: "View reply",
  675.         viewMulti: "View %s replies",
  676.         viewSingularOwner: "View reply from %s",
  677.         viewMultiOwner: "View %s replies from %s and others",
  678.         hideSingular: "Hide reply",
  679.         hideMulti: "Hide replies",
  680.         replyCountIsolator: /( REPLIES)|( REPLY)/
  681.     }
  682. }
  683.  
  684. /**
  685.  * Get a string from the localization strings.
  686.  *
  687.  * @param {string}   string  Name of string to get
  688.  * @param {string}   hl      Language to use.
  689.  * @param {...array} args    Strings.
  690.  * @returns {string}
  691.  */
  692.  function getString(string, hl = "en", ...args) {
  693.     if (!string) return;
  694.     var str;
  695.     if (cfi18n[hl]) {
  696.         if (cfi18n[hl][string]) {
  697.             str = cfi18n[hl][string];
  698.         } else if (cfi18n.en[string]) {
  699.             str = cfi18n.en[string];
  700.         } else {
  701.             return;
  702.         }
  703.     } else {
  704.         if (cfi18n.en[string]) str = cfi18n.en[string];
  705.     }
  706.  
  707.     for (var i = 0; i < args.length; i++) {
  708.         str = str.replace(/%s/, args[i]);
  709.     }
  710.  
  711.     return str;
  712. }
  713.  
  714. /**
  715.  * Wait for a selector to exist
  716.  *
  717.  * @param {string}       selector  CSS Selector
  718.  * @param {HTMLElement}  base      Element to search inside
  719.  * @returns {Node}
  720.  */
  721. async function waitForElm(selector, base = document) {
  722.     if (!selector) return null;
  723.     if (!base.querySelector) return null;
  724.     while (base.querySelector(selector) == null) {
  725.         await new Promise(r => requestAnimationFrame(r));
  726.     };
  727.     return base.querySelector(selector);
  728. };
  729.  
  730. /**
  731.  * Is a value in an array?
  732.  *
  733.  * @param {*}     needle    Value to search
  734.  * @param {Array} haystack  Array to search
  735.  * @returns {boolean}
  736.  */
  737.  function inArray(needle, haystack) {
  738.     for (var i = 0; i < haystack.length; i++) {
  739.         if (needle == haystack[i]) return true;
  740.     }
  741.     return false;
  742. }
  743.  
  744. /**
  745.  * Get text of an InnerTube string.
  746.  *
  747.  * @param {object} object  String container.
  748.  */
  749. function getSimpleString(object) {
  750.     if (object.simpleText) return object.simpleText;
  751.  
  752.     var str = "";
  753.     for (var i = 0; i < object.runs.length; i++) {
  754.         str += object.runs[i].text;
  755.     }
  756.     return str;
  757. }
  758.  
  759. /**
  760.  * Format a commentRenderer.
  761.  *
  762.  * @param {object} comment  commentRenderer from InnerTube.
  763.  */
  764. function formatComment(comment) {
  765.     if (cfconfig.unicodeEmojis) {
  766.         var runs;
  767.         try {
  768.             runs = comment.contentText.runs
  769.             for (var i = 0; i < runs.length; i++) {
  770.                 delete runs[i].emoji;
  771.                 delete runs[i].loggingDirectives;
  772.             }
  773.         } catch(err) {}
  774.     }
  775.  
  776.     return comment;
  777. }
  778.  
  779. /**
  780.  * Format a commentThreadRenderer.
  781.  *
  782.  * @param {object} thread  commentThreadRenderer from InnerTube.
  783.  */
  784. async function formatCommentThread(thread) {
  785.     if (thread.comment.commentRenderer) {
  786.         thread.comment.commentRenderer = formatComment(thread.comment.commentRenderer);
  787.     }
  788.  
  789.     var replies;
  790.     try {
  791.         replies = thread.replies.commentRepliesRenderer;
  792.         if (replies.viewRepliesIcon) {
  793.             replies.viewReplies.buttonRenderer.icon = replies.viewRepliesIcon.buttonRenderer.icon;
  794.             delete replies.viewRepliesIcon;
  795.         }
  796.  
  797.         if (replies.hideRepliesIcon) {
  798.             replies.hideReplies.buttonRenderer.icon = replies.hideRepliesIcon.buttonRenderer.icon;
  799.             delete replies.hideRepliesIcon;
  800.         }
  801.  
  802.         var creatorName;
  803.         try {
  804.             creatorName = replies.viewRepliesCreatorThumbnail.accessibility.accessibilityData.label;
  805.             delete replies.viewRepliesCreatorThumbnail;
  806.         } catch(err) {}
  807.  
  808.         var replyCount = getSimpleString(replies.viewReplies.buttonRenderer.text);
  809.         replyCount = +replyCount.replace(getString("replyCountIsolator", hl), "");
  810.  
  811.         var viewMultiString = creatorName ? "viewMultiOwner" : "viewMulti";
  812.         var viewSingleString = creatorName ? "viewSingularOwner" : "viewSingular";
  813.  
  814.         replies.viewReplies.buttonRenderer.text = {
  815.             runs: [
  816.                 {
  817.                     text: (replyCount > 1) ? getString(viewMultiString, hl, replyCount, creatorName) : getString(viewSingleString, hl, creatorName)
  818.                 }
  819.             ]
  820.         }
  821.  
  822.         replies.hideReplies.buttonRenderer.text = {
  823.             runs: [
  824.                 {
  825.                     text: (replyCount > 1) ? getString("hideMulti", hl) :  getString("hideSingular", hl)
  826.                 }
  827.             ]
  828.         };
  829.     } catch(err) {}
  830.  
  831.     return thread;
  832. }
  833.  
  834. /**
  835.  * Force Polymer to refresh data of an element.
  836.  *
  837.  * @param {Node} element  Element to refresh data of.
  838.  */
  839. function refreshData(element) {
  840.     var clone = element.cloneNode();
  841.     clone.data = element.data;
  842.     // Let the script know we left our mark
  843.     // in a way that doesn't rely on classes
  844.     // because Polymer likes to cast comments
  845.     // into the void for later reuse
  846.     clone.data.fixedByCF = true;
  847.     for (var i in element.properties) {
  848.         clone[i] = element[i];
  849.     }
  850.     element.insertAdjacentElement("afterend", clone);
  851.     element.remove();
  852. }
  853.  
  854. var commentObserver = new MutationObserver((list) => {
  855.     list.forEach(async (mutation) => {
  856.         if (mutation.addedNodes) {
  857.             for (var i = 0; i < mutation.addedNodes.length; i++) {
  858.                 var elm = mutation.addedNodes[i];
  859.                 if (elm.classList && elm.data && !elm.data.fixedByCF) {
  860.                     if (elm.tagName == "YTD-COMMENT-THREAD-RENDERER") {
  861.                         elm.data = await formatCommentThread(elm.data);
  862.                         refreshData(elm);
  863.                     } else if (elm.tagName == "YTD-COMMENT-RENDERER") {
  864.                         if (!elm.classList.contains("ytd-comment-thread-renderer")) {
  865.                             elm.data = formatComment(elm.data);
  866.                             refreshData(elm);
  867.                         }
  868.                     }
  869.                 }
  870.             }
  871.         }
  872.     });
  873. });
  874.  
  875. document.addEventListener("yt-page-data-updated", async (e) => {
  876.     hl = yt.config_.HL;
  877.     commentObserver.observe(document.querySelector("ytd-app"),  { childList: true, subtree: true });
  878. });
  879.  
  880. // CSS adjustments and UI fixes (both userstyles are required) + Remove "Video paused. Continue watching?" popup
  881. (function() {
  882. ApplyCSS();
  883. function ApplyCSS() {
  884. var styles = document.createElement("style");
  885. styles.innerHTML=`
  886.     /* Disable rounded corners on search box + revert old channel UI */
  887.     #container.ytd-searchbox {
  888.     background-color: var(--ytd-searchbox-background) !important;
  889.     border-radius: 2px 0 0 2px !important;
  890.     box-shadow: inset 0 1px 2px var(--ytd-searchbox-legacy-border-shadow-color) !important;
  891.     color: var(--ytd-searchbox-text-color) !important;
  892.     padding: 2px 6px !important;
  893.     }
  894.  
  895.     ytd-searchbox[desktop-searchbar-style="rounded_corner_dark_btn"] #searchbox-button.ytd-searchbox {
  896.     display: none !important;
  897.     }
  898.  
  899.     ytd-searchbox[desktop-searchbar-style="rounded_corner_light_btn"] #searchbox-button.ytd-searchbox {
  900.     display: none !important;
  901.     }
  902.  
  903.     #search[has-focus] #search-input {
  904.     margin-left: 32px !important;
  905.     }
  906.  
  907.     #search-icon-legacy.ytd-searchbox {
  908.     display: block !important;
  909.     border-radius: 0px 2px 2px 0px !important;
  910.     }
  911.  
  912.     .sbsb_a {
  913.     border-radius: 2px !important;
  914.     }
  915.  
  916.     .sbsb_c {
  917.     padding-left: 10px !important;
  918.     }
  919.  
  920.     div.sbqs_c::before {
  921.     margin-right: 10px !important;
  922.     }
  923.  
  924.     ytd-searchbox[has-focus] #search-icon.ytd-searchbox {
  925.     padding-left: 10px !important;
  926.     padding-right: 10px !important;
  927.     }
  928.  
  929.     #channel-container.ytd-c4-tabbed-header-renderer {
  930.     height: 100px !important;
  931.     }
  932.     
  933.     #contentContainer.tp-yt-app-header-layout {
  934.     padding-top: 353px !important;
  935.     }
  936.     
  937.     #channel-header-container.ytd-c4-tabbed-header-renderer {
  938.     padding-top: 0 !important;
  939.     }
  940.     
  941.     ytd-c4-tabbed-header-renderer[use-modern-style] #channel-name.ytd-c4-tabbed-header-renderer {
  942.     margin-bottom: 0px !important;
  943.     }
  944.  
  945.     ytd-c4-tabbed-header-renderer[use-modern-style] #avatar-editor.ytd-c4-tabbed-header-renderer {
  946.     --ytd-channel-avatar-editor-size: 80px !important;
  947.     }
  948.     
  949.     #avatar.ytd-c4-tabbed-header-renderer {
  950.     width: 80px !important;
  951.     height: 80px !important;
  952.     margin: 0 24px 0 0 !important;
  953.     flex: none !important;
  954.     border-radius: 50% !important;
  955.     background-color: transparent !important;
  956.     overflow: hidden !important;
  957.     }
  958.     
  959.     #wrapper > .ytd-channel-tagline-renderer.style-scope,#videos-count {
  960.     display: none !important;
  961.     }
  962.  
  963.     /* Disable rounded corners on watch and other pages (including inform news) */
  964.     #cinematics.ytd-watch-flexy {
  965.     display: none !important;
  966.     }
  967.  
  968.     div#clarify-box.attached-message.style-scope.ytd-watch-flexy {
  969.     margin-top: 0px !important;
  970.     }
  971.  
  972.     ytd-clarification-renderer.style-scope.ytd-item-section-renderer {
  973.     border: 1px solid !important;
  974.     border-color: #0000001a !important;
  975.     border-radius: 0px !important;
  976.     }
  977.  
  978.     ytd-clarification-renderer.style-scope.ytd-watch-flexy {
  979.     border: 1px solid !important;
  980.     border-color: #0000001a !important;
  981.     border-radius: 0px !important;
  982.     }
  983.  
  984.     yt-formatted-string.description.style-scope.ytd-clarification-renderer {
  985.     font-size: 1.4rem !important;
  986.     }
  987.  
  988.     div.content-title.style-scope.ytd-clarification-renderer {
  989.     padding-bottom: 4px !important;
  990.     }
  991.  
  992.     ytd-rich-metadata-renderer[rounded] {
  993.     border-radius: 0px !important;
  994.     }
  995.  
  996.     ytd-live-chat-frame[rounded-container] {
  997.     border-radius: 0px !important;
  998.     }
  999.  
  1000.     ytd-live-chat-frame[rounded-container] #show-hide-button.ytd-live-chat-frame ytd-toggle-button-renderer.ytd-live-chat-frame {
  1001.     border-radius: 0px !important;
  1002.     }
  1003.  
  1004.     iframe.style-scope.ytd-live-chat-frame {
  1005.     border-radius: 0px !important;
  1006.     }
  1007.  
  1008.     ytd-playlist-panel-renderer[modern-panels]:not([within-miniplayer]) #container.ytd-playlist-panel-renderer {
  1009.     border-radius: 0px !important;
  1010.     }
  1011.  
  1012.     ytd-playlist-panel-renderer[modern-panels]:not([hide-header-text]) .title.ytd-playlist-panel-renderer {
  1013.     font-family: Roboto !important;
  1014.     font-size: 1.4rem !important;
  1015.     line-height: 2rem !important;
  1016.     font-weight: 500 !important;
  1017.     }
  1018.  
  1019.     ytd-tvfilm-offer-module-renderer[modern-panels] {
  1020.     border-radius: 0px !important;
  1021.     }
  1022.  
  1023.     ytd-tvfilm-offer-module-renderer[modern-panels] #header.ytd-tvfilm-offer-module-renderer {
  1024.     border-radius: 0px !important;
  1025.     font-family: Roboto !important;
  1026.     font-size: 1.6rem !important;
  1027.     line-height: 2.2rem !important;
  1028.     font-weight: 400 !important;
  1029.     }
  1030.  
  1031.     ytd-donation-shelf-renderer.style-scope.ytd-watch-flexy {
  1032.     border-radius: 0px !important;
  1033.     }
  1034.  
  1035.     ytd-donation-shelf-renderer[modern-panels] #header-text.ytd-donation-shelf-renderer {
  1036.     font-family: Roboto !important;
  1037.     font-size: 1.6rem !important;
  1038.     font-weight: 500 !important;
  1039.     }
  1040.  
  1041.     ytd-channel-video-player-renderer[rounded] #player.ytd-channel-video-player-renderer {
  1042.     border-radius: 0px !important;
  1043.     }
  1044.  
  1045.     ytd-universal-watch-card-renderer[rounded] #header.ytd-universal-watch-card-renderer {
  1046.     border-radius: 0px !important;
  1047.     }
  1048.  
  1049.     ytd-universal-watch-card-renderer[rounded] #hero.ytd-universal-watch-card-renderer {
  1050.     border-radius: 0px !important;
  1051.     }
  1052.  
  1053.     /* Disable rounded corners under the player */
  1054.     .ytp-ad-player-overlay-flyout-cta-rounded {
  1055.     border-radius: 2px !important;
  1056.     }
  1057.  
  1058.     .ytp-ad-overlay-container.ytp-rounded-overlay-ad .ytp-ad-overlay-image img, .ytp-ad-overlay-container.ytp-rounded-overlay-ad .ytp-ad-text-overlay, .ytp-ad-overlay-container.ytp-rounded-overlay-ad .ytp-ad-enhanced-overlay {
  1059.     border-radius: 0px !important;
  1060.     }
  1061.  
  1062.     .ytp-flyout-cta .ytp-flyout-cta-action-button.ytp-flyout-cta-action-button-rounded {
  1063.     border-radius: 2px !important;
  1064.     text-transform: uppercase !important;
  1065.     }
  1066.  
  1067.     .ytp-ad-action-interstitial-action-button.ytp-ad-action-interstitial-action-button-rounded {
  1068.     border-radius: 2px !important;
  1069.     text-transform: uppercase !important;
  1070.     }
  1071.  
  1072.     div#ytp-id-18.ytp-popup,ytp-settings-menu.ytp-rounded-menu {
  1073.     border-radius: 2px !important;
  1074.     }
  1075.  
  1076.     div.branding-context-container-inner.ytp-rounded-branding-context {
  1077.     border-radius: 2px !important;
  1078.     }
  1079.  
  1080.     div.iv-card.iv-card-video.ytp-rounded-info {
  1081.     border-radius: 0px !important;
  1082.     }
  1083.  
  1084.     div.iv-card.iv-card-playlist.ytp-rounded-info {
  1085.     border-radius: 0px !important;
  1086.     }
  1087.  
  1088.     div.iv-card.iv-card-channel.ytp-rounded-info {
  1089.     border-radius: 0px !important;
  1090.     }
  1091.  
  1092.     div.iv-card.ytp-rounded-info {
  1093.     border-radius: 0px !important;
  1094.     }
  1095.  
  1096.     .ytp-tooltip.ytp-rounded-tooltip.ytp-text-detail.ytp-preview, .ytp-tooltip.ytp-rounded-tooltip.ytp-text-detail.ytp-preview .ytp-tooltip-bg {
  1097.     border-radius: 0px !important;
  1098.     }
  1099.  
  1100.     .ytp-ce-video.ytp-ce-medium-round, .ytp-ce-playlist.ytp-ce-medium-round, .ytp-ce-medium-round .ytp-ce-expanding-overlay-background {
  1101.     border-radius: 0px !important;
  1102.     }
  1103.  
  1104.     div.ytp-autonav-endscreen-upnext-thumbnail.rounded-thumbnail {
  1105.     border-radius: 0px !important;
  1106.     }
  1107.  
  1108.     button.ytp-autonav-endscreen-upnext-button.ytp-autonav-endscreen-upnext-cancel-button.ytp-autonav-endscreen-upnext-button-rounded {
  1109.     border-radius: 2px !important;
  1110.     }
  1111.  
  1112.     a.ytp-autonav-endscreen-upnext-button.ytp-autonav-endscreen-upnext-play-button.ytp-autonav-endscreen-upnext-button-rounded {
  1113.     border-radius: 2px !important;
  1114.     }
  1115.  
  1116.     .ytp-videowall-still-image {
  1117.     border-radius: 0px !important;
  1118.     }
  1119.  
  1120.     div.ytp-sb-subscribe.ytp-sb-rounded, .ytp-sb-unsubscribe.ytp-sb-rounded {
  1121.     border-radius: 2px !important;
  1122.     }
  1123.  
  1124.     /* Subscribe button fix when you are logged in */
  1125.     #buttons.ytd-c4-tabbed-header-renderer {
  1126.     flex-direction: row-reverse !important;
  1127.     }
  1128.  
  1129.     yt-button-shape.style-scope.ytd-subscribe-button-renderer {
  1130.     display: flex !important;
  1131.     }
  1132.  
  1133.     #subscribe-button ytd-subscribe-button-renderer button {
  1134.     height: 37px !important;
  1135.     letter-spacing: 0.5px !important;
  1136.     border-radius: 2px !important;
  1137.     text-transform: uppercase !important;
  1138.     }
  1139.  
  1140.     .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled {
  1141.     color: #fff !important;
  1142.     background: #c00 !important;
  1143.     border-radius: 2px !important;
  1144.     text-transform: uppercase !important;
  1145.     letter-spacing: 0.5px !important;
  1146.     }
  1147.  
  1148.     button.yt-spec-button-shape-next.yt-spec-button-shape-next--tonal.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--size-s {
  1149.     height: 25px !important;
  1150.     letter-spacing: 0.5px !important;
  1151.     border-radius: 2px !important;
  1152.     text-transform: uppercase !important;
  1153.     }
  1154.  
  1155.     div#notification-preference-button.style-scope.ytd-subscribe-button-renderer > ytd-subscription-notification-toggle-button-renderer-next.style-scope.ytd-subscribe-button-renderer > yt-button-shape > .yt-spec-button-shape-next--size-m {
  1156.     background-color: transparent !important;
  1157.     border-radius: 16px !important;
  1158.     padding-left: 14px !important;
  1159.     padding-right: 2px !important;
  1160.     margin-left: 4px !important;
  1161.     }
  1162.  
  1163.     div#notification-preference-button.style-scope.ytd-subscribe-button-renderer > ytd-subscription-notification-toggle-button-renderer-next.style-scope.ytd-subscribe-button-renderer > yt-button-shape > .yt-spec-button-shape-next--size-m > div.cbox.yt-spec-button-shape-next--button-text-content {
  1164.     display: none !important;
  1165.     }
  1166.  
  1167.     div#notification-preference-button.style-scope.ytd-subscribe-button-renderer > ytd-subscription-notification-toggle-button-renderer-next.style-scope.ytd-subscribe-button-renderer > yt-button-shape > .yt-spec-button-shape-next--size-m > div.yt-spec-button-shape-next__secondary-icon {
  1168.     display: none !important;
  1169.     }
  1170.  
  1171.     /* General UI fixes (old theme color and remove more rounded corners) */
  1172.     ytd-masthead {
  1173.     background: var(--yt-spec-brand-background-solid) !important;
  1174.     }
  1175.     
  1176.     ytd-app {
  1177.     background: var(--yt-spec-general-background-a) !important;
  1178.     }
  1179.  
  1180.     ytd-browse[page-subtype="channels"] {
  1181.     background: var(--yt-spec-general-background-b) !important;
  1182.     }
  1183.  
  1184.     ytd-c4-tabbed-header-renderer {
  1185.     --yt-lightsource-section1-color: var(--yt-spec-general-background-a) !important;
  1186.     }
  1187.  
  1188.     #guide-content.ytd-app {
  1189.     background: var(--yt-spec-brand-background-solid) !important;
  1190.     }
  1191.  
  1192.     ytd-guide-entry-renderer[guide-refresh] {
  1193.     width: 100% !important;
  1194.     border-radius: 0px !important;
  1195.     }
  1196.  
  1197.     ytd-mini-guide-renderer {
  1198.     background-color: var(--yt-spec-brand-background-solid) !important;
  1199.     }
  1200.  
  1201.     ytd-mini-guide-entry-renderer {
  1202.     background-color: var(--yt-spec-brand-background-solid) !important;
  1203.     border-radius: 0 !important;
  1204.     }
  1205.  
  1206.     ytd-guide-section-renderer.style-scope.ytd-guide-renderer {
  1207.     padding-left: 0px !important;
  1208.     }
  1209.  
  1210.     ytd-mini-guide-renderer[guide-refresh] {
  1211.     padding: 0 !important;
  1212.     }
  1213.  
  1214.     ytd-guide-entry-renderer[active] {
  1215.     border-radius: 0px !important;
  1216.     }
  1217.  
  1218.     .style-scope.ytd-guide-entry-renderer:hover {
  1219.     border-radius: 0 !important;
  1220.     }
  1221.  
  1222.     tp-yt-paper-item.style-scope.ytd-guide-entry-renderer {
  1223.     border-radius: 0px !important;
  1224.     padding-left: 24px !important;
  1225.     }
  1226.  
  1227.     #guide-section-title.ytd-guide-section-renderer {
  1228.     color: var(--yt-spec-text-secondary) !important;
  1229.     padding: 8px 24px !important;
  1230.     font-size: var(--ytd-tab-system-font-size) !important;
  1231.     font-weight: var(--ytd-tab-system-font-weight) !important;
  1232.     letter-spacing: var(--ytd-tab-system-letter-spacing) !important;
  1233.     text-transform: var(--ytd-tab-system-text-transform) !important;
  1234.     }
  1235.  
  1236.     yt-chip-cloud-chip-renderer {
  1237.     height: 32px !important;
  1238.     border: 1px solid var(--yt-spec-10-percent-layer) !important;
  1239.     border-radius: 16px !important;
  1240.     box-sizing: border-box !important;
  1241.     }
  1242.  
  1243.     [page-subtype="home"] #chips-wrapper.ytd-feed-filter-chip-bar-renderer {
  1244.     background-color: var(--yt-spec-brand-background-primary) !important;
  1245.     border-top: 1px solid var(--yt-spec-10-percent-layer) !important;
  1246.     border-bottom: 1px solid var(--yt-spec-10-percent-layer) !important;
  1247.     }
  1248.  
  1249.     ytd-feed-filter-chip-bar-renderer[component-style=FEED_FILTER_CHIP_BAR_STYLE_TYPE_CHANNEL_PAGE_GRID] #chips-wrapper.ytd-feed-filter-chip-bar-renderer {
  1250.     background-color: transparent !important;
  1251.     }
  1252.  
  1253.     ytd-multi-page-menu-renderer {
  1254.     border-radius: 0px !important;
  1255.     border: 1px solid var(--yt-spec-10-percent-layer) !important;
  1256.     border-top: none !important;
  1257.     box-shadow: none !important;
  1258.     }
  1259.  
  1260.     ytd-menu-popup-renderer {
  1261.     border-radius: 0px !important;
  1262.     }
  1263.  
  1264.     #info.ytd-video-primary-info-renderer {
  1265.     height: 40px !important;
  1266.     }
  1267.  
  1268.     #meta #avatar { width: 48px; height: 48px; margin-right: 16px; }
  1269.     #meta #avatar img { width: 100%; }
  1270.     
  1271.     #channel-name.ytd-video-owner-renderer {
  1272.     font-size: 1.4rem !important;
  1273.     }
  1274.  
  1275.     /* Remove Shorts, Trending, Podcasts and Shopping in the guide menus */
  1276.     #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer.style-scope[title="Shorts"] {
  1277.     display: none !important;
  1278.     }
  1279.  
  1280.     #endpoint.yt-simple-endpoint.ytd-mini-guide-entry-renderer.style-scope[title="Shorts"] {
  1281.     display: none !important;
  1282.     }
  1283.  
  1284.     #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer.style-scope[title="Trending"] {
  1285.     display: none !important;
  1286.     }
  1287.  
  1288.     #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer.style-scope[title="Podcasts"] {
  1289.     display: none !important;
  1290.     }
  1291.  
  1292.     ytd-guide-entry-renderer > a[href*="/channel/UCkYQyvc_i9hXEo4xic9Hh2g"] {
  1293.     display: none !important;
  1294.     }`
  1295. document.head.appendChild(styles);
  1296. }
  1297. })();
  1298.  
  1299. Object.defineProperties(document, { 'hidden': {value: false}, 'webkitHidden': {value: false}, 'visibilityState': {value: 'visible'}, 'webkitVisibilityState': {value: 'visible'} });
  1300.  
  1301. setInterval(function(){
  1302.     document.dispatchEvent( new KeyboardEvent( 'keyup', { bubbles: true, cancelable: true, keyCode: 143, which: 143 } ) );
  1303. }, 60000);
  1304.

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址