☰

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.0
  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.     ytd-live-chat-frame#chat:not([collapsed]) [is-show-button] [role="text"] {
  290.       display: none;
  291.     }
  292.   
  293.     ytd-live-chat-frame#chat:not([collapsed]) [is-show-button] button::before {
  294.       content:'ϞϞϞϞϞϞϞϞϞϞϞ';
  295.     }
  296.   
  297.   
  298.     `;
  299.  
  300.     const createStyleTextForIframe = () => `
  301.   
  302.   
  303.     .youtube-floating-chat-iframe yt-live-chat-docked-message#docked-messages.style-scope.yt-live-chat-item-list-renderer {
  304.       margin-top:var(--fc7-top-banner-mt);
  305.       transition: margin-top 180ms;
  306.     }
  307.   
  308.     .youtube-floating-chat-iframe yt-live-chat-banner-manager#live-chat-banner.style-scope.yt-live-chat-item-list-renderer {
  309.       margin-top:var(--fc7-top-banner-mt);
  310.       transition: margin-top 180ms;
  311.     }
  312.   
  313.     .youtube-floating-chat-iframe #action-panel.style-scope.yt-live-chat-renderer {
  314.       position: fixed;
  315.       top: 50%;
  316.       transform: translateY(-50%);
  317.     }
  318.   
  319.     .youtube-floating-chat-iframe yt-live-chat-header-renderer.style-scope.yt-live-chat-renderer {
  320.       position: relative;
  321.       z-index: 8;
  322.       background: rgb(0,0,0);
  323.       visibility: var(--fc7-panel-visibility);
  324.     }
  325.   
  326.   
  327.   
  328.     .youtube-floating-chat-iframe #chat-messages.style-scope.yt-live-chat-renderer.iron-selected > #contents.style-scope.yt-live-chat-renderer{
  329.       position: fixed;
  330.       z-index: 4;
  331.       top: 0;
  332.       bottom: 0;
  333.       left: 0;
  334.       right: 0;
  335.     }
  336.   
  337.     .youtube-floating-chat-iframe #right-arrow-container.yt-live-chat-ticker-renderer,
  338.     .youtube-floating-chat-iframe #left-arrow-container.yt-live-chat-ticker-renderer
  339.   
  340.     {
  341.       background: transparent;
  342.     }
  343.   
  344.     .youtube-floating-chat-iframe yt-live-chat-renderer.yt-live-chat-app {
  345.   
  346.       --yt-live-chat-background-color: transparent;
  347.       --yt-live-chat-action-panel-background-color: rgba(0, 0, 0, 0.08);
  348.       --yt-live-chat-header-background-color: rgba(0, 0, 0, 0.18);
  349.       --yt-spec-static-overlay-background-medium: rgba(0, 0, 0, 0.08);
  350.       --yt-live-chat-banner-gradient-scrim: transparent;
  351.   
  352.     }
  353.   
  354.     .youtube-floating-chat-iframe{
  355.       --fc7-top-banner-mt: 0px;
  356.       --fc7-banner-opacity: 0.86;
  357.       --fc7-system-message-opacity: 0.66;
  358.       --fc7-system-message-opacity2: 0.66;
  359.       --fc7-panel-display: none;
  360.       --fc7-panel-visibility: collapse;
  361.       --fc7-panel-position: absolute;
  362.     }
  363.     .youtube-floating-chat-iframe:focus-within,
  364.     html:focus-within,
  365.     body:focus-within,
  366.     yt-live-chat-app:focus-within,
  367.     yt-live-chat-renderer.yt-live-chat-app:focus-within
  368.      {
  369.       --fc7-top-banner-mt: 56px;
  370.       --fc7-banner-opacity: 1.0;
  371.       --fc7-system-message-opacity: 1.0;
  372.       --fc7-system-message-opacity2: 1.00;
  373.       --fc7-panel-display: invalid;
  374.       --fc7-panel-visibility: invalid;
  375.       --fc7-panel-position: absolute;
  376.     }
  377.   
  378.     .youtube-floating-chat-iframe yt-live-chat-app:hover {
  379.       --fc7-top-banner-mt: 56px;
  380.       --fc7-banner-opacity: 1.0;
  381.       --fc7-system-message-opacity: 1.0;
  382.       --fc7-system-message-opacity2: 1.00;
  383.       --fc7-panel-display: invalid;
  384.       --fc7-panel-visibility: invalid;
  385.       --fc7-panel-position: absolute;
  386.     }
  387.   
  388.   
  389.     .youtube-floating-chat-iframe yt-live-chat-renderer.yt-live-chat-app #visible-banners > yt-live-chat-banner-renderer {
  390.       opacity: var(--fc7-banner-opacity) !important;
  391.     }
  392.   
  393.   
  394.     .youtube-floating-chat-iframe yt-live-chat-renderer.yt-live-chat-app yt-live-chat-viewer-engagement-message-renderer {
  395.       opacity: var(--fc7-system-message-opacity) !important;
  396.     }
  397.   
  398.   
  399.     .youtube-floating-chat-iframe yt-live-chat-app yt-live-chat-renderer.yt-live-chat-app yt-live-chat-message-input-renderer {
  400.       visibility: var(--fc7-panel-visibility);
  401.       position: var(--fc7-panel-position);
  402.   
  403.         transform: translateY(-100%);
  404.         left: 0;
  405.         right: 0;
  406.         opacity: 1;
  407.         background: rgba(0,0,0,0.86);
  408.     }
  409.   
  410.   
  411.     /* hide message with input panel hidden */
  412.     .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 {
  413.       visibility: var(--fc7-panel-visibility);
  414.     }
  415.   
  416.   
  417.   
  418.   
  419.     [dark].youtube-floating-chat-iframe yt-live-chat-app ::-webkit-scrollbar-track,
  420.     [dark].youtube-floating-chat-iframe yt-live-chat-kevlar-container ::-webkit-scrollbar-track {
  421.         background-color: var(--ytd-searchbox-legacy-button-color);
  422.     }
  423.   
  424.     .youtube-floating-chat-iframe yt-live-chat-app ::-webkit-scrollbar-track,
  425.     .youtube-floating-chat-iframe yt-live-chat-kevlar-container ::-webkit-scrollbar-track {
  426.         background-color: #fcfcfc;
  427.     }
  428.   
  429.   
  430.     [dark].youtube-floating-chat-iframe yt-live-chat-app ::-webkit-scrollbar-thumb,
  431.     [dark].youtube-floating-chat-iframe yt-live-chat-kevlar-container ::-webkit-scrollbar-thumb{
  432.   
  433.         background-color: var(--ytd-searchbox-legacy-button-color);
  434.         border: 2px solid var(--ytd-searchbox-legacy-button-color);
  435.   
  436.     }
  437.   
  438.   
  439.   
  440.     .youtube-floating-chat-iframe yt-live-chat-renderer[has-action-panel-renderer] #action-panel.yt-live-chat-renderer {
  441.       --yt-live-chat-action-panel-gradient-scrim: transparent;
  442.     }
  443.   
  444.   
  445.     .youtube-floating-chat-iframe yt-live-chat-renderer[has-action-panel-renderer] #action-panel.yt-live-chat-renderer yt-live-chat-action-panel-renderer {
  446.       opacity: var(--fc7-system-message-opacity2) !important;
  447.     }
  448.   
  449.     `;
  450.  
  451.     const { isIframe, isTopFrame } = (() => {
  452.  
  453.         let isIframe = false, isTopFrame = false;
  454.         try {
  455.             isIframe = window.document !== top.document
  456.         } catch (e) { }
  457.  
  458.         try {
  459.             isTopFrame = window.document === top.document
  460.         } catch (e) { }
  461.  
  462.         return { isIframe, isTopFrame };
  463.  
  464.     })();
  465.  
  466.     if (isIframe ^ isTopFrame) { } else return;
  467.  
  468.  
  469.     const addCSS = (createStyleText) => {
  470.         let text = createStyleText();
  471.         let style = document.createElement('style');
  472.         style.id = 'rvZ0t';
  473.         style.textContent = text;
  474.         document.head.appendChild(style);
  475.     }
  476.  
  477.  
  478.  
  479.     const cleanContext = async (win) => {
  480.         const waitFn = requestAnimationFrame; // shall have been binded to window
  481.         try {
  482.             let mx = 16; // MAX TRIAL
  483.             const frameId = 'vanillajs-iframe-v1'
  484.             let frame = document.getElementById(frameId);
  485.             let removeIframeFn = null;
  486.             if (!frame) {
  487.                 frame = document.createElement('iframe');
  488.                 frame.id = 'vanillajs-iframe-v1';
  489.                 frame.sandbox = 'allow-same-origin'; // script cannot be run inside iframe but API can be obtained from iframe
  490.                 let n = document.createElement('noscript'); // wrap into NOSCRPIT to avoid reflow (layouting)
  491.                 n.appendChild(frame);
  492.                 while (!document.documentElement && mx-- > 0) await new Promise(waitFn); // requestAnimationFrame here could get modified by YouTube engine
  493.                 const root = document.documentElement;
  494.                 root.appendChild(n); // throw error if root is null due to exceeding MAX TRIAL
  495.                 removeIframeFn = (setTimeout) => {
  496.                     const removeIframeOnDocumentReady = (e) => {
  497.                         e && win.removeEventListener("DOMContentLoaded", removeIframeOnDocumentReady, false);
  498.                         win = null;
  499.                         setTimeout(() => {
  500.                             n.remove();
  501.                             n = null;
  502.                         }, 200);
  503.                     }
  504.                     if (document.readyState !== 'loading') {
  505.                         removeIframeOnDocumentReady();
  506.                     } else {
  507.                         win.addEventListener("DOMContentLoaded", removeIframeOnDocumentReady, false);
  508.                     }
  509.                 }
  510.             }
  511.             while (!frame.contentWindow && mx-- > 0) await new Promise(waitFn);
  512.             const fc = frame.contentWindow;
  513.             if (!fc) throw "window is not found."; // throw error if root is null due to exceeding MAX TRIAL
  514.             const { requestAnimationFrame, setTimeout } = fc;
  515.             const res = { requestAnimationFrame, setTimeout };
  516.             for (let k in res) res[k] = res[k].bind(win); // necessary
  517.             if (removeIframeFn) Promise.resolve(res.setTimeout).then(removeIframeFn);
  518.             return res;
  519.         } catch (e) {
  520.             console.warn(e);
  521.             return null;
  522.         }
  523.     };
  524.  
  525.     isTopFrame && cleanContext(win).then(__CONTEXT__ => {
  526.         if (!__CONTEXT__) return null;
  527.  
  528.         const { requestAnimationFrame } = __CONTEXT__;
  529.  
  530.         let chatWindowWR = null;
  531.         let showHideButtonWR = null;
  532.         let showButtonWR = null;
  533.  
  534.         /* globals WeakRef:false */
  535.  
  536.         /** @type {(o: Object | null) => WeakRef | null} */
  537.         const mWeakRef = typeof WeakRef === 'function' ? (o => o ? new WeakRef(o) : null) : (o => o || null); // typeof InvalidVar == 'undefined'
  538.  
  539.         /** @type {(wr: Object | null) => Object | null} */
  540.         const kRef = (wr => (wr && wr.deref) ? wr.deref() : wr);
  541.  
  542.  
  543.         let rafPromise = null;
  544.  
  545.         const getRafPromise = () => rafPromise || (rafPromise = new Promise(resolve => {
  546.             requestAnimationFrame(hRes => {
  547.                 rafPromise = null;
  548.                 resolve(hRes);
  549.             });
  550.         }));
  551.  
  552.         let startX;
  553.         let startY;
  554.         let startWidth;
  555.         let startHeight;
  556.  
  557.  
  558.         let edge = 0;
  559.  
  560.  
  561.         let initialLeft;
  562.         let initialTop;
  563.  
  564.         let stopResize;
  565.         let stopMove;
  566.  
  567.         function filteroutHidden(el) {
  568.  
  569.             if (!el) return el;
  570.             if (el.closest('[hidden]')) return null;
  571.             return el;
  572.  
  573.         }
  574.  
  575.         const getXY = (e) => {
  576.             let rect = e.target.getBoundingClientRect();
  577.             let x = e.clientX - rect.left; //x position within the element.
  578.             let y = e.clientY - rect.top;  //y position within the element.
  579.             return { x, y }
  580.         }
  581.  
  582.         let beforeEvent = null;
  583.  
  584.         function resizeWindow(e) {
  585.  
  586.  
  587.             const chatWindow = kRef(chatWindowWR);
  588.             if (chatWindow) {
  589.  
  590.                 const mEdge = edge;
  591.  
  592.                 if (mEdge == 4 || mEdge == 1) {
  593.  
  594.                 } else if (mEdge == 8 || mEdge == 16) {
  595.                 } else {
  596.                     return;
  597.                 }
  598.  
  599.  
  600.                 Promise.resolve(chatWindow).then(chatWindow => {
  601.                     let rect;
  602.  
  603.                     if (mEdge == 4 || mEdge == 1 || mEdge == 16) {
  604.  
  605.                         let newWidth = startWidth + (startX - e.pageX);
  606.  
  607.                         let newLeft = initialLeft + startWidth - newWidth;
  608.                         chatWindow.style.setProperty('--f3-w', newWidth + "px");
  609.                         chatWindow.style.setProperty('--f3-left', newLeft + "px");
  610.  
  611.  
  612.  
  613.                         let newHeight = startHeight + (startY - e.pageY);
  614.  
  615.                         let newTop = initialTop + startHeight - newHeight;
  616.                         chatWindow.style.setProperty('--f3-h', newHeight + "px");
  617.                         chatWindow.style.setProperty('--f3-top', newTop + "px");
  618.  
  619.                         rect = {
  620.                             x: newLeft,
  621.                             y: newTop,
  622.                             w: newWidth,
  623.  
  624.                             h: newHeight,
  625.  
  626.  
  627.                         };
  628.  
  629.  
  630.  
  631.                     } else if (mEdge == 8) {
  632.  
  633.                         let newWidth = startWidth + e.pageX - startX;
  634.                         let newHeight = startHeight + e.pageY - startY;
  635.  
  636.                         chatWindow.style.setProperty('--f3-w', newWidth + "px");
  637.                         chatWindow.style.setProperty('--f3-h', newHeight + "px");
  638.  
  639.  
  640.                         rect = {
  641.                             x: initialLeft,
  642.                             y: initialTop,
  643.                             w: newWidth,
  644.  
  645.                             h: newHeight,
  646.  
  647.  
  648.                         };
  649.  
  650.                     }
  651.  
  652.  
  653.  
  654.                     updateOpacity(chatWindow, rect, screen);
  655.  
  656.                 })
  657.  
  658.  
  659.                 e.stopImmediatePropagation();
  660.                 e.stopPropagation();
  661.                 e.preventDefault();
  662.  
  663.  
  664.             }
  665.  
  666.         }
  667.  
  668.         let isMoved = false;
  669.  
  670.         function moveWindow(e) {
  671.  
  672.  
  673.  
  674.             const chatWindow = kRef(chatWindowWR);
  675.             if (chatWindow) {
  676.  
  677.                 Promise.resolve(chatWindow).then(chatWindow => {
  678.  
  679.  
  680.                     let newX = initialLeft + e.pageX - startX;
  681.                     let newY = initialTop + e.pageY - startY;
  682.  
  683.                     if (Math.abs(e.pageX - startX) > 10 || Math.abs(e.pageY - startY) > 10) isMoved = true;
  684.  
  685.                     chatWindow.style.setProperty('--f3-left', newX + "px");
  686.                     chatWindow.style.setProperty('--f3-top', newY + "px");
  687.  
  688.  
  689.  
  690.                     updateOpacity(chatWindow, {
  691.                         x: newX,
  692.                         y: newY,
  693.                         w: startWidth,
  694.  
  695.                         h: startHeight,
  696.  
  697.  
  698.                     }, screen);
  699.  
  700.                 });
  701.  
  702.  
  703.  
  704.                 e.stopImmediatePropagation();
  705.                 e.stopPropagation();
  706.                 e.preventDefault();
  707.  
  708.             }
  709.         }
  710.  
  711.  
  712.  
  713.  
  714.         function initializeResize(e) {
  715.  
  716.             if (!document.fullscreenElement) return;
  717.  
  718.             if (!document.querySelector('[floating-chat-window]:fullscreen ytd-live-chat-frame#chat:not([collapsed])')) return;
  719.  
  720.             if (e.target.id !== 'chat') return;
  721.  
  722.  
  723.  
  724.             const { x, y } = getXY(e);
  725.             edge = 0;
  726.             if (x < 16 && y < 16) { edge = 16; }
  727.             else if (x < 16) edge = 4;
  728.             else if (y < 16) edge = 1;
  729.             else edge = 8;
  730.  
  731.             if (edge <= 0) return;
  732.  
  733.             startX = e.pageX;
  734.             startY = e.pageY;
  735.  
  736.             const chatWindow = kRef(chatWindowWR);
  737.             if (chatWindow) {
  738.  
  739.                 Promise.resolve(chatWindow).then(chatWindow => {
  740.  
  741.                     let rect = chatWindow.getBoundingClientRect();
  742.                     initialLeft = rect.x;
  743.                     initialTop = rect.y;
  744.  
  745.  
  746.  
  747.                     startWidth = rect.width;
  748.                     startHeight = rect.height;
  749.  
  750.  
  751.                     chatWindow.style.setProperty('--f3-left', initialLeft + "px");
  752.                     chatWindow.style.setProperty('--f3-top', initialTop + "px");
  753.                     chatWindow.style.setProperty('--f3-w', startWidth + "px");
  754.                     chatWindow.style.setProperty('--f3-h', startHeight + "px");
  755.  
  756.                 });
  757.  
  758.             }
  759.  
  760.  
  761.  
  762.  
  763.             document.documentElement.setAttribute('moving', 'resize');
  764.  
  765.             document.documentElement.removeEventListener("mousemove", resizeWindow, false);
  766.             document.documentElement.removeEventListener("mousemove", moveWindow, false);
  767.             document.documentElement.removeEventListener("mouseup", stopResize, false);
  768.             document.documentElement.removeEventListener("mouseup", stopMove, false);
  769.  
  770.             isMoved = false;
  771.             document.documentElement.addEventListener("mousemove", resizeWindow);
  772.             document.documentElement.addEventListener("mouseup", stopResize);
  773.  
  774.         }
  775.  
  776.  
  777.         let updateOpacityRid = 0;
  778.  
  779.         function updateOpacity(chatWindow, rect, screen) {
  780.  
  781.             let tid = ++updateOpacityRid;
  782.  
  783.             getRafPromise().then(() => {
  784.  
  785.  
  786.                 if (tid !== updateOpacityRid) return;
  787.  
  788.                 let { x, y, w, h } = rect;
  789.                 let [left, top, right, bottom] = [x, y, x + w, y + h];
  790.  
  791.  
  792.                 let opacityW = (Math.min(right, screen.width) - Math.max(0, left)) / w;
  793.                 let opacityH = (Math.min(bottom, screen.height) - Math.max(0, top)) / h;
  794.  
  795.                 let opacity = Math.min(opacityW, opacityH);
  796.  
  797.                 chatWindow.style.setProperty('--floating-window-opacity', Math.round(opacity * 100 * 5, 0) / 5 / 100);
  798.  
  799.  
  800.             })
  801.  
  802.  
  803.  
  804.  
  805.  
  806.         }
  807.  
  808.         function initializeMove(e) {
  809.  
  810.             if (!document.fullscreenElement) return;
  811.             if (!document.querySelector('[floating-chat-window]:fullscreen ytd-live-chat-frame#chat:not([collapsed])')) return;
  812.  
  813.  
  814.  
  815.             const chatWindow = kRef(chatWindowWR);
  816.  
  817.  
  818.  
  819.             startX = e.pageX;
  820.             startY = e.pageY;
  821.  
  822.  
  823.             if (chatWindow) {
  824.  
  825.                 Promise.resolve(chatWindow).then(chatWindow => {
  826.  
  827.  
  828.                     let rect = chatWindow.getBoundingClientRect();
  829.                     initialLeft = rect.x;
  830.                     initialTop = rect.y;
  831.  
  832.  
  833.  
  834.                     startWidth = rect.width;
  835.                     startHeight = rect.height;
  836.  
  837.  
  838.                     chatWindow.style.setProperty('--f3-left', initialLeft + "px");
  839.                     chatWindow.style.setProperty('--f3-top', initialTop + "px");
  840.                     chatWindow.style.setProperty('--f3-w', startWidth + "px");
  841.                     chatWindow.style.setProperty('--f3-h', startHeight + "px");
  842.  
  843.                 })
  844.  
  845.  
  846.             }
  847.  
  848.  
  849.  
  850.             document.documentElement.setAttribute('moving', 'move');
  851.  
  852.             document.documentElement.removeEventListener("mousemove", resizeWindow, false);
  853.             document.documentElement.removeEventListener("mousemove", moveWindow, false);
  854.             document.documentElement.removeEventListener("mouseup", stopResize, false);
  855.             document.documentElement.removeEventListener("mouseup", stopMove, false);
  856.             isMoved = false;
  857.  
  858.             document.documentElement.addEventListener("mousemove", moveWindow, false);
  859.             document.documentElement.addEventListener("mouseup", stopMove, false);
  860.  
  861.             e.stopImmediatePropagation();
  862.             e.stopPropagation();
  863.             e.preventDefault();
  864.  
  865.             beforeEvent = e;
  866.  
  867.         }
  868.  
  869.  
  870.         function checkClick(beforeEvent, currentEvent) {
  871.  
  872.             const d = currentEvent.timeStamp - beforeEvent.timeStamp;
  873.             if (d < 300 && d > 30 && !isMoved) {
  874.  
  875.                 document.documentElement.classList.add('no-floating');
  876.  
  877.             }
  878.  
  879.         }
  880.  
  881.  
  882.         stopResize = (e) => {
  883.  
  884.             document.documentElement.removeEventListener("mousemove", resizeWindow, false);
  885.             document.documentElement.removeEventListener("mousemove", moveWindow, false);
  886.             document.documentElement.removeEventListener("mouseup", stopResize, false);
  887.             document.documentElement.removeEventListener("mouseup", stopMove, false);
  888.  
  889.             document.documentElement.removeAttribute('moving');
  890.  
  891.             e.stopImmediatePropagation();
  892.             e.stopPropagation();
  893.  
  894.         }
  895.  
  896.         stopMove = (e) => {
  897.  
  898.             document.documentElement.removeEventListener("mousemove", resizeWindow, false);
  899.             document.documentElement.removeEventListener("mousemove", moveWindow, false);
  900.             document.documentElement.removeEventListener("mouseup", stopResize, false);
  901.             document.documentElement.removeEventListener("mouseup", stopMove, false);
  902.  
  903.             document.documentElement.removeAttribute('moving');
  904.             beforeEvent && checkClick(beforeEvent, e);
  905.             beforeEvent = null;
  906.  
  907.             e.stopImmediatePropagation();
  908.             e.stopPropagation();
  909.  
  910.         }
  911.  
  912.  
  913.         function reset() {
  914.  
  915.             document.documentElement.removeAttribute('moving');
  916.             document.documentElement.removeEventListener("mousemove", resizeWindow, false);
  917.             document.documentElement.removeEventListener("mousemove", moveWindow, false);
  918.             document.documentElement.removeEventListener("mouseup", stopResize, false);
  919.             document.documentElement.removeEventListener("mouseup", stopMove, false);
  920.  
  921.  
  922.             startX = 0;
  923.             startY = 0;
  924.             startWidth = 0;
  925.             startHeight = 0;
  926.  
  927.  
  928.             edge = 0;
  929.  
  930.  
  931.             initialLeft = 0;
  932.             initialTop = 0;
  933.  
  934.             beforeEvent = null;
  935.  
  936.  
  937.         }
  938.  
  939.         function iframeLoaded() {
  940.  
  941.         }
  942.  
  943.         function iframeFullscreenChanged() {
  944.             const iframeDoc = this;
  945.  
  946.  
  947.             _lastStyleText = null;
  948.  
  949.             if (!document.fullscreenElement) {
  950.                 activeStyle = false;
  951.                 iframeDoc.documentElement.classList.remove('youtube-floating-chat-iframe');
  952.             } else {
  953.                 activeStyle = true;
  954.                 iframeDoc.documentElement.classList.add('youtube-floating-chat-iframe');
  955.  
  956.             }
  957.  
  958.  
  959.         }
  960.  
  961.         let iframeFullscreenChangedBinded = null;
  962.  
  963.  
  964.  
  965.         function onMessage(evt) {
  966.             if (evt.data === hkey_script) {
  967.  
  968.                 const iframeWin = evt.source;
  969.                 if (!iframeWin) return;
  970.                 const iframeDoc = iframeWin.document;
  971.  
  972.  
  973.                 function onReady() {
  974.  
  975.                     iframeDoc.head.appendChild(document.createElement('style')).textContent = createStyleTextForIframe();
  976.  
  977.  
  978.  
  979.  
  980.  
  981.  
  982.                     const tm = document.createElement('template');
  983.                     tm.innerHTML = svgDefs();
  984.                     iframeDoc.body.appendChild(tm.content)
  985.  
  986.                     if (iframeFullscreenChangedBinded) document.removeEventListener('fullscreenchange', iframeFullscreenChangedBinded, false);
  987.                     iframeFullscreenChangedBinded = iframeFullscreenChanged.bind(iframeDoc);
  988.                     document.addEventListener('fullscreenchange', iframeFullscreenChangedBinded, false);
  989.  
  990.                     iframeFullscreenChangedBinded();
  991.  
  992.  
  993.  
  994.  
  995.  
  996.                     setInterval(() => {
  997.  
  998.                         if (!activeStyle) return;
  999.  
  1000.  
  1001.                         let xpathExpression = "//style[text()[contains(., 'userscript-control[floating-chat-iframe]')]]";
  1002.  
  1003.                         // Evaluating the XPath expression and getting string value directly
  1004.                         let result = iframeDoc.evaluate(xpathExpression, iframeDoc, null, XPathResult.STRING_TYPE, null);
  1005.  
  1006.                         let newText = result && result.stringValue ? result.stringValue : null;
  1007.  
  1008.                         if (newText !== _lastStyleText) {
  1009.                             _lastStyleText = newText;
  1010.                             // console.log(123)
  1011.  
  1012.                             let tid = ++tvc;
  1013.  
  1014.                             getRafPromise().then(() => {
  1015.  
  1016.                                 if (tid !== tvc) return;
  1017.  
  1018.  
  1019.  
  1020.                                 let style = iframeWin.getComputedStyle(iframeDoc.documentElement);
  1021.  
  1022.                                 let fc = style.getPropertyValue('--floodcolor');
  1023.                                 if (fc) {
  1024.  
  1025.                                     console.log(fc)
  1026.  
  1027.  
  1028.                                     let floodColor03 = iframeDoc.querySelector('#floodColor-03');
  1029.                                     floodColor03 && floodColor03.setAttribute('flood-color', fc);
  1030.  
  1031.                                     let floodColor04 = iframeDoc.querySelector('#floodColor-04');
  1032.                                     floodColor04 && floodColor04.setAttribute('flood-color', fc);
  1033.  
  1034.                                     iframeDoc.documentElement.setAttribute('hpkns', '')
  1035.                                 } else {
  1036.                                     iframeDoc.documentElement.removeAttribute('hpkns')
  1037.  
  1038.                                 }
  1039.  
  1040.  
  1041.  
  1042.  
  1043.                             });
  1044.  
  1045.  
  1046.  
  1047.                         }
  1048.  
  1049.  
  1050.  
  1051.                     }, 100);
  1052.  
  1053.  
  1054.                 }
  1055.  
  1056.                 Promise.resolve().then(() => {
  1057.  
  1058.                     if (iframeDoc.readyState !== 'loading') {
  1059.                         onReady();
  1060.                     } else {
  1061.                         iframeWin.addEventListener("DOMContentLoaded", onReady, false);
  1062.                     }
  1063.  
  1064.                 });
  1065.  
  1066.  
  1067.             }
  1068.  
  1069.         }
  1070.  
  1071.         let moInt = 0;
  1072.         const mutationObserverFn = () => {
  1073.             if (moInt > 1e9) moInt = 9;
  1074.             const t = ++moInt;
  1075.             getRafPromise().then(() => {
  1076.                 if (t !== moInt) return;
  1077.  
  1078.                 const chatWindow = chatWindowWR ? kRef(chatWindowWR) : null;
  1079.  
  1080.                 if (!(chatWindow instanceof Element)) return;
  1081.                 const chatWindowCnt = insp(chatWindow);
  1082.  
  1083.                 if (!chatWindowCnt) return;
  1084.  
  1085.                 const btn = HTMLElement.prototype.querySelector.call(chatWindow, '#show-hide-button[hidden]')
  1086.                 if (!btn) return;
  1087.  
  1088.                 btn.removeAttribute('hidden');
  1089.                 const liveChatRenderer = ((chatWindowCnt || 0).data || 0).liveChatRenderer || 0;
  1090.                 if (liveChatRenderer && liveChatRenderer.showButton && !liveChatRenderer.showHideButton) {
  1091.  
  1092.  
  1093.                     btn.setAttribute('is-show-button', '')
  1094.                 }
  1095.  
  1096.             });
  1097.  
  1098.         };
  1099.         const mutationObserver = new MutationObserver(mutationObserverFn);
  1100.  
  1101.         function setChat(chat) {
  1102.  
  1103.             if (!(chat instanceof Element)) return;
  1104.             let resizeHandle = HTMLElement.prototype.querySelector.call(chat, '.resize-handle')
  1105.             if (resizeHandle) return;
  1106.  
  1107.             const chatDollar = insp(chat).$ || chat.$ || 0;
  1108.  
  1109.             let cw = (() => {
  1110.                 try {
  1111.                     const { head, body } = chatDollar.chatframe.contentWindow.document;
  1112.                     return { head, body }
  1113.  
  1114.                 } catch (e) { return null; }
  1115.             })();
  1116.  
  1117.             if (!cw) return;
  1118.  
  1119.             window.removeEventListener('message', onMessage, false);
  1120.             window.addEventListener('message', onMessage, false);
  1121.  
  1122.  
  1123.  
  1124.             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;
  1125.             if (!script) addCSS(createStyleTextForTopWin);
  1126.             /*
  1127.             const tm = document.createElement('template');
  1128.             tm.innerHTML=svgDefs();
  1129.             document.body.appendChild(tm.content)
  1130.             */
  1131.  
  1132.             if (!document.documentElement.hasAttribute('floating-chat-window')) document.documentElement.setAttribute('floating-chat-window', '');
  1133.  
  1134.  
  1135.             chat.setAttribute('allowtransparency', 'true');
  1136.  
  1137.  
  1138.  
  1139.             resizeHandle = document.createElement("div");
  1140.             resizeHandle.className = "resize-handle";
  1141.             chat.appendChild(resizeHandle);
  1142.             resizeHandle = null;
  1143.  
  1144.             let chatWindow;
  1145.             let showHideButton;
  1146.             let showButton;
  1147.  
  1148.             chatWindow = kRef(chatWindowWR);
  1149.             showHideButton = kRef(showHideButtonWR);
  1150.             showButton = kRef(showButtonWR);
  1151.  
  1152.  
  1153.  
  1154.             if (chatWindow) chatWindow.removeEventListener("mousedown", initializeResize, false);
  1155.             if (showHideButton) showHideButton.removeEventListener("mousedown", initializeMove, false);
  1156.             else if (showButton) showButton.removeEventListener("mousedown", initializeMove, false);
  1157.  
  1158.             if (chat) {
  1159.                 mutationObserver.observe(chat, { attributes: true, attributeFilter: ['collapsed'] });
  1160.                 mutationObserverFn();
  1161.             }
  1162.  
  1163.  
  1164.             chatWindow = chat;
  1165.             showHideButton = filteroutHidden(HTMLElement.prototype.querySelector.call(chat, '#show-hide-button'));
  1166.             showButton = filteroutHidden(HTMLElement.prototype.querySelector.call(chat, '#show-button'));
  1167.             chatWindowWR = mWeakRef(chat)
  1168.             showHideButtonWR = mWeakRef(showHideButton);
  1169.             showButtonWR = mWeakRef(showButton);
  1170.  
  1171.  
  1172.  
  1173.             if (chatWindow) chatWindow.addEventListener("mousedown", initializeResize, false);
  1174.             if (showHideButton) showHideButton.addEventListener("mousedown", initializeMove, false);
  1175.             else if (showButton) showButton.addEventListener("mousedown", initializeMove, false);
  1176.  
  1177.             reset();
  1178.  
  1179.         }
  1180.  
  1181.  
  1182.         const fullscreenchangePageFn = () => {
  1183.             if (!document.fullscreenElement) {
  1184.                 document.documentElement.classList.remove('no-floating')
  1185.             }
  1186.         };
  1187.  
  1188.  
  1189.         function noChat(chat) {
  1190.  
  1191.             if (!(chat instanceof Element)) return;
  1192.  
  1193.             let chatWindow;
  1194.             let showHideButton;
  1195.             let showButton;
  1196.  
  1197.             chatWindow = kRef(chatWindowWR);
  1198.             showHideButton = kRef(showHideButtonWR);
  1199.             showButton = kRef(showButtonWR);
  1200.  
  1201.  
  1202.  
  1203.             if (chatWindow) chatWindow.removeEventListener("mousedown", initializeResize, false);
  1204.             if (showHideButton) showHideButton.removeEventListener("mousedown", initializeMove, false);
  1205.             else if (showHideButton) showHideButton.removeEventListener("mousedown", initializeMove, false);
  1206.  
  1207.  
  1208.             let resizeHandle = HTMLElement.prototype.querySelector.call(chat, '.resize-handle')
  1209.             if (resizeHandle) {
  1210.                 resizeHandle.remove();
  1211.             }
  1212.  
  1213.             chat.removeEventListener("mousedown", initializeResize, false);
  1214.  
  1215.  
  1216.             showHideButton = filteroutHidden(HTMLElement.prototype.querySelector.call(chat, '#show-hide-button'));
  1217.             showButton = filteroutHidden(HTMLElement.prototype.querySelector.call(chat, '#show-button'));
  1218.  
  1219.             if (showHideButton) showHideButton.removeEventListener("mousedown", initializeMove, false);
  1220.             else if (showButton) showButton.removeEventListener("mousedown", initializeMove, false);
  1221.  
  1222.  
  1223.             reset();
  1224.         }
  1225.  
  1226.  
  1227.         document.removeEventListener('fullscreenchange', fullscreenchangePageFn, false);
  1228.         document.addEventListener('fullscreenchange', fullscreenchangePageFn, false);
  1229.         fullscreenchangePageFn();
  1230.  
  1231.         customYtElements.whenRegistered('ytd-live-chat-frame', (proto) => {
  1232.  
  1233.  
  1234.             proto.attached = ((attached) => (function () { Promise.resolve(this.hostElement || this).then(setChat).catch(console.warn); return attached.apply(this, arguments) }))(proto.attached);
  1235.  
  1236.             proto.detached = ((detached) => (function () { Promise.resolve(this.hostElement || this).then(noChat).catch(console.warn); return detached.apply(this, arguments) }))(proto.detached);
  1237.  
  1238.             let chat = document.querySelector('ytd-live-chat-frame');
  1239.             if (chat) Promise.resolve(chat).then(setChat).catch(console.warn);
  1240.  
  1241.         })
  1242.  
  1243.  
  1244.     });
  1245.  
  1246.     (!isTopFrame && isIframe && top === parent) && top.postMessage(hkey_script, `${location.protocol}//${location.hostname}`);
  1247.  
  1248.  
  1249.  
  1250.  
  1251.  
  1252.  
  1253.  
  1254. })({ requestAnimationFrame });