☰

YouTube: Floating Chat Window on Fullscreen

在全屏上显示浮动聊天窗口

  1. // ==UserScript==
  2. // @name                YouTube: Floating Chat Window on Fullscreen
  3. // @namespace           UserScript
  4. // @version             0.5.5
  5. // @license             MIT License
  6. // @author              CY Fung
  7. // @match               https://www.youtube.com/*
  8. // @exclude             /^https?://\S+\.(txt|png|jpg|jpeg|gif|xml|svg|manifest|log|ini)[^\/]*$/
  9. // @require             https://cdn.jsdelivr.net/gh/cyfung1031/userscript-supports@5d83d154956057bdde19e24f95b332cb9a78fcda/library/default-trusted-type-policy.js
  10. // @require             https://cdn.jsdelivr.net/gh/cyfung1031/userscript-supports@8fac46500c5a916e6ed21149f6c25f8d1c56a6a3/library/ytZara.js
  11. // @run-at              document-start
  12. // @grant               none
  13. // @unwrap
  14. // @allFrames           true
  15. // @inject-into         page
  16. // @description         To make a floating chat window on fullscreen
  17. // @description:ja      フルスクリーンで浮動チャットウィンドウを表示する
  18. // @description:zh-TW   在全螢幕上顯示浮動聊天視窗
  19. // @description:zh-CN   在全屏上显示浮动聊天窗口
  20. // ==/UserScript==
  21.  
  22.  
  23. ((__CONTEXT__) => {
  24.  
  25.     let activeStyle = false;
  26.  
  27.     let _lastStyleText = null;
  28.     let tvc = 0;
  29.  
  30.     const insp = o => o ? (o.polymerController || o.inst || o || 0) : (o || 0);
  31.  
  32.     let c27 = 0;
  33.     let mouseDownActiveElement = null;
  34.  
  35.     /** @type {globalThis.PromiseConstructor} */
  36.     const Promise = (async () => { })().constructor; // YouTube hacks Promise in WaterFox Classic and "Promise.resolve(0)" nevers resolve.
  37.  
  38.  
  39.     const HTMLElement_ = HTMLElement;
  40.  
  41.     /**
  42.      *  @param {Element} elm
  43.      * @param {string} selector
  44.      * @returns {Element | null}
  45.      *  */
  46.     const qsOne = (elm, selector) => {
  47.         return HTMLElement_.prototype.querySelector.call(elm, selector);
  48.     }
  49.  
  50.     /**
  51.      *  @param {Element} elm
  52.      * @param {string} selector
  53.      * @returns {NodeListOf<Element>}
  54.      *  */
  55.     const qsAll = (elm, selector) => {
  56.         return HTMLElement_.prototype.querySelectorAll.call(elm, selector);
  57.     }
  58.  
  59.  
  60.     const win = typeof unsafeWindow !== 'undefined' ? unsafeWindow : (this instanceof Window ? this : window);
  61.  
  62.     const hkey_script = 'vdnvorrwsksy';
  63.     if (win[hkey_script]) throw new Error('Duplicated Userscript Calling'); // avoid duplicated scripting
  64.     win[hkey_script] = true;
  65.  
  66.     document.addEventListener('click', function (evt) {
  67.  
  68.         if (!document.fullscreenElement) return;
  69.  
  70.         let byPass = false;
  71.  
  72.         if (Date.now() - c27 < 40) {
  73.             byPass = true;
  74.         } else {
  75.             return;
  76.         }
  77.  
  78.         if (evt.target && evt.target.id === 'chat' && evt.target.nodeName.toLowerCase() === 'ytd-live-chat-frame') byPass = false;
  79.         else if (evt.target && evt.target.nodeName.toLowerCase() === 'iframe') byPass = false;
  80.  
  81.         if (byPass) {
  82.             evt.stopPropagation();
  83.             evt.stopImmediatePropagation();
  84.             c27 = Date.now();
  85.         }
  86.         c27 = 0;
  87.  
  88.     }, { capture: true, passive: false });
  89.  
  90.     document.addEventListener('mousedown', function (evt) {
  91.  
  92.         if (!document.fullscreenElement) return;
  93.         let byPass = false;
  94.         const activeElement = document.activeElement || 0;
  95.         mouseDownActiveElement = null;
  96.         if (activeElement.nodeName === 'IFRAME') {
  97.             if (activeElement.matches('[floating-chat-window]:fullscreen ytd-live-chat-frame#chat:not([collapsed]) iframe')) {
  98.                 byPass = true;
  99.                 mouseDownActiveElement = activeElement;
  100.             }
  101.         }
  102.  
  103.         if (evt.target && evt.target.id === 'chat' && evt.target.nodeName.toLowerCase() === 'ytd-live-chat-frame') byPass = false;
  104.         else if (evt.target && evt.target.nodeName.toLowerCase() === 'iframe') byPass = false;
  105.  
  106.  
  107.         if (byPass) {
  108.  
  109.             evt.stopPropagation();
  110.             evt.stopImmediatePropagation();
  111.             c27 = Date.now();
  112.         } else {
  113.             mouseDownActiveElement = null;
  114.         }
  115.         c27 = 0;
  116.  
  117.  
  118.  
  119.     }, { capture: true, passive: false });
  120.     document.addEventListener('mouseup', function (evt) {
  121.  
  122.         if (!document.fullscreenElement) return;
  123.         let mde = mouseDownActiveElement;
  124.         mouseDownActiveElement = null;
  125.  
  126.         if (!mde) return;
  127.  
  128.         let byPass = false;
  129.         const activeElement = mde || 0;
  130.         if (activeElement.nodeName === 'IFRAME') {
  131.             if (activeElement.matches('[floating-chat-window]:fullscreen ytd-live-chat-frame#chat:not([collapsed]) iframe')) {
  132.                 byPass = true;
  133.             }
  134.         }
  135.  
  136.         // if(Date.now()-c27 < 40 ) byPass = true;
  137.         c27 = 0;
  138.  
  139.         if (evt.target && evt.target.id === 'chat' && evt.target.nodeName.toLowerCase() === 'ytd-live-chat-frame') byPass = false;
  140.         else if (evt.target && evt.target.nodeName.toLowerCase() === 'iframe') byPass = false;
  141.  
  142.         if (byPass) {
  143.             evt.stopPropagation();
  144.             evt.stopImmediatePropagation();
  145.             c27 = Date.now();
  146.         }
  147.  
  148.     }, { capture: true, passive: false });
  149.  
  150.     const svgDefs = () => `
  151.         <svg version="1.1" xmlns="//www.w3.org/2000/svg" xmlns:xlink="//www.w3.org/1999/xlink" style="display:none;">
  152.             <defs>
  153.             <filter id="stroke-text-svg-filter-03">
  154.  
  155.                 <feColorMatrix type="matrix" in="SourceGraphic" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 1 0" result="white-text"/>
  156.                 <feMorphology in="white-text" result="DILATED" operator="dilate" radius="2"></feMorphology>
  157.                 <feFlood flood-color="transparent" flood-opacity="1" result="PINK" id="floodColor-03"></feFlood>
  158.                 <feComposite in="PINK" in2="DILATED" operator="in" result="OUTLINE"></feComposite>
  159.                 <feMerge>
  160.                 <feMergeNode in="OUTLINE" />
  161.                 <feMergeNode in="SourceGraphic" />
  162.                 </feMerge>
  163.             </filter>
  164.                 <filter id="stroke-text-svg-filter-04">
  165.                     <feMorphology operator="dilate" radius="2"></feMorphology>
  166.                     <feComposite operator="xor" in="SourceGraphic"/>
  167.                 </filter>
  168.             </defs>
  169.  
  170.         </svg>
  171.     `.trim();
  172.  
  173.  
  174.     const createStyleTextForTopWin = () => `
  175.         [floating-chat-window]:fullscreen ytd-live-chat-frame#chat:not([collapsed]) {
  176.         position:fixed !important;
  177.             top: var(--f3-top, 5px) !important;
  178.             left: var(--f3-left, calc(60vw + 100px)) !important;
  179.             height: var(--f3-h, 60vh) !important;
  180.             width: var(--f3-w, 320px) !important;
  181.             display:flex !important;
  182.             flex-direction: column !important;
  183.             padding: 4px;
  184.             cursor: all-scroll;
  185.             z-index:9999;
  186.             box-sizing: border-box !important;
  187.             margin:0 !important;
  188.             opacity: var(--floating-window-opacity, 1.0) !important;
  189.             background: transparent;
  190.             background-color: rgba(0, 0, 0, 0.5);
  191.             transition: background-color 300ms;
  192.         }
  193.     
  194.         [floating-chat-window]:fullscreen ytd-live-chat-frame#chat:not([collapsed]):hover {
  195.             background-color: rgba(0, 0, 0, 0.85);
  196.     
  197.         }
  198.     
  199.         .no-floating[floating-chat-window]:fullscreen ytd-live-chat-frame#chat:not([collapsed]) {
  200.             top: -300vh !important;
  201.             left: -300vh !important;
  202.         }
  203.     
  204.         [floating-chat-window]:fullscreen ytd-live-chat-frame#chat:not([collapsed]) #show-hide-button[class]{
  205.             flex-grow: 0;
  206.             flex-shrink:0;
  207.             position:static;
  208.             cursor: all-scroll;
  209.         }
  210.         [floating-chat-window]:fullscreen ytd-live-chat-frame#chat:not([collapsed]) #show-hide-button[class] *[class]{
  211.             cursor: inherit;
  212.         }
  213.         [floating-chat-window]:fullscreen ytd-live-chat-frame#chat:not([collapsed]) iframe[class]{
  214.             flex-grow: 100;
  215.             flex-shrink:0;
  216.             height: 0;
  217.             position:static;
  218.         }
  219.     
  220.         html{
  221.             --fc7-handle-color: #0cb8da;
  222.         }
  223.         html[dark]{
  224.             --fc7-handle-color: #0c74e4;
  225.         }
  226.     
  227.         :fullscreen .resize-handle {
  228.     
  229.             position: absolute !important;
  230.             top: 0;
  231.             left: 0;
  232.             bottom: 0;
  233.             background: transparent;
  234.             right: 0;
  235.             z-index: 999 !important;
  236.             border-radius: inherit !important;
  237.             box-sizing: border-box !important;
  238.             pointer-events:none !important;
  239.             visibility: collapse;
  240.             border: 4px solid transparent;
  241.             border-color: transparent;
  242.             transition: border-color 300ms;
  243.         }
  244.     
  245.         [floating-chat-window]:fullscreen ytd-live-chat-frame#chat:not([collapsed]):hover .resize-handle {
  246.     
  247.             visibility: visible;
  248.     
  249.             border-color: var(--fc7-handle-color);
  250.         }
  251.     
  252.         [moving] {
  253.             cursor: all-scroll;
  254.             --pointer-events:initial;
  255.         }
  256.     
  257.         [moving] body {
  258.             --pointer-events:none;
  259.         }
  260.     
  261.         [moving] ytd-live-chat-frame#chat{
  262.             --pointer-events:initial;
  263.         }
  264.     
  265.         [moving] ytd-live-chat-frame#chat iframe {
  266.             --pointer-events:none;
  267.         }
  268.     
  269.         [moving="move"]  ytd-live-chat-frame#chat {
  270.             background-color: var(--yt-spec-general-background-a);
  271.         }
  272.     
  273.         [moving="move"] ytd-live-chat-frame#chat iframe {
  274.             visibility: collapse;
  275.         }
  276.     
  277.         [moving] * {
  278.             pointer-events:var(--pointer-events) !important;
  279.     
  280.         }
  281.         [moving] *, [moving] [class] {
  282.             user-select: none !important;
  283.         }
  284.     
  285.         :fullscreen tyt-iframe-popup-btn {
  286.             display: none !important;
  287.         }
  288.     
  289.         [moving] tyt-iframe-popup-btn {
  290.             display: none !important;
  291.         }
  292.     
  293.         [floating-chat-window]:fullscreen ytd-live-chat-frame#chat:not([collapsed]) #show-hide-button.ytd-live-chat-frame>ytd-toggle-button-renderer.ytd-live-chat-frame {
  294.             background: transparent;
  295.         }
  296.  
  297.         :fullscreen ytd-live-chat-frame#chat:not([collapsed]) {
  298.             --chat-show-button-display: block;
  299.             --chat-show-text-display: none;
  300.             --chat-show-btn-text: 'ϞϞϞϞϞϞϞϞϞϞϞ';
  301.         }
  302.     
  303.         :fullscreen ytd-live-chat-frame#chat:not([collapsed]) [is-show-button] [role="text"] {
  304.             display: var(--chat-show-text-display);
  305.         }
  306.     
  307.         :fullscreen ytd-live-chat-frame#chat:not([collapsed]) [is-show-button] button::before {
  308.             content: var(--chat-show-btn-text);
  309.         }
  310.  
  311.         :fullscreen ytd-live-chat-frame#chat:not([collapsed]) [is-show-button][hidden] {
  312.             display: var(--chat-show-button-display) !important;
  313.         }
  314.     `;
  315.  
  316.     const createStyleTextForIframe = () => `
  317.         .youtube-floating-chat-iframe yt-live-chat-docked-message#docked-messages.style-scope.yt-live-chat-item-list-renderer {
  318.             margin-top:var(--fc7-top-banner-mt);
  319.             transition: margin-top 180ms;
  320.         }
  321.     
  322.         .youtube-floating-chat-iframe yt-live-chat-banner-manager#live-chat-banner.style-scope.yt-live-chat-item-list-renderer {
  323.             margin-top:var(--fc7-top-banner-mt);
  324.             transition: margin-top 180ms;
  325.         }
  326.     
  327.         .youtube-floating-chat-iframe #action-panel.style-scope.yt-live-chat-renderer {
  328.             position: fixed;
  329.             top: 50%;
  330.             transform: translateY(-50%);
  331.         }
  332.     
  333.         .youtube-floating-chat-iframe yt-live-chat-header-renderer.style-scope.yt-live-chat-renderer {
  334.             position: relative;
  335.             z-index: 8;
  336.             background: rgb(0,0,0);
  337.             visibility: var(--fc7-panel-visibility);
  338.         }
  339.     
  340.         .youtube-floating-chat-iframe #chat-messages.style-scope.yt-live-chat-renderer.iron-selected > #contents.style-scope.yt-live-chat-renderer {
  341.             position: fixed;
  342.             z-index: 4;
  343.             top: 0;
  344.             bottom: 0;
  345.             left: 0;
  346.             right: 0;
  347.         }
  348.     
  349.         .youtube-floating-chat-iframe #right-arrow-container.yt-live-chat-ticker-renderer,
  350.         .youtube-floating-chat-iframe #left-arrow-container.yt-live-chat-ticker-renderer
  351.         {
  352.             background: transparent;
  353.         }
  354.     
  355.         .youtube-floating-chat-iframe yt-live-chat-renderer.yt-live-chat-app {
  356.             --yt-live-chat-background-color: transparent;
  357.             --yt-live-chat-action-panel-background-color: rgba(0, 0, 0, 0.08);
  358.             --yt-live-chat-header-background-color: rgba(0, 0, 0, 0.18);
  359.             --yt-spec-static-overlay-background-medium: rgba(0, 0, 0, 0.08);
  360.             --yt-live-chat-banner-gradient-scrim: transparent;
  361.         }
  362.     
  363.         .youtube-floating-chat-iframe{
  364.             --fc7-top-banner-mt: 0px;
  365.             --fc7-banner-opacity: 0.86;
  366.             --fc7-system-message-opacity: 0.66;
  367.             --fc7-system-message-opacity2: 0.66;
  368.             --fc7-panel-display: none;
  369.             --fc7-panel-visibility: collapse;
  370.             --fc7-panel-position: absolute;
  371.         }
  372.  
  373.         .youtube-floating-chat-iframe:focus-within,
  374.         html:focus-within,
  375.         body:focus-within,
  376.         yt-live-chat-app:focus-within,
  377.         yt-live-chat-renderer.yt-live-chat-app:focus-within
  378.         {
  379.             --fc7-top-banner-mt: 56px;
  380.             --fc7-banner-opacity: 1.0;
  381.             --fc7-system-message-opacity: 1.0;
  382.             --fc7-system-message-opacity2: 1.00;
  383.             --fc7-panel-display: invalid;
  384.             --fc7-panel-visibility: invalid;
  385.             --fc7-panel-position: absolute;
  386.         }
  387.     
  388.         .youtube-floating-chat-iframe yt-live-chat-app:hover {
  389.             --fc7-top-banner-mt: 56px;
  390.             --fc7-banner-opacity: 1.0;
  391.             --fc7-system-message-opacity: 1.0;
  392.             --fc7-system-message-opacity2: 1.00;
  393.             --fc7-panel-display: invalid;
  394.             --fc7-panel-visibility: invalid;
  395.             --fc7-panel-position: absolute;
  396.         }
  397.     
  398.     
  399.         .youtube-floating-chat-iframe yt-live-chat-renderer.yt-live-chat-app #visible-banners > yt-live-chat-banner-renderer {
  400.             opacity: var(--fc7-banner-opacity) !important;
  401.         }
  402.     
  403.     
  404.         .youtube-floating-chat-iframe yt-live-chat-renderer.yt-live-chat-app yt-live-chat-viewer-engagement-message-renderer {
  405.             opacity: var(--fc7-system-message-opacity) !important;
  406.         }
  407.     
  408.     
  409.         .youtube-floating-chat-iframe yt-live-chat-app yt-live-chat-renderer.yt-live-chat-app yt-live-chat-message-input-renderer {
  410.         visibility: var(--fc7-panel-visibility);
  411.         position: var(--fc7-panel-position);
  412.     
  413.             transform: translateY(-100%);
  414.             left: 0;
  415.             right: 0;
  416.             opacity: 1;
  417.             background: rgba(0,0,0,0.86);
  418.         }
  419.     
  420.     
  421.         /* hide message with input panel hidden */
  422.         .youtube-floating-chat-iframe yt-live-chat-app > tp-yt-iron-dropdown.yt-live-chat-app yt-tooltip-renderer[slot="dropdown-content"][position-type="OPEN_POPUP_POSITION_TOP"].yt-live-chat-app {
  423.             visibility: var(--fc7-panel-visibility);
  424.         }
  425.     
  426.     
  427.     
  428.     
  429.         [dark].youtube-floating-chat-iframe yt-live-chat-app ::-webkit-scrollbar-track,
  430.         [dark].youtube-floating-chat-iframe yt-live-chat-kevlar-container ::-webkit-scrollbar-track {
  431.             background-color: var(--ytd-searchbox-legacy-button-color);
  432.         }
  433.     
  434.         .youtube-floating-chat-iframe yt-live-chat-app ::-webkit-scrollbar-track,
  435.         .youtube-floating-chat-iframe yt-live-chat-kevlar-container ::-webkit-scrollbar-track {
  436.             background-color: #fcfcfc;
  437.         }
  438.     
  439.     
  440.         [dark].youtube-floating-chat-iframe yt-live-chat-app ::-webkit-scrollbar-thumb,
  441.         [dark].youtube-floating-chat-iframe yt-live-chat-kevlar-container ::-webkit-scrollbar-thumb{
  442.     
  443.             background-color: var(--ytd-searchbox-legacy-button-color);
  444.             border: 2px solid var(--ytd-searchbox-legacy-button-color);
  445.     
  446.         }
  447.     
  448.     
  449.     
  450.         .youtube-floating-chat-iframe yt-live-chat-renderer[has-action-panel-renderer] #action-panel.yt-live-chat-renderer {
  451.             --yt-live-chat-action-panel-gradient-scrim: transparent;
  452.         }
  453.     
  454.     
  455.         .youtube-floating-chat-iframe yt-live-chat-renderer[has-action-panel-renderer] #action-panel.yt-live-chat-renderer yt-live-chat-action-panel-renderer {
  456.             opacity: var(--fc7-system-message-opacity2) !important;
  457.         }
  458.     
  459.     `;
  460.  
  461.     const { isIframe, isTopFrame } = (() => {
  462.  
  463.         let isIframe = false, isTopFrame = false;
  464.         try {
  465.             isIframe = window.document !== top.document
  466.         } catch (e) { }
  467.  
  468.         try {
  469.             isTopFrame = window.document === top.document
  470.         } catch (e) { }
  471.  
  472.         return { isIframe, isTopFrame };
  473.  
  474.     })();
  475.  
  476.     if (isIframe ^ isTopFrame) { } else return;
  477.  
  478.     const addCSS = (createStyleText) => {
  479.         let text = createStyleText();
  480.         let style = document.createElement('style');
  481.         style.id = 'rvZ0t';
  482.         style.textContent = text;
  483.         document.head.appendChild(style);
  484.     }
  485.  
  486.     const cleanContext = async (win) => {
  487.         const waitFn = requestAnimationFrame; // shall have been binded to window
  488.         try {
  489.             let mx = 16; // MAX TRIAL
  490.             const frameId = 'vanillajs-iframe-v1'
  491.             let frame = document.getElementById(frameId);
  492.             let removeIframeFn = null;
  493.             if (!frame) {
  494.                 frame = document.createElement('iframe');
  495.                 frame.id = 'vanillajs-iframe-v1';
  496.                 frame.sandbox = 'allow-same-origin'; // script cannot be run inside iframe but API can be obtained from iframe
  497.                 let n = document.createElement('noscript'); // wrap into NOSCRPIT to avoid reflow (layouting)
  498.                 n.appendChild(frame);
  499.                 while (!document.documentElement && mx-- > 0) await new Promise(waitFn); // requestAnimationFrame here could get modified by YouTube engine
  500.                 const root = document.documentElement;
  501.                 root.appendChild(n); // throw error if root is null due to exceeding MAX TRIAL
  502.                 removeIframeFn = (setTimeout) => {
  503.                     const removeIframeOnDocumentReady = (e) => {
  504.                         e && win.removeEventListener("DOMContentLoaded", removeIframeOnDocumentReady, false);
  505.                         win = null;
  506.                         setTimeout(() => {
  507.                             n.remove();
  508.                             n = null;
  509.                         }, 200);
  510.                     }
  511.                     if (document.readyState !== 'loading') {
  512.                         removeIframeOnDocumentReady();
  513.                     } else {
  514.                         win.addEventListener("DOMContentLoaded", removeIframeOnDocumentReady, false);
  515.                     }
  516.                 }
  517.             }
  518.             while (!frame.contentWindow && mx-- > 0) await new Promise(waitFn);
  519.             const fc = frame.contentWindow;
  520.             if (!fc) throw "window is not found."; // throw error if root is null due to exceeding MAX TRIAL
  521.             const { requestAnimationFrame, setTimeout } = fc;
  522.             const res = { requestAnimationFrame, setTimeout };
  523.             for (let k in res) res[k] = res[k].bind(win); // necessary
  524.             if (removeIframeFn) Promise.resolve(res.setTimeout).then(removeIframeFn);
  525.             return res;
  526.         } catch (e) {
  527.             console.warn(e);
  528.             return null;
  529.         }
  530.     };
  531.  
  532.     isTopFrame && cleanContext(win).then(__CONTEXT__ => {
  533.         if (!__CONTEXT__) return null;
  534.  
  535.         const { requestAnimationFrame } = __CONTEXT__;
  536.  
  537.         let chatWindowWR = null;
  538.         let showHideButtonWR = null;
  539.         let showButtonWR = null;
  540.  
  541.         /* globals WeakRef:false */
  542.  
  543.         /** @type {(o: Object | null) => WeakRef | null} */
  544.         const mWeakRef = typeof WeakRef === 'function' ? (o => o ? new WeakRef(o) : null) : (o => o || null); // typeof InvalidVar == 'undefined'
  545.  
  546.         /** @type {(wr: Object | null) => Object | null} */
  547.         const kRef = (wr => (wr && wr.deref) ? wr.deref() : wr);
  548.  
  549.         let rafPromise = null;
  550.  
  551.         const getRafPromise = () => rafPromise || (rafPromise = new Promise(resolve => {
  552.             requestAnimationFrame(hRes => {
  553.                 rafPromise = null;
  554.                 resolve(hRes);
  555.             });
  556.         }));
  557.  
  558.         let startX;
  559.         let startY;
  560.         let startWidth;
  561.         let startHeight;
  562.  
  563.         let edge = 0;
  564.  
  565.         let initialLeft;
  566.         let initialTop;
  567.  
  568.         let stopResize;
  569.         let stopMove;
  570.  
  571.         function filteroutHidden(el) {
  572.             if (!el) return el;
  573.             if (el.closest('[hidden]')) return null;
  574.             return el;
  575.         }
  576.  
  577.         const getXY = (e) => {
  578.             let rect = e.target.getBoundingClientRect();
  579.             let x = e.clientX - rect.left; //x position within the element.
  580.             let y = e.clientY - rect.top;  //y position within the element.
  581.             return { x, y };
  582.         }
  583.  
  584.         let beforeEvent = null;
  585.  
  586.         function resizeWindow(e) {
  587.  
  588.  
  589.             const chatWindow = kRef(chatWindowWR);
  590.             if (chatWindow) {
  591.  
  592.                 const mEdge = edge;
  593.  
  594.                 if (mEdge == 4 || mEdge == 1) {
  595.                 } else if (mEdge == 8 || mEdge == 16) {
  596.                 } else {
  597.                     return;
  598.                 }
  599.  
  600.                 Promise.resolve(chatWindow).then(chatWindow => {
  601.                     let rect;
  602.  
  603.                     if (mEdge == 4 || mEdge == 1 || mEdge == 16) {
  604.  
  605.                         let newWidth = startWidth + (startX - e.pageX);
  606.                         let newLeft = initialLeft + startWidth - newWidth;
  607.                         chatWindow.style.setProperty('--f3-w', newWidth + "px");
  608.                         chatWindow.style.setProperty('--f3-left', newLeft + "px");
  609.  
  610.                         let newHeight = startHeight + (startY - e.pageY);
  611.                         let newTop = initialTop + startHeight - newHeight;
  612.                         chatWindow.style.setProperty('--f3-h', newHeight + "px");
  613.                         chatWindow.style.setProperty('--f3-top', newTop + "px");
  614.  
  615.                         rect = {
  616.                             x: newLeft,
  617.                             y: newTop,
  618.                             w: newWidth,
  619.                             h: newHeight,
  620.                         };
  621.  
  622.                     } else if (mEdge == 8) {
  623.  
  624.                         let newWidth = startWidth + e.pageX - startX;
  625.                         let newHeight = startHeight + e.pageY - startY;
  626.                         chatWindow.style.setProperty('--f3-w', newWidth + "px");
  627.                         chatWindow.style.setProperty('--f3-h', newHeight + "px");
  628.  
  629.                         rect = {
  630.                             x: initialLeft,
  631.                             y: initialTop,
  632.                             w: newWidth,
  633.                             h: newHeight,
  634.                         };
  635.  
  636.                     }
  637.  
  638.                     updateOpacity(chatWindow, rect, screen);
  639.  
  640.                 })
  641.  
  642.                 e.stopImmediatePropagation();
  643.                 e.stopPropagation();
  644.                 e.preventDefault();
  645.  
  646.  
  647.             }
  648.  
  649.         }
  650.  
  651.         let isMoved = false;
  652.  
  653.         function moveWindow(e) {
  654.  
  655.             const chatWindow = kRef(chatWindowWR);
  656.             if (!chatWindow) return;
  657.  
  658.             Promise.resolve(chatWindow).then(chatWindow => {
  659.  
  660.                 let newX = initialLeft + e.pageX - startX;
  661.                 let newY = initialTop + e.pageY - startY;
  662.  
  663.                 if (Math.abs(e.pageX - startX) > 10 || Math.abs(e.pageY - startY) > 10) isMoved = true;
  664.  
  665.                 chatWindow.style.setProperty('--f3-left', newX + "px");
  666.                 chatWindow.style.setProperty('--f3-top', newY + "px");
  667.  
  668.                 updateOpacity(chatWindow, {
  669.                     x: newX,
  670.                     y: newY,
  671.                     w: startWidth,
  672.                     h: startHeight,
  673.                 }, screen);
  674.  
  675.             });
  676.  
  677.             e.stopImmediatePropagation();
  678.             e.stopPropagation();
  679.             e.preventDefault();
  680.  
  681.  
  682.         }
  683.  
  684.  
  685.         function initializeResize(e) {
  686.  
  687.             if (!document.fullscreenElement) return;
  688.  
  689.             if (!document.querySelector('[floating-chat-window]:fullscreen ytd-live-chat-frame#chat:not([collapsed])')) return;
  690.  
  691.             if (e.target.id !== 'chat') return;
  692.  
  693.             const { x, y } = getXY(e);
  694.             edge = 0;
  695.             if (x < 16 && y < 16) { edge = 16; }
  696.             else if (x < 16) edge = 4;
  697.             else if (y < 16) edge = 1;
  698.             else edge = 8;
  699.  
  700.             if (edge <= 0) return;
  701.  
  702.             startX = e.pageX;
  703.             startY = e.pageY;
  704.  
  705.             const chatWindow = kRef(chatWindowWR);
  706.             if (chatWindow) {
  707.                 Promise.resolve(chatWindow).then(chatWindow => {
  708.  
  709.                     const rect = chatWindow.getBoundingClientRect();
  710.                     initialLeft = rect.x;
  711.                     initialTop = rect.y;
  712.  
  713.                     startWidth = rect.width;
  714.                     startHeight = rect.height;
  715.  
  716.                     chatWindow.style.setProperty('--f3-left', initialLeft + "px");
  717.                     chatWindow.style.setProperty('--f3-top', initialTop + "px");
  718.                     chatWindow.style.setProperty('--f3-w', startWidth + "px");
  719.                     chatWindow.style.setProperty('--f3-h', startHeight + "px");
  720.  
  721.                 });
  722.             }
  723.  
  724.             document.documentElement.setAttribute('moving', 'resize');
  725.  
  726.             document.documentElement.removeEventListener("mousemove", resizeWindow, false);
  727.             document.documentElement.removeEventListener("mousemove", moveWindow, false);
  728.             document.documentElement.removeEventListener("mouseup", stopResize, false);
  729.             document.documentElement.removeEventListener("mouseup", stopMove, false);
  730.  
  731.             isMoved = false;
  732.             document.documentElement.addEventListener("mousemove", resizeWindow);
  733.             document.documentElement.addEventListener("mouseup", stopResize);
  734.  
  735.         }
  736.  
  737.  
  738.         let updateOpacityRid = 0;
  739.  
  740.         function updateOpacity(chatWindow, rect, screen) {
  741.  
  742.             const tid = ++updateOpacityRid;
  743.  
  744.             getRafPromise().then(() => {
  745.  
  746.                 if (tid !== updateOpacityRid) return;
  747.  
  748.                 const { x, y, w, h } = rect;
  749.                 const [left, top, right, bottom] = [x, y, x + w, y + h];
  750.  
  751.                 const opacityW = (Math.min(right, screen.width) - Math.max(0, left)) / w;
  752.                 const opacityH = (Math.min(bottom, screen.height) - Math.max(0, top)) / h;
  753.  
  754.                 const opacity = Math.min(opacityW, opacityH);
  755.  
  756.                 chatWindow.style.setProperty('--floating-window-opacity', Math.round(opacity * 100 * 5, 0) / 5 / 100);
  757.  
  758.             });
  759.  
  760.         }
  761.  
  762.         function initializeMove(e) {
  763.  
  764.             if (!document.fullscreenElement) return;
  765.             if (!document.querySelector('[floating-chat-window]:fullscreen ytd-live-chat-frame#chat:not([collapsed])')) return;
  766.  
  767.             const chatWindow = kRef(chatWindowWR);
  768.  
  769.             startX = e.pageX;
  770.             startY = e.pageY;
  771.  
  772.             if (chatWindow) {
  773.  
  774.                 Promise.resolve(chatWindow).then(chatWindow => {
  775.  
  776.                     let rect = chatWindow.getBoundingClientRect();
  777.                     initialLeft = rect.x;
  778.                     initialTop = rect.y;
  779.  
  780.                     startWidth = rect.width;
  781.                     startHeight = rect.height;
  782.  
  783.                     chatWindow.style.setProperty('--f3-left', initialLeft + "px");
  784.                     chatWindow.style.setProperty('--f3-top', initialTop + "px");
  785.                     chatWindow.style.setProperty('--f3-w', startWidth + "px");
  786.                     chatWindow.style.setProperty('--f3-h', startHeight + "px");
  787.  
  788.                 });
  789.  
  790.             }
  791.  
  792.             document.documentElement.setAttribute('moving', 'move');
  793.  
  794.             document.documentElement.removeEventListener("mousemove", resizeWindow, false);
  795.             document.documentElement.removeEventListener("mousemove", moveWindow, false);
  796.             document.documentElement.removeEventListener("mouseup", stopResize, false);
  797.             document.documentElement.removeEventListener("mouseup", stopMove, false);
  798.             isMoved = false;
  799.  
  800.             document.documentElement.addEventListener("mousemove", moveWindow, false);
  801.             document.documentElement.addEventListener("mouseup", stopMove, false);
  802.  
  803.             e.stopImmediatePropagation();
  804.             e.stopPropagation();
  805.             e.preventDefault();
  806.  
  807.             beforeEvent = e;
  808.  
  809.         }
  810.  
  811.  
  812.         function checkClick(beforeEvent, currentEvent) {
  813.  
  814.             const d = currentEvent.timeStamp - beforeEvent.timeStamp;
  815.             if (d < 300 && d > 30 && !isMoved) {
  816.                 document.documentElement.classList.add('no-floating');
  817.             }
  818.  
  819.         }
  820.  
  821.         stopResize = (e) => {
  822.  
  823.             document.documentElement.removeEventListener("mousemove", resizeWindow, false);
  824.             document.documentElement.removeEventListener("mousemove", moveWindow, false);
  825.             document.documentElement.removeEventListener("mouseup", stopResize, false);
  826.             document.documentElement.removeEventListener("mouseup", stopMove, false);
  827.  
  828.             document.documentElement.removeAttribute('moving');
  829.  
  830.             e.stopImmediatePropagation();
  831.             e.stopPropagation();
  832.  
  833.         }
  834.  
  835.         stopMove = (e) => {
  836.  
  837.             document.documentElement.removeEventListener("mousemove", resizeWindow, false);
  838.             document.documentElement.removeEventListener("mousemove", moveWindow, false);
  839.             document.documentElement.removeEventListener("mouseup", stopResize, false);
  840.             document.documentElement.removeEventListener("mouseup", stopMove, false);
  841.  
  842.             document.documentElement.removeAttribute('moving');
  843.             beforeEvent && checkClick(beforeEvent, e);
  844.             beforeEvent = null;
  845.  
  846.             e.stopImmediatePropagation();
  847.             e.stopPropagation();
  848.  
  849.         }
  850.  
  851.         function reset() {
  852.  
  853.             document.documentElement.removeAttribute('moving');
  854.             document.documentElement.removeEventListener("mousemove", resizeWindow, false);
  855.             document.documentElement.removeEventListener("mousemove", moveWindow, false);
  856.             document.documentElement.removeEventListener("mouseup", stopResize, false);
  857.             document.documentElement.removeEventListener("mouseup", stopMove, false);
  858.  
  859.             startX = 0;
  860.             startY = 0;
  861.             startWidth = 0;
  862.             startHeight = 0;
  863.  
  864.             edge = 0;
  865.  
  866.             initialLeft = 0;
  867.             initialTop = 0;
  868.  
  869.             beforeEvent = null;
  870.  
  871.         }
  872.  
  873.         function iframeFullscreenChanged() {
  874.             const iframeDoc = this;
  875.  
  876.  
  877.             _lastStyleText = null;
  878.  
  879.             if (!document.fullscreenElement) {
  880.                 activeStyle = false;
  881.                 iframeDoc.documentElement.classList.remove('youtube-floating-chat-iframe');
  882.             } else {
  883.                 activeStyle = true;
  884.                 iframeDoc.documentElement.classList.add('youtube-floating-chat-iframe');
  885.  
  886.             }
  887.  
  888.         }
  889.  
  890.         let iframeFullscreenChangedBinded = null;
  891.  
  892.         function onMessage(evt) {
  893.             if (evt.data !== hkey_script) return;
  894.  
  895.             const iframeWin = evt.source;
  896.             if (!iframeWin) return;
  897.             const iframeDoc = iframeWin.document;
  898.  
  899.             const intervalCheckFn = () => {
  900.  
  901.                 if (!activeStyle) return;
  902.  
  903.                 let xpathExpression = "//style[text()[contains(., 'userscript-control[floating-chat-iframe]')]]";
  904.  
  905.                 // Evaluating the XPath expression and getting string value directly
  906.                 let result = iframeDoc.evaluate(xpathExpression, iframeDoc, null, XPathResult.STRING_TYPE, null);
  907.  
  908.                 let newText = result && result.stringValue ? result.stringValue : null;
  909.  
  910.                 if (newText !== _lastStyleText) {
  911.                     _lastStyleText = newText;
  912.                     // console.log(123)
  913.  
  914.                     let tid = ++tvc;
  915.  
  916.                     getRafPromise().then(() => {
  917.  
  918.                         if (tid !== tvc) return;
  919.  
  920.                         let style = iframeWin.getComputedStyle(iframeDoc.documentElement);
  921.  
  922.                         let fc = style.getPropertyValue('--floodcolor');
  923.                         if (fc) {
  924.  
  925.                             let floodColor03 = iframeDoc.querySelector('#floodColor-03');
  926.                             floodColor03 && floodColor03.setAttribute('flood-color', fc);
  927.  
  928.                             let floodColor04 = iframeDoc.querySelector('#floodColor-04');
  929.                             floodColor04 && floodColor04.setAttribute('flood-color', fc);
  930.  
  931.                             iframeDoc.documentElement.setAttribute('hpkns', '')
  932.                         } else {
  933.                             iframeDoc.documentElement.removeAttribute('hpkns')
  934.  
  935.                         }
  936.  
  937.                     });
  938.  
  939.                 }
  940.  
  941.             };
  942.  
  943.             function onReady() {
  944.  
  945.                 iframeDoc.head.appendChild(document.createElement('style')).textContent = createStyleTextForIframe();
  946.  
  947.                 const tm = document.createElement('template');
  948.                 tm.innerHTML = svgDefs();
  949.                 iframeDoc.body.appendChild(tm.content)
  950.  
  951.                 if (iframeFullscreenChangedBinded) document.removeEventListener('fullscreenchange', iframeFullscreenChangedBinded, false);
  952.                 iframeFullscreenChangedBinded = iframeFullscreenChanged.bind(iframeDoc);
  953.                 document.addEventListener('fullscreenchange', iframeFullscreenChangedBinded, false);
  954.  
  955.                 iframeFullscreenChangedBinded();
  956.  
  957.                 setInterval(intervalCheckFn, 100);
  958.  
  959.             }
  960.  
  961.             Promise.resolve().then(() => {
  962.  
  963.                 if (iframeDoc.readyState !== 'loading') {
  964.                     onReady();
  965.                 } else {
  966.                     iframeWin.addEventListener("DOMContentLoaded", onReady, false);
  967.                 }
  968.  
  969.             });
  970.  
  971.  
  972.  
  973.         }
  974.  
  975.         let moInt = 0;
  976.         const mutationObserverFn = () => {
  977.             if (moInt > 1e9) moInt = 9;
  978.             const t = ++moInt;
  979.             getRafPromise().then(() => {
  980.                 if (t !== moInt) return;
  981.  
  982.                 const chatWindow = chatWindowWR ? kRef(chatWindowWR) : null;
  983.  
  984.                 if (!(chatWindow instanceof Element)) return;
  985.                 if (chatWindow.hasAttribute('collapsed')) return;
  986.                 const chatWindowCnt = insp(chatWindow);
  987.  
  988.                 if (!chatWindowCnt) return;
  989.  
  990.                 const btn = qsOne(chatWindow, '#show-hide-button[hidden]')
  991.                 if (!btn) return;
  992.  
  993.                 if (btn && filteroutHidden(chatWindow)) {
  994.                     const liveChatRenderer = ((chatWindowCnt || 0).data || 0).liveChatRenderer || 0;
  995.                     if (liveChatRenderer && liveChatRenderer.showButton && !liveChatRenderer.showHideButton) {
  996.                         btn.setAttribute('is-show-button', '')
  997.                     } else {
  998.                         btn.removeAttribute('is-show-button')
  999.                     }
  1000.                 }
  1001.  
  1002.             });
  1003.  
  1004.         };
  1005.         const mutationObserver = new MutationObserver(mutationObserverFn);
  1006.  
  1007.         function setChat(chat) {
  1008.  
  1009.             if (!(chat instanceof Element)) return;
  1010.             let resizeHandle = qsOne(chat, '.resize-handle')
  1011.             if (resizeHandle) return;
  1012.  
  1013.             const chatDollar = insp(chat).$ || chat.$ || 0;
  1014.  
  1015.             let cw = (() => {
  1016.                 try {
  1017.                     const { head, body } = chatDollar.chatframe.contentWindow.document;
  1018.                     return { head, body }
  1019.  
  1020.                 } catch (e) { return null; }
  1021.             })();
  1022.  
  1023.             if (!cw) return;
  1024.  
  1025.             window.removeEventListener('message', onMessage, false);
  1026.             window.addEventListener('message', onMessage, false);
  1027.  
  1028.  
  1029.  
  1030.             let script = document.getElementById('rvZ0t') || (document.evaluate("//div[contains(text(), 'userscript-control[enable-customized-floating-window]')]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null) || 0).singleNodeValue;
  1031.             if (!script) addCSS(createStyleTextForTopWin);
  1032.             /*
  1033.             const tm = document.createElement('template');
  1034.             tm.innerHTML=svgDefs();
  1035.             document.body.appendChild(tm.content)
  1036.             */
  1037.  
  1038.             if (!document.documentElement.hasAttribute('floating-chat-window')) document.documentElement.setAttribute('floating-chat-window', '');
  1039.  
  1040.  
  1041.             chat.setAttribute('allowtransparency', 'true');
  1042.  
  1043.  
  1044.  
  1045.             resizeHandle = document.createElement("div");
  1046.             resizeHandle.className = "resize-handle";
  1047.             chat.appendChild(resizeHandle);
  1048.             resizeHandle = null;
  1049.  
  1050.             let chatWindow;
  1051.             let showHideButton;
  1052.             let showButton;
  1053.  
  1054.             chatWindow = kRef(chatWindowWR);
  1055.             showHideButton = kRef(showHideButtonWR);
  1056.             showButton = kRef(showButtonWR);
  1057.  
  1058.  
  1059.  
  1060.             if (chatWindow) chatWindow.removeEventListener("mousedown", initializeResize, false);
  1061.             if (showHideButton) showHideButton.removeEventListener("mousedown", initializeMove, false);
  1062.             else if (showButton) showButton.removeEventListener("mousedown", initializeMove, false);
  1063.  
  1064.             if (chat) {
  1065.                 mutationObserver.observe(chat, { attributes: true, attributeFilter: ['collapsed', 'hidden'] });
  1066.                 mutationObserverFn();
  1067.             }
  1068.  
  1069.  
  1070.             chatWindow = chat;
  1071.             showHideButton = (qsOne(chat, '#show-hide-button'));
  1072.             showButton = (qsOne(chat, '#show-button'));
  1073.             chatWindowWR = mWeakRef(chat)
  1074.             showHideButtonWR = mWeakRef(showHideButton);
  1075.             showButtonWR = mWeakRef(showButton);
  1076.  
  1077.  
  1078.  
  1079.             if (chatWindow) chatWindow.addEventListener("mousedown", initializeResize, false);
  1080.             if (showHideButton) showHideButton.addEventListener("mousedown", initializeMove, false);
  1081.             else if (showButton) showButton.addEventListener("mousedown", initializeMove, false);
  1082.  
  1083.             reset();
  1084.  
  1085.         }
  1086.  
  1087.  
  1088.         const fullscreenchangePageFn = () => {
  1089.             if (!document.fullscreenElement) {
  1090.                 document.documentElement.classList.remove('no-floating')
  1091.             }
  1092.         };
  1093.  
  1094.  
  1095.         function noChat(chat) {
  1096.  
  1097.             if (!(chat instanceof Element)) return;
  1098.  
  1099.             let chatWindow;
  1100.             let showHideButton;
  1101.             let showButton;
  1102.  
  1103.             chatWindow = kRef(chatWindowWR);
  1104.             showHideButton = kRef(showHideButtonWR);
  1105.             showButton = kRef(showButtonWR);
  1106.  
  1107.  
  1108.  
  1109.             if (chatWindow) chatWindow.removeEventListener("mousedown", initializeResize, false);
  1110.             if (showHideButton) showHideButton.removeEventListener("mousedown", initializeMove, false);
  1111.             else if (showHideButton) showHideButton.removeEventListener("mousedown", initializeMove, false);
  1112.  
  1113.  
  1114.             let resizeHandle = qsOne(chat, '.resize-handle')
  1115.             if (resizeHandle) {
  1116.                 resizeHandle.remove();
  1117.             }
  1118.  
  1119.             chat.removeEventListener("mousedown", initializeResize, false);
  1120.  
  1121.  
  1122.             showHideButton = (qsOne(chat, '#show-hide-button'));
  1123.             showButton = (qsOne(chat, '#show-button'));
  1124.  
  1125.             if (showHideButton) showHideButton.removeEventListener("mousedown", initializeMove, false);
  1126.             else if (showButton) showButton.removeEventListener("mousedown", initializeMove, false);
  1127.  
  1128.  
  1129.             reset();
  1130.         }
  1131.  
  1132.  
  1133.         document.removeEventListener('fullscreenchange', fullscreenchangePageFn, false);
  1134.         document.addEventListener('fullscreenchange', fullscreenchangePageFn, false);
  1135.         fullscreenchangePageFn();
  1136.  
  1137.         ytZara.ytProtoAsync("ytd-live-chat-frame").then((proto) => {
  1138.  
  1139.             proto.attached = ((attached) => (function () { Promise.resolve(this.hostElement || this).then(setChat).catch(console.warn); return attached.apply(this, arguments) }))(proto.attached);
  1140.  
  1141.             proto.detached = ((detached) => (function () { Promise.resolve(this.hostElement || this).then(noChat).catch(console.warn); return detached.apply(this, arguments) }))(proto.detached);
  1142.  
  1143.             let chat = document.querySelector('ytd-live-chat-frame');
  1144.             if (chat) Promise.resolve(chat).then(setChat).catch(console.warn);
  1145.  
  1146.         });
  1147.  
  1148.  
  1149.     });
  1150.  
  1151.     (!isTopFrame && isIframe && top === parent) && top.postMessage(hkey_script, `${location.protocol}//${location.hostname}`);
  1152.  
  1153.  
  1154.  
  1155. })({ requestAnimationFrame });