☰

YT July 2018 - November 2020 script

use: https://userstyles.world/style/6311/youtube-late-2019-mid-2020-polymer-layout and https://userstyles.world/style/6312/youtube-late-2017-mid-2019-polymer-colors.

  1. // ==UserScript==
  2. // @name         YT July 2018 - November 2020 script
  3. // @version      1.5.1
  4. // @description  use: https://userstyles.world/style/6311/youtube-late-2019-mid-2020-polymer-layout and https://userstyles.world/style/6312/youtube-late-2017-mid-2019-polymer-colors.
  5. // @author       Manchuliit
  6. // @license      none
  7. // @match        *://*.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.     "system-icons",
  17.     "typography",
  18.     "typography-spacing"
  19. ];
  20.  
  21. // Regular config keys.
  22. const CONFIGS = {
  23.     BUTTON_REWORK: false
  24. }
  25.  
  26. // Experiment flags.
  27. const EXPFLAGS = {
  28.     kevlar_updated_logo_icons: false,
  29.     kevlar_updated_icons: false,
  30.     kevlar_system_icons: false,
  31.     kevlar_watch_color_update: false,
  32.     desktop_mic_background: false,
  33.     kevlar_refresh_on_theme_change: false, //disable reload when changing theme
  34.     kevlar_unavailable_video_error_ui_client: false, //old video unavailable ui
  35.     kevlar_watch_metadata_refresh: false,
  36.     kevlar_watch_modern_metapanel: false,
  37.     kevlar_watch_modern_panels: false,
  38.     web_rounded_containers: false,
  39.     web_rounded_thumbnails: false,
  40.     web_modern_dialogs: false,
  41.     web_modern_chips: false,
  42.     web_modern_subscribe: false,
  43.     web_modern_buttons: false,
  44.     web_modern_playlists: false,
  45.     enable_programmed_playlist_redesign: false,
  46.     web_amsterdam_playlists: false,
  47.     web_searchbar_style: "default",
  48.     web_button_rework: false,
  49.     web_darker_dark_theme: false,
  50.     web_guide_ui_refresh: false,
  51.     web_sheets_ui_refresh: false,
  52.     web_snackbar_ui_refresh: false,
  53.     web_segmented_like_dislike_button: false,
  54.     web_animated_like: false,
  55.     web_animated_like_lazy_load: false,
  56.     kevlar_use_ytd_player: false
  57. }
  58.  
  59. // Player flags
  60. // !!! USE STRINGS FOR VALUES !!!
  61. // For example: "true" instead of true
  62. const PLYRFLAGS = {
  63.     web_player_move_autonav_toggle: "false"
  64. }
  65.  
  66. class YTP {
  67.     static observer = new MutationObserver(this.onNewScript);
  68.  
  69.     static _config = {};
  70.  
  71.     static isObject(item) {
  72.         return (item && typeof item === "object" && !Array.isArray(item));
  73.     }
  74.  
  75.     static mergeDeep(target, ...sources) {
  76.         if (!sources.length) return target;
  77.         const source = sources.shift();
  78.  
  79.         if (this.isObject(target) && this.isObject(source)) {
  80.             for (const key in source) {
  81.                 if (this.isObject(source[key])) {
  82.                     if (!target[key]) Object.assign(target, { [key]: {} });
  83.                     this.mergeDeep(target[key], source[key]);
  84.                 } else {
  85.                     Object.assign(target, { [key]: source[key] });
  86.                 }
  87.             }
  88.         }
  89.  
  90.         return this.mergeDeep(target, ...sources);
  91.     }
  92.  
  93.  
  94.     static onNewScript(mutations) {
  95.         for (var mut of mutations) {
  96.             for (var node of mut.addedNodes) {
  97.                 YTP.bruteforce();
  98.             }
  99.         }
  100.     }
  101.  
  102.     static start() {
  103.         this.observer.observe(document, {childList: true, subtree: true});
  104.     }
  105.  
  106.     static stop() {
  107.         this.observer.disconnect();
  108.     }
  109.  
  110.     static bruteforce() {
  111.         if (!window.yt) return;
  112.         if (!window.yt.config_) return;
  113.  
  114.         this.mergeDeep(window.yt.config_, this._config);
  115.     }
  116.  
  117.     static setCfg(name, value) {
  118.         this._config[name] = value;
  119.     }
  120.  
  121.     static setCfgMulti(configs) {
  122.         this.mergeDeep(this._config, configs);
  123.     }
  124.  
  125.     static setExp(name, value) {
  126.         if (!("EXPERIMENT_FLAGS" in this._config)) this._config.EXPERIMENT_FLAGS = {};
  127.  
  128.         this._config.EXPERIMENT_FLAGS[name] = value;
  129.     }
  130.  
  131.     static setExpMulti(exps) {
  132.         if (!("EXPERIMENT_FLAGS" in this._config)) this._config.EXPERIMENT_FLAGS = {};
  133.  
  134.         this.mergeDeep(this._config.EXPERIMENT_FLAGS, exps);
  135.     }
  136.  
  137.     static decodePlyrFlags(flags) {
  138.         var obj = {},
  139.             dflags = flags.split("&");
  140.  
  141.         for (var i = 0; i < dflags.length; i++) {
  142.             var dflag = dflags[i].split("=");
  143.             obj[dflag[0]] = dflag[1];
  144.         }
  145.  
  146.         return obj;
  147.     }
  148.  
  149.     static encodePlyrFlags(flags) {
  150.         var keys = Object.keys(flags),
  151.             response = "";
  152.  
  153.         for (var i = 0; i < keys.length; i++) {
  154.             if (i > 0) {
  155.                 response += "&";
  156.             }
  157.             response += keys[i] + "=" + flags[keys[i]];
  158.         }
  159.  
  160.         return response;
  161.     }
  162.  
  163.     static setPlyrFlags(flags) {
  164.         if (!window.yt) return;
  165.         if (!window.yt.config_) return;
  166.         if (!window.yt.config_.WEB_PLAYER_CONTEXT_CONFIGS) return;
  167.         var conCfgs = window.yt.config_.WEB_PLAYER_CONTEXT_CONFIGS;
  168.         if (!("WEB_PLAYER_CONTEXT_CONFIGS" in this._config)) this._config.WEB_PLAYER_CONTEXT_CONFIGS = {};
  169.  
  170.         for (var cfg in conCfgs) {
  171.             var dflags = this.decodePlyrFlags(conCfgs[cfg].serializedExperimentFlags);
  172.             this.mergeDeep(dflags, flags);
  173.             this._config.WEB_PLAYER_CONTEXT_CONFIGS[cfg] = {
  174.                 serializedExperimentFlags: this.encodePlyrFlags(dflags)
  175.             }
  176.         }
  177.     }
  178. }
  179.  
  180. window.addEventListener("yt-page-data-updated", function tmp() {
  181.     YTP.stop();
  182.     for (i = 0; i < ATTRS.length; i++) {
  183.         document.getElementsByTagName("html")[0].removeAttribute(ATTRS[i]);
  184.     }
  185.     window.removeEventListener("yt-page-date-updated", tmp);
  186. });
  187.  
  188. YTP.start();
  189.  
  190. YTP.setCfgMulti(CONFIGS);
  191. YTP.setExpMulti(EXPFLAGS);
  192. YTP.setPlyrFlags(PLYRFLAGS);
  193.  
  194. function $(q) {
  195.     return document.querySelector(q);
  196. }
  197.  
  198. // Fix for Return YouTube Dislike
  199. addEventListener('yt-page-data-updated', function() {
  200.     if(!location.pathname.startsWith('/watch')) return;
  201.  
  202.     var lds = $('ytd-video-primary-info-renderer div#top-level-buttons-computed');
  203.     var like = $('ytd-video-primary-info-renderer div#segmented-like-button > ytd-toggle-button-renderer');
  204.     var share = $('ytd-video-primary-info-renderer div#top-level-buttons-computed > ytd-segmented-like-dislike-button-renderer + ytd-button-renderer');
  205.  
  206.     lds.insertBefore(like, share);
  207.  
  208.     like.setAttribute('class', like.getAttribute('class').replace('ytd-segmented-like-dislike-button-renderer', 'ytd-menu-renderer force-icon-button'));
  209.     like.removeAttribute('is-paper-button-with-icon');
  210.     like.removeAttribute('is-paper-button');
  211.     like.setAttribute('style-action-button', '');
  212.     like.setAttribute('is-icon-button', '');
  213.     like.querySelector('a').insertBefore(like.querySelector('yt-formatted-string'), like.querySelector('tp-yt-paper-tooltip'));
  214.     try { like.querySelector('paper-ripple').remove(); } catch(e) {}
  215.     var paper = like.querySelector('tp-yt-paper-button');
  216.     paper.removeAttribute('style-target');
  217.     paper.removeAttribute('animated');
  218.     paper.removeAttribute('elevation');
  219.     like.querySelector('a').insertBefore(paper.querySelector('yt-icon'), like.querySelector('yt-formatted-string'));
  220.     paper.outerHTML = paper.outerHTML.replace('<tp-yt-paper-button ', '<yt-icon-button ').replace('</tp-yt-paper-button>', '</yt-icon-button>');
  221.     paper = like.querySelector('yt-icon-button');
  222.     paper.querySelector('button#button').appendChild(like.querySelector('yt-icon'));
  223.  
  224.     var dislike = $('ytd-video-primary-info-renderer div#segmented-dislike-button > ytd-toggle-button-renderer');
  225.     lds.insertBefore(dislike, share);
  226.     $('ytd-video-primary-info-renderer ytd-segmented-like-dislike-button-renderer').remove();
  227.     dislike.setAttribute('class', dislike.getAttribute('class').replace('ytd-segmented-like-dislike-button-renderer', 'ytd-menu-renderer force-icon-button'));
  228.     dislike.removeAttribute('has-no-text');
  229.     dislike.setAttribute('style-action-button', '');
  230.     var dlabel = document.createElement('yt-formatted-stringx');
  231.     dlabel.setAttribute('id', 'text');
  232.     if(dislike.getAttribute('class').includes('style-default-active'))
  233.         dlabel.setAttribute('class', dlabel.getAttribute('class').replace('style-default', 'style-default-active'));
  234.     dislike.querySelector('a').insertBefore(dlabel, dislike.querySelector('tp-yt-paper-tooltip'));
  235.  
  236.     $('ytd-video-primary-info-renderer').removeAttribute('flex-menu-enabled');
  237. });
  238.  
  239. // CSS adjustments
  240. (function() {var css = [
  241. 	"/*right column*/",
  242. 	"  [d*=\"M14 9V3L22 12L14 21V15C8.44 15 4.78 17.03 2 21C3.11 15.33 6.22 10.13 14 9Z\"] {",
  243. 	"    d: path(\"M11.7333 8.26667V4L19.2 11.4667L11.7333 18.9333V14.56C6.4 14.56 2.66667 16.2667 0 20C1.06667 14.6667 4.26667 9.33333 11.7333 8.26667Z\")",
  244. 	"  }",
  245.     "  [d*=\"M14 9V3L22 12L14 21V15C8.44 15 4.78 17.03 2 21C3.11 15.33 6.22 10.13 14 9Z\"] {",
  246. 	"    d: path(\"M11.7333 8.26667V4L19.2 11.4667L11.7333 18.9333V14.56C6.4 14.56 2.66667 16.2667 0 20C1.06667 14.6667 4.26667 9.33333 11.7333 8.26667Z\")",
  247. 	"  }"
  248. ].join("\n");
  249. if (typeof GM_addStyle != "undefined") {
  250. 	GM_addStyle(css);
  251. } else if (typeof PRO_addStyle != "undefined") {
  252. 	PRO_addStyle(css);
  253. } else if (typeof addStyle != "undefined") {
  254. 	addStyle(css);
  255. } else {
  256. 	var node = document.createElement("style");
  257. 	node.type = "text/css";
  258. 	node.appendChild(document.createTextNode(css));
  259. 	var heads = document.getElementsByTagName("head");
  260. 	if (heads.length > 0) {
  261. 		heads[0].appendChild(node);
  262. 	} else {
  263. 		//
  264. 		document.documentElement.appendChild(node);
  265. 	}
  266. }
  267. })();
  268.