WIP

src/ext/lib/uwui/ClientMenu.ts

@@ -10,6 +10,16 @@ export class ClientMenu {
 
   private menuPositionClasses: string[] = [];
 
+
+  private isHovered = false;
+  private isWithinActivation = false;
+  private lastMouseMove = performance.now();
+  private idleTimer?: number;
+
+  private onDocumentMouseMove?: (e: MouseEvent) => void;
+  private onDocumentMouseLeave?: () => void;
+  private idleIntervalId?: number;
+
   constructor(private config: MenuConfig) {}
 
   mount(anchorElement: HTMLElement) {
@@ -24,9 +34,55 @@ export class ClientMenu {
     anchorElement.appendChild(this.host);
   }
 
+  public destroy() {
+    // 1. Stop timers
+    if (this.idleIntervalId != null) {
+      clearInterval(this.idleIntervalId);
+      this.idleIntervalId = undefined;
+    }
+
+    // 2. Remove global listeners
+    if (this.onDocumentMouseMove) {
+      document.removeEventListener('mousemove', this.onDocumentMouseMove);
+      this.onDocumentMouseMove = undefined;
+    }
+
+    if (this.onDocumentMouseLeave) {
+      document.removeEventListener('mouseleave', this.onDocumentMouseLeave);
+      this.onDocumentMouseLeave = undefined;
+    }
+
+    // 3. Remove DOM
+    if (this.host && this.host.parentNode) {
+      this.host.parentNode.removeChild(this.host);
+    }
+
+    // 4. Clear references
+    this.shadow = undefined as any;
+    this.root = undefined as any;
+    this.host = undefined as any;
+
+    // 5. Reset state
+    this.visible = false;
+    this.isHovered = false;
+    this.isWithinActivation = false;
+  }
+
+  private getActivationRadius(anchorEl: HTMLElement): number | null {
+    if (this.config.activationRadius == null) return null;
+
+    if (typeof this.config.activationRadius === 'number') {
+      return this.config.activationRadius;
+    }
+
+    // percentage string
+    const rect = anchorEl.getBoundingClientRect();
+    const pct = parseFloat(this.config.activationRadius);
+    return Math.max(rect.width, rect.height) * (pct / 100);
+  }
+
   private injectStyles() {
-    const style = document.createElement("style");
+    const style = document.createElement('style');
-    console.warn('imported styles: imported CSS (raw):', typeof extensionCss, extensionCss);
     let css =  extensionCss
       .trim()
       .replace(/'html, body \{/g, ':host {')
@@ -40,8 +96,8 @@ export class ClientMenu {
     css = `
       ${cssArr[0]}
       @font-face {
-        font-family: "Heebo";
+        font-family: 'Heebo';
-        src: url(__FONT_HEEBO__) format("truetype-variations");
+        src: url(__FONT_HEEBO__) format('truetype-variations');
         font-weight: 100 900;
         font-stretch: 75% 125%;
         font-style: normal;
@@ -49,16 +105,16 @@ export class ClientMenu {
       }
 
       @font-face {
-        font-family: "Source Code Pro";
+        font-family: 'Source Code Pro';
-        src: url(__FONT_SCP__) format("truetype-variations");
+        src: url(__FONT_SCP__) format('truetype-variations');
         font-weight: 200 900;
         font-style: normal;
         font-display: swap;
       }
 
       @font-face {
-        font-family: "Source Code Pro";
+        font-family: 'Source Code Pro';
-        src: url(__FONT_SCPI__) format("truetype-variations");
+        src: url(__FONT_SCPI__) format('truetype-variations');
         font-weight: 200 900;
         font-style: italic;
         font-display: swap;
@@ -66,8 +122,6 @@ export class ClientMenu {
       ${cssRemainder};
     `;
 
-    console.log('+————————————————————————————————————', cssRemainder)
-
     css = css
       .replace('__FONT_HEEBO__', chrome.runtime.getURL('/ui/res/fonts/Heebo.ttf'))
       .replace('__FONT_SCP__', chrome.runtime.getURL('/ui/res/fonts/SourceCodePro.ttf'))
@@ -80,25 +134,25 @@ export class ClientMenu {
   }
 
   private createHost() {
-    this.host = document.createElement("div");
+    this.host = document.createElement('div');
     this.host.classList.add('uw-ultrawidify-container-root');
 
     Object.assign(this.host.style, {
-      position: this.config.isGlobal ? "fixed" : "absolute",
+      position: this.config.isGlobal ? 'fixed' : 'absolute',
       left: 0,
       top: 0,
       border: 0,
-      width: "100%",
+      width: '100%',
-      height: "100%",
+      height: '100%',
-      zIndex: this.config.isGlobal ? "2147483647" : "2147483640",
+      zIndex: this.config.isGlobal ? '2147483647' : '2147483640',
-      // pointerEvents: "none",
+      pointerEvents: 'none',
     });
 
     console.log('UI host created:', this.host);
   }
 
   private createShadow() {
-    this.shadow = this.host.attachShadow({ mode: "open" });
+    this.shadow = this.host.attachShadow({ mode: 'open' });
     this.injectStyles();
   }
 
@@ -142,33 +196,45 @@ export class ClientMenu {
   }
 
   private createMenu() {
-    this.root = document.createElement("div");
+    this.root = document.createElement('div');
-    this.root.className = "uw-menu-root font-mono";
+    this.root.className = 'uw-menu-root uw-hidden';
 
-    const trigger = document.createElement("div");
+    const trigger = document.createElement('div');
-    trigger.classList = "uw-menu-trigger uw-trigger";
+    trigger.classList = 'uw-menu-trigger uw-trigger';
-    trigger.textContent = "Ultrawidify";
+    trigger.textContent = 'Ultrawidify';
 
     const submenu = this.buildSubmenu(this.config.items);
 
-    trigger.addEventListener("mouseenter", () => this.show());
+    trigger.addEventListener('mouseenter', () => this.show());
-    this.root.addEventListener("mouseleave", () => this.hide());
+    this.root.addEventListener('mouseleave', () => {
+      this.isHovered = false;
+      this.hide();
+    });
 
-    console.log('menu position classes:', this.menuPositionClasses)
     this.root.classList.add(...this.menuPositionClasses);
 
     trigger.appendChild(submenu);
     this.root.append(trigger);
     this.shadow.appendChild(this.root);
+
+    this.root.addEventListener('mouseenter', () => {
+      this.isHovered = true;
+      this.show();
+    });
+
+    this.root.addEventListener('mouseleave', () => {
+      this.isHovered = false;
+      this.updateVisibility();
+    });
   }
 
   private buildSubmenu(items: MenuItemConfig[]): HTMLDivElement {
-    const menu = document.createElement("div");
+    const menu = document.createElement('div');
-    menu.classList = "uw-submenu";
+    menu.classList = 'uw-submenu';
     menu.classList.add(...this.menuPositionClasses);
 
     for (const item of items) {
-      const el = document.createElement("div");
+      const el = document.createElement('div');
       el.className = `uw-menu-item uw-trigger`;
 
       if (item.customHTML) {
@@ -178,10 +244,10 @@ export class ClientMenu {
       }
 
       if (item.action) {
-        el.addEventListener("click", e => {
+        el.addEventListener('click', e => {
           e.stopPropagation();
           item.action?.();
-          this.hide();
+          // this.hide(); //  maybe dont
         });
       }
 
@@ -197,25 +263,7 @@ export class ClientMenu {
 
   private position(anchorEl: HTMLElement) {
     let appendClassList: string[] = [];
-
-
-
     anchorEl.classList.add(...appendClassList);
-
-    // switch (this.config.anchor) {
-    //   case "LeftCenter":
-    //     r.left = "0";
-    //     r.top = "50%";
-    //     r.transform = "translateY(-50%)";
-    //     break;
-
-    //   case "TopLeft":
-    //     r.left = "0";
-    //     r.top = "0";
-    //     break;
-
-    //   // others are trivial extensions
-    // }
   }
 
   private bindGlobalMouse(anchorEl: HTMLElement) {
@@ -223,28 +271,80 @@ export class ClientMenu {
     const cx = rect.left + rect.width / 2;
     const cy = rect.top + rect.height / 2;
 
-    document.addEventListener("mousemove", e => {
+    const activationRadius = this.getActivationRadius(anchorEl);
-      const d = Math.hypot(e.clientX - cx, e.clientY - cy);
+
-      if (d < this.config.activationRadius) {
+    this.onDocumentMouseMove = (e: MouseEvent) => {
-        this.show();
+      this.lastMouseMove = performance.now();
-      } else if (!this.root.matches(":hover")) {
+
+      if (activationRadius != null) {
+        const d = Math.hypot(e.clientX - cx, e.clientY - cy);
+        this.isWithinActivation = d <= activationRadius;
+      } else {
+        this.isWithinActivation =
+          e.clientX >= rect.left &&
+          e.clientX <= rect.right &&
+          e.clientY >= rect.top &&
+          e.clientY <= rect.bottom;
+      }
+
+      this.updateVisibility();
+    };
+
+    this.onDocumentMouseLeave = () => {
+      this.isHovered = false;
+      this.isWithinActivation = false;
+      this.hide();
+    };
+
+    document.addEventListener('mousemove', this.onDocumentMouseMove);
+    document.addEventListener('mouseleave', this.onDocumentMouseLeave);
+
+    this.startIdleWatcher();
+  }
+
+  private startIdleWatcher() {
+    this.idleIntervalId = window.setInterval(() => {
+      const idle = performance.now() - this.lastMouseMove > 1000;
+      if (idle) {
         this.hide();
       }
-    });
+    }, 200);
+  }
+
+
+  private updateVisibility() {
+    const idle = performance.now() - this.lastMouseMove > 1000;
+
+    if (this.isHovered) {
+      this.show();
+      return;
+    }
+
+    if (this.isWithinActivation && !idle) {
+      this.show();
+      return;
+    }
+
+    if (this.visible) {
+      this.hide();
+    }
   }
 
   private show() {
+    this.lastMouseMove = performance.now();
+
     if (!this.visible) {
       this.visible = true;
-      this.root.classList.add("uw-visible");
+      this.root.classList.add('uw-visible');
-      this.root.classList.remove("uw-hidden");
+      this.root.classList.remove('uw-hidden');
     }
   }
 
   private hide() {
     if (this.visible) {
       this.visible = false;
-      this.root.classList.remove("uw-visible");
+      this.root.classList.remove('uw-visible');
+      this.root.classList.add('uw-hidden');
     }
   }
 }

src/ext/lib/uwui/UI.ts

@@ -3,7 +3,10 @@ import { ClientMenu } from './ClientMenu';
 import EventBus from '../EventBus';
 import PlayerData from '../video-data/PlayerData';
 import { SiteSettings } from '../settings/SiteSettings';
-import { MenuPosition as MenuPosition } from '../../../common/interfaces/ClientUiMenu.interface';
+import Settings from '../settings/Settings';
+
+import { MenuPosition as MenuPosition } from '@src/common/interfaces/ClientUiMenu.interface';
+import { CommandInterface } from '@src/common/interfaces/SettingsInterface';
 
 if (process.env.CHANNEL !== 'stable'){
   console.info("Loading: UI");
@@ -22,22 +25,19 @@ class UI {
 
   isGlobal: boolean;
   isIframe: boolean;
+
   private eventBus: EventBus;
   private playerData: PlayerData;
   private uiSettings: any;
+  private settings: Settings;
   private siteSettings: SiteSettings;
-  private disablePointerEvents: boolean = false;
-
-  private iframeErrorCount: number = 0;
-  private iframeConfirmed: boolean = false;
-  private iframeRejected: boolean = false;
-  private delayedDestroyTimer: any = undefined;
 
   private csuiScheme;
-  private extensionBase: string;
 
   // These can prolly be removed:
-  lastProbeResponseTs: number
+  lastProbeResponseTs: number;
+
+  private extensionMenu: ClientMenu;
 
   constructor(
     public interfaceId,
@@ -53,18 +53,13 @@ class UI {
     this.playerData = uiConfig.playerData;
     this.uiSettings = uiConfig.uiSettings;
     this.siteSettings = uiConfig.siteSettings;
-
+    this.settings = uiConfig.settings;
-    this.iframeErrorCount = 0;
-    this.iframeConfirmed = false;
-    this.iframeRejected = false;
-
-    this.delayedDestroyTimer = null;
 
     // TODO: at some point, UI should be different for global popup and in-player UI
     this.csuiScheme = this.getCsuiScheme();
     const csuiVersion = this.getCsuiVersion(this.csuiScheme.contentScheme);
     // this.uiURI = chrome.runtime.getURL(`/csui/${csuiVersion}.html`);
-    this.extensionBase = chrome.runtime.getURL('').replace(/\/$/, "");
+    // this.extensionBase = chrome.runtime.getURL('').replace(/\/$/, "");
 
     // UI will be initialized when setUiVisibility is called
     if (!this.isGlobal) {
@@ -72,23 +67,85 @@ class UI {
     }
   }
 
-  canRun() {
+  async init() {
-    if (this.isGlobal) {
+    this.destroy()
-      return true;
+    this.createExtensionMenu();
-    }
 
-    return this.siteSettings?.data.enableUI !== ExtensionMode.Disabled;
+    // this.initUIContainer();
+    // this.initMessaging();
   }
 
-  async init() {
+  executeCommand(x: CommandInterface) {
-    if (!this.canRun()) {
+    this.eventBus.send(x.action, x.arguments);
-      return;
+  }
+
+  createExtensionMenu() {
+    console.log('—>—— creating ext menu:. is enabled?', this.siteSettings?.data.enableUI, ExtensionMode[this.siteSettings?.data.enableUI], this.siteSettings?.data.enableUI === ExtensionMode.Disabled, 'global?', this.isGlobal)
+    if (+this.siteSettings?.data.enableUI === ExtensionMode.Disabled || this.isGlobal) {
+      console.log('we said no to UI')
+      return; // don't
+    }
+    if (this.extensionMenu) {
+      this.extensionMenu.destroy();
+    }
+    if (this.uiConfig.parentElement) {
+      const menuConfig = {
+        isGlobal: this.isGlobal,
+        menuPosition: MenuPosition.Left,
+        items: [
+          {
+            label: "todo: site + site compatibility info"
+          },
+          {
+            label: 'Crop',
+            subitems: this.settings.active.commands.crop.map((x: CommandInterface) => {
+              return {
+                label: x.label,
+                action: () => this.executeCommand(x)
+              }
+            })
+          },
+          {
+            label: 'Zoom (presets)',
+            subitems: [
+              ... this.settings.active.commands.zoom.map((x: CommandInterface) => {
+                return {
+                  label: x.label,
+                  action: () => this.executeCommand(x)
+                }
+              }),
+            ]
+          },
+          {
+            label: 'Stretch',
+            subitems: this.settings.active.commands.stretch.map((x: CommandInterface) => {
+              return {
+                label: x.label,
+                action: () => this.executeCommand(x)
+              }
+            })
+          },
+          {
+            label: 'Zoom (free-form)',
+            subitems: [
+              {label: 'todo sliders'}
+            ]
+          },
+          {
+            label: 'Align',
+            subitems: [{label: 'todo pls'}]
+          },
+          {
+            label: 'todo: open settings'
+          },
+          {
+            label: 'todo: first-time "customize/hide menu" option'
+          }
+        ]
+      }
+      this.extensionMenu = new ClientMenu(menuConfig);
+      this.extensionMenu.mount(this.uiConfig.parentElement);
     }
-
-
-    this.initUIContainer();
-    this.loadIframe();
-    this.initMessaging();
   }
 
   /**
@@ -118,249 +175,91 @@ class UI {
     const random = Math.round(Math.random() * 69420);
     const uwid = `uw-ultrawidify-${this.interfaceId}-root-${random}`
 
-    if (this.uiConfig.parentElement) {
+
-      const uwMenu = new ClientMenu({
-        isGlobal: this.isGlobal,
-        menuPosition: MenuPosition.Left,
-        items: [
-          {label: 'test'},
-          {label: 'test nested', subitems: [{label: 'sub test'}, {label: 'sub test 2'}]}
-        ]
-      });
-      uwMenu.mount(this.uiConfig.parentElement);
-    }
     return;
-
-    const rootDiv = document.createElement('div');
-
-    if (this.uiConfig.additionalStyle) {
-      rootDiv.setAttribute('style', this.uiConfig.additionalStyle);
-    }
-    rootDiv.setAttribute('id', uwid);
-    rootDiv.classList.add('uw-ultrawidify-container-root');
-    rootDiv.style.width = "100%";
-    rootDiv.style.height = "100%";
-    rootDiv.style.position = this.isGlobal ? "fixed" : "absolute";
-    rootDiv.style.zIndex = this.isGlobal ? '90009' : '90000';
-    rootDiv.style.border = 0;
-    rootDiv.style.top = 0;
-    rootDiv.style.pointerEvents = 'none';
-
-    if (this.uiConfig?.parentElement) {
-      this.uiConfig.parentElement.appendChild(rootDiv);
-    } else {
-      document.body.appendChild(rootDiv);
-    }
-
-    this.rootDiv = rootDiv;
   }
 
-  loadIframe() {
+  // initMessaging() {
-    return;
+  //   // subscribe to events coming back to us. Unsubscribe if iframe vanishes.
-    // in onMouseMove, we currently can't access this because we didn't
+  //   window.addEventListener('message', this.messageHandlerFn);
-    // do things the most properly
-    const uiURI = this.uiURI;
 
-    const iframe = document.createElement('iframe');
+  //   /* set up event bus tunnel from content script to UI — necessary if we want to receive
-    iframe.setAttribute('src', uiURI);
+  //    * like current zoom levels & current aspect ratio & stuff. Some of these things are
-    iframe.setAttribute("allowTransparency", 'true');
+  //    * necessary for UI display in the popup.
-    // iframe.style.width = "100%";
+  //    */
-    // iframe.style.height = "100%";
-    iframe.style.position = "absolute";
-    iframe.style.zIndex =  this.isGlobal ? '90009' : '90000';
-    iframe.style.border = 0;
-    iframe.style.pointerEvents = 'none';
-    iframe.style.opacity = 0;
-    iframe.style.backgroundColor = 'transparent !important';
 
-    // If colorScheme is defined via CSS on the HTML or BODY elements, then we need to also
+  //   this.eventBus.subscribeMulti(
-    // put a matching style to the iframe itself. Using the correct UI template is not enough.
+  //     {
-    if (this.csuiScheme.iframeScheme) {
+  //       'uw-config-broadcast': {
-      iframe.style.colorScheme = this.csuiScheme.iframeScheme;
+  //         function: (config, routingData) => {
-    }
+  //           this.sendToIframe('uw-config-broadcast', config, routingData);
+  //         }
+  //       },
+  //       'uw-set-ui-state': {
+  //         function: (config, routingData)  => {
+  //           if (config.globalUiVisible !== undefined && !this.isIframe) {
+  //             if (this.isGlobal) {
+  //               this.setUiVisibility(config.globalUiVisible);
+  //             } else {
+  //               this.setUiVisibility(!config.globalUiVisible);
+  //             }
+  //           }
+  //           this.sendToIframe('uw-set-ui-state', {...config, isGlobal: this.isGlobal}, routingData);
+  //         }
+  //       },
+  //       'uw-get-page-stats': {
+  //         function: (config, routingData) => {
+  //           this.eventBus.send(
+  //             'uw-page-stats',
+  //             {
+  //               pcsDark: window.matchMedia('(prefers-color-scheme: dark)').matches,
+  //               pcsLight: window.matchMedia('(prefers-color-scheme: light)').matches,
+  //               colorScheme: window.getComputedStyle( document.body ,null).getPropertyValue('color-scheme')
+  //             },
+  //             {
+  //               comms: {
+  //                 forwardTo: 'popup'
+  //               }
+  //             }
+  //           );
+  //         }
+  //       },
+  //       'uw-restore-ui-state': {
+  //         function: (config, routingData) => {
+  //           if (!this.isGlobal) {
+  //             this.setUiVisibility(true);
+  //             this.sendToIframe('uw-restore-ui-state', config, routingData);
+  //           }
+  //         }
+  //       }
+  //     },
+  //     this
+  //   );
+  // }
 
-    /* so we have a problem: we want iframe to be clickthrough everywhere except
+  // messageHandlerFn = (message) => {
-     * on our actual overlay. There's no nice way of doing that, so we need some
+  //   if (!this.uiIframe?.contentWindow) {
-     * extra javascript to deal with this.
+  //     window.removeEventListener('message', this.messageHandlerFn);
-     *
+  //     return;
-     * There's a second problem: while iframe is in clickable mode, onMouseMove
+  //   }
-     * will not work (as all events will be hijacked by the iframe). This means
+  //   this.handleMessage(message);
-     * that iframe also needs to run its own instance of onMouseMove.
+  // }
-     */
-
-    // set uiIframe for handleMessage
-    this.uiIframe = iframe;
-
-    // set not visible by default
-    // this.setUiVisibility(false);
-
-    const fn = (event) => {
-      // remove self on fucky wuckies
-      if (!iframe?.contentWindow ) {
-        document.removeEventListener('mousemove', fn, true);
-        return;
-      }
-
-      const rect = this.uiIframe.getBoundingClientRect();
-
-      const offsets = {
-        top: window.scrollY + rect.top,
-        left: window.scrollX + rect.left
-      };
-
-      const coords = {
-        x: event.pageX - offsets.left,
-        y: event.pageY - offsets.top,
-        frameOffset: offsets,
-      };
-
-      const playerData = this.canShowUI(coords);
-
-      // ask the iframe to check whether there's a clickable element
-      this.uiIframe.contentWindow.postMessage(
-        {
-          action: 'uwui-probe',
-          coords,
-          playerDimensions: playerData.playerDimensions,
-          canShowUI: playerData.canShowUI,
-          isIframe: this.isIframe,
-          ts: +new Date()   // this should be accurate enough for our purposes,
-        },
-        uiURI
-      );
-    }
-
-    // NOTE: you cannot communicate with UI iframe inside onload function.
-    // onload triggers after iframe is initialized, but BEFORE vue finishes
-    // setting up all the components.
-    // If we need to have any data inside the vue component, we need to
-    // request that data from vue components.
-    iframe.onload = function() {
-      document.addEventListener('mousemove', fn, true);
-    }
-
-    this.eventBus.forwardToIframe(
-        this.uiIframe,
-        (action, payload) => {
-          this.sendToIframe(action, payload, {})
-        }
-      );
-
-    this.rootDiv.appendChild(iframe);
-  }
-
-  unloadIframe() {
-    this.eventBus.cancelIframeForwarding(this.uiIframe);
-    window.removeEventListener('message', this.messageHandlerFn);
-    this.uiIframe?.remove();
-    delete this.uiIframe;
-  }
-
-
-  initMessaging() {
-    // subscribe to events coming back to us. Unsubscribe if iframe vanishes.
-    window.addEventListener('message', this.messageHandlerFn);
-
-    /* set up event bus tunnel from content script to UI — necessary if we want to receive
-     * like current zoom levels & current aspect ratio & stuff. Some of these things are
-     * necessary for UI display in the popup.
-     */
-
-    this.eventBus.subscribeMulti(
-      {
-        'uw-config-broadcast': {
-          function: (config, routingData) => {
-            this.sendToIframe('uw-config-broadcast', config, routingData);
-          }
-        },
-        'uw-set-ui-state': {
-          function: (config, routingData)  => {
-            if (config.globalUiVisible !== undefined && !this.isIframe) {
-              if (this.isGlobal) {
-                this.setUiVisibility(config.globalUiVisible);
-              } else {
-                this.setUiVisibility(!config.globalUiVisible);
-              }
-            }
-            this.sendToIframe('uw-set-ui-state', {...config, isGlobal: this.isGlobal}, routingData);
-          }
-        },
-        'uw-get-page-stats': {
-          function: (config, routingData) => {
-            this.eventBus.send(
-              'uw-page-stats',
-              {
-                pcsDark: window.matchMedia('(prefers-color-scheme: dark)').matches,
-                pcsLight: window.matchMedia('(prefers-color-scheme: light)').matches,
-                colorScheme: window.getComputedStyle( document.body ,null).getPropertyValue('color-scheme')
-              },
-              {
-                comms: {
-                  forwardTo: 'popup'
-                }
-              }
-            );
-          }
-        },
-        'uw-restore-ui-state': {
-          function: (config, routingData) => {
-            if (!this.isGlobal) {
-              this.setUiVisibility(true);
-              this.sendToIframe('uw-restore-ui-state', config, routingData);
-            }
-          }
-        }
-      },
-      this
-    );
-  }
-
-  messageHandlerFn = (message) => {
-    if (!this.uiIframe?.contentWindow) {
-      window.removeEventListener('message', this.messageHandlerFn);
-      return;
-    }
-    this.handleMessage(message);
-  }
 
   setUiVisibility(visible) {
     return;
-    // console.log('uwui - setting ui visibility!', visible, this.isGlobal ? 'global' : 'page', this.uiIframe, this.rootDiv);
-    // if (!this.uiIframe || !this.rootDiv) {
-    //   this.init();
-    // }
-
-    if (visible) {
-      this.rootDiv.style.width = '100%';
-      this.rootDiv.style.height = '100%';
-      this.uiIframe.style.width = '100%';
-      this.uiIframe.style.height = '100%';
-
-      // if (this.delayedDestroyTimer) {
-      //   clearTimeout(this.delayedDestroyTimer);
-      // }
-    } else {
-      this.rootDiv.style.width = '0px';
-      this.rootDiv.style.height = '0px';
-      this.uiIframe.style.width = '0px';
-      this.uiIframe.style.height = '0px';
-
-      // destroy after 30 seconds of UI being hidden
-      // this.delayedDestroyTimer = setTimeout( () => this.unloadIframe(), 30000);
-    }
   }
 
   async enable() {
     // if root element is not present, we need to init the UI.
-    if (!this.rootDiv) {
+    // if (!this.rootDiv) {
-      await this.init();
+    //   await this.init();
-    }
+    // }
     // otherwise, we don't have to do anything
   }
   disable() {
-    if (this.rootDiv) {
+    // if (this.rootDiv) {
-      this.destroy();
+    //   this.destroy();
-    }
+    // }
   }
 
   /**
@@ -401,144 +300,144 @@ class UI {
     return result;
   }
 
-  /**
+  // /**
-   * Handles events received from the iframe.
+  //  * Handles events received from the iframe.
-   * @param {*} event
+  //  * @param {*} event
-   */
+  //  */
-  handleMessage(event) {
+  // handleMessage(event) {
-    if (event.origin === this.extensionBase) {
+  //   if (event.origin === this.extensionBase) {
-      switch(event.data.action) {
+  //     switch(event.data.action) {
-        case 'uwui-clickable':
+  //       case 'uwui-clickable':
-          if (event.data.ts < this.lastProbeResponseTs) {
+  //         if (event.data.ts < this.lastProbeResponseTs) {
-            return;
+  //           return;
-          }
+  //         }
-          if (this.disablePointerEvents) {
+  //         if (this.disablePointerEvents) {
-            return;
+  //           return;
-          }
+  //         }
-          this.lastProbeResponseTs = event.data.ts;
+  //         this.lastProbeResponseTs = event.data.ts;
 
-          // If iframe returns 'yes, we are clickable' and iframe is currently set to pointerEvents=auto,
+  //         // If iframe returns 'yes, we are clickable' and iframe is currently set to pointerEvents=auto,
-          // but hasMouse is false, then UI is attached to the wrong element. This probably means our
+  //         // but hasMouse is false, then UI is attached to the wrong element. This probably means our
-          // detected player element is wrong. We need to perform this check if we aren't in global UI
+  //         // detected player element is wrong. We need to perform this check if we aren't in global UI
-          /**
+  //         /**
-           * action: 'uwui-clickable',
+  //          * action: 'uwui-clickable',
-           * clickable: isClickable,
+  //          * clickable: isClickable,
-           * hoverStats: {
+  //          * hoverStats: {
-           *   isOverTriggerZone,
+  //          *   isOverTriggerZone,
-           *   isOverMenuTrigger,
+  //          *   isOverMenuTrigger,
-           *   isOverUIArea,
+  //          *   isOverUIArea,
-           *   hasMouse: !!document.querySelector(':hover'),
+  //          *   hasMouse: !!document.querySelector(':hover'),
-           * },
+  //          * },
-           * ts: +new Date()
+  //          * ts: +new Date()
-           */
+  //          */
 
-          if (!this.global) {
+  //         if (!this.global) {
-            if (
+  //           if (
-              this.uiIframe.style.pointerEvents === 'auto'
+  //             this.uiIframe.style.pointerEvents === 'auto'
-            ) {
+  //           ) {
-              if (
+  //             if (
-                event.data.hoverStats.isOverMenuTrigger
+  //               event.data.hoverStats.isOverMenuTrigger
-                && !event.data.hoverStats.hasMouse
+  //               && !event.data.hoverStats.hasMouse
-              ) {
+  //             ) {
-                if (!this.iframeConfirmed) {
+  //               if (!this.iframeConfirmed) {
-                  if (this.iframeErrorCount++ > MAX_IFRAME_ERROR_COUNT && !this.iframeRejected) {
+  //                 if (this.iframeErrorCount++ > MAX_IFRAME_ERROR_COUNT && !this.iframeRejected) {
-                    this.iframeRejected = true;
+  //                   this.iframeRejected = true;
-                    this.eventBus.send('change-player-element');
+  //                   this.eventBus.send('change-player-element');
-                    return;
+  //                   return;
-                  }
+  //                 }
-                }
+  //               }
-              } else if (event.data.hoverStats.isOverMenuTrigger && event.data.hoverStats.hasMouse) {
+  //             } else if (event.data.hoverStats.isOverMenuTrigger && event.data.hoverStats.hasMouse) {
-                this.iframeConfirmed = true;
+  //               this.iframeConfirmed = true;
-              }
+  //             }
-            }
+  //           }
-          }
+  //         }
 
-          this.uiIframe.style.pointerEvents = event.data.clickable ? 'auto' : 'none';
+  //         this.uiIframe.style.pointerEvents = event.data.clickable ? 'auto' : 'none';
-          this.uiIframe.style.opacity = event.data.opacity || this.isGlobal ? '100' : '0';
+  //         this.uiIframe.style.opacity = event.data.opacity || this.isGlobal ? '100' : '0';
-          break;
+  //         break;
-        case 'uw-bus-tunnel':
+  //       case 'uw-bus-tunnel':
-          const busCommand = event.data.payload;
+  //         const busCommand = event.data.payload;
-          this.eventBus.send(
+  //         this.eventBus.send(
-            busCommand.action,
+  //           busCommand.action,
-            busCommand.config,
+  //           busCommand.config,
-            {
+  //           {
-              ...busCommand?.context,
+  //             ...busCommand?.context,
-              borderCrossings: {
+  //             borderCrossings: {
-                ...busCommand?.context?.borderCrossings,
+  //               ...busCommand?.context?.borderCrossings,
-                iframe: true,
+  //               iframe: true,
-              }
+  //             }
-            }
+  //           }
-          );
+  //         );
-          break;
+  //         break;
-        case 'uwui-get-role':
+  //       case 'uwui-get-role':
-          this.sendToIframeLowLevel('uwui-set-role', {role: this.isGlobal ? 'global' : 'player'});
+  //         this.sendToIframeLowLevel('uwui-set-role', {role: this.isGlobal ? 'global' : 'player'});
-          break;
+  //         break;
-        case 'uwui-interface-ready':
+  //       case 'uwui-interface-ready':
-          this.setUiVisibility(!this.isGlobal);
+  //         this.setUiVisibility(!this.isGlobal);
-          break;
+  //         break;
-        case 'uwui-hidden':
+  //       case 'uwui-hidden':
-          this.uiIframe.style.opacity = event.data.opacity || this.isGlobal ? '100' : '0';
+  //         this.uiIframe.style.opacity = event.data.opacity || this.isGlobal ? '100' : '0';
-          break;
+  //         break;
-        case 'uwui-global-window-hidden':
+  //       case 'uwui-global-window-hidden':
-          if (!this.isGlobal) {
+  //         if (!this.isGlobal) {
-            return; // This shouldn't even happen in non-global windows
+  //           return; // This shouldn't even happen in non-global windows
-          }
+  //         }
-          this.setUiVisibility(false);
+  //         this.setUiVisibility(false);
-          this.eventBus.send('uw-restore-ui-state', {});
+  //         this.eventBus.send('uw-restore-ui-state', {});
-      }
+  //     }
-    }
+  //   }
-  }
+  // }
 
-  /**
+  // /**
-   * Sends messages to iframe. Messages sent with this function _generally_
+  //  * Sends messages to iframe. Messages sent with this function _generally_
-   * bypass eventBus on the receiving end.
+  //  * bypass eventBus on the receiving end.
-   * @param {*} action
+  //  * @param {*} action
-   * @param {*} payload
+  //  * @param {*} payload
-   * @param {*} uiURI
+  //  * @param {*} uiURI
-   */
+  //  */
-  sendToIframeLowLevel(action, payload, uiURI = this.uiURI) {
+  // sendToIframeLowLevel(action, payload, uiURI = this.uiURI) {
-    // because existence of UI is not guaranteed — UI is not shown when extension is inactive.
+  //   // because existence of UI is not guaranteed — UI is not shown when extension is inactive.
-    // If extension is inactive due to "player element isn't big enough to justify it", however,
+  //   // If extension is inactive due to "player element isn't big enough to justify it", however,
-    // we can still receive eventBus messages.
+  //   // we can still receive eventBus messages.
-    if (this.rootDiv && this.uiIframe) {
+  //   if (this.rootDiv && this.uiIframe) {
-      this.uiIframe.contentWindow?.postMessage(
+  //     this.uiIframe.contentWindow?.postMessage(
-        {
+  //       {
-          action,
+  //         action,
-          payload
+  //         payload
-        },
+  //       },
-        uiURI
+  //       uiURI
-      )
+  //     )
-    };
+  //   };
-  }
+  // }
 
-  /**
+  // /**
-   * Sends message to iframe. Messages sent with this function will be routed to eventBus.
+  //  * Sends message to iframe. Messages sent with this function will be routed to eventBus.
-   */
+  //  */
-  sendToIframe(action, actionConfig, routingData, uiURI = this.uiURI) {
+  // sendToIframe(action, actionConfig, routingData, uiURI = this.uiURI) {
-    // if (routingData) {
+  //   // if (routingData) {
-    //   if (routingData.crossedConnections?.includes(EventBusConnector.IframeBoundaryIn)) {
+  //   //   if (routingData.crossedConnections?.includes(EventBusConnector.IframeBoundaryIn)) {
-    //     console.warn('Denied message propagation. It has already crossed INTO an iframe once.');
+  //   //     console.warn('Denied message propagation. It has already crossed INTO an iframe once.');
-    //     return;
+  //   //     return;
-    //   }
+  //   //   }
-    // }
+  //   // }
-    // if (!routingData) {
+  //   // if (!routingData) {
-    //   routingData = { };
+  //   //   routingData = { };
-    // }
+  //   // }
-    // if (!routingData.crossedConnections) {
+  //   // if (!routingData.crossedConnections) {
-    //   routingData.crossedConnections = [];
+  //   //   routingData.crossedConnections = [];
-    // }
+  //   // }
-    // routingData.crossedConnections.push(EventBusConnector.IframeBoundaryIn);
+  //   // routingData.crossedConnections.push(EventBusConnector.IframeBoundaryIn);
 
-    this.sendToIframeLowLevel(
+  //   this.sendToIframeLowLevel(
-      'uw-bus-tunnel',
+  //     'uw-bus-tunnel',
-      {
+  //     {
-        action,
+  //       action,
-        config: actionConfig,
+  //       config: actionConfig,
-        routingData
+  //       routingData
-      },
+  //     },
-      uiURI
+  //     uiURI
-    );
+  //   );
-  }
+  // }
 
   /**
    * Replaces ui config and re-inits the UI
@@ -554,14 +453,17 @@ class UI {
   }
 
   destroy() {
-    this.unloadIframe();
+    if (this.extensionMenu) {
+      this.extensionMenu.destroy();
+    }
+    // this.unloadIframe();
 
-    this.eventBus.unsubscribeAll(this);
+    // this.eventBus.unsubscribeAll(this);
-    // this.comms?.destroy();
+    // // this.comms?.destroy();
-    this.rootDiv?.remove();
+    // this.rootDiv?.remove();
 
-    delete this.uiIframe;
+    // delete this.uiIframe;
-    delete this.rootDiv;
+    // delete this.rootDiv;
   }
 }
 

src/ext/lib/video-data/PlayerData.ts

@@ -290,6 +290,7 @@ class PlayerData {
           playerData: this,
           uiSettings: this.videoData.settings.active.ui,
           siteSettings: this.siteSettings,
+          settings: this.videoData.settings,
         }
       );
 
@@ -590,6 +591,7 @@ class PlayerData {
         playerData: this,
         uiSettings: this.videoData.settings.active.ui,
         siteSettings: this.siteSettings,
+        settings: this.videoData.settings,
       }
     );
   }

src/ui/res/styles/player-menu.css

@@ -4,6 +4,22 @@
 .uw-menu-root {
   @apply h-full w-full font-mono text-stone-200 text-[16px] flex flex-row;
 
+  pointer-events: auto;
+  transition: opacity 120ms ease;
+
+  &:not(.uw-visible) {
+    pointer-events: none;
+    opacity: 0;
+  }
+  &.uw-hidden {
+    pointer-events: none;
+    opacity: 0;
+  }
+  &.uw-visible {
+    pointer-events: auto;
+    opacity: 1;
+  }
+
   &.uw-menu-left {
     @apply justify-start;
   }
@@ -39,14 +55,17 @@
   }
 }
 
-.uw-menu-trigger {
-
-}
-
 .uw-submenu {
   @apply absolute flex flex-col gap-0;
 
-   &.uw-menu-left {
+  opacity: 0;
+  pointer-events: none;
+
+  /* we'll also animate a bit */
+  transform: translateX(-4px);
+  transition: opacity 120ms ease, transform 120ms ease;
+
+  &.uw-menu-left {
     @apply left-full;
   }
   &.uw-menu-right {
@@ -81,6 +100,17 @@
   }
 }
 
+.uw-menu-item, .uw-menu-trigger {
+  &:hover > .uw-submenu,
+  &:focus-within > .uw-submenu {
+    opacity: 1 !important;
+    pointer-events: auto;
+
+    transform: translateX(0);
+  }
+}
+
+
 .uw-trigger {
   @apply p-4 relative block
     bg-stone-950/75 backdrop-blur-[1em] backdrop-brightness-75 backdrop-saturate-50