Rework observers a little. Debounce offset validation in videoData

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

@@ -5,6 +5,7 @@ import PlayerNotificationUi from '../uwui/PlayerNotificationUI';
 import PlayerUi from '../uwui/PlayerUI';
 import BrowserDetect from '../../conf/BrowserDetect';
 import _ from 'lodash';
+import { sleep } from '../../../common/js/utils';
 
 if (process.env.CHANNEL !== 'stable'){
   console.info("Loading: PlayerData.js");
@@ -78,28 +79,15 @@ class PlayerData {
     }
   }
 
-  async sleep(timeout) {
-    return new Promise( (resolve, reject) => setTimeout(() => resolve(), timeout));
-  }
-
   static isFullScreen(){
     return ( window.innerHeight == window.screen.height && window.innerWidth == window.screen.width);
   }
 
   
-  // player size observer may not be strictly necessary here
+  onPlayerDimensionsChanged(mutationList, observer) {
-  // note that this function is called manually as well — whenever aspect ratio changes.
-  // this can result in recursive calls. We don't want recusrive calls.
-  onPlayerDimensionsChanged_recursing = false;
-  onPlayerDimensionsChanged(mutationList, observer, context) {
-    if (this.onPlayerDimensionsChanged_recursing) {
-      return;
-    }
-    this.onPlayerDimensionsChanged_recursing = true;
     if (this?.checkPlayerSizeChange()) {
       this.videoData.resizer.restore();
     }
-    this.onPlayerDimensionsChanged_recursing = false;
   }
 
 
@@ -124,16 +112,31 @@ class PlayerData {
     }
 
     try {
-      this.observer = new MutationObserver(
+      if (BrowserDetect.firefox) {
-        _.debounce(           // don't do this too much:
+        this.observer = new MutationObserver(
-          (m,o) => this.onPlayerDimensionsChanged(m,o,this),
+          _.debounce(           // don't do this too much:
-          250,                // do it once per this many ms
+            this.onPlayerDimensionsChanged,
-          {
+            250,                // do it once per this many ms
-            leading: true,    // do it when we call this fallback first
+            {
-            trailing: true    // do it after the timeout if we call this callback few more times
+              leading: true,    // do it when we call this fallback first
-          }
+              trailing: true    // do it after the timeout if we call this callback few more times
-        )
+            }
-      );
+          )
+        );
+      } else {
+        // Chrome for some reason insists that this.onPlayerDimensionsChanged is not a function
+        // when it's not wrapped into an anonymous function
+        this.observer = new MutationObserver(
+          _.debounce(           // don't do this too much:
+            (m,o) => this.onPlayerDimensionsChanged(m,o),
+            250,                // do it once per this many ms
+            {
+              leading: true,    // do it when we call this fallback first
+              trailing: true    // do it after the timeout if we call this callback few more times
+            }
+          )
+        );
+      }
 
       const observerConf = {
         attributes: true,
@@ -152,7 +155,7 @@ class PlayerData {
 
   async legacyChangeDetection() {
     while (!this.halted) {
-      await this.sleep(1000);
+      await sleep(1000);
       try {
         this.doPeriodicPlayerElementChangeCheck();
       } catch (e) {

src/ext/lib/video-data/VideoData.js

@@ -3,6 +3,8 @@ import PlayerData from './PlayerData';
 import Resizer from '../video-transform/Resizer';
 import ArDetector from '../ar-detect/ArDetector';
 import AspectRatio from '../../../common/enums/aspect-ratio.enum';
+import _ from 'lodash';
+import BrowserDetect from '../../conf/BrowserDetect';
 
 class VideoData {
   
@@ -134,10 +136,37 @@ class VideoData {
     this.resizer = new Resizer(this);
 
     // INIT OBSERVERS
-    this.observer = new MutationObserver( (m, o) => {
+    try {
-      this.logger.log('info', 'debug', `[VideoData::setupStageTwo->mutationObserver] Mutation observer detected a mutation:`, {m, o});
+      if (BrowserDetect.firefox) {
-      this.onVideoDimensionsChanged(m, o, this)
+        this.observer = new MutationObserver( 
-    });
+          _.debounce(
+            this.onVideoDimensionsChanged,
+            250,
+            {
+              leading: true,
+              trailing: true
+            }
+          )
+        );
+      } else {
+        // Chrome for some reason insists that this.onPlayerDimensionsChanged is not a function
+        // when it's not wrapped into an anonymous function
+        this.observer = new MutationObserver( 
+          _.debounce(
+            (m, o) => {
+              this.onVideoDimensionsChanged(m, o)
+            }, 
+            250,
+            {
+              leading: true,
+              trailing: true
+            }
+          )
+        );
+      }
+    } catch (e) {
+      console.error('[VideoData] Observer setup failed:', e);
+    }
     this.observer.observe(this.video, observerConf);
 
     // INIT AARD
@@ -263,9 +292,9 @@ class VideoData {
   }
 
 
-  onVideoDimensionsChanged(mutationList, observer, context) {
+  onVideoDimensionsChanged(mutationList, observer) {
-    if (!mutationList || context.video === undefined) {  // something's wrong
+    if (!mutationList || this.video === undefined) {  // something's wrong
-      if (observer && context.video) {
+      if (observer && this.video) {
         observer.disconnect();
       }
       return;
@@ -275,14 +304,14 @@ class VideoData {
     for (let mutation of mutationList) {
       if (mutation.type === 'attributes') {
         if (mutation.attributeName === 'class') {
-          if(!context.video.classList.contains(this.userCssClassName) ) {
+          if(!this.video.classList.contains(this.userCssClassName) ) {
             // force the page to include our class in classlist, if the classlist has been removed
             // while classList.add() doesn't duplicate classes (does nothing if class is already added),
             // we still only need to make sure we're only adding our class to classlist if it has been
             // removed. classList.add() will _still_ trigger mutation (even if classlist wouldn't change).
             // This is a problem because INFINITE RECURSION TIME, and we _really_ don't want that.
-            context.video.classList.add(this.userCssClassName);
+            this.video.classList.add(this.userCssClassName);
-            context.video.classList.add('uw-ultrawidify-base-wide-screen'); 
+            this.video.classList.add('uw-ultrawidify-base-wide-screen'); 
           }
           // always trigger refresh on class changes, since change of classname might trigger change 
           // of the player size as well.
@@ -301,13 +330,13 @@ class VideoData {
     // adding player observer taught us that if element size gets triggered by a class, then
     // the 'style' attributes don't necessarily trigger. This means we also need to trigger
     // restoreAr here, in case video size was changed this way
-    context.player.forceRefreshPlayerElement();
+    this.player.forceRefreshPlayerElement();
-    context.restoreAr();
+    this.restoreAr();
 
     // sometimes something fucky wucky happens and mutations aren't detected correctly, so we
     // try to get around that
     setTimeout( () => {
-      context.validateVideoOffsets();
+      this.validateVideoOffsets();
     }, 100);
   }