☰

YouTube: Floating Chat Window on Fullscreen

To make floating chat window on fullscreen

目前為 2023-08-19 提交的版本，檢視 最新版本。

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