☰

Tabview Youtube

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

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

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