☰

YouTube: Floating Chat Window on Fullscreen

To make floating chat window on fullscreen

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

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