☰

YouTube 超快聊天

让您的 YouTube 直播聊天即时滚动，不经过平滑转换 CSS。

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

  1. // ==UserScript==
  2. // @name                YouTube Super Fast Chat
  3. // @version             0.5.16
  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://gf.qytechs.cn/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         To make your YouTube Live Chat scroll instantly without smoothing transform CSS
  19. // @description:ja      YouTubeライブチャットをスムーズな変形CSSなしで瞬時にスクロールさせるために。
  20. // @description:zh-TW   讓您的 YouTube 直播聊天即時滾動，不經過平滑轉換 CSS。
  21. // @description:zh-CN   让您的 YouTube 直播聊天即时滚动，不经过平滑转换 CSS。
  22. //
  23. // ==/UserScript==
  24.  
  25. ((__CONTEXT__) => {
  26.  
  27.     // const ACTIVE_DEFERRED_APPEND = false; // somehow buggy
  28.  
  29.     // const ACTIVE_CONTENT_VISIBILITY = true;
  30.     // const ACTIVE_CONTAIN_SIZE = true;
  31.  
  32.     const addCss = () => document.head.appendChild(document.createElement('style')).textContent = `
  33.  
  34.  
  35.     @supports (contain:layout paint style) and (content-visibility:auto) and (contain-intrinsic-size:auto var(--wsr94)) {
  36.  
  37.       [wSr93="hidden"]:nth-last-child(n+4) {
  38.         --wsr93-content-visibility: auto;
  39.         contain-intrinsic-size: auto var(--wsr94);
  40.       }
  41.  
  42.     }
  43.  
  44.     @supports (contain:layout paint style) {
  45.  
  46.       [wSr93] {
  47.         --wsr93-contain: layout style;
  48.         contain: var(--wsr93-contain, unset) !important;
  49.         box-sizing: border-box !important;
  50.         content-visibility: var(--wsr93-content-visibility, visible);
  51.       }
  52.       [wSr93="hidden"] { /* initial->[wSr93]->[wSr93="visible"]->[wSr93="hidden"] => reliable rendered height */
  53.         --wsr93-contain: size layout style;
  54.         height: var(--wsr94);
  55.       }
  56.  
  57.  
  58.       /* ------------------------------------------------------------------------------------------------------------- */
  59.  
  60.       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 {
  61.         contain: layout style;
  62.       }
  63.  
  64.       body yt-live-chat-app {
  65.         contain: size layout paint style;
  66.         overflow: hidden;
  67.       }
  68.  
  69.       #items.style-scope.yt-live-chat-item-list-renderer {
  70.         contain: layout paint style;
  71.       }
  72.  
  73.       #item-offset.style-scope.yt-live-chat-item-list-renderer {
  74.         contain: style;
  75.       }
  76.  
  77.       #item-scroller.style-scope.yt-live-chat-item-list-renderer {
  78.         contain: size style;
  79.       }
  80.  
  81.       #contents.style-scope.yt-live-chat-item-list-renderer, #chat.style-scope.yt-live-chat-renderer, img.style-scope.yt-img-shadow[width][height] {
  82.         contain: size layout paint style;
  83.       }
  84.  
  85.       .style-scope.yt-live-chat-ticker-renderer[role="button"][aria-label], .style-scope.yt-live-chat-ticker-renderer[role="button"][aria-label] > #container {
  86.         contain: layout paint style;
  87.       }
  88.  
  89.       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 {
  90.         contain: layout style;
  91.       }
  92.  
  93.       tp-yt-paper-tooltip[style*="inset"][role="tooltip"] {
  94.         contain: layout paint style;
  95.       }
  96.  
  97.       /* ------------------------------------------------------------------------------------------------------------- */
  98.  
  99.     }
  100.  
  101.     @supports (color: var(--general)) {
  102.  
  103.         #item-offset.style-scope.yt-live-chat-item-list-renderer > #items.style-scope.yt-live-chat-item-list-renderer {
  104.             position: static !important;
  105.         }
  106.  
  107.         .ytp-contextmenu[class],
  108.         .toggle-button.tp-yt-paper-toggle-button[class],
  109.         .yt-spec-touch-feedback-shape__fill[class],
  110.         .fill.yt-interaction[class],
  111.         .ytp-videowall-still-info-content[class],
  112.         .ytp-suggestion-image[class] {
  113.           will-change: unset !important;
  114.         }
  115.  
  116.         yt-img-shadow[height][width] {
  117.           content-visibility: visible !important;
  118.         }
  119.  
  120.         yt-live-chat-item-list-renderer:not([allow-scroll]) #item-scroller.yt-live-chat-item-list-renderer {
  121.             overflow-y: scroll;
  122.             padding-right: 0;
  123.         }
  124.  
  125.  
  126.         /* optional */
  127.         #item-offset.style-scope.yt-live-chat-item-list-renderer {
  128.         height: auto !important;
  129.         min-height: unset !important;
  130.         }
  131.  
  132.         #items.style-scope.yt-live-chat-item-list-renderer {
  133.         transform: translateY(0px) !important;
  134.         }
  135.  
  136.         /* optional */
  137.         yt-icon[icon="down_arrow"] > *, yt-icon-button#show-more > * {
  138.         pointer-events: none !important;
  139.         }
  140.  
  141.         #continuations, #continuations * {
  142.             contain: strict;
  143.             position: fixed;
  144.             top: 2px;
  145.             height: 1px;
  146.             width: 2px;
  147.             height: 1px;
  148.             visibility: collapse;
  149.         }
  150.  
  151.         yt-live-chat-renderer[has-action-panel-renderer] #show-more.yt-live-chat-item-list-renderer{
  152.             top: 4px;
  153.             transition-property: top;
  154.             bottom: unset;
  155.         }
  156.  
  157.         yt-live-chat-renderer[has-action-panel-renderer] #show-more.yt-live-chat-item-list-renderer[disabled]{
  158.             top: -42px;
  159.         }
  160.  
  161.     }
  162.  
  163.     `;
  164.  
  165.     const { Promise, requestAnimationFrame, IntersectionObserver } = __CONTEXT__;
  166.  
  167.  
  168.     const isContainSupport = CSS.supports('contain', 'layout paint style');
  169.     if (!isContainSupport) {
  170.         console.warn("Your browser does not support css property 'contain'.\nPlease upgrade to the latest version.".trim());
  171.     }
  172.  
  173.     // const APPLY_delayAppendChild = false;
  174.  
  175.     // let activeDeferredAppendChild = false; // deprecated
  176.  
  177.     // let delayedAppendParentWS = new WeakSet();
  178.     // let delayedAppendOperations = [];
  179.     // let commonAppendParentStackSet = new Set();
  180.  
  181.     // let firstVisibleItemDetected = false; // deprecated
  182.  
  183.     const sp7 = Symbol();
  184.  
  185.  
  186.     let dt0 = Date.now() - 2000;
  187.     const dateNow = () => Date.now() - dt0;
  188.     // let lastScroll = 0;
  189.     // let lastLShow = 0;
  190.     let lastWheel = 0;
  191.  
  192.     const proxyHelperFn = (dummy) => ({
  193.  
  194.         get(target, prop) {
  195.             return (prop in dummy) ? dummy[prop] : prop === sp7 ? target : target[prop];
  196.         },
  197.         set(target, prop, value) {
  198.             if (!(prop in dummy)) {
  199.                 target[prop] = value;
  200.             }
  201.             return true;
  202.         },
  203.         has(target, prop) {
  204.             return (prop in target)
  205.         },
  206.         deleteProperty(target, prop) {
  207.             return true;
  208.         },
  209.         ownKeys(target) {
  210.             return Object.keys(target);
  211.         },
  212.         defineProperty(target, key, descriptor) {
  213.             return Object.defineProperty(target, key, descriptor);
  214.         },
  215.         getOwnPropertyDescriptor(target, key) {
  216.             return Object.getOwnPropertyDescriptor(target, key);
  217.         },
  218.  
  219.     });
  220.  
  221.     const tickerContainerSetAttribute = function (attrName, attrValue) { // ensure '14.30000001%'.toFixed(1)
  222.  
  223.         let yd = (this.__dataHost || (this.inst || 0).__dataHost).__data;
  224.  
  225.         if (arguments.length === 2 && attrName === 'style' && yd && attrValue) {
  226.  
  227.             // let v = yd.containerStyle.privateDoNotAccessOrElseSafeStyleWrappedValue_;
  228.             let v = `${attrValue}`;
  229.             // conside a ticker is 101px width
  230.             // 1% = 1.01px
  231.             // 0.2% = 0.202px
  232.  
  233.  
  234.             const ratio1 = (yd.ratio * 100);
  235.             if (ratio1 > -1) { // avoid NaN
  236.  
  237.                 // countdownDurationMs
  238.                 // 600000 - 0.2%    <1% = 6s>  <0.2% = 1.2s>
  239.                 // 300000 - 0.5%    <1% = 3s>  <0.5% = 1.5s>
  240.                 // 150000 - 1%    <1% = 1.5s>
  241.                 // 75000 - 2%    <1% =0.75s > <2% = 1.5s>
  242.                 // 30000 - 5%    <1% =0.3s > <5% = 1.5s>
  243.                 
  244.                 // 99px * 5% = 4.95px
  245.  
  246.                 // 15000 - 10%    <1% =0.15s > <10% = 1.5s>
  247.  
  248.  
  249.  
  250.  
  251.                 // 1% Duration 
  252.  
  253.                 let ratio2 = ratio1;
  254.  
  255.                 const ydd = yd.data;
  256.                 const d1 = ydd.durationSec;
  257.                 const d2 = ydd.fullDurationSec;
  258.  
  259.                 if(d1 === d2 && d1>1){
  260.  
  261.                     if(d1 > 400) ratio2 = Math.round(ratio2 * 5) / 5; // 0.2%
  262.                     else if(d1>200) ratio2 = Math.round(ratio2 * 2) / 2; // 0.5%
  263.                     else if(d1>100) ratio2 = Math.round(ratio2 * 1) / 1; // 1%
  264.                     else if(d1>50) ratio2 = Math.round(ratio2 * 0.5) / 0.5; // 2%
  265.                     else if(d1>25) ratio2 = Math.round(ratio2 * 0.2) / 0.2; // 5% (max => 99px * 5% = 4.95px)
  266.                     else ratio2 = Math.round(ratio2 * 0.2) / 0.2;
  267.                     
  268.                 }else {
  269.                     ratio2 = Math.round(ratio2 * 5) / 5; // 0.2% (min)
  270.                 }
  271.                 
  272.                 // ratio2 = Math.round(ratio2 * 5) / 5;
  273.                 ratio2 = ratio2.toFixed(1)
  274.                 v = v.replace(`${ratio1}%`, `${ratio2}%`).replace(`${ratio1}%`, `${ratio2}%`)
  275.  
  276.                 if (yd.__style_last__ === v) return;
  277.                 yd.__style_last__ = v;
  278.                 // do not consider any delay here.
  279.                 // it shall be inside the looping for all properties changes. all the css background ops are in the same microtask.
  280.  
  281.             }
  282.  
  283.             HTMLElement.prototype.setAttribute.call(this, attrName, v);
  284.  
  285.  
  286.         } else {
  287.             HTMLElement.prototype.setAttribute.apply(this, arguments);
  288.         }
  289.  
  290.     };
  291.  
  292.     const fxOperator = (proto, propertyName) => {
  293.         let propertyDescriptorGetter = null;
  294.         try {
  295.             propertyDescriptorGetter = Object.getOwnPropertyDescriptor(proto, propertyName).get;
  296.         } catch (e) { }
  297.         return typeof propertyDescriptorGetter === 'function' ? (e) => propertyDescriptorGetter.call(e) : (e) => e[propertyName];
  298.     };
  299.  
  300.     const nodeParent = fxOperator(Node.prototype, 'parentNode');
  301.     // const nFirstElem = fxOperator(HTMLElement.prototype, 'firstElementChild');
  302.     const nPrevElem = fxOperator(HTMLElement.prototype, 'previousElementSibling');
  303.     const nNextElem = fxOperator(HTMLElement.prototype, 'nextElementSibling');
  304.     const nLastElem = fxOperator(HTMLElement.prototype, 'lastElementChild');
  305.  
  306.  
  307.     /* globals WeakRef:false */
  308.  
  309.     /** @type {(o: Object | null) => WeakRef | null} */
  310.     const mWeakRef = typeof WeakRef === 'function' ? (o => o ? new WeakRef(o) : null) : (o => o || null); // typeof InvalidVar == 'undefined'
  311.  
  312.     /** @type {(wr: Object | null) => Object | null} */
  313.     const kRef = (wr => (wr && wr.deref) ? wr.deref() : wr);
  314.  
  315.     const watchUserCSS = () => {
  316.  
  317.         // if (!CSS.supports('contain-intrinsic-size', 'auto var(--wsr94)')) return;
  318.  
  319.         const getElemFromWR = (nr) => {
  320.             const n = kRef(nr);
  321.             if (n && n.isConnected) return n;
  322.             return null;
  323.         }
  324.  
  325.         const clearContentVisibilitySizing = () => {
  326.             Promise.resolve().then(() => {
  327.  
  328.                 let btnShowMoreWR = mWeakRef(document.querySelector('#show-more[disabled]'));
  329.  
  330.                 let lastVisibleItemWR = null;
  331.                 for (const elm of document.querySelectorAll('[wSr93]')) {
  332.                     if (elm.getAttribute('wSr93') === 'visible') lastVisibleItemWR = mWeakRef(elm);
  333.                     elm.setAttribute('wSr93', '');
  334.                     // custom CSS property --wsr94 not working when attribute wSr93 removed
  335.                 }
  336.                 requestAnimationFrame(() => {
  337.                     const btnShowMore = getElemFromWR(btnShowMoreWR); btnShowMoreWR = null;
  338.                     if (btnShowMore) btnShowMore.click();
  339.                     else {
  340.                         // would not work if switch it frequently
  341.                         const lastVisibleItem = getElemFromWR(lastVisibleItemWR); lastVisibleItemWR = null;
  342.                         if (lastVisibleItem) {
  343.  
  344.                             Promise.resolve()
  345.                                 .then(() => lastVisibleItem.scrollIntoView())
  346.                                 .then(() => lastVisibleItem.scrollIntoView(false))
  347.                                 .then(() => lastVisibleItem.scrollIntoView({ behavior: "instant", block: "end", inline: "nearest" }))
  348.                                 .catch(e => { }) // break the chain when method not callable
  349.  
  350.                         }
  351.                     }
  352.                 })
  353.  
  354.             })
  355.  
  356.         }
  357.  
  358.         const mutObserver = new MutationObserver((mutations) => {
  359.             for (const mutation of mutations) {
  360.                 if ((mutation.addedNodes || 0).length >= 1) {
  361.                     for (const addedNode of mutation.addedNodes) {
  362.                         if (addedNode.nodeName === 'STYLE') {
  363.                             clearContentVisibilitySizing();
  364.                             return;
  365.                         }
  366.                     }
  367.                 }
  368.                 if ((mutation.removedNodes || 0).length >= 1) {
  369.                     for (const removedNode of mutation.removedNodes) {
  370.                         if (removedNode.nodeName === 'STYLE') {
  371.                             clearContentVisibilitySizing();
  372.                             return;
  373.                         }
  374.                     }
  375.                 }
  376.             }
  377.         });
  378.  
  379.         mutObserver.observe(document.documentElement, {
  380.             childList: true,
  381.             subtree: false
  382.         })
  383.  
  384.         mutObserver.observe(document.head, {
  385.             childList: true,
  386.             subtree: false
  387.         })
  388.         mutObserver.observe(document.body, {
  389.             childList: true,
  390.             subtree: false
  391.         });
  392.  
  393.     }
  394.  
  395.     const setupStyle = (m1, m2) => {
  396.  
  397.         const dummy1v = {
  398.             transform: '',
  399.             height: '',
  400.             minHeight: '',
  401.             paddingBottom: '',
  402.             paddingTop: ''
  403.         };
  404.         for (const k of ['toString', 'getPropertyPriority', 'getPropertyValue', 'item', 'removeProperty', 'setProperty']) {
  405.             dummy1v[k] = ((k) => (function () { const style = this[sp7]; return style[k](...arguments); }))(k)
  406.         }
  407.  
  408.         const dummy1p = proxyHelperFn(dummy1v);
  409.         const sp1v = new Proxy(m1.style, dummy1p);
  410.         const sp2v = new Proxy(m2.style, dummy1p);
  411.         Object.defineProperty(m1, 'style', { get() { return sp1v }, set() { }, enumerable: true, configurable: true });
  412.         Object.defineProperty(m2, 'style', { get() { return sp2v }, set() { }, enumerable: true, configurable: true });
  413.         m1.removeAttribute("style");
  414.         m2.removeAttribute("style");
  415.  
  416.     }
  417.  
  418.  
  419.     class WillChangeController {
  420.         constructor(itemScroller, willChangeValue) {
  421.             this.element = itemScroller;
  422.             this.counter = 0;
  423.             this.active = false;
  424.             this.willChangeValue = willChangeValue;
  425.         }
  426.  
  427.         beforeOper() {
  428.             if (!this.active) {
  429.                 this.active = true;
  430.                 this.element.style.willChange = this.willChangeValue;
  431.             }
  432.             this.counter++;
  433.         }
  434.  
  435.         afterOper() {
  436.             const c = this.counter;
  437.             requestAnimationFrame(() => {
  438.                 if (c === this.counter) {
  439.                     this.active = false;
  440.                     this.element.style.willChange = '';
  441.                 }
  442.             })
  443.         }
  444.  
  445.         release() {
  446.             const element = this.element;
  447.             this.element = null;
  448.             this.counter = 1e16;
  449.             this.active = false;
  450.             try {
  451.                 element.style.willChange = '';
  452.             } catch (e) { }
  453.         }
  454.  
  455.     }
  456.  
  457.  
  458.     customYtElements.onRegistryReady(() => {
  459.  
  460.         let scrollWillChangeController = null;
  461.         let contensWillChangeController = null;
  462.  
  463.         // as it links to event handling, it has to be injected using immediateCallback
  464.         customYtElements.whenRegistered('yt-live-chat-item-list-renderer', (cProto) => {
  465.  
  466.             const mclp = cProto;
  467.             console.assert(typeof mclp.scrollToBottom_ === 'function')
  468.             console.assert(typeof mclp.scrollToBottom66_ !== 'function')
  469.             console.assert(typeof mclp.flushActiveItems_ === 'function')
  470.             console.assert(typeof mclp.flushActiveItems66_ !== 'function')
  471.  
  472.  
  473.             mclp.__intermediate_delay__ = null;
  474.  
  475.             mclp.scrollToBottom66_ = mclp.scrollToBottom_;
  476.             mclp.scrollToBottom_ = function () {
  477.                 const cnt = this;
  478.                 const itemScroller = cnt.itemScroller;
  479.                 if (scrollWillChangeController && scrollWillChangeController.element !== itemScroller) {
  480.                     scrollWillChangeController.release();
  481.                     scrollWillChangeController = null;
  482.                 }
  483.                 if (!scrollWillChangeController) scrollWillChangeController = new WillChangeController(itemScroller, 'scroll-position');
  484.                 const wcController = scrollWillChangeController;
  485.                 wcController.beforeOper();
  486.                 cnt.__intermediate_delay__ = new Promise(resolve => {
  487.                     Promise.resolve().then(() => {
  488.                         cnt.scrollToBottom66_();
  489.                     }).then(() => {
  490.                         wcController.afterOper();
  491.                         resolve();
  492.                     });
  493.                 });
  494.             }
  495.  
  496.             mclp.flushActiveItems66_ = mclp.flushActiveItems_;
  497.             let lastFlushActiveItemsCalled = 0;
  498.             mclp.flushActiveItems_ = function () {
  499.                 const cnt = this;
  500.  
  501.                 if (arguments.length !== 0) return cnt.flushActiveItems66_.apply(this, arguments);
  502.  
  503.                 if (cnt.activeItems_.length === 0) {
  504.                     cnt.__intermediate_delay__ = null;
  505.                     return;
  506.                 }
  507.  
  508.                 if (lastFlushActiveItemsCalled > 1e9) lastFlushActiveItemsCalled = 9;
  509.                 let tid = ++lastFlushActiveItemsCalled;
  510.  
  511.                 const items = (cnt.$ || 0).items;
  512.                 if (contensWillChangeController && contensWillChangeController.element !== items) {
  513.                     contensWillChangeController.release();
  514.                     contensWillChangeController = null;
  515.                 }
  516.                 if (!contensWillChangeController) contensWillChangeController = new WillChangeController(items, 'contents');
  517.                 const wcController = contensWillChangeController;
  518.  
  519.                 // ignore previous __intermediate_delay__ and create a new one
  520.                 cnt.__intermediate_delay__ = new Promise(resolve => {
  521.                     if (tid !== lastFlushActiveItemsCalled) {
  522.                         resolve();
  523.                         return;
  524.                     }
  525.                     if (cnt.activeItems_.length === 0) {
  526.                         resolve();
  527.                     } else {
  528.                         if (cnt.canScrollToBottom_()) {
  529.                             wcController.beforeOper();
  530.                             new Promise(requestAnimationFrame).then(() => {
  531.                                 if (tid === lastFlushActiveItemsCalled) {
  532.                                     const len1 = cnt.activeItems_.length;
  533.                                     cnt.flushActiveItems66_();
  534.                                     const len2 = cnt.activeItems_.length;
  535.                                     return len1 !== len2;
  536.                                 }
  537.                             }).then(bAsync => {
  538.                                 if (bAsync) {
  539.                                     cnt.async(() => {
  540.                                         wcController.afterOper();
  541.                                     });
  542.                                 } else {
  543.                                     wcController.afterOper();
  544.                                 }
  545.                                 resolve();
  546.                             })
  547.                         } else {
  548.                             Promise.resolve().then(() => {
  549.                                 if (tid === lastFlushActiveItemsCalled) {
  550.                                     cnt.flushActiveItems66_();
  551.                                 }
  552.                                 resolve();
  553.                             })
  554.                         }
  555.                     }
  556.                 });
  557.  
  558.             }
  559.  
  560.             mclp.async66 = mclp.async;
  561.             mclp.async = function () {
  562.                 // ensure the previous operation is done
  563.                 // .async is usually after the time consuming functions like flushActiveItems_ and scrollToBottom_
  564.  
  565.                 (this.__intermediate_delay__ || Promise.resolve()).then(() => {
  566.                     this.async66.apply(this, arguments);
  567.                 });
  568.  
  569.             }
  570.  
  571.         })
  572.  
  573.     });
  574.  
  575.     const getProto = (element) => {
  576.         let proto = null;
  577.         if (element) {
  578.             if (element.inst) proto = element.inst.constructor.prototype;
  579.             else proto = element.constructor.prototype;
  580.         }
  581.         return proto || null;
  582.     }
  583.  
  584.     let done = 0;
  585.     let main = async (q) => {
  586.  
  587.         if (done) return;
  588.  
  589.         if (!q) return;
  590.         let m1 = nodeParent(q);
  591.         let m2 = q;
  592.         if (!(m1 && m1.id === 'item-offset' && m2 && m2.id === 'items')) return;
  593.  
  594.         done = 1;
  595.  
  596.         Promise.resolve().then(watchUserCSS);
  597.  
  598.         addCss();
  599.  
  600.         setupStyle(m1, m2);
  601.  
  602.         let lcRendererWR = null;
  603.  
  604.         const lcRendererElm = () => {
  605.             let lcRenderer = kRef(lcRendererWR);
  606.             if (!lcRenderer || !lcRenderer.isConnected) {
  607.                 lcRenderer = document.querySelector('yt-live-chat-item-list-renderer.yt-live-chat-renderer');
  608.                 lcRendererWR = lcRenderer ? mWeakRef(lcRenderer) : null;
  609.             }
  610.             return lcRenderer
  611.         };
  612.  
  613.         let hasFirstShowMore = false;
  614.  
  615.         const visObserverFn = (entry) => {
  616.  
  617.             const target = entry.target;
  618.             if (!target) return;
  619.             let isVisible = entry.isIntersecting === true && entry.intersectionRatio > 0.5;
  620.             const h = entry.boundingClientRect.height;
  621.             if (h < 16) { // wrong: 8 (padding/margin); standard: 32; test: 16 or 20
  622.                 // e.g. under fullscreen. the element created but not rendered.
  623.                 target.setAttribute('wSr93', '');
  624.                 return;
  625.             }
  626.             if (isVisible) {
  627.                 target.style.setProperty('--wsr94', h + 'px');
  628.                 target.setAttribute('wSr93', 'visible');
  629.                 if (nNextElem(target) === null) {
  630.                     // firstVisibleItemDetected = true;
  631.                     /*
  632.                       if (dateNow() - lastScroll < 80) {
  633.                           lastLShow = 0;
  634.                           lastScroll = 0;
  635.                           Promise.resolve().then(clickShowMore);
  636.                       } else {
  637.                           lastLShow = dateNow();
  638.                       }
  639.                       */
  640.                     // lastLShow = dateNow();
  641.                 } else if (!hasFirstShowMore) { // should more than one item being visible
  642.                     // implement inside visObserver to ensure there is sufficient delay
  643.                     hasFirstShowMore = true;
  644.                     requestAnimationFrame(() => {
  645.                         // foreground page
  646.                         // activeDeferredAppendChild = true;
  647.                         // page visibly ready -> load the latest comments at initial loading
  648.                         const lcRenderer = lcRendererElm();
  649.                         if (lcRenderer) {
  650.                             (lcRenderer.inst || lcRenderer).scrollToBottom_();
  651.                         }
  652.                     });
  653.                 }
  654.             }
  655.             else if (target.getAttribute('wSr93') === 'visible') { // ignore target.getAttribute('wSr93') === '' to avoid wrong sizing
  656.  
  657.                 target.style.setProperty('--wsr94', h + 'px');
  658.                 target.setAttribute('wSr93', 'hidden');
  659.             } // note: might consider 0 < entry.intersectionRatio < 0.5 and target.getAttribute('wSr93') === '' <new last item>
  660.  
  661.         }
  662.  
  663.         const visObserver = new IntersectionObserver((entries) => {
  664.  
  665.             for (const entry of entries) {
  666.  
  667.                 Promise.resolve(entry).then(visObserverFn);
  668.  
  669.             }
  670.  
  671.         }, {
  672.             /*
  673.         root: items,
  674.         rootMargin: "0px",
  675.         threshold: 1.0,
  676.         */
  677.             // root: HTMLElement.prototype.closest.call(m2, '#item-scroller.yt-live-chat-item-list-renderer'), // nullable
  678.             rootMargin: "0px",
  679.             threshold: [0.05, 0.95],
  680.         });
  681.  
  682.         //m2.style.visibility='';
  683.  
  684.         const mutFn = (items) => {
  685.             for (let node = nLastElem(items); node !== null; node = nPrevElem(node)) {
  686.                 if (node.hasAttribute('wSr93')) break;
  687.                 node.setAttribute('wSr93', '');
  688.                 visObserver.observe(node);
  689.             }
  690.         }
  691.  
  692.         const mutObserver = new MutationObserver((mutations) => {
  693.             const items = (mutations[0] || 0).target;
  694.             if (!items) return;
  695.             mutFn(items);
  696.         });
  697.  
  698.         const setupMutObserver = (m2) => {
  699.             mutObserver.disconnect();
  700.             mutObserver.takeRecords();
  701.             if (m2) {
  702.                 mutObserver.observe(m2, {
  703.                     childList: true,
  704.                     subtree: false
  705.                 });
  706.                 mutFn(m2);
  707.             }
  708.         }
  709.  
  710.         setupMutObserver(m2);
  711.  
  712.         const mclp = getProto(document.querySelector('yt-live-chat-item-list-renderer'));
  713.         if (mclp && mclp.attached) {
  714.  
  715.             mclp.attached66 = mclp.attached;
  716.             mclp.attached = function () {
  717.                 let m2 = document.querySelector('#item-offset.style-scope.yt-live-chat-item-list-renderer > #items.style-scope.yt-live-chat-item-list-renderer');
  718.                 let m1 = nodeParent(m2);
  719.                 setupStyle(m1, m2);
  720.                 setupMutObserver(m2);
  721.                 return this.attached66();
  722.             }
  723.  
  724.             mclp.detached66 = mclp.detached;
  725.             mclp.detached = function () {
  726.                 setupMutObserver();
  727.                 return this.detached66();
  728.             }
  729.  
  730.             mclp.canScrollToBottom_ = function () {
  731.                 return this.atBottom && this.allowScroll && !(dateNow() - lastWheel < 80)
  732.             }
  733.  
  734.             mclp.isSmoothScrollEnabled_ = function () {
  735.                 return false;
  736.             }
  737.  
  738.         } else {
  739.             console.warn(`proto.attached for yt-live-chat-item-list-renderer is unavailable.`)
  740.         }
  741.  
  742.  
  743.         let scrollCount = 0;
  744.         document.addEventListener('scroll', (evt) => {
  745.             if (!evt || !evt.isTrusted) return;
  746.             // lastScroll = dateNow();
  747.             if (++scrollCount > 1e9) scrollCount = 9;
  748.         }, { passive: true, capture: true }) // support contain => support passive
  749.  
  750.         // document.addEventListener('scroll', (evt) => {
  751.  
  752.         //     if (!evt || !evt.isTrusted) return;
  753.         //     if (!firstVisibleItemDetected) return;
  754.         //     const isUserAction = dateNow() - lastWheel < 80; // continuous wheel -> continuous scroll -> continuous wheel -> continuous scroll
  755.         //     if (!isUserAction) return;
  756.         //     // lastScroll = dateNow();
  757.  
  758.         // }, { passive: true, capture: true }) // support contain => support passive
  759.  
  760.  
  761.         let lastScrollCount = -1;
  762.         document.addEventListener('wheel', (evt) => {
  763.  
  764.             if (!evt || !evt.isTrusted) return;
  765.             if (lastScrollCount === scrollCount) return;
  766.             lastScrollCount = scrollCount;
  767.             lastWheel = dateNow();
  768.  
  769.         }, { passive: true, capture: true }) // support contain => support passive
  770.  
  771.  
  772.         const fp = (renderer) => {
  773.             const cnt = renderer.inst || renderer;
  774.             const container = (cnt.$ || 0).container;
  775.             if (container) {
  776.                 container.setAttribute = tickerContainerSetAttribute;
  777.             }
  778.         }
  779.         const tags = ["yt-live-chat-ticker-paid-message-item-renderer", "yt-live-chat-ticker-paid-sticker-item-renderer",
  780.             "yt-live-chat-ticker-renderer", "yt-live-chat-ticker-sponsor-item-renderer"];
  781.         for (const tag of tags) {
  782.             const dummy = document.createElement(tag);
  783.  
  784.             const cProto = getProto(dummy);
  785.             if (!cProto || !cProto.attached) {
  786.                 console.warn(`proto.attached for ${tag} is unavailable.`)
  787.                 continue;
  788.             }
  789.  
  790.             const __updateTimeout__ = cProto.updateTimeout;
  791.  
  792.             const canDoUpdateTimeoutReplacement = (() => {
  793.  
  794.                 if (dummy.countdownMs < 1 && dummy.lastCountdownTimeMs < 1 && dummy.countdownMs < 1 && dummy.countdownDurationMs < 1) {
  795.                     return typeof dummy.setContainerWidth === 'function' && typeof dummy.slideDown === 'function';
  796.                 }
  797.                 return false;
  798.  
  799.             })(dummy.inst || dummy) && ((__updateTimeout__ + "").indexOf("window.requestAnimationFrame(this.updateTimeout.bind(this))") > 0);
  800.  
  801.  
  802.  
  803.             if (canDoUpdateTimeoutReplacement) {
  804.  
  805.                 const killTicker = (cnt) => {
  806.                     if ("auto" === cnt.hostElement.style.width) cnt.setContainerWidth();
  807.                     cnt.slideDown()
  808.                 };
  809.  
  810.                 cProto.__ratio__ = null;
  811.                 cProto._updateTimeout21_ = function (a) {
  812.  
  813.                     /*
  814.                     let pRatio = this.countdownMs / this.countdownDurationMs;
  815.                     this.countdownMs -= (a - (this.lastCountdownTimeMs || 0));
  816.                     let noMoreCountDown = this.countdownMs < 1e-6;
  817.                     let qRatio = this.countdownMs / this.countdownDurationMs;
  818.                     if(noMoreCountDown){
  819.                         this.countdownMs = 0;
  820.                         this.ratio = 0;
  821.                     } else if( pRatio - qRatio < 0.001 && qRatio < pRatio){
  822.  
  823.                     }else{
  824.                         this.ratio = qRatio;
  825.                     }
  826.                     */
  827.  
  828.                     this.countdownMs -= (a - (this.lastCountdownTimeMs || 0));
  829.  
  830.                     let currentRatio = this.__ratio__;
  831.                     let tdv = this.countdownMs / this.countdownDurationMs;
  832.                     let nextRatio = Math.round(tdv * 500) / 500; // might generate 0.143000000001
  833.  
  834.                     const validCountDown = nextRatio > 0;
  835.                     const isAttached = this.isAttached;
  836.  
  837.                     if (!validCountDown) {
  838.  
  839.                         this.lastCountdownTimeMs = null;
  840.  
  841.                         this.countdownMs = 0;
  842.                         this.__ratio__ = null;
  843.                         this.ratio = 0;
  844.  
  845.                         if (isAttached) Promise.resolve(this).then(killTicker);
  846.  
  847.                     } else if (!isAttached) {
  848.  
  849.                         this.lastCountdownTimeMs = null;
  850.  
  851.                     } else {
  852.  
  853.                         this.lastCountdownTimeMs = a;
  854.  
  855.                         const ratioDiff = currentRatio - nextRatio;  // 0.144 - 0.142 = 0.002
  856.                         if (ratioDiff < 0.001 && ratioDiff > -1e-6) {
  857.                             // ratioDiff = 0
  858.  
  859.                         } else {
  860.                             // ratioDiff = 0.002 / 0.004 ....
  861.                             // OR ratioDiff < 0
  862.  
  863.                             this.__ratio__ = nextRatio;
  864.  
  865.                             this.ratio = nextRatio;
  866.                         }
  867.  
  868.                         return true;
  869.                     }
  870.  
  871.                 };
  872.  
  873.                 cProto._updateTimeout21_ = function (a) {
  874.                     this.countdownMs = Math.max(0, this.countdownMs - (a - (this.lastCountdownTimeMs || 0)));
  875.                     this.ratio = this.countdownMs / this.countdownDurationMs;
  876.                     if (this.isAttached && this.countdownMs) {
  877.                         this.lastCountdownTimeMs = a;
  878.                         return true;
  879.                     } else {
  880.                         this.lastCountdownTimeMs = null;
  881.                         if (this.isAttached) {
  882.                             ("auto" === this.hostElement.style.width && this.setContainerWidth(), this.slideDown())
  883.                         }
  884.                     }
  885.                 }
  886.  
  887.  
  888.                 // temporarily removed; buggy for playback
  889.                 /*
  890.                   cProto.updateTimeout = async function (a) {
  891.   
  892.                       let ret = this._updateTimeout21_(a);
  893.                       while (ret) {
  894.                           let a = await new Promise(resolve => {
  895.                               this.rafId = requestAnimationFrame(resolve)
  896.                           }); // could be never resolve
  897.                           ret = this._updateTimeout21_(a);
  898.                       }
  899.   
  900.                   };
  901.                 */
  902.  
  903.  
  904.             }
  905.  
  906.             cProto.attached77 = cProto.attached
  907.  
  908.             cProto.attached = function () {
  909.                 fp(this.hostElement || this);
  910.                 return this.attached77();
  911.             }
  912.  
  913.             for (const elm of document.getElementsByTagName(tag)) {
  914.                 fp(elm);
  915.             }
  916.  
  917.  
  918.         }
  919.  
  920.     };
  921.  
  922.  
  923.     function onReady() {
  924.         let tmObserver = new MutationObserver(() => {
  925.  
  926.             let p = document.getElementById('items'); // fast
  927.             if (!p) return;
  928.             let q = document.querySelector('#item-offset.style-scope.yt-live-chat-item-list-renderer > #items.style-scope.yt-live-chat-item-list-renderer'); // check
  929.  
  930.             if (q) {
  931.                 tmObserver.disconnect();
  932.                 tmObserver.takeRecords();
  933.                 tmObserver = null;
  934.                 Promise.resolve(q).then((q) => {
  935.                     // confirm Promis.resolve() is resolveable
  936.                     // execute main without direct blocking
  937.                     main(q);
  938.                 })
  939.             }
  940.  
  941.         });
  942.  
  943.         tmObserver.observe(document.body || document.documentElement, {
  944.             childList: true,
  945.             subtree: true
  946.         });
  947.  
  948.     }
  949.  
  950.     Promise.resolve().then(() => {
  951.  
  952.         if (document.readyState !== 'loading') {
  953.             onReady();
  954.         } else {
  955.             window.addEventListener("DOMContentLoaded", onReady, false);
  956.         }
  957.  
  958.     });
  959.  
  960. })({ Promise, requestAnimationFrame, IntersectionObserver });

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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