☰

Tabview Youtube

把Youtube Videos中的评论及视频列表制作成Tabs

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

  1. /*
  2.  
  3. MIT License
  4.  
  5. Copyright (c) 2021 cyfung1031
  6.  
  7. Permission is hereby granted, free of charge, to any person obtaining a copy
  8. of this software and associated documentation files (the "Software"), to deal
  9. in the Software without restriction, including without limitation the rights
  10. to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  11. copies of the Software, and to permit persons to whom the Software is
  12. furnished to do so, subject to the following conditions:
  13.  
  14. The above copyright notice and this permission notice shall be included in all
  15. copies or substantial portions of the Software.
  16.  
  17. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  18. IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  19. FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  20. AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  21. LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  22. OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  23. SOFTWARE.
  24.  
  25. */
  26. // ==UserScript==
  27. // @name                  Tabview Youtube
  28. // @name:en               Tabview Youtube
  29. // @description           Make comments and lists into tabs for YouTube Videos
  30. // @description:en        Make comments and lists into tabs for YouTube Videos
  31. // @name:ja               Tabview Youtube
  32. // @description:ja        YouTube動画のコメントやリストなどをタブに作成します
  33. // @name:zh-TW            Tabview Youtube
  34. // @name:zh-CN            Tabview Youtube
  35. // @description:zh-TW     把Youtube Videos中的評論及影片清單製作成Tabs
  36. // @description:zh-CN     把Youtube Videos中的评论及视频列表制作成Tabs
  37. // @name:ru               Tabview Youtube
  38. // @description:ru        Сделайте описание, комментарии и список видео в виде вкладок для видео на YouTube
  39.  
  40. // @version               4.3.0
  41. // @resource              contentCSS    https://raw.githubusercontent.com/cyfung1031/Tabview-Youtube/bd0ce711b4272eebc226c6cf6d02c7dc0a9c5205/css/style_content.css
  42. // @resource              injectionJS1  https://raw.githubusercontent.com/cyfung1031/Tabview-Youtube/bd0ce711b4272eebc226c6cf6d02c7dc0a9c5205/js/injection_script_1.js
  43.  
  44. // @namespace             http://tampermonkey.net/
  45. // @author                CY Fung
  46. // @license               MIT
  47. // @supportURL            https://github.com/cyfung1031/Tabview-Youtube
  48. // @run-at                document-start
  49. // @match                 https://www.youtube.com/*
  50. // @exclude               /^https?://\S+\.(txt|png|jpg|jpeg|gif|xml|svg|manifest|log|ini)[^\/]*$/
  51. // @icon                  https://github.com/cyfung1031/Tabview-Youtube/raw/main/images/icon128p.png
  52.  
  53. // @compatible            edge Edge [Blink] >= 79;                      Tampermonkey (Beta) / Violetmonkey
  54. // @compatible            chrome Chrome >= 54;                          Tampermonkey (Beta) / Violetmonkey
  55. // @compatible            firefox FireFox / Waterfox (Classic) >= 55;   Tampermonkey / Violetmonkey
  56. // @compatible            opera Opera >= 41;                            Tampermonkey (Beta) / Violetmonkey
  57. // @compatible            safari Safari >= 12.1
  58.  
  59. // @grant                 GM_getResourceText
  60. // @noframes
  61. // ==/UserScript==
  62.  
  63. /* jshint esversion:8 */
  64.  
  65. function main(){
  66.     // MIT License
  67.     // https://github.com/cyfung1031/Tabview-Youtube/raw/main/js/content.js
  68.  
  69.  
  70.  
  71.  
  72.  
  73.  
  74.  
  75.  
  76.  
  77.  
  78.  
  79.  
  80.  
  81.  
  82.  
  83.  
  84.  
  85. "use strict";
  86. // console.time("Tabview Youtube Init Script")
  87. -(function mainBody() {
  88.   'use strict';
  89.  
  90.   function inIframe() {
  91.     try {
  92.       return window.self !== window.top;
  93.     } catch (e) {
  94.       return true;
  95.     }
  96.   }
  97.  
  98.   if (inIframe()) return;
  99.  
  100.   //if (!$) return;
  101.  
  102.   /**
  103.    * SVG resources:
  104.    * <div>Icons made by <a href="https://www.flaticon.com/authors/smashicons" title="Smashicons">Smashicons</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
  105.    */
  106.  
  107.   const scriptVersionForExternal = '2022/12/04';
  108.  
  109.   const isMyScriptInChromeRuntime = () => typeof GM === 'undefined' && typeof ((((window || 0).chrome || 0).runtime || 0).getURL) === 'function'
  110.  
  111.   // https://yqnn.github.io/svg-path-editor/
  112. // https://vecta.io/nano
  113.  
  114.   const svgComments = `<path d="M80 27H12A12 12 90 0 0 0 39v42a12 12 90 0 0 12 12h12v20a2 2 90 0 0 3.4 2L47 93h33a12 
  115.   12 90 0 0 12-12V39a12 12 90 0 0-12-12zM20 47h26a2 2 90 1 1 0 4H20a2 2 90 1 1 0-4zm52 28H20a2 2 90 1 1 0-4h52a2 2 90 
  116.   1 1 0 4zm0-12H20a2 2 90 1 1 0-4h52a2 2 90 1 1 0 4zm36-58H40a12 12 90 0 0-12 12v6h52c9 0 16 7 16 16v42h0v4l7 7a2 2 90 
  117.   0 0 3-1V71h2a12 12 90 0 0 12-12V17a12 12 90 0 0-12-12z"/>`.trim();
  118.  
  119.   const svgVideos = `<path d="M89 10c0-4-3-7-7-7H7c-4 0-7 3-7 7v70c0 4 3 7 7 7h75c4 0 7-3 7-7V10zm-62 2h13v10H27V12zm-9 
  120.   66H9V68h9v10zm0-56H9V12h9v10zm22 56H27V68h13v10zm-3-25V36c0-2 2-3 4-2l12 8c2 1 2 4 0 5l-12 8c-2 1-4 0-4-2zm25 
  121.   25H49V68h13v10zm0-56H49V12h13v10zm18 56h-9V68h9v10zm0-56h-9V12h9v10z"/>`.trim();
  122.  
  123.   const svgInfo = `<path d="M30 0C13.3 0 0 13.3 0 30s13.3 30 30 30 30-13.3 30-30S46.7 0 30 0zm6.2 46.6c-1.5.5-2.6 
  124.   1-3.6 1.3a10.9 10.9 0 0 1-3.3.5c-1.7 0-3.3-.5-4.3-1.4a4.68 4.68 0 0 1-1.6-3.6c0-.4.2-1 .2-1.5a20.9 20.9 90 0 1 
  125.   .3-2l2-6.8c.1-.7.3-1.3.4-1.9a8.2 8.2 90 0 0 .3-1.6c0-.8-.3-1.4-.7-1.8s-1-.5-2-.5a4.53 4.53 0 0 0-1.6.3c-.5.2-1 
  126.   .2-1.3.4l.6-2.1c1.2-.5 2.4-1 3.5-1.3s2.3-.6 3.3-.6c1.9 0 3.3.6 4.3 1.3s1.5 2.1 1.5 3.5c0 .3 0 .9-.1 1.6a10.4 10.4 
  127.   90 0 1-.4 2.2l-1.9 6.7c-.2.5-.2 1.1-.4 1.8s-.2 1.3-.2 1.6c0 .9.2 1.6.6 1.9s1.1.5 2.1.5a6.1 6.1 90 0 0 1.5-.3 9 9 90 
  128.   0 0 1.4-.4l-.6 2.2zm-3.8-35.2a1 1 0 010 8.6 1 1 0 010-8.6z"/>`.trim();
  129.  
  130.   const svgPlayList = `<path d="M0 3h12v2H0zm0 4h12v2H0zm0 4h8v2H0zm16 0V7h-2v4h-4v2h4v4h2v-4h4v-2z"/>`.trim();
  131.  
  132.   const svgDiag1 = `<svg stroke="currentColor" fill="none"><path d="M8 2h2v2M7 5l3-3m-6 8H2V8m0 2l3-3"/></svg>`;
  133.   const svgDiag2 = `<svg stroke="currentColor" fill="none"><path d="M7 3v2h2M7 5l3-3M5 9V7H3m-1 3l3-3"/></svg>`;
  134.  
  135.   const REMOVE_DUPLICATE_INFO = true;
  136.   const MINIVIEW_BROWSER_ENABLE = true;
  137.   const DEBUG_LOG = false;
  138.  
  139.   
  140.   let _isPageFirstLoaded = true
  141.  
  142.   async function makeTytLock() {
  143.     let c = 8;
  144.     while (!document.documentElement) {
  145.       if(--c === 0) return
  146.       await new Promise(window.requestAnimationFrame)
  147.     }
  148.     if (_isPageFirstLoaded) document.documentElement.setAttribute('tyt-lock', '')
  149.   }
  150.   if (location.pathname === '/watch') makeTytLock()
  151.   /*
  152.  
  153.   youtube page
  154.  
  155.     = Init::browse
  156.       yt-page-data-fetched
  157.       data-changed...
  158.       yt-page-data-updated
  159.       yt-navigate-finish
  160.       data-changed...
  161.       yt-watch-comments-ready
  162.     
  163.     = browse -> watch
  164.       yt-player-updated
  165.       yt-navigate
  166.       yt-navigate-start
  167.       yt-page-type-changed
  168.       yt-player-updated
  169.       yt-page-data-fetched
  170.       yt-navigate-finish
  171.       data-changed...
  172.       yt-page-data-updated
  173.       data-changed...
  174.       yt-watch-comments-ready
  175.       data-changed...
  176.  
  177.     = watch -> watch
  178.     = click video on meta panel // https://www.youtube.com/watch?v=UY5bp5CNhak; https://www.youtube.com/watch?v=m0WtnU8NVTo
  179.       yt-navigate
  180.       yt-navigate-start
  181.       data-changed
  182.       yt-player-updated
  183.       yt-page-data-fetched
  184.       yt-navigate-finish
  185.       data-changed...
  186.       yt-page-data-updated
  187.       data-changed...
  188.       yt-watch-comments-ready
  189.       data-changed...
  190.  
  191.     = watch -> browse (miniview)
  192.       yt-navigate-cache
  193.       yt-page-data-fetched
  194.       yt-page-type-changed
  195.       yt-page-data-updated
  196.       yt-navigate-finish
  197.  
  198.     = browse (miniview)  -> watch (Restore)
  199.       yt-navigate-cache
  200.       yt-page-data-fetched
  201.       yt-navigate-finish
  202.       yt-page-type-changed
  203.       yt-page-data-updated
  204.       data-changed...
  205.       yt-watch-comments-ready
  206.  
  207.     = watch -> search (miniview)
  208.       yt-navigate
  209.       yt-navigate-start
  210.       data-changed
  211.       yt-page-data-fetched
  212.       yt-page-type-changed
  213.       data-changed
  214.       yt-page-data-updated
  215.       yt-navigate-finish
  216.       data-changed...
  217.  
  218.     = Init::search
  219.       yt-page-data-fetched
  220.       data-changed
  221.       yt-page-data-updated
  222.       yt-navigate-finish
  223.       data-changed...
  224.       yt-watch-comments-ready
  225.  
  226.     = Init::watch
  227.       yt-page-data-fetched
  228.       yt-navigate-finish
  229.       data-changed...
  230.       yt-page-data-updated
  231.       data-changed...
  232.       yt-watch-comments-ready
  233.       yt-player-updated
  234.       data-changed...
  235.  
  236.     = watch -> watch (history back)
  237.       yt-player-updated
  238.       yt-page-data-fetched
  239.       yt-navigate-finish
  240.       data-changed...
  241.       yt-page-data-updated
  242.       data-changed...
  243.       yt-watch-comments-ready
  244.  
  245.     = watch -> click video time // https://www.youtube.com/watch?v=UY5bp5CNhak; https://www.youtube.com/watch?v=m0WtnU8NVTo
  246.       yt-navigate
  247.  
  248.   */
  249.  
  250.  
  251.  
  252.   const LAYOUT_VAILD = 1;
  253.  
  254.   const LAYOUT_TWO_COLUMNS = 2;
  255.   const LAYOUT_THEATER = 4;
  256.   const LAYOUT_FULLSCREEN = 8;
  257.   const LAYOUT_CHATROOM = 16;
  258.   const LAYOUT_CHATROOM_COLLAPSED = 32;
  259.   const LAYOUT_TAB_EXPANDED = 64;
  260.   const LAYOUT_ENGAGEMENT_PANEL_EXPANDED = 128;
  261.   const LAYOUT_CHATROOM_EXPANDED = 256;
  262.   const LAYOUT_DONATION_SHELF_EXPANDED = 512;
  263.  
  264.   const nonCryptoRandStr_base = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  265.  
  266.   const nullFunc = function () { };
  267.  
  268.  
  269.   const iframeCSS = (() => {
  270.     
  271.     return `
  272.   body {
  273.       --tabview-msg-cursor: default;
  274.       --tabview-msg-pointer-events: none;
  275.       --tabview-img-pointer-events: auto;
  276.   }
  277.   
  278.   body.tabview-allow-pointer-events {
  279.       --tabview-msg-cursor: '-NULL-';
  280.       --tabview-msg-pointer-events: '-NULL-';
  281.       --tabview-img-pointer-events: '-NULL-';
  282.   }
  283.   
  284.   body #input-panel.yt-live-chat-renderer::after {
  285.       background: transparent;
  286.   }
  287.   
  288.   .style-scope.yt-live-chat-item-list-renderer {
  289.       box-sizing: border-box;
  290.   }
  291.   
  292.   yt-live-chat-text-message-renderer:nth-last-child(-n+30):hover #menu.yt-live-chat-text-message-renderer {
  293.       transition-delay: 87ms;
  294.   }
  295.   
  296.   yt-live-chat-text-message-renderer #menu.yt-live-chat-text-message-renderer {
  297.       transition-delay: 1ms;
  298.   }
  299.   
  300.   #item.style-scope.yt-live-chat-item-list-renderer,
  301.   #item-scroller.style-scope.yt-live-chat-item-list-renderer {
  302.       transition-delay: 42ms;
  303.   }
  304.   
  305.   yt-live-chat-item-list-renderer img[alt] {
  306.       pointer-events: auto;
  307.   }
  308.   
  309.   body yt-live-chat-item-list-renderer img[alt]~tp-yt-paper-tooltip,
  310.   body yt-live-chat-item-list-renderer #image~tp-yt-paper-tooltip {
  311.       --paper-tooltip-delay-in: 120ms !important;
  312.       white-space: nowrap;
  313.   }
  314.   
  315.   #items.style-scope.yt-live-chat-item-list-renderer>yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer {
  316.       --tabview-chat-message-display: block;
  317.       --tabview-chat-message-mt: 2px;
  318.       --tabview-chat-message-mb: 4px;
  319.   }
  320.   
  321.   #message.yt-live-chat-text-message-renderer {
  322.       display: var(--tabview-chat-message-display);
  323.       margin-top: var(--tabview-chat-message-mt);
  324.       margin-bottom: var(--tabview-chat-message-mb);
  325.   }
  326.   
  327.   [collapsed] #message.yt-live-chat-text-message-renderer {
  328.       --tabview-chat-message-display: 'VOID';
  329.       --tabview-chat-message-mt: 'VOID';
  330.       --tabview-chat-message-mb: 'VOID';
  331.   }
  332.   
  333.   
  334.   @supports (contain: layout paint style) {
  335.  
  336.     /*
  337.     contain: layout paint style;
  338.     // #item-offset uses transform, it is buggy in Opera 93.0 with contain: layout & paint
  339.     */
  340.  
  341.     body yt-live-chat-app {
  342.         contain: size layout paint style;
  343.         /* content-visibility: auto; */
  344.         transform: translate3d(0, 0, 0);
  345.         overflow: hidden;
  346.     }
  347.  
  348.     #items.style-scope.yt-live-chat-item-list-renderer{
  349.         contain: layout paint style;
  350.     }
  351.  
  352.     #item-offset.style-scope.yt-live-chat-item-list-renderer {
  353.         contain: style;
  354.     }
  355.  
  356.     #item-scroller.style-scope.yt-live-chat-item-list-renderer {
  357.         contain: size style;
  358.     }
  359.  
  360.     #contents.style-scope.yt-live-chat-item-list-renderer,
  361.     #chat.style-scope.yt-live-chat-renderer,
  362.     img.style-scope.yt-img-shadow[width][height] {
  363.         contain: size layout paint style;
  364.     }
  365.  
  366.     .style-scope.yt-live-chat-ticker-renderer[role="button"][aria-label],
  367.     .style-scope.yt-live-chat-ticker-renderer[role="button"][aria-label]>#container {
  368.         contain: layout paint style;
  369.     }
  370.  
  371.  
  372.     yt-img-shadow#author-photo.style-scope {
  373.         contain: layout paint style;
  374.         /*
  375.         content-visibility: auto;
  376.         contain-intrinsic-size: 24px 24px;
  377.         */
  378.     }
  379.  
  380.     yt-live-chat-text-message-renderer:not([author-is-owner]) #author-photo.style-scope.yt-live-chat-text-message-renderer,
  381.     yt-live-chat-text-message-renderer:not([author-is-owner]) yt-live-chat-author-chip.style-scope.yt-live-chat-text-message-renderer {
  382.         pointer-events: var(--tabview-msg-pointer-events);
  383.     }
  384.  
  385.     yt-live-chat-text-message-renderer:not([author-is-owner]) span#message.style-scope.yt-live-chat-text-message-renderer>img.emoji.yt-formatted-string.style-scope.yt-live-chat-text-message-renderer {
  386.         cursor: var(--tabview-msg-cursor);
  387.     }
  388.  
  389.  
  390.     yt-live-chat-text-message-renderer:not([author-is-owner]) span#message.style-scope.yt-live-chat-text-message-renderer,
  391.     yt-live-chat-paid-message-renderer #message.yt-live-chat-paid-message-renderer,
  392.     yt-live-chat-text-message-renderer:not([author-is-owner]) #timestamp.style-scope.yt-live-chat-text-message-renderer,
  393.     yt-live-chat-membership-item-renderer #header-content.style-scope.yt-live-chat-membership-item-renderer,
  394.     yt-live-chat-membership-item-renderer #timestamp.style-scope.yt-live-chat-membership-item-renderer,
  395.     yt-live-chat-paid-message-renderer #header-content.yt-live-chat-paid-message-renderer,
  396.     yt-live-chat-paid-message-renderer #timestamp.style-scope.yt-live-chat-paid-message-renderer,
  397.     yt-live-chat-paid-sticker-renderer #content.style-scope.yt-live-chat-paid-sticker-renderer,
  398.     yt-live-chat-paid-sticker-renderer #timestamp.style-scope.yt-live-chat-paid-sticker-renderer {
  399.         cursor: var(--tabview-msg-cursor);
  400.         pointer-events: var(--tabview-msg-pointer-events);
  401.     }
  402.  
  403.     yt-live-chat-text-message-renderer.style-scope.yt-live-chat-item-list-renderer,
  404.     yt-live-chat-membership-item-renderer.style-scope.yt-live-chat-item-list-renderer,
  405.     yt-live-chat-paid-message-renderer.style-scope.yt-live-chat-item-list-renderer,
  406.     yt-live-chat-banner-manager.style-scope.yt-live-chat-item-list-renderer {
  407.         contain: layout style;
  408.     }
  409.  
  410.     tp-yt-paper-tooltip[style*="inset"][role="tooltip"] {
  411.         contain: layout paint style;
  412.     }
  413.  
  414.     /*
  415.     yt-live-chat-banner-renderer[collapsed] #contents, yt-live-chat-banner-renderer[collapsed] #contents * {
  416.  
  417.       content-visibility: visible !important;
  418.       contain: none !important;
  419.  
  420.     }
  421.     */
  422.  
  423.      
  424.     /* YouTube Native Bug - style="height:0px; translateY(0px);" */
  425.     yt-live-chat-banner-renderer[collapsed]:has(#contents[style*="0px;"][style*="translateY(0px);"]) #header.yt-live-chat-banner-renderer{
  426.       position:absolute;
  427.     }
  428.  
  429.     yt-live-chat-banner-renderer[collapsed]:has(#contents[style*="0px;"][style*="translateY(0px);"]) #contents.yt-live-chat-banner-renderer{
  430.       height:auto !important;
  431.       transform:initial !important;
  432.     }
  433.  
  434.   
  435.   }
  436.   
  437.   
  438.   #chat-messages tp-yt-iron-dropdown#dropdown.style-scope.tp-yt-paper-menu-button {
  439.       margin-right: var(--ytd-margin-12x);
  440.   }
  441.  
  442.  
  443.   tp-yt-iron-dropdown.yt-live-chat-app[vertical-align="top"] ytd-menu-popup-renderer.yt-live-chat-app {
  444.     max-height: 60vh !important; /* override style */
  445.   }
  446.  
  447.     `.trim();
  448.   });
  449.  
  450.  
  451.   let iframePointEventsAllow = false; // default to discard unnecessary mouse events for iframe
  452.  
  453.   let scriptEnable = false;
  454.  
  455.   let comments_loader = 0; // for comment count (might omit)
  456.  
  457.   let cmTime = 0;
  458.   const mTime = Date.now() - 152000000;
  459.  
  460.   //let lastScrollFetch = 0;
  461.   //let lastOffsetTop = 0;
  462.   let mtf_forceCheckLiveVideo_disable = 0;
  463.  
  464.   let tabsUiScript_setclick = false;
  465.   let pageFetchedData = null; // data object; for future use
  466.   let pageFetchedDataVideoId = null; // integer; for comment checking
  467.   let pageType = null; // pageType = 'watch', 'browse', 'playlist', ...
  468.   let chatroomDetails = null;
  469.   let switchTabActivity_lastTab = null
  470.  
  471.   let lstTab = null;
  472.  
  473.   let storeLastPanel = null; // WeakRef
  474.  
  475.  
  476.   let mtf_chatBlockQ = null; // for chat layout status change
  477.  
  478.   let enableHoverSliderDetection = false; // for hover slider
  479.  
  480.  
  481.   let firstLoadStatus = 2 | 8; // for page init
  482.  
  483.  
  484.   let m_last_count = ''; // for comment count
  485.  
  486.  
  487.  
  488.   let sVideosITO = null;
  489.  
  490.   /** @type {WeakRef | null} */
  491.   let ytdFlexy = null; // WeakRef
  492.  
  493.   const Q = {}
  494.   const settings = {
  495.     defaultTab: "#tab-videos"
  496.   };
  497.  
  498.   const STORE_VERSION = 1;
  499.   const STORE_key = 'userscript-tabview-settings';
  500.  
  501.   let fetchCounts = {
  502.     base: null,
  503.     new: null,
  504.     fetched: false,
  505.     count: null,
  506.   }
  507.  
  508.   let pageLang = 'en';
  509.   const langWords = {
  510.     'en': {
  511.       //'share':'Share',
  512.       'info': 'Info',
  513.       'videos': 'Videos',
  514.       'playlist': 'Playlist'
  515.     },
  516.     'jp': {
  517.       //'share':'共有',
  518.       'info': '情報',
  519.       'videos': '動画',
  520.       'playlist': '再生リスト'
  521.     },
  522.     'tw': {
  523.       //'share':'分享',
  524.       'info': '資訊',
  525.       'videos': '影片',
  526.       'playlist': '播放清單'
  527.     },
  528.     'cn': {
  529.       //'share':'分享',
  530.       'info': '资讯',
  531.       'videos': '视频',
  532.       'playlist': '播放列表'
  533.     },
  534.     'du': {
  535.       //'share':'Teilen',
  536.       'info': 'Info',
  537.       'videos': 'Videos',
  538.       'playlist': 'Playlist'
  539.     },
  540.     'fr': {
  541.       //'share':'Partager',
  542.       'info': 'Info',
  543.       'videos': 'Vidéos',
  544.       'playlist': 'Playlist'
  545.     },
  546.     'kr': {
  547.       //'share':'공유',
  548.       'info': '정보',
  549.       'videos': '동영상',
  550.       'playlist': '재생목록'
  551.     },
  552.     'ru': {
  553.       //'share':'Поделиться',
  554.       'info': 'Описание',
  555.       'videos': 'Видео',
  556.       'playlist': 'Плейлист'
  557.     }
  558.   };
  559.  
  560.   const getGMT = () => {
  561.     let m = new Date('2023-01-01T00:00:00Z');
  562.     return m.getDate() === 1 ? `+${m.getHours()}` : `-${24 - m.getHours()}`;
  563.   };
  564.  
  565.   function durationInfoTS(durationInfo) {
  566.     /**
  567.      * @type {{ hrs: number, mins: number, seconds: number }}
  568.      */
  569.     let _durationInfo = durationInfo
  570.     return _durationInfo
  571.   }
  572.  
  573.   function formatDateReqTS(req) {
  574.     /**
  575.      * @type {{ bd1: KDate | undefined, bd2: KDate | undefined, isSameDay: number | undefined, durationInfo: object | undefined, formatDates: object | undefined }}
  576.      */
  577.     let _req = req
  578.     return _req
  579.   }
  580.  
  581.   function durationLocaleEN(durationInfo) {
  582.  
  583.     const { hrs, mins, seconds } = durationInfoTS(durationInfo)
  584.     let ret = []
  585.     ret.push(`Duration:`)
  586.     if (hrs > 0) ret.push(`${hrs} ${hrs === 1 ? 'hour' : 'hours'}`)
  587.     if (mins > 0) ret.push(`${mins} ${mins === 1 ? 'minute' : 'minutes'}`)
  588.     if (seconds !== null) ret.push(`${seconds} ${seconds === 1 ? 'second' : 'seconds'}`)
  589.     return ret.join(' ')
  590.   }
  591.  
  592.   function formatDateResultEN(type, req) {
  593.  
  594.     const { bd1, bd2, durationInfo, formatDates } = formatDateReqTS(req)
  595.  
  596.     switch (type) {
  597.       case 0x200:
  598.         return [
  599.           `The livestream was in ${bd1.lokStringDate()} from ${bd1.lokStringTime()} to ${bd2.lokStringTime()}. [GMT${getGMT()}]`,
  600.           durationLocaleEN(durationInfo)
  601.         ].join('\n');
  602.       case 0x210:
  603.         return [
  604.           `The livestream was from ${bd1.lokStringDate()} ${bd1.lokStringTime()} to ${bd2.lokStringDate()} ${bd2.lokStringTime()}. [GMT${getGMT()}]`,
  605.           durationLocaleEN(durationInfo)
  606.         ].join('\n');
  607.       case 0x300:
  608.         return `The livestream started at ${bd1.lokStringTime()} [GMT${getGMT()}] in ${bd1.lokStringDate()}.`;
  609.       case 0x600:
  610.         return `The video was uploaded in ${formatDates.uploadDate} and published in ${formatDates.publishDate}.`;
  611.       case 0x610:
  612.         return `The video was uploaded in ${formatDates.uploadDate}.`;
  613.       case 0x700:
  614.         return `The video was published in ${formatDates.publishDate}.`;
  615.     }
  616.     return '';
  617.  
  618.   }
  619.  
  620.   const S_GENERAL_RENDERERS = ['YTD-TOGGLE-BUTTON-RENDERER', 'YTD-MENU-RENDERER']
  621.  
  622.   let globalHook_symbols = [];
  623.   let globalHook_hashs = {};
  624.  
  625.  
  626.   let singleColumnScrolling_dt = 0;
  627.  
  628.   let isStickyHeaderEnabled = false;
  629.  
  630.   let theater_mode_changed_dt = 0;
  631.   let detailsTriggerReset = false;
  632.  
  633.  
  634.   let isMakeHeaderFloatCalled = false;
  635.  
  636.   let _viTimeNum = 200;
  637.   let _updateTimeAccum = 0;
  638.  
  639.   /** @type {WeakMap<HTMLElement>} */
  640.   let loadedCommentsDT = new WeakMap();
  641.  
  642.  
  643.  
  644.   // for weakref variable management
  645.   const es = {
  646.     get ytdFlexy() {
  647.       /** @type { HTMLElement | null } */
  648.       let res = kRef(ytdFlexy);
  649.       return res;
  650.     },
  651.     get storeLastPanel() {
  652.       /** @type { HTMLElement | null } */
  653.       let res = kRef(storeLastPanel);
  654.       return res;
  655.     }
  656.   }
  657.  
  658.  
  659.   const _console = new Proxy(console, {
  660.     get(target, prop, receiver) {
  661.       if (!DEBUG_LOG && prop === 'log') {
  662.         return nullFunc
  663.       }
  664.       return Reflect.get(...arguments)
  665.     }
  666.   });
  667.  
  668.   let generalLog901 = !DEBUG_LOG ? 0 : (evt) => {
  669.     _console.log(901, evt.type)
  670.   }
  671.  
  672.   const isPassiveArgSupport = (typeof IntersectionObserver === 'function');
  673.   // https://caniuse.com/?search=observer
  674.   // https://caniuse.com/?search=addEventListener%20passive
  675.  
  676.   const bubblePassive = isPassiveArgSupport ? { capture: false, passive: true } : false;
  677.   const capturePassive = isPassiveArgSupport ? { capture: true, passive: true } : true;
  678.  
  679.  
  680.   /** @type { (str: string) => (HTMLElement | null) } */
  681.   const querySelectorFromAnchor = HTMLElement.prototype.querySelector; // nodeType==1 // since 2022/07/12
  682.  
  683.   /** @type { (str: string) => (NodeList) } */
  684.   const querySelectorAllFromAnchor = HTMLElement.prototype.querySelectorAll; // nodeType==1 // since 2022/07/12
  685.   const closestDOM = HTMLElement.prototype.closest;
  686.   //const elementRemove = HTMLElement.prototype.remove;
  687.   //const elementContains = HTMLElement.prototype.contains; // since 2022/07/12
  688.  
  689.  
  690.   /**
  691.    * 
  692.    * @param {number} f bit flag
  693.    * @param {number} w bit flag (with)
  694.    * @param {number} wo bit flag (without)
  695.    * @returns 
  696.    */
  697.   const fT = function (f, w, wo) {
  698.     return (f & (w | wo)) === w
  699.   }
  700.  
  701.   /* globals WeakRef:false */
  702.  
  703.   /** @type {(o: Object | null) => WeakRef | null} */
  704.   const mWeakRef = typeof WeakRef === 'function' ? (o => o ? new WeakRef(o) : null) : (o => o || null); // typeof InvalidVar == 'undefined'
  705.  
  706.   /** @type {(wr: Object | null) => Object | null} */
  707.   const kRef = (wr => (wr && wr.deref) ? wr.deref() : wr);
  708.  
  709.  
  710.   function setTimeout3(f) {
  711.     Promise.race([new Promise(r => requestAnimationFrame(r)), new Promise(r => setTimeout(r, 300))]).then(f);
  712.   }
  713.  
  714.   const timeline = {
  715.     // after initialized (initObserver)
  716.     cn1: {},
  717.     cn2: {},
  718.     setTimeout( /** @type {TimerHandler} */ f,/** @type {number} */ d) {
  719.       let cid = setTimeout(f, d)
  720.       timeline.cn1[cid] = true
  721.       return cid;
  722.     },
  723.     clearTimeout(/** @type {number} */ cid) {
  724.       timeline.cn1[cid] = false; return clearTimeout(cid)
  725.     },
  726.     setInterval(/** @type {TimerHandler} */ f,/** @type {number} */ d) {
  727.       let cid = setInterval(f, d);
  728.       timeline.cn2[cid] = true
  729.       return cid;
  730.     },
  731.     clearInterval(/** @type {number} */ cid) {
  732.       timeline.cn2[cid] = false; return clearInterval(cid)
  733.     },
  734.     reset() {
  735.       for (let cid in timeline.cn1) timeline.cn1[cid] && clearTimeout(cid)
  736.       for (let cid in timeline.cn2) timeline.cn2[cid] && clearInterval(cid)
  737.       timeline.cn1 = {}
  738.       timeline.cn2 = {}
  739.     }
  740.   }
  741.  
  742.  
  743.   // function prettyElm(/** @type {Element} */ elm) {
  744.   //   if (!elm || !elm.nodeName) return null;
  745.   //   const eId = elm.id || null;
  746.   //   const eClsName = elm.className || null;
  747.   //   return [elm.nodeName.toLowerCase(), typeof eId == 'string' ? "#" + eId : '', typeof eClsName == 'string' ? '.' + eClsName.replace(/\s+/g, '.') : ''].join('').trim();
  748.   // }
  749.  
  750.   // function extractTextContent(/** @type {Node} */ elm) {
  751.   //   return elm.textContent.replace(/\s+/g, '').replace(/[^\da-zA-Z\u4E00-\u9FFF\u00C0-\u00FF\u00C0-\u02AF\u1E00-\u1EFF\u0590-\u05FF\u0400-\u052F\u0E00-\u0E7F\u0600-\u06FF\u0750-\u077F\u1100-\u11FF\u3130-\u318F\uAC00-\uD7AF\u3040-\u30FF\u31F0-\u31FF]/g, '')
  752.   // }
  753.  
  754.   function addScript(/** @type {string} */ scriptText) {
  755.     const scriptNode = document.createElement('script');
  756.     scriptNode.type = 'text/javascript';
  757.     scriptNode.textContent = scriptText;
  758.     try {
  759.       document.documentElement.appendChild(scriptNode);
  760.     } catch (e) {
  761.       console.log('addScript Error', e)
  762.     }
  763.     return scriptNode;
  764.   }
  765.  
  766.   function addScriptByURL(/** @type {string} */ scriptURL) {
  767.     const scriptNode = document.createElement('script');
  768.     scriptNode.type = 'text/javascript';
  769.     scriptNode.src = scriptURL;
  770.     try {
  771.       document.documentElement.appendChild(scriptNode);
  772.     } catch (e) {
  773.       console.log('addScriptByURL Error', e)
  774.     }
  775.     return scriptNode;
  776.   }
  777.  
  778.   function addStyle(/** @type {string} */ styleText, /** @type {HTMLElement | Document} */ container) {
  779.     const styleNode = document.createElement('style');
  780.     //styleNode.type = 'text/css';
  781.     styleNode.textContent = styleText;
  782.     (container || document.documentElement).appendChild(styleNode);
  783.     return styleNode;
  784.   }
  785.  
  786.  
  787.  
  788.   /*
  789.  
  790.   yt-action yt-add-element-to-app yt-autonav-pause-blur yt-autonav-pause-focus
  791. yt-autonav-pause-guide-closed yt-autonav-pause-guide-opened yt-autonav-pause-player
  792. yt-autonav-pause-player-ended yt-autonav-pause-scroll yt-autoplay-on-changed
  793. yt-close-tou-form yt-consent-bump-display-changed yt-focus-searchbox
  794. yt-get-context-provider yt-guide-close yt-guide-hover yt-guide-toggle
  795. yt-history-load yt-history-pop yt-load-invalidation-continuation
  796. yt-load-next-continuation yt-load-reload-continuation yt-load-tou-form
  797. yt-masthead-height-changed yt-navigate yt-navigate-cache yt-navigate-error
  798. yt-navigate-finish yt-navigate-redirect yt-navigate-set-page-offset
  799. yt-navigate-start yt-next-continuation-data-updated yt-open-hotkey-dialog
  800. yt-open-tou-form-loading-state yt-page-data-fetched yt-page-data-updated
  801. yt-page-data-will-update yt-page-manager-navigate-start yt-page-navigate-start
  802. yt-page-type-changed yt-player-attached yt-player-detached yt-player-released
  803. yt-player-requested yt-player-updated yt-popup-canceled yt-popup-closed
  804. yt-popup-opened yt-preconnect-urls yt-register-action yt-report-form-closed
  805. yt-report-form-opened yt-request-panel-mode-change yt-retrieve-location
  806. yt-service-request-completed yt-service-request-error yt-service-request-sent
  807. yt-set-theater-mode-enabled yt-show-survey yt-subscription-changed
  808. yt-swatch-changed yt-theater-mode-allowed yt-unregister-action yt-update-title
  809. yt-update-unseen-notification-count yt-viewport-scanned yt-visibility-refresh
  810.  
  811. */
  812.  
  813.  
  814.   _console.log(38489)
  815.  
  816.   class Session {
  817.     constructor(initValue) {
  818.       this.sid = initValue;
  819.     }
  820.     session() {
  821.       let pageSession = this;
  822.       let s = pageSession.sid; // inaccessible from external
  823.       return {
  824.         get isValid() {
  825.           return s === pageSession.sid;
  826.         }
  827.       };
  828.     }
  829.     set(newValue) {
  830.       this.sid = newValue;
  831.     }
  832.     inc() {
  833.       this.sid++;
  834.     }
  835.   }
  836.  
  837.   class Deferred {
  838.     constructor() {
  839.       this.reset();
  840.     }
  841.     debounce(f) {
  842.       return Promise.race([this.promise]).then(f).catch(console.warn); // avoid promise.then.then.then ...
  843.     }
  844.     d() {
  845.       return Promise.race([this.promise]).catch(console.warn);
  846.     }
  847.     reset() {
  848.       this.resolved = false;
  849.       this.promise = new Promise((resolve, reject) => {
  850.         //this.reject = reject
  851.         this._resolve = resolve
  852.       })
  853.     }
  854.     resolve() {
  855.       if (this._resolve === null) return null;
  856.       if (this.resolved !== false) return false;
  857.       this.resolved = true;
  858.       this._resolve(...arguments);
  859.       return true;
  860.     }
  861.   }
  862.  
  863.   class Mutex {
  864.  
  865.     constructor() {
  866.       this.p = Promise.resolve()
  867.     }
  868.  
  869.     lockWith(f) {
  870.  
  871.       this.p = this.p.then(() => {
  872.         return new Promise(f)
  873.       }).catch(console.warn)
  874.     }
  875.  
  876.   }
  877.  
  878.  
  879.  
  880.   /* FireMonkey unable to extend MutationObserver correctly */
  881.   class AttributeMutationObserver extends MutationObserver {
  882.     constructor(flist) {
  883.       super((mutations, observer) => {
  884.         for (const mutation of mutations) {
  885.           if (mutation.type === 'attributes') {
  886.             this.checker(mutation.target, mutation.attributeName)
  887.           }
  888.         }
  889.       })
  890.       this.flist = flist;
  891.       this.res = {}
  892.     }
  893.  
  894.     takeRecords() {
  895.       super.takeRecords();
  896.     }
  897.     disconnect() {
  898.       this._target = null;
  899.       super.disconnect();
  900.     }
  901.     observe(/** @type {Node} */ target) {
  902.       if (this._target) return;
  903.       //console.log(123124, target)
  904.       this._target = mWeakRef(target);
  905.  
  906.       //console.log(123125, kRef(this._target))
  907.       const options = {
  908.         attributes: true,
  909.         attributeFilter: Object.keys(this.flist),
  910.         //attributeFilter: [ "status", "username" ],
  911.         attributeOldValue: true
  912.       }
  913.       super.observe(target, options)
  914.     }
  915.     checker(/** @type {Node} */ target,/** @type {string} */ attributeName) {
  916.       let nv = target.getAttribute(attributeName);
  917.       if (this.res[attributeName] !== nv) {
  918.         this.res[attributeName] = nv
  919.         let f = this.flist[attributeName];
  920.         if (f) f(attributeName, nv);
  921.  
  922.       }
  923.     }
  924.     check(delay = 0) {
  925.       setTimeout(() => {
  926.         let target = kRef(this._target)
  927.         if (target !== null) {
  928.           for (const key of Object.keys(this.flist)) {
  929.             this.checker(target, key)
  930.           }
  931.         } else {
  932.           console.log('target is null') //disconnected??
  933.         }
  934.         target = null;
  935.       }, delay)
  936.     }
  937.   }
  938.  
  939.  
  940.   class KDate extends Date {
  941.  
  942.     constructor(...args) {
  943.       super(...args)
  944.       this.dayBack = false
  945.     }
  946.  
  947.     browserSupported() {
  948.  
  949.     }
  950.  
  951.  
  952.     lokStringDate() {
  953.       const d = this
  954.  
  955.       let y = d.getFullYear()
  956.       let m = d.getMonth() + 1
  957.       let date = d.getDate()
  958.  
  959.       let sy = y < 1000 ? (`0000${y}`).slice(-4) : '' + y
  960.  
  961.       let sm = m < 10 ? '0' + m : '' + m
  962.       let sd = date < 10 ? '0' + date : '' + date
  963.  
  964.       return `${sy}.${sm}.${sd}`
  965.  
  966.     }
  967.  
  968.     lokStringTime() {
  969.       const d = this
  970.  
  971.       let h = d.getHours()
  972.       let m = d.getMinutes()
  973.  
  974.       const k = this.dayBack
  975.  
  976.       if (k) h += 24
  977.  
  978.       let sh = h < 10 ? '0' + h : '' + h
  979.       let sm = m < 10 ? '0' + m : '' + m
  980.  
  981.  
  982.       return `${sh}:${sm}`
  983.  
  984.     }
  985.  
  986.  
  987.  
  988.  
  989.   }
  990.  
  991.   console.assert('browserSupported' in (new KDate()),
  992.     { error: "0x87FF", errorMsg: "Your userscript manager is not supported. FireMonkey is not recommended." }
  993.   );
  994.  
  995.  
  996.  
  997.   let pageSession = new Session(0);
  998.   const tabsDeferred = new Deferred();
  999.   tabsDeferred.resolve();
  1000.  
  1001.   let layoutStatusMutex = new Mutex();
  1002.  
  1003.   let sliderMutex = new Mutex();
  1004.   const renderDeferred = new Deferred(); //pageRendered
  1005.   let pageRendered = 0;
  1006.   let renderIdentifier = 0;
  1007.  
  1008.   const scriptletDeferred = new Deferred();
  1009.  
  1010.  
  1011.   function scriptInjector(script_id, url_chrome, response_id) {
  1012.  
  1013.     let res = {
  1014.       script_id: script_id,
  1015.       inject: function () {
  1016.  
  1017.         let res = this, script_id = this.script_id;
  1018.  
  1019.         if (!document.querySelector(`script#${script_id}`)) {
  1020.           if (res.runtime_url) {
  1021.             addScriptByURL(res.runtime_url).id = script_id;
  1022.           } else {
  1023.             addScript(`${res.injection_script}`).id = script_id;
  1024.           }
  1025.         }
  1026.  
  1027.       }
  1028.     }
  1029.     res.script_id = script_id;
  1030.  
  1031.     if (isMyScriptInChromeRuntime()) {
  1032.       res.runtime_url = window.chrome.runtime.getURL(url_chrome)
  1033.     } else {
  1034.       res.injection_script = GM_getResourceText(response_id);
  1035.     }
  1036.  
  1037.     return res;
  1038.  
  1039.  
  1040.   }
  1041.  
  1042.   const script_inject_js1 = scriptInjector(
  1043.     'userscript-tabview-injection-1',
  1044.     'js/injection_script_1.js',
  1045.     "injectionJS1");
  1046.  
  1047.  
  1048.   function nonCryptoRandStr(/** @type {number} */ n) {
  1049.     const result = new Array(n);
  1050.     const baseStr = nonCryptoRandStr_base;
  1051.     const bLen = baseStr.length;
  1052.     for (let i = 0; i < n; i++) {
  1053.       let t = null
  1054.       do {
  1055.         t = baseStr.charAt(Math.floor(Math.random() * bLen));
  1056.       } while (i === 0 && 10 - t > 0)
  1057.       result[i] = t;
  1058.     }
  1059.     return result.join('');
  1060.   }
  1061.  
  1062.   const uidMAP = new Map();
  1063.  
  1064.   function uidGEN(s) {
  1065.     let uid = uidMAP.get(s);
  1066.     if (!uid) {
  1067.       const uidStore = ObserverRegister.uidStore;
  1068.       do {
  1069.         uid = nonCryptoRandStr(5);
  1070.       } while (uidStore[uid])
  1071.       uidMAP.set(s, uid);
  1072.     }
  1073.     return uid;
  1074.   }
  1075.  
  1076.   /**
  1077.    * Class definition
  1078.    * @property {string} propName - propriety description
  1079.    * ...
  1080.    */
  1081.   class ObserverRegister {
  1082.  
  1083.     constructor(/** @type {()=>MutationObserver | IntersectionObserver} */ observerCreator) {
  1084.       let uid = null;
  1085.       const uidStore = ObserverRegister.uidStore;
  1086.       do {
  1087.         uid = nonCryptoRandStr(5);
  1088.       } while (uidStore[uid])
  1089.       uidStore[uid] = true;
  1090.  
  1091.       /**
  1092.        * uid is the unique string for each observer
  1093.        * @type {string}
  1094.        * @public
  1095.        */
  1096.       this.uid = uid;
  1097.  
  1098.       /**
  1099.        * observerCreator is a function to create the observer
  1100.        * @type {Function}
  1101.        * @public
  1102.        */
  1103.       this.observerCreator = observerCreator
  1104.  
  1105.       /**
  1106.        * observer is the actual observer object
  1107.        * @type {MutationObserver | IntersectionObserver}
  1108.        * @public
  1109.        */
  1110.       this.observer = null;
  1111.       this.bindCount = 0;
  1112.     }
  1113.     bindElement(/** @type {HTMLElement} */ elm, ...args) {
  1114.       if (elm.hasAttribute(`o3r-${this.uid}`)) return false;
  1115.       elm.setAttribute(`o3r-${this.uid}`, '')
  1116.       this.bindCount++;
  1117.       if (this.observer === null) {
  1118.         this.observer = this.observerCreator();
  1119.       }
  1120.       this.observer.observe(elm, ...args)
  1121.       return true
  1122.     }
  1123.     clear(/** @type {boolean} */ flag) {
  1124.       if (this.observer !== null) {
  1125.         //const uidStore = ObserverRegister.uidStore;
  1126.         if (flag === true) {
  1127.           this.observer.takeRecords();
  1128.           this.observer.disconnect();
  1129.         }
  1130.         this.observer = null;
  1131.         this.bindCount = 0;
  1132.         for (const s of document.querySelectorAll(`[o3r-${this.uid}]`)) s.removeAttribute(`o3r-${this.uid}`)
  1133.         //uidStore[this.uid]=false;
  1134.         //this.uid = null;
  1135.       }
  1136.     }
  1137.   }
  1138.  
  1139.   /**
  1140.  * 'uidStore' is the static store of strings used.
  1141.  * @static
  1142.  */
  1143.   ObserverRegister.uidStore = {}; //backward compatible with FireFox 55.
  1144.  
  1145.  
  1146.   const mtoObservationDetails = new ObserverRegister(() => {
  1147.     return new IntersectionObserver(ito_details, {
  1148.       root: null,
  1149.       rootMargin: "0px"
  1150.     })
  1151.   });
  1152.  
  1153.  
  1154.   const mtoFlexyAttr = new ObserverRegister(() => {
  1155.     return new MutationObserver(mtf_attrFlexy)
  1156.   });
  1157.  
  1158.   const mtoVisibility_EngagementPanel = new ObserverRegister(() => {
  1159.     return new MutationObserver(FP.mtf_attrEngagementPanel)
  1160.   });
  1161.  
  1162.   const mtoVisibility_Playlist = new ObserverRegister(() => {
  1163.     return new AttributeMutationObserver({
  1164.       "hidden": FP.mtf_attrPlaylist
  1165.     })
  1166.   })
  1167.   const sa_playlist = mtoVisibility_Playlist.uid;
  1168.  
  1169.   const mtoVisibility_Comments = new ObserverRegister(() => {
  1170.     return new AttributeMutationObserver({
  1171.       "hidden": FP.mtf_attrComments
  1172.     })
  1173.   })
  1174.   const sa_comments = mtoVisibility_Comments.uid;
  1175.  
  1176.  
  1177.   const mtoVisibility_Chatroom = new ObserverRegister(() => {
  1178.     return new AttributeMutationObserver({
  1179.       "collapsed": FP.mtf_attrChatroom
  1180.     })
  1181.   })
  1182.   // const sa_chatroom = mtoVisibility_Chatroom.uid;
  1183.  
  1184.  
  1185.  
  1186.  
  1187.   function isDOMVisible(/** @type {HTMLElement} */ elem) {
  1188.     // jQuery version : https://github.com/jquery/jquery/blob/a684e6ba836f7c553968d7d026ed7941e1a612d8/src/css/hiddenVisibleSelectors.js
  1189.     return !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
  1190.   }
  1191.  
  1192.   function isNonEmptyString(s) {
  1193.     return typeof s == 'string' && s.length > 0;
  1194.   }
  1195.  
  1196.  
  1197.   async function nativeCall(/** @type {EventTarget} */ dom, /** @type {any[]} */ detail) {
  1198.     //console.log(1231)
  1199.     dom.dispatchEvent(new CustomEvent("userscript-call-dom", { detail: detail }))
  1200.     //console.log(1232)
  1201.   }
  1202.  
  1203.   async function nativeFunc(/** @type {EventTarget} */ dom, /** @type {string} */ property, /** @type {any} */ args) {
  1204.     dom.dispatchEvent(new CustomEvent("userscript-call-dom-func", { detail: { property, args } }))
  1205.   }
  1206.  
  1207.   // async function nativeValue(dom, property, args) {
  1208.   //   dom.dispatchEvent(new CustomEvent("userscript-call-dom-value", { detail: { property, args } }))
  1209.   // }
  1210.   // async function nativeFuncStacked(/** @type {string} */ selector, /** @type {string} */ property, /** @type {any} */ args){
  1211.   //   document.dispatchEvent(new CustomEvent("userscript-call-dom-func-stacked", { detail: { selector, property, args } }))
  1212.   // }
  1213.   // async function nativeValueStacked(selector, property, args){
  1214.   //   document.dispatchEvent(new CustomEvent("userscript-call-dom-value-stacked", { detail: { selector, property, args } }))
  1215.   // }
  1216.   // async function nativeConstStacked(selector, property, args){
  1217.   //   document.dispatchEvent(new CustomEvent("userscript-call-dom-const-stacked", { detail: { selector, property, args } }))
  1218.   // }
  1219.  
  1220.   async function dispatchWindowResize() {
  1221.     // for youtube to detect layout resize for adjusting Player tools
  1222.     return window.dispatchEvent(new Event('resize'));
  1223.   }
  1224.  
  1225.   async function dispatchCommentRowResize() {
  1226.  
  1227.     if (pageType !== "watch") return;
  1228.  
  1229.     const ytdFlexyElm = es.ytdFlexy;
  1230.     if (!ytdFlexyElm) return;
  1231.     if (ytdFlexyElm.getAttribute('tyt-tab') !== '#tab-comments') return;
  1232.  
  1233.     scriptletDeferred.debounce(() => {
  1234.       document.dispatchEvent(new CustomEvent('tabview-resize-comments-rows'));
  1235.     })
  1236.  
  1237.  
  1238.   }
  1239.  
  1240.   function enterPIP(video) {
  1241.     if (video && typeof video.requestPictureInPicture === 'function' && isVideoPlaying(video)) {
  1242.       if (document.pictureInPictureElement === null && typeof document.exitPictureInPicture === 'function') {
  1243.         video.requestPictureInPicture().then(res => {
  1244.  
  1245.         }).catch(console.warn)
  1246.       }
  1247.     }
  1248.   }
  1249.  
  1250.   function exitPIP() {
  1251.     if (document.pictureInPictureElement !== null && typeof document.exitPictureInPicture === 'function') {
  1252.       document.exitPictureInPicture().then(res => {
  1253.  
  1254.       }).catch(console.warn)
  1255.     }
  1256.   }
  1257.  
  1258.   function setToggleBtnTxt() {
  1259.  
  1260.     if (chatroomDetails) {
  1261.       _console.log(124234, 'c=== ')
  1262.  
  1263.       let chat = document.querySelector('ytd-live-chat-frame#chat');
  1264.       if (!chat) return;
  1265.       let txt = querySelectorFromAnchor.call(chat, 'span.yt-core-attributed-string[role="text"]');
  1266.       let c = (txt || 0).textContent;
  1267.  
  1268.       if (typeof c === 'string' && c.length > 2) {
  1269.         if (chat.hasAttribute('collapsed')) {
  1270.           _console.log(124234, 'collapsed show expand ', chatroomDetails.txt_expand)
  1271.           if (c !== chatroomDetails.txt_expand) {
  1272.             txt.textContent = chatroomDetails.txt_expand;
  1273.           }
  1274.         } else {
  1275.           _console.log(124234, 'not collapsed show collapse ', chatroomDetails.txt_collapse)
  1276.           if (c !== chatroomDetails.txt_collapse) {
  1277.             txt.textContent = chatroomDetails.txt_collapse;
  1278.           }
  1279.         }
  1280.       }
  1281.     }
  1282.   }
  1283.  
  1284.  
  1285.   function handlerTabExpanderClick() {
  1286.  
  1287.     async function b() {
  1288.  
  1289.       let h1 = document.documentElement.clientHeight;
  1290.       let h2 = (document.querySelector('#right-tabs') || 0).clientHeight;
  1291.  
  1292.       await Promise.resolve(0);
  1293.       if (h1 > 300 && h2 > 300) {
  1294.         let ratio = h2 / h1; // positive below 1.0
  1295.  
  1296.         return ratio;
  1297.       }
  1298.       return 0;
  1299.     }
  1300.  
  1301.     async function a() {
  1302.  
  1303.  
  1304.       let secondary = document.querySelector('#secondary.ytd-watch-flexy');
  1305.       if (secondary) {
  1306.  
  1307.  
  1308.         if (!secondary.classList.contains('tabview-hover-slider-enable')) {
  1309.  
  1310.           let secondaryInner = querySelectorFromAnchor.call(secondary, '#secondary-inner.ytd-watch-flexy');
  1311.  
  1312.           if (secondaryInner) {
  1313.  
  1314.             if (!secondary.classList.contains('tabview-hover-slider')) {
  1315.               // without hover
  1316.  
  1317.               //let rect = secondary.getBoundingClientRect();
  1318.               //let rectI = secondaryInner.getBoundingClientRect();
  1319.  
  1320.               secondaryInner.style.setProperty('--tabview-slider-right', `${getSecondaryInnerRight()}px`)
  1321.  
  1322.             }
  1323.  
  1324.             let ratio = await b();
  1325.             if (ratio > 0.0 && ratio <= 1.0) {
  1326.  
  1327.               secondaryInner.style.setProperty('--ytd-watch-flexy-sidebar-width-d', `${Math.round(100 * ratio * 10) / 10}vw`);
  1328.               secondary.classList.add('tabview-hover-slider');
  1329.               secondary.classList.add('tabview-hover-slider-enable');
  1330.  
  1331.               let video = document.querySelector('#player video');
  1332.               enterPIP(video);
  1333.  
  1334.             }
  1335.  
  1336.           }
  1337.  
  1338.  
  1339.         } else {
  1340.  
  1341.  
  1342.           secondary.dispatchEvent(new CustomEvent("tabview-hover-slider-restore"));
  1343.           //console.log(1994)
  1344.  
  1345.         }
  1346.  
  1347.         // no animation event triggered for hover -> enable
  1348.         dispatchCommentRowResize();
  1349.  
  1350.       }
  1351.  
  1352.  
  1353.  
  1354.     }
  1355.  
  1356.  
  1357.     a();
  1358.  
  1359.  
  1360.   }
  1361.  
  1362.   let global_columns_end_ito = null;
  1363.  
  1364.   function setupHoverSlider(secondary, columns) {
  1365.  
  1366.     if (!secondary || !columns) return;
  1367.     let attrName = `o4r-${uidGEN('tabview-hover-slider-restore')}`;
  1368.  
  1369.     if (secondary.hasAttribute(attrName)) return;
  1370.     secondary.setAttribute(attrName, '');
  1371.  
  1372.     let elmB = document.querySelector('tabview-view-secondary-xpander');
  1373.     if (!elmB) {
  1374.       elmB = document.createElement('tabview-view-secondary-xpander');
  1375.       prependTo(elmB, secondary);
  1376.     }
  1377.  
  1378.     let elmA = document.querySelector('tabview-view-columns-endpos');
  1379.     if (elmA) elmA.remove();
  1380.     elmA = document.createElement('tabview-view-columns-endpos');
  1381.  
  1382.     let itoA = new IntersectionObserver((entries) => {
  1383.       let t = null;
  1384.       let w = enableHoverSliderDetection
  1385.       for (const entry of entries) {
  1386.         if (entry.rootBounds === null) continue;
  1387.         let bcr = entry.boundingClientRect;
  1388.         let rb = entry.rootBounds;
  1389.         t = !entry.isIntersecting && (bcr.left > rb.right) && (rb.left <= 0);
  1390.         // if entries.length>1 (unlikely); take the last intersecting
  1391.         // supplement cond 1. ensure the col element is in the right side
  1392.         // supplement cond 2. ensure column is wide enough for overflow checking
  1393.         // it can also avoid if the layout change happened but attribute not yet changed during the intersection observation
  1394.       }
  1395.  
  1396.       let columns = document.querySelector('#columns.style-scope.ytd-watch-flexy');
  1397.       if (columns) columns.classList.toggle('tyt-column-overflow', t);
  1398.  
  1399.       if (w !== t && t !== null) {
  1400.         // t can be true when the layout enters single column mode
  1401.         enableHoverSliderDetection = t;
  1402.       }
  1403.       //console.log(entries, enableHoverSliderDetection, t)
  1404.     })
  1405.     columns.appendChild(elmA); // append to dom first before observe
  1406.     if ((wls.layoutStatus & LAYOUT_TWO_COLUMNS) === LAYOUT_TWO_COLUMNS) {
  1407.       //to trigger observation at the time layout being changed
  1408.       itoA.observe(elmA);
  1409.     }
  1410.     global_columns_end_ito = itoA;
  1411.  
  1412.  
  1413.     secondary.addEventListener('tabview-hover-slider-restore', function (evt) {
  1414.  
  1415.       let secondary = evt.target;
  1416.  
  1417.       if (!secondary.classList.contains('tabview-hover-slider-enable')) return;
  1418.  
  1419.       let secondaryInner = querySelectorFromAnchor.call(secondary, '#secondary-inner.ytd-watch-flexy')
  1420.  
  1421.       if (!secondaryInner) return;
  1422.  
  1423.       if (secondary.classList.contains('tabview-hover-slider-hover')) {
  1424.  
  1425.         Promise.resolve(0).then(() => {
  1426.           secondaryInner.style.removeProperty('--ytd-watch-flexy-sidebar-width-d');
  1427.         }).then(() => {
  1428.           secondary.classList.remove('tabview-hover-slider-enable')
  1429.           exitPIP();
  1430.         })
  1431.  
  1432.       } else {
  1433.  
  1434.         let secondary = evt.target;
  1435.         secondary.classList.remove('tabview-hover-slider')
  1436.         secondary.classList.remove('tabview-hover-slider-enable')
  1437.  
  1438.         secondaryInner.style.removeProperty('--ytd-watch-flexy-sidebar-width-d');
  1439.         secondaryInner.style.removeProperty('--tabview-slider-right')
  1440.  
  1441.         exitPIP();
  1442.  
  1443.       }
  1444.  
  1445.       setTimeout(() => {
  1446.         updateFloatingSlider()
  1447.       }, 30);
  1448.  
  1449.     }, false);
  1450.  
  1451.   }
  1452.  
  1453.   function addTabExpander(tabContent) {
  1454.  
  1455.     if (!tabContent) return null;
  1456.     let id = tabContent.id;
  1457.     if (!id || typeof id !== 'string') return null;
  1458.  
  1459.     if (querySelectorFromAnchor.call(tabContent, `#${id} > tabview-view-tab-expander`)) return false;
  1460.  
  1461.     let elm = document.createElement('tabview-view-tab-expander')
  1462.     prependTo(elm, tabContent);
  1463.     elm.innerHTML = `<div>${svgElm(16, 16, 12, 12, svgDiag1, 'svg-expand')}${svgElm(16, 16, 12, 12, svgDiag2, 'svg-collapse')}</div>`
  1464.     elm.addEventListener('click', handlerTabExpanderClick, false);
  1465.     return true;
  1466.  
  1467.   }
  1468.  
  1469.   function getColumnOverflowWidth() {
  1470.  
  1471.     let screenWidth = document.documentElement.getBoundingClientRect().width;
  1472.  
  1473.     let posElm1 = document.querySelector('#secondary.style-scope.ytd-watch-flexy + tabview-view-columns-endpos');
  1474.  
  1475.     if (posElm1) {
  1476.  
  1477.       let offset = posElm1.getBoundingClientRect().x - screenWidth;
  1478.       return offset
  1479.  
  1480.     }
  1481.     return null
  1482.   }
  1483.  
  1484.   function getSecondaryInnerRight() {
  1485.  
  1486.     let posElm1 = document.querySelector('#secondary.style-scope.ytd-watch-flexy + tabview-view-columns-endpos');
  1487.  
  1488.     let posElm2 = document.querySelector('#secondary.style-scope.ytd-watch-flexy > tabview-view-secondary-xpander');
  1489.  
  1490.     if (posElm1 && posElm2) {
  1491.  
  1492.       let offset = posElm1.getBoundingClientRect().x - posElm2.getBoundingClientRect().right;
  1493.       return offset
  1494.  
  1495.     }
  1496.     return null
  1497.  
  1498.   }
  1499.  
  1500.   const setFloatingSliderOffset = (secondaryInner) => {
  1501.  
  1502.  
  1503.     let posElm1 = document.querySelector('#secondary.style-scope.ytd-watch-flexy + tabview-view-columns-endpos');
  1504.  
  1505.     let posElm2 = document.querySelector('#secondary.style-scope.ytd-watch-flexy > tabview-view-secondary-xpander');
  1506.  
  1507.     if (posElm1 && posElm2) {
  1508.  
  1509.       let offset = getColumnOverflowWidth();
  1510.  
  1511.       let k = 1.0
  1512.       if (offset >= 125) {
  1513.         k = 1.0
  1514.       } else if (offset >= 75) {
  1515.         k = 1.0;
  1516.       } else if (offset >= 25) {
  1517.         k = 0.25;
  1518.       } else {
  1519.         k = 0.0
  1520.       }
  1521.       secondaryInner.style.setProperty('--tabview-slider-offset-k2', `${k}`);
  1522.       secondaryInner.style.setProperty('--tabview-slider-offset', `${offset}px`) // unnecessary 
  1523.  
  1524.       let oriWidth = posElm2.getBoundingClientRect().width;
  1525.       secondaryInner.style.setProperty('--tabview-slider-ow', `${oriWidth}px`)
  1526.  
  1527.       let s1 = 'var(--ytd-watch-flexy-sidebar-width-d)';
  1528.       // new width 
  1529.  
  1530.       let s2 = `var(--tabview-slider-ow)`;
  1531.       // ori width - youtube changing the code -> not reliable to use css prop.
  1532.  
  1533.       let s3 = `${offset}px`;
  1534.       // how many px wider than the page
  1535.  
  1536.       secondaryInner.style.setProperty('--tabview-slider-offset-actual', `calc(${s1} - ${s2} + ${s3})`)
  1537.  
  1538.     }
  1539.  
  1540.   }
  1541.  
  1542.   async function updateFloatingSlider_A(secondaryInner) {
  1543.  
  1544.     // [is-extra-wide-video_]
  1545.  
  1546.     await new Promise(r => setTimeout(r, 30)); // time allowed for dom changes and value change of enableHoverSliderDetection    
  1547.  
  1548.     let secondary = secondaryInner.parentNode;
  1549.     if (!secondary) return;
  1550.  
  1551.     if (secondary.classList.contains('tabview-hover-slider-enable')) {
  1552.       return;
  1553.     }
  1554.  
  1555.     if (!secondary.matches('#columns.ytd-watch-flexy #primary.ytd-watch-flexy ~ #secondary.ytd-watch-flexy')) {
  1556.       return;
  1557.     }
  1558.  
  1559.     const bool = enableHoverSliderDetection === true;
  1560.     const hasClassHover = secondary.classList.contains('tabview-hover-slider-hover') === true;
  1561.  
  1562.     if (bool || hasClassHover) {
  1563.     } else {
  1564.       return;
  1565.     }
  1566.  
  1567.     await Promise.resolve(0);
  1568.  
  1569.     secondary.classList.add('tabview-hover-final')
  1570.  
  1571.     if (hasClassHover && !bool) {
  1572.       secondaryInner.style.removeProperty('--tabview-slider-right')
  1573.       secondaryInner.style.removeProperty('--tabview-slider-offset')
  1574.     } else {
  1575.  
  1576.       if (!hasClassHover) {
  1577.         secondaryInner.style.setProperty('--tabview-slider-right', `${getSecondaryInnerRight()}px`)
  1578.       }
  1579.  
  1580.       setFloatingSliderOffset(secondaryInner);
  1581.     }
  1582.  
  1583.     if (bool ^ hasClassHover) {
  1584.       secondary.classList.toggle('tabview-hover-slider', bool)
  1585.       secondary.classList.toggle('tabview-hover-slider-hover', bool)
  1586.     }
  1587.  
  1588.     await Promise.resolve(0);
  1589.  
  1590.  
  1591.     setTimeout(() => {
  1592.       secondary.classList.remove('tabview-hover-final')
  1593.     }, 350)
  1594.  
  1595.  
  1596.   }
  1597.  
  1598.  
  1599.   function updateFloatingSlider() {
  1600.  
  1601.     let secondaryInner = document.querySelector('ytd-watch-flexy[flexy][is-two-columns_] #secondary-inner.ytd-watch-flexy')
  1602.  
  1603.     if (!secondaryInner) return;
  1604.  
  1605.     let secondary = secondaryInner.parentNode;
  1606.     if (!secondary) return;
  1607.  
  1608.     if (secondary.classList.contains('tabview-hover-slider-enable')) {
  1609.       return;
  1610.     }
  1611.  
  1612.     let t = document.documentElement.clientWidth; //integer
  1613.  
  1614.     sliderMutex.lockWith(unlock => {
  1615.  
  1616.       let v = document.documentElement.clientWidth; //integer
  1617.  
  1618.       if (t === v && secondaryInner.matches('body ytd-watch-flexy[flexy][is-two-columns_] #secondary-inner.ytd-watch-flexy')) {
  1619.  
  1620.         updateFloatingSlider_A(secondaryInner).then(unlock);
  1621.       } else {
  1622.         unlock();
  1623.       }
  1624.  
  1625.     })
  1626.  
  1627.   }
  1628.  
  1629.  
  1630.   function setToActiveTab(defaultTab) {
  1631.     if (isTheater() && isWideScreenWithTwoColumns()) return;
  1632.     const jElm = document.querySelector(`a[tyt-tab-content="${switchTabActivity_lastTab}"]:not(.tab-btn-hidden)`) ||
  1633.       document.querySelector(`a[tyt-tab-content="${(defaultTab || settings.defaultTab)}"]:not(.tab-btn-hidden)`) ||
  1634.       document.querySelector("a[tyt-tab-content]:not(.tab-btn-hidden)") ||
  1635.       null;
  1636.  
  1637.     switchTabActivity(jElm);
  1638.     return !!jElm;
  1639.   }
  1640.  
  1641.   let enableLivePopupCheck = false
  1642.  
  1643.   function layoutStatusChanged(/** @type {number} */ old_layoutStatus, /** @type {number} */ new_layoutStatus) {
  1644.  
  1645.  
  1646.     if ((new_layoutStatus & LAYOUT_TWO_COLUMNS) === 0) makeHeaderFloat();
  1647.  
  1648.     //if (old_layoutStatus === new_layoutStatus) return;
  1649.  
  1650.     const cssElm = es.ytdFlexy;
  1651.  
  1652.     if (!cssElm) return;
  1653.  
  1654.  
  1655.     const BF_TWOCOL_N_THEATER = LAYOUT_TWO_COLUMNS | LAYOUT_THEATER
  1656.  
  1657.     let new_isExpandedChat = !!(new_layoutStatus & LAYOUT_CHATROOM_EXPANDED)
  1658.     let new_isCollapsedChat = !!(new_layoutStatus & LAYOUT_CHATROOM_COLLAPSED) && !!(new_layoutStatus & LAYOUT_CHATROOM)
  1659.  
  1660.     let new_isTabExpanded = !!(new_layoutStatus & LAYOUT_TAB_EXPANDED);
  1661.     let new_isFullScreen = !!(new_layoutStatus & LAYOUT_FULLSCREEN);
  1662.     let new_isExpandedEPanel = !!(new_layoutStatus & LAYOUT_ENGAGEMENT_PANEL_EXPANDED);
  1663.     let new_isExpandedDonationShelf = !!(new_layoutStatus & LAYOUT_DONATION_SHELF_EXPANDED);
  1664.  
  1665.  
  1666.     function showTabOrChat() {
  1667.  
  1668.       layoutStatusMutex.lockWith(unlock => {
  1669.  
  1670.         if (lstTab.lastPanel == '#chatroom') {
  1671.  
  1672.           if (new_isTabExpanded) switchTabActivity(null)
  1673.           if (!new_isExpandedChat) ytBtnExpandChat();
  1674.  
  1675.         } else if (lstTab.lastPanel && lstTab.lastPanel.indexOf('#engagement-panel-') == 0) {
  1676.  
  1677.           if (new_isTabExpanded) switchTabActivity(null)
  1678.           if (!new_isExpandedEPanel) ytBtnOpenEngagementPanel(lstTab.lastPanel);
  1679.  
  1680.         } else if (lstTab.lastPanel == '#donation-shelf') {
  1681.  
  1682.           if (new_isTabExpanded) switchTabActivity(null)
  1683.           if (!new_isExpandedDonationShelf) openDonationShelf();
  1684.  
  1685.         } else {
  1686.  
  1687.           if (new_isExpandedChat) ytBtnCollapseChat()
  1688.           if (!new_isTabExpanded) { setToActiveTab(); }
  1689.  
  1690.         }
  1691.  
  1692.         timeline.setTimeout(unlock, 40);
  1693.  
  1694.       })
  1695.     }
  1696.  
  1697.     function hideTabAndChat() {
  1698.  
  1699.       layoutStatusMutex.lockWith(unlock => {
  1700.  
  1701.         if (new_isTabExpanded) switchTabActivity(null)
  1702.         if (new_isExpandedChat) ytBtnCollapseChat()
  1703.         if (new_isExpandedEPanel) ytBtnCloseEngagementPanels();
  1704.         if (new_isExpandedDonationShelf) closeDonationShelf();
  1705.  
  1706.  
  1707.         timeline.setTimeout(unlock, 40);
  1708.  
  1709.       })
  1710.  
  1711.     }
  1712.  
  1713.     const statusCollapsedFalse = !!(new_layoutStatus & (LAYOUT_TAB_EXPANDED | LAYOUT_ENGAGEMENT_PANEL_EXPANDED | LAYOUT_DONATION_SHELF_EXPANDED | LAYOUT_CHATROOM_EXPANDED))
  1714.     const statusCollapsedTrue = !statusCollapsedFalse
  1715.  
  1716.     let changes = (old_layoutStatus & LAYOUT_VAILD) ? old_layoutStatus ^ new_layoutStatus : 0;
  1717.  
  1718.     let chat_collapsed_changed = !!(changes & LAYOUT_CHATROOM_COLLAPSED)
  1719.     let chat_expanded_changed = !!(changes & LAYOUT_CHATROOM_EXPANDED)
  1720.     let tab_expanded_changed = !!(changes & LAYOUT_TAB_EXPANDED)
  1721.     let theater_mode_changed = !!(changes & LAYOUT_THEATER)
  1722.     let column_mode_changed = !!(changes & LAYOUT_TWO_COLUMNS)
  1723.     let fullscreen_mode_changed = !!(changes & LAYOUT_FULLSCREEN)
  1724.     let epanel_expanded_changed = !!(changes & LAYOUT_ENGAGEMENT_PANEL_EXPANDED)
  1725.     let ds_expanded_changed = !!(changes & LAYOUT_DONATION_SHELF_EXPANDED)
  1726.  
  1727.     _console.log(8221, 1, chat_collapsed_changed, chat_expanded_changed, tab_expanded_changed, theater_mode_changed, column_mode_changed, fullscreen_mode_changed, epanel_expanded_changed)
  1728.  
  1729.  
  1730.     //console.log(169, 1, chat_collapsed_changed, tab_expanded_changed)
  1731.     //console.log(169, 2, new_isExpandedChat, new_isCollapsedChat, new_isTabExpanded)
  1732.  
  1733.     let BF_LayoutCh_Panel = (changes & (LAYOUT_TAB_EXPANDED | LAYOUT_CHATROOM_EXPANDED | LAYOUT_ENGAGEMENT_PANEL_EXPANDED | LAYOUT_DONATION_SHELF_EXPANDED))
  1734.     let tab_change = BF_LayoutCh_Panel;
  1735.     let isChatOrTabExpandTriggering = !!((new_layoutStatus) & BF_LayoutCh_Panel);
  1736.     let isChatOrTabCollaspeTriggering = !!((~new_layoutStatus) & BF_LayoutCh_Panel);
  1737.  
  1738.  
  1739.     const moreThanOneShown = (new_isTabExpanded + new_isExpandedChat + new_isExpandedEPanel + new_isExpandedDonationShelf) > 1
  1740.  
  1741.  
  1742.     const base_twoCol_NoTheather_chatExpand_a = LAYOUT_TWO_COLUMNS | LAYOUT_THEATER | LAYOUT_CHATROOM | LAYOUT_CHATROOM_COLLAPSED
  1743.     const base_twoCol_NoTheather_chatExpand_b = LAYOUT_TWO_COLUMNS | 0 | LAYOUT_CHATROOM | 0
  1744.  
  1745.     // two column; not theater; tab collapse; chat expand; ep expand
  1746.     const IF_01a = base_twoCol_NoTheather_chatExpand_a | LAYOUT_TAB_EXPANDED | LAYOUT_ENGAGEMENT_PANEL_EXPANDED;
  1747.     const IF_01b = base_twoCol_NoTheather_chatExpand_b | 0 | LAYOUT_ENGAGEMENT_PANEL_EXPANDED;
  1748.  
  1749.     
  1750.     // two column; not theater; tab collapse; chat expand; ep expand
  1751.     const IF_07a = base_twoCol_NoTheather_chatExpand_a | LAYOUT_TAB_EXPANDED | LAYOUT_DONATION_SHELF_EXPANDED;
  1752.     const IF_07b = base_twoCol_NoTheather_chatExpand_b | 0 | LAYOUT_DONATION_SHELF_EXPANDED;
  1753.  
  1754.  
  1755.     // two column; not theater;
  1756.     const IF_02a = BF_TWOCOL_N_THEATER;
  1757.     const IF_02b = LAYOUT_TWO_COLUMNS;
  1758.  
  1759.     // two column; not theater; tab expand; chat expand; 
  1760.     const IF_03a = base_twoCol_NoTheather_chatExpand_a | LAYOUT_TAB_EXPANDED;
  1761.     const IF_03b = base_twoCol_NoTheather_chatExpand_b | LAYOUT_TAB_EXPANDED;
  1762.  
  1763.  
  1764.     // two column; tab expand; chat expand; 
  1765.     const IF_06a = LAYOUT_TWO_COLUMNS | LAYOUT_TAB_EXPANDED | LAYOUT_CHATROOM | LAYOUT_CHATROOM_COLLAPSED;
  1766.     const IF_06b = LAYOUT_TWO_COLUMNS | LAYOUT_TAB_EXPANDED | LAYOUT_CHATROOM | 0;
  1767.  
  1768.  
  1769.     // two column; theater;
  1770.     const IF_04a = BF_TWOCOL_N_THEATER;
  1771.     const IF_04b = BF_TWOCOL_N_THEATER;
  1772.  
  1773.     // not fullscreen; two column; not theater; not tab expand; not EP expand; not expand chat; not donation shelf
  1774.     const IF_05a = LAYOUT_FULLSCREEN | LAYOUT_TWO_COLUMNS | LAYOUT_THEATER | LAYOUT_TAB_EXPANDED | LAYOUT_ENGAGEMENT_PANEL_EXPANDED | LAYOUT_DONATION_SHELF_EXPANDED | LAYOUT_CHATROOM_EXPANDED;
  1775.     const IF_05b = 0 | LAYOUT_TWO_COLUMNS | 0 | 0 | 0 | 0 | 0;
  1776.  
  1777.     let _isChatPopupedF = null
  1778.     let isChatPopupedF = ()=>{
  1779.       return _isChatPopupedF===null ? ( _isChatPopupedF = cssElm.classList.contains('tyt-chat-popup') ) : _isChatPopupedF
  1780.     }
  1781.  
  1782.     if (new_isFullScreen) {
  1783.  
  1784.  
  1785.       if (tab_change == LAYOUT_CHATROOM_EXPANDED && (new_layoutStatus & IF_06a) === IF_06b && statusCollapsedFalse && !column_mode_changed) {
  1786.  
  1787.         // two column; tab expand; chat expand; 
  1788.  
  1789.         switchTabActivity(null);
  1790.  
  1791.       }
  1792.  
  1793.       if (!!(tab_change & LAYOUT_CHATROOM_EXPANDED) && new_isExpandedChat) {
  1794.         //tab_change = LAYOUT_CHATROOM_EXPANDED
  1795.         //tab_change = LAYOUT_CHATROOM_EXPANDED|LAYOUT_TAB_EXPANDED
  1796.  
  1797.  
  1798.         timeline.setTimeout(() => {
  1799.           let scrollElement = document.querySelector('ytd-app[scrolling]')
  1800.           if (!scrollElement) return;
  1801.           // single column view; click button; scroll to tab content area 100%
  1802.           let chatFrame = document.querySelector('ytd-live-chat-frame#chat');
  1803.           if (chatFrame && isChatExpand()) {
  1804.             _console.log(7290, 1)
  1805.             chatFrame.scrollIntoView(true);
  1806.           }
  1807.         }, 60)
  1808.  
  1809.       }
  1810.  
  1811.       if (!!(tab_change & LAYOUT_ENGAGEMENT_PANEL_EXPANDED) && new_isExpandedEPanel) {
  1812.  
  1813.         timeline.setTimeout(() => {
  1814.           let scrollElement = document.querySelector('ytd-app[scrolling]')
  1815.           if (!scrollElement) return;
  1816.           // single column view; click button; scroll to tab content area 100%
  1817.           let epPanel = document.querySelector('ytd-watch-flexy[flexy][tyt-tab] #panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id][visibility][visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"]:not([hidden])');
  1818.           if (epPanel) {
  1819.             _console.log(7290, 2)
  1820.  
  1821.             let pi = 50;
  1822.             let cid = setInterval(() => {
  1823.               if (--pi) epPanel.scrollIntoView(true); else clearInterval(cid)
  1824.             }, 17)
  1825.             //
  1826.           }
  1827.         }, 60)
  1828.  
  1829.       }
  1830.  
  1831.  
  1832.     } else if (fullscreen_mode_changed) {
  1833.  
  1834.       // new_isFullScreen: false
  1835.       // fullscreen_mode_changed: true
  1836.       
  1837.  
  1838.       if (!new_isFullScreen && statusCollapsedTrue && isWideScreenWithTwoColumns() && !isTheater()) {
  1839.        
  1840.         showTabOrChat();
  1841.       } else if (!new_isFullScreen && statusCollapsedFalse && isWideScreenWithTwoColumns() && isTheater()) {
  1842.        
  1843.  
  1844.         if(cisChatPopupedF()){
  1845.         }else{
  1846.  
  1847.           ytBtnCancelTheater();
  1848.  
  1849.         }
  1850.       }
  1851.  
  1852.     } else if ((new_layoutStatus & IF_01a) === IF_01b && !column_mode_changed && (tab_change == LAYOUT_CHATROOM_EXPANDED || tab_change == LAYOUT_ENGAGEMENT_PANEL_EXPANDED)) {
  1853.  
  1854.       // new_isFullScreen: false
  1855.       // fullscreen_mode_changed: false
  1856.  
  1857.       // two column; not theater; tab collapse; chat expand; ep expand
  1858.  
  1859.       if (epanel_expanded_changed) {
  1860.         layoutStatusMutex.lockWith(unlock => {
  1861.           ytBtnCollapseChat();
  1862.           setTimeout(unlock, 13)
  1863.         })
  1864.       } else if (chat_collapsed_changed) {
  1865.         layoutStatusMutex.lockWith(unlock => {
  1866.           ytBtnCloseEngagementPanels();
  1867.           setTimeout(unlock, 13)
  1868.         })
  1869.  
  1870.       }
  1871.  
  1872.     } else if ((new_layoutStatus & IF_07a) === IF_07b && !column_mode_changed && (tab_change == LAYOUT_CHATROOM_EXPANDED || tab_change == LAYOUT_DONATION_SHELF_EXPANDED)) {
  1873.  
  1874.       // new_isFullScreen: false
  1875.       // fullscreen_mode_changed: false
  1876.  
  1877.       // two column; not theater; tab collapse; chat expand; ds expand
  1878.  
  1879.       if (ds_expanded_changed) {
  1880.         layoutStatusMutex.lockWith(unlock => {
  1881.           ytBtnCollapseChat();
  1882.           setTimeout(unlock, 13)
  1883.         })
  1884.       } else if (chat_collapsed_changed) {
  1885.         layoutStatusMutex.lockWith(unlock => {
  1886.           closeDonationShelf();
  1887.           setTimeout(unlock, 13)
  1888.         })
  1889.  
  1890.       }
  1891.  
  1892.     } else if (!tab_change && column_mode_changed && (new_layoutStatus & IF_02a) === IF_02b && moreThanOneShown) {
  1893.  
  1894.       // new_isFullScreen: false
  1895.       // fullscreen_mode_changed: false
  1896.  
  1897.       // two column; not theater;
  1898.       // moreThanOneShown
  1899.  
  1900.       showTabOrChat();
  1901.  
  1902.     } else if (tab_change == LAYOUT_CHATROOM_EXPANDED && (new_layoutStatus & IF_03a) === IF_03b && statusCollapsedFalse && !column_mode_changed) {
  1903.  
  1904.       // new_isFullScreen: false
  1905.       // fullscreen_mode_changed: false
  1906.  
  1907.       // two column; not theater; tab expand; chat expand; 
  1908.  
  1909.       switchTabActivity(null);
  1910.  
  1911.     } else if (isChatOrTabExpandTriggering && (new_layoutStatus & IF_04a) === IF_04b && statusCollapsedFalse && (changes & BF_TWOCOL_N_THEATER) === 0) {
  1912.  
  1913.       // new_isFullScreen: false
  1914.       // fullscreen_mode_changed: false
  1915.  
  1916.       ytBtnCancelTheater();
  1917.  
  1918.     } else if ((new_layoutStatus & IF_04a) === IF_04b && statusCollapsedFalse) {
  1919.  
  1920.       // new_isFullScreen: false
  1921.       // fullscreen_mode_changed: false
  1922.  
  1923.       if (isChatPopupedF()) {
  1924.  
  1925.       } else {
  1926.  
  1927.         hideTabAndChat();
  1928.       }
  1929.  
  1930.     } else if (isChatOrTabCollaspeTriggering && (new_layoutStatus & IF_02a) === IF_02b && statusCollapsedTrue && !column_mode_changed) {
  1931.  
  1932.       // new_isFullScreen: false
  1933.       // fullscreen_mode_changed: false
  1934.  
  1935.       if (tab_change == LAYOUT_ENGAGEMENT_PANEL_EXPANDED) {
  1936.  
  1937.         lstTab.lastPanel = null;
  1938.  
  1939.         if (new_isFullScreen) {
  1940.  
  1941.         } else {
  1942.           showTabOrChat();
  1943.         }
  1944.       } else if (tab_change == LAYOUT_DONATION_SHELF_EXPANDED) {
  1945.  
  1946.         lstTab.lastPanel = null;
  1947.  
  1948.         if (new_isFullScreen) {
  1949.  
  1950.         } else {
  1951.           showTabOrChat();
  1952.         }
  1953.       } else if (tab_change == LAYOUT_CHATROOM_EXPANDED) {
  1954.  
  1955.         lstTab.lastPanel = null;
  1956.  
  1957.         if (new_isFullScreen) {
  1958.  
  1959.         } else {
  1960.           showTabOrChat();
  1961.         }
  1962.       } else {
  1963.  
  1964.  
  1965.         if (new_isFullScreen) {
  1966.  
  1967.         } else {
  1968.  
  1969.           ytBtnSetTheater();
  1970.  
  1971.         }
  1972.  
  1973.       }
  1974.  
  1975.     } else if (!tab_change && !!(changes & BF_TWOCOL_N_THEATER) && (new_layoutStatus & IF_02a) === IF_02b && statusCollapsedTrue) {
  1976.  
  1977.       // new_isFullScreen: false
  1978.       // fullscreen_mode_changed: false
  1979.  
  1980.       showTabOrChat();
  1981.  
  1982.     } else if ((new_layoutStatus & IF_05a) === IF_05b) {
  1983.       // bug fix for restoring from mini player
  1984.  
  1985.       layoutStatusMutex.lockWith(unlock => {
  1986.         setToActiveTab();
  1987.         timeline.setTimeout(unlock, 40);
  1988.       });
  1989.  
  1990.     }
  1991.  
  1992.     if (theater_mode_changed) {
  1993.       let tdt = Date.now();
  1994.       theater_mode_changed_dt = tdt
  1995.       setTimeout(() => {
  1996.         if (theater_mode_changed_dt !== tdt) return;
  1997.         updateFloatingSlider();
  1998.       }, 130)
  1999.     }
  2000.  
  2001.     let secondary = null;
  2002.     if (secondary = document.querySelector('.tabview-hover-slider-enable')) {
  2003.       secondary.dispatchEvent(new CustomEvent('tabview-hover-slider-restore'))
  2004.       //console.log(1996)
  2005.     }
  2006.  
  2007.  
  2008.     if (fullscreen_mode_changed) {
  2009.       detailsTriggerReset = true;
  2010.       setTimeout(() => {
  2011.         setHiddenStateForDesc();
  2012.       }, 80);
  2013.     }
  2014.  
  2015.     // resize => is-two-columns_
  2016.     if (column_mode_changed) {
  2017.  
  2018.  
  2019.       Promise.resolve(0).then(() => {
  2020.         pageCheck();
  2021.         if (global_columns_end_ito !== null) {
  2022.           //to trigger observation at the time layout being changed
  2023.           if ((new_layoutStatus & LAYOUT_TWO_COLUMNS) === LAYOUT_TWO_COLUMNS) {
  2024.             let endpos = document.querySelector('tabview-view-columns-endpos')
  2025.             if (endpos !== null) {
  2026.               global_columns_end_ito.observe(endpos)
  2027.             }
  2028.           } else {
  2029.             global_columns_end_ito.disconnect();
  2030.           }
  2031.         }
  2032.         setTimeout3(() => {
  2033.           singleColumnScrolling(true); //initalize sticky
  2034.         });
  2035.       })
  2036.     }
  2037.  
  2038.     if (enableLivePopupCheck === true) {
  2039.  
  2040.       const new_isTwoColumnsTheater = fT(new_layoutStatus, LAYOUT_TWO_COLUMNS | LAYOUT_THEATER, 0)
  2041.  
  2042.       let currentIsTheaterPopupChat = new_isTwoColumnsTheater && new_isExpandedChat && isChatPopupedF()
  2043.       if (!currentIsTheaterPopupChat) {
  2044.         enableLivePopupCheck = false
  2045.         document.dispatchEvent(new CustomEvent("tyt-close-popup"))
  2046.       }
  2047.  
  2048.     }
  2049.  
  2050.  
  2051.   }
  2052.  
  2053.   function fixLayoutStatus(x) {
  2054.     const new_isExpandedChat = !(x & LAYOUT_CHATROOM_COLLAPSED) && (x & LAYOUT_CHATROOM)
  2055.     return new_isExpandedChat ? (x | LAYOUT_CHATROOM_EXPANDED) : (x & ~LAYOUT_CHATROOM_EXPANDED);
  2056.   }
  2057.  
  2058.   const wls = new Proxy({
  2059.     /** @type {number | null} */
  2060.     layoutStatus: undefined
  2061.   }, {
  2062.     get: function (target, prop) {
  2063.       return target[prop];
  2064.     },
  2065.     set: function (target, prop, value) {
  2066.       if (prop == 'layoutStatus') {
  2067.  
  2068.         if (value === 0) {
  2069.           target[prop] = value;
  2070.           return true;
  2071.         } else if (target[prop] === value) {
  2072.           return true;
  2073.         } else {
  2074.           if (!target.layoutStatus_pending) {
  2075.             target.layoutStatus_pending = true;
  2076.             const old_layoutStatus = target[prop];
  2077.             target[prop] = value;
  2078.             layoutStatusMutex.lockWith(unlock => {
  2079.               target.layoutStatus_pending = false;
  2080.               let new_layoutStatus = target[prop];
  2081.               if (old_layoutStatus !== new_layoutStatus) {
  2082.                 layoutStatusChanged(old_layoutStatus, new_layoutStatus);
  2083.                 timeline.setTimeout(unlock, 40)
  2084.               } else {
  2085.                 unlock();
  2086.               }
  2087.             })
  2088.             return true;
  2089.           }
  2090.         }
  2091.       }
  2092.       target[prop] = value;
  2093.       return true;
  2094.     },
  2095.     has: function (target, prop) {
  2096.       return (prop in target);
  2097.     }
  2098.   });
  2099.  
  2100.   const svgElm = (w, h, vw, vh, p, m) => `<svg${m ? ` class=${m}` : ''} width="${w}" height="${h}" viewBox="0 0 ${vw} ${vh}" preserveAspectRatio="xMidYMid meet">${p}</svg>`
  2101.  
  2102.   function isVideoPlaying(video) {
  2103.     return video.currentTime > 0 && !video.paused && !video.ended && video.readyState > video.HAVE_CURRENT_DATA;
  2104.   }
  2105.  
  2106.   function wAttr(elm, attr, kv) {
  2107.     if (elm) {
  2108.       if (kv === true) {
  2109.         elm.setAttribute(attr, '');
  2110.       } else if (kv === false) {
  2111.         elm.removeAttribute(attr);
  2112.       } else if (kv === null) {
  2113.         //;
  2114.       } else if (typeof kv == 'string') {
  2115.         elm.setAttribute(attr, kv);
  2116.       }
  2117.     }
  2118.   }
  2119.  
  2120.   function hideTabBtn(tabBtn) {
  2121.     //console.log('hideTabBtn', tabBtn)
  2122.     let isActiveBefore = tabBtn.classList.contains('active');
  2123.     tabBtn.classList.add("tab-btn-hidden");
  2124.     if (isActiveBefore) {
  2125.       setToActiveTab();
  2126.     }
  2127.   }
  2128.  
  2129.   // function hasAttribute(obj, key) {
  2130.   //   return obj && obj.hasAttribute(key);
  2131.   // }
  2132.  
  2133.   function isTheater() {
  2134.     const cssElm = es.ytdFlexy;
  2135.     return (cssElm && cssElm.hasAttribute('theater'))
  2136.   }
  2137.  
  2138.   function isFullScreen() {
  2139.     const cssElm = es.ytdFlexy;
  2140.     return (cssElm && cssElm.hasAttribute('fullscreen'))
  2141.   }
  2142.  
  2143.   function isChatExpand() {
  2144.     const cssElm = es.ytdFlexy;
  2145.     return cssElm && (cssElm.getAttribute('tyt-chat') || '').charAt(0) === '+'
  2146.   }
  2147.  
  2148.   function isWideScreenWithTwoColumns() {
  2149.     const cssElm = es.ytdFlexy;
  2150.     return (cssElm && cssElm.hasAttribute('is-two-columns_'))
  2151.   }
  2152.  
  2153.   
  2154.   function isAnyActiveTab() {
  2155.     return document.querySelector('#right-tabs .tab-btn.active') !== null
  2156.   }
  2157.   // function isAnyActiveTab2() {
  2158.   //   return document.querySelectorAll('#right-tabs .tab-btn.active').length > 0
  2159.   // }
  2160.  
  2161.   function isEngagementPanelExpanded() { //note: not checking the visual elements
  2162.     const cssElm = es.ytdFlexy;
  2163.     return (cssElm && +cssElm.getAttribute('tyt-ep-visible') > 0)
  2164.   }
  2165.  
  2166.   function isDonationShelfExpanded() {
  2167.     const cssElm = es.ytdFlexy;
  2168.     return (cssElm && cssElm.hasAttribute('tyt-donation-shelf'))
  2169.   }
  2170.  
  2171.   const engagementIdMap = new Map();
  2172.   let engagementIdNext = 1; // max 1 << 62
  2173.  
  2174.   function engagement_panels_() {
  2175.  
  2176.     let res = [];
  2177.     // let shownRes = [];
  2178.  
  2179.     let v = 0;
  2180.     // let k = 1;
  2181.     // let count = 0;
  2182.  
  2183.     for (const ePanel of document.querySelectorAll(
  2184.       `ytd-watch-flexy[flexy][tyt-tab] #panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id][visibility]:not([hidden])`
  2185.     )) {
  2186.       let targetId = ePanel.getAttribute('target-id')
  2187.       if (typeof targetId !== 'string') continue;
  2188.       let eId = engagementIdMap.get(targetId)
  2189.       if (!eId) {
  2190.         engagementIdMap.set(targetId, eId = engagementIdNext)
  2191.         if (engagementIdNext === (1 << 62)) {
  2192.           engagementIdNext = 1;
  2193.           console.warn('engagementId reached 1 << 62')
  2194.         } else {
  2195.           engagementIdNext = engagementIdNext << 1;
  2196.         }
  2197.       }
  2198.       // console.log(55,eId, targetId)
  2199.  
  2200.       let visibility = ePanel.getAttribute('visibility') //ENGAGEMENT_PANEL_VISIBILITY_EXPANDED //ENGAGEMENT_PANEL_VISIBILITY_HIDDEN
  2201.  
  2202.       let k = eId
  2203.       switch (visibility) {
  2204.         case 'ENGAGEMENT_PANEL_VISIBILITY_EXPANDED':
  2205.           v |= k;
  2206.           // count++;
  2207.           // shownRes.push(ePanel)
  2208.           res.push({ ePanel, k, visible: true });
  2209.           break;
  2210.         case 'ENGAGEMENT_PANEL_VISIBILITY_HIDDEN':
  2211.           res.push({ ePanel, k, visible: false });
  2212.           break;
  2213.         default:
  2214.           res.push({ ePanel, k, visible: false });
  2215.       }
  2216.  
  2217.       //k = k << 1;
  2218.  
  2219.     }
  2220.     return { list: res, value: v };
  2221.     // return { list: res, value: v, count: count, shownRes };
  2222.   }
  2223.  
  2224.  
  2225.   function ytBtnOpenEngagementPanel(/** @type {number | string} */ panel_id) {
  2226.  
  2227.     // console.log(panel_id)
  2228.     if (typeof panel_id == 'string') {
  2229.       panel_id = panel_id.replace('#engagement-panel-', '');
  2230.       panel_id = parseInt(panel_id);
  2231.     }
  2232.     if (panel_id >= 0) { } else return false;
  2233.  
  2234.     let panels = engagement_panels_();
  2235.     // console.log(panels)
  2236.  
  2237.     let actions = []
  2238.     for (const { ePanel, k, visible } of panels.list) {
  2239.       if ((panel_id & k) === k) {
  2240.         if (!visible) {
  2241.           actions.push({
  2242.             panelId: ePanel.getAttribute('target-id'),
  2243.             toShow: true
  2244.           })
  2245.         }
  2246.       } else {
  2247.         if (visible) {
  2248.           actions.push({
  2249.             panelId: ePanel.getAttribute('target-id'),
  2250.             toHide: true
  2251.           })
  2252.         }
  2253.       }
  2254.     }
  2255.  
  2256.     if (actions.length > 0) {
  2257.       // console.log(4545,actions)
  2258.       scriptletDeferred.debounce(() => {
  2259.         document.dispatchEvent(new CustomEvent('tyt-engagement-panel-visibility-change', {
  2260.           detail: actions
  2261.         }))
  2262.         actions = null
  2263.       })
  2264.     }
  2265.  
  2266.   }
  2267.  
  2268.   function ytBtnCloseEngagementPanel(/** @type {HTMLElement} */ s) {
  2269.     //ePanel.setAttribute('visibility',"ENGAGEMENT_PANEL_VISIBILITY_HIDDEN");
  2270.  
  2271.     let panelId = s.getAttribute('target-id')
  2272.     scriptletDeferred.debounce(() => {
  2273.       document.dispatchEvent(new CustomEvent('tyt-engagement-panel-visibility-change', {
  2274.         detail: {
  2275.           panelId,
  2276.           toHide: true
  2277.         }
  2278.       }))
  2279.     })
  2280.  
  2281.   }
  2282.  
  2283.   function ytBtnCloseEngagementPanels() {
  2284.     if (isEngagementPanelExpanded()) {
  2285.       for (const s of document.querySelectorAll(
  2286.         `ytd-watch-flexy[flexy][tyt-tab] #panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id][visibility]:not([hidden])`
  2287.       )) {
  2288.         if (s.getAttribute('visibility') == "ENGAGEMENT_PANEL_VISIBILITY_EXPANDED") ytBtnCloseEngagementPanel(s);
  2289.       }
  2290.     }
  2291.   }
  2292.  
  2293.   function openDonationShelf() {
  2294.     if (!isDonationShelfExpanded()){
  2295.       let btn = document.querySelector('#tyt-donation-shelf-toggle-btn')
  2296.       if(btn){
  2297.         btn.click();
  2298.         return true;
  2299.       }
  2300.     }
  2301.     return false;
  2302.   }
  2303.   function closeDonationShelf() {
  2304.     if (isDonationShelfExpanded()){
  2305.       let btn = document.querySelector('#tyt-donation-shelf-toggle-btn')
  2306.       if(btn){
  2307.         btn.click();
  2308.         return true;
  2309.       }
  2310.     }
  2311.     return false;
  2312.   }
  2313.  
  2314.   function ytBtnSetTheater() {
  2315.     if (!isTheater()) {
  2316.       const sizeBtn = document.querySelector('ytd-watch-flexy #ytd-player button.ytp-size-button')
  2317.       if (sizeBtn) sizeBtn.click();
  2318.     }
  2319.   }
  2320.  
  2321.   function ytBtnCancelTheater() {
  2322.     if (isTheater()) {
  2323.       const sizeBtn = document.querySelector('ytd-watch-flexy #ytd-player button.ytp-size-button')
  2324.       if (sizeBtn) sizeBtn.click();
  2325.     }
  2326.   }
  2327.  
  2328.   function ytBtnExpandChat() {
  2329.     let button = document.querySelector('ytd-live-chat-frame#chat[collapsed] > .ytd-live-chat-frame#show-hide-button')
  2330.     if (button) {
  2331.       button =
  2332.         querySelectorFromAnchor.call(button, 'div.yt-spec-touch-feedback-shape') ||
  2333.         querySelectorFromAnchor.call(button, 'ytd-toggle-button-renderer');
  2334.       if (button) button.click();
  2335.     }
  2336.   }
  2337.  
  2338.   function ytBtnCollapseChat() {
  2339.     let button = document.querySelector('ytd-live-chat-frame#chat:not([collapsed]) > .ytd-live-chat-frame#show-hide-button')
  2340.     if (button) {
  2341.       button =
  2342.         querySelectorFromAnchor.call(button, 'div.yt-spec-touch-feedback-shape') ||
  2343.         querySelectorFromAnchor.call(button, 'ytd-toggle-button-renderer');
  2344.       if (button) button.click();
  2345.     }
  2346.   }
  2347.  
  2348.  
  2349.   async function makeVideosAutoLoad2() {
  2350.     let sVideosList = document.querySelector('ytd-watch-flexy #tab-videos [placeholder-videos]');
  2351.  
  2352.     if (!sVideosList) return null;
  2353.  
  2354.     //let ab = sVideosList.getAttribute('tabview-videos-autoload')
  2355.     await Promise.resolve(0);
  2356.  
  2357.     let endPosDOM = document.querySelector('tabview-view-videos-endpos')
  2358.     if (endPosDOM) endPosDOM.remove(); // just in case
  2359.     endPosDOM = document.createElement('tabview-view-videos-endpos')
  2360.     insertAfterTo(endPosDOM, sVideosList);
  2361.  
  2362.     await Promise.resolve(0);
  2363.  
  2364.  
  2365.     //sVideosList.setAttribute('tabview-videos-autoload', '1')
  2366.  
  2367.     _console.log(9333)
  2368.     if (!sVideosITO) {
  2369.  
  2370.       sVideosITO = new IntersectionObserver((entries) => {
  2371.  
  2372.         if ((wls.layoutStatus & LAYOUT_TWO_COLUMNS) === LAYOUT_TWO_COLUMNS) return;
  2373.  
  2374.         _console.log(9334, entries)
  2375.         if (entries.length !== 1) return;
  2376.         if (entries[0].isIntersecting !== true) return;
  2377.         let elm = ((entries[0] || 0).target || 0);
  2378.         if (!elm) return;
  2379.         elm = null;
  2380.         entries = null;
  2381.  
  2382.         new Promise(resolve => {
  2383.  
  2384.           // compatibile with Search While Watching Video
  2385.           let isSearchGeneratedWithHiddenContinuation = !!document.querySelector('#related.style-scope.ytd-watch-flexy ytd-watch-next-secondary-results-renderer.style-scope.ytd-watch-flexy ytd-compact-video-renderer.yt-search-generated.style-scope.ytd-item-section-renderer ~ ytd-continuation-item-renderer.style-scope.ytd-item-section-renderer[hidden]');
  2386.           if (isSearchGeneratedWithHiddenContinuation) return;
  2387.  
  2388.           // native YouTube coding use different way to handle custom videos, unknown condition for the continutation loading.
  2389.           let isOtherChipSelected = !!document.querySelector('ytd-watch-next-secondary-results-renderer.style-scope.ytd-watch-flexy yt-chip-cloud-renderer.style-scope.yt-related-chip-cloud-renderer yt-chip-cloud-chip-renderer.style-scope.yt-chip-cloud-renderer[aria-selected="false"] ~ [aria-selected="true"]')
  2390.           if (isOtherChipSelected) return;
  2391.  
  2392.           setTimeout(resolve, 30); // delay required to allow YouTube generate the continuation elements
  2393.  
  2394.  
  2395.         }).then(() => {
  2396.  
  2397.           let res = setVideosTwoColumns(2 | 4, true)
  2398.  
  2399.           _console.log(9335, res)
  2400.  
  2401.           if (res.m2 && res.m3) {
  2402.             let m4 = closestDOM.call(res.m2, 'ytd-continuation-item-renderer');
  2403.             let m5, m6;
  2404.  
  2405.             _console.log(9336, m4)
  2406.             if (m4) {
  2407.               m5 = querySelectorFromAnchor.call(m4, 'ytd-button-renderer.style-scope.ytd-continuation-item-renderer, yt-button-renderer.style-scope.ytd-continuation-item-renderer');
  2408.  
  2409.               // YouTube coding bug - correct is 'ytd-button-renderer'. If the page is redirected under single column mode, the tag become 'yt-button-renderer'
  2410.               // under 'yt-button-renderer', the 
  2411.  
  2412.               if (m5)
  2413.                 m6 = querySelectorFromAnchor.call(m5, 'button.yt-spec-button-shape-next--call-to-action'); // main
  2414.  
  2415.               _console.log(9337, m4, m5, m6)
  2416.  
  2417.               if (m6) {
  2418.                 m6.click() // generic solution
  2419.               } else if (m5) {
  2420.                 m5.click(); // not sure
  2421.               } else {
  2422.                 m4.dispatchEvent(new Event('yt-service-request-sent-button-renderer')); // only for correct YouTube coding
  2423.               }
  2424.             }
  2425.             m4 = null;
  2426.             m5 = null;
  2427.             m6 = null;
  2428.           }
  2429.           res = null;
  2430.  
  2431.         });
  2432.  
  2433.       }, {
  2434.         rootMargin: `0px`, // refer to css margin-top:-30vh
  2435.         threshold: [0]
  2436.       })
  2437.       sVideosITO.observe(endPosDOM);
  2438.     } else {
  2439.       sVideosITO.disconnect();
  2440.       sVideosITO.observe(endPosDOM);
  2441.     }
  2442.  
  2443.  
  2444.   }
  2445.  
  2446.  
  2447.   function fixTabs() {
  2448.  
  2449.     if (!scriptEnable) return;
  2450.  
  2451.     let queryElement = document.querySelector('*:not(#tab-videos) > #related.ytd-watch-flexy > ytd-watch-next-secondary-results-renderer');
  2452.  
  2453.     let isRelocated = !!queryElement;
  2454.  
  2455.     if (isRelocated) {
  2456.  
  2457.       _console.log(3202, 2)
  2458.  
  2459.       let relatedElm = closestDOM.call(queryElement, '#related.ytd-watch-flexy'); // NOT NULL
  2460.  
  2461.       let right_tabs = document.querySelector('#right-tabs'); // can be NULL
  2462.  
  2463.       let tab_videos = right_tabs ? querySelectorFromAnchor.call(right_tabs, "#tab-videos") : null; // can be NULL
  2464.  
  2465.       if (tab_videos !== null) {
  2466.  
  2467.         _console.log(3202, 4)
  2468.  
  2469.         let target_container = document.querySelector('ytd-watch-flexy:not([is-two-columns_]) #primary-inner.ytd-watch-flexy, ytd-watch-flexy[is-two-columns_] #secondary-inner.ytd-watch-flexy')
  2470.         if (target_container) target_container.appendChild(right_tabs) // last-child
  2471.  
  2472.         tab_videos.appendChild(relatedElm);
  2473.         // no any other element set these attr. only init / relocation
  2474.         relatedElm.setAttribute('placeholder-for-youtube-play-next-queue', '')
  2475.         relatedElm.setAttribute('placeholder-videos', '')
  2476.  
  2477.         makeVideosAutoLoad2();
  2478.  
  2479.       }
  2480.  
  2481.     }
  2482.  
  2483.  
  2484.     /** @type {HTMLElement | null} */
  2485.     let chatroom = null;
  2486.     if (chatroom = document.querySelector('*:not([data-positioner="before|#chat"]) + ytd-live-chat-frame#chat, ytd-live-chat-frame#chat:first-child')) {
  2487.  
  2488.       let pHolderElm = document.querySelector('tabview-view-pholder[data-positioner="before|#chat"]');
  2489.       if (pHolderElm) pHolderElm.remove();
  2490.  
  2491.       if (document.querySelector('.YouTubeLiveFilledUpView')) {
  2492.         // no relocation
  2493.       } else {
  2494.  
  2495.         let rightTabs = document.querySelector('#right-tabs');
  2496.         if (rightTabs) {
  2497.           insertBeforeTo(chatroom, rightTabs);
  2498.         }
  2499.  
  2500.       }
  2501.  
  2502.       if (!pHolderElm) {
  2503.         pHolderElm = document.createElement('tabview-view-pholder');
  2504.         pHolderElm.setAttribute('data-positioner', 'before|#chat');
  2505.       }
  2506.  
  2507.       insertBeforeTo(pHolderElm, chatroom)
  2508.  
  2509.     }
  2510.  
  2511.  
  2512.   }
  2513.  
  2514.   
  2515.   async function isDocumentInFullScreenMode() {
  2516.     return document.fullscreenElement !== null;
  2517.   }
  2518.   async function energizedByVideoTimeUpdate() {
  2519.  
  2520.     const isFullscreen = await isDocumentInFullScreenMode();
  2521.     if (isFullscreen) return;
  2522.  
  2523.     // force browser to load the videostream during playing (primarily for music videos)
  2524.     // both background and foreground
  2525.  
  2526.     _updateTimeAccum++;
  2527.  
  2528.     if ((_updateTimeAccum + _viTimeNum) % 11 === 0) {
  2529.       // console.log(document.querySelector('video').currentTime) // 2.55, 2.64, 3.12, ...
  2530.       // about 2.66s
  2531.  
  2532.       if (_viTimeNum > 211) {
  2533.         // around 30.9s ~ 31.9s
  2534.         _viTimeNum = 200;
  2535.         _updateTimeAccum = (_updateTimeAccum % 8) + 1; // reset to 1 ~ 8
  2536.         postMessage({ tabviewEnergized: true }, 'https://www.youtube.com'); // post message to make alive
  2537.       }
  2538.  
  2539.       document.head.dataset.viTime = `${_viTimeNum + 1}`;
  2540.       await Promise.resolve(0)
  2541.       _viTimeNum = +document.head.dataset.viTime || 0;
  2542.     }
  2543.  
  2544.  
  2545.   }
  2546.  
  2547.   function autoCompletePosCreate(){
  2548.     
  2549.     let positioner = document.createElement("tabview-view-autocomplete-pos");
  2550.     let oldPositioner = document.querySelector("tabview-view-autocomplete-pos");
  2551.     if(oldPositioner) oldPositioner.remove();
  2552.     return positioner
  2553.   }
  2554.  
  2555.   function handlerAutoCompleteExist() {
  2556.     // Youtube - Search While Watching Video
  2557.  
  2558.     /** @type {HTMLElement} */
  2559.     let searchBox, autoComplete;
  2560.     searchBox = this;
  2561.     this.removeEventListener('autocomplete-sc-exist', handlerAutoCompleteExist, false)
  2562.     let domId = this.getAttribute('data-autocomplete-results-id')
  2563.  
  2564.     autoComplete = document.querySelector(`[data-autocomplete-input-id="${domId}"]`)
  2565.  
  2566.     if (!domId || !searchBox) return;
  2567.  
  2568.     let positioner = searchBox.nextSibling;
  2569.     if (positioner) {
  2570.       if (positioner.nodeName.toLowerCase() !== "tabview-view-autocomplete-pos") {
  2571.         positioner = autoCompletePosCreate();
  2572.         insertAfterTo(positioner, searchBox);
  2573.       }
  2574.     } else {
  2575.       positioner = autoCompletePosCreate();
  2576.       prependTo(positioner, searchBox.parentNode);
  2577.     }
  2578.     prependTo(autoComplete, positioner);
  2579.  
  2580.     setupSearchBox(searchBox, positioner);
  2581.  
  2582.  
  2583.   }
  2584.  
  2585.   async function setupSearchBox(searchBox, positioner) {
  2586.  
  2587.     let mb = getComputedStyle(searchBox).marginBottom
  2588.     let h = searchBox.offsetHeight + 'px'
  2589.  
  2590.     positioner.style.setProperty('--tyt-swwv-searchbox-mb', mb)
  2591.     positioner.style.setProperty('--tyt-swwv-searchbox-h', h)
  2592.  
  2593.     mtf_autocomplete_search()
  2594.  
  2595.   }
  2596.  
  2597.   function mtf_autocomplete_search() {
  2598.     // Youtube - Search While Watching Video
  2599.  
  2600.     /** @type {HTMLElement | null} */
  2601.     const ytdFlexyElm = es.ytdFlexy;
  2602.     if (!scriptEnable || !ytdFlexyElm) return;
  2603.  
  2604.     const autocomplete = querySelectorFromAnchor.call(ytdFlexyElm, '[placeholder-for-youtube-play-next-queue] input#suggestions-search + tabview-view-autocomplete-pos > .autocomplete-suggestions[data-autocomplete-input-id]:not([position-fixed-by-tabview-youtube])')
  2605.  
  2606.     if (autocomplete) {
  2607.  
  2608.       const searchBox = document.querySelector('[placeholder-for-youtube-play-next-queue] input#suggestions-search')
  2609.  
  2610.  
  2611.       if (searchBox) {
  2612.  
  2613.         const rAutoComplete = mWeakRef(autocomplete);
  2614.  
  2615.         function setVisible(autocomplete, b) {
  2616.           autocomplete.style.display = (b ? 'block' : 'none');
  2617.         }
  2618.  
  2619.         function isContentNotEmpty(searchbox, autocomplete) {
  2620.           return (searchbox.value || '').length > 0 && (autocomplete.textContent || '').length > 0;
  2621.         }
  2622.  
  2623.         autocomplete.parentNode.setAttribute('position-fixed-by-tabview-youtube', '');
  2624.         autocomplete.setAttribute('position-fixed-by-tabview-youtube', '');
  2625.         autocomplete.setAttribute('userscript-scrollbar-render', '')
  2626.  
  2627.         //let cancelClickToggle = false;
  2628.  
  2629.         if (!searchBox.hasAttribute('is-set-click-to-toggle')) {
  2630.           searchBox.setAttribute('is-set-click-to-toggle', '')
  2631.  
  2632.           searchBox.addEventListener('click', function () {
  2633.  
  2634.             Promise.resolve(0).then(() => {
  2635.  
  2636.               const autocomplete = kRef(rAutoComplete);
  2637.  
  2638.               if (!autocomplete) return;
  2639.  
  2640.               const isNotEmpty = isContentNotEmpty(this, autocomplete);
  2641.  
  2642.               if (isNotEmpty) {
  2643.  
  2644.                 let elmVisible = isDOMVisible(autocomplete);
  2645.  
  2646.                 if (elmVisible) {
  2647.                   setVisible(autocomplete, false)
  2648.                 }
  2649.                 else {
  2650.                   setVisible(autocomplete, true)
  2651.                 }
  2652.  
  2653.               }
  2654.  
  2655.             })
  2656.  
  2657.           }, bubblePassive)
  2658.  
  2659.           let cacheScrollIntoView = null;
  2660.           let rafID = 0;
  2661.           searchBox.addEventListener('keydown', function (evt) {
  2662.             //cancelClickToggle = true;
  2663.             switch (evt.code) {
  2664.               case 'ArrowUp':
  2665.               case 'ArrowDown':
  2666.  
  2667.                 let t = Date.now();
  2668.                 if (rafID === 0) {
  2669.                   rafID = requestAnimationFrame(() => {
  2670.                     rafID = 0;
  2671.                     let d = Date.now();
  2672.                     if (d - t > 300) return;
  2673.  
  2674.                     const autocomplete = kRef(rAutoComplete);
  2675.  
  2676.                     let selected = querySelectorFromAnchor.call(autocomplete, '.autocomplete-suggestion.selected');
  2677.                     let bool = selected && selected !== cacheScrollIntoView;
  2678.                     cacheScrollIntoView = selected;
  2679.                     if (bool) {
  2680.  
  2681.                       try {
  2682.                         selected.scrollIntoView({ block: "nearest", inline: "nearest" });
  2683.                       } catch (e) { }
  2684.  
  2685.                     }
  2686.  
  2687.                   })
  2688.                 }
  2689.               default:
  2690.               //
  2691.             }
  2692.  
  2693.  
  2694.           }, bubblePassive)
  2695.  
  2696.           searchBox.addEventListener('tyt-autocomplete-suggestions-change', function (evt) {
  2697.  
  2698.             //cancelClickToggle = true;
  2699.             if (evt.target !== document.activeElement) return;
  2700.             setTimeout(() => {
  2701.               const autocomplete = document.querySelector(`.autocomplete-suggestions[data-autocomplete-input-id="${this.getAttribute('data-autocomplete-results-id')}"]`);
  2702.               if (!autocomplete) return;
  2703.               const isNotEmpty = isContentNotEmpty(this, autocomplete);
  2704.               if (isNotEmpty) {
  2705.                 // dont detect visibility; just set to visible
  2706.                 setVisible(autocomplete, true);
  2707.               }
  2708.             }, 20);
  2709.  
  2710.           }, bubblePassive)
  2711.  
  2712.         }
  2713.  
  2714.       }
  2715.  
  2716.     }
  2717.  
  2718.   }
  2719.  
  2720.   const insertBeforeTo = HTMLElement.prototype.before ? (elm, target) => {
  2721.     if (!target || !elm) return null;
  2722.     // using before
  2723.     HTMLElement.prototype.before.call(target, elm);
  2724.     return true;
  2725.   } : (elm, target) => {
  2726.     if (!target || !elm) return null;
  2727.     // using insertBefore
  2728.     try {
  2729.       HTMLElement.prototype.insertBefore.call(target.parentNode, elm, target);
  2730.       return true;
  2731.     } catch (e) {
  2732.       console.log('element insert failed in old browser CE')
  2733.     }
  2734.     return false;
  2735.   }
  2736.  
  2737.   const insertAfterTo = HTMLElement.prototype.after ? (elm, target) => {
  2738.     if (!target || !elm) return null;
  2739.     // using after
  2740.     HTMLElement.prototype.after.call(target, elm);
  2741.     return true;
  2742.   } : (elm, target) => {
  2743.     if (!target || !elm) return null;
  2744.     // using insertBefore
  2745.     try {
  2746.       HTMLElement.prototype.insertBefore.call(target.parentNode, elm, target.nextSibling);
  2747.       return true;
  2748.     } catch (e) {
  2749.       console.log('element insert failed in old browser CE')
  2750.     }
  2751.     return false;
  2752.   }
  2753.  
  2754.   const prependTo = HTMLElement.prototype.prepend ? (elm, target) => {
  2755.     if (!target || !elm) return null;
  2756.     // using prepend
  2757.     HTMLElement.prototype.prepend.call(target, elm);
  2758.     return true;
  2759.   } : (elm, target) => {
  2760.     if (!target || !elm) return null;
  2761.     // using insertBefore
  2762.     try {
  2763.       HTMLElement.prototype.insertBefore.call(target, elm, target.firstChild);
  2764.       return true;
  2765.     } catch (e) {
  2766.       console.log('element insert failed in old browser CE')
  2767.     }
  2768.     return false;
  2769.   }
  2770.  
  2771.   const appends = HTMLElement.prototype.append ? (target, ...args) => {
  2772.     HTMLElement.prototype.append.call(target, ...args);
  2773.     return true;
  2774.   } : (target, ...args) => {
  2775.     for (const s of args) {
  2776.       target.appendChild(s)
  2777.     }
  2778.     return true;
  2779.   }
  2780.  
  2781.  
  2782.   // css animation check for element relocation
  2783.   function mtf_liveChatBtnF(node) {
  2784.  
  2785.     if (!node || node.nodeType !== 1) return;
  2786.  
  2787.     /** @type {HTMLElement | null} */
  2788.     const ytdFlexyElm = es.ytdFlexy;
  2789.     if (!scriptEnable || !ytdFlexyElm) return;
  2790.  
  2791.     let button = node;
  2792.  
  2793.     if (button) {
  2794.       prependTo(button, button.parentNode);
  2795.     }
  2796.  
  2797.  
  2798.   }
  2799.  
  2800.  
  2801.   function getWrapper(wrapperId) {
  2802.     let wrapper = document.getElementById(wrapperId);
  2803.     if (!wrapper) {
  2804.       wrapper = document.createElement('div');
  2805.       wrapper.id = wrapperId;
  2806.     }
  2807.     return wrapper;
  2808.   }
  2809.  
  2810.   // continuous check for element relocation
  2811.   // fired at begining & window resize, etc
  2812.   // might moved to #primary
  2813.   function mtf_append_playlist(/** @type {HTMLElement | null} */ playlist) {
  2814.  
  2815.     if (playlist === null) {
  2816.       playlist = document.querySelector('ytd-watch-flexy[playlist] *:not(#tabview-playlist-wrapper) > ytd-playlist-panel-renderer.style-scope.ytd-watch-flexy#playlist:not(.ytd-miniplayer)');
  2817.       // this playlist is highly possible to have '#items'
  2818.       if (!playlist) return;
  2819.     }
  2820.  
  2821.     /** @type {HTMLElement | null} */
  2822.     const ytdFlexyElm = es.ytdFlexy;
  2823.     if (!scriptEnable || !ytdFlexyElm) return;
  2824.  
  2825.     let items = querySelectorFromAnchor.call(playlist, "*:not(#tabview-playlist-wrapper) > ytd-playlist-panel-renderer#playlist:not(.ytd-miniplayer) #items.ytd-playlist-panel-renderer:not(:empty)");
  2826.  
  2827.     if (items !== null && playlist.nodeName.toUpperCase() === 'YTD-PLAYLIST-PANEL-RENDERER') {
  2828.  
  2829.       let tab_list = document.querySelector("#tab-list");
  2830.  
  2831.       if (!tab_list) return;
  2832.  
  2833.       let w = getWrapper("tabview-playlist-wrapper");
  2834.       let docFrag = new DocumentFragment();
  2835.       // avoid immediate reflow for append playlist before append to tab_list
  2836.       docFrag.appendChild(w);
  2837.       w.appendChild(playlist);
  2838.       tab_list.appendChild(docFrag);
  2839.       docFrag = null;
  2840.       w = null;
  2841.  
  2842.     }
  2843.   }
  2844.  
  2845.  
  2846.   function getCountHText(elm) {
  2847.     return `${pageFetchedDataVideoId || 0}...${elm.textContent}`
  2848.   }
  2849.  
  2850.   // content fix - info & playlist
  2851.   // fired at begining, and keep for in case any change
  2852.   function mtf_fix_details() {
  2853.  
  2854.     if (!scriptEnable) return Promise.resolve(0); // in case
  2855.  
  2856.     return Promise.all([
  2857.       new Promise(resolve => {
  2858.  
  2859.  
  2860.         let contentToggleBtn = document.querySelector('ytd-watch-flexy #tab-info ytd-expander tp-yt-paper-button#less.ytd-expander:not([hidden]), #tab-info ytd-expander tp-yt-paper-button#more.ytd-expander:not([hidden])');
  2861.  
  2862.         if (contentToggleBtn) {
  2863.  
  2864.           (() => {
  2865.             const domElement = contentToggleBtn;
  2866.             contentToggleBtn = null;
  2867.             // if(!domElement.parentElement) return; // not working in pseudo custom element - parentNode = documentFragment
  2868.             const expander = closestDOM.call(domElement, 'ytd-watch-flexy #tab-info ytd-expander')
  2869.  
  2870.             if (!expander || expander.nodeType !== 1) return; // checking whether it is still on the page
  2871.  
  2872.             if (expander.style.getPropertyValue('--ytd-expander-collapsed-height')) {
  2873.               expander.style.setProperty('--ytd-expander-collapsed-height', '')
  2874.             }
  2875.             nativeCall(expander, [
  2876.               { 'property': 'canToggleJobId', 'value': 1 }, // false disable calculateCanCollapse in childrenChanged
  2877.               { 'property': 'alwaysToggleable', 'value': false }, // this is checked in childrenChanged
  2878.               { 'property': 'recomputeOnResize', 'value': false }, // no need to check toggleable
  2879.               { 'property': 'isToggled', 'value': true }, // show full content
  2880.               { 'property': 'canToggle', 'value': false }, // hide show more or less btn
  2881.               { 'property': 'collapsedHeight', 'value': 999999 } // disable collapsed height check
  2882.             ])
  2883.  
  2884.           })();
  2885.         }
  2886.  
  2887.         resolve();
  2888.  
  2889.  
  2890.       }),
  2891.  
  2892.       new Promise(resolve => {
  2893.  
  2894.  
  2895.         let strcturedInfo = document.querySelector('ytd-watch-flexy #tab-info ytd-structured-description-content-renderer.style-scope.ytd-video-secondary-info-renderer[hidden]')
  2896.         if (strcturedInfo) {
  2897.  
  2898.           (() => {
  2899.  
  2900.             strcturedInfo.removeAttribute('hidden');
  2901.  
  2902.  
  2903.             setTimeout(() => {
  2904.  
  2905.  
  2906.               let e = closestDOM.call(strcturedInfo, 'ytd-watch-flexy #tab-info ytd-expander');
  2907.  
  2908.               if (!e) return;
  2909.               let s = querySelectorAllFromAnchor.call(e, '#tab-info .more-button.style-scope.ytd-video-secondary-info-renderer[role="button"]');
  2910.               if (s.length === 1) {
  2911.                 let sp = s[0].parentNode
  2912.                 if (sp.nodeName.toUpperCase() === 'TP-YT-PAPER-BUTTON') {
  2913.  
  2914.                   sp.click();
  2915.                 }
  2916.               }
  2917.  
  2918.             }, 300)
  2919.  
  2920.           })();
  2921.         }
  2922.  
  2923.  
  2924.         resolve();
  2925.  
  2926.       }),
  2927.  
  2928.       new Promise(resolve => {
  2929.  
  2930.  
  2931.         // just in case the playlist is collapsed
  2932.         let playlist = document.querySelector('#tab-list ytd-playlist-panel-renderer#playlist')
  2933.         if (playlist && playlist.matches('[collapsed], [collapsible]')) {
  2934.  
  2935.           (() => {
  2936.  
  2937.             const domElement = playlist;
  2938.             playlist = null;
  2939.             // if(!domElement.parentElement || domElement.nodeType!==1) return; // not working in pseudo custom element - parentNode = documentFragment
  2940.             const tablist = closestDOM.call(domElement, 'ytd-watch-flexy #tab-list')
  2941.  
  2942.             if (!tablist || tablist.nodeType !== 1) return; // checking whether it is still on the page
  2943.  
  2944.             if (domElement.hasAttribute('collapsed')) wAttr(domElement, 'collapsed', false);
  2945.             if (domElement.hasAttribute('collapsible')) wAttr(domElement, 'collapsible', false);
  2946.           })();
  2947.         }
  2948.  
  2949.         resolve();
  2950.  
  2951.  
  2952.       }),
  2953.  
  2954.       new Promise(resolve => {
  2955.  
  2956.  
  2957.         let subscribersCount = document.querySelector('#primary.ytd-watch-flexy #below ytd-watch-metadata #owner #owner-sub-count')
  2958.  
  2959.         if (subscribersCount) {
  2960.           if (!subscribersCount.hasAttribute('title')) {
  2961.             // assume YouTube native coding would not implement [title]
  2962.  
  2963.             let ytdWatchMetaDataElm = closestDOM.call(subscribersCount, 'body #primary.ytd-watch-flexy #below ytd-watch-metadata[modern-metapanel-order]:not([tabview-uploader-hover])');
  2964.             if (ytdWatchMetaDataElm) {
  2965.               ytdWatchMetaDataElm.setAttribute('tabview-uploader-hover', '')
  2966.               let _h = 0;
  2967.               ytdWatchMetaDataElm.addEventListener('transitionend', function (evt) {
  2968.                 // no css selector rule required; no delay js function call required
  2969.  
  2970.                 if (evt.propertyName === 'background-position-y') { // string comparision only
  2971.  
  2972.                   // If the cursor initially stayed at the owner info area, 
  2973.                   // the mechanism will be broken
  2974.                   // so implement the true leave detection at their parent
  2975.  
  2976.                   let isHover = evt.elapsedTime < 0.03; // 50ms @normal; 10ms @hover;
  2977.  
  2978.                   let cssRoot = this; // no querySelector is required
  2979.                   if (!isHover) {
  2980.                     // 50ms is slowest than sub element leave effect
  2981.                     if (_h > 0) cssRoot.classList.toggle('tabview-uploader-hover', false) // even the order is incorrect, removal of class is safe.
  2982.                     _h = 0; // in case
  2983.                   } else if (isHover) {
  2984.                     // 10ms is faster than sub element hover effect
  2985.                     // no removal of class in case browser's transition implemention order is incorrect
  2986.                     _h = 0; // in case
  2987.                   }
  2988.  
  2989.                 } else if (evt.propertyName === 'background-position-x') { // string comparision only
  2990.  
  2991.                   //from one element to another element; hover effect of 2nd element transition end first.
  2992.                   // _h: 0 -> 1 -> 2 -> 1
  2993.  
  2994.                   let isHover = evt.elapsedTime < 0.03; // 40ms @normal; 20ms @hover;
  2995.                   if (isHover) _h++; else _h--;
  2996.                   let cssRoot = this; // no querySelector is required
  2997.                   if (_h <= 0) {
  2998.                     cssRoot.classList.toggle('tabview-uploader-hover', false)
  2999.                     _h = 0; // in case
  3000.                   } else if (_h === 1) {
  3001.                     cssRoot.classList.toggle('tabview-uploader-hover', true)
  3002.                   }
  3003.  
  3004.                 }
  3005.  
  3006.               }, capturePassive) // capture the hover effect inside the cssRoot
  3007.             }
  3008.  
  3009.           }
  3010.           subscribersCount.setAttribute('title', subscribersCount.textContent); // set at every page update
  3011.  
  3012.         }
  3013.  
  3014.         resolve();
  3015.  
  3016.       })
  3017.  
  3018.  
  3019.     ]);
  3020.  
  3021.  
  3022.   }
  3023.  
  3024.  
  3025.   const innerCommentsFuncs = [
  3026.     // comments
  3027.     function () {
  3028.  
  3029.       let elm = kRef(this.elm);
  3030.       _console.log(2907, 1, !!elm)
  3031.       if (!elm) return;
  3032.  
  3033.       let span = document.querySelector("span#tyt-cm-count")
  3034.       let r = '0';
  3035.       let txt = elm.textContent
  3036.       if (typeof txt == 'string') {
  3037.         let m = txt.match(/[\d\,\s]+/)
  3038.         if (m) {
  3039.           r = m[0].trim()
  3040.         }
  3041.       }
  3042.  
  3043.       if (span) {
  3044.         let tab_btn = closestDOM.call(span, '.tab-btn[tyt-tab-content="#tab-comments"]')
  3045.         if (tab_btn) tab_btn.setAttribute('loaded-comment', 'normal')
  3046.         span.textContent = r;
  3047.       }
  3048.  
  3049.       setCommentSection(1);
  3050.       m_last_count = getCountHText(elm);
  3051.       _console.log(2907, 2, m_last_count)
  3052.       return true;
  3053.     },
  3054.     // message
  3055.     function () {
  3056.  
  3057.       let elm = kRef(this.elm);
  3058.       _console.log(2907, 2, !!elm)
  3059.       if (!elm) return;
  3060.  
  3061.       let span = document.querySelector("span#tyt-cm-count")
  3062.       if (span) {
  3063.         let tab_btn = closestDOM.call(span, '.tab-btn[tyt-tab-content="#tab-comments"]')
  3064.         if (tab_btn) tab_btn.setAttribute('loaded-comment', 'message')
  3065.         span.textContent = '\u200B';
  3066.       }
  3067.  
  3068.       setCommentSection(1);
  3069.       m_last_count = getCountHText(elm);
  3070.       _console.log(2907, 2, m_last_count)
  3071.       return true;
  3072.     }
  3073.   ]
  3074.  
  3075.  
  3076.   let innerDOMCommentsCountTextCache = null;
  3077.   function innerDOMCommentsCountLoader() {
  3078.     // independent of tabs initialization
  3079.     // f() is executed after tabs being ready
  3080.  
  3081.     /** @type {HTMLElement | null} */
  3082.     const ytdFlexyElm = es.ytdFlexy;
  3083.     if (!scriptEnable || !ytdFlexyElm) return;
  3084.  
  3085.     _console.log(3434, pageType)
  3086.     if (pageType !== 'watch') return;
  3087.  
  3088.  
  3089.     /** @type {Array<HTMLElement>} */
  3090.     let qmElms = [...document.querySelectorAll('ytd-comments#comments #count.ytd-comments-header-renderer, ytd-comments#comments ytd-item-section-renderer.ytd-comments#sections #header ~ #contents > ytd-message-renderer.ytd-item-section-renderer')]
  3091.  
  3092.  
  3093.     const eTime = +`${Date.now() - mTime}00`;
  3094.  
  3095.     let res = new Array(qmElms.length);
  3096.     res.newFound = false;
  3097.  
  3098.  
  3099.     let ci = 0;
  3100.     let latest = -1;
  3101.  
  3102.     let retrival = cmTime;
  3103.     cmTime = eTime;
  3104.  
  3105.     for (const qmElm of qmElms) {
  3106.  
  3107.       let mgz = 0
  3108.       if (qmElm.id === 'count') {
  3109.         //#count.ytd-comments-header-renderer
  3110.         mgz = 1;
  3111.  
  3112.       } else if ((qmElm.textContent || '').trim()) {
  3113.         //ytd-message-renderer.ytd-item-section-renderer
  3114.         mgz = 2;
  3115.         // it is possible to get the message before the header generation.
  3116.         // sample link - https://www.youtube.com/watch?v=PVUZ8Nvr1ic
  3117.         // sample link - https://www.youtube.com/watch?v=yz8AiQc1Bk8
  3118.       }
  3119.  
  3120.       if (mgz > 0) {
  3121.  
  3122.  
  3123.         let lastUpdate = loadedCommentsDT.get(qmElm) || 0;
  3124.         let diff = retrival - lastUpdate
  3125.         _console.log(2907, diff)
  3126.         let isNew = (diff > 4 || diff < -4);
  3127.         if (!isNew) {
  3128.           loadedCommentsDT.set(qmElm, eTime);
  3129.         } else {
  3130.           loadedCommentsDT.set(qmElm, eTime + 1);
  3131.           res.newFound = true;
  3132.           latest = ci;
  3133.         }
  3134.  
  3135.         res[ci] = {
  3136.           elm: mWeakRef(qmElm),
  3137.           isNew: isNew,
  3138.           isLatest: false, //set afterwards
  3139.           f: innerCommentsFuncs[mgz - 1]
  3140.         }
  3141.  
  3142.         if (DEBUG_LOG) {
  3143.           res[ci].status = mgz;
  3144.           res[ci].text = qmElm.textContent;
  3145.         }
  3146.  
  3147.         ci++;
  3148.  
  3149.       }
  3150.  
  3151.     }
  3152.     if (res.length > ci) res.length = ci;
  3153.  
  3154.     if (latest >= 0) {
  3155.  
  3156.       res[latest].isLatest = true;
  3157.  
  3158.  
  3159.       let elm = kRef(res[latest].elm);
  3160.       if (elm)
  3161.         innerDOMCommentsCountTextCache = elm.textContent;
  3162.  
  3163.     } else if (res.length === 1) {
  3164.  
  3165.       let qmElm = kRef(res[0].elm);
  3166.       let t = null;
  3167.       if (qmElm) {
  3168.  
  3169.         let t = qmElm.textContent;
  3170.         if (t !== innerDOMCommentsCountTextCache) {
  3171.  
  3172.  
  3173.           loadedCommentsDT.set(qmElm, eTime + 1);
  3174.           res.newFound = true;
  3175.  
  3176.           res[0].isNew = true;
  3177.           latest = 0;
  3178.  
  3179.           res[latest].isLatest = true;
  3180.  
  3181.         }
  3182.  
  3183.         innerDOMCommentsCountTextCache = t;
  3184.  
  3185.  
  3186.       }
  3187.  
  3188.  
  3189.     }
  3190.  
  3191.  
  3192.     _console.log(2908, res, Q.comments_section_loaded)
  3193.  
  3194.     _console.log(696, res.map(e => ({
  3195.  
  3196.       text: kRef(e.elm).textContent,
  3197.       isNew: e.isNew,
  3198.       isLatest: e.isLatest
  3199.  
  3200.     })))
  3201.  
  3202.     return res;
  3203.  
  3204.   }
  3205.  
  3206.   function restoreFetching() {
  3207.  
  3208.  
  3209.     if (mtf_forceCheckLiveVideo_disable === 2) return;
  3210.  
  3211.  
  3212.     const ytdFlexyElm = es.ytdFlexy;
  3213.     if (!ytdFlexyElm) return;
  3214.  
  3215.     _console.log(2901)
  3216.  
  3217.     if ((ytdFlexyElm.getAttribute('tyt-comments') || '').indexOf('K') >= 0) return;
  3218.  
  3219.     _console.log(2902)
  3220.  
  3221.     let visibleComments = querySelectorFromAnchor.call(ytdFlexyElm, 'ytd-comments#comments:not([hidden])')
  3222.     if (!visibleComments) return;
  3223.  
  3224.     _console.log(2903)
  3225.  
  3226.  
  3227.     ytdFlexyElm.setAttribute('tyt-comments', 'Kz');
  3228.  
  3229.     const tabBtn = document.querySelector('[tyt-tab-content="#tab-comments"]');
  3230.     let span = querySelectorFromAnchor.call(tabBtn, 'span#tyt-cm-count');
  3231.     tabBtn.removeAttribute('loaded-comment')
  3232.     span.innerHTML = '';
  3233.  
  3234.     if (tabBtn) {
  3235.       tabBtn.classList.remove("tab-btn-hidden")
  3236.     }
  3237.  
  3238.     _console.log(2905)
  3239.  
  3240.  
  3241.   }
  3242.  
  3243.   const resultCommentsCountCaching = (res) => {
  3244.     // update fetchCounts by res
  3245.     // indepedent of previous state of fetchCounts
  3246.     _console.log(2908, 10, res)
  3247.     if (!res) return;
  3248.     fetchCounts.count = res.length;
  3249.     //if(fetchCounts.new && !document.documentElement.contains(fetchCounts.new.elm)) fetchCounts.new = null;
  3250.     //if(fetchCounts.base && !document.documentElement.contains(fetchCounts.base.elm)) fetchCounts.base = null;
  3251.     if (fetchCounts.new) return;
  3252.     let newFound = res.newFound;
  3253.     if (!newFound) {
  3254.       if (res.length === 1) {
  3255.         fetchCounts.base = res[0];
  3256.         return false;
  3257.       }
  3258.     } else if (res.length === 1) {
  3259.       fetchCounts.new = res[0];
  3260.       return true;
  3261.     } else if (res.length > 1) {
  3262.       for (const entry of res) {
  3263.         if (entry.isLatest === true && entry.isNew) {
  3264.           fetchCounts.new = entry;
  3265.           return true;
  3266.         }
  3267.       }
  3268.     }
  3269.   }
  3270.  
  3271.   const domInit_comments = () => {
  3272.  
  3273.  
  3274.     let comments = document.querySelector(`ytd-comments#comments:not([o3r-${sa_comments}])`);
  3275.     if (!comments) return;
  3276.  
  3277.     // once per {ytd-comments#comments} detection
  3278.  
  3279.     const ytdFlexyElm = es.ytdFlexy;
  3280.     if (!scriptEnable || !ytdFlexyElm) return;
  3281.  
  3282.     _console.log(3901)
  3283.  
  3284.     if (mtoVisibility_Comments.bindElement(comments)) {
  3285.       mtoVisibility_Comments.observer.check(9);
  3286.     }
  3287.  
  3288.  
  3289.   };
  3290.  
  3291.   const domInit_teaserInfo = () => {
  3292.     //obsolete?
  3293.  
  3294.     let teaserInfo = document.querySelector('#description-and-actions.style-scope.ytd-watch-metadata > #description ytd-text-inline-expander:not([tabview-removed-duplicate])');
  3295.  
  3296.     if (!teaserInfo) return;
  3297.  
  3298.     // for Teaser UI
  3299.     // once per {#description-and-actions.style-scope.ytd-watch-metadata > #description > ytd-text-inline-expander} detection
  3300.  
  3301.     const ytdFlexyElm = es.ytdFlexy;
  3302.     if (!scriptEnable || !ytdFlexyElm) return;
  3303.     let addedInfo = document.querySelector('#tab-info ytd-expander[tabview-info-expander]');
  3304.  
  3305.     if (!addedInfo) return;
  3306.  
  3307.     scriptletDeferred.debounce(() => {
  3308.  
  3309.       teaserInfo.setAttribute('tabview-removed-duplicate', '')
  3310.       teaserInfo.dispatchEvent(new CustomEvent('tabview-no-duplicate-info'))
  3311.  
  3312.     })
  3313.  
  3314.  
  3315.   }
  3316.  
  3317.  
  3318.   const FP = {
  3319.  
  3320.     mtf_attrPlaylist: (attrName, newValue) => {
  3321.       //attr mutation checker - {ytd-playlist-panel-renderer#playlist} \single
  3322.       //::attr ~ hidden    
  3323.       //console.log(1210)
  3324.  
  3325.       _console.log(21311)
  3326.       if (!scriptEnable) return;
  3327.       if (pageType !== 'watch') return;
  3328.       /** @type {HTMLElement|null} */
  3329.       let cssElm = es.ytdFlexy;
  3330.       if (!cssElm) return;
  3331.  
  3332.       _console.log(21312)
  3333.  
  3334.       let playlist = document.querySelector('#tab-list ytd-playlist-panel-renderer#playlist'); // can be null if it is manually triggered
  3335.       let isAnyPlaylistExist = playlist && !playlist.hasAttribute('hidden');
  3336.       const tabBtn = document.querySelector('[tyt-tab-content="#tab-list"]');
  3337.       //console.log(1212.2, isPlaylistHidden, playlist.getAttribute('hidden'))
  3338.       if (tabBtn) {
  3339.         //console.log('attr playlist changed')
  3340.         let isPlaylistTabHidden = tabBtn.classList.contains('tab-btn-hidden')
  3341.         if (isPlaylistTabHidden && isAnyPlaylistExist) {
  3342.           //console.log('attr playlist changed - no hide')
  3343.           tabBtn.classList.remove("tab-btn-hidden");
  3344.         } else if (!isPlaylistTabHidden && !isAnyPlaylistExist) {
  3345.           //console.log('attr playlist changed - add hide')
  3346.           hideTabBtn(tabBtn);
  3347.         }
  3348.       }
  3349.       /* visible layout for triggering hidden removal */
  3350.  
  3351.     },
  3352.     mtf_attrComments: (attrName, newValue) => {
  3353.       //attr mutation checker - {ytd-comments#comments} \single
  3354.       //::attr ~ hidden
  3355.  
  3356.       // *** consider this can happen immediately after pop state. timeout / interval might clear out.
  3357.  
  3358.       renderDeferred.resolved && resultCommentsCountCaching(innerDOMCommentsCountLoader());
  3359.       // this is triggered by mutationobserver, the comment count update might have ouccred
  3360.  
  3361.       if (pageType !== 'watch') return;
  3362.  
  3363.       let comments = document.querySelector('ytd-comments#comments')
  3364.       const tabBtn = document.querySelector('[tyt-tab-content="#tab-comments"]');
  3365.       if (!comments || !tabBtn) return;
  3366.       let isCommentHidden = comments.hasAttribute('hidden')
  3367.       //console.log('attr comments changed')
  3368.  
  3369.  
  3370.       const ytdFlexyElm = es.ytdFlexy;
  3371.       if (!scriptEnable || !ytdFlexyElm) return;
  3372.  
  3373.       if (mtf_forceCheckLiveVideo_disable === 2) {
  3374.  
  3375.       } else if (!isCommentHidden) {
  3376.  
  3377.         ytdFlexyElm.setAttribute('tyt-comments', 'Kv');
  3378.         if (!fetchCounts.fetched) {
  3379.           emptyCommentSection();
  3380.         }
  3381.         //_console.log(9360, 71);
  3382.         tabBtn.classList.remove("tab-btn-hidden") //if contains
  3383.  
  3384.       } else if (isCommentHidden) {
  3385.  
  3386.         ytdFlexyElm.setAttribute('tyt-comments', 'Kh');
  3387.         if (pageType === 'watch' && Q.comments_section_loaded === 1) {
  3388.           emptyCommentSection();
  3389.           _console.log(9360, 72);
  3390.         }
  3391.  
  3392.       }
  3393.  
  3394.  
  3395.     },
  3396.  
  3397.     mtf_attrChatroom: (attrName, newValue) => {
  3398.       //attr mutation checker - {ytd-live-chat-frame#chat} \single
  3399.       //::attr ~ collapsed
  3400.  
  3401.       const ytdFlexyElm = es.ytdFlexy;
  3402.       if (!scriptEnable || !ytdFlexyElm) return;
  3403.       if (pageType !== 'watch') return;
  3404.  
  3405.       setToggleBtnTxt();
  3406.  
  3407.       layoutStatusMutex.lockWith(unlock => {
  3408.  
  3409.         const chatBlock = document.querySelector('ytd-live-chat-frame#chat')
  3410.         /** @type {HTMLElement | null} */
  3411.         const cssElm = es.ytdFlexy;
  3412.  
  3413.         if (!chatBlock || !cssElm) {
  3414.           unlock();
  3415.           return;
  3416.         }
  3417.  
  3418.         if (pageType !== 'watch') {
  3419.           unlock();
  3420.           return;
  3421.         }
  3422.  
  3423.         let newAttrV = '';
  3424.         //mtf_attrChatroom => chat exist => tyt-chat non-null
  3425.  
  3426.         let isCollapsed = !!chatBlock.hasAttribute('collapsed');
  3427.  
  3428.         let currentAttr = cssElm.getAttribute('tyt-chat');
  3429.  
  3430.         if (currentAttr !== null) { //string     // [+-]?[az]+[az\$]+
  3431.           let isPlusMinus = currentAttr.charCodeAt(0) < 46; // 43 OR 45
  3432.           if (isPlusMinus) newAttrV = currentAttr.substring(1);
  3433.         }
  3434.  
  3435.         if (isCollapsed) newAttrV = `-${newAttrV}`;
  3436.         if (!isCollapsed) newAttrV = `+${newAttrV}`;
  3437.  
  3438.         wAttr(cssElm, 'tyt-chat', newAttrV);
  3439.  
  3440.  
  3441.         if (typeof newAttrV === 'string' && !isCollapsed) lstTab.lastPanel = '#chatroom';
  3442.  
  3443.         if (!isCollapsed && isAnyActiveTab() && isWideScreenWithTwoColumns() && !isTheater()) {
  3444.           switchTabActivity(null);
  3445.           timeline.setTimeout(unlock, 40);
  3446.         } else {
  3447.           unlock();
  3448.         }
  3449.  
  3450.         if (isCollapsed) {
  3451.           chatBlock.removeAttribute('tyt-iframe-loaded');
  3452.           // console.log(922,1)
  3453.           // buggy; this section might not be correctly executed.
  3454.           // guess no collaspe change but still iframe will distory and reload.
  3455.           let btn = document.querySelector('tyt-iframe-popup-btn')
  3456.           if(btn) btn.remove();
  3457.         }
  3458.  
  3459.       })
  3460.  
  3461.  
  3462.     },
  3463.  
  3464.     mtf_attrEngagementPanel: ( /** @type {MutationRecord[]} */ mutations, /** @type {MutationObserver} */ observer) => {
  3465.       //attr mutation checker - {ytd-engagement-panel-section-list-renderer} \mutiple
  3466.       //::attr ~ visibility
  3467.  
  3468.       const cssElm = es.ytdFlexy;
  3469.       if (!scriptEnable || !cssElm) return;
  3470.       let found = null
  3471.       if (mutations === 9) {
  3472.         found = observer
  3473.       } else {
  3474.         if (document.querySelector('ytd-watch-flexy[flexy][tyt-tab] #panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id][visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"]:not([hidden])')) {
  3475.           // do nothing
  3476.         } else {
  3477.           mtoVisibility_EngagementPanel.clear(true)
  3478.           storeLastPanel = null;
  3479.           wAttr(cssElm, 'tyt-ep-visible', false);
  3480.         }
  3481.         return
  3482.       }
  3483.       let nextValue = engagement_panels_().value;
  3484.       let previousValue = +cssElm.getAttribute('tyt-ep-visible') || 0;
  3485.       if (nextValue === 0 || previousValue === nextValue) return
  3486.       cssElm.setAttribute('tyt-ep-visible', nextValue);
  3487.       lstTab.lastPanel = `#engagement-panel-${nextValue}`;
  3488.       storeLastPanel = mWeakRef(found)
  3489.       let tabsDeferredSess = pageSession.session();
  3490.       if (!scriptEnable && tabsDeferred.resolved) { }
  3491.       else tabsDeferred.debounce(() => {
  3492.         if (!tabsDeferredSess.isValid) return;
  3493.         tabsDeferredSess = null;
  3494.         if (es.storeLastPanel !== found) return
  3495.         layoutStatusMutex.lockWith(unlock => {
  3496.           if (es.storeLastPanel === found && whenEngagemenetPanelVisible()) {
  3497.             timeline.setTimeout(unlock, 40);
  3498.           } else {
  3499.             unlock();
  3500.           }
  3501.         })
  3502.       })
  3503.     }
  3504.  
  3505.   }
  3506.  
  3507.  
  3508.   function variableResets() {
  3509.  
  3510.     // reset variables when it is confirmed a new page is loaded
  3511.  
  3512.     lstTab =
  3513.     {
  3514.       lastTab: null, //tab-xxx
  3515.       lastPanel: null,
  3516.       last: null
  3517.     };
  3518.  
  3519.     scriptEnable = false;
  3520.     ytdFlexy = null;
  3521.     wls.layoutStatus = 0;
  3522.  
  3523.     mtoVisibility_Playlist.clear(true)
  3524.     mtoVisibility_Comments.clear(true)
  3525.  
  3526.     mtoVisibility_Chatroom.clear(true)
  3527.     mtoFlexyAttr.clear(true)
  3528.  
  3529.  
  3530.     for (const elem of document.querySelectorAll('ytd-expander[tabview-info-expander]')) {
  3531.       elem.removeAttribute('tabview-info-expander');
  3532.     }
  3533.  
  3534.     mtf_chatBlockQ = null;
  3535.  
  3536.   }
  3537.  
  3538.  
  3539.   function getWord(tag) {
  3540.     return langWords[pageLang][tag] || langWords['en'][tag] || '';
  3541.   }
  3542.  
  3543.  
  3544.   function getTabsHTML() {
  3545.  
  3546.     const sTabBtnVideos = `${svgElm(16, 16, 90, 90, svgVideos)}<span>${getWord('videos')}</span>`;
  3547.     const sTabBtnInfo = `${svgElm(16, 16, 60, 60, svgInfo)}<span>${getWord('info')}</span>`;
  3548.     const sTabBtnPlayList = `${svgElm(16, 16, 20, 20, svgPlayList)}<span>${getWord('playlist')}</span>`;
  3549.  
  3550.     let str1 = `
  3551.         <paper-ripple class="style-scope yt-icon-button">
  3552.             <div id="background" class="style-scope paper-ripple" style="opacity:0;"></div>
  3553.             <div id="waves" class="style-scope paper-ripple"></div>
  3554.         </paper-ripple>
  3555.         `;
  3556.  
  3557.     let str_fbtns = `
  3558.     <div class="font-size-right">
  3559.     <div class="font-size-btn font-size-plus" tyt-di="8rdLQ">
  3560.     <svg width="12" height="12" viewbox="0 0 50 50" preserveAspectRatio="xMidYMid meet" 
  3561.     stroke="currentColor" stroke-width="6" stroke-linecap="round" vector-effect="non-scaling-size">
  3562.       <path d="M12 25H38M25 12V38"/>
  3563.     </svg>
  3564.     </div><div class="font-size-btn font-size-minus" tyt-di="8rdLQ">
  3565.     <svg width="12" height="12" viewbox="0 0 50 50" preserveAspectRatio="xMidYMid meet"
  3566.     stroke="currentColor" stroke-width="6" stroke-linecap="round" vector-effect="non-scaling-size">
  3567.       <path d="M12 25h26"/>
  3568.     </svg>
  3569.     </div>
  3570.     </div>
  3571.     `.replace(/[\r\n]+/g, '');
  3572.  
  3573.     const str_tabs = [
  3574.       `<a id="tab-btn1" tyt-di="q9Kjc" tyt-tab-content="#tab-info" class="tab-btn">${sTabBtnInfo}${str1}${str_fbtns}</a>`,
  3575.       `<a id="tab-btn3" tyt-di="q9Kjc" tyt-tab-content="#tab-comments" class="tab-btn">${svgElm(16, 16, 120, 120, svgComments)}<span id="tyt-cm-count"></span>${str1}${str_fbtns}</a>`,
  3576.       `<a id="tab-btn4" tyt-di="q9Kjc" tyt-tab-content="#tab-videos" class="tab-btn">${sTabBtnVideos}${str1}${str_fbtns}</a>`,
  3577.       `<a id="tab-btn5" tyt-di="q9Kjc" tyt-tab-content="#tab-list" class="tab-btn tab-btn-hidden">${sTabBtnPlayList}${str1}${str_fbtns}</a>`
  3578.     ].join('');
  3579.  
  3580.     let addHTML = `
  3581.         <div id="right-tabs">
  3582.             <tabview-view-pos-thead></tabview-view-pos-thead>
  3583.             <header>
  3584.                 <div id="material-tabs">
  3585.                     ${str_tabs}
  3586.                 </div>
  3587.             </header>
  3588.             <div class="tab-content">
  3589.                 <div id="tab-info" class="tab-content-cld tab-content-hidden" userscript-scrollbar-render></div>
  3590.                 <div id="tab-comments" class="tab-content-cld tab-content-hidden" userscript-scrollbar-render></div>
  3591.                 <div id="tab-videos" class="tab-content-cld tab-content-hidden" userscript-scrollbar-render></div>
  3592.                 <div id="tab-list" class="tab-content-cld tab-content-hidden" userscript-scrollbar-render></div>
  3593.             </div>
  3594.         </div>
  3595.         `;
  3596.  
  3597.     return addHTML;
  3598.  
  3599.   }
  3600.  
  3601.   function getLang() {
  3602.  
  3603.     let lang = 'en';
  3604.     let htmlLang = ((document || 0).documentElement || 0).lang || '';
  3605.     switch (htmlLang) {
  3606.       case 'en':
  3607.       case 'en-GB':
  3608.         lang = 'en';
  3609.         break;
  3610.       case 'de':
  3611.       case 'de-DE':
  3612.         lang = 'du';
  3613.         break;
  3614.       case 'fr':
  3615.       case 'fr-CA':
  3616.       case 'fr-FR':
  3617.         lang = 'fr';
  3618.         break;
  3619.       case 'zh-Hant':
  3620.       case 'zh-Hant-HK':
  3621.       case 'zh-Hant-TW':
  3622.         lang = 'tw';
  3623.         break;
  3624.       case 'zh-Hans':
  3625.       case 'zh-Hans-CN':
  3626.         lang = 'cn';
  3627.         break;
  3628.       case 'ja':
  3629.       case 'ja-JP':
  3630.         lang = 'jp';
  3631.         break;
  3632.       case 'ko':
  3633.       case 'ko-KR':
  3634.         lang = 'kr';
  3635.         break;
  3636.       case 'ru':
  3637.       case 'ru-RU':
  3638.         lang = 'ru';
  3639.         break;
  3640.       default:
  3641.         lang = 'en';
  3642.     }
  3643.  
  3644.     if (langWords[lang]) pageLang = lang; else pageLang = 'en';
  3645.  
  3646.   }
  3647.  
  3648.   // function checkEvtTarget(evt, nodeNames) {
  3649.   //   return nodeNames.includes((((evt || 0).target || 0).nodeName || 0));
  3650.   // }
  3651.  
  3652.   function pageCheck() {
  3653.     // yt-player-updated
  3654.     // yt-page-data-updated
  3655.     // yt-watch-comments-ready - omitted
  3656.     // [is-two-columns_] attr changed => layout changed
  3657.  
  3658.     /** @type {HTMLElement | null} */
  3659.     const ytdFlexyElm = es.ytdFlexy;
  3660.     if (!scriptEnable || !ytdFlexyElm) return;
  3661.  
  3662.     let comments = querySelectorFromAnchor.call(ytdFlexyElm, '#primary.ytd-watch-flexy ytd-watch-metadata ~ ytd-comments#comments');
  3663.     if (comments) {
  3664.       let tabComments = document.querySelector('#tab-comments');
  3665.       if (tabComments) {
  3666.         tabComments.appendChild(comments);
  3667.       }
  3668.     }
  3669.  
  3670.     mtf_append_playlist(null); // playlist relocated after layout changed
  3671.  
  3672.     fixTabs();
  3673.  
  3674.     mtf_autocomplete_search();
  3675.  
  3676.   }
  3677.  
  3678.   function globalHook(eventType, func) {
  3679.     if (!func) return;
  3680.  
  3681.     const count = (globalHook_hashs[eventType] || 0) + 1;
  3682.  
  3683.     globalHook_hashs[eventType] = count;
  3684.  
  3685.     const s = globalHook_symbols[count - 1] || (globalHook_symbols[count - 1] = Symbol());
  3686.  
  3687.     document.addEventListener(eventType, function (evt) {
  3688.       if (evt[s]) return;
  3689.       evt[s] = true;
  3690.       new Promise(() => {
  3691.         func(evt);
  3692.       })
  3693.  
  3694.     }, capturePassive)
  3695.  
  3696.   }
  3697.  
  3698.   async function makeHeaderFloat() {
  3699.     if (isMakeHeaderFloatCalled) return;
  3700.     isMakeHeaderFloatCalled = true;
  3701.     await Promise.resolve(0);
  3702.  
  3703.  
  3704.     const [header, headerP, navElm] = await Promise.all([
  3705.       new Promise(f => f(document.querySelector("#right-tabs header"))),
  3706.  
  3707.       new Promise(f => f(document.querySelector("#right-tabs tabview-view-pos-thead"))),
  3708.  
  3709.       new Promise(f => f(document.querySelector('#masthead-container, #masthead')))
  3710.  
  3711.     ]);
  3712.  
  3713.  
  3714.     let ito_dt = 0;
  3715.     let ito = new IntersectionObserver((entries) => {
  3716.  
  3717.       let xyStatus = null;
  3718.  
  3719.       //console.log(entries);
  3720.  
  3721.       let xRect = null;
  3722.       let rRect = null;
  3723.  
  3724.       for (const entry of entries) {
  3725.         if (!entry.boundingClientRect || !entry.rootBounds) continue; // disconnected from DOM tree
  3726.         if (!entry.isIntersecting && entry.boundingClientRect.y <= entry.rootBounds.top && entry.boundingClientRect.y < entry.rootBounds.bottom) {
  3727.           xyStatus = 2;
  3728.           xRect = entry.boundingClientRect;
  3729.           rRect = entry.rootBounds;
  3730.         } else if (entry.isIntersecting && entry.boundingClientRect.y >= entry.rootBounds.top && entry.boundingClientRect.y < entry.rootBounds.bottom) {
  3731.           xyStatus = 1;
  3732.           xRect = entry.boundingClientRect;
  3733.           rRect = entry.rootBounds;
  3734.         }
  3735.       }
  3736.       let p = wls.layoutStatus;
  3737.       //console.log(document.documentElement.clientWidth)
  3738.       if (xyStatus !== null) {
  3739.  
  3740.         if (xyStatus === 2 && isStickyHeaderEnabled === true) {
  3741.  
  3742.         } else if (xyStatus === 1 && isStickyHeaderEnabled === false) {
  3743.  
  3744.         } else {
  3745.           singleColumnScrolling2(xyStatus, xRect.width, {
  3746.             left: xRect.left,
  3747.             right: rRect.width - xRect.right
  3748.           });
  3749.         }
  3750.  
  3751.       }
  3752.  
  3753.       let tdt = Date.now();
  3754.       ito_dt = tdt;
  3755.       setTimeout(() => {
  3756.         if (ito_dt !== tdt) return;
  3757.         if (p !== wls.layoutStatus) singleColumnScrolling();
  3758.       }, 300)
  3759.  
  3760.     },
  3761.       {
  3762.         rootMargin: `0px 0px 0px 0px`,
  3763.         threshold: [0]
  3764.       })
  3765.  
  3766.     ito.observe(headerP)
  3767.  
  3768.   }
  3769.  
  3770.   function checkPlaylistForInitialization() {
  3771.     // if the page url is with playlist; renderer event might not occur.
  3772.  
  3773.     // playlist already added to dom; this is to set the visibility event and change hidden status
  3774.  
  3775.     let m_playlist = document.querySelector(`#tab-list ytd-playlist-panel-renderer#playlist:not([o3r-${sa_playlist}])`)
  3776.  
  3777.     // once per {ytd-playlist-panel-renderer#playlist} detection
  3778.  
  3779.     _console.log(3902, !!m_playlist)
  3780.  
  3781.     const ytdFlexyElm = es.ytdFlexy;
  3782.     if (!scriptEnable || !ytdFlexyElm) { }
  3783.     else if (m_playlist) {
  3784.  
  3785.       if (mtoVisibility_Playlist.bindElement(m_playlist)) {
  3786.         mtoVisibility_Playlist.observer.check(9); //delay check required for browser bug - hidden changed not triggered 
  3787.       }
  3788.       m_playlist = null;
  3789.  
  3790.     }
  3791.  
  3792.     FP.mtf_attrPlaylist();
  3793.  
  3794.     Promise.resolve(0).then(() => {
  3795.       // ['tab-btn', 'tab-btn', 'tab-btn active', 'tab-btn tab-btn-hidden']
  3796.       // bug
  3797.       const ytdFlexyElm = es.ytdFlexy;
  3798.       if (!scriptEnable || !ytdFlexyElm) return;
  3799.       if (!switchTabActivity_lastTab && (ytdFlexyElm.getAttribute('tyt-tab') + '').indexOf('#tab-') === 0 && /https\:\/\/www\.youtube\.com\/watch.*[\?\&]list=[\w\-\_]+/.test(location.href)) {
  3800.         if (setToActiveTab('#tab-list')) switchTabActivity_lastTab = '#tab-list';
  3801.       }
  3802.     })
  3803.  
  3804.   }
  3805.  
  3806.  
  3807.   const _pageBeingInit = function () {
  3808.  
  3809.     pageSession.inc();
  3810.     if (pageSession.sid > 9e9) pageSession.sid = 9;
  3811.  
  3812.     fetchCounts = {
  3813.       base: null,
  3814.       new: null,
  3815.       fetched: false,
  3816.       count: null
  3817.     }
  3818.     pageFetchedData = null;
  3819.     pageFetchedDataVideoId = null;
  3820.     chatroomDetails = null;
  3821.   }
  3822.  
  3823.   const pageBeingInit = function () {
  3824.  
  3825.     if(_isPageFirstLoaded && location.pathname==='/watch') document.documentElement.setAttribute('tyt-lock', '')
  3826.  
  3827.     // call regardless pageType
  3828.     // run once on / before pageSeq2
  3829.  
  3830.     let action = 0;
  3831.     if (tabsDeferred.resolved) {
  3832.       action = 1;
  3833.     } else if (renderDeferred.resolved) {
  3834.       // in case , rarely, tabsDeferred not yet resolved but animateLoadDeferred resolved
  3835.       action = 2;
  3836.     }
  3837.     
  3838.     renderIdentifier++;
  3839.     if (renderIdentifier > 1e9) renderIdentifier = 9;
  3840.     renderDeferred.reset();
  3841.  
  3842.     if (action === 1) {
  3843.       comments_loader = 1;
  3844.       tabsDeferred.reset();
  3845.       if ((firstLoadStatus & 8) === 0) {
  3846.         innerDOMCommentsCountLoader(); //ensure the previous record is saved
  3847.         // no need to cache to the rendering state
  3848.         _pageBeingInit();
  3849.       } else if ((firstLoadStatus & 2) === 2) {
  3850.         firstLoadStatus -= 2;
  3851.         script_inject_js1.inject();
  3852.       }
  3853.       _console.log('pageBeingInit', firstLoadStatus)
  3854.     }
  3855.  
  3856.     if (pageRendered === 2) {
  3857.       pageRendered = 0;
  3858.       let elmPL = document.querySelector('tabview-view-ploader');
  3859.       if (elmPL) elmPL.remove();
  3860.       pageRendered = 0;
  3861.     }
  3862.  
  3863.     if (!scriptletDeferred.resolved) {
  3864.       // just in case, should not happen this.
  3865.       // this is to clear the pending queue if scriptlet is not ready.
  3866.       scriptletDeferred.reset();
  3867.     }
  3868.  
  3869.   };
  3870.  
  3871.   const advanceFetch = async function () {
  3872.     if (pageType === 'watch' && !fetchCounts.new && !fetchCounts.fetched) {
  3873.       renderDeferred.resolved && resultCommentsCountCaching(innerDOMCommentsCountLoader());
  3874.       if (renderDeferred.resolved && !fetchCounts.new) {
  3875.         window.dispatchEvent(new Event("scroll"));
  3876.       }
  3877.     }
  3878.   };
  3879.  
  3880.   function getFinalComments() {
  3881.  
  3882.     if ((comments_loader & 3) === 3) { } else return;
  3883.     comments_loader = 0;
  3884.  
  3885.     let ei = 0;
  3886.  
  3887.     function execute() {
  3888.       //sync -> animateLoadDeferred.resolved always true
  3889.  
  3890.       if (!renderDeferred.resolved) return;
  3891.  
  3892.       _console.log(2323)
  3893.  
  3894.       if (Q.comments_section_loaded !== 0) return;
  3895.       if (fetchCounts.fetched) return;
  3896.  
  3897.  
  3898.       let ret = innerDOMCommentsCountLoader();
  3899.       resultCommentsCountCaching(ret);
  3900.  
  3901.       if (fetchCounts.new && !fetchCounts.fetched) {
  3902.  
  3903.         _console.log(4512, 4, Q.comments_section_loaded, fetchCounts.new, !fetchCounts.fetched)
  3904.         if (fetchCounts.new.f()) {
  3905.           fetchCounts.fetched = true;
  3906.           _console.log(9972, 'fetched = true')
  3907.           fetchCommentsFinished();
  3908.         }
  3909.  
  3910.         return;
  3911.       }
  3912.  
  3913.  
  3914.       ei++;
  3915.  
  3916.       if (fetchCounts.base && !fetchCounts.new && !fetchCounts.fetched && fetchCounts.count === 1) {
  3917.  
  3918.  
  3919.         let elm = kRef(fetchCounts.base.elm);
  3920.         let txt = elm ? getCountHText(elm) : null;
  3921.         let condi1 = ei > 7;
  3922.         let condi2 = txt === m_last_count;
  3923.         if (condi1 || condi2) {
  3924.  
  3925.           if (fetchCounts.base.f()) {
  3926.             fetchCounts.fetched = true;
  3927.             _console.log(9972, 'fetched = true')
  3928.             //return true;
  3929.             fetchCommentsFinished();
  3930.           }
  3931.  
  3932.         }
  3933.  
  3934.       }
  3935.  
  3936.       if (!fetchCounts.fetched) {
  3937.         if (ei > 7) {
  3938.           let elm = ret.length === 1 ? kRef(ret[0].elm) : null;
  3939.           let txt = elm ? getCountHText(elm) : null;
  3940.           if (elm && txt !== m_last_count) {
  3941.             fetchCounts.base = null;
  3942.             fetchCounts.new = ret[0];
  3943.             fetchCounts.new.f();
  3944.             fetchCounts.fetched = true;
  3945.             _console.log(9979, 'fetched = true')
  3946.             fetchCommentsFinished();
  3947.           }
  3948.           return;
  3949.         }
  3950.         return true;
  3951.       }
  3952.  
  3953.     }
  3954.  
  3955.  
  3956.     async function alCheckFn(ks) {
  3957.  
  3958.       let alCheckCount = 9;
  3959.       let alCheckInterval = 420;
  3960.  
  3961.       do {
  3962.  
  3963.         if (renderIdentifier !== ks) break;
  3964.         if (alCheckCount === 0) break;
  3965.         if (execute() !== true) break;
  3966.         --alCheckCount;
  3967.  
  3968.         await new Promise(r => setTimeout(r, alCheckInterval));
  3969.  
  3970.       } while (true)
  3971.  
  3972.     }
  3973.     let ks = renderIdentifier;
  3974.     renderDeferred.debounce(() => {
  3975.       if (ks !== renderIdentifier) return
  3976.       alCheckFn(ks);
  3977.  
  3978.     });
  3979.  
  3980.  
  3981.   }
  3982.  
  3983.  
  3984.   let g_check_detail_A = 0;
  3985.   let checkDuplicateRes = null;
  3986.   function setHiddenStateForDesc(){
  3987.     let ytdFlexyElm = es.ytdFlexy
  3988.     if (!ytdFlexyElm) return
  3989.     let hiddenBool = !document.fullscreenElement ? ytdFlexyElm.classList.contains('tabview-info-duplicated') : false
  3990.     let elm
  3991.     elm = document.querySelector('.tabview-info-duplicated-checked[flexy] ytd-watch-metadata.ytd-watch-flexy[modern-metapanel] #description #plain-snippet-text')
  3992.     if (elm) {
  3993.       wAttr(elm, 'hidden', hiddenBool)
  3994.     }
  3995.     elm = document.querySelector('.tabview-info-duplicated-checked[flexy] ytd-watch-metadata.ytd-watch-flexy[modern-metapanel] #description #formatted-snippet-text')
  3996.     if (elm) {
  3997.       wAttr(elm, 'hidden', hiddenBool)
  3998.     }
  3999.   }
  4000.   function checkDuplicatedInfo_then(isCheck, checkDuplicateRes) {
  4001.  
  4002.     const ytdFlexyElm = es.ytdFlexy;
  4003.     if (!ytdFlexyElm) return; //unlikely
  4004.  
  4005.     let cssbool_c1 = false, cssbool_c2 = false, cssbool_c3 = false;
  4006.     if (isCheck === 5) {
  4007.  
  4008.       if (ytdFlexyElm.matches('.tabview-info-duplicated[flexy]')) {
  4009.         cssbool_c1 = !!querySelectorFromAnchor.call(ytdFlexyElm, '#description.style-scope.ytd-watch-metadata > #description-inner:only-child');
  4010.         cssbool_c2 = !!querySelectorFromAnchor.call(ytdFlexyElm, '#tab-info ytd-expander #description.ytd-video-secondary-info-renderer');
  4011.         cssbool_c2 = !!querySelectorFromAnchor.call(ytdFlexyElm, '#tab-info ytd-expander ytd-rich-metadata-renderer.ytd-rich-metadata-row-renderer');
  4012.       }
  4013.  
  4014.       if (typeof checkDuplicateRes === 'boolean') {
  4015.         setHiddenStateForDesc();
  4016.       }
  4017.     }
  4018.  
  4019.     ytdFlexyElm.setAttribute('tyt-has', `${cssbool_c1 ? 'A' : 'a'}${cssbool_c2 ? 'B' : 'b'}${cssbool_c3 ? 'C' : 'c'}`);
  4020.  
  4021.   }
  4022.   function checkDuplicatedInfo(req) {
  4023.     // console.log('checkDuplicatedInfo')
  4024.  
  4025.  
  4026.     async function checkDuplicatedInfoContentEqual(desc1, desc2) {
  4027.       // basically desc1 and desc2 are content identical
  4028.       // however, class name order could be different
  4029.  
  4030.       let txt1 = new Promise(r => r(desc1.textContent))
  4031.  
  4032.       let txt2 = new Promise(r => r(desc2.textContent))
  4033.  
  4034.  
  4035.       let [res1, res2] = await Promise.all([txt1, txt2]);
  4036.  
  4037.       return { res: res1 === res2 }
  4038.     }
  4039.  
  4040.     async function checkDuplicatedInfoInner() {
  4041.  
  4042.       const ytdFlexyElm = es.ytdFlexy;
  4043.       if (!ytdFlexyElm) return; //unlikely
  4044.  
  4045.       let t = Date.now();
  4046.       g_check_detail_A = t;
  4047.  
  4048.       ytdFlexyElm.classList.toggle('tabview-info-duplicated', true) // hide first;
  4049.  
  4050.       await new Promise(resolve => setTimeout(resolve, 1)); // mcrcr might be not yet initalized
  4051.  
  4052.  
  4053.       if (g_check_detail_A !== t) return;
  4054.  
  4055.       let elm
  4056.       elm = document.querySelector('.tabview-info-duplicated-checked[flexy] ytd-watch-metadata.ytd-watch-flexy[modern-metapanel] #description #plain-snippet-text')
  4057.       if (elm) {
  4058.         wAttr(elm, 'hidden', false)
  4059.       }
  4060.       elm = document.querySelector('.tabview-info-duplicated-checked[flexy] ytd-watch-metadata.ytd-watch-flexy[modern-metapanel] #description #formatted-snippet-text')
  4061.       if (elm) {
  4062.         wAttr(elm, 'hidden', false)
  4063.       }
  4064.       await Promise.resolve(0);
  4065.  
  4066.       // the class added before can be removed from the external coding
  4067.  
  4068.       function mrcrf(mrcr) {
  4069.         let tmp;
  4070.         if (mrcr) {
  4071.           if (tmp = querySelectorFromAnchor.call(mrcr, '#always-shown[hidden]:empty')) tmp.removeAttribute('hidden')
  4072.           if (tmp = querySelectorFromAnchor.call(mrcr, '#collapsible[hidden]:empty')) tmp.removeAttribute('hidden')
  4073.         }
  4074.       }
  4075.  
  4076.       let mrcr1 = document.querySelector('ytd-watch-metadata.ytd-watch-flexy[modern-metapanel] > ytd-metadata-row-container-renderer.style-scope.ytd-watch-metadata')
  4077.       mrcrf(mrcr1);
  4078.       await Promise.resolve(0);
  4079.       let mrcr2 = document.querySelector('ytd-expander.ytd-video-secondary-info-renderer ytd-metadata-row-container-renderer.style-scope.ytd-video-secondary-info-renderer')
  4080.       mrcrf(mrcr2);
  4081.       await Promise.resolve(0);
  4082.  
  4083.       let desc1 = null;
  4084.       let desc2 = document.querySelector('ytd-expander.ytd-video-secondary-info-renderer #description.style-scope.ytd-video-secondary-info-renderer > yt-formatted-string.content.style-scope.ytd-video-secondary-info-renderer[split-lines]:not(:empty)');
  4085.       await Promise.resolve(0);
  4086.  
  4087.       if (desc2 && desc2.firstElementChild === null) {
  4088.         // plainText = true;
  4089.         desc1 = document.querySelector('ytd-text-inline-expander#description-inline-expander.style-scope.ytd-watch-metadata #plain-snippet-text.ytd-text-inline-expander');
  4090.       }
  4091.       if (!desc1) desc1 = document.querySelector('ytd-text-inline-expander#description-inline-expander.style-scope.ytd-watch-metadata yt-formatted-string#formatted-snippet-text.style-scope.ytd-text-inline-expander:not(:empty)');
  4092.       await Promise.resolve(0);
  4093.  
  4094.       if (desc1) {
  4095.         let parentContainer = req.descMetaLines;
  4096.         // hidden
  4097.  
  4098.         // example video
  4099.         // https://www.youtube.com/watch?v=R65uouhSYJ0
  4100.  
  4101.         if (parentContainer) {
  4102.  
  4103.           let m = querySelectorFromAnchor.call(parentContainer, 'ytd-text-inline-expander#description-inline-expander.style-scope.ytd-watch-metadata yt-formatted-string[split-lines].ytd-text-inline-expander');
  4104.  
  4105.           if (m) {
  4106.  
  4107.             if (m.hasAttribute('hidden')) {
  4108.  
  4109.               let expandBtn = querySelectorFromAnchor.call(parentContainer, 'tp-yt-paper-button#expand.ytd-text-inline-expander:not([hidden])');
  4110.  
  4111.               if (expandBtn) {
  4112.  
  4113.                 expandBtn.click();
  4114.                 await new Promise(r => setTimeout(r, 30));
  4115.                 if (!m.hasAttribute('hidden')) desc1 = m;
  4116.               }
  4117.  
  4118.             } else {
  4119.  
  4120.               desc1 = m;
  4121.  
  4122.             }
  4123.  
  4124.           }
  4125.  
  4126.         }
  4127.       }
  4128.  
  4129.       //console.log(desc1, desc2)
  4130.  
  4131.       let infoDuplicated = true;
  4132.  
  4133.       let mb1 = null, mb2 = null;
  4134.  
  4135.       if (desc2 === null && desc1 !== null && desc1.textContent === '') {
  4136.         // example: https://www.youtube.com/watch?v=l9m3OpH9pbI
  4137.         desc1 = null
  4138.       }
  4139.  
  4140.       if ((desc1 === null) ^ (desc2 === null)) {
  4141.         infoDuplicated = false;
  4142.       } else if ((mrcr1 === null) ^ (mrcr2 === null)) {
  4143.         infoDuplicated = false;
  4144.       } else {
  4145.  
  4146.         await Promise.all([
  4147.  
  4148.           (mrcr1 !== mrcr2 && mrcr1 !== null && mrcr2 !== null) ?
  4149.             checkDuplicatedInfoContentEqual(mrcr1, mrcr2).then((o) => {
  4150.               //console.log('mrcr', o.res)
  4151.               let { res, pNodeA, pNodeB } = o;
  4152.               mb1 = res;
  4153.  
  4154.               if (res !== true) infoDuplicated = false;
  4155.             }) : null,
  4156.  
  4157.           (desc1 !== desc2 && desc1 !== null && desc2 !== null) ?
  4158.             checkDuplicatedInfoContentEqual(desc1, desc2).then((o) => {
  4159.               //console.log('desc', o.res)
  4160.               let { res, pNodeA, pNodeB } = o;
  4161.               mb2 = res;
  4162.  
  4163.               if (!mb2) {
  4164.                 // console.log('mb2', desc1, desc2, desc1.textContent, desc2.textContent)
  4165.               }
  4166.  
  4167.               if (res !== true) infoDuplicated = false;
  4168.  
  4169.             }) : null
  4170.  
  4171.         ]);
  4172.  
  4173.       }
  4174.       req = null;
  4175.  
  4176.       console.log('[tyt] modern-info-duplicate', `(r, b1, b2) = (${infoDuplicated ? 1 : 0}, ${mb1 ? 1 : 0}, ${mb2 ? 1 : 0})`, `${infoDuplicated && mb1 && mb2 ? 'Success' : 'Failed'}`)
  4177.  
  4178.       if (g_check_detail_A !== t) return;
  4179.  
  4180.       //ytdFlexyElm.classList.toggle('tabview-info-duplicated', infoDuplicated)
  4181.       checkDuplicateRes = infoDuplicated;
  4182.  
  4183.       return 5; // other than 5, duplicated check = false
  4184.  
  4185.     };
  4186.  
  4187.  
  4188.     return checkDuplicatedInfoInner();
  4189.  
  4190.  
  4191.   }
  4192.  
  4193.  
  4194.   function setupChatFrameDOM(node) {
  4195.     // this function calls 3 times per each new video page
  4196.  
  4197.     // 'tyt-chat' is initialized in setupChatFrameDisplayState1()
  4198.  
  4199.     if (!chatroomDetails) return;
  4200.     let liveChatFrame = node || document.querySelector('ytd-live-chat-frame#chat')
  4201.     if (liveChatFrame) {
  4202.  
  4203.       // every per [new] {ytd-live-chat-frame#chat} detection - reset after mini-playview
  4204.  
  4205.       let ytdFlexyElm = es.ytdFlexy;
  4206.       if (scriptEnable && ytdFlexyElm) {
  4207.         if (mtoVisibility_Chatroom.bindElement(liveChatFrame)) {
  4208.           mtoVisibility_Chatroom.observer.check(9)
  4209.         }
  4210.       }
  4211.  
  4212.       liveChatFrame = null;
  4213.       ytdFlexyElm = null;
  4214.  
  4215.       setToggleBtnTxt(); // immediate update when page changed
  4216.  
  4217.       if (node !== null) {
  4218.         // button might not yet be rendered
  4219.         requestAnimationFrame(setToggleBtnTxt); // bool = true must be front page
  4220.       } else {
  4221.  
  4222.         // this is due to page change
  4223.         let incorrectChat = document.querySelector('ytd-watch-flexy[is-two-columns_][theater] ytd-live-chat-frame#chat:not([collapsed])')
  4224.         if (incorrectChat) {
  4225.           incorrectChat.setAttribute('collapsed', '')
  4226.         }
  4227.  
  4228.       }
  4229.  
  4230.     }
  4231.  
  4232.   }
  4233.  
  4234.   function whenEngagemenetPanelVisible() {
  4235.  
  4236.     const layoutStatus = wls.layoutStatus;
  4237.     if ((layoutStatus & (LAYOUT_TWO_COLUMNS | LAYOUT_THEATER)) === LAYOUT_TWO_COLUMNS) {
  4238.  
  4239.       if (layoutStatus & LAYOUT_TAB_EXPANDED) {
  4240.         switchTabActivity(null);
  4241.         return true;
  4242.       } else if (layoutStatus & LAYOUT_CHATROOM_EXPANDED) {
  4243.         ytBtnCollapseChat();
  4244.         return true;
  4245.       }
  4246.  
  4247.     }
  4248.  
  4249.     return false;
  4250.  
  4251.   }
  4252.  
  4253.  
  4254.   function removeFocusOnLeave(evt) {
  4255.     let node = (evt || 0).target || 0
  4256.     let activeElement = document.activeElement || 0
  4257.     if (node.nodeType === 1 && activeElement.nodeType === 1) {
  4258.       new Promise(() => {
  4259.         if (node.contains(activeElement)) {
  4260.           activeElement.blur();
  4261.         }
  4262.       })
  4263.     }
  4264.   }
  4265.  
  4266.   async function setupVideo(node){
  4267.     // this can be fired even in background without tabs rendered
  4268.     const attrKey = 'gM7Cp'
  4269.     let video = querySelectorFromAnchor.call(node, `#movie_player video[src]:not([${attrKey}])`);
  4270.     if (video) {
  4271.       video.setAttribute(attrKey, '')
  4272.  
  4273.       video.addEventListener('timeupdate', (evt) => {
  4274.         energizedByVideoTimeUpdate();
  4275.       }, bubblePassive);
  4276.  
  4277.       video.addEventListener('ended', (evt) => {
  4278.         // scrollIntoView => auto start next video
  4279.         // otherwise it cannot auto paly next
  4280.         if (pageType === 'watch') {
  4281.           let elm = evt.target;
  4282.           Promise.resolve(elm).then((elm) => {
  4283.             if (pageType === 'watch') {
  4284.               let scrollElm = closestDOM.call(elm, '#player') || closestDOM.call(elm, '#ytd-player') || elm;
  4285.               // background applicable
  4286.               scrollElm.scrollIntoView(false);
  4287.               scrollElm = null
  4288.             }
  4289.             elm = null
  4290.           });
  4291.         }
  4292.  
  4293.       }, bubblePassive)
  4294.  
  4295.     }
  4296.   }
  4297.  
  4298.   globalHook('yt-player-updated', (evt) => {
  4299.  
  4300.     const node = ((evt || 0).target) || 0
  4301.  
  4302.     if (node.nodeType !== 1) return;
  4303.  
  4304.     const nodeName = node.nodeName.toUpperCase();
  4305.  
  4306.     _console.log(evt.target.nodeName, 904, evt.type);
  4307.  
  4308.     if (nodeName !== 'YTD-PLAYER') return
  4309.  
  4310.     setupVideo(node)
  4311.  
  4312.  
  4313.     let tabsDeferredSess = pageSession.session();
  4314.     if (!scriptEnable && tabsDeferred.resolved) { }
  4315.     else tabsDeferred.debounce(() => {
  4316.  
  4317.       if (!tabsDeferredSess.isValid) return;
  4318.       tabsDeferredSess = null;
  4319.  
  4320.  
  4321.       if (!scriptEnable) return
  4322.  
  4323.       if (renderDeferred.resolved && Q.comments_section_loaded === 0 && fetchCounts.new && !fetchCounts.fetched) {
  4324.         fetchCounts.new.f();
  4325.         fetchCounts.fetched = true;
  4326.  
  4327.         fetchCommentsFinished();
  4328.         _console.log(9972, 'fetched = true')
  4329.       }
  4330.  
  4331.       _console.log(2178, 4)
  4332.       pageCheck();
  4333.  
  4334.       domInit_comments();
  4335.       setupChatFrameDOM(null);
  4336.  
  4337.  
  4338.     });
  4339.  
  4340.  
  4341.   });
  4342.  
  4343.   function ytMicroEventsInit() {
  4344.  
  4345.     _console.log(902)
  4346.  
  4347.     /** @type {Map<string, Function>} */
  4348.     let handleDOMAppearFN = new Map();
  4349.     function handleDOMAppear( /** @type {string} */ fn, /** @type { listener: (this: Document, ev: AnimationEvent ) => any } */ func) {
  4350.       if (handleDOMAppearFN.size === 0) {
  4351.         document.addEventListener('animationstart', (evt) => {
  4352.           let func = handleDOMAppearFN.get(evt.animationName);
  4353.           if (func) func(evt);
  4354.         }, capturePassive)
  4355.       } else {
  4356.         if (handleDOMAppearFN.has(fn)) return;
  4357.       }
  4358.       handleDOMAppearFN.set(fn, func);
  4359.     }
  4360.  
  4361.     handleDOMAppear('videosDOMAppended', function (evt) {
  4362.       videosDeferred.resolve();
  4363.     })
  4364.  
  4365.     handleDOMAppear('liveChatFrameDOMAppended', (evt) => {
  4366.  
  4367.       let node = evt.target;
  4368.       if (!node) return;
  4369.  
  4370.       let tabsDeferredSess = pageSession.session();
  4371.       if (!scriptEnable && tabsDeferred.resolved) { }
  4372.       else tabsDeferred.debounce(() => {
  4373.  
  4374.         // P.S. avoid immediately dom change
  4375.         // time delay to avoid attribute set after dom appended.
  4376.  
  4377.         if (!tabsDeferredSess.isValid) return;
  4378.         tabsDeferredSess = null;
  4379.  
  4380.         setupChatFrameDOM(node); // front page
  4381.         node = null;
  4382.  
  4383.       })
  4384.  
  4385.     });
  4386.  
  4387.     handleDOMAppear('pageLoaderAnimation', (evt) => {
  4388.       pageRendered = 2;
  4389.       renderDeferred.resolve();
  4390.       console.log('[tyt] pageRendered')
  4391.  
  4392.       scriptletDeferred.debounce(() => {
  4393.         document.dispatchEvent(new CustomEvent('tabview-page-rendered'))
  4394.       })
  4395.  
  4396.     });
  4397.  
  4398.  
  4399.     handleDOMAppear('chatFrameToggleBtnAppended1', (evt) => {
  4400.  
  4401.       _console.log(5099, 'chatFrameToggleBtnAppended', evt)
  4402.  
  4403.       Promise.resolve(0).then(() => { // avoid immediately dom change
  4404.  
  4405.         let tabsDeferredSess = pageSession.session();
  4406.         if (!scriptEnable && tabsDeferred.resolved) { }
  4407.         else tabsDeferred.debounce(() => {
  4408.  
  4409.           if (!tabsDeferredSess.isValid) return;
  4410.           tabsDeferredSess = null;
  4411.  
  4412.           mtf_liveChatBtnF(evt.target);
  4413.  
  4414.         })
  4415.  
  4416.       })
  4417.  
  4418.     });
  4419.  
  4420.  
  4421.     DEBUG_LOG && handleDOMAppear('chatFrameToggleBtnAppended2', (evt) => {
  4422.  
  4423.       _console.log(5099, 'chatFrameToggleBtnAppended', evt)
  4424.  
  4425.  
  4426.     });
  4427.  
  4428.  
  4429.     handleDOMAppear('epDOMAppended', async (evt) => {
  4430.       try {
  4431.         let node = evt.target;
  4432.  
  4433.         let eps = document.querySelectorAll('ytd-watch-flexy[flexy][tyt-tab] #panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id][visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"]:not([hidden])')
  4434.  
  4435.         if (eps && eps.length > 0) {
  4436.  
  4437.           if (eps.length > 1) {
  4438.             let p = 0;
  4439.             for (const ep of eps) {
  4440.               if (ep !== node) {
  4441.                 ytBtnCloseEngagementPanel(ep)
  4442.                 p++
  4443.               }
  4444.             }
  4445.             if (p > 0) {
  4446.               await Promise.resolve(0)
  4447.             }
  4448.           }
  4449.  
  4450.           FP.mtf_attrEngagementPanel(9, node);
  4451.  
  4452.           new Promise(() => {
  4453.  
  4454.             mtoVisibility_EngagementPanel.bindElement(node, {
  4455.               attributes: true,
  4456.               attributeFilter: ['visibility'],
  4457.               attributeOldValue: true
  4458.             })
  4459.  
  4460.             node.removeEventListener('mouseleave', removeFocusOnLeave, false)
  4461.             node.addEventListener('mouseleave', removeFocusOnLeave, false)
  4462.  
  4463.           })
  4464.  
  4465.         }
  4466.  
  4467.  
  4468.       } catch (e) { }
  4469.  
  4470.     })
  4471.  
  4472.     let _tabviewSiderAnimated = false;
  4473.  
  4474.     handleDOMAppear('tabviewSiderAnimation', (evt) => {
  4475.       if (!_tabviewSiderAnimated) {
  4476.         _tabviewSiderAnimated = true;
  4477.         dispatchCommentRowResize();
  4478.       }
  4479.     })
  4480.  
  4481.     handleDOMAppear('tabviewSiderAnimationNone', (evt) => {
  4482.       if (_tabviewSiderAnimated) {
  4483.         _tabviewSiderAnimated = false;
  4484.         dispatchCommentRowResize();
  4485.       }
  4486.     })
  4487.  
  4488.     handleDOMAppear('SearchWhileWatchAutocomplete', (evt) => { // Youtube - Search While Watching Video
  4489.       let elm = evt.target;
  4490.       elm.addEventListener('autocomplete-sc-exist', handlerAutoCompleteExist, false)
  4491.       scriptletDeferred.debounce(() => {
  4492.         elm.dispatchEvent(new CustomEvent('tabview-fix-autocomplete'));
  4493.         elm = null;
  4494.       })
  4495.     })
  4496.  
  4497.     const renderStamperFunc = {
  4498.       'YTD-PLAYLIST-PANEL-RENDERER': (node) => {
  4499.         mtf_append_playlist(node); // the true playlist is appended to the #tab-list
  4500.         checkPlaylistForInitialization();
  4501.       },
  4502.       'YTD-COMMENTS-HEADER-RENDERER': (node) => {
  4503.         comments_loader = comments_loader | 4;
  4504.         getFinalComments();
  4505.       }
  4506.     }
  4507.  
  4508.     globalHook('yt-rendererstamper-finished', (evt) => {
  4509.  
  4510.       if (!scriptEnable && tabsDeferred.resolved) { return }
  4511.       // might occur before initialization
  4512.  
  4513.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  4514.  
  4515.       let node = evt.target;
  4516.       const nodeName = node.nodeName.toUpperCase();
  4517.       const func = renderStamperFunc[nodeName];
  4518.  
  4519.       if (typeof func !== 'function') {
  4520.         return;
  4521.       }
  4522.  
  4523.  
  4524.       let tabsDeferredSess = pageSession.session();
  4525.       if (!scriptEnable && tabsDeferred.resolved) { }
  4526.       else tabsDeferred.debounce(() => {
  4527.  
  4528.         if (!tabsDeferredSess.isValid) return;
  4529.         tabsDeferredSess = null;
  4530.  
  4531.         func(node);
  4532.         node = null;
  4533.  
  4534.       });
  4535.  
  4536.  
  4537.     });
  4538.  
  4539.  
  4540.     globalHook('yt-page-data-updated', (evt) => {
  4541.  
  4542.       if (!scriptEnable && tabsDeferred.resolved) { return }
  4543.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  4544.  
  4545.       _console.log(evt.target.nodeName, 904, evt.type);
  4546.  
  4547.       advanceFetch();
  4548.  
  4549.       let tabsDeferredSess = pageSession.session();
  4550.       if (!scriptEnable && tabsDeferred.resolved) { }
  4551.       else tabsDeferred.debounce(() => {
  4552.  
  4553.         if (!tabsDeferredSess.isValid) return;
  4554.         tabsDeferredSess = null;
  4555.  
  4556.         if (!scriptEnable) return;
  4557.  
  4558.         if (renderDeferred.resolved && Q.comments_section_loaded === 0 && fetchCounts.new && !fetchCounts.fetched) {
  4559.           fetchCounts.new.f();
  4560.           fetchCounts.fetched = true;
  4561.  
  4562.           fetchCommentsFinished();
  4563.           _console.log(9972, 'fetched = true')
  4564.         }
  4565.  
  4566.  
  4567.         // if the page is navigated by history back-and-forth, not all engagement panels can be catched in rendering event.
  4568.  
  4569.  
  4570.  
  4571.         _console.log(2178, 3)
  4572.         pageCheck();
  4573.         setupChatFrameDOM(null);
  4574.  
  4575.         let expander = document.querySelector('#meta-contents ytd-expander:not([tabview-info-expander])');
  4576.         if (expander) {
  4577.  
  4578.           // once per $$native-info-description$$ {#meta-contents ytd-expander} detection
  4579.           // append the detailed meta contents to the tab-info
  4580.  
  4581.           expander.setAttribute('tabview-info-expander', '');
  4582.           let tabInfo = document.querySelector("#tab-info");
  4583.           if (tabInfo) {
  4584.             tabInfo.appendChild(expander);
  4585.           }
  4586.  
  4587.         }
  4588.  
  4589.  
  4590.         if (REMOVE_DUPLICATE_INFO) {
  4591.  
  4592.  
  4593.           checkDuplicateRes = null;
  4594.           async function alCheckFn(ks) {
  4595.  
  4596.             let alCheckCount = 4;
  4597.             let alCheckInterval = 270;
  4598.  
  4599.             checkDuplicateRes = null;
  4600.             let descExpandState = null;
  4601.             let descMetaExpander = document.querySelector('ytd-watch-metadata[modern-metapanel][clickable-description]');
  4602.             let descToggleBtn = null;
  4603.             let descMetaLines = null;
  4604.             if (descMetaExpander) {
  4605.  
  4606.               // ytd-text-inline-expander#description-inline-expander.style-scope.ytd-watch-metadata
  4607.               descMetaLines = querySelectorFromAnchor.call(descMetaExpander, 'ytd-text-inline-expander#description-inline-expander.style-scope.ytd-watch-metadata')
  4608.               if (descMetaLines) {
  4609.  
  4610.                 descToggleBtn = querySelectorFromAnchor.call(descMetaLines, 'tp-yt-paper-button#collapse[role="button"]:not([hidden]), tp-yt-paper-button#expand[role="button"]:not([hidden])');
  4611.                 if (descToggleBtn) {
  4612.                   if (descMetaExpander.hasAttribute('description-collapsed') && descToggleBtn.id === 'expand') {
  4613.                     descExpandState = false;
  4614.                   } else if (!descMetaExpander.hasAttribute('description-collapsed') && descToggleBtn.id === 'collapse') {
  4615.                     descExpandState = true;
  4616.                   }
  4617.                 }
  4618.               }
  4619.  
  4620.             }
  4621.             if (descMetaExpander) {
  4622.               descMetaExpander.classList.add('tyt-tmp-hide-metainfo');
  4623.             }
  4624.  
  4625.             try{
  4626.  
  4627.                 
  4628.               let req = {
  4629.                 descExpandState,
  4630.                 descMetaExpander,
  4631.                 descToggleBtn,
  4632.                 descMetaLines
  4633.               }
  4634.  
  4635.               do {
  4636.  
  4637.                 if (renderIdentifier !== ks) break;
  4638.                 if (alCheckCount === 0) break;
  4639.                 if (checkDuplicateRes === true) break;
  4640.                 checkDuplicateRes = null;
  4641.  
  4642.                 let res = await checkDuplicatedInfo(req); //async
  4643.                 if (res === 5) {
  4644.  
  4645.                   const ytdFlexyElm = es.ytdFlexy;
  4646.                   if (ytdFlexyElm) {
  4647.                     if (checkDuplicateRes === true || (checkDuplicateRes === false && alCheckCount === 1)) {
  4648.                       ytdFlexyElm.classList.toggle('tabview-info-duplicated', checkDuplicateRes)
  4649.                       ytdFlexyElm.classList.toggle('tabview-info-duplicated-checked', true)
  4650.                       checkDuplicatedInfo_then(res, checkDuplicateRes);
  4651.                     }
  4652.                   }
  4653.  
  4654.                 }
  4655.                 --alCheckCount;
  4656.  
  4657.                 if (checkDuplicateRes === true) break;
  4658.  
  4659.                 await new Promise(r => setTimeout(r, alCheckInterval));
  4660.  
  4661.               } while (true)
  4662.  
  4663.               await Promise.resolve(0)
  4664.  
  4665.               descToggleBtn = descMetaLines ? querySelectorFromAnchor.call(descMetaLines, 'tp-yt-paper-button#collapse[role="button"]:not([hidden]), tp-yt-paper-button#expand[role="button"]:not([hidden])') : null;
  4666.               if (descToggleBtn) {
  4667.  
  4668.                 let isCollapsed = descMetaExpander.hasAttribute('description-collapsed')
  4669.                 let id = descToggleBtn.id
  4670.                 let b1 = descExpandState === true && isCollapsed && id === 'expand';
  4671.                 let b2 = descExpandState === false && !isCollapsed && id === 'collapse';
  4672.  
  4673.                 if (b1 || b2) {
  4674.                   descToggleBtn.click();
  4675.                 }
  4676.  
  4677.               }
  4678.  
  4679.               
  4680.               req = null;
  4681.  
  4682.  
  4683.             }catch(e){
  4684.  
  4685.               console.warn(e)
  4686.  
  4687.             }
  4688.  
  4689.             if (descMetaExpander) {
  4690.               descMetaExpander.classList.remove('tyt-tmp-hide-metainfo');
  4691.  
  4692.               await Promise.resolve(0)
  4693.  
  4694.               let detailsIntersectioner = querySelectorFromAnchor.call(descMetaExpander, '#info-container.style-scope.ytd-watch-metadata');
  4695.               if (detailsIntersectioner) {
  4696.                 Promise.resolve(detailsIntersectioner).then(detailsIntersectioner => {
  4697.                   let dom = detailsIntersectioner;
  4698.                   if (dom) mtoObservationDetails.bindElement(dom);
  4699.                 })
  4700.               }
  4701.  
  4702.             }
  4703.  
  4704.  
  4705.  
  4706.           }
  4707.           let ks = renderIdentifier;
  4708.           renderDeferred.debounce(() => {
  4709.             if (ks !== renderIdentifier) return
  4710.             alCheckFn(ks);
  4711.  
  4712.           });
  4713.  
  4714.         } else {
  4715.  
  4716.           checkDuplicatedInfo_then(0, null);
  4717.  
  4718.         }
  4719.  
  4720.         let renderId = renderIdentifier
  4721.         renderDeferred.debounce(() => {
  4722.           if (renderId !== renderIdentifier) return
  4723.           domInit_teaserInfo() // YouTube obsoleted feature? 
  4724.  
  4725.  
  4726.           let h1 = document.querySelector('#below h1.ytd-watch-metadata yt-formatted-string')
  4727.           if (h1) {
  4728.  
  4729.  
  4730.             let s = '';
  4731.             if (formatDates && Object.keys(formatDates).length > 0) {
  4732.  
  4733.               function getDurationInfo(bd1, bd2) {
  4734.  
  4735.                 let bdd = bd2 - bd1
  4736.                 let hrs = Math.floor(bdd / 3600000)
  4737.                 bdd = bdd - hrs * 3600000
  4738.                 let mins = Math.round(bdd / 60000)
  4739.                 let seconds = null
  4740.                 if (mins < 10 && hrs === 0) {
  4741.                   mins = Math.floor(bdd / 60000)
  4742.                   bdd = bdd - mins * 60000
  4743.                   seconds = Math.round(bdd / 1000)
  4744.                   if (seconds === 0) seconds = null
  4745.                 }
  4746.  
  4747.                 return { hrs, mins, seconds }
  4748.  
  4749.               }
  4750.  
  4751.               const formatDateResult = formatDateResultEN
  4752.  
  4753.               if (formatDates.broadcastBeginAt && formatDates.isLiveNow === false) {
  4754.  
  4755.                 let bd1 = new KDate(formatDates.broadcastBeginAt)
  4756.                 let bd2 = formatDates.broadcastEndAt ? new KDate(formatDates.broadcastEndAt) : null
  4757.  
  4758.                 let isSameDay = 0
  4759.                 if (bd2 && bd1.toLocaleDateString() === bd2.toLocaleDateString()) {
  4760.                   isSameDay = 1
  4761.  
  4762.                 } else if (bd2 && +bd2 > +bd1 && bd2 - bd1 < 86400000) {
  4763.  
  4764.                   if (bd1.getHours() >= 6 && bd2.getHours() < 6) {
  4765.                     isSameDay = 2
  4766.                   }
  4767.  
  4768.                 }
  4769.  
  4770.                 let durationInfo = getDurationInfo(bd1, bd2)
  4771.                 if (isSameDay > 0) {
  4772.  
  4773.                   bd2.dayBack = (isSameDay === 2)
  4774.  
  4775.                   s = formatDateResult(0x200, { bd1, bd2, isSameDay, durationInfo, formatDates })
  4776.  
  4777.                 } else if (bd2 && isSameDay === 0) {
  4778.  
  4779.                   s = formatDateResult(0x210, { bd1, bd2, isSameDay, durationInfo, formatDates })
  4780.  
  4781.                 }
  4782.  
  4783.  
  4784.               } else if (formatDates.broadcastBeginAt && formatDates.isLiveNow === true) {
  4785.  
  4786.                 let bd1 = new KDate(formatDates.broadcastBeginAt)
  4787.  
  4788.                 s = formatDateResult(0x300, { bd1, formatDates })
  4789.  
  4790.               } else {
  4791.                 if (formatDates.uploadDate) {
  4792.  
  4793.                   if (formatDates.publishDate && formatDates.publishDate !== formatDates.uploadDate) {
  4794.  
  4795.                     s = formatDateResult(0x600, { formatDates })
  4796.                   } else {
  4797.                     s = formatDateResult(0x610, { formatDates })
  4798.  
  4799.                   }
  4800.                 } else if (!formatDates.uploadDate && formatDates.publishDate) {
  4801.  
  4802.                   s = formatDateResult(0x700, { formatDates })
  4803.  
  4804.  
  4805.                 }
  4806.               }
  4807.  
  4808.  
  4809.             }
  4810.  
  4811.             if (s) {
  4812.               h1.setAttribute('data-title-details', s)
  4813.             } else {
  4814.               h1.removeAttribute('data-title-details')
  4815.             }
  4816.  
  4817.           }
  4818.  
  4819.         })
  4820.  
  4821.  
  4822.         checkPlaylistForInitialization();
  4823.  
  4824.         mtf_fix_details().then(() => {
  4825.           // setKeywords();
  4826.           setToggleInfo();
  4827.           renderDeferred.debounce(() => {
  4828.             if (renderId !== renderIdentifier) return
  4829.             setTimeout(() => {
  4830.               //dispatchWindowResize(); //try to omit
  4831.               dispatchWindowResize(); //add once for safe
  4832.               manualResizeT();
  4833.             }, 420)
  4834.           })
  4835.  
  4836.  
  4837.           let secondary = document.querySelector('#columns.ytd-watch-flexy #secondary.ytd-watch-flexy');
  4838.  
  4839.           let columns = secondary ? closestDOM.call(secondary, '#columns.ytd-watch-flexy') : null;
  4840.  
  4841.           setupHoverSlider(secondary, columns)
  4842.  
  4843.           let tabInfo = document.querySelector('#tab-info');
  4844.           addTabExpander(tabInfo);
  4845.  
  4846.           let tabComments = document.querySelector('#tab-comments');
  4847.           addTabExpander(tabComments);
  4848.  
  4849.  
  4850.         });
  4851.  
  4852.  
  4853.       });
  4854.  
  4855.     });
  4856.  
  4857.  
  4858.     globalHook('yt-watch-comments-ready', (evt) => {
  4859.  
  4860.       if (!scriptEnable && tabsDeferred.resolved) { return }
  4861.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  4862.  
  4863.       let nodeName = evt.target.nodeName.toUpperCase()
  4864.       advanceFetch();
  4865.  
  4866.       comments_loader = comments_loader | 2;
  4867.  
  4868.       let tabsDeferredSess = pageSession.session();
  4869.       if (!scriptEnable && tabsDeferred.resolved) { }
  4870.       else tabsDeferred.debounce(() => {
  4871.  
  4872.         if (!tabsDeferredSess.isValid) return;
  4873.         tabsDeferredSess = null;
  4874.  
  4875.         if (renderDeferred.resolved && Q.comments_section_loaded === 0 && fetchCounts.new && !fetchCounts.fetched) {
  4876.           fetchCounts.new.f();
  4877.           fetchCounts.fetched = true;
  4878.  
  4879.           fetchCommentsFinished();
  4880.           _console.log(9972, 'fetched = true')
  4881.         }
  4882.  
  4883.         if (nodeName === 'YTD-WATCH-FLEXY') {
  4884.           domInit_comments();
  4885.           if (mtf_forceCheckLiveVideo_disable !== 2) {
  4886.             _console.log(3713, Q.comments_section_loaded, fetchCounts.fetched, 'fetch comments')
  4887.             if (document.querySelector(`ytd-comments#comments`).hasAttribute('hidden')) {
  4888.               // unavailable apart from live chat
  4889.               _disableComments();
  4890.               _console.log(3713, 3, 'comments hidden')
  4891.             } else if (Q.comments_section_loaded === 0) {
  4892.               getFinalComments();
  4893.             }
  4894.           }
  4895.         }
  4896.       });
  4897.  
  4898.     })
  4899.  
  4900.  
  4901.     window.addEventListener("message", (evt) => {
  4902.       if (!scriptEnable && tabsDeferred.resolved) { return }
  4903.       if (evt.origin === location.origin && evt.data.tabview) {
  4904.         let data = evt.data.tabview;
  4905.         if (data.eventType === "yt-page-type-changed") {
  4906.           let detail = data.eventDetail
  4907.           let { newPageType, oldPageType } = detail;
  4908.           if (newPageType && oldPageType) {
  4909.             let bool = false;
  4910.             if (newPageType == 'ytd-watch-flexy') {
  4911.               bool = true;
  4912.               pageType = 'watch';
  4913.             } else if (newPageType == 'ytd-browse') {
  4914.               pageType = 'browse';
  4915.             }
  4916.             document.documentElement.classList.toggle('tabview-normal-player', bool)
  4917.           }
  4918.         }
  4919.       }
  4920.     }, bubblePassive);
  4921.  
  4922.  
  4923.     globalHook('data-changed', (evt) => {
  4924.  
  4925.       if (!scriptEnable && tabsDeferred.resolved) { return }
  4926.  
  4927.       let nodeName = (((evt || 0).target || 0).nodeName || '').toUpperCase()
  4928.  
  4929.       if (nodeName !== 'YTD-THUMBNAIL-OVERLAY-TOGGLE-BUTTON-RENDERER') return;
  4930.  
  4931.       document.dispatchEvent(new CustomEvent("tabview-fix-popup-refit"));
  4932.  
  4933.     })
  4934.  
  4935.  
  4936.     DEBUG_LOG && globalHook('yt-rendererstamper-finished', (evt) => {
  4937.  
  4938.       if (!scriptEnable && tabsDeferred.resolved) { return }
  4939.       // might occur before initialization
  4940.  
  4941.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  4942.  
  4943.       const nodeName = evt.target.nodeName.toUpperCase();
  4944.  
  4945.       //  const S_GENERAL_RENDERERS = ['YTD-TOGGLE-BUTTON-RENDERER','YTD-MENU-RENDERER']
  4946.       if (S_GENERAL_RENDERERS.includes(nodeName)) {
  4947.         return;
  4948.       }
  4949.  
  4950.       _console.log(evt.target.nodeName, 904, evt.type, evt.detail);
  4951.  
  4952.     });
  4953.  
  4954.     DEBUG_LOG && globalHook('data-changed', (evt) => {
  4955.  
  4956.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  4957.  
  4958.       let nodeName = evt.target.nodeName.toUpperCase()
  4959.       _console.log(nodeName, evt.type)
  4960.  
  4961.       if (nodeName === 'YTD-ITEM-SECTION-RENDERER' || nodeName === 'YTD-COMMENTS') {
  4962.  
  4963.         _console.log(344)
  4964.  
  4965.       }
  4966.  
  4967.     })
  4968.  
  4969.     DEBUG_LOG && globalHook('yt-navigate', (evt) => {
  4970.  
  4971.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  4972.       _console.log(evt.target.nodeName, evt.type)
  4973.  
  4974.     })
  4975.  
  4976.     DEBUG_LOG && globalHook('ytd-playlist-lockup-now-playing-active', (evt) => {
  4977.  
  4978.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  4979.       _console.log(evt.target.nodeName, evt.type)
  4980.  
  4981.  
  4982.     })
  4983.  
  4984.     DEBUG_LOG && globalHook('yt-service-request-completed', (evt) => {
  4985.  
  4986.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  4987.       _console.log(evt.target.nodeName, evt.type)
  4988.  
  4989.  
  4990.     })
  4991.  
  4992.     DEBUG_LOG && globalHook('yt-commerce-action-done', (evt) => {
  4993.  
  4994.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  4995.       _console.log(evt.target.nodeName, evt.type)
  4996.  
  4997.  
  4998.     })
  4999.  
  5000.     DEBUG_LOG && globalHook('yt-execute-service-endpoint', (evt) => {
  5001.  
  5002.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  5003.       _console.log(evt.target.nodeName, evt.type)
  5004.  
  5005.  
  5006.     })
  5007.  
  5008.  
  5009.     DEBUG_LOG && globalHook('yt-request-panel-mode-change', (evt) => {
  5010.  
  5011.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  5012.       _console.log(evt.target.nodeName, evt.type)
  5013.  
  5014.  
  5015.     })
  5016.  
  5017.  
  5018.     DEBUG_LOG && globalHook('yt-visibility-refresh', (evt) => {
  5019.  
  5020.       if (!evt || !evt.target /*|| evt.target.nodeType !== 1*/) return;
  5021.       _console.log(evt.target.nodeName || '', evt.type)
  5022.  
  5023.       const ytdFlexyElm = es.ytdFlexy;
  5024.       _console.log(2784, evt.type, (ytdFlexyElm ? ytdFlexyElm.hasAttribute('hidden') : null), evt.detail)
  5025.  
  5026.       _console.log(evt.detail)
  5027.  
  5028.  
  5029.     })
  5030.  
  5031.     DEBUG_LOG && globalHook('yt-request-panel-mode-change', (evt) => {
  5032.  
  5033.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  5034.       _console.log(evt.target.nodeName, evt.type)
  5035.  
  5036.  
  5037.     })
  5038.  
  5039.     DEBUG_LOG && globalHook('app-reset-layout', (evt) => {
  5040.  
  5041.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  5042.       _console.log(evt.target.nodeName, evt.type)
  5043.  
  5044.  
  5045.     })
  5046.     DEBUG_LOG && globalHook('yt-guide-close', (evt) => {
  5047.  
  5048.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  5049.       _console.log(evt.target.nodeName, evt.type)
  5050.  
  5051.  
  5052.     })
  5053.     DEBUG_LOG && globalHook('yt-page-data-will-change', (evt) => {
  5054.  
  5055.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  5056.       _console.log(evt.target.nodeName, evt.type)
  5057.  
  5058.  
  5059.     })
  5060.  
  5061.     DEBUG_LOG && globalHook('yt-retrieve-location', (evt) => {
  5062.  
  5063.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  5064.       _console.log(evt.target.nodeName, evt.type)
  5065.  
  5066.  
  5067.     })
  5068.  
  5069.     DEBUG_LOG && globalHook('yt-refit', (evt) => {
  5070.  
  5071.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  5072.       _console.log(evt.target.nodeName, evt.type)
  5073.  
  5074.     })
  5075.  
  5076.     DEBUG_LOG && globalHook('addon-attached', (evt) => {
  5077.  
  5078.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  5079.       _console.log(evt.target.nodeName, evt.type)
  5080.  
  5081.     })
  5082.  
  5083.     DEBUG_LOG && globalHook('yt-live-chat-context-menu-opened', (evt) => {
  5084.  
  5085.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  5086.       _console.log(evt.target.nodeName, evt.type)
  5087.  
  5088.     })
  5089.  
  5090.     DEBUG_LOG && globalHook('yt-live-chat-context-menu-closed', (evt) => {
  5091.  
  5092.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  5093.       _console.log(evt.target.nodeName, evt.type)
  5094.  
  5095.     })
  5096.  
  5097.     DEBUG_LOG && globalHook('yt-commentbox-resize', (evt) => {
  5098.  
  5099.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  5100.       _console.log(evt.target.nodeName, evt.type)
  5101.     })
  5102.  
  5103.     DEBUG_LOG && globalHook('yt-rich-grid-layout-refreshed', (evt) => {
  5104.  
  5105.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  5106.       _console.log(2327, evt.target.nodeName, evt.type)
  5107.     })
  5108.  
  5109.     DEBUG_LOG && globalHook('animationend', (evt) => {
  5110.  
  5111.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  5112.       _console.log(evt.target.nodeName, evt.type)
  5113.  
  5114.  
  5115.     })
  5116.  
  5117.     DEBUG_LOG && globalHook('yt-dismissible-item-dismissed', (evt) => {
  5118.  
  5119.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  5120.       _console.log(evt.target.nodeName, evt.type)
  5121.  
  5122.  
  5123.     })
  5124.  
  5125.     DEBUG_LOG && globalHook('yt-dismissible-item-undismissed', function (evt) {
  5126.  
  5127.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  5128.       _console.log(evt.target.nodeName, evt.type)
  5129.  
  5130.  
  5131.     })
  5132.  
  5133.  
  5134.     DEBUG_LOG && globalHook('yt-load-next-continuation', function (evt) {
  5135.  
  5136.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  5137.       _console.log(evt.target.nodeName, evt.type)
  5138.  
  5139.  
  5140.     })
  5141.  
  5142.  
  5143.     DEBUG_LOG && globalHook('yt-load-reload-continuation', function (evt) {
  5144.  
  5145.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  5146.       _console.log(evt.target.nodeName, evt.type)
  5147.  
  5148.  
  5149.     })
  5150.  
  5151.     DEBUG_LOG && globalHook('yt-toggle-button', function (evt) {
  5152.  
  5153.       if (!evt || !evt.target || evt.target.nodeType !== 1) return;
  5154.       _console.log(evt.target.nodeName, evt.type)
  5155.  
  5156.  
  5157.     })
  5158.  
  5159.  
  5160.   }
  5161.  
  5162.  
  5163.  
  5164.  
  5165.   function addIframeStyle(cDoc) {
  5166.     if (cDoc.querySelector('#tyt-chatroom-css')) return false;
  5167.     addStyle((iframeCSS() || ''), cDoc.documentElement).id = 'tyt-chatroom-css'
  5168.     return true;
  5169.   }
  5170.  
  5171.   function chatFrameContentDocument() {
  5172.     // non-null if iframe exist && contentDocument && readyState = complete
  5173.     /** @type {HTMLIFrameElement | null} */
  5174.     let iframe = document.querySelector('ytd-live-chat-frame iframe#chatframe');
  5175.     if (!iframe) return null; //iframe must be there
  5176.     /** @type {Document | null} */
  5177.     let cDoc = null;
  5178.     try {
  5179.       cDoc = iframe.contentDocument;
  5180.     } catch (e) { }
  5181.     if (!cDoc) return null;
  5182.     if (cDoc.readyState != 'complete') return null; //we must wait for its completion
  5183.  
  5184.     return cDoc;
  5185.  
  5186.   }
  5187.  
  5188.   function chatFrameElement(/** @type {string} */ cssSelector) {
  5189.     let cDoc = chatFrameContentDocument();
  5190.     if (!cDoc) return null;
  5191.     /** @type {HTMLElement | null} */
  5192.     let elm = null;
  5193.     try {
  5194.       elm = cDoc.querySelector(cssSelector)
  5195.     } catch (e) {
  5196.       console.log('iframe error', e)
  5197.     }
  5198.     return elm;
  5199.   }
  5200.  
  5201.  
  5202.   function forceDisplayChatReplay() {
  5203.     let items = chatFrameElement('yt-live-chat-item-list-renderer #items');
  5204.     if (items && items.childElementCount !== 0) return;
  5205.  
  5206.     let videoElm = document.querySelector('ytd-player#ytd-player video');
  5207.  
  5208.     let ct = videoElm.currentTime;
  5209.     if (ct >= 0 && !videoElm.ended && videoElm.readyState > videoElm.HAVE_CURRENT_DATA) {
  5210.       let chat = document.querySelector('ytd-live-chat-frame#chat');
  5211.       if (chat) {
  5212.         nativeFunc(chat, "postToContentWindow", [{ "yt-player-video-progress": ct }])
  5213.       }
  5214.     }
  5215.  
  5216.   }
  5217.  
  5218.   function checkIframeDblClick() {
  5219.     setTimeout(() => {
  5220.  
  5221.       let Itemslist = chatFrameElement('#contents.yt-live-chat-renderer');
  5222.       if (Itemslist && typeof Itemslist.ondblclick === 'function') iframePointEventsAllow = true;
  5223.  
  5224.       if (iframePointEventsAllow) {
  5225.         chatFrameElement('body').classList.add('tabview-allow-pointer-events');
  5226.       }
  5227.  
  5228.     }, 300)
  5229.   }
  5230.  
  5231.   function addPopupButton(chat) {
  5232.     let showHideBtn = chat.querySelector('div#show-hide-button')
  5233.     if (showHideBtn) {
  5234.  
  5235.       let btn;
  5236.       btn = document.querySelector('tyt-iframe-popup-btn')
  5237.       if (btn) btn.remove();
  5238.  
  5239.       btn = document.createElement('tyt-iframe-popup-btn')
  5240.       showHideBtn.appendChild(btn)
  5241.       // console.log(334,2)
  5242.       btn.dispatchEvent(new CustomEvent('tyt-iframe-popup-btn-setup'))
  5243.     }
  5244.  
  5245.   }
  5246.  
  5247.   function iFrameContentReady(cDoc) {
  5248.  
  5249.     // console.log(702, 1)
  5250.     if (!cDoc) return;
  5251.  
  5252.     // console.log(702, 2)
  5253.     if (addIframeStyle(cDoc) === false) return;
  5254.  
  5255.     // console.log(702, 3)
  5256.     let frc = 0;
  5257.     let cid = 0;
  5258.  
  5259.     let fullReady = () => {
  5260.  
  5261.       // console.log(702, 4)
  5262.       if (!cDoc.documentElement.hasAttribute('style') && ++frc < 900) return;
  5263.       clearInterval(cid);
  5264.  
  5265.       // console.log(702, 5)
  5266.       if (!scriptEnable || !isChatExpand()) return;
  5267.  
  5268.       // console.log(702, 6)
  5269.       let iframe = document.querySelector('body ytd-watch-flexy ytd-live-chat-frame iframe#chatframe');
  5270.  
  5271.       // console.log(702, 7)
  5272.       if (!iframe) return; //prevent iframe is detached from the page
  5273.  
  5274.       // console.log(702, 8)
  5275.       if (cDoc.querySelector('yt-live-chat-renderer #continuations')) {
  5276.  
  5277.         // console.log(702, 9)
  5278.         let chatFrame = document.querySelector('ytd-live-chat-frame#chat');
  5279.         if (chatFrame) {
  5280.           chatFrame.setAttribute('tyt-iframe-loaded', '')
  5281.           // console.log(711, chatFrame)
  5282.  
  5283.  
  5284.           // console.log(702, 10)
  5285.           forceDisplayChatReplay();
  5286.           checkIframeDblClick(); // user request for compatible with https://greasyfork.org/en/scripts/452335
  5287.           iframe.dispatchEvent(new CustomEvent("tabview-chatroom-ready"))
  5288.           // console.log(334,1)
  5289.           addPopupButton(chatFrame)
  5290.  
  5291.         }
  5292.       }
  5293.  
  5294.  
  5295.     }
  5296.     cid = setInterval(fullReady, 10)
  5297.     fullReady();
  5298.  
  5299.  
  5300.   }
  5301.  
  5302.   let iframeLoadHookA_id = 0
  5303.  
  5304.   const iframeLoadHookA = function (evt) {
  5305.  
  5306.  
  5307.     let isIframe = (((evt || 0).target || 0).nodeName === 'IFRAME');
  5308.  
  5309.     if (isIframe && evt.target.matches('body iframe.style-scope.ytd-live-chat-frame#chatframe')) {
  5310.     } else {
  5311.       return;
  5312.     }
  5313.  
  5314.     let iframe = evt.target;
  5315.     let tid = ++iframeLoadHookA_id;
  5316.  
  5317.     // console.log(701, 2)
  5318.     new Promise(resolve => {
  5319.       if (tid !== iframeLoadHookA_id) return
  5320.  
  5321.       // console.log(701, 3)
  5322.       let k = 270
  5323.       let cid = setInterval(() => {
  5324.  
  5325.         if (tid !== iframeLoadHookA_id) return
  5326.  
  5327.         if (!cid) return;
  5328.  
  5329.         if (k-- < 1) {
  5330.           clearInterval(cid);
  5331.           cid = 0;
  5332.           return resolve(false);
  5333.         }
  5334.  
  5335.         let cDoc = iframe.contentDocument;
  5336.         if (!cDoc) return null;
  5337.         if (cDoc.readyState != 'complete') return;
  5338.         if (!cDoc.querySelector('body')) {
  5339.           clearInterval(cid);
  5340.           cid = 0;
  5341.           return resolve(false);
  5342.         }
  5343.  
  5344.         if (!cDoc.querySelector('yt-live-chat-app')) return;
  5345.  
  5346.         clearInterval(cid);
  5347.         cid = 0;
  5348.  
  5349.         if (!document.contains(iframe)) return resolve(false);
  5350.  
  5351.         resolve([cDoc, iframe]);
  5352.  
  5353.         cDoc = null
  5354.  
  5355.         iframe = null
  5356.  
  5357.  
  5358.       }, 17)
  5359.  
  5360.  
  5361.     }).then((res) => {
  5362.  
  5363.  
  5364.       // console.log(701, 4, res)
  5365.       if (tid !== iframeLoadHookA_id) return
  5366.  
  5367.       // console.log(701, 5)
  5368.       if (!res) return;
  5369.  
  5370.       // console.log(701, 6)
  5371.  
  5372.       const [cDoc, iframe] = res
  5373.  
  5374.       iFrameContentReady(cDoc)
  5375.       iframe.dispatchEvent(new CustomEvent('tabview-chatframe-loaded'))
  5376.  
  5377.  
  5378.     })
  5379.  
  5380.  
  5381.  
  5382.   }
  5383.  
  5384.   let videosDeferred = new Deferred();
  5385.  
  5386.   let _navigateLoadDT = 0;
  5387.  
  5388.   async function onNavigationEndAsync(isPageFirstLoaded) {
  5389.  
  5390.     if (pageType !== 'watch') return
  5391.  
  5392.  
  5393.     let tdt = Date.now();
  5394.     _navigateLoadDT = tdt;
  5395.  
  5396.     // avoid blocking the page when youtube is initializing the page
  5397.     const promiseDelay = new Promise(requestAnimationFrame)
  5398.     const promiseVideoRendered = videosDeferred.d()
  5399.     await Promise.all([promiseVideoRendered, promiseDelay])
  5400.  
  5401.     if (_navigateLoadDT !== tdt) return;
  5402.     if (ytEventSequence !== 3) return;
  5403.  
  5404.     const ytdFlexyElm = document.querySelector('ytd-watch-flexy')
  5405.  
  5406.     if (!ytdFlexyElm) {
  5407.       ytdFlexy = null
  5408.       return;
  5409.     }
  5410.  
  5411.     scriptEnable = true;
  5412.  
  5413.     ytdFlexy = mWeakRef(ytdFlexyElm)
  5414.  
  5415.     const related = querySelectorFromAnchor.call(ytdFlexyElm, "#related.ytd-watch-flexy");
  5416.     if (!related) return;
  5417.  
  5418.     // isPageFirstLoaded && console.time("Tabview Youtube Render")
  5419.  
  5420.     if (!document.querySelector("#right-tabs")) {
  5421.       getLang();
  5422.       let docTmp = document.createElement('template');
  5423.       docTmp.innerHTML = getTabsHTML();
  5424.       let newElm = docTmp.content.firstElementChild;
  5425.       if (newElm !== null) {
  5426.         insertBeforeTo(newElm, related);
  5427.         querySelectorFromAnchor.call(newElm, '#material-tabs').addEventListener('mousemove', (evt)=>{
  5428.           evt.preventDefault();
  5429.           evt.stopPropagation();
  5430.           evt.stopImmediatePropagation();
  5431.         }, true);
  5432.         console.log('[tyt] #right-tabs inserted')
  5433.       }
  5434.       docTmp.textContent = '';
  5435.       docTmp = null;
  5436.     }
  5437.  
  5438.     if (!ytdFlexyElm.hasAttribute('tyt-tab')) ytdFlexyElm.setAttribute('tyt-tab', '')
  5439.  
  5440.     // append the next videos 
  5441.     // it exists as "related" is already here
  5442.     fixTabs();
  5443.  
  5444.     if (document.querySelector('ytd-watch-flexy[flexy][tyt-tab] #panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id][visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"]:not([hidden])')) {
  5445.       switchTabActivity(null);
  5446.     } else {
  5447.       setToActiveTab(); // just switch to the default tab
  5448.     }
  5449.     prepareTabBtn();
  5450.  
  5451.     mtoFlexyAttr.clear(true)
  5452.     mtf_checkFlexy()
  5453.  
  5454.     tabsDeferred.resolve();
  5455.     FP.mtf_attrEngagementPanel(); // check whether no visible panels
  5456.  
  5457.     // isPageFirstLoaded && console.timeEnd("Tabview Youtube Render")
  5458.  
  5459.     isPageFirstLoaded && document.documentElement.removeAttribute('tyt-lock')
  5460.  
  5461.   }
  5462.  
  5463.  
  5464.   function fetchCommentsFinished() {
  5465.     const ytdFlexyElm = es.ytdFlexy;
  5466.     if (!scriptEnable || !ytdFlexyElm) return;
  5467.     if (mtf_forceCheckLiveVideo_disable === 2) return;
  5468.     ytdFlexyElm.setAttribute('tyt-comments', 'L');
  5469.     _console.log(2909, 1)
  5470.   }
  5471.  
  5472.   function setCommentSection( /** @type {number} */ value) {
  5473.  
  5474.     Q.comments_section_loaded = value;
  5475.     if (value === 0 && fetchCounts) {
  5476.       fetchCounts.fetched = false; // unknown bug
  5477.     }
  5478.  
  5479.   }
  5480.  
  5481.  
  5482.   function emptyCommentSection() {
  5483.     let tab_btn = document.querySelector('.tab-btn[tyt-tab-content="#tab-comments"]')
  5484.     if (tab_btn) {
  5485.       let span = querySelectorFromAnchor.call(tab_btn, 'span#tyt-cm-count');
  5486.       tab_btn.removeAttribute('loaded-comment')
  5487.       if (span) {
  5488.         span.textContent = '';
  5489.       }
  5490.     }
  5491.     setCommentSection(0);
  5492.     _console.log(7233, 'comments_section_loaded = 0')
  5493.   }
  5494.  
  5495.  
  5496.   function _disableComments() {
  5497.  
  5498.  
  5499.     _console.log(2909, 1)
  5500.     if (!scriptEnable) return;
  5501.     let cssElm = es.ytdFlexy;
  5502.     if (!cssElm) return;
  5503.  
  5504.     _console.log(2909, 2)
  5505.  
  5506.  
  5507.     let comments = document.querySelector('ytd-comments#comments')
  5508.     if (mtf_forceCheckLiveVideo_disable === 2) {
  5509.       // earlier than DOM change
  5510.     } else {
  5511.       if (comments && !comments.hasAttribute('hidden')) return; // visible comments content)
  5512.     }
  5513.  
  5514.     _console.log(2909, 4)
  5515.     if (Q.comments_section_loaded === 2) return; //already disabled
  5516.  
  5517.     setCommentSection(2);
  5518.  
  5519.     _console.log(2909, 5)
  5520.  
  5521.     let tabBtn = document.querySelector('.tab-btn[tyt-tab-content="#tab-comments"]');
  5522.     if (tabBtn) {
  5523.       let span = querySelectorFromAnchor.call(tabBtn, 'span#tyt-cm-count');
  5524.       tabBtn.removeAttribute('loaded-comment')
  5525.       if (!tabBtn.classList.contains('tab-btn-hidden')) {
  5526.         //console.log('hide', comments, comments && comments.hasAttribute('hidden'))
  5527.         hideTabBtn(tabBtn)
  5528.       }
  5529.       if (span) {
  5530.         span.textContent = '';
  5531.       }
  5532.     }
  5533.  
  5534.     cssElm.setAttribute('tyt-comments', 'D');
  5535.  
  5536.     _console.log(2909, 10)
  5537.  
  5538.  
  5539.   }
  5540.  
  5541.  
  5542.   function setKeywords() {
  5543.  
  5544.     return;
  5545.  
  5546.     if (typeof String.prototype.replacei !== 'function') {
  5547.       // reference: https://stackoverflow.com/questions/7313395/case-insensitive-replace-all
  5548.       String.replacei = String.prototype.replacei = function (rep, rby) {
  5549.         var pos = this.toLowerCase().indexOf(rep.toLowerCase());
  5550.         return pos == -1 ? this : this.substring(0, pos) + rby(this.substring(pos, pos + rep.length)) + this.substring(pos + rep.length);
  5551.       };
  5552.     }
  5553.  
  5554.     let data = pageFetchedData;
  5555.     console.log(data)
  5556.  
  5557.  
  5558.     let keywords = ((((data || 0).pageData || 0).playerResponse || 0).videoDetails || 0).keywords;
  5559.     console.log(keywords)
  5560.  
  5561.     if (keywords && keywords.length > 0) {
  5562.  
  5563.  
  5564.       let title = '';
  5565.  
  5566.       try {
  5567.         title = ((((data || 0).pageData || 0).response || 0).contents || 0).twoColumnWatchNextResults.results.results.contents[0].videoPrimaryInfoRenderer.title.runs[0].text;
  5568.         if (typeof title !== 'string') title = '';
  5569.       } catch (e) { }
  5570.  
  5571.       let strText = title;
  5572.  
  5573.       let tabsDeferredSess = pageSession.session();
  5574.       if (!scriptEnable && tabsDeferred.resolved) { }
  5575.       else tabsDeferred.debounce(() => {
  5576.  
  5577.         if (!tabsDeferredSess.isValid) return;
  5578.         tabsDeferredSess = null;
  5579.  
  5580.  
  5581.         let res = [];
  5582.         for (const keyword of keywords) {
  5583.           if (strText.toUpperCase().includes(keyword.toUpperCase())) {
  5584.             res.push(keyword);
  5585.           }
  5586.         }
  5587.         if (res.length > 0) {
  5588.           console.log('tabview video keywords', res)
  5589.           window.postMessage({
  5590.             tabview: {
  5591.               eventType: 0x3700,
  5592.               eventDetail: {
  5593.                 keywords: res
  5594.               }
  5595.             }
  5596.           }, location.origin);
  5597.         }
  5598.  
  5599.  
  5600.  
  5601.         let strElms = document.querySelectorAll('#title.ytd-watch-metadata yt-formatted-string.style-scope.ytd-watch-metadata');
  5602.         //console.log(keywords,strElms)
  5603.         for (const strElm of strElms) {
  5604.           if (strElm.id == 'super-title' || strElm.id == 'original-info') {
  5605.  
  5606.           } else {
  5607.             if (strElm.querySelector('*')) {
  5608.  
  5609.             } else {
  5610.               /** @type{string} */
  5611.               let strText = strElm.textContent;
  5612.               if (strText) {
  5613.  
  5614.                 let res = [];
  5615.                 for (const keyword of keywords) {
  5616.                   if (strText.toUpperCase().includes(keyword.toUpperCase())) {
  5617.                     res.push(keyword);
  5618.                   }
  5619.                 }
  5620.                 if (res.length > 0) {
  5621.                   console.log('tabview video keywords', res)
  5622.  
  5623.                   if (res.length > 1) res.sort((a, b) => { return b.length - a.length });
  5624.                   let usedKeywords = {};
  5625.                   for (const s of res) {
  5626.                     strText = strText.replacei(s, ((s) => {
  5627.                       usedKeywords[s] = true;
  5628.                       return `\n${s}\n`
  5629.                     }))
  5630.                   }
  5631.                   strText = strText.replace(`\n\n+`, '\n')
  5632.                   let retElms = strText.split('\n').map(w => {
  5633.                     let elm = document.createElement('tabview-txt')
  5634.                     if (usedKeywords[w]) elm.classList.add('tabview-title-keyword')
  5635.                     elm.textContent = w;
  5636.                     return elm
  5637.                   })
  5638.  
  5639.                   let p = querySelectorFromAnchor.call(strElm.parentNode, '.tabview-txt');
  5640.  
  5641.                   if (!p) {
  5642.                     p = strElm.cloneNode(false)
  5643.                     p.classList.add('tabview-txt')
  5644.                     strElm.after(p);
  5645.                   } else {
  5646.                     strElm.after(p);
  5647.                   }
  5648.  
  5649.                   requestAnimationFrame(() => {
  5650.  
  5651.                     p.textContent = 'x';
  5652.                     p.firstChild.replaceWith(...retElms);
  5653.                     p.removeAttribute('is-empty')
  5654.                     strElm.setAttribute('is-empty', '')
  5655.  
  5656.                   })
  5657.  
  5658.  
  5659.                 }
  5660.                 break;
  5661.               }
  5662.             }
  5663.           }
  5664.         }
  5665.  
  5666.       })
  5667.  
  5668.     }
  5669.  
  5670.  
  5671.   }
  5672.  
  5673.   function setToggleInfo() {
  5674.  
  5675.     scriptletDeferred.d().then(() => {
  5676.  
  5677.       let elem = document.querySelector('#primary.ytd-watch-flexy #below ytd-watch-metadata #info-container.ytd-watch-metadata:first-child:not([tyt-info-toggler])')
  5678.       if (elem) {
  5679.  
  5680.         elem.setAttribute('tyt-info-toggler', '')
  5681.         elem.dispatchEvent(new CustomEvent('tyt-info-toggler'))
  5682.  
  5683.       }
  5684.  
  5685.     });
  5686.   }
  5687.  
  5688.  
  5689.   function flexyAttr_toggleFlag(mFlag, b, flag) {
  5690.     return b ? (mFlag | flag) : (mFlag & ~flag);
  5691.   }
  5692.  
  5693.   function flexAttr_toLayoutStatus(nls, attributeName) {
  5694.  
  5695.     let attrElm, b, v;
  5696.     switch (attributeName) {
  5697.       case 'theater':
  5698.         b = isTheater();
  5699.         nls = flexyAttr_toggleFlag(nls, b, LAYOUT_THEATER);
  5700.         break;
  5701.       case 'tyt-chat':
  5702.         attrElm = es.ytdFlexy;
  5703.         v = attrElm.getAttribute('tyt-chat');
  5704.  
  5705.         if (v !== null && v.charAt(0) === '-') {
  5706.           nls = flexyAttr_toggleFlag(nls, true, LAYOUT_CHATROOM | LAYOUT_CHATROOM_COLLAPSED);
  5707.         } else {
  5708.           nls = flexyAttr_toggleFlag(nls, v !== null, LAYOUT_CHATROOM);
  5709.           nls = flexyAttr_toggleFlag(nls, false, LAYOUT_CHATROOM_COLLAPSED);
  5710.         }
  5711.  
  5712.         break;
  5713.       case 'is-two-columns_':
  5714.         b = isWideScreenWithTwoColumns();
  5715.         nls = flexyAttr_toggleFlag(nls, b, LAYOUT_TWO_COLUMNS);
  5716.         break;
  5717.  
  5718.       case 'tyt-tab':
  5719.         attrElm = es.ytdFlexy;
  5720.         b = isNonEmptyString(attrElm.getAttribute('tyt-tab'));
  5721.         nls = flexyAttr_toggleFlag(nls, b, LAYOUT_TAB_EXPANDED);
  5722.         break;
  5723.  
  5724.       case 'fullscreen':
  5725.         attrElm = es.ytdFlexy;
  5726.         b = attrElm.hasAttribute('fullscreen');
  5727.         nls = flexyAttr_toggleFlag(nls, b, LAYOUT_FULLSCREEN);
  5728.         break;
  5729.  
  5730.       case 'tyt-ep-visible':
  5731.         attrElm = es.ytdFlexy;
  5732.         v = attrElm.getAttribute('tyt-ep-visible');
  5733.         b = (+v > 0)
  5734.         nls = flexyAttr_toggleFlag(nls, b, LAYOUT_ENGAGEMENT_PANEL_EXPANDED);
  5735.         break;
  5736.  
  5737.       case 'tyt-donation-shelf':
  5738.         attrElm = es.ytdFlexy;
  5739.         b = attrElm.hasAttribute('tyt-donation-shelf');
  5740.         nls = flexyAttr_toggleFlag(nls, b, LAYOUT_DONATION_SHELF_EXPANDED);
  5741.         break;
  5742.  
  5743.     }
  5744.  
  5745.     return nls;
  5746.  
  5747.  
  5748.   }
  5749.  
  5750.  
  5751.  
  5752.   function ito_details(entries, observer) {
  5753.     if (!detailsTriggerReset) return;
  5754.     if (!entries || entries.length !== 1) return; // unlikely
  5755.     let entry = entries[0];
  5756.     //console.log(entries)
  5757.     if (entry.isIntersecting === true) {
  5758.  
  5759.       if (fT(wls.layoutStatus, LAYOUT_TWO_COLUMNS | LAYOUT_FULLSCREEN, 0) === false) return;
  5760.  
  5761.       let dom = entry.target;
  5762.       if (!dom) return; //unlikely
  5763.  
  5764.       let bool = false;
  5765.       let descClickable = null;
  5766.       
  5767.       if (fT(wls.layoutStatus, 0, LAYOUT_ENGAGEMENT_PANEL_EXPANDED | LAYOUT_DONATION_SHELF_EXPANDED | LAYOUT_CHATROOM_EXPANDED | LAYOUT_TAB_EXPANDED) === false) {
  5768.         descClickable = closestDOM.call(dom, '#description.item.style-scope.ytd-watch-metadata')
  5769.         if (descClickable) {
  5770.           detailsTriggerReset = false;
  5771.           bool = true;
  5772.         }
  5773.       }
  5774.  
  5775.       async function runAsync(dom, bool) {
  5776.  
  5777.         if (bool) {
  5778.           let descClickable = closestDOM.call(dom, '#description.item.style-scope.ytd-watch-metadata')
  5779.           if (descClickable) {
  5780.             descClickable.click();
  5781.           }
  5782.         }
  5783.  
  5784.         await new Promise(r => setTimeout(r, 20));
  5785.  
  5786.         let pInner, nw = null;
  5787.         try {
  5788.           let x = closestDOM.call(dom, '#description.item.style-scope.ytd-watch-metadata');
  5789.           let h2 = x.offsetHeight;
  5790.           pInner = closestDOM.call(x, '#primary-inner')
  5791.           let h1 = pInner.offsetHeight;
  5792.           x.setAttribute('userscript-scrollbar-render', '')
  5793.           if (h1 > h2 && h2 > 0 && h1 > 0) nw = h1 - h2
  5794.         } catch (e) { }
  5795.         if(pInner){
  5796.           pInner.style.setProperty('--tyt-desc-top-h', `${nw ? nw : 0}px`)
  5797.         }
  5798.       }
  5799.  
  5800.       runAsync(dom, bool);
  5801.  
  5802.  
  5803.     }
  5804.  
  5805.   }
  5806.  
  5807.   async function delayFlexyCheck(dcall) {
  5808.  
  5809.     if (!scriptEnable) return;
  5810.     await new Promise(r => timeline.setTimeout(r, 240));
  5811.     if (!scriptEnable) return;
  5812.  
  5813.     let b = false
  5814.     if (dcall & 1) { // !cssElm.hasAttribute('tyt-chat')
  5815.       //delayed call => check with the "no active focus" condition with chatroom status
  5816.       b = b || fT(wls.layoutStatus, LAYOUT_TWO_COLUMNS, LAYOUT_TAB_EXPANDED | LAYOUT_CHATROOM_EXPANDED | LAYOUT_THEATER | LAYOUT_FULLSCREEN)
  5817.       // b = !isAnyActiveTab() && !isChatExpand() && !isTheater() && isWideScreenWithTwoColumns() && !isFullScreen()
  5818.     }
  5819.     if (dcall & 2) { // tyt-ep-visible removed
  5820.       //delayed call => check with the "no active focus" condition with engagement panel status
  5821.       b = b || fT(wls.layoutStatus, LAYOUT_TWO_COLUMNS, LAYOUT_TAB_EXPANDED | LAYOUT_ENGAGEMENT_PANEL_EXPANDED | LAYOUT_DONATION_SHELF_EXPANDED | LAYOUT_THEATER | LAYOUT_FULLSCREEN | LAYOUT_CHATROOM_EXPANDED)
  5822.       // b = !isAnyActiveTab() && !isEngagementPanelExpanded() && !isDonationShelfExpanded() && !isTheater() && isWideScreenWithTwoColumns() && !isFullScreen() && !isChatExpand()
  5823.     }
  5824.     if (dcall & 4) { // without tyt-donation-shelf
  5825.       b = b || fT(wls.layoutStatus, LAYOUT_TWO_COLUMNS, LAYOUT_TAB_EXPANDED | LAYOUT_ENGAGEMENT_PANEL_EXPANDED | LAYOUT_DONATION_SHELF_EXPANDED | LAYOUT_THEATER | LAYOUT_FULLSCREEN | LAYOUT_CHATROOM_EXPANDED)
  5826.       // b = !isAnyActiveTab() && !isEngagementPanelExpanded() && !isDonationShelfExpanded() && !isTheater() && isWideScreenWithTwoColumns() && !isFullScreen() && !isChatExpand()
  5827.     }
  5828.     if (b) {
  5829.       setToActiveTab();
  5830.     }
  5831.   }
  5832.  
  5833.   const mtf_attrFlexy = (mutations, observer) => {
  5834.  
  5835.     //attr mutation checker - $$ytdFlexyElm$$ {ytd-watch-flexy} \single
  5836.     //::attr    
  5837.     // ~ 'tyt-chat', 'theater', 'is-two-columns_', 
  5838.     // ~ 'tyt-tab', 'fullscreen', 'tyt-ep-visible', 
  5839.     // ~ 'hidden', 'is-extra-wide-video_'
  5840.  
  5841.     //console.log(15330, scriptEnable, es.ytdFlexy, mutations)
  5842.  
  5843.     if (!scriptEnable) return;
  5844.  
  5845.     const cssElm = es.ytdFlexy;
  5846.     if (!cssElm) return;
  5847.  
  5848.     if (!mutations) return;
  5849.  
  5850.     const old_layoutStatus = wls.layoutStatus
  5851.     if (old_layoutStatus === 0) return;
  5852.     let new_layoutStatus = old_layoutStatus;
  5853.  
  5854.     let checkedChat = false;
  5855.     let mss = 0;
  5856.     let dcall = 0;
  5857.  
  5858.     for (const mutation of mutations) {
  5859.       new_layoutStatus = flexAttr_toLayoutStatus(new_layoutStatus, mutation.attributeName);
  5860.       _console.log(8221, 18, mutation.attributeName)
  5861.       if (mutation.attributeName === 'tyt-chat') {
  5862.  
  5863.         if (!checkedChat) {
  5864.           checkedChat = true; // avoid double call
  5865.  
  5866.           if ((cssElm.getAttribute('tyt-chat') || '').indexOf('chat$live') >= 0) {
  5867.             // assigned new attribute - "chat$live" => disable comments section
  5868.  
  5869.             //console.log(3712,2)
  5870.             _disableComments();
  5871.           }
  5872.  
  5873.           if (!cssElm.hasAttribute('tyt-chat')) {
  5874.             // might or might not collapsed before
  5875.             dcall |= 1;
  5876.           }
  5877.         }
  5878.  
  5879.       } else if (mutation.attributeName === 'tyt-ep-visible') {
  5880.         // assume any other active component such as tab content and chatroom
  5881.  
  5882.         if (+(cssElm.getAttribute('tyt-ep-visible') || 0) === 0 && +mutation.oldValue > 0) {
  5883.           dcall |= 2;
  5884.         }
  5885.  
  5886.         if (mss === 0) mss = 1;
  5887.         else mss = -1;
  5888.  
  5889.       } else if (mutation.attributeName === 'tyt-donation-shelf') {
  5890.         // assume any other active component such as tab content and chatroom
  5891.  
  5892.         if (!(cssElm.hasAttribute('tyt-donation-shelf'))) {
  5893.           dcall |= 4;
  5894.         } else {
  5895.           lstTab.lastPanel = '#donation-shelf'
  5896.           switchTabActivity(null);
  5897.         }
  5898.         if (mss === 0) mss = 2;
  5899.         else mss = -1;
  5900.  
  5901.       } else if (mutation.attributeName === 'is-extra-wide-video_') {
  5902.         setTimeout(() => {
  5903.           updateFloatingSlider();  //required for hover slider // eg video after ads
  5904.         }, 1);
  5905.       }
  5906.     }
  5907.  
  5908.     new_layoutStatus = fixLayoutStatus(new_layoutStatus);
  5909.  
  5910.     if (new_layoutStatus !== old_layoutStatus) {
  5911.  
  5912.       if (fT(new_layoutStatus, LAYOUT_TWO_COLUMNS, LAYOUT_TAB_EXPANDED | LAYOUT_THEATER | LAYOUT_CHATROOM_EXPANDED)) {
  5913.         if (mss === 1) {
  5914.           if (fT(new_layoutStatus, LAYOUT_ENGAGEMENT_PANEL_EXPANDED | LAYOUT_DONATION_SHELF_EXPANDED, 0)) {
  5915.             closeDonationShelf();
  5916.           }
  5917.         } else if (mss === 2) {
  5918.           if (fT(new_layoutStatus, LAYOUT_ENGAGEMENT_PANEL_EXPANDED | LAYOUT_DONATION_SHELF_EXPANDED, 0)) {
  5919.             ytBtnCloseEngagementPanels();
  5920.           }
  5921.         }
  5922.       }
  5923.       wls.layoutStatus = new_layoutStatus
  5924.  
  5925.     }
  5926.  
  5927.     if (dcall > 0) delayFlexyCheck(dcall);
  5928.  
  5929.   }
  5930.  
  5931.  
  5932.   function setupChatFrameDisplayState1(chatBlockR, initialDisplayState) {
  5933.  
  5934.  
  5935.     const ytdFlexyElm = es.ytdFlexy;
  5936.     if (!scriptEnable || !ytdFlexyElm) return;
  5937.  
  5938.     let chatTypeChanged = mtf_chatBlockQ !== chatBlockR;
  5939.  
  5940.     let attr_chatblock = chatBlockR === 1 ? 'chat$live' : chatBlockR === 3 ? 'chat$playback' : false;
  5941.     let attr_chatcollapsed = false;
  5942.  
  5943.  
  5944.     if (attr_chatblock) {
  5945.       let chatFrame = document.querySelector('ytd-live-chat-frame#chat')
  5946.       if (chatFrame) {
  5947.         attr_chatcollapsed = chatFrame.hasAttribute('collapsed');
  5948.         if (!attr_chatcollapsed) {
  5949.  
  5950.           //nativeFunc(p,'setupPlayerProgressRelay')
  5951.           //if(!p.isFrameReady)
  5952.           //nativeFunc(p, "urlChanged")
  5953.           //console.log(12399,1)
  5954.           chatFrame.dispatchEvent(new CustomEvent("tabview-chatroom-newpage")); //possible empty iframe is shown
  5955.  
  5956.         }
  5957.       } else {
  5958.         attr_chatcollapsed = initialDisplayState === 'LIVE_CHAT_DISPLAY_STATE_COLLAPSED' ? true : false;
  5959.       }
  5960.     }
  5961.  
  5962.     if (chatTypeChanged) {
  5963.       mtf_chatBlockQ = chatBlockR
  5964.  
  5965.       _console.log(932, 2, attr_chatblock, attr_chatcollapsed)
  5966.  
  5967.       //LIVE_CHAT_DISPLAY_STATE_COLLAPSED
  5968.       //LIVE_CHAT_DISPLAY_STATE_EXPANDED
  5969.       let v = attr_chatblock
  5970.       if (typeof attr_chatblock == 'string') {
  5971.  
  5972.         if (attr_chatcollapsed === true) v = '-' + attr_chatblock
  5973.         if (attr_chatcollapsed === false) v = '+' + attr_chatblock;
  5974.       }
  5975.       wAttr(ytdFlexyElm, 'tyt-chat', v)
  5976.  
  5977.       _console.log(932, 3, ytdFlexyElm.hasAttribute('tyt-chat'))
  5978.  
  5979.  
  5980.     }
  5981.  
  5982.     return { attr_chatblock, attr_chatcollapsed, chatTypeChanged }
  5983.   }
  5984.  
  5985.   function setupChatFrameDisplayState2() {
  5986.  
  5987.     const ytdFlexyElm = es.ytdFlexy;
  5988.     if (!scriptEnable || !ytdFlexyElm) return null;
  5989.  
  5990.     // this is a backup solution only; should be abandoned
  5991.  
  5992.     let attr_chatblock = null
  5993.     let attr_chatcollapsed = null;
  5994.  
  5995.     const elmChat = document.querySelector('ytd-live-chat-frame#chat')
  5996.     let elmCont = null;
  5997.     if (elmChat) {
  5998.       elmCont = chatFrameElement('yt-live-chat-renderer #continuations')
  5999.  
  6000.  
  6001.       let s = 0;
  6002.       if (elmCont) {
  6003.         //not found if it is collapsed.
  6004.         s |= querySelectorFromAnchor.call(elmCont, 'yt-timed-continuation') ? 1 : 0;
  6005.         s |= querySelectorFromAnchor.call(elmCont, 'yt-live-chat-replay-continuation, yt-player-seek-continuation') ? 2 : 0;
  6006.         //s |= elmCont.querySelector('yt-live-chat-restricted-participation-renderer')?4:0;
  6007.         if (s == 1) {
  6008.           attr_chatblock = 'chat$live';
  6009.         } else if (s == 2) attr_chatblock = 'chat$playback';
  6010.  
  6011.         if (s == 1) {
  6012.           let cmCountElm = document.querySelector("span#tyt-cm-count")
  6013.           if (cmCountElm) cmCountElm.textContent = '';
  6014.         }
  6015.  
  6016.       } else if (!ytdFlexyElm.hasAttribute('tyt-chat')) {
  6017.         // live chat frame but type not known
  6018.  
  6019.         attr_chatblock = '';
  6020.  
  6021.       }
  6022.       //keep unknown as original    
  6023.  
  6024.  
  6025.       let isCollapsed = !!elmChat.hasAttribute('collapsed');
  6026.       attr_chatcollapsed = isCollapsed;
  6027.  
  6028.     } else {
  6029.       attr_chatblock = false;
  6030.       attr_chatcollapsed = false;
  6031.  
  6032.     }
  6033.  
  6034.     return { attr_chatblock, attr_chatcollapsed }
  6035.  
  6036.   }
  6037.  
  6038.  
  6039.   const mtf_checkFlexy = () => {
  6040.     // once per $$native-ytd-watch-flexy$$ {ytd-watch-flexy} detection
  6041.  
  6042.     const ytdFlexyElm = es.ytdFlexy;
  6043.     if (!scriptEnable || !ytdFlexyElm) return true;
  6044.  
  6045.  
  6046.     wls.layoutStatus = 0;
  6047.  
  6048.     let isFlexyHidden = (ytdFlexyElm.hasAttribute('hidden'));
  6049.  
  6050.     if (!isFlexyHidden) {
  6051.       let rChatExist = setupChatFrameDisplayState2();
  6052.       if (rChatExist) {
  6053.         let { attr_chatblock, attr_chatcollapsed } = rChatExist;
  6054.         if (attr_chatblock === null) {
  6055.           //remove attribute if it is unknown
  6056.           attr_chatblock = false;
  6057.           attr_chatcollapsed = false;
  6058.         }
  6059.         let v = attr_chatblock;
  6060.         if (typeof v === 'string') {
  6061.           if (attr_chatcollapsed === true) v = '-' + v;
  6062.           if (attr_chatcollapsed === false) v = '+' + v;
  6063.         }
  6064.         wAttr(ytdFlexyElm, 'tyt-chat', v)
  6065.  
  6066.       }
  6067.     }
  6068.  
  6069.     let rTabSelection = [...querySelectorAllFromAnchor.call(ytdFlexyElm, '.tab-btn[tyt-tab-content]')]
  6070.       .map(elm => ({ elm, hidden: elm.classList.contains('tab-btn-hidden') }));
  6071.  
  6072.     if (rTabSelection.length === 0) {
  6073.       wAttr(ytdFlexyElm, 'tyt-tab', false);
  6074.     } else {
  6075.       rTabSelection = rTabSelection.filter(entry => entry.hidden !== true); // all available tabs
  6076.       if (rTabSelection.length === 0) wAttr(ytdFlexyElm, 'tyt-tab', '');
  6077.     }
  6078.     rTabSelection = null;
  6079.  
  6080.     let rEP = engagement_panels_();
  6081.     if (rEP && rEP.list.length > 0) {
  6082.       wAttr(ytdFlexyElm, 'tyt-ep-visible', `${rEP.value}`);
  6083.     } else {
  6084.       wAttr(ytdFlexyElm, 'tyt-ep-visible', false);
  6085.     }
  6086.  
  6087.     let ls = LAYOUT_VAILD;
  6088.     ls = flexAttr_toLayoutStatus(ls, 'theater')
  6089.     ls = flexAttr_toLayoutStatus(ls, 'tyt-chat')
  6090.     ls = flexAttr_toLayoutStatus(ls, 'is-two-columns_')
  6091.     ls = flexAttr_toLayoutStatus(ls, 'tyt-tab')
  6092.     ls = flexAttr_toLayoutStatus(ls, 'fullscreen')
  6093.     ls = flexAttr_toLayoutStatus(ls, 'tyt-ep-visible')
  6094.     ls = flexAttr_toLayoutStatus(ls, 'tyt-donation-shelf')
  6095.  
  6096.     fixLayoutStatus(ls)
  6097.  
  6098.     wls.layoutStatus = ls
  6099.  
  6100.     mtoFlexyAttr.bindElement(ytdFlexyElm, {
  6101.       attributes: true,
  6102.       attributeFilter: ['tyt-chat', 'theater', 'is-two-columns_', 'tyt-tab', 'fullscreen', 'tyt-ep-visible', 'tyt-donation-shelf', 'hidden', 'is-extra-wide-video_'],
  6103.       attributeOldValue: true
  6104.     })
  6105.  
  6106.     let columns = document.querySelector('ytd-page-manager#page-manager #columns.ytd-watch-flexy')
  6107.     if (columns) {
  6108.       wAttr(columns, 'userscript-scrollbar-render', true);
  6109.     }
  6110.  
  6111.     return false;
  6112.   }
  6113.  
  6114.  
  6115.   function switchTabActivity(activeLink) {
  6116.  
  6117.     //console.log(4545, activeLink)
  6118.     if (!scriptEnable) return;
  6119.  
  6120.     const ytdFlexyElm = es.ytdFlexy;
  6121.  
  6122.     if (!ytdFlexyElm) return;
  6123.  
  6124.     if (activeLink && activeLink.classList.contains('tab-btn-hidden')) return; // not allow to switch to hide tab
  6125.  
  6126.     //if (isTheater() && isWideScreenWithTwoColumns()) activeLink = null;
  6127.  
  6128.  
  6129.     function runAtEnd() {
  6130.  
  6131.       if (activeLink) {
  6132.         lstTab.lastTab = activeLink.getAttribute('tyt-tab-content')
  6133.         lstTab.lastPanel = null;
  6134.  
  6135.         if (!document.querySelector(`${lstTab.lastTab}.tab-content-cld tabview-view-tab-expander`)) {
  6136.  
  6137.           let secondary = document.querySelector('#secondary.ytd-watch-flexy');
  6138.           if (secondary) {
  6139.             secondary.dispatchEvent(new CustomEvent('tabview-hover-slider-restore'))
  6140.             //console.log(1995)
  6141.           }
  6142.  
  6143.  
  6144.         }
  6145.       }
  6146.  
  6147.       ytdFlexyElm.setAttribute('tyt-tab', activeLink ? lstTab.lastTab : '')
  6148.  
  6149.     }
  6150.  
  6151.     const links = document.querySelectorAll('#material-tabs a[tyt-tab-content]');
  6152.  
  6153.     //console.log(701, activeLink)
  6154.  
  6155.     for (const link of links) {
  6156.       let content = document.querySelector(link.getAttribute('tyt-tab-content'));
  6157.       if (link && content) {
  6158.         if (link !== activeLink) {
  6159.           link.classList.remove("active");
  6160.           content.classList.add("tab-content-hidden");
  6161.         } else {
  6162.           link.classList.add("active");
  6163.           content.classList.remove("tab-content-hidden");
  6164.  
  6165.         }
  6166.       }
  6167.     }
  6168.  
  6169.     runAtEnd();
  6170.  
  6171.  
  6172.   }
  6173.  
  6174.  
  6175.   function getStore() {
  6176.     let s = localStorage[STORE_key];
  6177.     function resetStore() {
  6178.       let ret = {
  6179.         version: 1,
  6180.       };
  6181.       localStorage[STORE_key] = JSON.stringify(ret);
  6182.       return ret;
  6183.     }
  6184.     if (!s) return resetStore();
  6185.     let obj = null;
  6186.     try {
  6187.       obj = JSON.parse(s);
  6188.     } catch (e) { }
  6189.     return obj && obj.version === STORE_VERSION ? obj : resetStore();
  6190.   }
  6191.  
  6192.   function setStore(obj) {
  6193.     if (!obj || typeof obj !== 'object') return false;
  6194.     if (obj.version !== STORE_VERSION) return false;
  6195.     localStorage[STORE_key] = JSON.stringify(obj);
  6196.     return true;
  6197.   }
  6198.  
  6199.  
  6200.  
  6201.   async function handlerMaterialTabClickInner(tabBtn) {
  6202.  
  6203.     await Promise.resolve(0);
  6204.  
  6205.     const layoutStatusMutexUnlock = await new Promise(resolve => {
  6206.       layoutStatusMutex.lockWith(unlock => {
  6207.         resolve(unlock)
  6208.       })
  6209.     });
  6210.  
  6211.     // locked
  6212.     let unlock = layoutStatusMutexUnlock; // function of unlock inside layoutStatusMutex
  6213.  
  6214.     //console.log(8515)
  6215.     switchTabActivity_lastTab = tabBtn.getAttribute('tyt-tab-content');
  6216.  
  6217.     let isActiveAndVisible = tabBtn.classList.contains('tab-btn') && tabBtn.classList.contains('active') && !tabBtn.classList.contains('tab-btn-hidden')
  6218.  
  6219.     _console.log(8221, 15, isActiveAndVisible)
  6220.  
  6221.     if (isFullScreen()) {
  6222.  
  6223.  
  6224.       const fullScreenTabScrollIntoView = () => {
  6225.         let scrollElement = document.querySelector('ytd-app[scrolling]')
  6226.         if (!scrollElement) return;
  6227.         // single column view; click button; scroll to tab content area 100%
  6228.         let rightTabs = document.querySelector('#right-tabs');
  6229.         let pTop = rightTabs.getBoundingClientRect().top - scrollElement.getBoundingClientRect().top
  6230.         if (rightTabs && pTop > 0 && tabBtn.classList.contains('active')) {
  6231.           rightTabs.scrollIntoView(false);
  6232.         }
  6233.       }
  6234.  
  6235.       _console.log(8221, 16, 1)
  6236.  
  6237.       if (isActiveAndVisible) {
  6238.         timeline.setTimeout(unlock, 80);
  6239.         switchTabActivity(null);
  6240.       } else {
  6241.  
  6242.         if (isChatExpand() && isWideScreenWithTwoColumns()) {
  6243.           ytBtnCollapseChat();
  6244.         } else if (isEngagementPanelExpanded() && isWideScreenWithTwoColumns()) {
  6245.           ytBtnCloseEngagementPanels();
  6246.         } else if (isDonationShelfExpanded() && isWideScreenWithTwoColumns()) {
  6247.           closeDonationShelf();
  6248.         }
  6249.  
  6250.  
  6251.         timeline.setTimeout(fullScreenTabScrollIntoView, 60)
  6252.  
  6253.         timeline.setTimeout(unlock, 80);
  6254.         switchTabActivity(tabBtn)
  6255.       }
  6256.  
  6257.     } else if (isWideScreenWithTwoColumns() && !isTheater() && isActiveAndVisible) {
  6258.  
  6259.       _console.log(8221, 16, 2)
  6260.       //optional
  6261.       timeline.setTimeout(unlock, 80);
  6262.       switchTabActivity(null);
  6263.       ytBtnSetTheater();
  6264.     } else if (isActiveAndVisible) {
  6265.  
  6266.       _console.log(8221, 16, 3)
  6267.       timeline.setTimeout(unlock, 80);
  6268.       switchTabActivity(null);
  6269.     } else {
  6270.  
  6271.       _console.log(8221, 16, 4)
  6272.  
  6273.       if (isChatExpand() && isWideScreenWithTwoColumns()) {
  6274.         ytBtnCollapseChat();
  6275.       } else if (isEngagementPanelExpanded() && isWideScreenWithTwoColumns()) {
  6276.         ytBtnCloseEngagementPanels();
  6277.       } else if (isDonationShelfExpanded() && isWideScreenWithTwoColumns()) {
  6278.         closeDonationShelf();
  6279.       } else if (isWideScreenWithTwoColumns() && isTheater() && !isFullScreen()) {
  6280.         ytBtnCancelTheater(); //ytd-watch-flexy attr [theater]
  6281.       }
  6282.  
  6283.       timeline.setTimeout(() => {
  6284.         // single column view; click button; scroll to tab content area 100%
  6285.         let rightTabs = document.querySelector('#right-tabs');
  6286.         if (!isWideScreenWithTwoColumns() && rightTabs && rightTabs.offsetTop > 0 && tabBtn.classList.contains('active')) {
  6287.           let tabButtonBar = document.querySelector('#material-tabs');
  6288.           let tabButtonBarHeight = tabButtonBar ? tabButtonBar.offsetHeight : 0;
  6289.           window.scrollTo(0, rightTabs.offsetTop - tabButtonBarHeight);
  6290.         }
  6291.       }, 60)
  6292.       // _console.log(8519)
  6293.  
  6294.       timeline.setTimeout(unlock, 80)
  6295.       switchTabActivity(tabBtn)
  6296.  
  6297.     }
  6298.  
  6299.  
  6300.   }
  6301.  
  6302.   function handlerMaterialTabClick(/** @type {MouseEvent} */ evt) {
  6303.  
  6304.     //console.log(8510)
  6305.     const ytdFlexyElm = es.ytdFlexy;
  6306.     if (!scriptEnable || !ytdFlexyElm) return null;
  6307.  
  6308.     let tabBtn = this;
  6309.  
  6310.     if (!tabBtn.hasAttribute('tyt-tab-content')) return;
  6311.  
  6312.     /** @type {HTMLElement | null} */
  6313.     let dom = evt.target;
  6314.     if (!dom) return;
  6315.  
  6316.     if (dom.classList.contains('font-size-btn')) return;
  6317.  
  6318.  
  6319.     evt.preventDefault();
  6320.  
  6321.     handlerMaterialTabClickInner(tabBtn);
  6322.  
  6323.  
  6324.   }
  6325.  
  6326.   function prepareTabBtn() {
  6327.  
  6328.     const materialTab = document.querySelector("#material-tabs")
  6329.     if (!materialTab) return;
  6330.  
  6331.     let noActiveTab = !!document.querySelector('ytd-watch-flexy[tyt-chat^="+"]')
  6332.  
  6333.     const activeLink = querySelectorFromAnchor.call(materialTab, 'a[tyt-tab-content].active:not(.tab-btn-hidden)')
  6334.     if (activeLink) switchTabActivity(noActiveTab ? null : activeLink)
  6335.  
  6336.     if (!tabsUiScript_setclick) {
  6337.       tabsUiScript_setclick = true;
  6338.  
  6339.       let fontSizeBtnClick = null;
  6340.  
  6341.       materialTab.addEventListener('click', function (evt) {
  6342.  
  6343.         if (!evt.isTrusted) return; // prevent call from background
  6344.         let dom = evt.target;
  6345.         if ((dom || 0).nodeType !== 1) return;
  6346.  
  6347.         const domInteraction = dom.getAttribute('tyt-di');
  6348.         if (domInteraction === 'q9Kjc') {
  6349.           handlerMaterialTabClick.call(dom, evt)
  6350.         } else if (domInteraction === '8rdLQ') {
  6351.           fontSizeBtnClick.call(dom, evt)
  6352.         }
  6353.  
  6354.  
  6355.       }, true)
  6356.  
  6357.       function updateCSS_fontsize() {
  6358.  
  6359.         let store = getStore();
  6360.  
  6361.         const ytdFlexyElm = es.ytdFlexy;
  6362.         if (ytdFlexyElm) {
  6363.           if (store['font-size-#tab-info']) ytdFlexyElm.style.setProperty('--ut2257-info', store['font-size-#tab-info'])
  6364.           if (store['font-size-#tab-comments']) ytdFlexyElm.style.setProperty('--ut2257-comments', store['font-size-#tab-comments'])
  6365.           if (store['font-size-#tab-videos']) ytdFlexyElm.style.setProperty('--ut2257-videos', store['font-size-#tab-videos'])
  6366.           if (store['font-size-#tab-list']) ytdFlexyElm.style.setProperty('--ut2257-list', store['font-size-#tab-list'])
  6367.         }
  6368.  
  6369.       }
  6370.  
  6371.       fontSizeBtnClick = function (evt) {
  6372.  
  6373.         evt.preventDefault();
  6374.         evt.stopPropagation();
  6375.         evt.stopImmediatePropagation();
  6376.  
  6377.         /** @type {HTMLElement | null} */
  6378.         let dom = evt.target;
  6379.         if (!dom) return;
  6380.  
  6381.  
  6382.         let value = dom.classList.contains('font-size-plus') ? 1 : dom.classList.contains('font-size-minus') ? -1 : 0;
  6383.  
  6384.         let active_tab_content = closestDOM.call(dom, '[tyt-tab-content]').getAttribute('tyt-tab-content');
  6385.  
  6386.         let store = getStore();
  6387.         let settingKey = `font-size-${active_tab_content}`
  6388.         if (!store[settingKey]) store[settingKey] = 1.0;
  6389.         if (value < 0) store[settingKey] -= 0.05;
  6390.         else if (value > 0) store[settingKey] += 0.05;
  6391.         if (store[settingKey] < 0.1) store[settingKey] = 0.1;
  6392.         else if (store[settingKey] > 10) store[settingKey] = 10.0;
  6393.         setStore(store);
  6394.  
  6395.  
  6396.         updateCSS_fontsize();
  6397.  
  6398.       }
  6399.       //$(materialTab).on("click", ".font-size-btn", );
  6400.  
  6401.       updateCSS_fontsize();
  6402.  
  6403.  
  6404.     }
  6405.  
  6406.   }
  6407.  
  6408.   function setStickyHeader(targetElm, bool, getWidthHeight, getLeftRight) {
  6409.  
  6410.     //if(isStickyHeaderEnabled===bool) return; // no update
  6411.  
  6412.     if (bool === true) {
  6413.       const { width, height } = getWidthHeight();
  6414.       targetElm.style.setProperty("--tyt-stickybar-w", width + 'px')
  6415.       targetElm.style.setProperty("--tyt-stickybar-h", height + 'px')
  6416.       const res = getLeftRight();
  6417.       if (res) {
  6418.  
  6419.         targetElm.style.setProperty("--tyt-stickybar-l", (res.left) + 'px')
  6420.         targetElm.style.setProperty("--tyt-stickybar-r", (res.right) + 'px')
  6421.  
  6422.       }
  6423.       wAttr(targetElm, 'tyt-stickybar', true);
  6424.       isStickyHeaderEnabled = true;
  6425.  
  6426.     } else if (bool === false) {
  6427.  
  6428.       wAttr(targetElm, 'tyt-stickybar', false);
  6429.       isStickyHeaderEnabled = false;
  6430.     }
  6431.  
  6432.  
  6433.   }
  6434.  
  6435.   const singleColumnScrolling = async function () {
  6436.     //makeHeaderFloat
  6437.     // required for 1) init 2) layout change 3) resizing
  6438.  
  6439.     if (!scriptEnable || pageType !== 'watch') return;
  6440.  
  6441.  
  6442.     let isTwoCol = (wls.layoutStatus & LAYOUT_TWO_COLUMNS) === LAYOUT_TWO_COLUMNS;
  6443.     if (isTwoCol) {
  6444.  
  6445.       if (isStickyHeaderEnabled) {
  6446.  
  6447.         let targetElm = document.querySelector("#right-tabs");
  6448.         setStickyHeader(targetElm, false, null, null);
  6449.       }
  6450.       return;
  6451.     }
  6452.  
  6453.     let pageY = scrollY;
  6454.  
  6455.  
  6456.     let tdt = Date.now();
  6457.     singleColumnScrolling_dt = tdt;
  6458.  
  6459.  
  6460.     _console.log(7891, 'scrolling')
  6461.  
  6462.     function getXYStatus(res) {
  6463.  
  6464.       const [navHeight, elmY] = res;
  6465.  
  6466.       let xyz = [elmY + navHeight, pageY, elmY - navHeight]
  6467.  
  6468.       let xyStatus = 0
  6469.       if (xyz[1] < xyz[2] && xyz[2] < xyz[0]) {
  6470.         // 1
  6471.         xyStatus = 1
  6472.       }
  6473.  
  6474.       if (xyz[0] > xyz[1] && xyz[1] > xyz[2]) {
  6475.  
  6476.         //2
  6477.         xyStatus = 2
  6478.  
  6479.       }
  6480.  
  6481.       if (xyz[2] < xyz[0] && xyz[0] < xyz[1]) {
  6482.         // 3
  6483.  
  6484.         xyStatus = 3
  6485.  
  6486.  
  6487.       }
  6488.  
  6489.       return xyStatus;
  6490.     }
  6491.  
  6492.     let [targetElm, header, navElm] = await Promise.all([
  6493.       new Promise(f => f(document.querySelector("#right-tabs"))),
  6494.  
  6495.       new Promise(f => f(document.querySelector("#right-tabs header"))),
  6496.  
  6497.       new Promise(f => f(document.querySelector('#masthead-container, #masthead'))),
  6498.  
  6499.     ]);
  6500.  
  6501.     function emptyForGC() {
  6502.       targetElm = null;
  6503.       header = null;
  6504.       navElm = null;
  6505.     }
  6506.  
  6507.     if (!targetElm || !header) {
  6508.       return emptyForGC();
  6509.     }
  6510.     if (singleColumnScrolling_dt !== tdt) return emptyForGC();
  6511.  
  6512.     let res2 = await Promise.all([
  6513.       new Promise(f => f(navElm ? navElm.offsetHeight : 0)),
  6514.       new Promise(f => f(targetElm.offsetTop))
  6515.     ])
  6516.  
  6517.     if (res2 === null) return emptyForGC();
  6518.  
  6519.     if (singleColumnScrolling_dt !== tdt) return emptyForGC();
  6520.  
  6521.  
  6522.     const xyStatus = getXYStatus(res2);
  6523.  
  6524.  
  6525.     function getLeftRight() {
  6526.  
  6527.       let thp = document.querySelector('tabview-view-pos-thead');
  6528.       if (thp) {
  6529.  
  6530.         let rect = thp.getBoundingClientRect()
  6531.         if (rect) {
  6532.           return {
  6533.             left: rect.left,
  6534.             right: document.documentElement.clientWidth - rect.right
  6535.           };
  6536.         }
  6537.       }
  6538.       return null;
  6539.     }
  6540.  
  6541.     let bool = (xyStatus == 2 || xyStatus == 3) ? true : ((xyStatus == 1) ? false : null);
  6542.  
  6543.     function getWidthHeight() {
  6544.       return { width: targetElm.offsetWidth, height: header.offsetHeight };
  6545.     }
  6546.  
  6547.     setStickyHeader(targetElm, bool, getWidthHeight, getLeftRight);
  6548.  
  6549.  
  6550.     emptyForGC();
  6551.  
  6552.   };
  6553.  
  6554.  
  6555.   const singleColumnScrolling2 = async function (xyStatus, width, xRect) {
  6556.     //makeHeaderFloat
  6557.  
  6558.     if (!scriptEnable || pageType !== 'watch') return;
  6559.  
  6560.  
  6561.     if ((wls.layoutStatus & LAYOUT_TWO_COLUMNS) === LAYOUT_TWO_COLUMNS) {
  6562.       return;
  6563.     }
  6564.  
  6565.     let [targetElm, header] = await Promise.all([
  6566.       new Promise(f => f(document.querySelector("#right-tabs"))),
  6567.       new Promise(f => f(document.querySelector("#right-tabs header")))
  6568.     ]);
  6569.  
  6570.     function emptyForGC() {
  6571.       targetElm = null;
  6572.       header = null;
  6573.     }
  6574.  
  6575.  
  6576.     if (!targetElm || !header) {
  6577.       return emptyForGC();
  6578.     }
  6579.  
  6580.     function getLeftRight() {
  6581.       return xRect;
  6582.     }
  6583.  
  6584.     let bool = (xyStatus == 2 || xyStatus == 3) ? true : ((xyStatus == 1) ? false : null);
  6585.  
  6586.     function getWidthHeight() {
  6587.       return { width: (width || targetElm.offsetWidth), height: header.offsetHeight };
  6588.     }
  6589.  
  6590.     setStickyHeader(targetElm, bool, getWidthHeight, getLeftRight);
  6591.  
  6592.     emptyForGC();
  6593.  
  6594.   };
  6595.  
  6596.  
  6597.   function resetBuggyLayoutForNewVideoPage() {
  6598.  
  6599.     const ytdFlexyElm = es.ytdFlexy;
  6600.     if (!ytdFlexyElm) return;
  6601.  
  6602.     //(flexy is visible and watch video page) 
  6603.  
  6604.     scriptEnable = true;
  6605.  
  6606.     _console.log(27056)
  6607.  
  6608.     let new_layoutStatus = wls.layoutStatus
  6609.  
  6610.     new_layoutStatus & (LAYOUT_CHATROOM_COLLAPSED | LAYOUT_CHATROOM)
  6611.  
  6612.     const new_isExpandedChat = !(new_layoutStatus & LAYOUT_CHATROOM_COLLAPSED) && !!(new_layoutStatus & LAYOUT_CHATROOM)
  6613.     const new_isCollapsedChat = !!(new_layoutStatus & LAYOUT_CHATROOM_COLLAPSED) && !!(new_layoutStatus & LAYOUT_CHATROOM)
  6614.  
  6615.     const new_isTwoColumns = new_layoutStatus & LAYOUT_TWO_COLUMNS;
  6616.     const new_isTheater = new_layoutStatus & LAYOUT_THEATER;
  6617.     const new_isTabExpanded = new_layoutStatus & LAYOUT_TAB_EXPANDED;
  6618.     const new_isFullScreen = new_layoutStatus & LAYOUT_FULLSCREEN;
  6619.     const new_isExpandedEPanel = new_layoutStatus & LAYOUT_ENGAGEMENT_PANEL_EXPANDED;
  6620.     const new_isExpandedDonationShelf = new_layoutStatus & LAYOUT_DONATION_SHELF_EXPANDED;
  6621.     
  6622.     const nothingShown = !new_isTabExpanded && !new_isExpandedChat && !new_isExpandedEPanel && !new_isExpandedDonationShelf
  6623.  
  6624.     if (ytdFlexyElm.getAttribute('tyt-tab') === '' && new_isTwoColumns && !new_isTheater && nothingShown && !new_isFullScreen) {
  6625.       // e.g. engage panel removed after miniview and change video
  6626.       setToActiveTab();
  6627.     } else if (new_isExpandedEPanel && querySelectorAllFromAnchor.call(ytdFlexyElm, 'ytd-watch-flexy[flexy][tyt-tab] #panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer[target-id][visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"]:not([hidden])').length === 0) {
  6628.       wls.layoutStatus = new_layoutStatus & (~LAYOUT_ENGAGEMENT_PANEL_EXPANDED)
  6629.     } else if (new_isExpandedDonationShelf && querySelectorAllFromAnchor.call(ytdFlexyElm, 'ytd-donation-shelf-renderer.ytd-watch-flexy:not([hidden])').length === 0) {
  6630.       wls.layoutStatus = new_layoutStatus & (~LAYOUT_DONATION_SHELF_EXPANDED)
  6631.     }
  6632.  
  6633.   }
  6634.  
  6635.  
  6636.   function extractInfoFromLiveChatRenderer(liveChatRenderer) {
  6637.  
  6638.     let lcr = liveChatRenderer
  6639.  
  6640.     let data_shb = ((lcr || 0).showHideButton || 0).toggleButtonRenderer
  6641.  
  6642.     let default_display_state = null, txt_collapse = null, txt_expand = null;
  6643.  
  6644.  
  6645.     if (data_shb && data_shb.defaultText && data_shb.toggledText && data_shb.defaultText.runs && data_shb.toggledText.runs) {
  6646.  
  6647.       if (data_shb.defaultText.runs.length === 1 && data_shb.toggledText.runs.length === 1) {
  6648.  
  6649.         if (lcr.initialDisplayState == "LIVE_CHAT_DISPLAY_STATE_EXPANDED") {
  6650.  
  6651.           default_display_state = lcr.initialDisplayState
  6652.  
  6653.           txt_collapse = (data_shb.defaultText.runs[0] || 0).text // COLLAPSE the area
  6654.  
  6655.           txt_expand = (data_shb.toggledText.runs[0] || 0).text // expand the area
  6656.  
  6657.         } else if (lcr.initialDisplayState == "LIVE_CHAT_DISPLAY_STATE_COLLAPSED") {
  6658.           default_display_state = lcr.initialDisplayState
  6659.  
  6660.           txt_expand = (data_shb.defaultText.runs[0] || 0).text // expand the area
  6661.  
  6662.           txt_collapse = (data_shb.toggledText.runs[0] || 0).text // COLLAPSE the area
  6663.         }
  6664.  
  6665.  
  6666.         if (typeof txt_expand == 'string' && typeof txt_collapse == 'string' && txt_expand.length > 0 && txt_collapse.length > 0) {
  6667.  
  6668.         } else {
  6669.           txt_expand = null;
  6670.           txt_collapse = null;
  6671.         }
  6672.       }
  6673.  
  6674.     }
  6675.  
  6676.     return { default_display_state, txt_collapse, txt_expand }
  6677.  
  6678.   }
  6679.  
  6680.  
  6681.   function newVideoPage(evt_detail) {
  6682.  
  6683.     //toggleBtnDC = 1;
  6684.  
  6685.     console.log('[tyt] newVideoPage')
  6686.  
  6687.     const ytdFlexyElm = es.ytdFlexy;
  6688.     if (!ytdFlexyElm) return;
  6689.  
  6690.     timeline.reset();
  6691.     layoutStatusMutex = new Mutex();
  6692.  
  6693.     let liveChatRenderer = null;
  6694.     let isReplay = null;
  6695.  
  6696.     if (pageType !== 'watch') return; // scriptEnable -> pageType shall be always 'watch'
  6697.     resetBuggyLayoutForNewVideoPage();
  6698.  
  6699.     try {
  6700.       liveChatRenderer = evt_detail.pageData.response.contents.twoColumnWatchNextResults.conversationBar.liveChatRenderer
  6701.     } catch (e) { }
  6702.     if (liveChatRenderer) {
  6703.       if (liveChatRenderer.isReplay === true) isReplay = true;
  6704.     }
  6705.  
  6706.     pageFetchedDataVideoId = ((((evt_detail || 0).pageData || 0).playerResponse || 0).videoDetails || 0).videoId || 0;
  6707.  
  6708.  
  6709.     const chatBlockR = liveChatRenderer ? (isReplay ? 3 : 1) : 0
  6710.     const initialDisplayState = liveChatRenderer ? liveChatRenderer.initialDisplayState : null;
  6711.  
  6712.  
  6713.     liveChatRenderer = null; // release memory for GC, just in case
  6714.  
  6715.     let f = () => {
  6716.  
  6717.       _console.log(932, 1, 1)
  6718.       const ytdFlexyElm = es.ytdFlexy;
  6719.       if (!scriptEnable || !ytdFlexyElm) return;
  6720.  
  6721.       _console.log(932, 1, 2)
  6722.       if (pageType !== 'watch') return;
  6723.  
  6724.       _console.log(932, 1, 3)
  6725.  
  6726.  
  6727.       let displayState = setupChatFrameDisplayState1(chatBlockR, initialDisplayState);
  6728.  
  6729.       let { attr_chatblock, attr_chatcollapsed, chatTypeChanged } = displayState;
  6730.  
  6731.  
  6732.       if (pageType === 'watch') { // reset info when hidden
  6733.  
  6734.         let elm_storeLastPanel = es.storeLastPanel;
  6735.  
  6736.         if (!elm_storeLastPanel) storeLastPanel = null;
  6737.         else if (!isDOMVisible(elm_storeLastPanel)) {
  6738.           storeLastPanel = null;
  6739.           ytBtnCloseEngagementPanels();
  6740.         }
  6741.  
  6742.       }
  6743.  
  6744.       if (chatTypeChanged) {
  6745.  
  6746.         if (attr_chatblock == 'chat$live') {
  6747.  
  6748.           _console.log(932, 4)
  6749.  
  6750.           mtf_forceCheckLiveVideo_disable = 2;
  6751.  
  6752.           //console.log(3712,1)
  6753.  
  6754.           _disableComments();
  6755.  
  6756.  
  6757.         } else {
  6758.  
  6759.           const tabBtn = document.querySelector('[tyt-tab-content="#tab-comments"].tab-btn-hidden')
  6760.           if (tabBtn) {
  6761.             emptyCommentSection();
  6762.             _console.log(9360, 74);
  6763.             tabBtn.classList.remove("tab-btn-hidden")
  6764.           } else {
  6765.             setCommentSection(0);
  6766.           }
  6767.  
  6768.           mtf_forceCheckLiveVideo_disable = 0;
  6769.  
  6770.           _console.log(7234, 'comments_section_loaded = 0')
  6771.           restoreFetching();
  6772.  
  6773.  
  6774.         }
  6775.  
  6776.  
  6777.       } else {
  6778.  
  6779.         // restore Fetching only
  6780.  
  6781.         if (mtf_forceCheckLiveVideo_disable !== 2 && (attr_chatblock === false || attr_chatblock === 'chat$playback')) {
  6782.  
  6783.           emptyCommentSection();
  6784.           _console.log(9360, 77);
  6785.           mtf_forceCheckLiveVideo_disable = 0;
  6786.           _console.log(7235, 'comments_section_loaded = 0')
  6787.           restoreFetching();
  6788.  
  6789.         }
  6790.  
  6791.       }
  6792.  
  6793.  
  6794.       if (renderDeferred.resolved && Q.comments_section_loaded === 0 && fetchCounts.new && !fetchCounts.fetched) {
  6795.         fetchCounts.new.f();
  6796.         fetchCounts.fetched = true;
  6797.         _console.log(9972, 'fetched = true')
  6798.  
  6799.         fetchCommentsFinished();
  6800.       }
  6801.  
  6802.     }
  6803.  
  6804.     f();
  6805.  
  6806.   }
  6807.  
  6808.   function setVideosTwoColumns(/** @type {number} */ flag, /** @type {boolean} */ bool) {
  6809.  
  6810.     //two columns to one column
  6811.  
  6812.     /*
  6813.         [placeholder-videos] ytd-watch-next-secondary-results-renderer.style-scope.ytd-watch-flexy
  6814.  
  6815.         is-two-columns =""  => no is-two-columns
  6816.         
  6817.         
  6818.         
  6819.         [placeholder-videos] tp-yt-paper-spinner#spinner.style-scope.ytd-continuation-item-renderer
  6820.         
  6821.         no hidden => hidden =""
  6822.         
  6823.         
  6824.         [placeholder-videos] div#button.style-scope.ytd-continuation-item-renderer
  6825.         
  6826.         
  6827.         hidden ="" => no hidden
  6828.         
  6829.  
  6830.         */
  6831.  
  6832.     let cssSelector1 = '[placeholder-videos] ytd-watch-next-secondary-results-renderer.style-scope.ytd-watch-flexy'
  6833.  
  6834.     let cssSelector2 = '[placeholder-videos] tp-yt-paper-spinner#spinner.style-scope.ytd-continuation-item-renderer'
  6835.  
  6836.     let cssSelector3 = '[placeholder-videos] div#button.style-scope.ytd-continuation-item-renderer'
  6837.  
  6838.     let res = {}
  6839.     if (flag & 1) {
  6840.       res.m1 = document.querySelector(cssSelector1)
  6841.       if (res.m1) wAttr(res.m1, 'is-two-columns', bool ? '' : false);
  6842.     }
  6843.  
  6844.     if (flag & 2) {
  6845.       res.m2 = document.querySelector(cssSelector2)
  6846.       if (res.m2) wAttr(res.m2, 'hidden', bool ? false : '');
  6847.     }
  6848.  
  6849.     if (flag & 4) {
  6850.       res.m3 = document.querySelector(cssSelector3)
  6851.       if (res.m3) wAttr(res.m3, 'hidden', bool ? '' : false);
  6852.     }
  6853.  
  6854.     return res
  6855.  
  6856.  
  6857.   }
  6858.  
  6859.   
  6860.   // ---------------------------------------------------------------------------------------------
  6861.  
  6862.   // ---- EVENTS ----
  6863.  
  6864.   let ytEventSequence = 0
  6865.   let formatDates = null
  6866.  
  6867.   
  6868.   function pageBeingFetched(evt, isPageFirstLoaded) {
  6869.  
  6870.     let nodeName = (((evt||0).target||0).nodeName||'').toUpperCase()
  6871.     if (nodeName !== 'YTD-APP') return;
  6872.  
  6873.     let pageFetchedDataLocal = evt.detail;
  6874.  
  6875.     let d_page = ((pageFetchedDataLocal||0).pageData||0).page;
  6876.     if (!d_page) return;
  6877.  
  6878.     pageType = d_page;
  6879.  
  6880.     if (pageType !== 'watch') return
  6881.  
  6882.     let promiseChatDetails = null
  6883.  
  6884.     let isFirstLoad = firstLoadStatus & 8;
  6885.  
  6886.     if (isFirstLoad) {
  6887.       firstLoadStatus -= 8;
  6888.       document.addEventListener('load', iframeLoadHookA, capturePassive)
  6889.       ytMicroEventsInit();
  6890.     }
  6891.     // ytMicroEventsInit set
  6892.     variableResets();
  6893.  
  6894.     if (isFirstLoad) {
  6895.  
  6896.       if (ytEventSequence >= 2) {
  6897.         let docElement = document.documentElement
  6898.         if (docElement.hasAttribute('tabview-loaded')) {
  6899.           throw 'Tabview Youtube Duplicated';
  6900.         }
  6901.         docElement.setAttribute('tabview-loaded', '')
  6902.  
  6903.         Promise.resolve(docElement).then(docElement => {
  6904.           if (ytEventSequence >= 2) {
  6905.             docElement.dispatchEvent(new CustomEvent('tabview-ce-hack'))
  6906.             docElement = null
  6907.           }
  6908.         })
  6909.  
  6910.       }
  6911.     }
  6912.     // tabview-loaded delay set
  6913.  
  6914.     formatDates={}
  6915.     try{
  6916.       formatDates.publishDate = pageFetchedDataLocal.pageData.playerResponse.microformat.playerMicroformatRenderer.publishDate
  6917.     }catch(e){}
  6918.     // 2022-12-30
  6919.  
  6920.     try{
  6921.       formatDates.uploadDate = pageFetchedDataLocal.pageData.playerResponse.microformat.playerMicroformatRenderer.uploadDate
  6922.     }catch(e){}
  6923.     // 2022-12-30
  6924.  
  6925.     try{
  6926.       formatDates.publishDate2 = pageFetchedDataLocal.pageData.response.contents.twoColumnWatchNextResults.results.results.contents[0].videoPrimaryInfoRenderer.dateText.simpleText
  6927.     }catch(e){}
  6928.     // 2022/12/31
  6929.  
  6930.     if(typeof formatDates.publishDate2==='string' && formatDates.publishDate2 !== formatDates.publishDate){
  6931.       formatDates.publishDate = formatDates.publishDate2
  6932.       formatDates.uploadDate = null
  6933.     }
  6934.  
  6935.     try{
  6936.       formatDates.broadcastBeginAt = pageFetchedDataLocal.pageData.playerResponse.microformat.playerMicroformatRenderer.liveBroadcastDetails.startTimestamp
  6937.     }catch(e){}
  6938.     try{
  6939.       formatDates.broadcastEndAt = pageFetchedDataLocal.pageData.playerResponse.microformat.playerMicroformatRenderer.liveBroadcastDetails.endTimestamp
  6940.     }catch(e){}
  6941.     try{
  6942.       formatDates.isLiveNow = pageFetchedDataLocal.pageData.playerResponse.microformat.playerMicroformatRenderer.liveBroadcastDetails.isLiveNow
  6943.     }catch(e){}
  6944.  
  6945.     promiseChatDetails = new Promise(resolve => {
  6946.       if (ytEventSequence >= 2) {
  6947.         let liveChatRenderer = null;
  6948.         try {
  6949.           liveChatRenderer = pageFetchedDataLocal.pageData.response.contents.twoColumnWatchNextResults.conversationBar.liveChatRenderer
  6950.         } catch (e) { }
  6951.         chatroomDetails = liveChatRenderer ? extractInfoFromLiveChatRenderer(liveChatRenderer) : null;
  6952.         liveChatRenderer = null; // release memory for GC, just in case
  6953.       }
  6954.       resolve(0)
  6955.     })
  6956.  
  6957.     let ytdFlexyElm = document.querySelector('ytd-watch-flexy')
  6958.  
  6959.     if (!ytdFlexyElm) return;
  6960.  
  6961.  
  6962.     ytdFlexy = mWeakRef(ytdFlexyElm);
  6963.  
  6964.     ytdFlexyElm = null;
  6965.  
  6966.     Promise.resolve(0).then(() => {
  6967.  
  6968.       if (ytEventSequence >= 2 && pageRendered === 0) {
  6969.  
  6970.         const ytdFlexyElm = es.ytdFlexy; // shall be always non-null
  6971.         if (ytdFlexyElm) {
  6972.  
  6973.           let elmPL = document.createElement('tabview-view-ploader');
  6974.           pageRendered = 1;
  6975.           ytdFlexyElm.appendChild(elmPL);
  6976.           // pageRendered keeps at 1 if the video is continuously playing at the background
  6977.           // pageRendered would not be resolve but will reset for each change of video
  6978.  
  6979.         }
  6980.  
  6981.       }
  6982.  
  6983.     })
  6984.  
  6985.     let renderId = renderIdentifier
  6986.     renderDeferred.debounce(() => {
  6987.       if (renderId !== renderIdentifier) return
  6988.       if (ytEventSequence >= 2) {
  6989.         advanceFetch(); // at least one triggering at yt-page-data-fetched
  6990.       }
  6991.     });
  6992.  
  6993.     Promise.race([promiseChatDetails]).then(() => {
  6994.  
  6995.       const ytdFlexyElm = es.ytdFlexy;
  6996.       if (ytEventSequence >= 2 && ytdFlexyElm) {
  6997.         ytdFlexyElm.classList.toggle('tyt-chat-toggleable', !!chatroomDetails);
  6998.       }
  6999.  
  7000.     }).then(() => {
  7001.  
  7002.       if (ytEventSequence >= 2) {
  7003.  
  7004.         let tabsDeferredSess = pageSession.session();
  7005.         if (!scriptEnable && tabsDeferred.resolved) { }
  7006.         else tabsDeferred.debounce(() => {
  7007.  
  7008.           if (!tabsDeferredSess.isValid) return;
  7009.           tabsDeferredSess = null;
  7010.  
  7011.           if (ytEventSequence >= 2 && pageFetchedDataLocal !== null) {
  7012.             domInit_comments();
  7013.             newVideoPage(pageFetchedDataLocal);
  7014.             pageFetchedDataLocal = null;
  7015.           }
  7016.  
  7017.         });
  7018.  
  7019.       }
  7020.  
  7021.     })
  7022.  
  7023.   }
  7024.  
  7025.   let pageSeqMutex = new Mutex()
  7026.  
  7027.   function pageSeq1(evt) {
  7028.     _navigateLoadDT = 0
  7029.     if (ytEventSequence !== 1) {
  7030.       ytEventSequence = 1
  7031.       pageSeqMutex.lockWith(unlock=>{
  7032.         pageBeingInit();
  7033.         unlock();
  7034.       })
  7035.     }
  7036.   }
  7037.  
  7038.   function pageSeq2(evt) {
  7039.     _navigateLoadDT = 0
  7040.  
  7041.     if (ytEventSequence !== 1) {
  7042.       ytEventSequence = 1
  7043.       pageSeqMutex.lockWith(unlock=>{
  7044.         pageBeingInit();
  7045.         unlock();
  7046.       })
  7047.     }
  7048.     if (ytEventSequence === 1) {
  7049.       ytEventSequence = 2
  7050.  
  7051.       
  7052.       pageType = null
  7053.       
  7054.       pageSeqMutex.lockWith(unlock=>{
  7055.         
  7056.         let mIsPageFirstLoaded = _isPageFirstLoaded
  7057.         
  7058.         pageType = null
  7059.         // mIsPageFirstLoaded && console.time("Tabview Youtube Load")
  7060.         pageBeingFetched(evt, mIsPageFirstLoaded)
  7061.         // mIsPageFirstLoaded && console.timeEnd("Tabview Youtube Load")
  7062.         // ytMicroEventsInit set + tabview-loaded delay set
  7063.         new Promise(() => {
  7064.           if (ytEventSequence >= 2) {
  7065.             document.documentElement.classList.toggle('tabview-normal-player', pageType === 'watch');
  7066.           }
  7067.         })
  7068.         if (pageType !== 'watch') {
  7069.           ytdFlexy = null
  7070.           chatroomDetails = null
  7071.           Promise.resolve(0).then(() => {
  7072.             if (ytEventSequence >= 2) {
  7073.               variableResets();
  7074.               emptyCommentSection();
  7075.               _console.log(9360, 75);
  7076.               tabsDeferred.reset();
  7077.               _pageBeingInit();
  7078.               tabsDeferred.resolve(); // for page initialization
  7079.             }
  7080.           })
  7081.         }
  7082.  
  7083.         if (_updateTimeAccum > 0) {
  7084.           let currentVideo = document.querySelector('#movie_player video[src]')
  7085.           let keep_viTime = false
  7086.           if (currentVideo && currentVideo.readyState > currentVideo.HAVE_CURRENT_DATA && currentVideo.currentTime > 2.2) {
  7087.             // allow miniview browsing
  7088.             keep_viTime = true
  7089.           }
  7090.           if (!keep_viTime) {
  7091.             _viTimeNum = 200;
  7092.             _updateTimeAccum = 0;
  7093.             delete document.head.dataset.viTime;
  7094.           }
  7095.         }
  7096.  
  7097.         unlock();
  7098.       })
  7099.     }
  7100.  
  7101.   }
  7102.  
  7103.   function pageSeq3(evt) {
  7104.     _navigateLoadDT = 0
  7105.     
  7106.     if (ytEventSequence === 2) {
  7107.       ytEventSequence = 3
  7108.       
  7109.       pageSeqMutex.lockWith(unlock => {
  7110.         if (pageType === 'watch') {
  7111.           let mIsPageFirstLoaded = _isPageFirstLoaded
  7112.           // ytMicroEventsInit set + tabview-loaded delay set
  7113.           onNavigationEndAsync(mIsPageFirstLoaded)
  7114.           _isPageFirstLoaded = false
  7115.         }
  7116.         
  7117.         
  7118.         unlock();
  7119.       })
  7120.     }
  7121.   }
  7122.  
  7123.  
  7124.   document.addEventListener('yt-navigate-start', pageSeq1, bubblePassive)
  7125.   document.addEventListener('yt-navigate-cache', pageSeq1, bubblePassive)
  7126.   document.addEventListener('yt-navigate-redirect', pageSeq1, bubblePassive)
  7127.   document.addEventListener('yt-page-data-fetched', pageSeq2, bubblePassive)
  7128.   document.addEventListener("yt-navigate-finish", pageSeq3, bubblePassive)
  7129.   //yt-navigate-redirect
  7130.   //yt-page-data-fetched
  7131.   //yt-navigate-error
  7132.   //yt-navigate-start
  7133.   //yt-page-manager-navigate-start
  7134.   //yt-navigate
  7135.   //yt-navigate-cache
  7136.  
  7137.   globalHook('yt-page-data-fetched', generalLog901)
  7138.   //globalHook('yt-rendererstamper-finished',generalLog901)
  7139.   globalHook('yt-page-data-updated', generalLog901)
  7140.   globalHook('yt-player-updated', generalLog901)
  7141.   globalHook('yt-watch-comments-ready', generalLog901)
  7142.   globalHook('yt-page-type-changed', generalLog901)
  7143.   globalHook('data-changed', generalLog901)
  7144.   globalHook('yt-navigate-finish', generalLog901)
  7145.   globalHook('yt-navigate-redirect', generalLog901)
  7146.   globalHook('yt-navigate-error', generalLog901)
  7147.   globalHook('yt-navigate-start', generalLog901)
  7148.   globalHook('yt-page-manager-navigate-start', generalLog901)
  7149.   globalHook('yt-navigate', generalLog901)
  7150.   globalHook('yt-navigate-cache', generalLog901)
  7151.  
  7152.  
  7153.   // ---------------------------------------------------------------------------------------------
  7154.  
  7155.  
  7156.   function manualResizeT(){
  7157.  
  7158.     if (!scriptEnable) return;
  7159.     if (pageType !== 'watch') return;
  7160.     //lastResizeAt = Date.now();
  7161.  
  7162.     if((wls.layoutStatus & LAYOUT_FULLSCREEN) === LAYOUT_FULLSCREEN ){
  7163.  
  7164.     }else if ((wls.layoutStatus & LAYOUT_TWO_COLUMNS) === 0) {
  7165.       // single col
  7166.  
  7167.       setTimeout3(() => {
  7168.         singleColumnScrolling(true)
  7169.       })
  7170.  
  7171.     } else {
  7172.       // two cols
  7173.  
  7174.       updateFloatingSlider();
  7175.  
  7176.     }
  7177.  
  7178.  
  7179.   }
  7180.   //let lastResizeAt = 0;  
  7181.   let resizeCount = 0;
  7182.   window.addEventListener('resize', function (evt) {
  7183.  
  7184.     if (evt.isTrusted === true) { 
  7185.       //console.log(evt)
  7186.       let tcw = ++resizeCount;
  7187.       Promise.resolve(0).then(()=>{
  7188.         if (tcw !== resizeCount) return;
  7189.         setTimeout(() => {
  7190.           // avoid duplicate calling during resizing
  7191.           if (tcw !== resizeCount) return;
  7192.           
  7193.           resizeCount = 0;
  7194.           manualResizeT();
  7195.           dispatchCommentRowResize();
  7196.         }, 160);
  7197.       });
  7198.     }
  7199.  
  7200.   }, bubblePassive)
  7201.  
  7202.  
  7203.   document.addEventListener("tyt-chat-popup",(evt)=>{
  7204.  
  7205.     let detail = (evt || 0).detail
  7206.     if (!detail) return
  7207.     const { popuped } = detail
  7208.     if (typeof popuped !== 'boolean') return;
  7209.  
  7210.     let ytdFlexyElm = es.ytdFlexy
  7211.     if (!ytdFlexyElm) return
  7212.  
  7213.     ytdFlexyElm.classList.toggle('tyt-chat-popup', popuped)
  7214.     if (popuped === true) {
  7215.       enableLivePopupCheck = true;
  7216.       ytBtnSetTheater()
  7217.     } else {
  7218.       enableLivePopupCheck = false;
  7219.       ytBtnCancelTheater()
  7220.     }
  7221.  
  7222.   })
  7223.  
  7224.   document.addEventListener("tabview-plugin-loaded",()=>{
  7225.  
  7226.     scriptletDeferred.resolve();
  7227.  
  7228.     if(MINIVIEW_BROWSER_ENABLE){
  7229.       document.dispatchEvent(new CustomEvent("tabview-miniview-browser-enable"));
  7230.     }
  7231.  
  7232.   }, false)
  7233.  
  7234.  
  7235.   document.documentElement.setAttribute('plugin-tabview-youtube', `${scriptVersionForExternal}`)
  7236.   if(document.documentElement.getAttribute('tabview-unwrapjs')){
  7237.     document.dispatchEvent(new CustomEvent("tabview-plugin-loaded"))
  7238.   }
  7239.  
  7240.  
  7241.   // function nestedObjectFlatten(prefix, obj) {
  7242.   //   let ret = {};
  7243.   //   let _prefix = prefix ? `${prefix}.` : '';
  7244.   //   let isObject = (obj && typeof obj == 'object' && obj.constructor.name == 'Object');
  7245.   //   let isArray = (obj && typeof obj == 'object' && obj.constructor.name == 'Array');
  7246.   //   const f = (k, v) => {
  7247.   //     let isObject = (v && typeof v == 'object' && v.constructor.name == 'Object');
  7248.   //     let isArray = (v && typeof v == 'object' && v.constructor.name == 'Array');
  7249.   //     if (isObject || isArray) {
  7250.   //       let r = nestedObjectFlatten(k, v)
  7251.   //       for (const w in r) {
  7252.   //         ret[`${_prefix}${w}`] = r[w];
  7253.   //       }
  7254.   //     } else {
  7255.   //       ret[`${_prefix}${k}`] = v;
  7256.   //     }
  7257.   //   }
  7258.   //   if (isObject) {
  7259.   //     for (const k in obj) {
  7260.   //       let v = obj[k];
  7261.   //       f(k, v);
  7262.   //     }
  7263.   //   } else if (isArray) {
  7264.   //     let idx = 0;
  7265.   //     for (const v of obj) {
  7266.   //       let k = `[${idx}]`;
  7267.   //       f(k, v);
  7268.   //       idx++;
  7269.   //     }
  7270.   //   }
  7271.   //   return ret;
  7272.   // }
  7273.  
  7274.   /*
  7275.  
  7276.   for(const p of document.querySelectorAll('ytd-watch-flexy *')){ let m = p.data; if(!m)continue; console.log(m)}
  7277.  
  7278.   function objec
  7279.  
  7280.   */
  7281.  
  7282.  
  7283.   //Object.keys($0).filter(key=>!(key in $0.constructor.prototype))
  7284.  
  7285.   //Object.getOwnPropertyNames(window).filter(k=>k.startsWith('HTML'))
  7286.   //Object.getOwnPropertyNames(window).filter(k=>k.startsWith('HTML')).filter(k=>$0 instanceof window[k])
  7287.  
  7288.  
  7289.   /* --------------------------- browser's bug in -webkit-box ----------------------------------------- */
  7290.  
  7291.   /*
  7292.    fix bug for comment section - version 1.8.7 
  7293.   This issue is the bug in browser's rendering
  7294.    I guess, this is due to the lines clamp with display:-webkit-box 
  7295.    use stupid coding to let it re-render when its content become visible
  7296.    
  7297.   /*
  7298.  
  7299.   ytd-expander[should-use-number-of-lines][collapsed] > #content.ytd-expander {
  7300.       color: var(--yt-spec-text-primary);
  7301.       display: -webkit-box;
  7302.       overflow: hidden;
  7303.       max-height: none;
  7304.       -webkit-box-orient: vertical;
  7305.       -webkit-line-clamp: var(--ytd-expander-max-lines, 4);
  7306.   }
  7307.  
  7308.   // v1.8.36 imposed a effective solution for fixing this bug
  7309.  
  7310.   */
  7311.  
  7312.   /* --------------------------- browser's bug in -webkit-box ----------------------------------------- */
  7313.  
  7314.  
  7315.   /**
  7316.    * 
  7317.  
  7318.  
  7319. f.initChildrenObserver=function(){var a=this;this.observer=new MutationObserver(function(){return a.childrenChanged()});
  7320. this.observer.observe(this.$.content,{subtree:!0,childList:!0,attributes:!0});this.childrenChanged()};
  7321. f.childrenChanged=function(){var a=this;this.alwaysToggleable?this.canToggle=this.alwaysToggleable:this.canToggleJobId||(this.canToggleJobId=window.requestAnimationFrame(function(){$h(function(){a.canToggleJobId=0;a.calculateCanCollapse()})}))};
  7322.  
  7323.  
  7324. f.onIronResize=function(){this.recomputeOnResize&&this.childrenChanged()};
  7325.  
  7326.  
  7327. onButtonClick_:function(){this.fire("yt-close-upsell-dialog")},
  7328. computeHasHeader_:function(a){return!!a.headerBackgroundImage}});var geb;var heb;var ieb;var jeb;var xI=function(){var a=L.apply(this,arguments)||this;a.alignAuto=!1;a.collapsed=!0;a.isToggled=!1;a.alwaysCollapsed=!1;a.canToggle=!0;a.collapsedHeight=80;a.disableToggle=!1;a.alwaysToggleable=!1;a.reversed=!1;a.shouldUseNumberOfLines=!1;a.recomputeOnResize=!1;a.canToggleJobId=0;return a};
  7329. n(xI,L);f=xI.prototype;f.alwaysToggleableChanged=function(){this.alwaysToggleable&&(this.canToggle=!0)};
  7330.  
  7331.  
  7332. f.calculateCanCollapse=function(){this.canToggle=this.shouldUseNumberOfLines?this.alwaysToggleable||this.$.content.offsetHeight<this.$.content.scrollHeight:this.alwaysToggleable||this.$.content.scrollHeight>this.collapsedHeight};
  7333. f.detachObserver=function(){this.observer&&this.observer.disconnect()};
  7334.  
  7335.    * 
  7336.    * 
  7337.    * 
  7338.    */
  7339.  
  7340.  
  7341. })();
  7342. // console.timeEnd("Tabview Youtube Init Script")
  7343.  
  7344.  
  7345.  
  7346.  
  7347.  
  7348.  
  7349.  
  7350.  
  7351.  
  7352.  
  7353.  
  7354.  
  7355.  
  7356.  
  7357.  
  7358.  
  7359.  
  7360.  
  7361.  
  7362.  
  7363.  
  7364.  
  7365.  
  7366.  
  7367.  
  7368.  
  7369.  
  7370.  
  7371.  
  7372.  
  7373.  
  7374.  
  7375.  
  7376.  
  7377.  
  7378.  
  7379.  
  7380.     // https://github.com/cyfung1031/Tabview-Youtube/raw/main/js/content.js
  7381.  
  7382. }
  7383.  
  7384.  
  7385. ;!(function $$() {
  7386.     'use strict';
  7387.  
  7388.     if(document.documentElement==null) return window.requestAnimationFrame($$)
  7389.  
  7390.     const cssTxt = GM_getResourceText("contentCSS");
  7391.  
  7392.     function addStyle (styleText) {
  7393.       const styleNode = document.createElement('style');
  7394.       styleNode.type = 'text/css';
  7395.       styleNode.textContent = styleText;
  7396.       document.documentElement.appendChild(styleNode);
  7397.       return styleNode;
  7398.     }
  7399.  
  7400.     addStyle (cssTxt);
  7401.  
  7402.     main();
  7403.  
  7404.  
  7405.     // Your code here...
  7406. })();