src/ext/lib/uwui/UI.js

@@ -34,24 +34,19 @@ class UI {
     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(/\/$/, "");
-
-    // UI will be initialized when setUiVisibility is called
-    this.init();
   }
 
   async init() {
-    this.initUIContainer();
-    this.loadIframe();
+    this.initIframes();
     this.initMessaging();
   }
 
+
   /**
    * Returns color scheme we need to use.
    *
@@ -75,7 +70,7 @@ class UI {
     return csuiVersions[preferredScheme] ?? csuiVersions.normal;
   }
 
-  initUIContainer() {
+  initIframes() {
     const random = Math.round(Math.random() * 69420);
     const uwid = `uw-ultrawidify-${this.interfaceId}-root-${random}`
 
@@ -86,8 +81,8 @@ class UI {
     }
     rootDiv.setAttribute('id', uwid);
     rootDiv.classList.add('uw-ultrawidify-container-root');
-    rootDiv.style.width = "100%";
-    rootDiv.style.height = "100%";
+    // 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;
@@ -100,10 +95,8 @@ class UI {
       document.body.appendChild(rootDiv);
     }
 
-    this.rootDiv = rootDiv;
-  }
+    this.element = rootDiv;
 
-  loadIframe() {
     // in onMouseMove, we currently can't access this because we didn't
     // do things the most properly
     const uiURI = this.uiURI;
@@ -139,7 +132,7 @@ class UI {
     this.uiIframe = iframe;
 
     // set not visible by default
-    // this.setUiVisibility(false);
+    this.setUiVisibility(false);
 
     const fn = (event) => {
       // remove self on fucky wuckies
@@ -185,20 +178,14 @@ class UI {
       document.addEventListener('mousemove', fn, true);
     }
 
-    this.rootDiv.appendChild(iframe);
+    rootDiv.appendChild(iframe);
   }
 
-  unloadIframe() {
-    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.
@@ -263,40 +250,28 @@ class UI {
   }
 
   setUiVisibility(visible) {
-    // 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.element.style.width = '100%';
+      this.element.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.element.style.width = '0px';
+      this.element.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.element) {
       await this.init();
     }
     // otherwise, we don't have to do anything
   }
   disable() {
-    if (this.rootDiv) {
+    if (this.element) {
       this.destroy();
     }
   }
@@ -331,7 +306,6 @@ class UI {
     }
 
     result.canShowUI = true;
-
     return result;
   }
 
@@ -424,7 +398,7 @@ class UI {
     // 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,
     // we can still receive eventBus messages.
-    if (this.rootDiv && this.uiIframe) {
+    if (this.element && this.uiIframe) {
       this.uiIframe.contentWindow?.postMessage(
         {
           action,
@@ -471,21 +445,21 @@ class UI {
   replace(newUiConfig) {
     this.uiConfig = newUiConfig;
 
-    if (this.rootDiv) {
-      this.destroy();
+    if (this.element) {
+      this.element?.remove();
       this.init();
     }
   }
 
   destroy() {
-    this.unloadIframe();
-
+    window.removeEventListener('message', this.messageHandlerFn);
     this.eventBus.unsubscribeAll(this);
     // this.comms?.destroy();
-    this.rootDiv?.remove();
+    this.uiIframe?.remove();
+    this.element?.remove();
 
-    delete this.uiIframe;
-    delete this.rootDiv;
+    this.uiIframe = undefined;
+    this.element = undefined;
   }
 }
 

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

@@ -92,10 +92,10 @@ class PlayerData {
   isTheaterMode: boolean = false;  // note: fullscreen mode will count as theaterMode if player was in theater mode before fs switch. This is desired, so far.
   isTooSmall: boolean = true;
 
-  //#endregion
   //#region misc stuff
   extensionMode: any;
   dimensions: PlayerDimensions;
+  private playerIdElement: any;
   private observer: ResizeObserver;
 
   private trackChangesTimeout: any;
@@ -123,7 +123,7 @@ class PlayerData {
       function: (data) => this.markElement(data)
     }],
     'update-player': [{
-      function: () => this.updatePlayer()
+      function: () => this.getPlayer()
     }],
     'set-run-level': [{
       function: (runLevel) => this.setRunLevel(runLevel)
@@ -179,14 +179,6 @@ class PlayerData {
     return ExtensionEnvironment.Normal;
   }
 
-  /**
-   *    ————————————————————————————————————————————————————————————————————————
-   *         END OF PROPERTIES
-   *    ————————————————————————————————————————————————————————————————————————
-   *
-   */
-
-
   //#region lifecycle
   constructor(videoData) {
     try {
@@ -200,10 +192,14 @@ class PlayerData {
 
       // do the rest
       this.invalid = false;
-      this.updatePlayer();
+      this.element = this.getPlayer();
       this.isTooSmall = (this.element.clientWidth < 1208 || this.element.clientHeight < 720);
 
       this.initEventBus();
+
+      // we defer UI creation until player element is big enough
+      // this happens in trackDimensionChanges!
+
       this.dimensions = undefined;
 
       this.periodicallyRefreshPlayerElement = false;
@@ -219,6 +215,8 @@ class PlayerData {
         return;
       }
 
+      this.trackDimensionChanges();
+      this.trackEnvironmentChanges();
       this.startChangeDetection();
 
       document.addEventListener('fullscreenchange', this.dimensionChangeListener);
@@ -233,7 +231,7 @@ class PlayerData {
 
   private reloadPlayerDataConfig(siteConfUpdate) {
     // this.siteSettings = siteConfUpdate;
-    this.updatePlayer();
+    this.element = this.getPlayer();
 
     this.periodicallyRefreshPlayerElement = false;
     try {
@@ -273,7 +271,6 @@ class PlayerData {
       return;
     }
 
-
     if (
       this.isFullscreen
       || (
@@ -282,7 +279,6 @@ class PlayerData {
         && playerDimensions.height > 720
       )
     ) {
-
       this.ui = new UI(
         'ultrawidifyUi',
         {
@@ -578,38 +574,10 @@ class PlayerData {
     return this.elementStack;
   }
 
-
-  updatePlayer(options?: {verbose?: boolean, newElement?: HTMLElement}) {
-    const newPlayer = options?.newElement ?? this.getPlayer(options);
-
-    if (newPlayer === this.element) {
-      return;
-    }
-
-    // clean up and re-initialize UI
-    this.ui?.destroy();
-    delete this.ui;
-
-    this.element = newPlayer;
-
-    this.ui = new UI(
-      'ultrawidifyUi',
-      {
-        parentElement: this.element,
-        eventBus: this.eventBus,
-        playerData: this,
-        uiSettings: this.videoData.settings.active.ui
-      }
-    );
-
-    this.trackDimensionChanges();
-    this.trackEnvironmentChanges();
-  }
-
   /**
    * Finds and returns HTML element of the player
    */
-  private getPlayer(options?: {verbose?: boolean}): HTMLElement {
+  getPlayer(options?: {verbose?: boolean}): HTMLElement {
     const host = window.location.hostname;
     let element = this.videoElement.parentNode;
     const videoWidth = this.videoElement.offsetWidth;
@@ -684,7 +652,12 @@ class PlayerData {
       console.log('updated site settings:', this.siteSettings.data.playerAutoConfig);
       this.videoData.settings.saveWithoutReload();
 
-      this.updatePlayer({newElement: elementStack[nextIndex].element});
+      this.ui?.destroy();
+      this.ui = undefined;
+
+      this.element = elementStack[nextIndex].element;
+      this.trackDimensionChanges();
+      this.trackEnvironmentChanges();
     }
   }
 
@@ -844,7 +817,7 @@ class PlayerData {
    */
   private handlePlayerTreeRequest() {
     // this populates this.elementStack fully
-    this.updatePlayer({verbose: true});
+    this.getPlayer({verbose: true});
     console.log('tree:', JSON.parse(JSON.stringify(this.elementStack)));
     console.log('————————————————————— handling player tree request!')
     this.eventBus.send('uw-config-broadcast', {type: 'player-tree', config: JSON.parse(JSON.stringify(this.elementStack))});
@@ -885,7 +858,13 @@ class PlayerData {
   }
 
   forceRefreshPlayerElement() {
-    this.updatePlayer();
+    this.ui?.destroy();
+    this.ui = undefined;
+    this.element = this.getPlayer();
+    // this.notificationService?.replace(this.element);
+
+    this.trackDimensionChanges();
+    this.trackEnvironmentChanges();
   }
 }