YouTube 超快聊天

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

当前为 2023-07-04 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name YouTube Super Fast Chat
  3. // @version 0.5.4
  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=1215125
  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*="i"] {
  53. --wsr93-contain: size layout style;
  54. height: var(--wsr94);
  55. }
  56.  
  57. /* optional */
  58. #item-offset.style-scope.yt-live-chat-item-list-renderer {
  59. height: auto !important;
  60. min-height: unset !important;
  61. }
  62.  
  63. #items.style-scope.yt-live-chat-item-list-renderer {
  64. transform: translateY(0px) !important;
  65. }
  66.  
  67. /* optional */
  68. yt-icon[icon="down_arrow"] > *, yt-icon-button#show-more > * {
  69. pointer-events: none !important;
  70. }
  71.  
  72. .ytp-contextmenu[class],
  73. .toggle-button.tp-yt-paper-toggle-button[class],
  74. .yt-spec-touch-feedback-shape__fill[class],
  75. .fill.yt-interaction[class],
  76. .ytp-videowall-still-info-content[class],
  77. .ytp-suggestion-image[class] {
  78. will-change: unset !important;
  79. }
  80.  
  81. yt-img-shadow[height][width] {
  82. content-visibility: visible !important;
  83. }
  84.  
  85. #item-offset.style-scope.yt-live-chat-item-list-renderer > #items.style-scope.yt-live-chat-item-list-renderer {
  86. position: static !important;
  87. }
  88.  
  89. /* ------------------------------------------------------------------------------------------------------------- */
  90. 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 {
  91. contain: layout style;
  92. }
  93.  
  94. /*
  95. yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip,
  96. yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer,
  97. yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer #image,
  98. yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer #image img {
  99. contain: layout style;
  100. display: inline-flex;
  101. vertical-align: middle;
  102. }
  103. */
  104. /*
  105. #items yt-live-chat-text-message-renderer {
  106. contain: layout style;
  107. }
  108. */
  109.  
  110. yt-live-chat-item-list-renderer:not([allow-scroll]) #item-scroller.yt-live-chat-item-list-renderer {
  111. overflow-y: scroll;
  112. padding-right: 0;
  113. }
  114.  
  115. body yt-live-chat-app {
  116. contain: size layout paint style;
  117. overflow: hidden;
  118. }
  119.  
  120. #items.style-scope.yt-live-chat-item-list-renderer {
  121. contain: layout paint style;
  122. }
  123.  
  124. #item-offset.style-scope.yt-live-chat-item-list-renderer {
  125. contain: style;
  126. }
  127.  
  128. #item-scroller.style-scope.yt-live-chat-item-list-renderer {
  129. contain: size style;
  130. }
  131.  
  132. #contents.style-scope.yt-live-chat-item-list-renderer, #chat.style-scope.yt-live-chat-renderer, img.style-scope.yt-img-shadow[width][height] {
  133. contain: size layout paint style;
  134. }
  135.  
  136. .style-scope.yt-live-chat-ticker-renderer[role="button"][aria-label], .style-scope.yt-live-chat-ticker-renderer[role="button"][aria-label] > #container {
  137. contain: layout paint style;
  138. }
  139.  
  140. 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 {
  141. contain: layout style;
  142. }
  143.  
  144. tp-yt-paper-tooltip[style*="inset"][role="tooltip"] {
  145. contain: layout paint style;
  146. }
  147.  
  148. /*
  149. #item-offset.style-scope.yt-live-chat-item-list-renderer {
  150. position: relative !important;
  151. height: auto !important;
  152. }
  153. */
  154.  
  155. /* ------------------------------------------------------------------------------------------------------------- */
  156.  
  157.  
  158. #items.style-scope.yt-live-chat-item-list-renderer {
  159. padding-top: var(--items-top-padding);
  160. }
  161.  
  162. #continuations, #continuations * {
  163. contain: strict;
  164. position: fixed;
  165. top: 2px;
  166. height: 1px;
  167. width: 2px;
  168. height: 1px;
  169. visibility: collapse;
  170. }
  171.  
  172. }
  173.  
  174. `;
  175.  
  176. const { Promise, requestAnimationFrame, IntersectionObserver } = __CONTEXT__;
  177.  
  178.  
  179. const isContainSupport = CSS.supports('contain', 'layout paint style');
  180. if (!isContainSupport) {
  181. console.error(`
  182. YouTube Light Chat Scroll: Your browser does not support 'contain'.
  183. Chrome >= 52; Edge >= 79; Safari >= 15.4, Firefox >= 69; Opera >= 39
  184. `.trim());
  185. return;
  186. }
  187.  
  188. // const APPLY_delayAppendChild = false;
  189.  
  190. let activeDeferredAppendChild = false; // deprecated
  191.  
  192. // let delayedAppendParentWS = new WeakSet();
  193. // let delayedAppendOperations = [];
  194. // let commonAppendParentStackSet = new Set();
  195.  
  196. let firstVisibleItemDetected = false; // deprecated
  197.  
  198. const sp7 = Symbol();
  199.  
  200.  
  201. let dt0 = Date.now() - 2000;
  202. const dateNow = () => Date.now() - dt0;
  203. // let lastScroll = 0;
  204. // let lastLShow = 0;
  205. let lastWheel = 0;
  206.  
  207. const proxyHelperFn = (dummy) => ({
  208.  
  209. get(target, prop) {
  210. return (prop in dummy) ? dummy[prop] : prop === sp7 ? target : target[prop];
  211. },
  212. set(target, prop, value) {
  213. if (!(prop in dummy)) {
  214. target[prop] = value;
  215. }
  216. return true;
  217.  
  218. },
  219. has(target, prop) {
  220. return (prop in target)
  221. },
  222. deleteProperty(target, prop) {
  223. return true;
  224. },
  225. ownKeys(target) {
  226. return Object.keys(target);
  227. },
  228. defineProperty(target, key, descriptor) {
  229. return Object.defineProperty(target, key, descriptor);
  230. },
  231. getOwnPropertyDescriptor(target, key) {
  232. return Object.getOwnPropertyDescriptor(target, key);
  233. },
  234.  
  235. });
  236.  
  237.  
  238. // const dummy3v = {
  239. // "background": "",
  240. // "backgroundAttachment": "",
  241. // "backgroundBlendMode": "",
  242. // "backgroundClip": "",
  243. // "backgroundColor": "",
  244. // "backgroundImage": "",
  245. // "backgroundOrigin": "",
  246. // "backgroundPosition": "",
  247. // "backgroundPositionX": "",
  248. // "backgroundPositionY": "",
  249. // "backgroundRepeat": "",
  250. // "backgroundRepeatX": "",
  251. // "backgroundRepeatY": "",
  252. // "backgroundSize": ""
  253. // };
  254. // for (const k of ['toString', 'getPropertyPriority', 'getPropertyValue', 'item', 'removeProperty', 'setProperty']) {
  255. // dummy3v[k] = ((k) => (function () { const style = this[sp7]; return style[k](...arguments); }))(k)
  256. // }
  257.  
  258. // const dummy3p = phFn(dummy3v);
  259.  
  260. const pt2DecimalFixer = (x) => Math.round(x * 5, 0) / 5;
  261.  
  262. const tickerContainerSetAttribute = function (attrName, attrValue) {
  263.  
  264. let yd = (this.__dataHost || 0).__data;
  265.  
  266. if (arguments.length === 2 && attrName === 'style' && yd && attrValue) {
  267.  
  268. // let v = yd.containerStyle.privateDoNotAccessOrElseSafeStyleWrappedValue_;
  269. let v = `${attrValue}`;
  270. // conside a ticker is 101px width
  271. // 1% = 1.01px
  272. // 0.2% = 0.202px
  273.  
  274.  
  275. const ratio1 = (yd.ratio * 100);
  276. if (ratio1 > -1) { // avoid NaN
  277.  
  278. const ratio2 = pt2DecimalFixer(ratio1);
  279. v = v.replace(`${ratio1}%`, `${ratio2}%`).replace(`${ratio1}%`, `${ratio2}%`)
  280.  
  281. if (yd.__style_last__ === v) return;
  282. yd.__style_last__ = v;
  283.  
  284. }
  285.  
  286. HTMLElement.prototype.setAttribute.call(this, attrName, v);
  287.  
  288.  
  289. } else {
  290. HTMLElement.prototype.setAttribute.apply(this, arguments);
  291. }
  292.  
  293. };
  294.  
  295. const fxOperator = (proto, propertyName) => {
  296. let propertyDescriptorGetter = null;
  297. try {
  298. propertyDescriptorGetter = Object.getOwnPropertyDescriptor(proto, propertyName).get;
  299. } catch (e) { }
  300. return typeof propertyDescriptorGetter === 'function' ? (e) => propertyDescriptorGetter.call(e) : (e) => e[propertyName];
  301. };
  302.  
  303. const nodeParent = fxOperator(Node.prototype, 'parentNode');
  304. // const nFirstElem = fxOperator(HTMLElement.prototype, 'firstElementChild');
  305. const nPrevElem = fxOperator(HTMLElement.prototype, 'previousElementSibling');
  306. const nNextElem = fxOperator(HTMLElement.prototype, 'nextElementSibling');
  307. const nLastElem = fxOperator(HTMLElement.prototype, 'lastElementChild');
  308.  
  309.  
  310. /* globals WeakRef:false */
  311.  
  312. /** @type {(o: Object | null) => WeakRef | null} */
  313. const mWeakRef = typeof WeakRef === 'function' ? (o => o ? new WeakRef(o) : null) : (o => o || null); // typeof InvalidVar == 'undefined'
  314.  
  315. /** @type {(wr: Object | null) => Object | null} */
  316. const kRef = (wr => (wr && wr.deref) ? wr.deref() : wr);
  317.  
  318. const watchUserCSS = () => {
  319.  
  320. // if (!CSS.supports('contain-intrinsic-size', 'auto var(--wsr94)')) return;
  321.  
  322. const getElemFromWR = (nr) => {
  323. const n = kRef(nr);
  324. if (n && n.isConnected) return n;
  325. return null;
  326. }
  327.  
  328. const clearContentVisibilitySizing = () => {
  329. Promise.resolve().then(() => {
  330.  
  331. let btnShowMoreWR = mWeakRef(document.querySelector('#show-more[disabled]'));
  332.  
  333. let lastVisibleItemWR = null;
  334. for (const elm of document.querySelectorAll('[wSr93]')) {
  335. if (elm.getAttribute('wSr93') === 'visible') lastVisibleItemWR = mWeakRef(elm);
  336. elm.setAttribute('wSr93', '');
  337. // custom CSS property --wsr94 not working when attribute wSr93 removed
  338. }
  339. requestAnimationFrame(() => {
  340. const btnShowMore = getElemFromWR(btnShowMoreWR); btnShowMoreWR = null;
  341. if (btnShowMore) btnShowMore.click();
  342. else {
  343. // would not work if switch it frequently
  344. const lastVisibleItem = getElemFromWR(lastVisibleItemWR); lastVisibleItemWR = null;
  345. if (lastVisibleItem) {
  346.  
  347. Promise.resolve()
  348. .then(() => lastVisibleItem.scrollIntoView())
  349. .then(() => lastVisibleItem.scrollIntoView(false))
  350. .then(() => lastVisibleItem.scrollIntoView({ behavior: "instant", block: "end", inline: "nearest" }))
  351. .catch(e => { }) // break the chain when method not callable
  352.  
  353. }
  354. }
  355. })
  356.  
  357. })
  358.  
  359. }
  360.  
  361. const mutObserver = new MutationObserver((mutations) => {
  362. for (const mutation of mutations) {
  363. if ((mutation.addedNodes || 0).length >= 1) {
  364. for (const addedNode of mutation.addedNodes) {
  365. if (addedNode.nodeName === 'STYLE') {
  366. clearContentVisibilitySizing();
  367. return;
  368. }
  369. }
  370. }
  371. if ((mutation.removedNodes || 0).length >= 1) {
  372. for (const removedNode of mutation.removedNodes) {
  373. if (removedNode.nodeName === 'STYLE') {
  374. clearContentVisibilitySizing();
  375. return;
  376. }
  377. }
  378. }
  379. }
  380. });
  381.  
  382. mutObserver.observe(document.documentElement, {
  383. childList: true,
  384. subtree: false
  385. })
  386.  
  387. mutObserver.observe(document.head, {
  388. childList: true,
  389. subtree: false
  390. })
  391. mutObserver.observe(document.body, {
  392. childList: true,
  393. subtree: false
  394. });
  395.  
  396. }
  397.  
  398. const setupStyle = (m1, m2) => {
  399.  
  400. const dummy1v = {
  401. transform: '',
  402. height: '',
  403. minHeight: '',
  404. paddingBottom: '',
  405. paddingTop: ''
  406. };
  407. for (const k of ['toString', 'getPropertyPriority', 'getPropertyValue', 'item', 'removeProperty', 'setProperty']) {
  408. dummy1v[k] = ((k) => (function () { const style = this[sp7]; return style[k](...arguments); }))(k)
  409. }
  410.  
  411. const dummy1p = proxyHelperFn(dummy1v);
  412. const sp1v = new Proxy(m1.style, dummy1p);
  413. const sp2v = new Proxy(m2.style, dummy1p);
  414. Object.defineProperty(m1, 'style', { get() { return sp1v }, set() { }, enumerable: true, configurable: true });
  415. Object.defineProperty(m2, 'style', { get() { return sp2v }, set() { }, enumerable: true, configurable: true });
  416. m1.removeAttribute("style");
  417. m2.removeAttribute("style");
  418.  
  419. }
  420.  
  421.  
  422. class WillChangeController {
  423. constructor(itemScroller, willChangeValue) {
  424. this.element = itemScroller;
  425. this.counter = 0;
  426. this.active = false;
  427. this.willChangeValue = willChangeValue;
  428. }
  429.  
  430. beforeOper() {
  431. if (!this.active) {
  432. this.active = true;
  433. this.element.style.willChange = this.willChangeValue;
  434. }
  435. this.counter++;
  436. }
  437.  
  438. afterOper() {
  439. const c = this.counter;
  440. requestAnimationFrame(() => {
  441. if (c === this.counter) {
  442. this.active = false;
  443. this.element.style.willChange = '';
  444. }
  445. })
  446. }
  447.  
  448. release() {
  449. const element = this.element;
  450. this.element = null;
  451. this.counter = 1e16;
  452. this.active = false;
  453. try {
  454. element.style.willChange = '';
  455. } catch (e) { }
  456. }
  457.  
  458. }
  459.  
  460.  
  461. let scrollWillChangeController = null;
  462. let contensWillChangeController = null;
  463.  
  464. // as it links to event handling, it has to be injected using immediateCallback
  465. customYtElements.whenRegistered('yt-live-chat-item-list-renderer', (proto) => {
  466.  
  467. const mclp = proto;
  468. console.assert(typeof mclp.scrollToBottom_ === 'function')
  469. console.assert(typeof mclp.scrollToBottom66_ !== 'function')
  470. console.assert(typeof mclp.flushActiveItems_ === 'function')
  471. console.assert(typeof mclp.flushActiveItems66_ !== 'function')
  472.  
  473.  
  474. mclp.__intermediate_delay__ = null;
  475.  
  476. mclp.scrollToBottom66_ = mclp.scrollToBottom_;
  477. mclp.scrollToBottom_ = function () {
  478. const itemScroller = this.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 controller = scrollWillChangeController;
  485. controller.beforeOper();
  486.  
  487. this.__intermediate_delay__ = new Promise(resolve => {
  488. Promise.resolve().then(() => {
  489. this.scrollToBottom66_()
  490. resolve();
  491. }).then(() => {
  492. controller.afterOper();
  493. });
  494. });
  495. }
  496.  
  497. mclp.flushActiveItems66_ = mclp.flushActiveItems_;
  498. mclp.flushActiveItems_ = function () {
  499.  
  500. if (arguments.length !== 0) return this.flushActiveItems66_.apply(this, arguments);
  501.  
  502. if (this.activeItems_.length === 0) {
  503. this.__intermediate_delay__ = null;
  504. return;
  505. }
  506.  
  507. const items = this.$.items;
  508. if (contensWillChangeController && contensWillChangeController.element !== items) {
  509. contensWillChangeController.release();
  510. contensWillChangeController = null;
  511. }
  512. if (!contensWillChangeController) contensWillChangeController = new WillChangeController(items, 'contents');
  513. const controller = contensWillChangeController;
  514.  
  515. // ignore previous __intermediate_delay__ and create a new one
  516. this.__intermediate_delay__ = new Promise(resolve => {
  517. if (this.activeItems_.length === 0) {
  518. resolve();
  519. } else {
  520. if (this.canScrollToBottom_()) {
  521. controller.beforeOper();
  522. Promise.resolve().then(() => {
  523. this.flushActiveItems66_();
  524. resolve();
  525. }).then(() => {
  526. this.async(() => {
  527. controller.afterOper();
  528. resolve();
  529. });
  530. })
  531. } else {
  532. Promise.resolve().then(() => {
  533. this.flushActiveItems66_();
  534. resolve();
  535. })
  536. }
  537. }
  538. });
  539.  
  540. }
  541.  
  542. mclp.async66 = mclp.async;
  543. mclp.async = function () {
  544. // ensure the previous operation is done
  545. // .async is usually after the time consuming functions like flushActiveItems_ and scrollToBottom_
  546.  
  547. (this.__intermediate_delay__ || Promise.resolve()).then(() => {
  548. this.async66.apply(this, arguments);
  549. });
  550.  
  551. }
  552.  
  553. })
  554.  
  555. let done = 0;
  556. let main = async (q) => {
  557.  
  558. if (done) return;
  559.  
  560. if (!q) return;
  561. let m1 = nodeParent(q);
  562. let m2 = q;
  563. if (!(m1 && m1.id === 'item-offset' && m2 && m2.id === 'items')) return;
  564.  
  565. done = 1;
  566.  
  567. Promise.resolve().then(watchUserCSS);
  568.  
  569. addCss();
  570.  
  571. setupStyle(m1, m2);
  572.  
  573. let lcRendererWR = null;
  574.  
  575. const lcRendererElm = () => {
  576. let lcRenderer = kRef(lcRendererWR);
  577. if (!lcRenderer || !lcRenderer.isConnected) {
  578. lcRenderer = document.querySelector('yt-live-chat-item-list-renderer.yt-live-chat-renderer');
  579. lcRendererWR = mWeakRef(lcRenderer);
  580. }
  581. return lcRenderer
  582. };
  583.  
  584. let hasFirstShowMore = false;
  585.  
  586. const visObserver = new IntersectionObserver((entries) => {
  587.  
  588. for (const entry of entries) {
  589.  
  590. const target = entry.target;
  591. if (!target) continue;
  592. let isVisible = entry.isIntersecting === true && entry.intersectionRatio > 0.5;
  593. const h = entry.boundingClientRect.height;
  594. if (h < 16) { // wrong: 8 (padding/margin); standard: 32; test: 16 or 20
  595. // e.g. under fullscreen. the element created but not rendered.
  596. target.setAttribute('wSr93', '');
  597. continue;
  598. }
  599. if (isVisible) {
  600. target.style.setProperty('--wsr94', h + 'px');
  601. target.setAttribute('wSr93', 'visible');
  602. if (nNextElem(target) === null) {
  603. firstVisibleItemDetected = true;
  604. /*
  605. if (dateNow() - lastScroll < 80) {
  606. lastLShow = 0;
  607. lastScroll = 0;
  608. Promise.resolve().then(clickShowMore);
  609. } else {
  610. lastLShow = dateNow();
  611. }
  612. */
  613. // lastLShow = dateNow();
  614. } else if (!hasFirstShowMore) { // should more than one item being visible
  615. // implement inside visObserver to ensure there is sufficient delay
  616. hasFirstShowMore = true;
  617. requestAnimationFrame(() => {
  618. // foreground page
  619. activeDeferredAppendChild = true;
  620. // page visibly ready -> load the latest comments at initial loading
  621. const lcRenderer = lcRendererElm();
  622. lcRenderer.scrollToBottom_();
  623. });
  624. }
  625. }
  626. else if (target.getAttribute('wSr93') === 'visible') { // ignore target.getAttribute('wSr93') === '' to avoid wrong sizing
  627.  
  628. target.style.setProperty('--wsr94', h + 'px');
  629. target.setAttribute('wSr93', 'hidden');
  630. } // note: might consider 0 < entry.intersectionRatio < 0.5 and target.getAttribute('wSr93') === '' <new last item>
  631.  
  632. }
  633.  
  634. }, {
  635. /*
  636. root: items,
  637. rootMargin: "0px",
  638. threshold: 1.0,
  639. */
  640. // root: HTMLElement.prototype.closest.call(m2, '#item-scroller.yt-live-chat-item-list-renderer'), // nullable
  641. rootMargin: "0px",
  642. threshold: [0.05, 0.95],
  643. });
  644.  
  645. //m2.style.visibility='';
  646.  
  647. const mutFn = (items) => {
  648. for (let node = nLastElem(items); node !== null; node = nPrevElem(node)) {
  649. if (node.hasAttribute('wSr93')) break;
  650. node.setAttribute('wSr93', '');
  651. visObserver.observe(node);
  652. }
  653. }
  654.  
  655. const mutObserver = new MutationObserver((mutations) => {
  656. const items = (mutations[0] || 0).target;
  657. if (!items) return;
  658. mutFn(items);
  659. });
  660.  
  661. const setupMutObserver = (m2) => {
  662. mutObserver.disconnect();
  663. mutObserver.takeRecords();
  664. if (m2) {
  665. mutObserver.observe(m2, {
  666. childList: true,
  667. subtree: false
  668. });
  669. mutFn(m2);
  670. }
  671. }
  672.  
  673. setupMutObserver(m2);
  674.  
  675.  
  676. const mclp = (customElements.get('yt-live-chat-item-list-renderer') || 0).prototype
  677. if (mclp) {
  678.  
  679. mclp.attached66 = mclp.attached;
  680. mclp.attached = function () {
  681. let m2 = document.querySelector('#item-offset.style-scope.yt-live-chat-item-list-renderer > #items.style-scope.yt-live-chat-item-list-renderer');
  682. let m1 = nodeParent(m2);
  683. setupStyle(m1, m2);
  684. setupMutObserver(m2);
  685. return this.attached66();
  686. }
  687.  
  688. mclp.detached66 = mclp.detached;
  689. mclp.detached = function () {
  690. setupMutObserver();
  691. return this.detached66();
  692. }
  693.  
  694. mclp.canScrollToBottom_ = function () {
  695. return this.atBottom && this.allowScroll && !(dateNow() - lastWheel < 80)
  696. }
  697.  
  698. mclp.isSmoothScrollEnabled_ = function () {
  699. return false;
  700. }
  701. }
  702.  
  703.  
  704. let scrollCount = 0;
  705. document.addEventListener('scroll', (evt) => {
  706. if (!evt || !evt.isTrusted) return;
  707. // lastScroll = dateNow();
  708. if (++scrollCount > 1e9) scrollCount = 9;
  709. }, { passive: true, capture: true }) // support contain => support passive
  710.  
  711. // document.addEventListener('scroll', (evt) => {
  712.  
  713. // if (!evt || !evt.isTrusted) return;
  714. // if (!firstVisibleItemDetected) return;
  715. // const isUserAction = dateNow() - lastWheel < 80; // continuous wheel -> continuous scroll -> continuous wheel -> continuous scroll
  716. // if (!isUserAction) return;
  717. // // lastScroll = dateNow();
  718.  
  719. // }, { passive: true, capture: true }) // support contain => support passive
  720.  
  721.  
  722. let lastScrollCount = -1;
  723. document.addEventListener('wheel', (evt) => {
  724.  
  725. if (!evt || !evt.isTrusted) return;
  726. if (lastScrollCount === scrollCount) return;
  727. lastScrollCount = scrollCount;
  728. lastWheel = dateNow();
  729.  
  730. }, { passive: true, capture: true }) // support contain => support passive
  731.  
  732.  
  733. const fp = (renderer) => {
  734. const container = renderer.$.container;
  735. if (container) {
  736. container.setAttribute = tickerContainerSetAttribute;
  737. }
  738. }
  739. const tags = ["yt-live-chat-ticker-paid-message-item-renderer", "yt-live-chat-ticker-paid-sticker-item-renderer",
  740. "yt-live-chat-ticker-renderer", "yt-live-chat-ticker-sponsor-item-renderer"];
  741. for (const tag of tags) {
  742. const proto = customElements.get(tag).prototype;
  743. proto.attached77 = proto.attached
  744.  
  745. proto.attached = function () {
  746. fp(this);
  747. return this.attached77();
  748. }
  749.  
  750. for (const elm of document.getElementsByTagName(tag)) {
  751. fp(elm);
  752. }
  753. }
  754.  
  755. };
  756.  
  757.  
  758. function onReady() {
  759. let tmObserver = new MutationObserver(() => {
  760.  
  761. let p = document.getElementById('items'); // fast
  762. if (!p) return;
  763. let q = document.querySelector('#item-offset.style-scope.yt-live-chat-item-list-renderer > #items.style-scope.yt-live-chat-item-list-renderer'); // check
  764.  
  765. if (q) {
  766. tmObserver.disconnect();
  767. tmObserver.takeRecords();
  768. tmObserver = null;
  769. Promise.resolve(q).then((q) => {
  770. // confirm Promis.resolve() is resolveable
  771. // execute main without direct blocking
  772. main(q);
  773. })
  774. }
  775.  
  776. });
  777.  
  778. tmObserver.observe(document.body, {
  779. childList: true,
  780. subtree: true
  781. });
  782.  
  783. }
  784.  
  785. if (document.readyState != 'loading') {
  786. onReady();
  787. } else {
  788. window.addEventListener("DOMContentLoaded", onReady, false);
  789. }
  790.  
  791. })({ Promise, requestAnimationFrame, IntersectionObserver });