☰

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