Change handling of getPlayer()

src/ext/lib/uwui/UI.js

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

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.getPlayer()
+      function: () => this.updatePlayer()
     }],
     'set-run-level': [{
       function: (runLevel) => this.setRunLevel(runLevel)
@@ -179,6 +179,14 @@ class PlayerData {
     return ExtensionEnvironment.Normal;
   }
 
+  /**
+   *    ————————————————————————————————————————————————————————————————————————
+   *         END OF PROPERTIES
+   *    ————————————————————————————————————————————————————————————————————————
+   *
+   */
+
+
   //#region lifecycle
   constructor(videoData) {
     try {
@@ -192,14 +200,10 @@ class PlayerData {
 
       // do the rest
       this.invalid = false;
-      this.element = this.getPlayer();
+      this.updatePlayer();
       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;
@@ -215,8 +219,6 @@ class PlayerData {
         return;
       }
 
-      this.trackDimensionChanges();
-      this.trackEnvironmentChanges();
       this.startChangeDetection();
 
       document.addEventListener('fullscreenchange', this.dimensionChangeListener);
@@ -231,7 +233,7 @@ class PlayerData {
 
   private reloadPlayerDataConfig(siteConfUpdate) {
     // this.siteSettings = siteConfUpdate;
-    this.element = this.getPlayer();
+    this.updatePlayer();
 
     this.periodicallyRefreshPlayerElement = false;
     try {
@@ -271,6 +273,7 @@ class PlayerData {
       return;
     }
 
+
     if (
       this.isFullscreen
       || (
@@ -279,6 +282,7 @@ class PlayerData {
         && playerDimensions.height > 720
       )
     ) {
+
       this.ui = new UI(
         'ultrawidifyUi',
         {
@@ -574,10 +578,38 @@ 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
    */
-  getPlayer(options?: {verbose?: boolean}): HTMLElement {
+  private getPlayer(options?: {verbose?: boolean}): HTMLElement {
     const host = window.location.hostname;
     let element = this.videoElement.parentNode;
     const videoWidth = this.videoElement.offsetWidth;
@@ -652,12 +684,7 @@ class PlayerData {
       console.log('updated site settings:', this.siteSettings.data.playerAutoConfig);
       this.videoData.settings.saveWithoutReload();
 
-      this.ui?.destroy();
+      this.updatePlayer({newElement: elementStack[nextIndex].element});
-      this.ui = undefined;
-
-      this.element = elementStack[nextIndex].element;
-      this.trackDimensionChanges();
-      this.trackEnvironmentChanges();
     }
   }
 
@@ -817,7 +844,7 @@ class PlayerData {
    */
   private handlePlayerTreeRequest() {
     // this populates this.elementStack fully
-    this.getPlayer({verbose: true});
+    this.updatePlayer({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))});
@@ -858,13 +885,7 @@ class PlayerData {
   }
 
   forceRefreshPlayerElement() {
-    this.ui?.destroy();
+    this.updatePlayer();
-    this.ui = undefined;
-    this.element = this.getPlayer();
-    // this.notificationService?.replace(this.element);
-
-    this.trackDimensionChanges();
-    this.trackEnvironmentChanges();
   }
 }