☰

YouTube 超快聊天

YouTube直播聊天的终极性能提升

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

  1. // ==UserScript==
  2. // @name                YouTube Super Fast Chat
  3. // @version             0.10.1
  4. // @license             MIT
  5. // @name:ja             YouTube スーパーファーストチャット
  6. // @name:zh-TW          YouTube 超快聊天
  7. // @name:zh-CN          YouTube 超快聊天
  8. // @namespace           UserScript
  9. // @match               https://www.youtube.com/live_chat*
  10. // @author              CY Fung
  11. // @require             https://greasyfork.org/scripts/465819-api-for-customelements-in-youtube/code/API%20for%20CustomElements%20in%20YouTube.js?version=1215280
  12. // @run-at              document-start
  13. // @grant               none
  14. // @unwrap
  15. // @allFrames           true
  16. // @inject-into         page
  17. //
  18. // @description         Ultimate Performance Boost for YouTube Live Chats
  19. // @description:ja      YouTubeのライブチャットの究極のパフォーマンスブースト
  20. // @description:zh-TW   YouTube直播聊天的終極性能提升
  21. // @description:zh-CN   YouTube直播聊天的终极性能提升
  22. //
  23. // ==/UserScript==
  24.  
  25. ((__CONTEXT__) => {
  26.     'use strict';
  27.  
  28.     const ENABLE_REDUCED_MAXITEMS_FOR_FLUSH = true;
  29.     const MAX_ITEMS_FOR_TOTAL_DISPLAY = 90;
  30.     const MAX_ITEMS_FOR_FULL_FLUSH = 25;
  31.  
  32.     const ENABLE_NO_SMOOTH_TRANSFORM = true;
  33.     // const ENABLE_CONTENT_HIDDEN = false;
  34.     let ENABLE_FULL_RENDER_REQUIRED = false; // Chrome Only; Firefox Excluded
  35.     const USE_OPTIMIZED_ON_SCROLL_ITEMS = true;
  36.     const USE_WILL_CHANGE_CONTROLLER = false;
  37.     const MODIFY_SCROLL_TO_BOTTOM = false; // NOT REQUIRED in the latest version // and affect atBottom logic
  38.  
  39.  
  40.     let cssText1 = '';
  41.     let cssText2 = '';
  42.     let cssText3 = '';
  43.     let cssText4 = '';
  44.     let cssText5 = '';
  45.     let cssText6 = '';
  46.     let cssText7 = '';
  47.  
  48.     function dr(s) {
  49.         // reserved for future use
  50.         return s;
  51.         // return window.deWeakJS ? window.deWeakJS(s) : s;
  52.     }
  53.  
  54.  
  55.     if (ENABLE_NO_SMOOTH_TRANSFORM) {
  56.  
  57.         cssText3 = `
  58.  
  59.         #item-offset.style-scope.yt-live-chat-item-list-renderer > #items.style-scope.yt-live-chat-item-list-renderer {
  60.             position: static !important;
  61.         }
  62.     `
  63.         cssText4 =
  64.  
  65.  
  66.             `
  67.  
  68.  
  69.         /* optional */
  70.         #item-offset.style-scope.yt-live-chat-item-list-renderer {
  71.         height: auto !important;
  72.         min-height: unset !important;
  73.         }
  74.  
  75.         #items.style-scope.yt-live-chat-item-list-renderer {
  76.         transform: translateY(0px) !important;
  77.         }
  78.  
  79.         /* optional */
  80.  
  81.       `
  82.     }
  83.  
  84.     if (1) {
  85.         cssText5 = `
  86.  
  87.  
  88.  
  89.       /* ------------------------------------------------------------------------------------------------------------- */
  90.  
  91.       yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip, yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer, yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer #image, yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer #image img {
  92.         contain: layout style;
  93.       }
  94.  
  95.       #items.style-scope.yt-live-chat-item-list-renderer {
  96.         contain: layout paint style;
  97.       }
  98.  
  99.       #item-offset.style-scope.yt-live-chat-item-list-renderer {
  100.         contain: style;
  101.       }
  102.  
  103.       #item-scroller.style-scope.yt-live-chat-item-list-renderer {
  104.         contain: size style;
  105.       }
  106.  
  107.       #contents.style-scope.yt-live-chat-item-list-renderer, #chat.style-scope.yt-live-chat-renderer, img.style-scope.yt-img-shadow[width][height] {
  108.         contain: size layout paint style;
  109.       }
  110.  
  111.       .style-scope.yt-live-chat-ticker-renderer[role="button"][aria-label], .style-scope.yt-live-chat-ticker-renderer[role="button"][aria-label] > #container {
  112.         contain: layout paint style;
  113.       }
  114.  
  115.       yt-live-chat-text-message-renderer.style-scope.yt-live-chat-item-list-renderer, yt-live-chat-membership-item-renderer.style-scope.yt-live-chat-item-list-renderer, yt-live-chat-paid-message-renderer.style-scope.yt-live-chat-item-list-renderer, yt-live-chat-banner-manager.style-scope.yt-live-chat-item-list-renderer {
  116.         contain: layout style;
  117.       }
  118.  
  119.       tp-yt-paper-tooltip[style*="inset"][role="tooltip"] {
  120.         contain: layout paint style;
  121.       }
  122.  
  123.       /* ------------------------------------------------------------------------------------------------------------- */
  124.  
  125.     `
  126.     }
  127.  
  128.     if (1) {
  129.  
  130.         cssText6 = `
  131.  
  132.  
  133.         yt-icon[icon="down_arrow"] > *, yt-icon-button#show-more > * {
  134.         pointer-events: none !important;
  135.         }
  136.  
  137.         #continuations, #continuations * {
  138.             contain: strict;
  139.             position: fixed;
  140.             top: 2px;
  141.             height: 1px;
  142.             width: 2px;
  143.             height: 1px;
  144.             visibility: collapse;
  145.         }
  146.  
  147.         yt-live-chat-renderer[has-action-panel-renderer] #show-more.yt-live-chat-item-list-renderer{
  148.             top: 4px;
  149.             transition-property: top;
  150.             bottom: unset;
  151.         }
  152.  
  153.         yt-live-chat-renderer[has-action-panel-renderer] #show-more.yt-live-chat-item-list-renderer[disabled]{
  154.             top: -42px;
  155.         }
  156.  
  157.         html #panel-pages.yt-live-chat-renderer > #input-panel.yt-live-chat-renderer:not(:empty) {
  158.             --yt-live-chat-action-panel-top-border: none;
  159.         }
  160.  
  161.         html #panel-pages.yt-live-chat-renderer > #input-panel.yt-live-chat-renderer.iron-selected > *:first-child {
  162.             border-top: 1px solid var(--yt-live-chat-panel-pages-border-color);
  163.         }
  164.  
  165.         html #panel-pages.yt-live-chat-renderer {
  166.             border-top: 0;
  167.             border-bottom: 0;
  168.         }
  169.  
  170.         #input-panel #picker-buttons yt-live-chat-icon-toggle-button-renderer#product-picker {
  171.             /*
  172.             overflow: hidden;
  173.             contain: layout paint style;
  174.             */
  175.             contain: layout style;
  176.         }
  177.  
  178.         #chat.yt-live-chat-renderer ~ #panel-pages.yt-live-chat-renderer {
  179.             overflow: visible;
  180.         }
  181.  
  182.  
  183.     `
  184.     }
  185.  
  186.     if (1) {
  187.         cssText7 = `
  188.  
  189.  
  190.         .ytp-contextmenu[class],
  191.         .toggle-button.tp-yt-paper-toggle-button[class],
  192.         .yt-spec-touch-feedback-shape__fill[class],
  193.         .fill.yt-interaction[class],
  194.         .ytp-videowall-still-info-content[class],
  195.         .ytp-suggestion-image[class] {
  196.           will-change: unset !important;
  197.         }
  198.  
  199.         img {
  200.           content-visibility: visible !important;
  201.         }
  202.  
  203.         yt-img-shadow[height][width],
  204.         yt-img-shadow {
  205.           content-visibility: visible !important;
  206.         }
  207.  
  208.         yt-live-chat-item-list-renderer:not([allow-scroll]) #item-scroller.yt-live-chat-item-list-renderer {
  209.             overflow-y: scroll;
  210.             padding-right: 0;
  211.         }
  212.  
  213.     `
  214.     }
  215.  
  216.     function addCssElement() {
  217.         let s = document.createElement('style')
  218.         s.id = 'ewRvC';
  219.         return s;
  220.     }
  221.  
  222.     const addCss = () => document.head.appendChild(dr(addCssElement())).textContent = `
  223.  
  224.  
  225.     @supports (contain:layout paint style) and (content-visibility:auto) and (contain-intrinsic-size:auto var(--wsr94)) {
  226.  
  227.         ${cssText1}
  228.     }
  229.  
  230.     @supports (contain:layout paint style) {
  231.  
  232.       ${cssText2}
  233.  
  234.  
  235.       ${cssText5}
  236.  
  237.     }
  238.  
  239.     @supports (color: var(--general)) {
  240.  
  241.         ${cssText3}
  242.  
  243.         ${cssText7}
  244.  
  245.  
  246.         ${cssText4}
  247.  
  248.         ${cssText6}
  249.  
  250.         .no-anchor * {
  251.             overflow-anchor: none;
  252.         }
  253.         .no-anchor > item-anchor {
  254.             overflow-anchor: auto;
  255.         }
  256.  
  257.         item-anchor {
  258.  
  259.             height:1px;
  260.             width: 100%;
  261.             transform: scaleY(0.00001);
  262.             transform-origin:0 0;
  263.             contain: strict;
  264.             opacity:0;
  265.             display:flex;
  266.             position:relative;
  267.             flex-shrink:0;
  268.             flex-grow:0;
  269.             margin-bottom:0;
  270.             overflow:hidden;
  271.             box-sizing:border-box;
  272.             visibility: visible;
  273.             content-visibility: visible;
  274.             contain-intrinsic-size: auto 1px;
  275.             pointer-events:none !important;
  276.  
  277.         }
  278.  
  279.         #item-scroller.style-scope.yt-live-chat-item-list-renderer[class] {
  280.             overflow-anchor: initial !important;
  281.         }
  282.  
  283.         html item-anchor {
  284.  
  285.             height: 1px;
  286.             width: 1px;
  287.             top:auto;
  288.             left:auto;
  289.             right:auto;
  290.             bottom:auto;
  291.             transform: translateY(-1px);
  292.             position: absolute;
  293.             z-index:-1;
  294.  
  295.         }
  296.  
  297.  
  298.  
  299.         @keyframes dontRenderAnimation {
  300.             0% {
  301.                 background-position-x: 3px;
  302.             }
  303.             100% {
  304.                 background-position-x: 4px;
  305.             }
  306.         }
  307.  
  308.         /*html[dont-render-enabled] */ .dont-render{
  309.             visibility: collapse !important;
  310.             transform: scale(0.01) !important;
  311.             transform: scale(0.00001) !important;
  312.             transform: scale(0.0000001) !important;
  313.             transform-origin:0 0 !important;
  314.             z-index:-1 !important;
  315.             contain: strict !important;
  316.             box-sizing: border-box !important;
  317.  
  318.             height:1px !important;
  319.             height:0.1px !important;
  320.             height:0.01px !important;
  321.             height:0.0001px !important;
  322.             height:0.000001px !important;
  323.  
  324.  
  325.             animation: dontRenderAnimation 1ms linear 80ms 1 normal forwards !important;
  326.  
  327.         }
  328.  
  329.  
  330.  
  331.     }
  332.  
  333.     `;
  334.  
  335.  
  336.     const { IntersectionObserver } = __CONTEXT__;
  337.  
  338.     /** @type {globalThis.PromiseConstructor} */
  339.     const Promise = (async () => { })().constructor; // YouTube hacks Promise in WaterFox Classic and "Promise.resolve(0)" nevers resolve.
  340.  
  341.     if (!IntersectionObserver) return console.error("Your browser does not support IntersectionObserver.\nPlease upgrade to the latest version.")
  342.  
  343.     const isContainSupport = CSS.supports('contain', 'layout paint style');
  344.     if (!isContainSupport) {
  345.         console.warn("Your browser does not support css property 'contain'.\nPlease upgrade to the latest version.".trim());
  346.     } else {
  347.  
  348.         ENABLE_FULL_RENDER_REQUIRED = true; // Chromium-based browsers
  349.  
  350.     }
  351.  
  352.  
  353.  
  354.  
  355.     const win = this || window;
  356.  
  357.     // Create a unique key for the script and check if it is already running
  358.     const hkey_script = 'mchbwnoasqph';
  359.     if (win[hkey_script]) throw new Error('Duplicated Userscript Calling'); // avoid duplicated scripting
  360.     win[hkey_script] = true;
  361.  
  362.     const cleanContext = async (win) => {
  363.         const waitFn = requestAnimationFrame; // shall have been binded to window
  364.         try {
  365.             const mx = 16; // MAX TRIAL
  366.             const frame = document.createElement('iframe');
  367.             frame.sandbox = 'allow-same-origin';
  368.             const n = document.createElement('noscript'); // wrap into NOSCRPIT to avoid reflow (layouting)
  369.             n.appendChild(frame);
  370.             while (!document.documentElement && mx-- > 0) await new Promise(waitFn); // requestAnimationFrame here could get modified by YouTube engine
  371.             const root = document.documentElement;
  372.             root.appendChild(n); // throw error if root is null due to exceeding MAX TRIAL
  373.             while (!frame.contentWindow && mx-- > 0) await new Promise(waitFn);
  374.             const fc = frame.contentWindow;
  375.             if (!fc) throw "window is not found."; // throw error if root is null due to exceeding MAX TRIAL
  376.             const { requestAnimationFrame } = fc;
  377.             const res = { requestAnimationFrame };
  378.             for (let k in res) res[k] = res[k].bind(win); // necessary
  379.             n.remove();
  380.             return res;
  381.         } catch (e) {
  382.             console.warn(e);
  383.             return null;
  384.         }
  385.     };
  386.  
  387.     cleanContext(win).then(__CONTEXT__ => {
  388.         if (!__CONTEXT__) return null;
  389.  
  390.  
  391.         const { requestAnimationFrame } = __CONTEXT__;
  392.  
  393.  
  394.         ENABLE_FULL_RENDER_REQUIRED && document.addEventListener('animationstart', (evt) => {
  395.  
  396.             if (evt.animationName === 'dontRenderAnimation') {
  397.                 evt.target.classList.remove('dont-render');
  398.             }
  399.  
  400.         }, true);
  401.  
  402.         ENABLE_FULL_RENDER_REQUIRED && (() => {
  403.  
  404.             const f = (elm) => {
  405.                 if (elm && elm.nodeType === 1) {
  406.                     elm.classList.add('dont-render');
  407.                 }
  408.             }
  409.  
  410.             Node.prototype.__appendChild931__ = function (a) {
  411.                 a = dr(a);
  412.                 if (this.id === 'items' && this.classList.contains('yt-live-chat-item-list-renderer')) {
  413.                     if (a && a.nodeType === 1) f(a);
  414.                     else if (a instanceof DocumentFragment) {
  415.                         for (let n = a.firstChild; n; n = n.nextSibling) {
  416.                             f(n);
  417.                         }
  418.                     }
  419.                 }
  420.             }
  421.  
  422.             Node.prototype.__appendChild932__ = function () {
  423.                 this.__appendChild931__.apply(this, arguments);
  424.                 return Node.prototype.appendChild.apply(this, arguments)
  425.             }
  426.             
  427.  
  428.         })();
  429.  
  430.         // let delayedAppendParentWS = new WeakSet();
  431.         // let delayedAppendOperations = [];
  432.         // let commonAppendParentStackSet = new Set();
  433.  
  434.         // let firstVisibleItemDetected = false; // deprecated
  435.  
  436.         const sp7 = Symbol();
  437.  
  438.  
  439.         let dt0 = Date.now() - 2000;
  440.         const dateNow = () => Date.now() - dt0;
  441.         // let lastScroll = 0;
  442.         // let lastLShow = 0;
  443.         let lastWheel = 0;
  444.  
  445.         const proxyHelperFn = (dummy) => ({
  446.  
  447.             get(target, prop) {
  448.                 return (prop in dummy) ? dummy[prop] : prop === sp7 ? target : target[prop];
  449.             },
  450.             set(target, prop, value) {
  451.                 if (!(prop in dummy)) {
  452.                     target[prop] = value;
  453.                 }
  454.                 return true;
  455.             },
  456.             has(target, prop) {
  457.                 return (prop in target)
  458.             },
  459.             deleteProperty(target, prop) {
  460.                 return true;
  461.             },
  462.             ownKeys(target) {
  463.                 return Object.keys(target);
  464.             },
  465.             defineProperty(target, key, descriptor) {
  466.                 return Object.defineProperty(target, key, descriptor);
  467.             },
  468.             getOwnPropertyDescriptor(target, key) {
  469.                 return Object.getOwnPropertyDescriptor(target, key);
  470.             },
  471.  
  472.         });
  473.  
  474.         const tickerContainerSetAttribute = function (attrName, attrValue) { // ensure '14.30000001%'.toFixed(1)
  475.  
  476.             let yd = (this.__dataHost || (this.inst || 0).__dataHost).__data;
  477.  
  478.             if (arguments.length === 2 && attrName === 'style' && yd && attrValue) {
  479.  
  480.                 // let v = yd.containerStyle.privateDoNotAccessOrElseSafeStyleWrappedValue_;
  481.                 let v = `${attrValue}`;
  482.                 // conside a ticker is 101px width
  483.                 // 1% = 1.01px
  484.                 // 0.2% = 0.202px
  485.  
  486.  
  487.                 const ratio1 = (yd.ratio * 100);
  488.                 if (ratio1 > -1) { // avoid NaN
  489.  
  490.                     // countdownDurationMs
  491.                     // 600000 - 0.2%    <1% = 6s>  <0.2% = 1.2s>
  492.                     // 300000 - 0.5%    <1% = 3s>  <0.5% = 1.5s>
  493.                     // 150000 - 1%    <1% = 1.5s>
  494.                     // 75000 - 2%    <1% =0.75s > <2% = 1.5s>
  495.                     // 30000 - 5%    <1% =0.3s > <5% = 1.5s>
  496.  
  497.                     // 99px * 5% = 4.95px
  498.  
  499.                     // 15000 - 10%    <1% =0.15s > <10% = 1.5s>
  500.  
  501.  
  502.  
  503.  
  504.                     // 1% Duration
  505.  
  506.                     let ratio2 = ratio1;
  507.  
  508.                     const ydd = yd.data;
  509.                     const d1 = ydd.durationSec;
  510.                     const d2 = ydd.fullDurationSec;
  511.  
  512.                     if (d1 === d2 && d1 > 1) {
  513.  
  514.                         if (d1 > 400) ratio2 = Math.round(ratio2 * 5) / 5; // 0.2%
  515.                         else if (d1 > 200) ratio2 = Math.round(ratio2 * 2) / 2; // 0.5%
  516.                         else if (d1 > 100) ratio2 = Math.round(ratio2 * 1) / 1; // 1%
  517.                         else if (d1 > 50) ratio2 = Math.round(ratio2 * 0.5) / 0.5; // 2%
  518.                         else if (d1 > 25) ratio2 = Math.round(ratio2 * 0.2) / 0.2; // 5% (max => 99px * 5% = 4.95px)
  519.                         else ratio2 = Math.round(ratio2 * 0.2) / 0.2;
  520.  
  521.                     } else {
  522.                         ratio2 = Math.round(ratio2 * 5) / 5; // 0.2% (min)
  523.                     }
  524.  
  525.                     // ratio2 = Math.round(ratio2 * 5) / 5;
  526.                     ratio2 = ratio2.toFixed(1)
  527.                     v = v.replace(`${ratio1}%`, `${ratio2}%`).replace(`${ratio1}%`, `${ratio2}%`)
  528.  
  529.                     if (yd.__style_last__ === v) return;
  530.                     yd.__style_last__ = v;
  531.                     // do not consider any delay here.
  532.                     // it shall be inside the looping for all properties changes. all the css background ops are in the same microtask.
  533.  
  534.                 }
  535.  
  536.                 HTMLElement.prototype.setAttribute.call(dr(this), attrName, v);
  537.  
  538.  
  539.             } else {
  540.                 HTMLElement.prototype.setAttribute.apply(dr(this), arguments);
  541.             }
  542.  
  543.         };
  544.  
  545.         const fxOperator = (proto, propertyName) => {
  546.             let propertyDescriptorGetter = null;
  547.             try {
  548.                 propertyDescriptorGetter = Object.getOwnPropertyDescriptor(proto, propertyName).get;
  549.             } catch (e) { }
  550.             return typeof propertyDescriptorGetter === 'function' ? (e) => {
  551.                 try {
  552.  
  553.                     return propertyDescriptorGetter.call(dr(e))
  554.                 } catch (e) { }
  555.                 return e[propertyName];
  556.             } : (e) => e[propertyName];
  557.         };
  558.  
  559.         const nodeParent = fxOperator(Node.prototype, 'parentNode');
  560.         // const nFirstElem = fxOperator(HTMLElement.prototype, 'firstElementChild');
  561.         const nPrevElem = fxOperator(HTMLElement.prototype, 'previousElementSibling');
  562.         const nNextElem = fxOperator(HTMLElement.prototype, 'nextElementSibling');
  563.         const nLastElem = fxOperator(HTMLElement.prototype, 'lastElementChild');
  564.  
  565.  
  566.         /* globals WeakRef:false */
  567.  
  568.         /** @type {(o: Object | null) => WeakRef | null} */
  569.         const mWeakRef = typeof WeakRef === 'function' ? (o => o ? new WeakRef(o) : null) : (o => o || null); // typeof InvalidVar == 'undefined'
  570.  
  571.         /** @type {(wr: Object | null) => Object | null} */
  572.         const kRef = (wr => (wr && wr.deref) ? wr.deref() : wr);
  573.  
  574.         const watchUserCSS = () => {
  575.  
  576.             // if (!CSS.supports('contain-intrinsic-size', 'auto var(--wsr94)')) return;
  577.  
  578.             const getElemFromWR = (nr) => {
  579.                 const n = kRef(nr);
  580.                 if (n && n.isConnected) return n;
  581.                 return null;
  582.             }
  583.  
  584.             const clearContentVisibilitySizing = () => {
  585.                 Promise.resolve().then(() => {
  586.  
  587.                     let btnShowMoreWR = mWeakRef(document.querySelector('#show-more[disabled]'));
  588.  
  589.                     let lastVisibleItemWR = null;
  590.                     for (const elm of document.querySelectorAll('[wSr93]')) {
  591.                         if (elm.getAttribute('wSr93') === 'visible') lastVisibleItemWR = mWeakRef(elm);
  592.                         elm.setAttribute('wSr93', '');
  593.                         // custom CSS property --wsr94 not working when attribute wSr93 removed
  594.                     }
  595.                     requestAnimationFrame(() => {
  596.                         const btnShowMore = getElemFromWR(btnShowMoreWR); btnShowMoreWR = null;
  597.                         if (btnShowMore) btnShowMore.click();
  598.                         else {
  599.                             // would not work if switch it frequently
  600.                             const lastVisibleItem = getElemFromWR(lastVisibleItemWR); lastVisibleItemWR = null;
  601.                             if (lastVisibleItem) {
  602.  
  603.                                 Promise.resolve()
  604.                                     .then(() => lastVisibleItem.scrollIntoView())
  605.                                     .then(() => lastVisibleItem.scrollIntoView(false))
  606.                                     .then(() => lastVisibleItem.scrollIntoView({ behavior: "instant", block: "end", inline: "nearest" }))
  607.                                     .catch(e => { }) // break the chain when method not callable
  608.  
  609.                             }
  610.                         }
  611.                     })
  612.  
  613.                 })
  614.  
  615.             }
  616.  
  617.             const mutObserver = new MutationObserver((mutations) => {
  618.                 for (const mutation of mutations) {
  619.                     if ((mutation.addedNodes || 0).length >= 1) {
  620.                         for (const addedNode of mutation.addedNodes) {
  621.                             if (addedNode.nodeName === 'STYLE') {
  622.                                 clearContentVisibilitySizing();
  623.                                 return;
  624.                             }
  625.                         }
  626.                     }
  627.                     if ((mutation.removedNodes || 0).length >= 1) {
  628.                         for (const removedNode of mutation.removedNodes) {
  629.                             if (removedNode.nodeName === 'STYLE') {
  630.                                 clearContentVisibilitySizing();
  631.                                 return;
  632.                             }
  633.                         }
  634.                     }
  635.                 }
  636.             });
  637.  
  638.             mutObserver.observe(document.documentElement, {
  639.                 childList: true,
  640.                 subtree: false
  641.             })
  642.  
  643.             mutObserver.observe(document.head, {
  644.                 childList: true,
  645.                 subtree: false
  646.             })
  647.             mutObserver.observe(document.body, {
  648.                 childList: true,
  649.                 subtree: false
  650.             });
  651.  
  652.         }
  653.  
  654.         const setupStyle = (m1, m2) => {
  655.             if (!ENABLE_NO_SMOOTH_TRANSFORM) return;
  656.  
  657.             const dummy1v = {
  658.                 transform: '',
  659.                 height: '',
  660.                 minHeight: '',
  661.                 paddingBottom: '',
  662.                 paddingTop: ''
  663.             };
  664.  
  665.             for (const k of ['toString', 'getPropertyPriority', 'getPropertyValue', 'item', 'removeProperty', 'setProperty']) {
  666.                 dummy1v[k] = ((k) => (function () { const style = this[sp7]; return style[k](...arguments); }))(k)
  667.             }
  668.  
  669.             const dummy1p = proxyHelperFn(dummy1v);
  670.             const sp1v = new Proxy(m1.style, dummy1p);
  671.             const sp2v = new Proxy(m2.style, dummy1p);
  672.             Object.defineProperty(m1, 'style', { get() { return sp1v }, set() { }, enumerable: true, configurable: true });
  673.             Object.defineProperty(m2, 'style', { get() { return sp2v }, set() { }, enumerable: true, configurable: true });
  674.             m1.removeAttribute("style");
  675.             m2.removeAttribute("style");
  676.  
  677.         }
  678.  
  679.  
  680.         class WillChangeController {
  681.             constructor(itemScroller, willChangeValue) {
  682.                 this.element = itemScroller;
  683.                 this.counter = 0;
  684.                 this.active = false;
  685.                 this.willChangeValue = willChangeValue;
  686.             }
  687.  
  688.             beforeOper() {
  689.                 if (!this.active) {
  690.                     this.active = true;
  691.                     this.element.style.willChange = this.willChangeValue;
  692.                 }
  693.                 this.counter++;
  694.             }
  695.  
  696.             afterOper() {
  697.                 const c = this.counter;
  698.                 requestAnimationFrame(() => {
  699.                     if (c === this.counter) {
  700.                         this.active = false;
  701.                         this.element.style.willChange = '';
  702.                     }
  703.                 })
  704.             }
  705.  
  706.             release() {
  707.                 const element = this.element;
  708.                 this.element = null;
  709.                 this.counter = 1e16;
  710.                 this.active = false;
  711.                 try {
  712.                     element.style.willChange = '';
  713.                 } catch (e) { }
  714.             }
  715.  
  716.         }
  717.  
  718.         customYtElements.onRegistryReady(() => {
  719.  
  720.  
  721.             let scrollWillChangeController = null;
  722.             let contensWillChangeController = null;
  723.  
  724.             // as it links to event handling, it has to be injected using immediateCallback
  725.             customYtElements.whenRegistered('yt-live-chat-item-list-renderer', (cProto) => {
  726.  
  727.  
  728.                 const mclp = cProto;
  729.                 console.assert(typeof mclp.scrollToBottom_ === 'function')
  730.                 console.assert(typeof mclp.scrollToBottom66_ !== 'function')
  731.                 console.assert(typeof mclp.flushActiveItems_ === 'function')
  732.                 console.assert(typeof mclp.flushActiveItems66_ !== 'function')
  733.                 console.assert(typeof mclp.async === 'function')
  734.  
  735.  
  736.                 mclp.__intermediate_delay__ = null;
  737.  
  738.                 let mzk = 0;
  739.                 let myk = 0;
  740.                 let mlf = 0;
  741.                 let myw = 0;
  742.                 let mzt = 0;
  743.                 let zarr = null;
  744.  
  745.                 if ((mclp.clearList || 0).length === 0) {
  746.                     mclp.clearList66 = mclp.clearList;
  747.                     mclp.clearList = function () {
  748.                         mzk++;
  749.                         myk++;
  750.                         mlf++;
  751.                         myw++;
  752.                         mzt++;
  753.                         zarr = null;
  754.                         this.__intermediate_delay__ = null;
  755.                         this.clearList66();
  756.                     };
  757.                 }
  758.  
  759.                 if ((mclp.scrollToBottom_ || 0).length === 0 && ENABLE_NO_SMOOTH_TRANSFORM && MODIFY_SCROLL_TO_BOTTOM) {
  760.  
  761.                     mclp.scrollToBottom66_ = mclp.scrollToBottom_;
  762.  
  763.                     mclp.scrollToBottom77_ = async function () {
  764.                         if (mzk > 1e9) mzk = 9;
  765.                         let tid = ++mzk;
  766.  
  767.                         await new Promise(requestAnimationFrame);
  768.  
  769.                         if (tid !== mzk) {
  770.                             return;
  771.                         }
  772.  
  773.                         const cnt = this;
  774.                         if (USE_WILL_CHANGE_CONTROLLER) {
  775.                             const itemScroller = cnt.itemScroller;
  776.                             if (scrollWillChangeController && scrollWillChangeController.element !== itemScroller) {
  777.                                 scrollWillChangeController.release();
  778.                                 scrollWillChangeController = null;
  779.                             }
  780.                             if (!scrollWillChangeController) scrollWillChangeController = new WillChangeController(itemScroller, 'scroll-position');
  781.                         }
  782.                         const wcController = scrollWillChangeController;
  783.                         wcController && wcController.beforeOper();
  784.  
  785.                         await Promise.resolve();
  786.                         cnt.scrollToBottom66_();
  787.  
  788.                         await Promise.resolve();
  789.                         wcController && wcController.afterOper();
  790.  
  791.                     }
  792.  
  793.                     mclp.scrollToBottom_ = function () {
  794.                         const cnt = this;
  795.                         cnt.__intermediate_delay__ = new Promise(resolve => {
  796.                             cnt.scrollToBottom77_().then(() => {
  797.                                 resolve();
  798.                             });
  799.                         });
  800.                     }
  801.                 }
  802.  
  803.  
  804.  
  805.                 if ((mclp.showNewItems_ || 0).length === 0 && ENABLE_NO_SMOOTH_TRANSFORM) {
  806.  
  807.  
  808.                     mclp.showNewItems66_ = mclp.showNewItems_;
  809.  
  810.                     mclp.showNewItems77_ = async function () {
  811.                         if (myk > 1e9) myk = 9;
  812.                         let tid = ++myk;
  813.  
  814.                         await new Promise(requestAnimationFrame);
  815.  
  816.                         if (tid !== myk) {
  817.                             return;
  818.                         }
  819.  
  820.                         const cnt = this;
  821.  
  822.                         await Promise.resolve();
  823.                         cnt.showNewItems66_();
  824.  
  825.                         await Promise.resolve();
  826.  
  827.                     }
  828.  
  829.                     mclp.showNewItems_ = function () {
  830.  
  831.                         const cnt = this;
  832.                         cnt.__intermediate_delay__ = new Promise(resolve => {
  833.                             cnt.showNewItems77_().then(() => {
  834.                                 resolve();
  835.                             });
  836.                         });
  837.                     }
  838.  
  839.                 }
  840.  
  841.  
  842.  
  843.  
  844.                 if ((mclp.flushActiveItems_ || 0).length === 0) {
  845.  
  846.  
  847.                     mclp.flushActiveItems66_ = mclp.flushActiveItems_;
  848.  
  849.  
  850.                     mclp.flushActiveItems77_ = async function () {
  851.                         try {
  852.  
  853.                             const cnt = this;
  854.                             if (mlf > 1e9) mlf = 9;
  855.                             let tid = ++mlf;
  856.                             if (tid !== mlf || cnt.isAttached === false || (cnt.hostElement || cnt).isConnected === false) return;
  857.                             if (!cnt.activeItems_ || cnt.activeItems_.length === 0) return;
  858.  
  859.                             // 4 times to maxItems to avoid frequent trimming.
  860.                             // 1 ... 10 ... 20 ... 30 ... 40 ... 50 ... 60 => 16 ... 20 ... 30 ..... 60 ... => 16
  861.  
  862.                             this.activeItems_.length > this.data.maxItemsToDisplay * 4 && this.data.maxItemsToDisplay > 4 && this.activeItems_.splice(0, this.activeItems_.length - this.data.maxItemsToDisplay - 1);
  863.                             if (cnt.canScrollToBottom_()) {
  864.                                 let immd = cnt.__intermediate_delay__;
  865.                                 await new Promise(requestAnimationFrame);
  866.                                 if (tid !== mlf || cnt.isAttached === false || (cnt.hostElement || cnt).isConnected === false) return;
  867.                                 if (!cnt.activeItems_ || cnt.activeItems_.length === 0) return;
  868.  
  869.                                 const oMaxItemsToDisplay = this.data.maxItemsToDisplay;
  870.                                 const reducedMaxItemsToDisplay = MAX_ITEMS_FOR_FULL_FLUSH;
  871.                                 let changeMaxItemsToDisplay = false;
  872.                                 if (ENABLE_REDUCED_MAXITEMS_FOR_FLUSH && this.activeItems_.length > this.data.maxItemsToDisplay) {
  873.                                     if (this.data.maxItemsToDisplay > reducedMaxItemsToDisplay) {
  874.                                         // as all the rendered chats are already "outdated"
  875.                                         // all old chats shall remove and reduced number of few chats will be rendered
  876.                                         // then restore to the original number
  877.                                         changeMaxItemsToDisplay = true;
  878.                                         this.data.maxItemsToDisplay = reducedMaxItemsToDisplay;
  879.                                     }
  880.                                     this.activeItems_.splice(0, this.activeItems_.length - this.data.maxItemsToDisplay);
  881.                                     //   console.log('changeMaxItemsToDisplay 01', this.data.maxItemsToDisplay, oMaxItemsToDisplay, reducedMaxItemsToDisplay)
  882.                                 }
  883.  
  884.                                 // it is found that it will render all stacked chats after switching back from background
  885.                                 // to avoid lagging in popular livestream with massive chats, trim first before rendering.
  886.                                 // this.activeItems_.length > this.data.maxItemsToDisplay && this.activeItems_.splice(0, this.activeItems_.length - this.data.maxItemsToDisplay);
  887.  
  888.  
  889.  
  890.                                 const items = (cnt.$ || 0).items;
  891.  
  892.                                 if (USE_WILL_CHANGE_CONTROLLER) {
  893.                                     if (contensWillChangeController && contensWillChangeController.element !== items) {
  894.                                         contensWillChangeController.release();
  895.                                         contensWillChangeController = null;
  896.                                     }
  897.                                     if (!contensWillChangeController) contensWillChangeController = new WillChangeController(items, 'contents');
  898.                                 }
  899.                                 const wcController = contensWillChangeController;
  900.                                 cnt.__intermediate_delay__ = Promise.all([cnt.__intermediate_delay__ || null, immd || null]);
  901.                                 wcController && wcController.beforeOper();
  902.                                 await Promise.resolve();
  903.                                 const len1 = cnt.activeItems_.length;
  904.                                 cnt.flushActiveItems66_();
  905.                                 const len2 = cnt.activeItems_.length;
  906.                                 let bAsync = len1 !== len2;
  907.                                 await Promise.resolve();
  908.                                 if (wcController) {
  909.                                     if (bAsync) {
  910.                                         cnt.async(() => {
  911.                                             wcController.afterOper();
  912.                                         });
  913.                                     } else {
  914.                                         wcController.afterOper();
  915.                                     }
  916.                                 }
  917.                                 if (changeMaxItemsToDisplay) {
  918.                                     if (this.data.maxItemsToDisplay === reducedMaxItemsToDisplay) {
  919.                                         this.data.maxItemsToDisplay = oMaxItemsToDisplay;
  920.                                         //   console.log('changeMaxItemsToDisplay 02', this.data.maxItemsToDisplay, oMaxItemsToDisplay, reducedMaxItemsToDisplay)
  921.                                     }
  922.                                 }
  923.  
  924.  
  925.                                 if (!ENABLE_NO_SMOOTH_TRANSFORM) {
  926.  
  927.  
  928.                                     const ff = () => {
  929.  
  930.                                         if (cnt.isAttached === false || (cnt.hostElement || cnt).isConnected === false) return;
  931.                                         //   if (tid !== mlf || cnt.isAttached === false || (cnt.hostElement || cnt).isConnected === false) return;
  932.                                         if (!cnt.atBottom && cnt.allowScroll && cnt.canScrollToBottomDLW_ && cnt.canScrollToBottomDLW_()) {
  933.                                             cnt.scrollToBottom_();
  934.  
  935.                                             Promise.resolve().then(() => {
  936.  
  937.                                                 if (cnt.isAttached === false || (cnt.hostElement || cnt).isConnected === false) return;
  938.                                                 if (!cnt.canScrollToBottom_()) cnt.scrollToBottom_();
  939.                                             })
  940.  
  941.  
  942.                                         }
  943.                                     }
  944.  
  945.                                     ff();
  946.  
  947.  
  948.                                     Promise.resolve().then(ff)
  949.  
  950.                                     // requestAnimationFrame(ff);
  951.                                 } else if (true) { // it might not be sticky to bottom when there is a full refresh.
  952.  
  953.                                     Promise.resolve().then(() => {
  954.  
  955.                                         if (!cnt.atBottom) {
  956.                                             if (cnt.isAttached === false || (cnt.hostElement || cnt).isConnected === false) return;
  957.                                             cnt.scrollToBottom_();
  958.                                         }
  959.  
  960.                                     }).then(() => { // do twice
  961.  
  962.                                         if (!cnt.atBottom) {
  963.                                             if (cnt.isAttached === false || (cnt.hostElement || cnt).isConnected === false) return;
  964.                                             cnt.scrollToBottom_();
  965.                                         }
  966.  
  967.                                     })
  968.                                 }
  969.  
  970.  
  971.                                 return 1;
  972.                             } else {
  973.                                 // cnt.flushActiveItems66_();
  974.                                 // this.activeItems_.length > this.data.maxItemsToDisplay && this.activeItems_.splice(0, this.activeItems_.length - this.data.maxItemsToDisplay);
  975.                                 return 2;
  976.                             }
  977.                         } catch (e) {
  978.                             console.warn(e);
  979.                         }
  980.                     }
  981.  
  982.                     mclp.flushActiveItems_ = function () {
  983.                         const cnt = this;
  984.  
  985.                         if (arguments.length !== 0 || !cnt.activeItems_ || !cnt.canScrollToBottom_) return cnt.flushActiveItems66_.apply(this, arguments);
  986.  
  987.                         if (cnt.activeItems_.length === 0) {
  988.                             cnt.__intermediate_delay__ = null;
  989.                             return;
  990.                         }
  991.  
  992.                         const cntData = ((cnt || 0).data || 0);
  993.                         if (cntData.maxItemsToDisplay > MAX_ITEMS_FOR_TOTAL_DISPLAY) cntData.maxItemsToDisplay = MAX_ITEMS_FOR_TOTAL_DISPLAY;
  994.  
  995.                         // ignore previous __intermediate_delay__ and create a new one
  996.                         cnt.__intermediate_delay__ = new Promise(resolve => {
  997.                             cnt.flushActiveItems77_().then(rt => {
  998.                                 if (rt === 1) resolve(1); // success, scroll to bottom
  999.                                 else if (rt === 2) resolve(2); // success, trim
  1000.                                 else resolve(-1); // skip
  1001.                             });
  1002.                         });
  1003.  
  1004.                     }
  1005.                 }
  1006.  
  1007.                 if ((mclp.async || 0).length === 2) {
  1008.  
  1009.  
  1010.                     mclp.async66 = mclp.async;
  1011.                     mclp.async = function () {
  1012.                         // ensure the previous operation is done
  1013.                         // .async is usually after the time consuming functions like flushActiveItems_ and scrollToBottom_
  1014.  
  1015.                         const stack = new Error().stack;
  1016.                         const isFlushAsync = stack.indexOf('flushActiveItems_') >= 0;
  1017.                         (this.__intermediate_delay__ || Promise.resolve()).then(rk => {
  1018.                             if (isFlushAsync) {
  1019.                                 if (rk < 0) return;
  1020.                                 if (rk === 2 && arguments[0] === this.maybeScrollToBottom_) return;
  1021.                             }
  1022.                             this.async66.apply(this, arguments);
  1023.                         });
  1024.  
  1025.                     }
  1026.  
  1027.                 }
  1028.  
  1029.  
  1030.                 if ((mclp.onScrollItems_ || 0).length === 1) {
  1031.  
  1032.                     mclp.onScrollItems66_ = mclp.onScrollItems_;
  1033.                     mclp.onScrollItems77_ = async function (evt) {
  1034.                         if (myw > 1e9) myw = 9;
  1035.                         let tid = ++myw;
  1036.  
  1037.                         await new Promise(requestAnimationFrame);
  1038.  
  1039.                         if (tid !== myw) {
  1040.                             return;
  1041.                         }
  1042.  
  1043.                         const cnt = this;
  1044.  
  1045.                         await Promise.resolve();
  1046.                         if (USE_OPTIMIZED_ON_SCROLL_ITEMS) {
  1047.                             await Promise.resolve().then(() => {
  1048.                                 this.ytRendererBehavior.onScroll(evt);
  1049.                             }).then(() => {
  1050.                                 if (dateNow() - lastWheel < 80) {
  1051.                                     this.setAtBottom();
  1052.                                 }
  1053.                             }).then(() => {
  1054.                                 this.flushActiveItems_();
  1055.                             });
  1056.                         } else {
  1057.                             cnt.onScrollItems66_(evt);
  1058.                         }
  1059.  
  1060.  
  1061.  
  1062.                         await Promise.resolve();
  1063.  
  1064.                     }
  1065.  
  1066.                     mclp.onScrollItems_ = function (evt) {
  1067.  
  1068.                         const cnt = this;
  1069.                         cnt.__intermediate_delay__ = new Promise(resolve => {
  1070.                             cnt.onScrollItems77_(evt).then(() => {
  1071.                                 resolve();
  1072.                             });
  1073.                         });
  1074.                     }
  1075.                 }
  1076.  
  1077.                 if ((mclp.handleLiveChatActions_ || 0).length === 1) {
  1078.                     mclp.handleLiveChatActions66_ = mclp.handleLiveChatActions_;
  1079.  
  1080.                     mclp.handleLiveChatActions77_ = async function (arr) {
  1081.                         if (typeof (arr || 0).length !== 'number') {
  1082.                             this.handleLiveChatActions66_(arr);
  1083.                             return;
  1084.                         }
  1085.                         if (mzt > 1e9) mzt = 9;
  1086.                         let tid = ++mzt;
  1087.  
  1088.                         if (zarr === null) zarr = arr;
  1089.                         else Array.prototype.push.apply(zarr, arr);
  1090.                         arr = null;
  1091.  
  1092.                         await new Promise(requestAnimationFrame);
  1093.  
  1094.                         if (tid !== mzt || zarr === null) {
  1095.                             return;
  1096.                         }
  1097.  
  1098.                         const carr = zarr;
  1099.                         zarr = null;
  1100.  
  1101.                         await Promise.resolve();
  1102.                         this.handleLiveChatActions66_(carr);
  1103.                         await Promise.resolve();
  1104.  
  1105.                     }
  1106.  
  1107.                     mclp.handleLiveChatActions_ = function (arr) {
  1108.  
  1109.                         const cnt = this;
  1110.                         cnt.__intermediate_delay__ = new Promise(resolve => {
  1111.                             cnt.handleLiveChatActions77_(arr).then(() => {
  1112.                                 resolve();
  1113.                             });
  1114.                         });
  1115.                     }
  1116.  
  1117.                 }
  1118.  
  1119.  
  1120.  
  1121.  
  1122.             })
  1123.  
  1124.         });
  1125.  
  1126.         const getProto = (element) => {
  1127.             let proto = null;
  1128.             if (element) {
  1129.                 if (element.inst) proto = element.inst.constructor.prototype;
  1130.                 else proto = element.constructor.prototype;
  1131.             }
  1132.             return proto || null;
  1133.         }
  1134.  
  1135.         let done = 0;
  1136.         let main = async (q) => {
  1137.             if (done) return;
  1138.  
  1139.             if (!q) return;
  1140.             let m1 = nodeParent(q);
  1141.             let m2 = q;
  1142.             if (!(m1 && m1.id === 'item-offset' && m2 && m2.id === 'items')) return;
  1143.  
  1144.             done = 1;
  1145.  
  1146.             // setTimeout(()=>{
  1147.             //   document.documentElement.setAttribute('dont-render-enabled','')
  1148.             // },80)
  1149.  
  1150.             Promise.resolve().then(watchUserCSS);
  1151.  
  1152.             addCss();
  1153.  
  1154.             setupStyle(m1, m2);
  1155.  
  1156.             let lcRendererWR = null;
  1157.  
  1158.             const lcRendererElm = () => {
  1159.                 let lcRenderer = kRef(lcRendererWR);
  1160.                 if (!lcRenderer || !lcRenderer.isConnected) {
  1161.                     lcRenderer = document.querySelector('yt-live-chat-item-list-renderer.yt-live-chat-renderer');
  1162.                     lcRendererWR = lcRenderer ? mWeakRef(lcRenderer) : null;
  1163.                 }
  1164.                 return lcRenderer
  1165.             };
  1166.  
  1167.             let hasFirstShowMore = false;
  1168.  
  1169.             const visObserverFn = (entry) => {
  1170.  
  1171.                 const target = entry.target;
  1172.                 if (!target) return;
  1173.                 // if(target.classList.contains('dont-render')) return;
  1174.                 let isVisible = entry.isIntersecting === true && entry.intersectionRatio > 0.5;
  1175.                 // const h = entry.boundingClientRect.height;
  1176.                 /*
  1177.                 if (h < 16) { // wrong: 8 (padding/margin); standard: 32; test: 16 or 20
  1178.                     // e.g. under fullscreen. the element created but not rendered.
  1179.                     target.setAttribute('wSr93', '');
  1180.                     return;
  1181.                 }
  1182.                 */
  1183.                 if (isVisible) {
  1184.                     // target.style.setProperty('--wsr94', h + 'px');
  1185.                     target.setAttribute('wSr93', 'visible');
  1186.                     if (nNextElem(target) === null) {
  1187.  
  1188.                         // firstVisibleItemDetected = true;
  1189.                         /*
  1190.                           if (dateNow() - lastScroll < 80) {
  1191.                               lastLShow = 0;
  1192.                               lastScroll = 0;
  1193.                               Promise.resolve().then(clickShowMore);
  1194.                           } else {
  1195.                               lastLShow = dateNow();
  1196.                           }
  1197.                           */
  1198.                         // lastLShow = dateNow();
  1199.                     } else if (!hasFirstShowMore) { // should more than one item being visible
  1200.                         // implement inside visObserver to ensure there is sufficient delay
  1201.                         hasFirstShowMore = true;
  1202.                         requestAnimationFrame(() => {
  1203.                             // foreground page
  1204.                             // page visibly ready -> load the latest comments at initial loading
  1205.                             const lcRenderer = lcRendererElm();
  1206.                             if (lcRenderer) {
  1207.                                 (lcRenderer.inst || lcRenderer).scrollToBottom_();
  1208.                             }
  1209.                         });
  1210.                     }
  1211.                 }
  1212.                 else if (target.getAttribute('wSr93') === 'visible') { // ignore target.getAttribute('wSr93') === '' to avoid wrong sizing
  1213.  
  1214.                     // target.style.setProperty('--wsr94', h + 'px');
  1215.                     target.setAttribute('wSr93', 'hidden');
  1216.                 } // note: might consider 0 < entry.intersectionRatio < 0.5 and target.getAttribute('wSr93') === '' <new last item>
  1217.  
  1218.             }
  1219.  
  1220.             const visObserver = new IntersectionObserver((entries) => {
  1221.  
  1222.                 for (const entry of entries) {
  1223.  
  1224.                     Promise.resolve(entry).then(visObserverFn);
  1225.  
  1226.                 }
  1227.  
  1228.             }, {
  1229.                 // root: HTMLElement.prototype.closest.call(m2, '#item-scroller.yt-live-chat-item-list-renderer'), // nullable
  1230.                 rootMargin: "0px",
  1231.                 threshold: [0.05, 0.95],
  1232.             });
  1233.  
  1234.             //m2.style.visibility='';
  1235.  
  1236.             const mutFn = (items) => {
  1237.                 for (let node = nLastElem(items); node !== null; node = nPrevElem(node)) {
  1238.                     if (node.hasAttribute('wSr93')) break;
  1239.                     node.setAttribute('wSr93', '');
  1240.                     visObserver.observe(node);
  1241.                 }
  1242.             }
  1243.  
  1244.             const mutObserver = new MutationObserver((mutations) => {
  1245.                 const items = (mutations[0] || 0).target;
  1246.                 if (!items) return;
  1247.                 mutFn(items);
  1248.             });
  1249.  
  1250.             const setupMutObserver = (m2) => {
  1251.                 mutObserver.disconnect();
  1252.                 mutObserver.takeRecords();
  1253.                 if (m2) {
  1254.                     if (typeof m2.__appendChild932__ === 'function') {
  1255.                         if (typeof m2.appendChild === 'function') m2.appendChild = m2.__appendChild932__;
  1256.                         if (typeof m2.__shady_native_appendChild === 'function') m2.__shady_native_appendChild = m2.__appendChild932__;
  1257.                     }
  1258.                     mutObserver.observe(m2, {
  1259.                         childList: true,
  1260.                         subtree: false
  1261.                     });
  1262.                     mutFn(m2);
  1263.  
  1264.  
  1265.                     if (ENABLE_NO_SMOOTH_TRANSFORM) {
  1266.  
  1267.                         let items = m2;
  1268.                         let addedAnchor = false;
  1269.                         if (items) {
  1270.                             if (items.nextElementSibling === null) {
  1271.                                 items.classList.add('no-anchor');
  1272.                                 addedAnchor = true;
  1273.                                 items.parentNode.appendChild(dr(document.createElement('item-anchor')));
  1274.                             }
  1275.                         }
  1276.  
  1277.  
  1278.  
  1279.                         if (addedAnchor) {
  1280.                             nodeParent(m2).classList.add('no-anchor'); // required
  1281.                         }
  1282.  
  1283.                     }
  1284.  
  1285.                     // let div = document.createElement('div');
  1286.                     // div.id = 'qwcc';
  1287.                     // HTMLElement.prototype.appendChild.call(document.querySelector('yt-live-chat-item-list-renderer'), div )
  1288.                     // bufferRegion =div;
  1289.  
  1290.                     // buffObserver.takeRecords();
  1291.                     // buffObserver.disconnect();
  1292.                     // buffObserver.observe(div,  {
  1293.                     //     childList: true,
  1294.                     //     subtree: false
  1295.                     // })
  1296.  
  1297.  
  1298.  
  1299.                 }
  1300.             }
  1301.  
  1302.             setupMutObserver(m2);
  1303.  
  1304.             const mclp = getProto(document.querySelector('yt-live-chat-item-list-renderer'));
  1305.             if (mclp && mclp.attached) {
  1306.  
  1307.                 mclp.attached66 = mclp.attached;
  1308.                 mclp.attached = function () {
  1309.                     let m2 = document.querySelector('#item-offset.style-scope.yt-live-chat-item-list-renderer > #items.style-scope.yt-live-chat-item-list-renderer');
  1310.                     let m1 = nodeParent(m2);
  1311.                     setupStyle(m1, m2);
  1312.                     setupMutObserver(m2);
  1313.                     return this.attached66();
  1314.                 }
  1315.  
  1316.                 mclp.detached66 = mclp.detached;
  1317.                 mclp.detached = function () {
  1318.                     setupMutObserver();
  1319.                     return this.detached66();
  1320.                 }
  1321.  
  1322.                 mclp.canScrollToBottomDLW_ = () => !(dateNow() - lastWheel < 80);
  1323.  
  1324.                 mclp.canScrollToBottom_ = function () {
  1325.                     return this.atBottom && this.allowScroll && this.canScrollToBottomDLW_();
  1326.                 }
  1327.  
  1328.                 if (ENABLE_NO_SMOOTH_TRANSFORM) {
  1329.  
  1330.  
  1331.                     mclp.isSmoothScrollEnabled_ = function () {
  1332.                         return false;
  1333.                     }
  1334.  
  1335.  
  1336.  
  1337.                     mclp.maybeResizeScrollContainer_ = function () {
  1338.                         //
  1339.                     }
  1340.  
  1341.                     mclp.refreshOffsetContainerHeight_ = function () {
  1342.                         //
  1343.                     }
  1344.  
  1345.                     mclp.smoothScroll_ = function () {
  1346.                         //
  1347.                     }
  1348.  
  1349.                     mclp.resetSmoothScroll_ = function () {
  1350.                         //
  1351.                     }
  1352.                 }
  1353.  
  1354.             } else {
  1355.                 console.warn(`proto.attached for yt-live-chat-item-list-renderer is unavailable.`)
  1356.             }
  1357.  
  1358.  
  1359.             let scrollCount = 0;
  1360.             document.addEventListener('scroll', (evt) => {
  1361.                 if (!evt || !evt.isTrusted) return;
  1362.                 // lastScroll = dateNow();
  1363.                 if (++scrollCount > 1e9) scrollCount = 9;
  1364.             }, { passive: true, capture: true }); // support contain => support passive
  1365.  
  1366.             let lastScrollCount = -1;
  1367.             document.addEventListener('wheel', (evt) => {
  1368.  
  1369.                 if (!evt || !evt.isTrusted) return;
  1370.                 if (lastScrollCount === scrollCount) return;
  1371.                 lastScrollCount = scrollCount;
  1372.                 lastWheel = dateNow();
  1373.  
  1374.             }, { passive: true, capture: true }); // support contain => support passive
  1375.  
  1376.  
  1377.             const fp = (renderer) => {
  1378.                 const cnt = renderer.inst || renderer;
  1379.                 const container = (cnt.$ || 0).container;
  1380.                 if (container) {
  1381.                     container.setAttribute = tickerContainerSetAttribute;
  1382.                 }
  1383.             };
  1384.             const tags = ["yt-live-chat-ticker-paid-message-item-renderer", "yt-live-chat-ticker-paid-sticker-item-renderer",
  1385.                 "yt-live-chat-ticker-renderer", "yt-live-chat-ticker-sponsor-item-renderer"];
  1386.             for (const tag of tags) {
  1387.                 const dummy = document.createElement(tag);
  1388.  
  1389.                 const cProto = getProto(dummy);
  1390.                 if (!cProto || !cProto.attached) {
  1391.                     console.warn(`proto.attached for ${tag} is unavailable.`)
  1392.                     continue;
  1393.                 }
  1394.  
  1395.                 const __updateTimeout__ = cProto.updateTimeout;
  1396.  
  1397.                 const canDoUpdateTimeoutReplacement = (() => {
  1398.  
  1399.                     if (dummy.countdownMs < 1 && dummy.lastCountdownTimeMs < 1 && dummy.countdownMs < 1 && dummy.countdownDurationMs < 1) {
  1400.                         return typeof dummy.setContainerWidth === 'function' && typeof dummy.slideDown === 'function';
  1401.                     }
  1402.                     return false;
  1403.  
  1404.                 })(dummy.inst || dummy) && ((__updateTimeout__ + "").indexOf("window.requestAnimationFrame(this.updateTimeout.bind(this))") > 0);
  1405.  
  1406.  
  1407.  
  1408.                 if (canDoUpdateTimeoutReplacement) {
  1409.  
  1410.                     const killTicker = (cnt) => {
  1411.                         if ("auto" === cnt.hostElement.style.width) cnt.setContainerWidth();
  1412.                         cnt.slideDown()
  1413.                     };
  1414.  
  1415.                     cProto.__ratio__ = null;
  1416.                     cProto._updateTimeout21_ = function (a) {
  1417.  
  1418.                         this.countdownMs -= (a - (this.lastCountdownTimeMs || 0));
  1419.  
  1420.                         let currentRatio = this.__ratio__;
  1421.                         let tdv = this.countdownMs / this.countdownDurationMs;
  1422.                         let nextRatio = Math.round(tdv * 500) / 500; // might generate 0.143000000001
  1423.  
  1424.                         const validCountDown = nextRatio > 0;
  1425.                         const isAttached = this.isAttached;
  1426.  
  1427.                         if (!validCountDown) {
  1428.  
  1429.                             this.lastCountdownTimeMs = null;
  1430.  
  1431.                             this.countdownMs = 0;
  1432.                             this.__ratio__ = null;
  1433.                             this.ratio = 0;
  1434.  
  1435.                             if (isAttached) Promise.resolve(this).then(killTicker);
  1436.  
  1437.                         } else if (!isAttached) {
  1438.  
  1439.                             this.lastCountdownTimeMs = null;
  1440.  
  1441.                         } else {
  1442.  
  1443.                             this.lastCountdownTimeMs = a;
  1444.  
  1445.                             const ratioDiff = currentRatio - nextRatio;  // 0.144 - 0.142 = 0.002
  1446.                             if (ratioDiff < 0.001 && ratioDiff > -1e-6) {
  1447.                                 // ratioDiff = 0
  1448.  
  1449.                             } else {
  1450.                                 // ratioDiff = 0.002 / 0.004 ....
  1451.                                 // OR ratioDiff < 0
  1452.  
  1453.                                 this.__ratio__ = nextRatio;
  1454.  
  1455.                                 this.ratio = nextRatio;
  1456.                             }
  1457.  
  1458.                             return true;
  1459.                         }
  1460.  
  1461.                     };
  1462.  
  1463.                     cProto._updateTimeout21_ = function (a) {
  1464.                         this.countdownMs = Math.max(0, this.countdownMs - (a - (this.lastCountdownTimeMs || 0)));
  1465.                         this.ratio = this.countdownMs / this.countdownDurationMs;
  1466.                         if (this.isAttached && this.countdownMs) {
  1467.                             this.lastCountdownTimeMs = a;
  1468.                             return true;
  1469.                         } else {
  1470.                             this.lastCountdownTimeMs = null;
  1471.                             if (this.isAttached) {
  1472.                                 ("auto" === this.hostElement.style.width && this.setContainerWidth(), this.slideDown())
  1473.                             }
  1474.                         }
  1475.                     }
  1476.  
  1477.  
  1478.                 }
  1479.  
  1480.                 cProto.attached77 = cProto.attached
  1481.  
  1482.                 cProto.attached = function () {
  1483.                     fp(this.hostElement || this);
  1484.                     return this.attached77();
  1485.                 }
  1486.  
  1487.                 for (const elm of document.getElementsByTagName(tag)) {
  1488.                     fp(elm);
  1489.                 }
  1490.  
  1491.  
  1492.             }
  1493.  
  1494.         };
  1495.  
  1496.  
  1497.         function onReady() {
  1498.             let tmObserver = new MutationObserver(() => {
  1499.  
  1500.                 let p = document.getElementById('items'); // fast
  1501.                 if (!p) return;
  1502.                 let q = document.querySelector('#item-offset.style-scope.yt-live-chat-item-list-renderer > #items.style-scope.yt-live-chat-item-list-renderer'); // check
  1503.  
  1504.                 if (q) {
  1505.                     tmObserver.disconnect();
  1506.                     tmObserver.takeRecords();
  1507.                     tmObserver = null;
  1508.                     Promise.resolve(q).then((q) => {
  1509.                         // confirm Promis.resolve() is resolveable
  1510.                         // execute main without direct blocking
  1511.                         main(q);
  1512.                     })
  1513.                 }
  1514.  
  1515.             });
  1516.  
  1517.             tmObserver.observe(document.body || document.documentElement, {
  1518.                 childList: true,
  1519.                 subtree: true
  1520.             });
  1521.  
  1522.         }
  1523.  
  1524.         Promise.resolve().then(() => {
  1525.  
  1526.             if (document.readyState !== 'loading') {
  1527.                 onReady();
  1528.             } else {
  1529.                 window.addEventListener("DOMContentLoaded", onReady, false);
  1530.             }
  1531.  
  1532.         });
  1533.  
  1534.     });
  1535.  
  1536. })({ IntersectionObserver });