Some things break youtube, so baseClass is split off into its own component differently

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

@@ -72,43 +72,6 @@ class PlayerData {
     return new Promise( (resolve, reject) => setTimeout(() => resolve(), timeout));
   }
 
-
-  setBaseClass() {
-    if (!this.dimensions) {
-      // TODO: determine how to handle this edge case. Fallback to 'base-wide-screen' might
-      // be better option than doing nothing
-      return;
-    }
-
-    // note that we should never allow both narrow-screen and wide-screen classes on the video
-    // element at _any_ time. That may break some sites even more.
-    // We should also only set/unset css classes when they change, otherwise mutation observer
-    // will trigger. Triggering mutation observer is problematic because this function may be
-    // called from said mutation observer, and that is bad.
-
-
-    const isNarrowScreen = this.video.videoWidth / this.video.videoHeight > this.dimensions.width / this.dimensions.height;
-
-    console.warn('setting base class. Is narrow screen?', isNarrowScreen, 'was narrow screen?', this.isNarrowScreen, "video:", this.video, ":", this.video.videoWidth, "x", this.video.videoHeight, "video file ar:", this.video.videoWidth / this.video.videoHeight, "player ar:", this.dimensions.width / this.dimensions.height)
-
-    if (this.isNarrowScreen != isNarrowScreen) {
-      if (!isNarrowScreen) {
-        this.video.classList.remove('uw-ultrawidify-base-narrow-screen');
-        this.video.classList.add('uw-ultrawidify-base-wide-screen'); 
-      } else {
-        this.video.classList.remove('uw-ultrawidify-base-wide-screen');
-        this.video.classList.add('uw-ultrawidify-base-narrow-screen');
-      }
-    }
-
-    this.isNarrowScreen = isNarrowScreen;
-  }
-
-  unsetBaseClass() {
-    this.video.classList.remove('uw-ultrawidify-base-narrow-screen');
-    this.video.classList.remove('uw-ultrawidify-base-wide-screen');
-  }
-
   static isFullScreen(){
     return ( window.innerHeight == window.screen.height && window.innerWidth == window.screen.width);
   }

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

@@ -6,6 +6,7 @@ import AspectRatio from '../../../common/enums/aspect-ratio.enum';
 
 class VideoData {
   
+
   constructor(video, settings, pageInfo){
     this.vdid = (Math.random()*100).toFixed();
     this.logger = pageInfo.logger;
@@ -27,16 +28,7 @@ class VideoData {
       height: this.video.offsetHeight,
     };
 
-    // this is in case extension loads before the video
+    this.setupStageOne();
-    video.addEventListener('loadeddata', () => {
-      this.logger.log('info', 'init', '[VideoData::ctor->video.onloadeddata] Video fired event "loaded data!"');
-      this.onVideoLoaded();
-    });
-
-    // this one is in case extension loads after the video is loaded
-    video.addEventListener('timeupdate', () => {
-      this.onVideoLoaded();
-    });
   }
 
   async onVideoLoaded() {
@@ -60,6 +52,41 @@ class VideoData {
     }
   }
 
+  async injectBaseCss() {
+    try {
+    await this.pageInfo.injectCss(`
+      .uw-ultrawidify-base-wide-screen {
+        margin: 0px 0px 0px 0px !important; width: initial !important; align-self: start !important; justify-self: start !important;
+      }
+    `);
+    } catch (e) {
+      console.error('Failed to inject base css!', e);
+    }
+  }
+
+  unsetBaseClass() {
+    this.video.classList.remove('uw-ultrawidify-base-wide-screen');
+  }
+
+  async setupStageOne() {
+    this.logger.log('info', 'init', '%c[VideoData::setupStageOne] ——————————— Starting setup stage one! ———————————', 'color: #0f9');
+    // ensure base css is loaded before doing anything
+    this.injectBaseCss();
+
+    // this is in case extension loads before the video
+    this.video.addEventListener('loadeddata', () => {
+      this.logger.log('info', 'init', '[VideoData::ctor->video.onloadeddata] Video fired event "loaded data!"');
+      this.onVideoLoaded();
+    });
+
+    // this one is in case extension loads after the video is loaded
+    this.video.addEventListener('timeupdate', () => {
+      this.onVideoLoaded();
+    });
+
+    this.logger.log('info', 'init', '%c[VideoData::setupStageOne] ——————————— Setup stage one complete! ———————————', 'color: #0f9');
+  }
+
   async setupStageTwo() {
     // POZOR: VRSTNI RED JE POMEMBEN (arDetect mora bit zadnji)
     // NOTE: ORDERING OF OBJ INITIALIZATIONS IS IMPORTANT (arDetect needs to go last)
@@ -98,8 +125,13 @@ class VideoData {
     this.logger.log('info', ['debug', 'init'], '[VideoData::ctor] Created videoData with vdid', this.vdid, '\nextension mode:', this.extensionMode)
 
     this.pageInfo.initMouseActionHandler(this);
+    
+    // NOTE — since base class for our <video> element depends on player aspect ratio,
+    // we handle it in PlayerData class.
+    this.video.classList.add('uw-ultrawidify-base-wide-screen'); 
     this.video.classList.add(this.userCssClassName); // this also needs to be applied BEFORE we initialize resizer!
 
+
     // start fallback video/player size detection
     this.fallbackChangeDetection();
 
@@ -123,6 +155,7 @@ class VideoData {
     }
   }
 
+
   restoreCrop() {  
     this.logger.log('info', 'debug', '[VideoData::restoreCrop] Attempting to reset aspect ratio.')
     // if we have default crop set for this page, apply this.
@@ -175,7 +208,8 @@ class VideoData {
             // 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);  
+            context.video.classList.add(this.userCssClassName);
+            context.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.
@@ -298,6 +332,7 @@ class VideoData {
 
     if (this.video) {
       this.video.classList.remove(this.userCssClassName);
+      this.video.classList.remove('uw-ultrawidify-base-wide-screen'); 
     }
 
     this.pause();