☰

YouTube - Force rounded corners + tweaks included

This script forces the rounded version of the layout (which includes some fewer tweaks applied which also improves bugs).

  1. // ==UserScript==
  2. // @name         YouTube - Force rounded corners + tweaks included
  3. // @version      2025.02.10
  4. // @description  This script forces the rounded version of the layout (which includes some fewer tweaks applied which also improves bugs).
  5. // @author       Joey_JTS (original author: Magma_Craft)
  6. // @license MIT
  7. // @match        *://www.youtube.com/*
  8. // @namespace    https://greasyfork.org/en/users/933798
  9. // @icon         https://www.youtube.com/favicon.ico
  10. // @run-at       document-start
  11. // @grant        none
  12. // ==/UserScript==
  13.  
  14. // Attributes to remove from <html>
  15. const ATTRS = [
  16.     "darker-dark-theme",
  17.     "darker-dark-theme-deprecate"
  18. ];
  19.  
  20. // Regular config keys.
  21. const CONFIGS = {
  22.     BUTTON_REWORK: true
  23. }
  24.  
  25. // Experiment flags.
  26. const EXPFLAGS = {
  27.     /* Force rounded corners */
  28.     web_button_rework: true,
  29.     web_button_rework_with_live: true,
  30.     web_darker_dark_theme: true,
  31.     web_filled_subscribed_button: true,
  32.     web_guide_ui_refresh: true,
  33.     web_modern_ads: true,
  34.     web_modern_buttons: true,
  35.     web_modern_chips: true,
  36.     web_modern_dialogs: true,
  37.     web_modern_playlists: true,
  38.     web_modern_subscribe: true,
  39.     web_rounded_containers: true,
  40.     web_rounded_thumbnails: true,
  41.     web_searchbar_style: "rounded_corner_borders_light_btn",
  42.     web_segmented_like_dislike_button: true,
  43.     web_sheets_ui_refresh: true,
  44.     web_snackbar_ui_refresh: true,
  45.     /* Force rounded watch layout and few tweaks to be included (such as disabling the useless 'watch grid' UI */
  46.     kevlar_watch_metadata_refresh: true,
  47.     kevlar_watch_metadata_refresh_attached_subscribe: true,
  48.     kevlar_watch_metadata_refresh_clickable_description: true,
  49.     kevlar_watch_metadata_refresh_compact_view_count: true,
  50.     kevlar_watch_metadata_refresh_description_info_dedicated_line: true,
  51.     kevlar_watch_metadata_refresh_description_inline_expander: true,
  52.     kevlar_watch_metadata_refresh_description_primary_color: true,
  53.     kevlar_watch_metadata_refresh_for_live_killswitch: true,
  54.     kevlar_watch_metadata_refresh_full_width_description: true,
  55.     kevlar_watch_metadata_refresh_narrower_item_wrap: true,
  56.     kevlar_watch_metadata_refresh_relative_date: true,
  57.     kevlar_watch_metadata_refresh_top_aligned_actions: true,
  58.     kevlar_watch_modern_metapanel: true,
  59.     kevlar_watch_modern_panels: true,
  60.     kevlar_watch_panel_height_matches_player: true,
  61.     kevlar_watch_grid: false,
  62.     kevlar_watch_grid_hide_chips: false,
  63.     small_avatars_for_comments: false,
  64.     small_avatars_for_comments_ep: false,
  65.     web_watch_compact_comments: false,
  66.     web_watch_compact_comments_ep: false,
  67.     web_watch_theater_chat: false,
  68.     web_watch_theater_fixed_chat: false,
  69.     live_chat_over_engagement_panels: false,
  70.     live_chat_scaled_height: false,
  71.     live_chat_smaller_min_height: false,
  72.     wn_grid_max_item_width: 0,
  73.     wn_grid_min_item_width: 0,
  74.     kevlar_set_internal_player_size: false,
  75.     kevlar_watch_flexy_metadata_height: "136",
  76.     kevlar_watch_max_player_width: "1280",
  77.     web_watch_rounded_player_large: false,
  78.     kevlar_watch_cinematics: false,
  79.     desktop_delay_player_resizing: false,
  80.     /* Additional tweaks (which includes reverting new UI changes and disabling animations except for both web_modern_tabs and web_enable_youtab configs ) */
  81.     kevlar_refresh_on_theme_change: false,
  82.     smartimation_background: false,
  83.     web_animated_actions: false,
  84.     web_animated_like: false,
  85.     web_animated_like_lazy_load: false,
  86.     enable_channel_page_header_profile_section: false,
  87.     kevlar_modern_sd_v2: false,
  88.     web_modern_collections_v2: false,
  89.     web_modern_tabs: false,
  90.     web_modern_typography: true,
  91.     web_enable_youtab: true
  92. }
  93.  
  94. // Player flags
  95. // !!! USE STRINGS FOR VALUES !!!
  96. // For example: "true" instead of true
  97. const PLYRFLAGS = {
  98.     web_rounded_containers: "true",
  99.     web_rounded_thumbnails: "true"
  100. }
  101.  
  102. class YTP {
  103.     static observer = new MutationObserver(this.onNewScript);
  104.  
  105.     static _config = {};
  106.  
  107.     static isObject(item) {
  108.         return (item && typeof item === "object" && !Array.isArray(item));
  109.     }
  110.  
  111.     static mergeDeep(target, ...sources) {
  112.         if (!sources.length) return target;
  113.         const source = sources.shift();
  114.  
  115.         if (this.isObject(target) && this.isObject(source)) {
  116.             for (const key in source) {
  117.                 if (this.isObject(source[key])) {
  118.                     if (!target[key]) Object.assign(target, { [key]: {} });
  119.                     this.mergeDeep(target[key], source[key]);
  120.                 } else {
  121.                     Object.assign(target, { [key]: source[key] });
  122.                 }
  123.             }
  124.         }
  125.  
  126.         return this.mergeDeep(target, ...sources);
  127.     }
  128.  
  129.  
  130.     static onNewScript(mutations) {
  131.         for (var mut of mutations) {
  132.             for (var node of mut.addedNodes) {
  133.                 YTP.bruteforce();
  134.             }
  135.         }
  136.     }
  137.  
  138.     static start() {
  139.         this.observer.observe(document, {childList: true, subtree: true});
  140.     }
  141.  
  142.     static stop() {
  143.         this.observer.disconnect();
  144.     }
  145.  
  146.     static bruteforce() {
  147.         if (!window.yt) return;
  148.         if (!window.yt.config_) return;
  149.  
  150.         this.mergeDeep(window.yt.config_, this._config);
  151.     }
  152.  
  153.     static setCfg(name, value) {
  154.         this._config[name] = value;
  155.     }
  156.  
  157.     static setCfgMulti(configs) {
  158.         this.mergeDeep(this._config, configs);
  159.     }
  160.  
  161.     static setExp(name, value) {
  162.         if (!("EXPERIMENT_FLAGS" in this._config)) this._config.EXPERIMENT_FLAGS = {};
  163.  
  164.         this._config.EXPERIMENT_FLAGS[name] = value;
  165.     }
  166.  
  167.     static setExpMulti(exps) {
  168.         if (!("EXPERIMENT_FLAGS" in this._config)) this._config.EXPERIMENT_FLAGS = {};
  169.  
  170.         this.mergeDeep(this._config.EXPERIMENT_FLAGS, exps);
  171.     }
  172.  
  173.     static decodePlyrFlags(flags) {
  174.         var obj = {},
  175.             dflags = flags.split("&");
  176.  
  177.         for (var i = 0; i < dflags.length; i++) {
  178.             var dflag = dflags[i].split("=");
  179.             obj[dflag[0]] = dflag[1];
  180.         }
  181.  
  182.         return obj;
  183.     }
  184.  
  185.     static encodePlyrFlags(flags) {
  186.         var keys = Object.keys(flags),
  187.             response = "";
  188.  
  189.         for (var i = 0; i < keys.length; i++) {
  190.             if (i > 0) {
  191.                 response += "&";
  192.             }
  193.             response += keys[i] + "=" + flags[keys[i]];
  194.         }
  195.  
  196.         return response;
  197.     }
  198.  
  199.     static setPlyrFlags(flags) {
  200.         if (!window.yt) return;
  201.         if (!window.yt.config_) return;
  202.         if (!window.yt.config_.WEB_PLAYER_CONTEXT_CONFIGS) return;
  203.         var conCfgs = window.yt.config_.WEB_PLAYER_CONTEXT_CONFIGS;
  204.         if (!("WEB_PLAYER_CONTEXT_CONFIGS" in this._config)) this._config.WEB_PLAYER_CONTEXT_CONFIGS = {};
  205.  
  206.         for (var cfg in conCfgs) {
  207.             var dflags = this.decodePlyrFlags(conCfgs[cfg].serializedExperimentFlags);
  208.             this.mergeDeep(dflags, flags);
  209.             this._config.WEB_PLAYER_CONTEXT_CONFIGS[cfg] = {
  210.                 serializedExperimentFlags: this.encodePlyrFlags(dflags)
  211.             }
  212.         }
  213.     }
  214. }
  215.  
  216. window.addEventListener("yt-page-data-updated", function tmp() {
  217.     YTP.stop();
  218.     for (i = 0; i < ATTRS.length; i++) {
  219.         document.getElementsByTagName("html")[0].removeAttribute(ATTRS[i]);
  220.     }
  221.     window.removeEventListener("yt-page-date-updated", tmp);
  222. });
  223.  
  224. YTP.start();
  225.  
  226. YTP.setCfgMulti(CONFIGS);
  227. YTP.setExpMulti(EXPFLAGS);
  228. YTP.setPlyrFlags(PLYRFLAGS);
  229.  
  230. function $(q) {
  231.     return document.querySelector(q);
  232. }
  233.  
  234. (function() {
  235. let css = `
  236. /* Add rounded corners under the player */
  237. div#ytp-id-17.ytp-popup.ytp-settings-menu,
  238. div#ytp-id-18.ytp-popup.ytp-settings-menu {
  239. border-radius: 12px !important
  240. }
  241.  
  242. div.branding-context-container-inner.ytp-rounded-branding-context {
  243. border-radius: 8px !important
  244. }
  245.  
  246. .iv-card {
  247. border-radius: 8px !important
  248. }
  249.  
  250. .ytp-ad-overlay-container.ytp-overlay-ad .ytp-ad-overlay-image img, .ytp-ad-overlay-container.ytp-overlay-ad .ytp-ad-text-overlay, .ytp-ad-overlay-container.ytp-overlay-ad .ytp-ad-enhanced-overlay {
  251. border-radius: 8px !important
  252. }
  253.  
  254. .ytp-tooltip.ytp-text-detail.ytp-preview .ytp-tooltip-bg {
  255. border-top-left-radius: 12px !important;
  256. border-bottom-left-radius: 12px !important
  257. }
  258.  
  259. .ytp-tooltip.ytp-text-detail.ytp-preview {
  260. border-radius: 12px !important
  261. }
  262.  
  263. .ytp-ce-video.ytp-ce-medium, .ytp-ce-playlist.ytp-ce-medium, .ytp-ce-medium .ytp-ce-expanding-overlay-background {
  264. border-radius: 8px !important
  265. }
  266.  
  267. .ytp-autonav-endscreen-upnext-thumbnail {
  268. border-radius: 8px !important
  269. }
  270.  
  271. .ytp-autonav-endscreen-upnext-button {
  272. border-radius: 18px !important
  273. }
  274.  
  275. .ytp-videowall-still-image {
  276. border-radius: 8px !important
  277. }
  278.  
  279. .ytp-sb-subscribe, .ytp-sb-unsubscribe {
  280. border-radius: 18px !important
  281. }
  282.  
  283. /* Watch page tweaks (including the 'Revert video list' CSS) */
  284. ytd-watch-flexy[rounded-player-large]:not([fullscreen]):not([theater]) #ytd-player.ytd-watch-flexy {
  285. border-radius: 0px !important
  286. }
  287.  
  288. #actions.ytd-watch-metadata {
  289. min-width: auto !important
  290. }
  291.  
  292. ytd-watch-flexy[default-layout][reduced-top-margin] #primary.ytd-watch-flexy, ytd-watch-flexy[default-layout][reduced-top-margin] #secondary.ytd-watch-flexy {
  293. padding-top: var(--ytd-margin-6x) !important
  294. }
  295.  
  296. ytd-watch-metadata[title-headline-xs] h1.ytd-watch-metadata, ytd-watch-metadata[title-headline-m] h1.ytd-watch-metadata {
  297. font-family: "YouTube Sans","Roboto",sans-serif !important;
  298. font-weight: 600 !important;
  299. font-size: 2rem !important;
  300. line-height: 2.8rem !important
  301. }
  302.  
  303. ytd-comments-header-renderer[compact-header] #title.ytd-comments-header-renderer {
  304. margin-bottom: 24px !important
  305. }
  306.  
  307. ytd-comments-header-renderer[modern-typography][compact-header] .count-text.ytd-comments-header-renderer {
  308. font-size: 2rem !important;
  309. line-height: 2.8rem !important;
  310. font-weight: 700 !important;
  311. max-height: 2.8rem !important;
  312. display: flex !important;
  313. flex-direction: row-reverse !important
  314. }
  315.  
  316. [compact-header] .count-text.ytd-comments-header-renderer {
  317. display: flex !important;
  318. flex-direction: row-reverse !important
  319. }
  320.  
  321. [compact-header] .count-text.ytd-comments-header-renderer span {
  322. margin-right: 6px !important
  323. }
  324.  
  325. ytd-watch-flexy #comment-teaser.ytd-watch-metadata {
  326. display: none
  327. }
  328.  
  329. ytd-watch-flexy ytd-rich-item-renderer[rendered-from-rich-grid] {
  330. --ytd-rich-item-row-usable-width: 100% !important
  331. }
  332.  
  333. ytd-watch-flexy ytd-rich-item-renderer[rendered-from-rich-grid][is-in-first-column] {
  334. margin-left: 0
  335. }
  336.  
  337. ytd-watch-flexy ytd-rich-item-renderer ytd-menu-renderer .ytd-menu-renderer[style-target=button] {
  338. width: 24px !important;
  339. height: 24px !important
  340. }
  341.  
  342. ytd-watch-flexy #dismissible.ytd-rich-grid-media {
  343. flex-direction: row
  344. }
  345.  
  346. ytd-watch-flexy #attached-survey.ytd-rich-grid-media,
  347. ytd-watch-flexy #avatar-link.ytd-rich-grid-media,
  348. ytd-watch-flexy #avatar-container.ytd-rich-grid-media {
  349. display: none
  350. }
  351.  
  352. ytd-watch-flexy ytd-thumbnail.ytd-rich-grid-media,
  353. ytd-watch-flexy ytd-playlist-thumbnail.ytd-rich-grid-media {
  354. margin-right: 8px;
  355. height: 94px;
  356. width: 168px
  357. }
  358.  
  359. ytd-watch-flexy ytd-thumbnail[size=large] a.ytd-thumbnail, ytd-watch-flexy ytd-thumbnail[size=large]:before,
  360. ytd-watch-flexy ytd-thumbnail[size=large][large-margin] a.ytd-thumbnail, ytd-watch-flexy ytd-thumbnail[size=large][large-margin]:before {
  361. border-radius: 8px
  362. }
  363.  
  364. ytd-watch-flexy ytd-thumbnail[size=large][large-margin] ytd-thumbnail-overlay-time-status-renderer.ytd-thumbnail, ytd-watch-flexy ytd-thumbnail[size=large][large-margin] ytd-thumbnail-overlay-button-renderer.ytd-thumbnail, ytd-watch-flexy ytd-thumbnail[size=large][large-margin] ytd-thumbnail-overlay-toggle-button-renderer.ytd-thumbnail,
  365. ytd-watch-flexy ytd-thumbnail[size=large] ytd-thumbnail-overlay-time-status-renderer.ytd-thumbnail, ytd-watch-flexy ytd-thumbnail[size=large] ytd-thumbnail-overlay-button-renderer.ytd-thumbnail, ytd-watch-flexy ytd-thumbnail[size=large] ytd-thumbnail-overlay-toggle-button-renderer.ytd-thumbnail {
  366. margin: 4px
  367. }
  368.  
  369. ytd-watch-flexy ytd-rich-item-renderer,
  370. ytd-watch-flexy ytd-rich-grid-row #contents.ytd-rich-grid-row {
  371. margin: 0
  372. }
  373.  
  374. ytd-watch-flexy ytd-rich-item-renderer[reduced-bottom-margin] {
  375. margin-top: 8px;
  376. margin-bottom: 0
  377. }
  378.  
  379. ytd-watch-flexy ytd-rich-grid-renderer[reduced-top-margin] #contents.ytd-rich-grid-renderer {
  380. padding-top: 0px
  381. }
  382.  
  383. ytd-watch-flexy ytd-rich-grid-media {
  384. margin-bottom: 8px
  385. }
  386.  
  387. ytd-watch-flexy #details.ytd-rich-grid-media {
  388. width: 100%;
  389. min-width: 0
  390. }
  391.  
  392. ytd-watch-flexy ytd-video-meta-block[rich-meta] #metadata-line.ytd-video-meta-block,
  393. ytd-watch-flexy #channel-name.ytd-video-meta-block {
  394. font-family: "Roboto", "Arial", sans-serif;
  395. font-size: 1.2rem;
  396. line-height: 1.8rem;
  397. font-weight: 400
  398. }
  399.  
  400. ytd-watch-flexy #video-title.ytd-rich-grid-media {
  401. margin: 0 0 4px 0;
  402. display: block;
  403. font-family: "Roboto", "Arial", sans-serif;
  404. font-size: 1.4rem;
  405. line-height: 2rem;
  406. font-weight: 500;
  407. overflow: hidden;
  408. display: block;
  409. max-height: 4rem;
  410. -webkit-line-clamp: 2;
  411. display: box;
  412. display: -webkit-box;
  413. -webkit-box-orient: vertical;
  414. text-overflow: ellipsis;
  415. white-space: normal
  416. }
  417.  
  418. ytd-watch-flexy h3.ytd-rich-grid-media {
  419. margin: 0
  420. }
  421.  
  422. ytd-watch-flexy .title-badge.ytd-rich-grid-media, ytd-watch-flexy .video-badge.ytd-rich-grid-media {
  423. margin-top: 0
  424. }
  425.  
  426. ytd-watch-flexy ytd-rich-section-renderer.style-scope.ytd-rich-grid-renderer {
  427. display: none
  428. }
  429.  
  430. ytd-watch-flexy ytd-rich-grid-renderer[hide-chips-bar] ytd-feed-filter-chip-bar-renderer.ytd-rich-grid-renderer, ytd-watch-flexy ytd-rich-grid-renderer[hide-chips-bar-on-watch] ytd-feed-filter-chip-bar-renderer.ytd-rich-grid-renderer, ytd-watch-flexy ytd-rich-grid-renderer[hide-chips-bar-on-home] #header.ytd-rich-grid-renderer ytd-feed-filter-chip-bar-renderer.ytd-rich-grid-renderer {
  431. display: flex;
  432. height: 51px;
  433. margin-bottom: 8px
  434. }
  435.  
  436. ytd-watch-flexy #chips-wrapper.ytd-feed-filter-chip-bar-renderer {
  437. position: relative;
  438. top: 0
  439. }
  440.  
  441. ytd-watch-flexy ytd-feed-filter-chip-bar-renderer[fluid-width] #chips-content.ytd-feed-filter-chip-bar-renderer {
  442. padding: 0
  443. }
  444.  
  445. ytd-watch-flexy yt-chip-cloud-chip-renderer.ytd-feed-filter-chip-bar-renderer, ytd-watch-flexy yt-chip-cloud-chip-renderer.ytd-feed-filter-chip-bar-renderer:first-of-type {
  446. margin: 8px;
  447. margin-left: 0
  448. }
  449.  
  450. ytd-watch-flexy ytd-button-renderer.ytd-feed-filter-chip-bar-renderer {
  451. margin: 0;
  452. padding: 0 8px
  453. }
  454.  
  455. /* More tweaks to be applied */
  456. #buttons.ytd-c4-tabbed-header-renderer {
  457. flex-direction: row-reverse !important
  458. }
  459.  
  460. ytd-channel-tagline-renderer {
  461. display: block !important;
  462. padding: 0 !important
  463. }
  464.  
  465. #content.ytd-channel-tagline-renderer::before {
  466. content: "More about this channel";
  467. font-weight: 500 !important
  468. }
  469.  
  470. #content.ytd-channel-tagline-renderer {
  471. max-width: 162px !important
  472. }
  473.  
  474. ytd-browse[page-subtype="channels"] .page-header-view-model-wiz__page-header-description {
  475. margin-top: 0px !important;
  476. max-width: 236px !important
  477. }
  478.  
  479. ytd-browse[page-subtype="channels"] yt-description-preview-view-model .truncated-text-wiz__truncated-text-content:before {
  480. content: "More about this channel >   ";
  481. font-weight: 500 !important
  482. }
  483.  
  484. ytd-browse[page-subtype="channels"] button.truncated-text-wiz__absolute-button {
  485. display: none !important
  486. }
  487.  
  488. #avatar.ytd-c4-tabbed-header-renderer, .yt-spec-avatar-shape__button--button-giant {
  489. width: 80px !important;
  490. height: 80px !important;
  491. margin: 0 24px 0 0 !important;
  492. flex: none !important;
  493. overflow: hidden !important
  494. }
  495.  
  496. .yt-spec-avatar-shape__button--button-giant, .yt-spec-avatar-shape--avatar-size-giant, .yt-spec-avatar-shape__button--button-extra-extra-large, .yt-spec-avatar-shape--avatar-size-extra-extra-large {
  497. width: 80px !important;
  498. height: 80px !important;
  499. margin-right: 0px !important;
  500. }
  501.  
  502. #avatar-editor.ytd-c4-tabbed-header-renderer {
  503. --ytd-channel-avatar-editor-size: 80px !important
  504. }
  505.  
  506. #channel-name.ytd-c4-tabbed-header-renderer {
  507. margin-bottom: 0 !important
  508. }
  509.  
  510. #channel-header-container.ytd-c4-tabbed-header-renderer {
  511. padding-top: 0 !important;
  512. align-items: center !important
  513. }
  514.  
  515. #inner-header-container.ytd-c4-tabbed-header-renderer {
  516. margin-top: 0 !important;
  517. align-items: center !important
  518. }
  519.  
  520. .yt-content-metadata-view-model-wiz--inline .yt-content-metadata-view-model-wiz__metadata-row {
  521. margin-top: 0 !important
  522. }
  523.  
  524. yt-formatted-string#channel-pronouns.style-scope.ytd-c4-tabbed-header-renderer, #videos-count {
  525. display: none !important
  526. }
  527.  
  528. .meta-item.ytd-c4-tabbed-header-renderer {
  529. display: block !important
  530. }
  531.  
  532. div#channel-header-links.style-scope.ytd-c4-tabbed-header-renderer,
  533. .page-header-view-model-wiz__page-header-attribution {
  534. display: none !important
  535. }
  536.  
  537. ytd-c4-tabbed-header-renderer[use-page-header-style] #channel-name.ytd-c4-tabbed-header-renderer,
  538. [page-subtype="channels"] .page-header-view-model-wiz__page-header-title--page-header-title-large {
  539. font-size: 2.4em !important;
  540. font-weight: 400 !important;
  541. line-height: var(--yt-channel-title-line-height, 3rem) !important;
  542. margin: 0 !important
  543. }
  544.  
  545. span.delimiter.style-scope.ytd-c4-tabbed-header-renderer, .yt-content-metadata-view-model-wiz__delimiter {
  546. display: none !important
  547. }
  548.  
  549. div#meta.style-scope.ytd-c4-tabbed-header-renderer {
  550. width: auto !important
  551. }
  552.  
  553. ytd-c4-tabbed-header-renderer[use-page-header-style] #inner-header-container.ytd-c4-tabbed-header-renderer {
  554. flex-direction: row !important
  555. }
  556.  
  557. div.page-header-banner.style-scope.ytd-c4-tabbed-header-renderer {
  558. margin-left: 0px !important;
  559. margin-right: 8px !important;
  560. border-radius: 0px !important
  561. }
  562.  
  563. [has-inset-banner] #page-header-banner.ytd-tabbed-page-header {
  564. padding-left: 0 !important;
  565. padding-right: 0 !important
  566. }
  567.  
  568. ytd-c4-tabbed-header-renderer[use-page-header-style] .page-header-banner.ytd-c4-tabbed-header-renderer,
  569. .yt-image-banner-view-model-wiz--inset {
  570. border-radius: 0px !important
  571. }
  572.  
  573. .yt-content-metadata-view-model-wiz__metadata-text {
  574. margin-right: 8px !important
  575. }
  576.  
  577. .yt-content-metadata-view-model-wiz__metadata-text, .truncated-text-wiz, .truncated-text-wiz__absolute-button {
  578. font-size: 1.4rem !important
  579. }
  580.  
  581. .yt-tab-shape-wiz {
  582. padding: 0 32px !important;
  583. margin-right: 0 !important
  584. }
  585.  
  586. .yt-tab-shape-wiz__tab {
  587. font-size: 14px !important;
  588. font-weight: 500 !important;
  589. letter-spacing: var(--ytd-tab-system-letter-spacing) !important;
  590. text-transform: uppercase !important
  591. }
  592.  
  593. .yt-tab-group-shape-wiz__slider {
  594. display: none !important
  595. }
  596.  
  597. ytd-browse[page-subtype="channels"] ytd-tabbed-page-header .yt-content-metadata-view-model-wiz__metadata-row--metadata-row-inline {
  598. display: flex
  599. }
  600.  
  601. ytd-browse[page-subtype="channels"] ytd-tabbed-page-header .yt-content-metadata-view-model-wiz__metadata-text:last-of-type {
  602. display: none
  603. }
  604.  
  605. ytd-browse[page-subtype="channels"] ytd-tabbed-page-header .yt-content-metadata-view-model-wiz__metadata-text:first-of-type {
  606. display: flex
  607. }
  608.  
  609. ytd-browse[page-subtype="channels"] .yt-flexible-actions-view-model-wiz--inline {
  610. flex-direction: row-reverse
  611. }
  612.  
  613. ytd-browse[page-subtype="channels"] .page-header-view-model-wiz__page-header-flexible-actions {
  614. margin-top: -56px
  615. }
  616.  
  617. ytd-browse[page-subtype="channels"] .yt-flexible-actions-view-model-wiz__action-row {
  618. margin-top: 60px
  619. }
  620.  
  621. ytd-browse[page-subtype="channels"] .yt-flexible-actions-view-model-wiz__action {
  622. padding-right: 8px
  623. }
  624.  
  625. ytd-browse[page-subtype="channels"] span.yt-core-attributed-string--link-inherit-color {
  626. font-weight: 400 !important
  627. }
  628.  
  629. ytd-browse[page-subtype="channels"] .page-header-view-model-wiz__page-header-headline-info {
  630. margin-bottom: 8px
  631. }
  632.  
  633. #title.ytd-playlist-sidebar-primary-info-renderer,
  634. ytd-inline-form-renderer[component-style=INLINE_FORM_STYLE_TITLE] #text-displayed.ytd-inline-form-renderer {
  635. font-family: YouTube Sans !important;
  636. font-weight: 700 !important
  637. }
  638.  
  639. ytd-comments-header-renderer[use-space-between] #title.ytd-comments-header-renderer {
  640. justify-content: start !important
  641. }
  642.  
  643. #panel-button.ytd-comments-header-renderer {
  644. margin-left: 32px;
  645. margin-right: 8px
  646. }
  647.  
  648. #panel-button .yt-spec-button-shape-next__icon {
  649. margin-right: 0
  650. }
  651.  
  652. #panel-button .yt-spec-button-shape-next--size-m {
  653. padding-left: 12px;
  654. padding-right: 6px
  655. }
  656.  
  657. #panel-button .yt-spec-button-shape-next__button-text-content {
  658. display: none !important
  659. }
  660.  
  661. #panel-button .yt-spec-button-shape-next__icon path {
  662. d: path("M10 3H17V7H10V3ZM20 0H0V14H20V0ZM1 1H19V13H1V1Z");
  663. transform: scale(1.20)
  664. }
  665.  
  666. div#end.style-scope.ytd-masthead .yt-spec-button-shape-next--size-m[aria-label="Create"] {
  667. height: 40px !important;
  668. border-radius: 50px !important;
  669. color: var(--yt-spec-icon-active-other) !important;
  670. background-color: transparent !important
  671. }
  672.  
  673. div#end.style-scope.ytd-masthead .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading[aria-label="Create"] .yt-spec-button-shape-next__button-text-content {
  674. display: none !important
  675. }
  676.  
  677. div#end.style-scope.ytd-masthead .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading[aria-label="Create"] .yt-spec-button-shape-next__icon {
  678. margin-left: -8px !important;
  679. margin-right: -8px !important
  680. }
  681.  
  682. div#end.style-scope.ytd-masthead .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading[aria-label="Create"] path {
  683. d: path("M14 13h-3v3H9v-3H6v-2h3V8h2v3h3v2zm3-7H3v12h14v-6.39l4 1.83V8.56l-4 1.83V6m1-1v3.83L22 7v8l-4-1.83V19H2V5h16z")
  684. }
  685.  
  686. div#end.style-scope.ytd-masthead .yt-spec-icon-badge-shape--style-overlay.yt-spec-icon-badge-shape--type-cart-refresh .yt-spec-icon-badge-shape__badge {
  687. color: #fff !important
  688. }
  689.  
  690. ytd-feed-filter-chip-bar-renderer[frosted-glass] ytd-button-renderer.ytd-feed-filter-chip-bar-renderer {
  691. background-color: transparent !important
  692. }
  693.  
  694. ytd-feed-filter-chip-bar-renderer[frosted-glass] #left-arrow-button.ytd-feed-filter-chip-bar-renderer,
  695. ytd-feed-filter-chip-bar-renderer[frosted-glass] #right-arrow-button.ytd-feed-filter-chip-bar-renderer {
  696. background-color: var(--yt-spec-base-background) !important
  697. }
  698.  
  699. ytd-feed-filter-chip-bar-renderer[frosted-glass] #left-arrow.ytd-feed-filter-chip-bar-renderer:after {
  700. background: linear-gradient(to right, var(--yt-spec-base-background) 20%, rgba(255, 255, 255, 0) 80%) !important
  701. }
  702.  
  703. ytd-feed-filter-chip-bar-renderer[frosted-glass] #right-arrow.ytd-feed-filter-chip-bar-renderer:before {
  704. background: linear-gradient(to left, var(--yt-spec-base-background) 20%, rgba(255, 255, 255, 0) 80%) !important
  705. }
  706.  
  707. ytd-masthead[frosted-glass=with-chipbar] #background.ytd-masthead,
  708. ytd-masthead[frosted-glass=without-chipbar] #background.ytd-masthead,
  709. ytd-app[frosted-glass-mode=with-chipbar] #frosted-glass.ytd-app,
  710. ytd-app[frosted-glass-mode=without-chipbar] #frosted-glass.ytd-app {
  711. background: var(--yt-spec-base-background) !important;
  712. backdrop-filter: none !important
  713. }
  714.  
  715. .ytp-cairo-refresh-signature-moments .ytp-play-progress, ytd-thumbnail-overlay-resume-playback-renderer[enable-refresh-signature-moments-web] #progress.ytd-thumbnail-overlay-resume-playback-renderer, .YtThumbnailOverlayProgressBarHostWatchedProgressBarSegmentModern, .YtChapteredProgressBarChapteredPlayerBarChapterRefresh, .YtChapteredProgressBarChapteredPlayerBarFillRefresh, .YtProgressBarLineProgressBarPlayedRefresh, yt-page-navigation-progress[enable-refresh-signature-moments-web] #progress.yt-page-navigation-progress, ytd-progress-bar-line[enable-refresh-signature-moments-web] .progress-bar-played.ytd-progress-bar-line, #logo-icon > .yt-spec-icon-shape.yt-icon.style-scope.yt-icon-shape > div > svg > g:first-of-type > path:first-of-type {
  716. background: #ff0000 !important
  717. }
  718.  
  719. [d*="M18 4v15.06l-5.42-3.87-.58-.42-.58.42L6 19.06V4h12m1-1H5v18l7-5 7 5V3z"] {
  720. d: path("M22 13h-4v4h-2v-4h-4v-2h4V7h2v4h4v2zm-8-6H2v1h12V7zM2 12h8v-1H2v1zm0 4h8v-1H2v1z")
  721. }`;
  722. if (typeof GM_addStyle !== "undefined") {
  723.   GM_addStyle(css);
  724. } else {
  725.   let styleNode = document.createElement("style");
  726.   styleNode.appendChild(document.createTextNode(css));
  727.   (document.querySelector("head") || document.documentElement).appendChild(styleNode);
  728. }
  729. })();
  730.  
  731. // Integrate 'YouTube Video Resize Fix' script (special thanks to CY Fung)
  732. /* jshint esversion:8 */
  733.  
  734. ((__CONTEXT01__) => {
  735.   'use strict';
  736.  
  737.  
  738.   const win = this instanceof Window ? this : window;
  739.  
  740.   // Create a unique key for the script and check if it is already running
  741.   const hkey_script = 'ahceihvpbosz';
  742.   if (win[hkey_script]) throw new Error('Duplicated Userscript Calling'); // avoid duplicated scripting
  743.   win[hkey_script] = true;
  744.  
  745.   const insp = o => o ? (o.polymerController || o.inst || o || 0) : (o || 0);
  746.   const indr = o => insp(o).$ || o.$ || 0;
  747.  
  748.   /** @type {globalThis.PromiseConstructor} */
  749.   const Promise = (async () => { })().constructor; // YouTube hacks Promise in WaterFox Classic and "Promise.resolve(0)" nevers resolve.
  750.   const cleanContext = async (win) => {
  751.     const waitFn = requestAnimationFrame; // shall have been binded to window
  752.     try {
  753.       let mx = 16; // MAX TRIAL
  754.       const frameId = 'vanillajs-iframe-v1'
  755.       let frame = document.getElementById(frameId);
  756.       let removeIframeFn = null;
  757.       if (!frame) {
  758.         frame = document.createElement('iframe');
  759.         frame.id = frameId;
  760.         const blobURL = typeof webkitCancelAnimationFrame === 'function' && typeof kagi === 'undefined' ? (frame.src = URL.createObjectURL(new Blob([], { type: 'text/html' }))) : null; // avoid Brave Crash
  761.         frame.sandbox = 'allow-same-origin'; // script cannot be run inside iframe but API can be obtained from iframe
  762.         let n = document.createElement('noscript'); // wrap into NOSCRPIT to avoid reflow (layouting)
  763.         n.appendChild(frame);
  764.         while (!document.documentElement && mx-- > 0) await new Promise(waitFn); // requestAnimationFrame here could get modified by YouTube engine
  765.         const root = document.documentElement;
  766.         root.appendChild(n); // throw error if root is null due to exceeding MAX TRIAL
  767.         if (blobURL) Promise.resolve().then(() => URL.revokeObjectURL(blobURL));
  768.  
  769.         removeIframeFn = (setTimeout) => {
  770.           const removeIframeOnDocumentReady = (e) => {
  771.             e && win.removeEventListener("DOMContentLoaded", removeIframeOnDocumentReady, false);
  772.             e = n;
  773.             n = win = removeIframeFn = 0;
  774.             setTimeout ? setTimeout(() => e.remove(), 200) : e.remove();
  775.           }
  776.           if (!setTimeout || document.readyState !== 'loading') {
  777.             removeIframeOnDocumentReady();
  778.           } else {
  779.             win.addEventListener("DOMContentLoaded", removeIframeOnDocumentReady, false);
  780.           }
  781.         }
  782.       }
  783.       while (!frame.contentWindow && mx-- > 0) await new Promise(waitFn);
  784.       const fc = frame.contentWindow;
  785.       if (!fc) throw "window is not found."; // throw error if root is null due to exceeding MAX TRIAL
  786.       try {
  787.         const { requestAnimationFrame, setTimeout, clearTimeout } = fc;
  788.         const res = { requestAnimationFrame, setTimeout, clearTimeout };
  789.         for (let k in res) res[k] = res[k].bind(win); // necessary
  790.         if (removeIframeFn) Promise.resolve(res.setTimeout).then(removeIframeFn);
  791.         return res;
  792.       } catch (e) {
  793.         if (removeIframeFn) removeIframeFn();
  794.         return null;
  795.       }
  796.     } catch (e) {
  797.       console.warn(e);
  798.       return null;
  799.     }
  800.   };
  801.  
  802.   const isWatchPageURL = (url) => {
  803.     url = url || location;
  804.     return location.pathname === '/watch' || location.pathname.startsWith('/live/')
  805.   };
  806.  
  807.   cleanContext(win).then(__CONTEXT02__ => {
  808.     if (!__CONTEXT02__) return null;
  809.  
  810.     const { ResizeObserver } = __CONTEXT01__;
  811.     const { requestAnimationFrame, setTimeout, clearTimeout } = __CONTEXT02__;
  812.     const elements = {};
  813.     let rid1 = 0;
  814.     let rid2 = 0;
  815.     /** @type {MutationObserver | null} */
  816.     let attrObserver = null;
  817.     /** @type {ResizeObserver | null} */
  818.     let resizeObserver = null;
  819.     let isHTMLAttrApplied = false;
  820.     const core = {
  821.       begin() {
  822.         document.addEventListener('yt-player-updated', core.hanlder, true);
  823.         document.addEventListener('ytd-navigate-finish', core.hanlder, true);
  824.       },
  825.       hanlder: () => {
  826.         rid1++;
  827.         if (rid1 > 1e9) rid1 = 9;
  828.         const tid = rid1;
  829.         requestAnimationFrame(() => {
  830.           if (tid !== rid1) return;
  831.           core.runner();
  832.         })
  833.       },
  834.       async runner() {
  835.         if (!location.href.startsWith('https://www.youtube.com/')) return;
  836.         if (!isWatchPageURL()) return;
  837.  
  838.         elements.ytdFlexy = document.querySelector('ytd-watch-flexy');
  839.         elements.video = document.querySelector('ytd-watch-flexy #movie_player video, ytd-watch-flexy #movie_player audio.video-stream.html5-main-video');
  840.         if (elements.ytdFlexy && elements.video) { } else return;
  841.         elements.moviePlayer = elements.video.closest('#movie_player');
  842.         if (!elements.moviePlayer) return;
  843.  
  844.         // resize Video
  845.         let { ytdFlexy } = elements;
  846.         if (!ytdFlexy.ElYTL) {
  847.           ytdFlexy.ElYTL = 1;
  848.           const ytdFlexyCnt = insp(ytdFlexy);
  849.           if (typeof ytdFlexyCnt.calculateNormalPlayerSize_ === 'function') {
  850.             ytdFlexyCnt.calculateNormalPlayerSize_ = core.resizeFunc(ytdFlexyCnt.calculateNormalPlayerSize_, 1);
  851.           } else {
  852.             console.warn('ytdFlexyCnt.calculateNormalPlayerSize_ is not a function.')
  853.           }
  854.           if (typeof ytdFlexyCnt.calculateCurrentPlayerSize_ === 'function') {
  855.             ytdFlexyCnt.calculateCurrentPlayerSize_ = core.resizeFunc(ytdFlexyCnt.calculateCurrentPlayerSize_, 0);
  856.           } else {
  857.             console.warn('ytdFlexyCnt.calculateCurrentPlayerSize_ is not a function.')
  858.           }
  859.         }
  860.         ytdFlexy = null;
  861.  
  862.         // when video is fetched
  863.         elements.video.removeEventListener('canplay', core.triggerResizeDelayed, false);
  864.         elements.video.addEventListener('canplay', core.triggerResizeDelayed, false);
  865.  
  866.         // when video is resized
  867.         if (resizeObserver) {
  868.           resizeObserver.disconnect();
  869.           resizeObserver = null;
  870.         }
  871.         if (typeof ResizeObserver === 'function') {
  872.           resizeObserver = new ResizeObserver(core.triggerResizeDelayed);
  873.           resizeObserver.observe(elements.moviePlayer);
  874.         }
  875.  
  876.         // MutationObserver:[collapsed] @ ytd-live-chat-frame#chat
  877.         if (attrObserver) {
  878.           attrObserver.takeRecords();
  879.           attrObserver.disconnect();
  880.           attrObserver = null;
  881.         }
  882.         let chat = document.querySelector('ytd-watch-flexy ytd-live-chat-frame#chat');
  883.         if (chat) {
  884.           // resize due to DOM update
  885.           attrObserver = new MutationObserver(core.triggerResizeDelayed);
  886.           attrObserver.observe(chat, { attributes: true, attributeFilter: ["collapsed"] });
  887.           chat = null;
  888.         }
  889.  
  890.         // resize on idle
  891.         Promise.resolve().then(core.triggerResizeDelayed);
  892.       },
  893.       resizeFunc(originalFunc, kb) {
  894.         return function () {
  895.           rid2++;
  896.           if (!isHTMLAttrApplied) {
  897.             isHTMLAttrApplied = true;
  898.             Promise.resolve(0).then(() => {
  899.               document.documentElement.classList.add('youtube-video-resize-fix');
  900.             }).catch(console.warn);
  901.           }
  902.           if (document.fullscreenElement === null) {
  903.  
  904.             // calculateCurrentPlayerSize_ shall be always return NaN to make correct positioning of toolbars
  905.             if (!kb) return { width: NaN, height: NaN };
  906.  
  907.             let ret = core.calculateSize();
  908.             if (ret.height > 0 && ret.width > 0) {
  909.               return ret;
  910.             }
  911.           }
  912.           return originalFunc.apply(this, arguments);
  913.         }
  914.       },
  915.       calculateSize_() {
  916.         const { moviePlayer, video } = elements;
  917.         const rect1 = { width: video.videoWidth, height: video.videoHeight }; // native values independent of css rules
  918.         if (rect1.width > 0 && rect1.height > 0) {
  919.           const rect2 = moviePlayer.getBoundingClientRect();
  920.           const aspectRatio = rect1.width / rect1.height;
  921.           let h2 = rect2.width / aspectRatio;
  922.           let w2 = rect2.height * aspectRatio;
  923.           return { rect2, h2, w2 };
  924.         }
  925.         return null;
  926.       },
  927.       calculateSize() {
  928.         let rs = core.calculateSize_();
  929.         if (!rs) return { width: NaN, height: NaN };
  930.         const { rect2, h2, w2 } = rs;
  931.         if (h2 > rect2.height) {
  932.           return { width: w2, height: rect2.height };
  933.         } else {
  934.           return { width: rect2.width, height: h2 };
  935.         }
  936.       },
  937.       triggerResizeDelayed: () => {
  938.         rid2++;
  939.         if (rid2 > 1e9) rid2 = 9;
  940.         const tid = rid2;
  941.         requestAnimationFrame(() => {
  942.           if (tid !== rid2) return;
  943.           const { ytdFlexy } = elements;
  944.           let r = false;
  945.           const ytdFlexyCnt = insp(ytdFlexy);
  946.           const windowSize_ = ytdFlexyCnt.windowSize_;
  947.           if (windowSize_ && typeof ytdFlexyCnt.onWindowResized_ === 'function') {
  948.             try {
  949.               ytdFlexyCnt.onWindowResized_(windowSize_);
  950.               r = true;
  951.             } catch (e) { }
  952.           }
  953.           if (!r) window.dispatchEvent(new Event('resize'));
  954.         })
  955.       }
  956.     };
  957.     core.begin();
  958.  
  959.  
  960.  
  961.  
  962.  
  963.  
  964.  
  965.     // YouTube Watch Page Reflect (WPR)
  966.  
  967.  
  968.  
  969.     // This script enhances the functionality of YouTube pages by reflecting changes in the page state.
  970.  
  971.     (async function youTubeWPR() {
  972.  
  973.       let checkPageVisibilityChanged = false;
  974.  
  975.       // A WeakSet to keep track of elements being monitored for mutations.
  976.       const monitorWeakSet = new WeakSet();
  977.  
  978.       /** @type {globalThis.PromiseConstructor} */
  979.       const Promise = (async () => { })().constructor;
  980.  
  981.       // Function to reflect the current state of the YouTube page.
  982.       async function _reflect() {
  983.         await Promise.resolve();
  984.  
  985.         const youtubeWpr = document.documentElement.getAttribute("youtube-wpr");
  986.         let s = '';
  987.  
  988.         // Check if the current page is the video watch page.
  989.         if (isWatchPageURL()) {
  990.           let watch = document.querySelector("ytd-watch-flexy");
  991.           let chat = document.querySelector("ytd-live-chat-frame#chat");
  992.  
  993.           if (watch) {
  994.             // Determine the state of the chat and video player on the watch page and generate a state string.
  995.             s += !chat ? 'h0' : (chat.hasAttribute('collapsed') || !document.querySelector('iframe#chatframe')) ? 'h1' : 'h2';
  996.             s += watch.hasAttribute('is-two-columns_') ? 's' : 'S';
  997.             s += watch.hasAttribute('fullscreen') ? 'F' : 'f';
  998.             s += watch.hasAttribute('theater') ? 'T' : 't';
  999.           }
  1000.         }
  1001.  
  1002.         // Update the reflected state if it has changed.
  1003.         if (s !== youtubeWpr) {
  1004.           document.documentElement.setAttribute("youtube-wpr", s);
  1005.         }
  1006.  
  1007.       }
  1008.  
  1009.       // Function to reflect changes in specific attributes of monitored elements.
  1010.       async function reflect(nodeName, attrNames, forced) {
  1011.         await Promise.resolve();
  1012.  
  1013.         if (!forced) {
  1014.           let skip = true;
  1015.           for (const attrName of attrNames) {
  1016.             if (nodeName === 'ytd-live-chat-frame') {
  1017.               if (attrName === 'collapsed') skip = false;
  1018.             } else if (nodeName === 'ytd-watch-flexy') {
  1019.               if (attrName === 'is-two-columns_') skip = false;
  1020.               else if (attrName === 'fullscreen') skip = false;
  1021.               else if (attrName === 'theater') skip = false;
  1022.             }
  1023.           }
  1024.           if (skip) return;
  1025.         }
  1026.  
  1027.         // Log the mutated element and its attributes.
  1028.         // console.log(nodeName, attrNames);
  1029.  
  1030.         // Call _reflect() to update the reflected state.
  1031.         _reflect();
  1032.       }
  1033.  
  1034.       // Callback function for the MutationObserver that tracks mutations in monitored elements.
  1035.       function callback(mutationsList) {
  1036.         const attrNames = new Set();
  1037.         let nodeName = null;
  1038.         for (const mutation of mutationsList) {
  1039.           if (nodeName === null && mutation.target) nodeName = mutation.target.nodeName.toLowerCase();
  1040.           attrNames.add(mutation.attributeName);
  1041.         }
  1042.         reflect(nodeName, attrNames, false);
  1043.       }
  1044.  
  1045.       function getParent(element) {
  1046.         return element.__shady_native_parentNode || element.__shady_parentNode || element.parentNode;
  1047.       }
  1048.  
  1049.       let lastPageTypeChanged = 0;
  1050.       function chatContainerMutationHandler() {
  1051.         if (Date.now() - lastPageTypeChanged < 800) _reflect();
  1052.       }
  1053.  
  1054.       // Function to start monitoring an element for mutations.
  1055.       function monitor(element) {
  1056.         if (!element) return;
  1057.         if (monitorWeakSet.has(element)) {
  1058.           return;
  1059.         }
  1060.  
  1061.         monitorWeakSet.add(element);
  1062.  
  1063.         const observer = new MutationObserver(callback);
  1064.         observer.observe(element, { attributes: true });
  1065.  
  1066.         if (element.id === 'chat') {
  1067.           const parentNode = getParent(element);
  1068.           if (parentNode instanceof Element && parentNode.id === 'chat-container' && !monitorWeakSet.has(parentNode)) {
  1069.             monitorWeakSet.add(parentNode);
  1070.             const observer = new MutationObserver(chatContainerMutationHandler);
  1071.             observer.observe(parentNode, { childList: true, subtree: false });
  1072.           }
  1073.         }
  1074.  
  1075.         return 1;
  1076.       }
  1077.  
  1078.       let timeout = 0;
  1079.  
  1080.       // Function to monitor relevant elements and update the reflected state.
  1081.       let g = async (forced) => {
  1082.         await Promise.resolve();
  1083.         let b = 0;
  1084.         b = b | monitor(document.querySelector("ytd-watch-flexy"));
  1085.         b = b | monitor(document.querySelector("ytd-live-chat-frame#chat"));
  1086.         if (b || forced) {
  1087.           _reflect();
  1088.         }
  1089.       }
  1090.       // let renderId = 0;
  1091.       // Event handler function that triggers when the page finishes navigation or page data updates.
  1092.       let eventHandlerFunc = async (evt) => {
  1093.         checkPageVisibilityChanged = true;
  1094.         timeout = Date.now() + 800;
  1095.         g(1);
  1096.         if (evt.type === 'yt-navigate-finish') {
  1097.           // delay required when page type is changed for #chat (home -> watch).
  1098.           setTimeout(() => {
  1099.             g(1);
  1100.           }, 80);
  1101.         } else if (evt.type === 'yt-page-type-changed') {
  1102.           lastPageTypeChanged = Date.now();
  1103.           // setTimeout(() => {
  1104.           //   if (renderId > 1e9) renderId = 9;
  1105.           //   const t = ++renderId;
  1106.           //   requestAnimationFrame(() => {
  1107.           //     if (t !== renderId) return;
  1108.           //     g(1);
  1109.           //   });
  1110.           // }, 180);
  1111.           if (typeof requestIdleCallback === 'function') {
  1112.             requestIdleCallback(() => {
  1113.               g(1);
  1114.             });
  1115.           }
  1116.         }
  1117.       }
  1118.  
  1119.       let loadState = 0;
  1120.  
  1121.       // Function to initialize the script and start monitoring the page.
  1122.       async function actor() {
  1123.         if (loadState === 0) {
  1124.           if (!document.documentElement.hasAttribute("youtube-wpr")) {
  1125.             loadState = 1;
  1126.             document.documentElement.setAttribute("youtube-wpr", "");
  1127.             document.addEventListener("yt-navigate-finish", eventHandlerFunc, false);
  1128.             document.addEventListener("yt-page-data-updated", eventHandlerFunc, false);
  1129.             document.addEventListener("yt-page-type-changed", eventHandlerFunc, false);
  1130.           } else {
  1131.             loadState = -1;
  1132.             document.removeEventListener("yt-page-data-fetched", actor, false);
  1133.             return;
  1134.           }
  1135.         }
  1136.         if (loadState === 1) {
  1137.           timeout = Date.now() + 800;
  1138.           // Function to continuously monitor elements and update the reflected state.
  1139.           let pf = () => {
  1140.             g(0);
  1141.             if (Date.now() < timeout) requestAnimationFrame(pf);
  1142.           };
  1143.           pf();
  1144.         }
  1145.       }
  1146.  
  1147.       // Event listener that triggers when page data is fetched.
  1148.       document.addEventListener("yt-page-data-fetched", actor, false);
  1149.  
  1150.       // Update after visibility changed (looks like there are bugs due to inactive tab)
  1151.       document.addEventListener('visibilitychange', () => {
  1152.         if (document.visibilityState !== 'visible') return;
  1153.         if (checkPageVisibilityChanged) {
  1154.           checkPageVisibilityChanged = false;
  1155.           setTimeout(() => {
  1156.             g(1);
  1157.           }, 100);
  1158.           requestAnimationFrame(() => {
  1159.             g(1);
  1160.           });
  1161.         }
  1162.       }, false);
  1163.  
  1164.  
  1165.     })();
  1166.  
  1167.   });
  1168.  
  1169. })({ ResizeObserver });