☰

YouTube 超快聊天

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

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

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