Additional fixes for #101 — if illegal video dimensions are detected, tell VideoData to reset/reapply aspect ratio when video starts playing again

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

@@ -20,6 +20,7 @@ class VideoData {
     this.userCssClassName = `uw-fuck-you-and-do-what-i-tell-you_${this.vdid}`;
 
     this.videoLoaded = false;
+    this.videoDimensionsLoaded = true;
 
     this.dimensions = {
       width: this.video.offsetWidth,
@@ -34,7 +35,7 @@ class VideoData {
 
     // this one is in case extension loads after the video is loaded
     video.addEventListener('timeupdate', () => {
-      this.onVideoLoaded()
+      this.onVideoLoaded();
     });
   }
 
@@ -43,12 +44,16 @@ class VideoData {
       this.logger.log('info', 'init', '%c[VideoData::onVideoLoaded] ——————————— Initiating phase two of videoData setup ———————————', 'color: #0f9');
 
       this.videoLoaded = true;
+      this.videoDimensionsLoaded = true;
       try {
         await this.setupStageTwo();
         this.logger.log('info', 'init', '%c[VideoData::onVideoLoaded] ——————————— videoData setup stage two complete ———————————', 'color: #0f9');
       } catch (e) {
         this.logger.log('error', 'init', '%c[VideoData::onVideoLoaded] ——————————— Setup stage two failed. ———————————\n', 'color: #f00', e);
       }
+    } else if (!this.videoDimensionsLoaded) {
+      this.restoreCrop();
+      this.videoDimensionsLoaded = true;
     }
   }
 
@@ -115,6 +120,24 @@ class VideoData {
     }
   }
 
+  restoreCrop() {
+    this.logger.log('info', 'debug', "%c[VideoData::restoreCrop] Recovering from illegal video dimensions. Resetting aspect ratio.", {background: '#afd', color: '#132'});
+  
+    // if we have default crop set for this page, apply this.
+    // otherwise, reset crop
+    if (this.pageInfo.defaultCrop) {
+      this.resizer.setAr(this.pageInfo.defaultCrop);
+    } else {
+      this.resizer.reset();
+
+      try {
+        this.startArDetection();
+      } catch (e) {
+        this.logger.log('warn', 'debug', '[VideoData::restoreCrop] Autodetection not resumed. Reason:', e);
+      }
+    }
+  }
+
   async fallbackChangeDetection() {
     while (!this.destroyed && !this.invalid) {
       await this.sleep(500);

src/ext/lib/video-transform/Resizer.js

@@ -267,29 +267,14 @@ class Resizer {
           return;
         }
 
-        // we could have issued calculate crop too early. Instead of spending 30 minutes trying to fix this the proper way by
-        // reading documentation, let's fix it in 30 seconds with some brute force code
+        // we could have issued calculate crop too early. Let's tell VideoData that there's something wrong
+        // and exit this function. When <video> will receive onloadeddata or ontimeupdate (receiving either
+        // of the two means video is loaded or playing, and that means video has proper dimensions), it will
+        // try to reset or re-apply aspect ratio when the video is finally ready.
         if (stretchFactors?.error === 'illegal_video_dimensions') {
-          let timeout = 10; // ms
-          let iteration = 0;
-          let maxIterations = 15;
-          do {
-            if (iteration > maxIterations) {
-              this.logger.log('error', 'debug', `[Resizer::setAr] <rid:${this.resizerId}> Video dimensions remain illegal after ${maxIterations} retries`);
+          this.conf.videoDimensionsLoaded = false;
           return;
         }
-            // fire first few rechecks in quick succession, but start increasing timeout 
-            // later down the line.
-            if (iteration > 0 && iteration % 0 == 0) {
-              timeout = Math.min(2 * timeout, 1000);
-            }
-            this.logger.log('info', 'debug', `[Resizer::setAr] <rid:${this.resizerId}> Sleeping for ${timeout} ms`);
-            await sleep(timeout);
-            stretchFactors = this.scaler.calculateCrop(ar);
-            iteration++;
-          } while (stretchFactors.error === 'illegal_video_dimensions');
-          this.logger.log('info', 'debug', `[Resizer::setAr] <rid:${this.resizerId}> Video dimensions have corrected themselves after retrying.`);
-        }
       }
 
       if (this.stretcher.mode === Stretch.Conditional){