☰

Tabview Youtube

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

当前为 2022-12-04 提交的版本，查看 最新版本。

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