YouTube 超快聊天

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

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

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