☰

Tabview Youtube

Make comments and lists into tabs

当前为 2021-09-03 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Tabview Youtube
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.8.7
  5. // @description  Make comments and lists into tabs
  6. // @author       CY Fung
  7. // @match       https://www.youtube.com/*
  8. // @resource     contentCSS https://raw.githubusercontent.com/cyfung1031/Tabview-Youtube/ccaf34030b4053cbd1f41cfa09582f7ac7385dd5/css/style_content.css
  9. // @icon         https://github.com/cyfung1031/Tabview-Youtube/raw/main/images/icon128p.png
  10. // @require      https://cdnjs.cloudflare.com/ajax/libs/cash/8.1.0/cash.min.js
  11. // @grant        GM_getResourceText
  12. // @run-at       document-start
  13. // @license      MIT https://github.com/cyfung1031/Tabview-Youtube/blob/main/LICENSE
  14. // @noframes
  15. // ==/UserScript==
  16. function main($){
  17.     // MIT License
  18.     // https://github.com/cyfung1031/Tabview-Youtube/raw/main/js/content.js
  19.  
  20.  
  21.  
  22.  
  23.  
  24.  
  25.  
  26.  
  27.  
  28.  
  29.  
  30.  
  31.  
  32.  
  33.  
  34.  
  35.  
  36.  
  37.  
  38.  
  39.  
  40.  
  41.  
  42.  
  43.  
  44.  
  45.  
  46.  
  47. -(function(){
  48.  
  49.     function inIframe () {
  50.         try {
  51.             return window.self !== window.top;
  52.         } catch (e) {
  53.             return true;
  54.         }
  55.     }
  56.  
  57.     if(inIframe())return;
  58.  
  59.     if(!$) return;
  60.  
  61.     /**
  62.      * SVG resources:
  63.      * <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>
  64.      */
  65.  
  66.     const scriptVersionForExternal = '2021/07/03';
  67.  
  68.     const svgComments = `
  69.     <path d="M40.068,13.465L5.93,13.535c-3.27,0-5.93,2.66-5.93,5.93v21.141c0,3.27,2.66,5.929,5.93,5.929H12v10
  70.     c0,0.413,0.254,0.784,0.64,0.933c0.117,0.045,0.239,0.067,0.36,0.067c0.276,0,0.547-0.115,0.74-0.327l9.704-10.675l16.626-0.068
  71.     c3.27,0,5.93-2.66,5.93-5.929V19.395C46,16.125,43.34,13.465,40.068,13.465z M10,23.465h13c0.553,0,1,0.448,1,1s-0.447,1-1,1H10
  72.     c-0.553,0-1-0.448-1-1S9.447,23.465,10,23.465z M36,37.465H10c-0.553,0-1-0.448-1-1s0.447-1,1-1h26c0.553,0,1,0.448,1,1
  73.     S36.553,37.465,36,37.465z M36,31.465H10c-0.553,0-1-0.448-1-1s0.447-1,1-1h26c0.553,0,1,0.448,1,1S36.553,31.465,36,31.465z"/>
  74.     <path d="M54.072,2.535L19.93,2.465c-3.27,0-5.93,2.66-5.93,5.93v3.124l26.064-0.054c4.377,0,7.936,3.557,7.936,7.93v21.07v0.071
  75.     v2.087l3.26,3.586c0.193,0.212,0.464,0.327,0.74,0.327c0.121,0,0.243-0.022,0.36-0.067c0.386-0.149,0.64-0.52,0.64-0.933v-10h1.07
  76.     c3.27,0,5.93-2.66,5.93-5.929V8.465C60,5.195,57.34,2.535,54.072,2.535z"/>
  77.     `.trim();
  78.  
  79.     const svgVideos = `<path d="M298,33c0-13.255-10.745-24-24-24H24C10.745,9,0,19.745,0,33v232c0,13.255,10.745,24,24,24h250c13.255,0,24-10.745,24-24V33
  80.     z M91,39h43v34H91V39z M61,259H30v-34h31V259z M61,73H30V39h31V73z M134,259H91v-34h43V259z M123,176.708v-55.417
  81.     c0-8.25,5.868-11.302,12.77-6.783l40.237,26.272c6.902,4.519,6.958,11.914,0.056,16.434l-40.321,26.277
  82.     C128.84,188.011,123,184.958,123,176.708z M207,259h-43v-34h43V259z M207,73h-43V39h43V73z M268,259h-31v-34h31V259z M268,73h-31V39
  83.     h31V73z"/>`.trim();
  84.  
  85.     const svgInfo = `<path d="M11.812,0C5.289,0,0,5.289,0,11.812s5.289,11.813,11.812,11.813s11.813-5.29,11.813-11.813
  86.     S18.335,0,11.812,0z M14.271,18.307c-0.608,0.24-1.092,0.422-1.455,0.548c-0.362,0.126-0.783,0.189-1.262,0.189
  87.     c-0.736,0-1.309-0.18-1.717-0.539s-0.611-0.814-0.611-1.367c0-0.215,0.015-0.435,0.045-0.659c0.031-0.224,0.08-0.476,0.147-0.759
  88.     l0.761-2.688c0.067-0.258,0.125-0.503,0.171-0.731c0.046-0.23,0.068-0.441,0.068-0.633c0-0.342-0.071-0.582-0.212-0.717
  89.     c-0.143-0.135-0.412-0.201-0.813-0.201c-0.196,0-0.398,0.029-0.605,0.09c-0.205,0.063-0.383,0.12-0.529,0.176l0.201-0.828
  90.     c0.498-0.203,0.975-0.377,1.43-0.521c0.455-0.146,0.885-0.218,1.29-0.218c0.731,0,1.295,0.178,1.692,0.53
  91.     c0.395,0.353,0.594,0.812,0.594,1.376c0,0.117-0.014,0.323-0.041,0.617c-0.027,0.295-0.078,0.564-0.152,0.811l-0.757,2.68
  92.     c-0.062,0.215-0.117,0.461-0.167,0.736c-0.049,0.275-0.073,0.485-0.073,0.626c0,0.356,0.079,0.599,0.239,0.728
  93.     c0.158,0.129,0.435,0.194,0.827,0.194c0.185,0,0.392-0.033,0.626-0.097c0.232-0.064,0.4-0.121,0.506-0.17L14.271,18.307z
  94.     M14.137,7.429c-0.353,0.328-0.778,0.492-1.275,0.492c-0.496,0-0.924-0.164-1.28-0.492c-0.354-0.328-0.533-0.727-0.533-1.193
  95.     c0-0.465,0.18-0.865,0.533-1.196c0.356-0.332,0.784-0.497,1.28-0.497c0.497,0,0.923,0.165,1.275,0.497
  96.     c0.353,0.331,0.53,0.731,0.53,1.196C14.667,6.703,14.49,7.101,14.137,7.429z"/>`.trim();
  97.  
  98.     const svgPlayList = `
  99.     <rect x="0" y="64" width="256" height="42.667"/>
  100.     <rect x="0" y="149.333" width="256" height="42.667"/>
  101.     <rect x="0" y="234.667" width="170.667" height="42.667"/>
  102.     <polygon points="341.333,234.667 341.333,149.333 298.667,149.333 298.667,234.667 213.333,234.667 213.333,277.333 
  103.     298.667,277.333 298.667,362.667 341.333,362.667 341.333,277.333 426.667,277.333 426.667,234.667"/>
  104.     `.trim();
  105.  
  106.     // --- Youtube Video Testing : 
  107.     // Square Video: https://www.youtube.com/watch?v=L0RXVnRbFg8 
  108.     // Square Video: https://www.youtube.com/watch?v=bK_rKhMIotU
  109.     // ---
  110.  
  111.  
  112.     const LAYOUT_TWO_COLUMNS=1;
  113.     const LAYOUT_THEATER=2;
  114.     const LAYOUT_FULLSCREEN=4;
  115.     const LAYOUT_CHATROOM=8;
  116.     const LAYOUT_CHATROOM_COLLASPED=16;
  117.     const LAYOUT_TAB_EXPANDED = 32;
  118.     const LAYOUT_ENGAGEMENT_PANEL_EXPAND = 64;
  119.  
  120.     const mtoInterval1=40;
  121.     const mtoInterval2=150;
  122.  
  123.     let lastVideoURL = null;
  124.  
  125.     
  126.     const WeakRef = window.WeakRef;
  127.     const mWeakRef=WeakRef?(o=>o?new WeakRef(o):null):(o=>o||null);
  128.     const kRef = (wr=>(wr&&wr.deref)?wr.deref():wr);
  129.  
  130.     let cmItem = null;
  131.  
  132.     
  133.     function tracer(key, cmp){
  134.         if(cmp>0) return tracer[key]===cmp;
  135.         return (tracer[key]=Date.now());
  136.     }
  137.  
  138.     function racer(key, f){
  139.         let now = Date.now();
  140.         const kTime = `${key}$$1`
  141.         let t=racer[kTime]||0;
  142.  
  143.         if(now<t){
  144.             const kCount = `${key}$$2`;
  145.             racer[kCount]=(racer[kCount]||0)+1;
  146.             if(racer[kCount]===1){
  147.                 let g = f;
  148.                 requestAnimationFrame(()=>{
  149.                     racer[kCount]=0;
  150.                     g();
  151.                     g=null;
  152.                 })
  153.             }
  154.         }else{
  155.             racer[kTime]=now+16;
  156.             f();
  157.         }
  158.     }
  159.  
  160.     class ScriptEF {
  161.         constructor() {
  162.             this._id = scriptEC;
  163.         }
  164.         isValid() {
  165.             return this._id === scriptEC;
  166.         }
  167.     }
  168.     
  169.     class Timeout {
  170.     
  171.         set(f, d, repeatCount) {
  172.             if (this.cid > 0) return;
  173.             let sEF = new ScriptEF();
  174.             if (repeatCount > 0) {
  175.     
  176.                 let rc = repeatCount;
  177.                 const g = () => {
  178.                     this.cid = 0;
  179.                     if (!sEF.isValid()) return;
  180.                     let res = f();
  181.                     if (--rc <= 0) return;
  182.                     if (res === true) this.cid = setTimeout(g, d);
  183.                 }
  184.                 g();
  185.  
  186.             } else {
  187.     
  188.                 const g = () => {
  189.                     this.cid = 0;
  190.                     if (!sEF.isValid()) return;
  191.                     if (f() === true) this.cid = setTimeout(g, d);
  192.                 }
  193.                 this.cid = setTimeout(g, d);
  194.             }
  195.         }
  196.     
  197.         clear() {
  198.             if (this.cid > 0) clearTimeout(this.cid);
  199.         }
  200.     
  201.         isEmpty() {
  202.             return !this.cid
  203.         }
  204.     
  205.     
  206.     }
  207.     
  208.     class Mutex{
  209.         
  210.         constructor(){
  211.             this.p=Promise.resolve()
  212.         }
  213.         
  214.         lockWith(f){
  215.             
  216.             this.p=this.p.then(()=>{
  217.                 return new Promise(f)
  218.             }).catch(console.warn)
  219.         }
  220.  
  221.     }
  222.  
  223.  
  224.  
  225.     function prettyElm(elm) {
  226.         if (!elm || !elm.nodeName) return null;
  227.         const eId = elm.id || null;
  228.         const eClsName = elm.className || null;
  229.         return [elm.nodeName.toLowerCase(), typeof eId == 'string' ? "#" + eId : '', typeof eClsName == 'string' ? '.' + eClsName.replace(/\s+/g, '.') : ''].join('').trim();
  230.     }
  231.     function extractTextContent(elm){
  232.         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,'')
  233.     }
  234.  
  235.     function addScript(scriptText) {
  236.         const scriptNode = document.createElement('script');
  237.         scriptNode.type = 'text/javascript';
  238.         scriptNode.textContent = scriptText;
  239.         document.documentElement.appendChild(scriptNode);
  240.         return scriptNode;
  241.     }
  242.     function addStyle(styleText, container) {
  243.         const styleNode = document.createElement('style');
  244.         //styleNode.type = 'text/css';
  245.         styleNode.textContent = styleText;
  246.         (container||document.documentElement).appendChild(styleNode);
  247.         return styleNode;
  248.     }
  249.  
  250.  
  251.  
  252.  
  253.  
  254.  
  255.     function isDOMVisible( elem ){
  256.         // jQuery version : https://github.com/jquery/jquery/blob/a684e6ba836f7c553968d7d026ed7941e1a612d8/src/css/hiddenVisibleSelectors.js
  257.         return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
  258.     }
  259.  
  260.     function isNonEmptyString(s){
  261.         return typeof s=='string'&&s.length>0;
  262.     }
  263.  
  264.  
  265.     function nativeFunc(dom, property, args){
  266.         dom.dispatchEvent(new CustomEvent("userscript-call-dom-func", {detail: {property, args}}))
  267.     }
  268.     
  269.     function akAttr(cssElm, attrName, isNegative, flag){
  270.         
  271.         let u = parseInt(cssElm.getAttribute(attrName)||0)||0;
  272.         let ak = Math.abs(u);
  273.         
  274.         if(ak>100 && isNegative && u<0){
  275.  
  276.         }else if(ak>100 && !isNegative && u>0){
  277.  
  278.         }else{
  279.             if(ak<=100) {
  280.                 ak=101;
  281.              } else {
  282.                 ak++;
  283.                 if(ak>=800) ak=101;
  284.             }
  285.              // 101, 102, ... 799, 101 
  286.         }
  287.  
  288.         let s = ''+(isNegative?-ak:ak);
  289.         flag = flag || '';
  290.  
  291.         
  292.         cssElm.setAttribute(attrName, s+flag)
  293.     }
  294.  
  295.  
  296.  
  297.     let timeout_resize_for_layout_change=new Timeout();
  298.  
  299.  
  300.  
  301.     function layoutStatusChanged(old_layoutStatus, new_layoutStatus) {
  302.  
  303.  
  304.         if(old_layoutStatus === new_layoutStatus) return;
  305.  
  306.         const cssElm = kRef(ytdFlexy);
  307.     
  308.         if (!cssElm) return;
  309.     
  310.  
  311.         const new_isExpandedChat = !(new_layoutStatus & LAYOUT_CHATROOM_COLLASPED) && (new_layoutStatus & LAYOUT_CHATROOM)
  312.         const new_isCollaspedChat = (new_layoutStatus & LAYOUT_CHATROOM_COLLASPED) && (new_layoutStatus & LAYOUT_CHATROOM)
  313.     
  314.         const new_isTwoColumns = new_layoutStatus & LAYOUT_TWO_COLUMNS;
  315.         const new_isTheater = new_layoutStatus & LAYOUT_THEATER;
  316.         const new_isTabExpanded = new_layoutStatus & LAYOUT_TAB_EXPANDED;
  317.         const new_isFullScreen = new_layoutStatus & LAYOUT_FULLSCREEN;
  318.         const new_isExpandEPanel = new_layoutStatus & LAYOUT_ENGAGEMENT_PANEL_EXPAND;
  319.  
  320.         
  321.         function showTabOrChat() {
  322.  
  323.             layoutStatusMutex.lockWith(unlock => {
  324.  
  325.                 if (lastShowTab == '#chatroom') {
  326.  
  327.                     if (new_isTabExpanded) switchTabActivity(null)
  328.                     if (!new_isExpandedChat) ytBtnExpandChat();
  329.  
  330.                 } else if(lastShowTab && lastShowTab.indexOf('#engagement-panel-')==0){
  331.  
  332.                     if (new_isTabExpanded) switchTabActivity(null)
  333.                     if (!new_isExpandEPanel) ytBtnOpenEngagementPanel(lastShowTab);
  334.                     
  335.                 }else {
  336.  
  337.                     if (new_isExpandedChat) ytBtnCollapseChat()
  338.                     if (!new_isTabExpanded) setToActiveTab();
  339.  
  340.                 }
  341.  
  342.                 setTimeout(unlock, 40);
  343.  
  344.             })
  345.         }
  346.  
  347.         function hideTabAndChat() {
  348.  
  349.             layoutStatusMutex.lockWith(unlock => {
  350.  
  351.                 if (new_isTabExpanded) switchTabActivity(null)
  352.                 if (new_isExpandedChat) ytBtnCollapseChat()
  353.                 if (new_isExpandEPanel) ytBtnCloseEngagementPanels();
  354.  
  355.  
  356.                 setTimeout(unlock, 40);
  357.  
  358.             })
  359.  
  360.         }
  361.  
  362.  
  363.         if(new_isExpandedChat || new_isTabExpanded || new_isExpandEPanel){
  364.             if(statusCollasped !== 1) statusCollasped = 1;
  365.         }else{
  366.             if(statusCollasped === 1) statusCollasped = 2;
  367.         }
  368.  
  369.         let changes = 0;
  370.  
  371.         if(old_layoutStatus !== null )  changes = old_layoutStatus ^ new_layoutStatus;
  372.  
  373.         let chat_collasped_changed = !!(changes & LAYOUT_CHATROOM_COLLASPED)
  374.         let tab_expanded_changed = !!(changes & LAYOUT_TAB_EXPANDED)
  375.         let theater_mode_changed = !!(changes & LAYOUT_THEATER)
  376.         let column_mode_changed = !!(changes & LAYOUT_TWO_COLUMNS)
  377.         let fullscreen_mode_changed = !!(changes & LAYOUT_FULLSCREEN)
  378.         let epanel_expanded_changed = !!(changes & LAYOUT_ENGAGEMENT_PANEL_EXPAND)
  379.     
  380.         let tab_change = (tab_expanded_changed?1:0)|(chat_collasped_changed?2:0)|(epanel_expanded_changed?4:0);
  381.         
  382.         let isChatOrTabExpandTriggering = tab_change==0?false:(
  383.             (tab_expanded_changed && new_isTabExpanded) ||
  384.             (chat_collasped_changed && new_isExpandedChat) ||
  385.             (epanel_expanded_changed && new_isExpandEPanel)
  386.             );
  387.        
  388.         let isChatOrTabCollaspeTriggering = tab_change==0?false:(
  389.             (tab_expanded_changed && !new_isTabExpanded) ||
  390.             (chat_collasped_changed && new_isCollaspedChat) ||
  391.             (epanel_expanded_changed && !new_isExpandEPanel)
  392.             );
  393.            
  394.     
  395.  
  396.         let moreThanOneShown = (new_isTabExpanded + new_isExpandedChat + new_isExpandEPanel)>1
  397.  
  398.         let requestVideoResize=false;
  399.  
  400.         if(fullscreen_mode_changed || new_isFullScreen){
  401.  
  402.         }else if(tab_change==0 && column_mode_changed && new_isTwoColumns && !new_isTheater && statusCollasped === 1 && moreThanOneShown){
  403.  
  404.             showTabOrChat();
  405.             requestVideoResize=true;
  406.  
  407.         }else if (tab_change==2 && new_isExpandedChat && new_isTwoColumns && !new_isTheater && statusCollasped === 1 && new_isTabExpanded && !column_mode_changed) {
  408.     
  409.             switchTabActivity(null);
  410.             requestVideoResize=true;
  411.     
  412.         } else if ( isChatOrTabExpandTriggering && new_isTwoColumns && new_isTheater && statusCollasped === 1 && !theater_mode_changed && !column_mode_changed ) {
  413.     
  414.             ytBtnCancelTheater();
  415.             requestVideoResize=true;
  416.         
  417.         } else if (new_isTwoColumns && new_isTheater && statusCollasped === 1) {
  418.     
  419.             hideTabAndChat();
  420.             requestVideoResize=true;
  421.     
  422.         } else if (isChatOrTabCollaspeTriggering && new_isTwoColumns && !new_isTheater && statusCollasped === 2 && !column_mode_changed ) {
  423.     
  424.             ytBtnSetTheater();
  425.             requestVideoResize=true;
  426.         
  427.         } else if(tab_change==0 && (column_mode_changed || theater_mode_changed) && new_isTwoColumns && !new_isTheater && statusCollasped !==1){
  428.             
  429.             showTabOrChat();
  430.             requestVideoResize=true;
  431.     
  432.         } else if(!new_isFullScreen && new_isTwoColumns && !new_isTheater && (new_isCollaspedChat || !new_isExpandedChat) && !new_isTabExpanded){
  433.             // bug fix for restoring from mini player
  434.  
  435.             layoutStatusMutex.lockWith(unlock => {
  436.  
  437.                 if (new_isExpandedChat) ytBtnCollapseChat()
  438.                 setToActiveTab();
  439.  
  440.                 setTimeout(unlock, 40);
  441.  
  442.             })
  443.  
  444.             requestVideoResize=true;
  445.  
  446.         } else if(tab_expanded_changed){
  447.  
  448.             requestVideoResize=true;
  449.  
  450.         }
  451.  
  452.  
  453.         if(column_mode_changed && !chat_collasped_changed && new_isExpandedChat){
  454.  
  455.             runAfterExpandChat();
  456.  
  457.         }
  458.  
  459.  
  460.  
  461.         if(requestVideoResize){
  462.  
  463.             timeout_resize_for_layout_change.clear();
  464.             timeout_resize_for_layout_change.set(() => {
  465.                 window.dispatchEvent(new Event('resize'))
  466.              } , 92)
  467.             
  468.         }else if (timeout_resize_for_layout_change.isEmpty() && (Date.now()) - lastResizeAt > 600){
  469.             timeout_resize_for_layout_change.set(() => {
  470.                 if((Date.now()) - lastResizeAt > 600) window.dispatchEvent(new Event('resize'));
  471.             }, 62)
  472.         }
  473.  
  474.        
  475.     
  476.     
  477.     
  478.     }
  479.  
  480.  
  481.     const $ws={
  482.         _layoutStatus:null,
  483.         layoutStatus_pending:false
  484.     }
  485.  
  486.     let wls=new class {
  487.         get layoutStatus(){
  488.             return this._layoutStatus;
  489.         }
  490.         set layoutStatus(nv){
  491.  
  492.             if(nv===null){
  493.                 this._layoutStatus=null;
  494.                 statusCollasped=0;               
  495.                 return;
  496.             }
  497.             if(nv === this._layoutStatus) return;
  498.  
  499.             if(!this.layoutStatus_pending) {
  500.                 this.layoutStatus_pending=true;
  501.                 const old_layoutStatus=this._layoutStatus;
  502.                 
  503.                 layoutStatusMutex.lockWith(unlock=>{
  504.  
  505.                     this.layoutStatus_pending=false;
  506.                     const new_layoutStatus = this._layoutStatus;
  507.                     layoutStatusChanged(old_layoutStatus, new_layoutStatus);
  508.  
  509.                     setTimeout(unlock,40)
  510.  
  511.  
  512.                 })
  513.             }
  514.  
  515.             this._layoutStatus=nv;
  516.         }
  517.     };
  518.  
  519.     
  520.  
  521.  
  522.  
  523.  
  524.     const svgElm = (w, h, vw, vh, p) => `<svg width="${w}" height="${h}" viewBox="0 0 ${vw} ${vh}" preserveAspectRatio="xMidYMid meet">${p}</svg>`
  525.  
  526.     let settings = {
  527.         defaultTab: "#tab-videos"
  528.     };
  529.  
  530.  
  531.     let mtoInterval = mtoInterval1;
  532.  
  533.     function isVideoPlaying(video) {
  534.         return video.currentTime > 0 && !video.paused && !video.ended && video.readyState > video.HAVE_CURRENT_DATA;
  535.     }
  536.  
  537.     function wAttr(elm, attr, kv){
  538.         if(!elm || kv===null) {}
  539.         else if(kv===true){ elm.setAttribute(attr,'') }
  540.         else if(kv===false){ elm.removeAttribute(attr) }
  541.         else if (typeof kv=='string'){ elm.setAttribute(attr, kv)  }
  542.     }
  543.  
  544.     function hideTabBtn(tabBtn){
  545.         var isActiveBefore = tabBtn.classList.contains('active');
  546.         tabBtn.classList.add("tab-btn-hidden");
  547.         if (isActiveBefore) {
  548.             setToActiveTab();
  549.         }
  550.     }
  551.  
  552.     function hasAttribute(obj, key){
  553.         return obj && obj.hasAttribute(key);
  554.     }
  555.  
  556.     function isTheater(){
  557.         const cssElm=kRef(ytdFlexy);
  558.         return (cssElm && cssElm.hasAttribute('theater'))
  559.     }
  560.  
  561.     function isFullScreen(){
  562.         const cssElm=kRef(ytdFlexy);
  563.         return (cssElm && cssElm.hasAttribute('fullscreen'))
  564.     }
  565.  
  566.     function isChatExpand(){
  567.         const cssElm=kRef(ytdFlexy);
  568.         return cssElm && cssElm.hasAttribute('userscript-chatblock') && !cssElm.hasAttribute('userscript-chat-collapsed')
  569.     }
  570.     function isWideScreenWithTwoColumns(){
  571.         const cssElm=kRef(ytdFlexy);
  572.         return (cssElm && cssElm.hasAttribute('is-two-columns_'))
  573.     }
  574.  
  575.     function isAnyActiveTab(){
  576.         return $('#right-tabs .tab-btn.active').length>0
  577.     }
  578.  
  579.     function isEngagementPanelExpanded(){
  580.         const cssElm=kRef(ytdFlexy);
  581.         return (cssElm && +cssElm.getAttribute('userscript-engagement-panel')>0)
  582.     }
  583.  
  584.     function engagement_panels_(){
  585.  
  586.         let res = [];
  587.  
  588.         let v = 0, k =1, count=0;
  589.         for(const ePanel of document.querySelectorAll('ytd-watch-flexy ytd-engagement-panel-section-list-renderer[tabview-attr-checked]')){
  590.  
  591.             let visibility = ePanel.getAttribute('visibility') //ENGAGEMENT_PANEL_VISIBILITY_EXPANDED //ENGAGEMENT_PANEL_VISIBILITY_HIDDEN
  592.  
  593.             switch(visibility){
  594.                 case 'ENGAGEMENT_PANEL_VISIBILITY_EXPANDED': v|=k; count++; res.push({ePanel, k, visible: true}); break;
  595.                 case 'ENGAGEMENT_PANEL_VISIBILITY_HIDDEN': res.push({ePanel, k, visible: false}); break;
  596.                 default: res.push({ePanel, k, visible: false});
  597.             }
  598.  
  599.             k=k<<1;
  600.  
  601.         }
  602.         return {list:res, value: v, count: count};
  603.     }
  604.     
  605.  
  606.     function ytBtnOpenEngagementPanel(panel_id){
  607.  
  608.         if(typeof panel_id =='string') {
  609.             panel_id = panel_id.replace('#engagement-panel-','');
  610.             panel_id = parseInt(panel_id);
  611.         }
  612.         if(panel_id>=0){}else return false;
  613.  
  614.         let panels = engagement_panels_();
  615.  
  616.         for(const {ePanel, k, visible} of panels.list){
  617.             if((panel_id & k) === k) {
  618.                 if(!visible) ePanel.setAttribute('visibility',"ENGAGEMENT_PANEL_VISIBILITY_EXPANDED");
  619.             }else{
  620.                 if(visible) ytBtnCloseEngagementPanel(ePanel);
  621.             }
  622.         }
  623.  
  624.     }
  625.  
  626.     function ytBtnCloseEngagementPanel(s){
  627.         //ePanel.setAttribute('visibility',"ENGAGEMENT_PANEL_VISIBILITY_HIDDEN");
  628.         let btn = s.querySelector('ytd-watch-flexy ytd-engagement-panel-title-header-renderer #header>#visibility-button>ytd-button-renderer');
  629.         if(btn){
  630.             btn.click();
  631.         }
  632.     }
  633.     function ytBtnCloseEngagementPanels(){
  634.         if(isEngagementPanelExpanded()){
  635.             for(const s of document.querySelectorAll('ytd-watch-flexy ytd-engagement-panel-section-list-renderer[tabview-attr-checked]')){
  636.                 if(s.getAttribute('visibility')=="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED") ytBtnCloseEngagementPanel(s);
  637.             }
  638.         }
  639.     }
  640.  
  641.     function ytBtnSetTheater(){
  642.         if(!isTheater()){
  643.             const sizeBtn =  document.querySelector('ytd-watch-flexy #ytd-player button.ytp-size-button')
  644.             if(sizeBtn) sizeBtn.click();
  645.         }
  646.     }
  647.     function ytBtnCancelTheater(){
  648.         if(isTheater()){
  649.             const sizeBtn =  document.querySelector('ytd-watch-flexy #ytd-player button.ytp-size-button')
  650.             if(sizeBtn) sizeBtn.click();
  651.         }
  652.     }
  653.  
  654.     function ytBtnExpandChat(){
  655.         let button = document.querySelector('ytd-live-chat-frame#chat[collapsed]>.ytd-live-chat-frame#show-hide-button')
  656.         if (button) button.querySelector('ytd-toggle-button-renderer').click();
  657.     }
  658.     function ytBtnCollapseChat(){
  659.         let button = document.querySelector('ytd-live-chat-frame#chat:not([collapsed])>.ytd-live-chat-frame#show-hide-button')
  660.         if (button) button.querySelector('ytd-toggle-button-renderer').click();
  661.     }
  662.  
  663.  
  664.     function hackImgShadow(imgShadow){
  665.         // add to #columns and add back after loaded
  666.         let img = imgShadow.querySelector('img')
  667.         if(!img)return;
  668.  
  669.         let p=imgShadow.parentNode
  670.         let z=$(imgShadow).clone()[0]; //to occupy the space
  671.         p.replaceChild(z, imgShadow)
  672.         $(imgShadow).prependTo('#columns'); // refer to css hack
  673.  
  674.         function onload(evt){
  675.             if(evt) this.removeEventListener('load',onload,false)
  676.             p.replaceChild(imgShadow, z)
  677.             p=null;
  678.             z=null;
  679.             imgShadow=null;
  680.         }
  681.  
  682.         if (img.complete) onload();
  683.         else img.addEventListener('load',onload,false)
  684.     }
  685.  
  686.  
  687.     const Q={}
  688.     const FOnce={}
  689.  
  690.     const $callOnceAsync=async function(key){
  691.         if (FOnce[key] && FOnce[key]() === false) FOnce[key] = null
  692.     }
  693.  
  694.  
  695.     
  696.     function chatFrameContentDocument(){
  697.         // non-null if iframe exist && contentDocument && readyState = complete
  698.  
  699.         let iframe = document.querySelector('ytd-live-chat-frame iframe#chatframe');
  700.         if(!iframe) return null; //iframe must be there
  701.         let cDoc = null;
  702.         try{
  703.             cDoc = iframe.contentDocument;
  704.         }catch(e){}
  705.         if(!cDoc) return null;
  706.         if(cDoc.readyState  != 'complete') return null; //we must wait for its completion
  707.  
  708.         return cDoc;
  709.  
  710.     }
  711.  
  712.     function chatFrameElement(cssSelector){
  713.         let cDoc = chatFrameContentDocument();
  714.         if(!cDoc) return null;
  715.         let elm = null;
  716.         try{
  717.             elm = cDoc.querySelector(cssSelector)
  718.         }catch(e){
  719.             console.log('iframe error', e)
  720.         }
  721.         return elm;
  722.     }
  723.  
  724.  
  725.  
  726.  
  727.  
  728.  
  729.  
  730.  
  731.  
  732.  
  733.  
  734.  
  735.  
  736.  
  737.  
  738.  
  739.  
  740.  
  741.     function fixTabs(){
  742.  
  743.         
  744.         if(!scriptEnable)return;
  745.  
  746.  
  747.         let queryElement=document.querySelector('*:not(#tab-videos)>#related:not([non-placeholder-videos]) > ytd-watch-next-secondary-results-renderer')
  748.  
  749.         let isRelocated = !!queryElement;
  750.  
  751.  
  752.  
  753.         if(isRelocated){
  754.  
  755.             let relocatedRelated = queryElement.parentNode; // NOT NULL
  756.  
  757.             let right_tabs = document.querySelector('#right-tabs');
  758.             let tab_videos = right_tabs.querySelector("#tab-videos");
  759.  
  760.             if(!right_tabs || !tab_videos) return;
  761.  
  762.             for(const s of relocatedRelated.querySelectorAll('#related')){
  763.                 s.setAttribute('non-placeholder-videos','')
  764.             }
  765.  
  766.             let target_container = document.querySelector('ytd-watch-flexy:not([is-two-columns_]) #primary-inner, ytd-watch-flexy[is-two-columns_] #secondary-inner')
  767.  
  768.             if(target_container) target_container.append(right_tabs) // last-child
  769.  
  770.  
  771.             let videos_related = relocatedRelated; // NOT NULL
  772.             $('[placeholder-videos]').removeAttr('placeholder-videos');
  773.             $('[placeholder-for-youtube-play-next-queue]').removeAttr('placeholder-for-youtube-play-next-queue');
  774.  
  775.             tab_videos.appendChild(videos_related);
  776.             let videos_results_renderer = relocatedRelated.querySelector("ytd-watch-next-secondary-results-renderer");
  777.             if(videos_results_renderer) videos_results_renderer.setAttribute('data-dom-changed-by-tabview-youtube',scriptVersionForExternal);
  778.             videos_related.setAttribute('placeholder-for-youtube-play-next-queue','')
  779.             videos_related.setAttribute('placeholder-videos','')
  780.  
  781.             $('[placeholder-videos]').on("scroll", makeBodyScrollByEvt);
  782.  
  783.  
  784.  
  785.  
  786.         }
  787.  
  788.  
  789.         
  790.                     
  791.         let chatroom=null;
  792.         if(chatroom=document.querySelector('*:not([data-positioner="before|#chat"]) + ytd-live-chat-frame#chat, ytd-live-chat-frame#chat:first-child')){
  793.  
  794.             let positioner = document.querySelector('tabview-youtube-positioner[data-positioner="before|#chat"]');
  795.             if(positioner) positioner.remove();
  796.  
  797.  
  798.             if(document.querySelector('.YouTubeLiveFilledUpView')){
  799.                 // no relocation
  800.             }else{
  801.  
  802.                 $(chatroom).insertBefore('#right-tabs')
  803.  
  804.             }
  805.  
  806.             
  807.             $(positioner?positioner:document.createElement('tabview-youtube-positioner')).attr('data-positioner','before|#chat').insertBefore(chatroom)
  808.  
  809.  
  810.         }
  811.  
  812.  
  813.     }
  814.  
  815.     const injectionScript_fixAutoComplete=function(){
  816.  
  817.         // https://cdnjs.cloudflare.com/ajax/libs/JavaScript-autoComplete/1.0.4/auto-complete.min.js
  818.  
  819.         for(const s of document.querySelectorAll('[autocomplete="off"]:not([data-autocomplete-results-id])')){
  820.  
  821.  
  822.             let sc = s.sc;
  823.             if(sc instanceof HTMLElement){
  824.  
  825.                 let id=Date.now();
  826.                 s.setAttribute('data-autocomplete-results-id',id);
  827.                 sc.setAttribute('data-autocomplete-input-id', id);
  828.                 
  829.                 if(window.WeakRef){
  830.                     s._sc=new WeakRef(sc);
  831.                     s.sc=null;
  832.                     delete s.sc;
  833.                     Object.defineProperty(s,'sc',{
  834.                         get: function() { return s._sc.deref()||null; },
  835.                         enumerable: true,
  836.                         configurable: true
  837.                     })
  838.                 }
  839.  
  840.                 if(sc.hasAttribute('autocomplete-disable-updatesc') && typeof s.updateSC =='function'){
  841.  
  842.                     window.removeEventListener('resize', s.updateSC);
  843.                     s.updateSC=function(){};
  844.  
  845.                 }
  846.  
  847.                 sc.dispatchEvent(new CustomEvent('autocomplete-sc-exist'));
  848.  
  849.  
  850.             }
  851.  
  852.         }
  853.  
  854.     };
  855.  
  856.     
  857.     function handlerAutoCompleteExist(){
  858.  
  859.  
  860.         let autoComplete = this;
  861.  
  862.         autoComplete.removeEventListener('autocomplete-sc-exist', handlerAutoCompleteExist, false)
  863.  
  864.         let domId= autoComplete.getAttribute('data-autocomplete-input-id')
  865.         let searchBox = autoComplete.ownerDocument.querySelector(`[data-autocomplete-results-id="${domId}"]`)
  866.  
  867.         if(!domId || !searchBox) return;
  868.  
  869.         let positioner=searchBox.nextSibling;
  870.         if(positioner && positioner.nodeName.toLowerCase()=="autocomplete-positioner"){
  871.         }else if(positioner && positioner.nodeName.toLowerCase()!="autocomplete-positioner"){
  872.             $(positioner=document.createElement("autocomplete-positioner")).insertAfter(searchBox);
  873.         }else{
  874.             $(positioner=document.createElement("autocomplete-positioner")).prependTo(searchBox.parentNode);
  875.         }
  876.         $(autoComplete).prependTo(positioner);
  877.  
  878.         positioner.style.setProperty('--sb-margin-bottom',getComputedStyle(searchBox).marginBottom)
  879.         positioner.style.setProperty('--height',searchBox.offsetHeight + 'px')
  880.  
  881.     }
  882.  
  883.     function mtf_fixAutoCompletePosition(elmAutoComplete){
  884.  
  885.         elmAutoComplete.setAttribute('autocomplete-disable-updatesc','')
  886.         elmAutoComplete.addEventListener('autocomplete-sc-exist',handlerAutoCompleteExist, false)
  887.  
  888.         addScript(`!!(${injectionScript_fixAutoComplete+''})()`);
  889.  
  890.     }
  891.  
  892.     function mtf_AfterFixTabs(){
  893.  
  894.  
  895.         let ytdFlexyElm = kRef(ytdFlexy);
  896.         if(!scriptEnable || !ytdFlexyElm) return;
  897.  
  898.         const rootElement = Q.mutationTarget || ytdFlexyElm;
  899.  
  900.  
  901.  
  902.         const autocomplete=rootElement.querySelector('[placeholder-for-youtube-play-next-queue] input#suggestions-search + autocomplete-positioner > .autocomplete-suggestions[data-autocomplete-input-id]:not([position-fixed-by-tabview-youtube])')
  903.  
  904.         if(autocomplete){
  905.  
  906.             const searchBox = document.querySelector('[placeholder-for-youtube-play-next-queue] input#suggestions-search')
  907.  
  908.  
  909.             if(searchBox){
  910.  
  911.                 
  912.                 autocomplete.parentNode.setAttribute('position-fixed-by-tabview-youtube','');
  913.                 autocomplete.setAttribute('position-fixed-by-tabview-youtube','');
  914.                 autocomplete.setAttribute('userscript-scrollbar-render','')
  915.  
  916.                 if(!searchBox.hasAttribute('is-set-click-to-toggle')){
  917.                     searchBox.setAttribute('is-set-click-to-toggle','')
  918.                     searchBox.addEventListener('click',function(){
  919.  
  920.  
  921.                         setTimeout(()=>{
  922.                             const autocomplete=document.querySelector(`.autocomplete-suggestions[data-autocomplete-input-id="${ this.getAttribute('data-autocomplete-results-id') }"]`)
  923.  
  924.                             if(!autocomplete)return;
  925.  
  926.                             const isNotEmpty = (autocomplete.textContent||'').length>0 && (this.value||'').length>0;
  927.                             
  928.                             if( isNotEmpty ){
  929.  
  930.                                 let elmVisible=isDOMVisible(autocomplete)
  931.  
  932.                                 if(elmVisible) $(autocomplete).hide(); else  $(autocomplete).show();
  933.  
  934.                             }
  935.  
  936.                         },20);
  937.  
  938.                     })
  939.  
  940.                     let timeoutOnce_searchbox_keyup=new Timeout();
  941.                     searchBox.addEventListener('keyup',function(){
  942.  
  943.                         timeoutOnce_searchbox_keyup.set(()=>{
  944.                             
  945.                             const autocomplete=document.querySelector(`.autocomplete-suggestions[data-autocomplete-input-id="${ this.getAttribute('data-autocomplete-results-id') }"]`)
  946.  
  947.                             if(!autocomplete)return;
  948.                             
  949.  
  950.                             const isNotEmpty = (autocomplete.textContent||'').length>0 && (this.value||'').length >0
  951.                             
  952.                             if( isNotEmpty ){
  953.  
  954.                                 let elmVisible=isDOMVisible(autocomplete)
  955.  
  956.                                 if(!elmVisible) $(autocomplete).show();
  957.  
  958.                             }
  959.  
  960.                         },20);
  961.  
  962.                     })
  963.  
  964.                 }
  965.  
  966.  
  967.  
  968.             }
  969.  
  970.         }
  971.  
  972.  
  973.  
  974.  
  975.  
  976.         
  977.         let currentLastVideo=rootElement.querySelector('[placeholder-videos] #items ytd-compact-video-renderer:last-of-type')
  978.         let prevLastVideo=kRef(_cachedLastVideo);
  979.  
  980.         if(prevLastVideo!==currentLastVideo && currentLastVideo){
  981.             _cachedLastVideo=mWeakRef(currentLastVideo);
  982.         }
  983.         
  984.         if(prevLastVideo!==currentLastVideo && currentLastVideo && prevLastVideo ){
  985.  
  986.             let isPrevRemoved= !prevLastVideo.parentNode
  987.  
  988.  
  989.             function getVideoListHash(){
  990.  
  991.                 let res = [...document.querySelectorAll('[placeholder-videos] #items ytd-compact-video-renderer')].map(renderer=>{
  992.                     return renderer.querySelector('a[href*="watch"][href*="v="]').getAttribute('href')
  993.  
  994.                 }).join('|')
  995.                 // /watch?v=XXXXX|/watch?v=XXXXXX|/watch?v=XXXXXX
  996.  
  997.                 // alternative - DOM.data.videoId
  998.                 // let elms = document.querySelectorAll('[placeholder-videos] #items ytd-compact-video-renderer')
  999.                 // let res = [...elms].map(elm=>elm.data.videoId||'').join('|') ;
  1000.      
  1001.                 if(res.indexOf('||')>=0){
  1002.                     res='';
  1003.                 }
  1004.  
  1005.                 return res?res:null;
  1006.             }
  1007.  
  1008.             if(isPrevRemoved){
  1009.  
  1010.                 // this is the replacement of videos instead of addition
  1011.                 
  1012.                 const searchBox=document.querySelector('[placeholder-for-youtube-play-next-queue] input#suggestions-search')
  1013.  
  1014.                 let currentPlayListHash= getVideoListHash() || null;
  1015.  
  1016.                 if(!currentPlayListHash){
  1017.  
  1018.                 }else if(!videoListBeforeSearch && searchBox){
  1019.  
  1020.                     videoListBeforeSearch= currentPlayListHash;
  1021.                     if(videoListBeforeSearch){
  1022.                         //console.log('fromSearch', videoListBeforeSearch)
  1023.  
  1024.                         requestAnimationFrame(function(){
  1025.  
  1026.                             let renderer = document.querySelector('[placeholder-videos] ytd-watch-next-secondary-results-renderer');
  1027.                             if(searchBox && searchBox.parentNode) searchBox.blur();
  1028.  
  1029.                             if(renderer){
  1030.                                 let scrollParent = renderer.parentNode;
  1031.                                 if(scrollParent.scrollHeight>scrollParent.offsetHeight){
  1032.                                     let targetTop = renderer.offsetTop;
  1033.                                     if(searchBox && searchBox.parentNode==scrollParent ) targetTop-=searchBox.offsetHeight
  1034.                                     scrollParent.scrollTop= targetTop - scrollParent.firstChild.offsetTop;
  1035.                                 }
  1036.                             }                        
  1037.             
  1038.                         });
  1039.  
  1040.                     }
  1041.  
  1042.                 }else if(videoListBeforeSearch){
  1043.  
  1044.                     if(currentPlayListHash != videoListBeforeSearch){
  1045.  
  1046.                         videoListBeforeSearch=null;
  1047.                         //console.log('fromSearch', videoListBeforeSearch)
  1048.         
  1049.         
  1050.                     }
  1051.  
  1052.                 } 
  1053.  
  1054.  
  1055.             }
  1056.  
  1057.     
  1058.         }
  1059.  
  1060.  
  1061.  
  1062.  
  1063.     }
  1064.  
  1065.     function base_ChatExist(){
  1066.         
  1067.         let ytdFlexyElm = kRef(ytdFlexy);
  1068.         if(!scriptEnable || !ytdFlexyElm) return null;
  1069.  
  1070.         // no mutation triggering if the changes are inside the iframe 
  1071.  
  1072.         // 1) Detection of #continuations inside iframe
  1073.         // iframe ownerDocument is accessible due to same origin
  1074.         // if the chatroom is collasped, no determination of live chat or replay (as no #continuations and somehow a blank iframe doc)
  1075.  
  1076.         // 2) Detection of meta tag
  1077.         // This is fastest but not reliable. It is somehow a bug that the navigation might not update the meta tag content
  1078.         
  1079.         // 3) Detection of HTMLElement inside video player for live video
  1080.         
  1081.         // (1)+(3) = solution
  1082.  
  1083.         let attr_chatblock = null
  1084.         let attr_chatcollapsed = null;
  1085.         
  1086.         const elmChat = document.querySelector('ytd-live-chat-frame#chat')
  1087.         let elmCont = null;
  1088.         if(elmChat){
  1089.             elmCont=chatFrameElement('yt-live-chat-renderer #continuations')
  1090.  
  1091.             let s=0;
  1092.             if(elmCont){
  1093.                 //not found if it is collasped.
  1094.                 s |= elmCont.querySelector('yt-timed-continuation')?1:0;
  1095.                 s |= elmCont.querySelector('yt-live-chat-replay-continuation, yt-player-seek-continuation')?2:0;
  1096.                 //s |= elmCont.querySelector('yt-live-chat-restricted-participation-renderer')?4:0;
  1097.                 if(s==1) {
  1098.                     //console.log(7005)
  1099.                     attr_chatblock='chat-live';
  1100.                     //disableComments_LiveChat();
  1101.                 }
  1102.                 if(s==2) attr_chatblock='chat-playback';
  1103.                 //if(s==5) attr_chatblock='chat-live-paid';
  1104.  
  1105.                 if(s==1) $("span#tab3-txt-loader").text('');
  1106.  
  1107.             }
  1108.             //keep unknown as original        
  1109.  
  1110.         }else{
  1111.             attr_chatblock=false;
  1112.             attr_chatcollapsed=false;
  1113.  
  1114.         }
  1115.  
  1116.         return {attr_chatblock, attr_chatcollapsed}
  1117.          
  1118.     }
  1119.  
  1120.  
  1121.     function mtf_ChatExist(){
  1122.  
  1123.         let ytdFlexyElm = kRef(ytdFlexy);
  1124.         if(!scriptEnable || !ytdFlexyElm) return;
  1125.  
  1126.         const elmChat = document.querySelector('ytd-live-chat-frame#chat')
  1127.         let elmCont = null;
  1128.         if(elmChat){
  1129.             elmCont=chatFrameElement('yt-live-chat-renderer #continuations')
  1130.         }
  1131.         
  1132.         const chatBlockR = (elmChat?1:0)+(elmCont?2:0)
  1133.         if(Q.mtf_chatBlockQ!==chatBlockR){
  1134.             Q.mtf_chatBlockQ=chatBlockR  
  1135.             let rChatExist = base_ChatExist();
  1136.             if(rChatExist){
  1137.                 let {attr_chatblock, attr_chatcollapsed} = rChatExist;
  1138.                 wAttr(ytdFlexyElm, 'userscript-chatblock', attr_chatblock)
  1139.                 wAttr(ytdFlexyElm, 'userscript-chat-collapsed', attr_chatcollapsed)
  1140.             }
  1141.         }
  1142.     }
  1143.  
  1144.  
  1145.  
  1146.  
  1147.  
  1148.  
  1149.     let lastScrollAt1=0;
  1150.     function makeBodyScrollByEvt(){
  1151.         let ct = Date.now();
  1152.         if(ct - lastScrollAt1 < 6) return; // avoid duplicate calling
  1153.         lastScrollAt1 = ct;
  1154.         window.dispatchEvent(new Event("scroll")); // dispatch Scroll Event to Window for content display
  1155.     }
  1156.  
  1157.     let lastScrollAt2 = 0;
  1158.     function makeBodyScroll() {
  1159.         let ct = Date.now();
  1160.         if(ct - lastScrollAt2 < 30) return; // avoid over triggering
  1161.         lastScrollAt2 = ct;
  1162.         requestAnimationFrame(()=>{
  1163.             window.dispatchEvent(new Event("scroll")); // ask youtube to display content
  1164.         })
  1165.     }
  1166.  
  1167.     let requestingComments = null
  1168.     let scrollForComments_lastStart = 0;
  1169.     function scrollForComments_TF(){
  1170.         let comments = requestingComments;
  1171.         if(!comments) return;
  1172.         if ( comments.hasAttribute('hidden')){
  1173.             window.dispatchEvent(new Event("scroll"));
  1174.         } 
  1175.         else requestingComments=null;
  1176.     }
  1177.     function scrollForComments() {
  1178.         scrollForComments_TF();
  1179.         if(!requestingComments) return;
  1180.         requestAnimationFrame(scrollForComments_TF);
  1181.         let ct = Date.now();
  1182.         if(ct - scrollForComments_lastStart < 60) return;
  1183.         scrollForComments_lastStart = ct;
  1184.         setTimeout(scrollForComments_TF, 80);
  1185.         setTimeout(scrollForComments_TF, 240);
  1186.         setTimeout(scrollForComments_TF, 870);
  1187.     }
  1188.  
  1189.  
  1190.  
  1191.  
  1192.     const mtoCs = {mtoNav:null, mtoBody:null};
  1193.  
  1194.  
  1195.     const mtoVs={}
  1196.  
  1197.     const mutation_target_id_list=['ytp-caption-window-container', 'items', 'button', 'movie_player', 'player-ads', 'hover-overlays', 'replies'];
  1198.     const mutation_target_class_list=['ytp-panel-menu', 'ytp-endscreen-content'];
  1199.     function isMtoOverallSkip(dTarget) {
  1200.  
  1201.         if(!dTarget || dTarget.nodeType!==1) return true;
  1202.         
  1203.         if(mutation_target_id_list.includes(dTarget.id)) return true;
  1204.  
  1205.         let className = dTarget.className.toLowerCase();
  1206.         let classNameSplit = className.split(' ');
  1207.         for (const c of classNameSplit) {
  1208.             if(mutation_target_class_list.includes(c)) return true;
  1209.         }
  1210.  
  1211.         return false;
  1212.     }
  1213.  
  1214.  
  1215.     const mutation_div_id_ignorelist=[
  1216.         'metadata-line',
  1217.         'ytp-caption-window-container',
  1218.         'top-level-buttons-computed',
  1219.         'microformat',
  1220.         'visibility-button',
  1221.         'info-strings',
  1222.         'action-menu',
  1223.         'reply-button-end'
  1224.     ];
  1225.  
  1226.     const mutation_div_class_ignorelist=[
  1227.         'badge','tp-yt-paper-tooltip','ytp-autonav-endscreen-upnext-header',
  1228.         'ytp-bound-time-left','ytp-bound-time-right','ytp-share-icon',
  1229.         'ytp-tooltip-title','annotation','ytp-copylink-icon','ytd-thumbnail',
  1230.         'paper-ripple',
  1231.         //caption
  1232.         'captions-text','caption-visual-line','ytp-caption-segment', 'ytp-caption-window-container',
  1233.         //menu
  1234.         'ytp-playlist-menu-button-text',
  1235.  
  1236.         'ytp-bezel-icon','ytp-bezel-text',
  1237.         'dropdown-content',
  1238.         'tp-yt-paper-menu-button','tp-yt-iron-dropdown',
  1239.  
  1240.         'ytd-metadata-row-renderer', // #content.ytd-metadata-row-renderer inside each of ytd-metadata-row-renderer (ytd-expander)
  1241.         'ytd-engagement-panel-section-list-renderer', // {div#content.style-scope.ytd-engagement-panel-section-list-renderer} inside each of ytd-engagement-panel-section-list-renderer
  1242.  
  1243.         'autocomplete-suggestions' // autocomplete-suggestions
  1244.     ];
  1245.  
  1246.     const mutation_target_tag_ignorelist=[
  1247.         'ytd-channel-name','tp-yt-iron-dropdown','tp-yt-paper-tooltip',
  1248.         'tp-yt-paper-listbox','yt-img-shadow','ytd-thumbnail','ytd-video-meta-block',
  1249.  
  1250.         'yt-icon-button','tp-yt-paper-button','yt-formatted-string','yt-icon','button','paper-ripple',
  1251.  
  1252.         'ytd-player-microformat-renderer',
  1253.         'ytd-engagement-panel-section-list-renderer','ytd-engagement-panel-title-header-renderer',
  1254.         'ytd-comment-renderer', 'ytd-menu-renderer', 'ytd-badge-supported-renderer',
  1255.         'ytd-subscribe-button-renderer', 'ytd-subscription-notification-toggle-button-renderer',
  1256.         'ytd-button-renderer','ytd-toggle-button-renderer',
  1257.         'yt-pdg-comment-chip-renderer','ytd-comment-action-buttons-renderer','ytd-comment-thread-renderer',
  1258.         'ytd-compact-radio-renderer','ytd-compact-video-renderer',
  1259.         'ytd-video-owner-renderer',
  1260.         'ytd-metadata-row-renderer', //ytd-metadata-row-renderer is part of the #collapsible inside ytd-expander
  1261.  
  1262.         'ytd-moving-thumbnail-renderer',
  1263.         'ytd-thumbnail-overlay-toggle-button-renderer',
  1264.         'ytd-thumbnail-overlay-bottom-panel-renderer','ytd-thumbnail-overlay-equalizer',
  1265.         'ytd-thumbnail-overlay-now-playing-renderer','ytd-thumbnail-overlay-resume-playback-renderer',
  1266.         'ytd-thumbnail-overlay-side-panel-renderer','ytd-thumbnail-overlay-time-status-renderer',
  1267.         'ytd-thumbnail-overlay-hover-text-renderer',
  1268.  
  1269.         'yt-interaction',
  1270.         'tp-yt-paper-spinner-lite','tp-yt-paper-spinner',
  1271.  
  1272.         'h1','h2','h3','h4','h5','span','a',
  1273.  
  1274.         'meta','br','script','style','link','dom-module','template'
  1275.     ];
  1276.  
  1277.     function isMtoTargetSkip(mutation) {
  1278.         //skip not important mutation tartget
  1279.  
  1280.         if (!mutation) return true;
  1281.         let {type, target} = mutation
  1282.  
  1283.         if (!target || target.nodeType !== 1 || type != 'childList') return true;
  1284.  
  1285.         let tagName = target.nodeName.toLowerCase();
  1286.         let className;
  1287.         let classNameSplit;
  1288.  
  1289.         if(mutation_target_tag_ignorelist.includes(tagName)) return true;
  1290.  
  1291.         switch (tagName) {
  1292.  
  1293.  
  1294.             case 'ytd-expander':
  1295.                 if (target.id == 'expander' && Q.comments_section_loaded==1 && target.classList.contains('ytd-comment-renderer') ) return true; // load comments
  1296.                 return false;
  1297.  
  1298.             case 'div':
  1299.  
  1300.                 if (target.id == 'contents') {
  1301.                     return false;
  1302.                 }
  1303.                 if(mutation_div_id_ignorelist.includes(target.id)) return true;
  1304.                 
  1305.                 className = target.className.toLowerCase();
  1306.                 classNameSplit = className.split(' ');
  1307.                 for (const c of classNameSplit) {
  1308.                     if(mutation_div_class_ignorelist.includes(c)) return true;
  1309.                 }
  1310.  
  1311.                 return false;
  1312.  
  1313.         }
  1314.  
  1315.         return false;
  1316.  
  1317.     } 
  1318.  
  1319.  
  1320.  
  1321.     // continuous check for element relocation
  1322.     function mtf_append_comments() {
  1323.             
  1324.         let ytdFlexyElm = kRef(ytdFlexy);
  1325.         if(!scriptEnable || !ytdFlexyElm) return;
  1326.  
  1327.         const rootElement = Q.mutationTarget || ytdFlexyElm;
  1328.  
  1329.         let comments = rootElement.querySelector('#primary ytd-watch-metadata ~ #info ~ ytd-comments#comments');
  1330.         if (comments) $(comments).appendTo('#tab-comments').attr('data-dom-changed-by-tabview-youtube',scriptVersionForExternal)
  1331.     }
  1332.  
  1333.     // continuous check for element relocation
  1334.     function mtf_liveChatBtnF() {
  1335.         let ytdFlexyElm = kRef(ytdFlexy);
  1336.         if(!scriptEnable || !ytdFlexyElm) return;
  1337.  
  1338.         const rootElement = Q.mutationTarget || ytdFlexyElm;
  1339.  
  1340.         let button = rootElement.querySelector('ytd-live-chat-frame#chat>.ytd-live-chat-frame#show-hide-button:nth-child(n+2)');
  1341.         if (button) button.parentNode.insertBefore(button, button.parentNode.firstChild)
  1342.     }
  1343.  
  1344.  
  1345.     
  1346.     // continuous check for element relocation
  1347.     // fired at begining & window resize, etc
  1348.     function mtf_append_playlist(){
  1349.         
  1350.         let ytdFlexyElm = kRef(ytdFlexy);
  1351.         if(!scriptEnable || !ytdFlexyElm) return;
  1352.  
  1353.         const rootElement = Q.mutationTarget || ytdFlexyElm;
  1354.  
  1355.         let ple1 = rootElement.querySelector("*:not(#ytd-userscript-playlist)>ytd-playlist-panel-renderer#playlist");
  1356.         if(ple1){
  1357.             let ct = Date.now();
  1358.             let truePlaylist=null;
  1359.             let truePlaylist_items = document.querySelector('ytd-playlist-panel-renderer#playlist #items:not(:empty)');
  1360.             if(truePlaylist_items){
  1361.  
  1362.                 let pElm  = truePlaylist_items.parentNode;
  1363.                 while(pElm && pElm.nodeType===1){
  1364.                     if(pElm.id=='playlist'){
  1365.                         pElm.setAttribute('tabview-true-playlist',ct)
  1366.                         truePlaylist=pElm;
  1367.                         break;
  1368.                     }
  1369.                     pElm=pElm.parentNode;
  1370.                 }
  1371.  
  1372.             }
  1373.  
  1374.             if(!truePlaylist) truePlaylist = ple1; // NOT NULL
  1375.  
  1376.             for(const s of document.querySelectorAll(`*:not(#ytd-userscript-playlist)>ytd-playlist-panel-renderer#playlist:not([tabview-true-playlist="${ct}"])`))
  1377.             s.parentNode.removeChild(s);
  1378.  
  1379.             let $wrapper = getWrapper('ytd-userscript-playlist')
  1380.             $wrapper.append(truePlaylist).appendTo(document.querySelector("#tab-list"));
  1381.             truePlaylist.setAttribute('data-dom-changed-by-tabview-youtube',scriptVersionForExternal)
  1382.             setDisplayedPlaylist(); // relocation after re-layout
  1383.  
  1384.             requestAnimationFrame(()=>{
  1385.                 let ytdFlexyElm = kRef(ytdFlexy);
  1386.                 if(!scriptEnable || !ytdFlexyElm) return;
  1387.                 if( !switchTabActivity_lastTab && (ytdFlexyElm.getAttribute('tabview-selection')+'').indexOf('#tab-')===0 && /https\:\/\/www\.youtube\.com\/watch.*[\?\&]list=[\w\-\_]+/.test(location.href) ){
  1388.                     if(setToActiveTab('#tab-list')) switchTabActivity_lastTab = '#tab-list';
  1389.                 }
  1390.             })
  1391.  
  1392.         }
  1393.     }
  1394.  
  1395.  
  1396.     // content fix - info & playlist
  1397.     // fired at begining, and keep for in case any change
  1398.     function mtf_fix_details() {
  1399.  
  1400.         if(!scriptEnable)return ;
  1401.  
  1402.         if(no_fix_contents_until<Date.now()){
  1403.             const content = document.querySelector('#meta-contents ytd-expander>#content, #tab-info ytd-expander>#content')
  1404.             if (content) {
  1405.                 no_fix_contents_until= Date.now() +3000;
  1406.                 setTimeout(function(){
  1407.                     const expander = content.parentNode;
  1408.  
  1409.                     if (expander.hasAttribute('collapsed')) wAttr(expander,'collapsed',false);
  1410.                     expander.style.setProperty('--ytd-expander-collapsed-height','');
  1411.  
  1412.                     let btn1 = expander.querySelector('tp-yt-paper-button#less:not([hidden])');
  1413.                     let btn2 = expander.querySelector('tp-yt-paper-button#more:not([hidden])');
  1414.  
  1415.                     if (btn1) wAttr(btn1,'hidden',true);
  1416.                     if (btn2) wAttr(btn2,'hidden',true);
  1417.                 },40);
  1418.  
  1419.             }
  1420.         }
  1421.  
  1422.         if(no_fix_playlist_until<Date.now()){
  1423.             // just in case the playlist is collapsed
  1424.             const playlist = document.querySelector('#tab-list ytd-playlist-panel-renderer#playlist')
  1425.             if(playlist){
  1426.                 no_fix_playlist_until= Date.now() +3000;
  1427.                 setTimeout(function(){
  1428.                     if(playlist.hasAttribute('collapsed')) wAttr(playlist,'collapsed',false);
  1429.                     if(playlist.hasAttribute('collapsible')) wAttr(playlist,'collapsible',false);
  1430.                 },40)
  1431.             }
  1432.         }
  1433.  
  1434.  
  1435.     }
  1436.  
  1437.  
  1438.  
  1439.     function status_commentsHidden(){
  1440.         
  1441.         var comments=document.querySelector('ytd-comments#comments')
  1442.         if(!comments || (comments.childElementCount === 0 && comments.hasAttribute('hidden'))) return 2;
  1443.         if(comments.hasAttribute('hidden')) return 1;
  1444.         return 0;
  1445.  
  1446.     }
  1447.  
  1448.  
  1449.     function getFMT(ytdFlexyElm){
  1450.     
  1451.  
  1452.         let fmt = ["ytd-comments#comments #count.ytd-comments-header-renderer", 'ytd-item-section-renderer#sections #header ~ #contents>ytd-message-renderer'].map(s=>{
  1453.     
  1454.             let elm = ytdFlexyElm.querySelector(s)
  1455.             if(!elm) return null;
  1456.             return elm.querySelector('yt-formatted-string') || elm.closest('yt-formatted-string') || null
  1457.     
  1458.     
  1459.         });
  1460.     
  1461.         return fmt
  1462.     }
  1463.     
  1464.     function toFST(elm){
  1465.         
  1466.         if(!elm) return null;
  1467.         return elm.querySelector('yt-formatted-string') || elm.closest('yt-formatted-string') || null
  1468.     }
  1469.  
  1470.     
  1471.     function innerCommentsLoader(){
  1472.  
  1473.  
  1474.         const rootElement = Q.mutationTarget || kRef(ytdFlexy);
  1475.         if(!rootElement)return;
  1476.  
  1477.         let messageElm, messageStr, commentRenderer;
  1478.         
  1479.         if (commentRenderer = rootElement.querySelector("ytd-comments#comments #count.ytd-comments-header-renderer")) {
  1480.             
  1481.             return {
  1482.                 status: 1,
  1483.                 f: ()=>{
  1484.  
  1485.                     let span = document.querySelector("span#tab3-txt-loader")
  1486.                     Q.fetchedOnce=true;
  1487.                     let r = '0';
  1488.                     let txt = commentRenderer.textContent
  1489.                     if (typeof txt == 'string') {
  1490.                         let m = txt.match(/[\d\,\s]+/)
  1491.                         if (m) {
  1492.                             r = m[0].trim()
  1493.                             
  1494.                             
  1495.                         }
  1496.                     }
  1497.                     if(span) span.textContent = r;
  1498.                     mtoInterval=mtoInterval2;
  1499.                     setCommentSection(1);
  1500.                     cmItem=mWeakRef(toFST(commentRenderer))
  1501.                     comments_section_loaded_elm=mWeakRef(document.querySelector('ytd-comments#comments div#contents'))
  1502.                 }
  1503.             }
  1504.             
  1505.         }else if((messageElm = rootElement.querySelector('ytd-item-section-renderer#sections #header ~ #contents>ytd-message-renderer'))&&(messageStr=(messageElm.textContent||'').trim())){ //ytd-message-renderer
  1506.             // it is possible to get the message before the header generation.
  1507.             return {
  1508.                 status:2,
  1509.                 f:()=>{
  1510.                     setTimeout(function(){
  1511.                         if(Q.fetchedOnce)return;
  1512.                         let span = document.querySelector("span#tab3-txt-loader")
  1513.                         const mainMsg= messageElm.querySelector('#message, #submessage')
  1514.                         if(mainMsg && mainMsg.textContent){
  1515.                             for(const msg of mainMsg.querySelectorAll('*:not(:empty)')){
  1516.                                 if(msg.childElementCount===0 && msg.textContent) {
  1517.                                     messageStr=msg.textContent.trim()
  1518.                                     break
  1519.                                 }
  1520.                             } 
  1521.                         }
  1522.                         if(span) span.textContent = messageStr;
  1523.                         mtoInterval=mtoInterval2;
  1524.                         setCommentSection(1);
  1525.                         cmItem=mWeakRef(toFST(messageElm))
  1526.                         comments_section_loaded_elm=mWeakRef(document.querySelector('ytd-comments#comments div#contents'))
  1527.                     },40);
  1528.                 }
  1529.             }
  1530.  
  1531.         }
  1532.  
  1533.     }
  1534.  
  1535.     const FP={
  1536.  
  1537.         mtoNav_delayedF:() => {
  1538.         
  1539.             let {addP, removeP, mutationTarget} = Q;
  1540.         
  1541.             Q.addP = 0;
  1542.             Q.removeP = 0;
  1543.             
  1544.             let isInvalidAdding = Q.mutationTarget&& !Q.mutationTarget.parentNode
  1545.  
  1546.             let promisesForAddition=!scriptEnable?[]:addP > 0 && !isInvalidAdding ?[
  1547.                 
  1548.                 $callOnceAsync('mtf_checkFlexy'),
  1549.                 $callOnceAsync('mtf_initalAttr_comments'),
  1550.                 $callOnceAsync('mtf_initalAttr_playlist'),
  1551.                 $callOnceAsync('mtf_initalAttr_chatroom'),
  1552.                 $callOnceAsync('mtf_initalAttr_engagement_panel'),
  1553.                 $callOnceAsync('mtf_advancedComments'),
  1554.                 $callOnceAsync('mtf_checkDescriptionLoaded'),
  1555.                 $callOnceAsync('mtf_fetchCommentsAvailable'),
  1556.                 $callOnceAsync('mtf_forceCheckLiveVideo'),
  1557.  
  1558.                 (async () => {
  1559.                     mtf_append_comments();
  1560.                 })(),
  1561.         
  1562.                 (async () => {
  1563.                     mtf_liveChatBtnF();
  1564.                 })(),
  1565.  
  1566.                 (async ()=>{
  1567.                     fixTabs();
  1568.                     mtf_AfterFixTabs();
  1569.                 })(),
  1570.             
  1571.                 (async () => {
  1572.                     mtf_append_playlist();
  1573.                 })()
  1574.             ]:[];
  1575.             
  1576.  
  1577.  
  1578.             let promisesForEveryMutation=!scriptEnable?[]:[
  1579.                 (async () => {
  1580.                     mtf_fix_details();
  1581.                 })(),
  1582.                 (async () => {
  1583.                     mtf_ChatExist();
  1584.                 })()
  1585.             ];
  1586.  
  1587.  
  1588.             Promise.all([...promisesForAddition,...promisesForEveryMutation]).then(()=>{
  1589.                 Q.mutationTarget = null;
  1590.  
  1591.                 Q.mtoNav_requestNo--;
  1592.                 //console.log('motnav reduced to', mtoNav_requestNo)
  1593.                 if(Q.mtoNav_requestNo>0){
  1594.                     Q.mtoNav_requestNo=1;
  1595.                     setTimeout(FP.mtoNav_delayedF,mtoInterval);
  1596.                 }
  1597.             })
  1598.         
  1599.         
  1600.         },
  1601.  
  1602.         mtoNavF: (mutations, observer) => {
  1603.             
  1604.             if(!scriptEnable)return;
  1605.  
  1606.             let ch = false;
  1607.  
  1608.             let reg = [];
  1609.             let dTarget =null;
  1610.  
  1611.             let wAddP=0,wRemoveP=0;
  1612.  
  1613.             let _last_mto_target = null;
  1614.             let _last_mto_target_valid = null;
  1615.  
  1616.             for (const mutation of mutations) {
  1617.                 if(!mutation || !mutation.target || !mutation.target.parentNode) continue;
  1618.  
  1619.                 let elementalMutation = false;
  1620.                 let tAddP=0, tRemoveP=0;
  1621.  
  1622.                 for (const addedNode of mutation.addedNodes){ //theoretically faster: only reading of states
  1623.                     if (addedNode.nodeType === 1) {
  1624.                         tAddP++;
  1625.                         elementalMutation = true;
  1626.                     }
  1627.                 }
  1628.  
  1629.                 for (const removedNode of mutation.removedNodes){ //theoretically faster: only reading of states
  1630.                     if (removedNode.nodeType === 1) {
  1631.                         tRemoveP++;
  1632.                         elementalMutation = true;
  1633.                     }
  1634.                 }
  1635.  
  1636.                 if(elementalMutation){ //skip all addition and removal operations without elemental changes (e.g. textNode modification)
  1637.  
  1638.                     if(_last_mto_target === mutation.target){
  1639.                         // due to addition and removal operations to the same DOM
  1640.                         if(_last_mto_target_valid){
  1641.                             // AddP & RemoveP is still valid
  1642.                             wAddP+=tAddP;
  1643.                             wRemoveP+=tRemoveP;
  1644.                         }
  1645.                         continue;
  1646.                     }
  1647.                     _last_mto_target = mutation.target;
  1648.  
  1649.                     if(isMtoTargetSkip(mutation)){
  1650.                         _last_mto_target_valid=false;
  1651.                         continue; //theoretically slower: creation of string variables
  1652.                     }else{
  1653.                         _last_mto_target_valid=true;
  1654.                         wAddP+=tAddP;
  1655.                         wRemoveP+=tRemoveP;
  1656.                     }
  1657.  
  1658.                     
  1659.  
  1660.                     ch = true;
  1661.  
  1662.                     reg.push(mutation);
  1663.  
  1664.                     if(dTarget===null) dTarget=mutation.target; //first
  1665.                     else if(dTarget===true){} //ytdFlexy
  1666.                     else if(dTarget.contains(mutation.target)){} //first node is the container to all subsequential targets
  1667.                     else {dTarget=true;} //the target is not the child of first node
  1668.  
  1669.                 }
  1670.  
  1671.             }
  1672.             
  1673.             if (!ch) return; // dTarget must be true OR HTMLElement
  1674.             
  1675.             if(dTarget===true) dTarget=kRef(ytdFlexy); // major mutation occurance
  1676.             else if(dTarget === kRef(comments_section_loaded_elm) && wAddP>wRemoveP) return true; // ignore if comments are loaded (adding comments)
  1677.             else if(isMtoOverallSkip(dTarget)) return; // allow for multiple mutations at the same time - determinated after looping
  1678.  
  1679.  
  1680.  
  1681.             // 4 ~ 16 times per full page loading
  1682.             
  1683.             Q.addP+=wAddP;
  1684.             Q.removeP+=wRemoveP;
  1685.  
  1686.             if(Q.mutationTarget===null) Q.mutationTarget=dTarget;
  1687.             else if(Q.mutationTarget!=dTarget) Q.mutationTarget = kRef(ytdFlexy);
  1688.  
  1689.             //console.log(prettyElm(dTarget), wAddP , wRemoveP, mtoInterval)
  1690.             //console.log(prettyElm(dTarget), reg.map(m=>prettyElm(m.target)))
  1691.             //console.log(7015, performance.now())
  1692.  
  1693.             Q.mtoNav_requestNo++;
  1694.             if(Q.mtoNav_requestNo==1) setTimeout(FP.mtoNav_delayedF,mtoInterval);
  1695.  
  1696.         },
  1697.  
  1698.  
  1699.         mtoBodyF: function (mutations, observer){
  1700.             if(!scriptEnable)return;
  1701.  
  1702.             for (const mutation of mutations) {
  1703.                 for (const addedNode of mutation.addedNodes)
  1704.                     if (addedNode.nodeType === 1) {
  1705.                         if(addedNode.nodeName=="DIV" && addedNode.className.indexOf('autocomplete-suggestions')>=0){
  1706.                             mtf_fixAutoCompletePosition(addedNode)
  1707.                         }
  1708.                     }
  1709.             }
  1710.  
  1711.         },
  1712.  
  1713.         mtf_attrPlaylist:(mutations, observer)=>{
  1714.  
  1715.             if(!scriptEnable)return;
  1716.             let cssElm=kRef(ytdFlexy);
  1717.             if(!cssElm)return;
  1718.  
  1719.             var playlist=document.querySelector('ytd-playlist-panel-renderer#playlist')
  1720.             const tabBtn = document.querySelector('[userscript-tab-content="#tab-list"]');
  1721.             if(tabBtn){
  1722.                 //console.log('attr playlist changed')
  1723.                 if( tabBtn.classList.contains('tab-btn-hidden') && !playlist.hasAttribute('hidden') ){
  1724.                     //console.log('attr playlist changed - no hide')
  1725.                     tabBtn.classList.remove("tab-btn-hidden");
  1726.                 }else if( !tabBtn.classList.contains('tab-btn-hidden') && playlist.hasAttribute('hidden') ){
  1727.                     //console.log('attr playlist changed - add hide')
  1728.                     hideTabBtn(tabBtn);
  1729.                 }
  1730.             }
  1731.              /* visible layout for triggering hidden removal */ 
  1732.             akAttr(cssElm, 'tabview-youtube-playlist', playlist.hasAttribute('hidden'));
  1733.         },
  1734.         delayed_disableComments:function(){
  1735.  
  1736.             let ytdFlexyElm = kRef(ytdFlexy);
  1737.             if(!scriptEnable || !ytdFlexyElm) return;
  1738.  
  1739.             if(status_commentsHidden()==2) _disableComments();
  1740.  
  1741.         },
  1742.         mtf_attrComments:(mutations, observer)=>{
  1743.  
  1744.             let ytdFlexyElm = kRef(ytdFlexy);
  1745.             if(!scriptEnable || !ytdFlexyElm) return;
  1746.  
  1747.             var comments=document.querySelector('ytd-comments#comments')
  1748.             const tabBtn = document.querySelector('[userscript-tab-content="#tab-comments"]');
  1749.             if(!comments || !tabBtn)return;
  1750.             let isCommentHidden = comments.hasAttribute('hidden')
  1751.             //console.log('attr comments changed')
  1752.  
  1753.  
  1754.             timeout_attrComments.clear();
  1755.             $('span#tab3-txt-loader').text('');
  1756.             mtoInterval=mtoInterval1;
  1757.  
  1758.             if( !isCommentHidden ){
  1759.  
  1760.                 akAttr(ytdFlexyElm,'tabview-youtube-comments', false, 'K');
  1761.  
  1762.                 //console.log('attr comments changed - no hide')
  1763.                 tabBtn.classList.remove("tab-btn-hidden") //if contains
  1764.  
  1765.                 makeBodyScroll();
  1766.                 Q.fetchedOnce = false
  1767.                 FOnce.mtf_fetchCommentsAvailable = FP.mtf_fetchCommentsAvailable;
  1768.                 if(Q.mutationTarget===null) $callOnceAsync('mtf_fetchCommentsAvailable');
  1769.                         
  1770.                 window.requestAnimationFrame(()=>{
  1771.                     let innerCommentsLoaderRet = innerCommentsLoader();
  1772.                     if(innerCommentsLoaderRet) innerCommentsLoaderRet.f();    
  1773.                 })
  1774.                 
  1775.             }else if( isCommentHidden ){
  1776.  
  1777.  
  1778.                 //console.log('attr comments changed - add hide')
  1779.  
  1780.                 akAttr(ytdFlexyElm,'tabview-youtube-comments',true, 'K');
  1781.  
  1782.                 let t = status_commentsHidden()==2 ? 1630 : 760;
  1783.  
  1784.                 timeout_attrComments.set(FP.delayed_disableComments,t);
  1785.                 
  1786.             }   
  1787.             
  1788.             requestingComments = comments;
  1789.             scrollForComments();
  1790.             setTimeout(()=>nativeFunc(comments, "loadComments"),20)
  1791.             
  1792.  
  1793.         },
  1794.         
  1795.         
  1796.         mtf_attrChatroom:(mutations, observer)=>{
  1797.             let ytdFlexyElm = kRef(ytdFlexy);
  1798.             if(!scriptEnable || !ytdFlexyElm) return ;
  1799.  
  1800.             layoutStatusMutex.lockWith(unlock=>{
  1801.  
  1802.                 const chatBlock = document.querySelector('ytd-live-chat-frame#chat')
  1803.                 const cssElm = kRef(ytdFlexy)
  1804.  
  1805.                 if(!chatBlock || !cssElm){
  1806.                     unlock();
  1807.                     return;
  1808.                 }
  1809.  
  1810.                 if(!cssElm.hasAttribute('userscript-chatblock')) wAttr(cssElm, 'userscript-chatblock', true);
  1811.                 let isCollapsed=!!chatBlock.hasAttribute('collapsed');
  1812.                 wAttr(cssElm,'userscript-chat-collapsed',isCollapsed);
  1813.  
  1814.                 if(cssElm.hasAttribute('userscript-chatblock')&&!isCollapsed) lastShowTab='#chatroom';
  1815.  
  1816.                 if(!isCollapsed && document.querySelector('#right-tabs .tab-btn.active') && isWideScreenWithTwoColumns() && !isTheater()  ){
  1817.                     switchTabActivity(null);
  1818.                     setTimeout(unlock,40);
  1819.                 } else{
  1820.                     unlock();
  1821.                 }
  1822.  
  1823.                 if(!isCollapsed){
  1824.                     runAfterExpandChat();
  1825.                 }else {
  1826.                     chatBlock.removeAttribute('yt-userscript-iframe-loaded');
  1827.                 }
  1828.  
  1829.             })
  1830.  
  1831.  
  1832.  
  1833.  
  1834.         },
  1835.  
  1836.         mtf_attrEngagementPanel:(mutations, observer)=>{
  1837.             let ytdFlexyElm = kRef(ytdFlexy);
  1838.             if(!scriptEnable || !ytdFlexyElm) return ;
  1839.  
  1840.             //multiple instance
  1841.             if(mutations){
  1842.                 let cPanels = null;
  1843.                 for(const mutation of mutations){
  1844.                     let ePanel = mutation.target;
  1845.                     if(ePanel.getAttribute('visibility')=='ENGAGEMENT_PANEL_VISIBILITY_EXPANDED'){
  1846.                         cPanels = cPanels || engagement_panels_();
  1847.                         for(const entry of cPanels.list){
  1848.                             if(entry.ePanel!=ePanel && entry.visible) ytBtnCloseEngagementPanel(entry.ePanel);
  1849.                         }
  1850.                     }
  1851.                 }
  1852.             }
  1853.  
  1854.             layoutStatusMutex.lockWith(unlock=>{
  1855.  
  1856.                 const ePanel = document.querySelector('ytd-watch-flexy ytd-engagement-panel-section-list-renderer')
  1857.                 const cssElm = kRef(ytdFlexy)
  1858.  
  1859.                 if(!ePanel || !cssElm){
  1860.                     unlock();
  1861.                     return;
  1862.                 }
  1863.                 let previousValue = +cssElm.getAttribute('userscript-engagement-panel') || 0;
  1864.                 
  1865.                 let {value, count} = engagement_panels_();
  1866.                 let nextValue = value;
  1867.                 let nextCount = count;
  1868.  
  1869.  
  1870.                 if(nextCount == 0 && cssElm.hasAttribute('userscript-engagement-panel')){
  1871.                     wAttr(cssElm, 'userscript-engagement-panel', false);
  1872.                     unlock();
  1873.                 }else{
  1874.  
  1875.                     if( ( nextCount > 1) || (cssElm.hasAttribute('userscript-engagement-panel') && previousValue===nextValue) ) {
  1876.                         unlock();
  1877.                         return;
  1878.                     }
  1879.  
  1880.                     cssElm.setAttribute('userscript-engagement-panel',nextValue); 
  1881.  
  1882.                     let b = false;
  1883.                     if(previousValue!=nextValue && nextValue>0) {
  1884.                         lastShowTab = `#engagement-panel-${nextValue}`; 
  1885.                         b=true;
  1886.                     }
  1887.  
  1888.                     if(b && document.querySelector('#right-tabs .tab-btn.active') && isWideScreenWithTwoColumns() && !isTheater()  ){
  1889.                         switchTabActivity(null);
  1890.                         setTimeout(unlock,40);
  1891.                     } else{
  1892.                         unlock();
  1893.                     }
  1894.                 }
  1895.  
  1896.             })
  1897.  
  1898.  
  1899.  
  1900.  
  1901.         },
  1902.  
  1903.         mtf_initalAttr_playlist:()=>{
  1904.             let ytdFlexyElm = kRef(ytdFlexy);
  1905.             if(!scriptEnable || !ytdFlexyElm) return true;
  1906.  
  1907.             const rootElement = Q.mutationTarget || ytdFlexyElm;
  1908.  
  1909.             var playlist=rootElement.querySelector('ytd-playlist-panel-renderer#playlist')
  1910.             if(!playlist) return true;
  1911.             initMutationObserver(mtoVs,'mtoVisibility_Playlist', FP.mtf_attrPlaylist).observe(playlist, {          
  1912.                 attributes: true,
  1913.                 attributeFilter: ['hidden'],
  1914.                 attributeOldValue: true
  1915.             })
  1916.             FP.mtf_attrPlaylist()
  1917.             return false;
  1918.         },
  1919.  
  1920.         mtf_initalAttr_comments:()=>{
  1921.             let ytdFlexyElm = kRef(ytdFlexy);
  1922.             if(!scriptEnable || !ytdFlexyElm) return true;
  1923.  
  1924.             const rootElement = Q.mutationTarget || ytdFlexyElm;
  1925.  
  1926.             var comments=rootElement.querySelector('ytd-comments#comments')
  1927.             if(!comments) return true;
  1928.             initMutationObserver(mtoVs,'mtoVisibility_Comments',FP.mtf_attrComments).observe(comments, {          
  1929.                 attributes: true,
  1930.                 attributeFilter: ['hidden'],
  1931.                 attributeOldValue: true
  1932.             })
  1933.             FP.mtf_attrComments()
  1934.             requestingComments = comments;
  1935.             //scrollForComments()
  1936.             setTimeout(()=>nativeFunc(comments, "loadComments"),20)
  1937.             return false;
  1938.         },
  1939.  
  1940.         mtf_initalAttr_chatroom:()=>{
  1941.             let ytdFlexyElm = kRef(ytdFlexy);
  1942.             if(!scriptEnable || !ytdFlexyElm) return true;
  1943.  
  1944.             const rootElement = Q.mutationTarget || ytdFlexyElm;
  1945.  
  1946.             var chatroom=rootElement.querySelector('ytd-live-chat-frame#chat')
  1947.             if(!chatroom) return true;
  1948.             initMutationObserver(mtoVs,'mtoVisibility_Chatroom',FP.mtf_attrChatroom).observe(chatroom, {          
  1949.                 attributes: true,
  1950.                 attributeFilter: ['collapsed'],
  1951.                 attributeOldValue: true
  1952.             })
  1953.             FP.mtf_attrChatroom()
  1954.             return false;
  1955.         },
  1956.  
  1957.         mtf_initalAttr_engagement_panel:()=>{
  1958.             let ytdFlexyElm = kRef(ytdFlexy);
  1959.             if(!scriptEnable || !ytdFlexyElm) return true;
  1960.  
  1961.             const rootElement = Q.mutationTarget || ytdFlexyElm;
  1962.  
  1963.             let toCheck=false;
  1964.             for(const engagement_panel of rootElement.querySelectorAll('ytd-watch-flexy ytd-engagement-panel-section-list-renderer:not([tabview-attr-checked])')){
  1965.  
  1966.                 engagement_panel.setAttribute('tabview-attr-checked','');
  1967.                 let mto = mtoVs.mtoVisibility_EngagementPanel;
  1968.                 if(!mto) mto=initMutationObserver(mtoVs,'mtoVisibility_EngagementPanel',FP.mtf_attrEngagementPanel);
  1969.                 mto.observe(engagement_panel, {          
  1970.                     attributes: true,
  1971.                     attributeFilter: ['visibility'],
  1972.                     attributeOldValue: true
  1973.                 })
  1974.                 toCheck=true;
  1975.             }
  1976.  
  1977.             if(toCheck) FP.mtf_attrEngagementPanel()
  1978.             
  1979.             return true;
  1980.         },
  1981.  
  1982.         mtf_checkDescriptionLoaded: () => {
  1983.                         
  1984.             let ytdFlexyElm = kRef(ytdFlexy);
  1985.             if(!scriptEnable || !ytdFlexyElm) return true;
  1986.  
  1987.             const rootElement = Q.mutationTarget || ytdFlexyElm;
  1988.  
  1989.             const expander = document.querySelector("#meta-contents ytd-expander");
  1990.             if (!expander) return true;
  1991.             $(expander).appendTo("#tab-info").attr('data-dom-changed-by-tabview-youtube',scriptVersionForExternal)
  1992.  
  1993.             const avatar = document.querySelector('#meta-contents yt-img-shadow#avatar');
  1994.             if(avatar) hackImgShadow(avatar)
  1995.             return false;
  1996.  
  1997.         },
  1998.  
  1999.  
  2000.         //live-chat / chat-replay
  2001.  
  2002.         fireOnce_forceCheckLiveVideo_tf: ()=>{
  2003.  
  2004.             let ytdFlexyElm = kRef(ytdFlexy);
  2005.             if(!scriptEnable || !ytdFlexyElm) return;
  2006.  
  2007.             let elm = document.querySelector('#ytd-player .ytp-time-display');
  2008.             if(elm && elm.classList.contains('ytp-live')) {
  2009.                 //console.log(7006)
  2010.                 ytdFlexyElm.setAttribute('userscript-chatblock', 'chat-live')
  2011.                 //disableComments_LiveChat();
  2012.             }
  2013.         },
  2014.  
  2015.         mtf_forceCheckLiveVideo:() => {
  2016.             let ytdFlexyElm = kRef(ytdFlexy);
  2017.             if(!scriptEnable || !ytdFlexyElm) return true;
  2018.  
  2019.             const rootElement = Q.mutationTarget || ytdFlexyElm;
  2020.             const playerLabel = document.querySelector('#ytd-player .ytp-time-display') && document.querySelector('ytd-live-chat-frame#chat')
  2021.             if (!playerLabel) return true;
  2022.             setTimeout(FP.fireOnce_forceCheckLiveVideo_tf,170)
  2023.             return false;
  2024.         },
  2025.  
  2026.         //comments
  2027.  
  2028.         mtf_advancedComments: () => {
  2029.             
  2030.             let ytdFlexyElm = kRef(ytdFlexy);
  2031.             if(!scriptEnable || !ytdFlexyElm) return true;
  2032.  
  2033.             const rootElement = Q.mutationTarget || ytdFlexyElm;
  2034.             const continuations = document.querySelector("ytd-comments#comments #continuations");
  2035.             if (!continuations) return true;
  2036.             requestingComments = document.querySelector('ytd-comments#comments');
  2037.             scrollForComments();
  2038.             return false;
  2039.         },
  2040.  
  2041.         mtf_fetchCommentsAvailable:() => {
  2042.  
  2043.             let ytdFlexyElm = kRef(ytdFlexy);
  2044.             if(!scriptEnable || !ytdFlexyElm) return true;
  2045.  
  2046.             let innerCommentsLoaderRet = innerCommentsLoader();
  2047.             if(!innerCommentsLoaderRet) return true;
  2048.  
  2049.             innerCommentsLoaderRet.f();
  2050.             fetchCommentsFinished();
  2051.             return false;
  2052.         
  2053.         }
  2054.  
  2055.         
  2056.     }
  2057.  
  2058.  
  2059.  
  2060.  
  2061.  
  2062.  
  2063.  
  2064.  
  2065.     function initObserver(){
  2066.  
  2067.         Q.addP=0;
  2068.         Q.removeP=0; 
  2069.         Q.mutationTarget = null;
  2070.  
  2071.         Q.mtoNav_requestNo=0;
  2072.  
  2073.         initMutationObserver(mtoCs, 'mtoNav', FP.mtoNavF).observe(kRef(ytdFlexy), {
  2074.             subtree: true,
  2075.             childList: true,
  2076.             attributes: false
  2077.         });
  2078.  
  2079.         -(async()=>{
  2080.             Q.addP=1; //force all checking
  2081.             Q.mtoNav_requestNo++;
  2082.             if(Q.mtoNav_requestNo==1) FP.mtoNav_delayedF();
  2083.         })();
  2084.  
  2085.         // for automcomplete plugin
  2086.         initMutationObserver(mtoCs,'mtoBody', FP.mtoBodyF).observe(document.querySelector('body'), {
  2087.             childList: true,
  2088.             subtree: false,
  2089.             attributes: false
  2090.         })
  2091.  
  2092.  
  2093.     }
  2094.  
  2095.     let displayedPlaylist=null;
  2096.     let scrollingVideosList=null;
  2097.  
  2098.     let scriptEnable =false;
  2099.     let scriptEC = 0;
  2100.     let lastShowTab = null;
  2101.  
  2102.     let _cachedLastVideo=null;
  2103.     let videoListBeforeSearch=null;
  2104.     let no_fix_contents_until = 0;
  2105.     let no_fix_playlist_until = 0;
  2106.     let statusCollasped = 0;
  2107.     
  2108.     let ytdFlexy=null;
  2109.     let timeout_attrComments=new Timeout();
  2110.  
  2111.     function pluginHook(){
  2112.  
  2113.         scriptEnable =true;
  2114.         scriptEC++;
  2115.  
  2116.         no_fix_contents_until = 0;
  2117.         no_fix_playlist_until = 0;
  2118.  
  2119.         ytdFlexy=mWeakRef(document.querySelector('ytd-watch-flexy'))
  2120.  
  2121.     }
  2122.  
  2123.     function pluginUnhook() {
  2124.  
  2125.         //console.log(8001)
  2126.         timeout_attrComments.clear();
  2127.  
  2128.         videoListBeforeSearch=null;
  2129.         statusCollasped=0;
  2130.         _cachedLastVideo=null;
  2131.         lastShowTab=null;
  2132.         displayedPlaylist=null;
  2133.         scrollingVideosList=null;
  2134.         scriptEnable =false;
  2135.         scriptEC++;
  2136.         if(scriptEC>788888888) scriptEC=188888888;
  2137.         ytdFlexy=null;
  2138.         wls.layoutStatus=null;
  2139.  
  2140.         clearMutationObserver(mtoVs,'mtoVisibility_Playlist')
  2141.         clearMutationObserver(mtoVs,'mtoVisibility_Comments')
  2142.         clearMutationObserver(mtoVs,'mtoVisibility_Chatroom')
  2143.         clearMutationObserver(mtoVs,'mtoFlexyAttr')
  2144.  
  2145.         clearMutationObserver(mtoCs,'mtoBody')
  2146.         if (clearMutationObserver(mtoCs,'mtoNav')) {
  2147.             FOnce.mtf_checkFlexy=null;
  2148.             FOnce.mtf_initalAttr_comments = null;
  2149.             FOnce.mtf_initalAttr_playlist = null;
  2150.             FOnce.mtf_initalAttr_chatroom = null;
  2151.             FOnce.mtf_initalAttr_engagement_panel = null;
  2152.             FOnce.mtf_advancedComments=null;
  2153.             FOnce.mtf_checkDescriptionLoaded = null;
  2154.             FOnce.mtf_fetchCommentsAvailable = null;
  2155.             FOnce.mtf_forceCheckLiveVideo=null;
  2156.             Q.mtf_chatBlockQ = null;
  2157.         }
  2158.  
  2159.         mtoInterval = mtoInterval1;        
  2160.  
  2161.     }
  2162.     
  2163.     let comments_section_loaded_elm = null;
  2164.  
  2165.  
  2166.     function initializeForVideoChange(){
  2167.  
  2168.  
  2169.  
  2170.  
  2171.  
  2172.         pluginUnhook();
  2173.         if(!document.querySelector('script#userscript-tabview-injection-1')) {
  2174.             addScript(`!!(${injection_script_1+""})()`).id='userscript-tabview-injection-1'
  2175.         }
  2176.  
  2177.         var prevComemnts = document.querySelector('ytd-comments#comments'); 
  2178.  
  2179.         if(prevComemnts && prevComemnts.matches('[hidden]')){
  2180.                 
  2181.             // assumption: loading comments after executation of this function which removes the attribute [hidden] of #ytd-comments#comments
  2182.  
  2183.             var prevCommentsHeader = prevComemnts.querySelector('ytd-comments#comments ytd-comments-header-renderer');
  2184.             var prevCommentsMsg= prevComemnts.querySelector('ytd-item-section-renderer#sections #header ~ #contents>ytd-message-renderer');
  2185.                 
  2186.             //removed any cache of #comments header (i.e. count message)
  2187.             if (prevCommentsHeader) prevCommentsHeader.parentNode.removeChild(prevCommentsHeader);
  2188.  
  2189.             //removed any cache of #comments message (i.e. 留言功能已停用。)
  2190.             if (prevCommentsMsg) prevCommentsMsg.parentNode.removeChild(prevCommentsMsg);
  2191.             
  2192.             
  2193.  
  2194.         }
  2195.  
  2196.  
  2197.         window.requestAnimationFrame(()=>{
  2198.  
  2199.             // requestAnimationFrame is required to let youtube coding running first !
  2200.             
  2201.             pluginHook();
  2202.     
  2203.             _onNavigationEnd();
  2204.  
  2205.             setTimeout(()=>{
  2206.  
  2207.                 //ensure comment tab text is updated - no matter there is change of video or not
  2208.                 let innerCommentsLoaderRet = innerCommentsLoader();
  2209.                 if(innerCommentsLoaderRet) innerCommentsLoaderRet.f();    
  2210.     
  2211.             },40);
  2212.             
  2213.  
  2214.         })
  2215.  
  2216.         
  2217.         return true;
  2218.  
  2219.     }
  2220.  
  2221.     function getTabsHTML(){
  2222.  
  2223.         const sTabBtnVideos = `${svgElm(16,16,298,298,svgVideos)}<span>Videos</span>`
  2224.         const sTabBtnInfo = `${svgElm(16,16,23.625,23.625,svgInfo)}<span>Info</span>`
  2225.         const sTabBtnPlayList = `${svgElm(16,16,426.667,426.667,svgPlayList)}<span>Playlist</span>`
  2226.  
  2227.         let str1 = `
  2228.         <paper-ripple class="style-scope yt-icon-button">
  2229.             <div id="background" class="style-scope paper-ripple" style="opacity:0;"></div>
  2230.             <div id="waves" class="style-scope paper-ripple"></div>
  2231.         </paper-ripple>
  2232.         `;
  2233.  
  2234.         const str_tabs = [
  2235.             `<a id="tab-btn1" data-name="info" userscript-tab-content="#tab-info" class="tab-btn">${sTabBtnInfo}${str1}</a>`,
  2236.             `<a id="tab-btn2" userscript-tab-content="#tab-live" class="tab-btn tab-btn-hidden">Chat${str1}</a>`,
  2237.             `<a id="tab-btn3" userscript-tab-content="#tab-comments" data-name="comments" class="tab-btn">${svgElm(16,16,60,60,svgComments)}<span id="tab3-txt-loader"></span>${str1}</a>`,
  2238.             `<a id="tab-btn4" userscript-tab-content="#tab-videos" data-name="videos" class="tab-btn">${sTabBtnVideos}${str1}</a>`,
  2239.             `<a id="tab-btn5" userscript-tab-content="#tab-list" class="tab-btn">${sTabBtnPlayList}${str1}</a>`
  2240.         ].join('')
  2241.  
  2242.         var addHTML = `
  2243.         <div id="right-tabs">
  2244.             <header>
  2245.                 <div id="material-tabs">
  2246.                     ${str_tabs}
  2247.                 </div>
  2248.             </header>
  2249.             <div class="tab-content">
  2250.                 <div id="tab-info" class="tab-content-cld tab-content-hidden" userscript-scrollbar-render></div>
  2251.                 <div id="tab-live" class="tab-content-cld tab-content-hidden" userscript-scrollbar-render></div>
  2252.                 <div id="tab-comments" class="tab-content-cld tab-content-hidden" userscript-scrollbar-render></div>
  2253.                 <div id="tab-videos" class="tab-content-cld tab-content-hidden" userscript-scrollbar-render></div>
  2254.                 <div id="tab-list" class="tab-content-cld tab-content-hidden" userscript-scrollbar-render></div>
  2255.             </div>
  2256.         </div>
  2257.         `;
  2258.  
  2259.         return addHTML
  2260.  
  2261.     }
  2262.  
  2263.     
  2264.     function injection_script_1(){
  2265.  
  2266.         document.addEventListener('userscript-call-dom-func',function(evt){
  2267.  
  2268.             if(!evt || !evt.target || !evt.detail) return;
  2269.             let dom = evt.target;
  2270.  
  2271.             let {property, args}=evt.detail;
  2272.             if(!property) return;
  2273.             let f=dom[property];
  2274.             if(typeof f !='function') return;
  2275.  
  2276.             if(args&&args.length>0) f.apply(dom,args);
  2277.             else f.call(dom);
  2278.  
  2279.         },true)
  2280.  
  2281.     }
  2282.  
  2283.     function _onNavigationEnd() {
  2284.  
  2285.         let timeoutR_findRelated=new Timeout();
  2286.         timeoutR_findRelated.set(function(){
  2287.             let related = kRef(ytdFlexy).querySelector("#related");
  2288.             if(!related) return true;
  2289.             foundRelated(related);
  2290.         },100,10)
  2291.  
  2292.         function foundRelated(related){
  2293.             let promise = Promise.resolve();
  2294.             if (!document.querySelector("#right-tabs")) {
  2295.                 promise=promise.then(()=>{
  2296.                     $(getTabsHTML()).insertBefore(related).attr('data-dom-created-by-tabview-youtube',scriptVersionForExternal);
  2297.                 })
  2298.             }
  2299.             promise.then(runAfterTabAppended).then(initObserver)
  2300.         }
  2301.  
  2302.         setTimeout(()=>{
  2303.             for(const s of document.querySelectorAll('#right-tabs [userscript-scrollbar-render]')){
  2304.                 Promise.resolve(s).then(s=>{
  2305.                     if(s && s.scrollTop>0) s.scrollTop=0;
  2306.                     let child =s.firstElementChild; 
  2307.                     if(child && child.scrollTop>0) child.scrollTop =0;
  2308.                 });
  2309.             }
  2310.         },90)
  2311.  
  2312.     }
  2313.  
  2314.     function onNavigationEnd(evt) {
  2315.         
  2316.         pluginUnhook(); // in case not triggered by popstate - say mini playing
  2317.  
  2318.         $('span#tab3-txt-loader').text('');
  2319.         setCommentSection(0)
  2320.  
  2321.         if(!/^https?\:\/\/(\w+\.)*youtube\.com\/watch\?(\w+\=[^\/\?\&]+\&|\w+\=?\&)*v=[\w\-\_]+/.test(window.location.href))return;
  2322.  
  2323.  
  2324.         let timeout = 4; // max. 4 animation frames
  2325.  
  2326.         let tf = ()=>{
  2327.             if(--timeout>0 && !document.querySelector('#player video')) return requestAnimationFrame(tf);
  2328.  
  2329.             initializeForVideoChange(); 
  2330.             pluginHook(); 
  2331.             _onNavigationEnd();
  2332.      
  2333.         }
  2334.  
  2335.  
  2336.         tf();
  2337.  
  2338.  
  2339.  
  2340.  
  2341.  
  2342.  
  2343.     }
  2344.  
  2345.     function setToActiveTab(defaultTab) {
  2346.         if(isTheater() && isWideScreenWithTwoColumns())return;
  2347.         const jElm = document.querySelector(`a[userscript-tab-content="${switchTabActivity_lastTab}"]:not(.tab-btn-hidden)`) ||
  2348.             document.querySelector(`a[userscript-tab-content="${(defaultTab||settings.defaultTab)}"]:not(.tab-btn-hidden)`) ||
  2349.             document.querySelector("a[userscript-tab-content]:not(.tab-btn-hidden)") ||
  2350.             null;
  2351.         switchTabActivity(jElm);
  2352.         return !!jElm;
  2353.     }
  2354.  
  2355.     function getWrapper(wrapperId){
  2356.         let $wrapper = $(`#${wrapperId}`);
  2357.         if(!$wrapper[0]) $wrapper=$(`<div id="${wrapperId}"></div>`)
  2358.         return $wrapper.first();
  2359.     }
  2360.  
  2361.     function runAfterTabAppended() {
  2362.  
  2363.         document.documentElement.setAttribute('plugin-tabview-youtube','')
  2364.        
  2365.         const cssElm = kRef(ytdFlexy)
  2366.         if(cssElm && !cssElm.hasAttribute('tabview-selection')) cssElm.setAttribute('tabview-selection','')
  2367.  
  2368.  
  2369.         // append the next videos 
  2370.         // it exists as "related" is already here
  2371.         fixTabs();
  2372.  
  2373.         // just switch to the default tab
  2374.         setToActiveTab();
  2375.  
  2376.  
  2377.         prepareTabBtn();
  2378.         
  2379.  
  2380.         // append the detailed meta contents to the tab-info
  2381.         FOnce.mtf_checkDescriptionLoaded = FP.mtf_checkDescriptionLoaded;
  2382.         if(Q.mutationTarget===null) $callOnceAsync('mtf_checkDescriptionLoaded');
  2383.  
  2384.         // force window scroll when #continuations is first detected and #comments still [hidden]
  2385.         FOnce.mtf_advancedComments = FP.mtf_advancedComments;
  2386.         if(Q.mutationTarget===null) $callOnceAsync('mtf_advancedComments');
  2387.  
  2388.         // use video player's element to detect the live-chat situation (no commenting section)
  2389.         // this would be very useful if the live chat is collapsed, i.e. iframe has no indication on the where it is live or replay
  2390.         FOnce.mtf_forceCheckLiveVideo = FP.mtf_forceCheckLiveVideo;
  2391.         if(Q.mutationTarget===null) $callOnceAsync('mtf_forceCheckLiveVideo');
  2392.  
  2393.  
  2394.         // Attr Mutation Observer - #playlist - hidden
  2395.         clearMutationObserver(mtoVs,'mtoVisibility_Playlist')
  2396.         // Attr Mutation Observer callback - #playlist - hidden
  2397.  
  2398.         // pending for #playlist and set Attribute Observer
  2399.         FOnce.mtf_initalAttr_playlist=FP.mtf_initalAttr_playlist
  2400.         if(Q.mutationTarget===null) $callOnceAsync('mtf_initalAttr_playlist');
  2401.  
  2402.         // Attr Mutation Observer - ytd-comments#comments - hidden
  2403.         clearMutationObserver(mtoVs,'mtoVisibility_Comments')
  2404.         // Attr Mutation Observer callback - ytd-comments#comments - hidden
  2405.  
  2406.         // pending for #comments and set Attribute Observer
  2407.         FOnce.mtf_initalAttr_comments=FP.mtf_initalAttr_comments;
  2408.         if(Q.mutationTarget===null) $callOnceAsync('mtf_initalAttr_comments');
  2409.  
  2410.  
  2411.         clearMutationObserver(mtoVs,'mtoVisibility_Chatroom');
  2412.         FOnce.mtf_initalAttr_chatroom=FP.mtf_initalAttr_chatroom
  2413.         if(Q.mutationTarget===null) $callOnceAsync('mtf_initalAttr_chatroom');
  2414.  
  2415.         clearMutationObserver(mtoVs,'mtoVisibility_EngagementPanel');
  2416.         for(const engagement_panel of document.querySelectorAll('ytd-watch-flexy ytd-engagement-panel-section-list-renderer:not([tabview-attr-checked])')){
  2417.             engagement_panel.removeAttribute('tabview-attr-checked');
  2418.         }
  2419.         FOnce.mtf_initalAttr_engagement_panel=FP.mtf_initalAttr_engagement_panel
  2420.         if(Q.mutationTarget===null) $callOnceAsync('mtf_initalAttr_engagement_panel');
  2421.  
  2422.  
  2423.         flexyAttrInit();
  2424.  
  2425.         document.querySelector("#right-tabs .tab-content").addEventListener('scroll', makeBodyScrollByEvt, true);
  2426.  
  2427.     }
  2428.  
  2429.  
  2430.     function fetchCommentsFinished(){
  2431.         let ytdFlexyElm = kRef(ytdFlexy);
  2432.         if(!scriptEnable || !ytdFlexyElm) return;
  2433.         timeout_attrComments.clear();
  2434.         akAttr(ytdFlexyElm,'tabview-youtube-comments',false, 'LS')
  2435.     }
  2436.  
  2437.     function setCommentSection(value){
  2438.         Q.comments_section_loaded =value;
  2439.  
  2440.         if(value===0){
  2441.             comments_section_loaded_elm=null;
  2442.         }
  2443.  
  2444.     }
  2445.  
  2446.     function _disableComments(){
  2447.  
  2448.         if(!scriptEnable)return;
  2449.         let cssElm=kRef(ytdFlexy);
  2450.         if(!cssElm)return;
  2451.  
  2452.         mtoInterval=mtoInterval2;
  2453.         setCommentSection(2);
  2454.         
  2455.         comments_section_loaded_elm=mWeakRef(document.querySelector('ytd-comments#comments div#contents')||null)
  2456.         
  2457.         let tabBtn = document.querySelector('.tab-btn[userscript-tab-content="#tab-comments"]');
  2458.         if(tabBtn && !tabBtn.classList.contains('tab-btn-hidden')){
  2459.             hideTabBtn(tabBtn)
  2460.         }
  2461.         
  2462.         akAttr(cssElm,'tabview-youtube-comments',true, 'D');
  2463.         FOnce.mtf_fetchCommentsAvailable = null; 
  2464.  
  2465.  
  2466.     }
  2467.  
  2468.  
  2469.  
  2470.  
  2471.  
  2472.     let layoutStatusMutex=new Mutex();
  2473.  
  2474.     function forceDisplayChatReplay(){
  2475.         let items=chatFrameElement('yt-live-chat-item-list-renderer #items');
  2476.         if(items && items.childElementCount!==0)return;
  2477.  
  2478.         let ytd_player = document.querySelector('ytd-player#ytd-player'); 
  2479.         if(!ytd_player)return;
  2480.         let videoElm = ytd_player.querySelector('video'); 
  2481.         if(!videoElm)return;
  2482.  
  2483.         let video=videoElm;
  2484.         if(videoElm && video.currentTime > 0 && !video.ended && video.readyState > video.HAVE_CURRENT_DATA){
  2485.             let chat = document.querySelector('ytd-live-chat-frame#chat');
  2486.             if(chat){
  2487.                 nativeFunc(chat, "postToContentWindow", [{"yt-player-video-progress":videoElm.currentTime}])
  2488.             }
  2489.         }
  2490.  
  2491.     }
  2492.  
  2493.  
  2494.     
  2495.     function runAfterExpandChat(){
  2496.  
  2497.  
  2498.  
  2499.         new Promise(resolve=>{
  2500.  
  2501.  
  2502.             let chatFrame_st=Date.now();
  2503.             let cid_chatFrameCheck = 0;
  2504.     
  2505.             let sEF = new ScriptEF();
  2506.             cid_chatFrameCheck=setInterval(()=>{
  2507.                 if(!sEF.isValid()) return cid_chatFrameCheck=clearInterval(cid_chatFrameCheck);
  2508.                 let cDoc = chatFrameContentDocument();
  2509.                 if(cDoc) {
  2510.                     cid_chatFrameCheck=clearInterval(cid_chatFrameCheck);
  2511.                     resolve();
  2512.                 }else if(!scriptEnable || !isChatExpand() || Date.now() - chatFrame_st > 6750){
  2513.                     cid_chatFrameCheck=clearInterval(cid_chatFrameCheck);
  2514.                 }
  2515.             },60);
  2516.  
  2517.  
  2518.         }).then(()=>new Promise(resolve=>{
  2519.  
  2520.  
  2521.  
  2522.  
  2523.             let timeoutR_ChatAppReady=new Timeout();
  2524.             timeoutR_ChatAppReady.set(()=>{
  2525.     
  2526.                 if(!scriptEnable || !isChatExpand())return false;
  2527.                 let app=chatFrameElement('yt-live-chat-app');
  2528.                 if(!app) return true;
  2529.  
  2530.  
  2531.                 setTimeout(()=>resolve(app),40)
  2532.     
  2533.  
  2534.             },40,150); //40*150 = 6000ms = 6s;
  2535.     
  2536.             
  2537.  
  2538.  
  2539.  
  2540.         })).then(app=>{
  2541.  
  2542.             
  2543.             let cDoc = app.ownerDocument;
  2544.  
  2545.             if(!scriptEnable || !isChatExpand())return;
  2546.             addStyle(`      
  2547.                 body #input-panel.yt-live-chat-renderer::after {
  2548.                     background: transparent;
  2549.                 }
  2550.                 #items.yt-live-chat-item-list-renderer{
  2551.                     contain: content;
  2552.                 }
  2553.                 yt-live-chat-text-message-renderer{
  2554.                     contain: content;
  2555.                 }
  2556.                 #item-offset.yt-live-chat-item-list-renderer{
  2557.                     contain: content;
  2558.                 }
  2559.                 #item-scroller.yt-live-chat-item-list-renderer{
  2560.                     contain: strict;
  2561.                 }
  2562.                 img[width][height]{
  2563.                     contain: strict;
  2564.                 }
  2565.                 #item-list>yt-live-chat-item-list-renderer, #item-list>yt-live-chat-item-list-renderer>#contents{
  2566.                     contain: strict;
  2567.                 }
  2568.                 yt-live-chat-app{
  2569.                     contain: content;
  2570.                 }
  2571.             `, cDoc.documentElement)
  2572.  
  2573.             if(cDoc.querySelector('yt-live-chat-renderer #continuations')){
  2574.                 setTimeout(()=>mtf_ChatExist(),40);
  2575.                 $(document.querySelector('ytd-live-chat-frame#chat')).attr('yt-userscript-iframe-loaded','')
  2576.             }
  2577.  
  2578.             forceDisplayChatReplay();
  2579.  
  2580.  
  2581.             
  2582.  
  2583.  
  2584.  
  2585.         })
  2586.  
  2587.     }
  2588.  
  2589.  
  2590.     function flexyAttrInit(){
  2591.         
  2592.         
  2593.         clearMutationObserver(mtoVs,'mtoFlexyAttr')
  2594.  
  2595.         function toggleFlag(mFlag, b, flag){
  2596.             if(b) mFlag = mFlag | flag; 
  2597.             else mFlag = mFlag & ~flag;
  2598.             return mFlag;
  2599.         }
  2600.  
  2601.         function toLayoutStatus(nls, attributeName){
  2602.  
  2603.             let attrElm, b, v; 
  2604.             switch (attributeName){
  2605.                 case 'theater': 
  2606.                 nls = toggleFlag(nls, isTheater(), LAYOUT_THEATER);
  2607.                 break;
  2608.                 case 'userscript-chat-collapsed': 
  2609.                 case 'userscript-chatblock':
  2610.                     attrElm=kRef(ytdFlexy);
  2611.                     if(hasAttribute(attrElm, 'userscript-chat-collapsed')) {
  2612.                         nls = toggleFlag(nls, true, LAYOUT_CHATROOM | LAYOUT_CHATROOM_COLLASPED);
  2613.                     }else{
  2614.                         nls = toggleFlag(nls, hasAttribute(attrElm, 'userscript-chatblock'), LAYOUT_CHATROOM);
  2615.                         nls = toggleFlag(nls, false, LAYOUT_CHATROOM_COLLASPED);
  2616.                     }
  2617.                 break;
  2618.                 case 'is-two-columns_': 
  2619.                 nls = toggleFlag(nls, isWideScreenWithTwoColumns(), LAYOUT_TWO_COLUMNS);
  2620.                 break;
  2621.  
  2622.                 case 'tabview-selection': 
  2623.                 b = isNonEmptyString( kRef(ytdFlexy).getAttribute('tabview-selection') );
  2624.                 nls = toggleFlag(nls,  b, LAYOUT_TAB_EXPANDED);
  2625.                 break;
  2626.  
  2627.                 case 'fullscreen': 
  2628.                 b = isNonEmptyString( kRef(ytdFlexy).getAttribute('fullscreen') );
  2629.                 nls = toggleFlag(nls, b, LAYOUT_FULLSCREEN);
  2630.                 break;
  2631.  
  2632.                 case 'userscript-engagement-panel': 
  2633.                 v = kRef(ytdFlexy).getAttribute('userscript-engagement-panel');
  2634.                 b = (+v>0)
  2635.                 nls = toggleFlag(nls,  b, LAYOUT_ENGAGEMENT_PANEL_EXPAND);
  2636.                 break;
  2637.  
  2638.             }
  2639.  
  2640.             return nls;
  2641.  
  2642.  
  2643.         }
  2644.  
  2645.         let mtf_attrFlexy=(mutations, observer)=>{
  2646.             
  2647.             if(!scriptEnable)return;
  2648.  
  2649.  
  2650.             const cssElm=kRef(ytdFlexy)
  2651.             if(!cssElm)return;
  2652.  
  2653.             if(!mutations)return;
  2654.  
  2655.             const old_layoutStatus = wls.layoutStatus
  2656.             if(old_layoutStatus === null) return;
  2657.             let new_layoutStatus = old_layoutStatus;
  2658.         
  2659.             for(const mutation of mutations) {
  2660.                 new_layoutStatus=toLayoutStatus(new_layoutStatus, mutation.attributeName);
  2661.                 if (mutation.attributeName == 'userscript-chat-collapsed' || mutation.attributeName == 'userscript-chatblock'){
  2662.  
  2663.                     if( cssElm.getAttribute('userscript-chatblock')==='chat-live' ){
  2664.                         
  2665.                         requestingComments=null;    
  2666.                         _disableComments();
  2667.  
  2668.                     }
  2669.  
  2670.                     if(!cssElm.hasAttribute('userscript-chatblock')){
  2671.                         setTimeout(()=>{
  2672.                             if(!scriptEnable)return;
  2673.                             if(!isAnyActiveTab() && !isChatExpand() && !isTheater() && isWideScreenWithTwoColumns() && !isFullScreen()){
  2674.                                 setToActiveTab();
  2675.                             }
  2676.                         },240);
  2677.                     }
  2678.  
  2679.                 }
  2680.             }
  2681.  
  2682.  
  2683.             if(new_layoutStatus!==old_layoutStatus)  wls.layoutStatus = new_layoutStatus
  2684.  
  2685.  
  2686.  
  2687.  
  2688.         }
  2689.  
  2690.  
  2691.         FOnce.mtf_checkFlexy=()=>{
  2692.             let ytdFlexyElm = kRef(ytdFlexy);
  2693.             if(!scriptEnable || !ytdFlexyElm) return true;
  2694.  
  2695.             const rootElement = Q.mutationTarget || ytdFlexyElm;
  2696.  
  2697.             var flexy=kRef(ytdFlexy)
  2698.             if(!flexy) return true;
  2699.  
  2700.             wls.layoutStatus=null;
  2701.  
  2702.             let rChatExist = base_ChatExist();
  2703.             if(rChatExist){
  2704.                 let {attr_chatblock, attr_chatcollapsed} = rChatExist;
  2705.                 if(attr_chatblock===null) {
  2706.                     //remove attribute if it is unknown
  2707.                     attr_chatblock=false;
  2708.                     attr_chatcollapsed=false;
  2709.                 }
  2710.                 wAttr(flexy, 'userscript-chatblock', attr_chatblock)
  2711.                 wAttr(flexy, 'userscript-chat-collapsed', attr_chatcollapsed)
  2712.             }
  2713.  
  2714.             let rTabSelection = [...flexy.querySelectorAll('.tab-btn[userscript-tab-content]')]
  2715.             .map(elm=>({elm, hidden: elm.classList.contains('tab-btn-hidden') }))
  2716.             .filter(entry=>entry.hidden===true);
  2717.             if(rTabSelection.length===0) wAttr(flexy, 'tabview-selection', false);
  2718.             else if(rTabSelection.length===1) wAttr(flexy, 'tabview-selection', rTabSelection[0].elm.getAttribute('userscript-tab-content')||'');
  2719.  
  2720.             let rEP = engagement_panels_();
  2721.             if(rEP && rEP.count>0) wAttr(flexy, 'userscript-engagement-panel', false);
  2722.             else wAttr(flexy, 'userscript-engagement-panel', rEP.value+"");
  2723.  
  2724.             let ls = 0;
  2725.             ls=toLayoutStatus(ls,'theater')
  2726.             ls=toLayoutStatus(ls,'userscript-chat-collapsed')
  2727.             ls=toLayoutStatus(ls,'userscript-chatblock')
  2728.             ls=toLayoutStatus(ls,'is-two-columns_')
  2729.             ls=toLayoutStatus(ls,'tabview-selection')
  2730.             ls=toLayoutStatus(ls,'fullscreen')
  2731.             ls=toLayoutStatus(ls,'userscript-engagement-panel')
  2732.  
  2733.             wls.layoutStatus=ls
  2734.  
  2735.             initMutationObserver(mtoVs,'mtoFlexyAttr',mtf_attrFlexy).observe(flexy, {          
  2736.                 attributes: true,
  2737.                 attributeFilter: ['userscript-chat-collapsed','userscript-chatblock','theater','is-two-columns_','tabview-selection','fullscreen','userscript-engagement-panel'],
  2738.                 attributeOldValue: true
  2739.             })
  2740.  
  2741.  
  2742.             let columns = document.querySelector('ytd-page-manager#page-manager #columns')
  2743.             if(columns){
  2744.                 wAttr(columns, 'userscript-scrollbar-render', true);
  2745.             }
  2746.  
  2747.             return false;
  2748.         }
  2749.         if(Q.mutationTarget===null) $callOnceAsync('mtf_checkFlexy')
  2750.  
  2751.  
  2752.  
  2753.     }
  2754.  
  2755.  
  2756.  
  2757.  
  2758.     let switchTabActivity_lastTab = null
  2759.  
  2760.     function setDisplayedPlaylist(){
  2761.         //override the default youtube coding event prevention
  2762.         let cssElm=kRef(ytdFlexy);
  2763.         if(!scriptEnable || !cssElm)return;
  2764.         displayedPlaylist=mWeakRef(document.querySelector('ytd-watch-flexy #tab-list:not(.tab-content-hidden) ytd-playlist-panel-renderer') || null);
  2765.     }
  2766.  
  2767.     function switchTabActivity(activeLink) {
  2768.         if(!scriptEnable)return;
  2769.  
  2770.         const ytdFlexyElm=kRef(ytdFlexy);
  2771.  
  2772.         if(!ytdFlexyElm) return;
  2773.  
  2774.         if (activeLink && activeLink.classList.contains('tab-btn-hidden')) return; // not allow to switch to hide tab
  2775.  
  2776.         if(isTheater() && isWideScreenWithTwoColumns()) activeLink=null;
  2777.  
  2778.  
  2779.         function runAtEnd(){
  2780.   
  2781.             if(activeLink) lastShowTab=activeLink.getAttribute('userscript-tab-content')
  2782.  
  2783.             displayedPlaylist=null;
  2784.             scrollingVideosList=null;
  2785.  
  2786.             if(activeLink && lastShowTab == '#tab-list'){
  2787.                 setDisplayedPlaylist();
  2788.             }else if(activeLink && lastShowTab == '#tab-videos'){
  2789.                 scrollingVideosList=mWeakRef(document.querySelector('ytd-watch-flexy #tab-videos:not(.tab-content-hidden) [placeholder-videos]'));
  2790.             }
  2791.  
  2792.         
  2793.             ytdFlexyElm.setAttribute('tabview-selection',activeLink?lastShowTab:'')
  2794.             
  2795.             if(lastShowTab == '#tab-comments' && (ytdFlexyElm.getAttribute('tabview-youtube-comments')||'').lastIndexOf('S')>=0){
  2796.  
  2797.                 akAttr(ytdFlexyElm, 'tabview-youtube-comments',false,'L');
  2798.  
  2799.                 requestAnimationFrame(()=>{
  2800.                     let comments_tab=document.querySelector('#tab-comments');
  2801.                     if(comments_tab && comments_tab.scrollTop>0) comments_tab.scrollTop=0;
  2802.                 });
  2803.  
  2804.             }
  2805.             
  2806.         }
  2807.  
  2808.         const links = document.querySelectorAll('#material-tabs a[userscript-tab-content]');
  2809.  
  2810.  
  2811.         for (const link of links) {
  2812.             let content = document.querySelector(link.getAttribute('userscript-tab-content'));
  2813.             if (link && content) {
  2814.                 if (link !== activeLink) {
  2815.                     link.classList.remove("active");
  2816.                     content.classList.add("tab-content-hidden");
  2817.                 } else {
  2818.                     link.classList.add("active");
  2819.                     content.classList.remove("tab-content-hidden");
  2820.                     //setTimeout(()=>content.focus(),400);
  2821.                     
  2822.                 }
  2823.             }
  2824.         }
  2825.  
  2826.         runAtEnd();
  2827.  
  2828.  
  2829.     }
  2830.  
  2831.     let tabsUiScript_setclick = false;
  2832.  
  2833.     function prepareTabBtn() {
  2834.  
  2835.         const materialTab = document.querySelector("#material-tabs")
  2836.         if (!materialTab) return;
  2837.  
  2838.         let noActiveTab = !!document.querySelector('ytd-watch-flexy[userscript-chatblock]:not([userscript-chat-collapsed])')
  2839.  
  2840.         const activeLink = materialTab.querySelector('a[userscript-tab-content].active:not(.tab-btn-hidden)')
  2841.         if (activeLink) switchTabActivity(noActiveTab ? null : activeLink)
  2842.  
  2843.         if (!tabsUiScript_setclick) {
  2844.             tabsUiScript_setclick = true;
  2845.             $(materialTab).on("click", "a", function(evt) {
  2846.  
  2847.                 let ytdFlexyElm = kRef(ytdFlexy);
  2848.                 if(!scriptEnable || !ytdFlexyElm) return null;
  2849.  
  2850.                 if (!this.hasAttribute('userscript-tab-content')) return;
  2851.  
  2852.  
  2853.                 evt.preventDefault();
  2854.  
  2855.  
  2856.                 if(this.getAttribute('userscript-tab-content')=='#tab-comments' && parseInt(ytdFlexyElm.getAttribute('tabview-youtube-comments')||'')<0){
  2857.                     return;
  2858.                 }
  2859.  
  2860.                 new Promise(requestAnimationFrame).then(() => {
  2861.  
  2862.  
  2863.                     layoutStatusMutex.lockWith(unlock=>{
  2864.  
  2865.                         switchTabActivity_lastTab = this.getAttribute('userscript-tab-content');
  2866.  
  2867.                         let isActiveAndVisible = this.classList.contains('tab-btn') && this.classList.contains('active') && !this.classList.contains('tab-btn-hidden')
  2868.     
  2869.                         if( isWideScreenWithTwoColumns() && !isTheater() && isActiveAndVisible){
  2870.                             //optional
  2871.                             setTimeout(unlock,80);
  2872.                             switchTabActivity(null);
  2873.                             ytBtnSetTheater();
  2874.                         }else if(isActiveAndVisible){
  2875.                             setTimeout(unlock,80);
  2876.                             switchTabActivity(null);
  2877.                         }else{
  2878.                             let pInterval = 60;
  2879.                             if(isChatExpand() && isWideScreenWithTwoColumns()) {
  2880.                                 ytBtnCollapseChat();
  2881.                             }else if(isEngagementPanelExpanded() && isWideScreenWithTwoColumns()){
  2882.                                 ytBtnCloseEngagementPanels();
  2883.                             }else if(isWideScreenWithTwoColumns() && isTheater() && !isFullScreen() ){
  2884.                                 ytBtnCancelTheater();
  2885.                             }else{
  2886.                                 pInterval=20;
  2887.                             }
  2888.                             setTimeout(()=>{
  2889.                                 setTimeout(makeBodyScroll,20); // this is to make the image render
  2890.     
  2891.                                 setTimeout(()=>{
  2892.                                     let rightTabs=document.querySelector('#right-tabs');
  2893.                                     if(!isWideScreenWithTwoColumns() && rightTabs && rightTabs.offsetTop>0 && this.classList.contains('active')){
  2894.                                         let tabButtonBar = document.querySelector('#material-tabs');
  2895.                                         let tabButtonBarHeight = tabButtonBar?tabButtonBar.offsetHeight:0;
  2896.                                         window.scrollTo(0, rightTabs.offsetTop-tabButtonBarHeight);
  2897.                                     }
  2898.                                 },60)
  2899.     
  2900.                                 setTimeout(unlock,80)
  2901.                                 switchTabActivity(this)
  2902.     
  2903.                             }, pInterval);
  2904.                         }
  2905.     
  2906.     
  2907.                     })
  2908.  
  2909.                 })
  2910.  
  2911.                 
  2912.  
  2913.                 
  2914.             });
  2915.  
  2916.         }
  2917.  
  2918.     }
  2919.  
  2920.  
  2921.     // ---------------------------------------------------------------------------------------------
  2922.     window.addEventListener("yt-navigate-finish", onNavigationEnd)
  2923.     
  2924.     document.addEventListener("loadstart",(evt)=>{
  2925.         if(!evt || !evt.target || evt.target.nodeName!=="VIDEO")return;
  2926.         let elm = evt.target;
  2927.         if(!elm.matches('#player video, #movie_player video, video[tabview-mainvideo]'))return;
  2928.         
  2929.         let src = elm.src;
  2930.         if(src!==lastVideoURL){
  2931.             lastVideoURL = elm.src;
  2932.  
  2933.             elm.setAttribute('tabview-mainvideo', ''); // mainly for mini playing
  2934.  
  2935.  
  2936.         }
  2937.  
  2938.     }, true)
  2939.  
  2940.     // ---------------------------------------------------------------------------------------------
  2941.  
  2942.     var scrolling_lastD = 0;
  2943.  
  2944.     const singleColumnScrolling = function(scrolling_lastF) {
  2945.         let pageY = pageYOffset;
  2946.         if (pageY < 10 && scrolling_lastD === 0 && !scrolling_lastF) return;
  2947.  
  2948.         let targetElm, header, navElm;
  2949.  
  2950.         Promise.resolve().then(() => {
  2951.  
  2952.             targetElm = document.querySelector("#right-tabs");
  2953.             if (!targetElm) return;
  2954.             header = targetElm.querySelector("header");
  2955.             if (!header) return;
  2956.             navElm = document.querySelector('#masthead-container, #masthead')
  2957.             if (!navElm) return;
  2958.             let navHeight = navElm ? navElm.offsetHeight : 0
  2959.  
  2960.             let elmY = targetElm.offsetTop
  2961.  
  2962.             let xyz = [elmY + navHeight, pageY, elmY - navHeight]
  2963.  
  2964.             let xyStatus = 0
  2965.             if (xyz[1] < xyz[2] && xyz[2] < xyz[0]) {
  2966.                 // 1
  2967.                 xyStatus = 1
  2968.             }
  2969.  
  2970.             if (xyz[0] > xyz[1] && xyz[1] > xyz[2]) {
  2971.  
  2972.                 //2
  2973.                 xyStatus = 2
  2974.  
  2975.             }
  2976.  
  2977.             if (xyz[2] < xyz[0] && xyz[0] < xyz[1]) {
  2978.                 // 3
  2979.  
  2980.                 xyStatus = 3
  2981.  
  2982.  
  2983.             }
  2984.  
  2985.             return xyStatus;
  2986.  
  2987.         }).then((xyStatus) => {
  2988.  
  2989.             if ((xyStatus == 2 || xyStatus == 3) && (scrolling_lastD === 0 || scrolling_lastF)) {
  2990.                 scrolling_lastD = 1;
  2991.                 let {
  2992.                     offsetHeight
  2993.                 } = header
  2994.                 let {
  2995.                     offsetWidth
  2996.                 } = targetElm
  2997.  
  2998.                 targetElm.style.setProperty("--userscript-sticky-width", offsetWidth + 'px')
  2999.                 targetElm.style.setProperty("--userscript-sticky", offsetHeight + 'px')
  3000.                 
  3001.                 wAttr(targetElm, 'userscript-sticky', true);
  3002.  
  3003.             } else if ((xyStatus == 1) && (scrolling_lastD === 1 || scrolling_lastF)) {
  3004.                 scrolling_lastD = 0;
  3005.  
  3006.                 wAttr(targetElm, 'userscript-sticky', false);
  3007.             }
  3008.  
  3009.  
  3010.             targetElm = null;
  3011.             header = null;
  3012.             navElm = null;
  3013.  
  3014.         });
  3015.  
  3016.     };
  3017.  
  3018.     window.addEventListener("scroll", function() {
  3019.         if(!scriptEnable)return;
  3020.         singleColumnScrolling(false)
  3021.     }, {
  3022.         capture: false,
  3023.         passive: true
  3024.     })
  3025.  
  3026.     var lastResizeAt=0;
  3027.     window.addEventListener('resize', function() {
  3028.         if(!scriptEnable)return;
  3029.         lastResizeAt= Date.now();
  3030.  
  3031.         requestAnimationFrame(() => {
  3032.             if(!scriptEnable)return;
  3033.             singleColumnScrolling(true)
  3034.         })
  3035.  
  3036.     }, {
  3037.         capture: false,
  3038.         passive: true
  3039.     })
  3040.  
  3041.     window.addEventListener('beforeunload', function() {
  3042.         if(!scriptEnable)return;
  3043.         console.log('beforeunload')
  3044.         pluginUnhook();
  3045.         //let video=document.querySelector('video');
  3046.         //if(video && !video.paused) video.pause(); 
  3047.     }, {capture: true})
  3048.  
  3049.     window.addEventListener('hashchange', function() { 
  3050.         if(!scriptEnable)return;
  3051.         console.log('hashchange')
  3052.         pluginUnhook();
  3053.     }, {capture: true})
  3054.     
  3055.     window.addEventListener('popstate', function() { 
  3056.         if(!scriptEnable)return;
  3057.         console.log('popstate')
  3058.         pluginUnhook();
  3059.     }, {capture: true})
  3060.  
  3061.  
  3062.     function clearMutationObserver(o, key){
  3063.         if(o[key]) {
  3064.             o[key].takeRecords();
  3065.             o[key].disconnect();
  3066.             o[key]=null;
  3067.             return true;
  3068.         }
  3069.     }
  3070.  
  3071.     function initMutationObserver(o, key, callback){
  3072.         clearMutationObserver(o,key);
  3073.         const mto = new MutationObserver(callback);
  3074.         o[key] = mto;
  3075.         return mto;
  3076.     }
  3077.  
  3078.     document.addEventListener('wheel',function(evt){
  3079.         
  3080.         if(!scriptEnable)return;
  3081.         const displayedPlaylist_element = kRef(displayedPlaylist);
  3082.         if(displayedPlaylist_element && displayedPlaylist_element.contains(evt.target)){
  3083.             evt.stopPropagation();
  3084.             evt.stopImmediatePropagation();
  3085.         }
  3086.     },{capture:true,passive:true});
  3087.  
  3088.  
  3089.     function setVideosTwoColumns(flag, bool){
  3090.  
  3091.     //two columns to one column
  3092.  
  3093.     /*
  3094.         [placeholder-videos] ytd-watch-next-secondary-results-renderer.style-scope.ytd-watch-flexy
  3095.  
  3096.         is-two-columns =""  => no is-two-columns
  3097.         
  3098.         
  3099.         
  3100.         [placeholder-videos] tp-yt-paper-spinner#spinner.style-scope.ytd-continuation-item-renderer
  3101.         
  3102.         no hidden => hidden =""
  3103.         
  3104.         
  3105.         [placeholder-videos] div#button.style-scope.ytd-continuation-item-renderer
  3106.         
  3107.         
  3108.         hidden ="" => no hidden
  3109.         
  3110.  
  3111.         */
  3112.  
  3113.         let cssSelector1='[placeholder-videos] ytd-watch-next-secondary-results-renderer.style-scope.ytd-watch-flexy'
  3114.  
  3115.         let cssSelector2='[placeholder-videos] tp-yt-paper-spinner#spinner.style-scope.ytd-continuation-item-renderer'
  3116.  
  3117.         let cssSelector3='[placeholder-videos] div#button.style-scope.ytd-continuation-item-renderer'
  3118.  
  3119.         let res={}
  3120.         if(flag&1){
  3121.             res.m1=document.querySelector(cssSelector1)
  3122.             if(res.m1) wAttr(res.m1, 'is-two-columns', bool?'':false);
  3123.         }
  3124.  
  3125.         if(flag&2){
  3126.             res.m2=document.querySelector(cssSelector2)
  3127.             if(res.m2) wAttr(res.m2, 'hidden', bool?false:'');
  3128.         }
  3129.  
  3130.         if(flag&4){
  3131.             res.m3=document.querySelector(cssSelector3)
  3132.             if(res.m3) wAttr(res.m3, 'hidden', bool?'':false);
  3133.         }
  3134.  
  3135.  
  3136.         return res
  3137.         
  3138.         
  3139.         
  3140.  
  3141.  
  3142.     }
  3143.  
  3144.     let lastScrollFetch=0;
  3145.     // function isScrolledToEnd(){
  3146.     //     return (window.innerHeight + window.pageYOffset) >= document.scrollingElement.scrollHeight - 2;
  3147.     // }
  3148.     let lastOffsetTop = 0;
  3149.     window.addEventListener('scroll',function(evt){
  3150.  
  3151.         //console.log(evt.target)
  3152.  
  3153.         if(!scriptEnable)return;
  3154.  
  3155.  
  3156.         if( !kRef(scrollingVideosList) ) return;
  3157.         if( videoListBeforeSearch ) return;
  3158.  
  3159.  
  3160.  
  3161.         let visibleHeight = document.scrollingElement.clientHeight;
  3162.         let totalHeight = document.scrollingElement.scrollHeight;
  3163.  
  3164.         if(totalHeight<visibleHeight*1.5)return; // filter out two column view;
  3165.  
  3166.         let z = window.pageYOffset + visibleHeight;
  3167.         let h_advanced = totalHeight - ( visibleHeight > 5*40 ? visibleHeight*0.5 : 40 );
  3168.  
  3169.  
  3170.  
  3171.         if(z>h_advanced && !isWideScreenWithTwoColumns() ){
  3172.  
  3173.             let ct = Date.now();
  3174.             if(ct -  lastScrollFetch<500) return; //prevent continuous calling
  3175.  
  3176.             lastScrollFetch=ct;
  3177.         
  3178.             let res= setVideosTwoColumns(2|4, true)
  3179.             if(res.m3 && res.m2){
  3180.  
  3181.                 //wait for DOM change, just in case
  3182.                 requestAnimationFrame(()=>{
  3183.                     let {offsetTop}=res.m2  // as visibility of m2 & m3 switched.
  3184.  
  3185.                     if(offsetTop-lastOffsetTop<40) return; // in case bug, or repeating calling.  // the next button shall below the this button 
  3186.                     lastOffsetTop= offsetTop
  3187.  
  3188.                     res.m2.parentNode.dispatchEvent(new Event('yt-service-request-sent-button-renderer'))
  3189.             
  3190.                     res= null
  3191.                 }) 
  3192.  
  3193.             }else{
  3194.                 
  3195.                 res= null
  3196.             }
  3197.  
  3198.  
  3199.         }
  3200.  
  3201.  
  3202.  
  3203.  
  3204.     },{passive:true})
  3205.  
  3206.  
  3207.     /* --------------------------- browser's bug in -webkit-box ----------------------------------------- */
  3208.     document.addEventListener('scroll',function(){
  3209.         let css = `ytd-expander[should-use-number-of-lines][collapsed] > #content.ytd-expander:not([tabview-webkitbox-linefix])`;
  3210.         setTimeout(function(){  // less priority 
  3211.             requestAnimationFrame(function(){  // only active tab
  3212.                 for(const elm of document.querySelectorAll(css)){
  3213.                     elm.setAttribute('tabview-webkitbox-linefix','')  // force render to eliminate the browser bug
  3214.                 }
  3215.             });
  3216.         },40);
  3217.     },true);
  3218.     /* --------------------------- browser's bug in -webkit-box ----------------------------------------- */
  3219.  
  3220.  
  3221.  
  3222.  
  3223. })();
  3224.  
  3225.  
  3226.  
  3227.  
  3228.  
  3229.  
  3230.  
  3231.  
  3232.  
  3233.  
  3234.  
  3235.  
  3236.  
  3237.  
  3238.  
  3239.  
  3240.  
  3241.  
  3242.  
  3243.  
  3244.  
  3245.  
  3246.  
  3247.  
  3248.  
  3249.  
  3250.  
  3251.  
  3252.  
  3253.  
  3254.  
  3255.  
  3256.  
  3257.  
  3258.  
  3259.  
  3260.  
  3261.  
  3262.     // https://github.com/cyfung1031/Tabview-Youtube/raw/main/js/content.js
  3263.  
  3264. }
  3265.  
  3266.  
  3267. ;!(function $$() {
  3268.     'use strict';
  3269.  
  3270.     if(document.documentElement==null) return window.requestAnimationFrame($$)
  3271.  
  3272. var cssTxt = GM_getResourceText("contentCSS");
  3273.  
  3274. function addStyle (styleText) {
  3275.   const styleNode = document.createElement('style');
  3276.   styleNode.type = 'text/css';
  3277.   styleNode.textContent = styleText;
  3278.   document.documentElement.appendChild(styleNode);
  3279.   return styleNode;
  3280. }
  3281.  
  3282.  
  3283. addStyle (cssTxt);
  3284.  
  3285.     main(window.$);
  3286.  
  3287.  
  3288.     // Your code here...
  3289. })();