If no element fits the criteria for the video player, have extension ignore such videos.

Also, sometimes mutationObserver doesn't catch all mutations/we miss some mutations. Added a delay that validates offsets. If validation fails, retrigger aspect ratio correction to make sure there's no misalignments. (That last bit was mostly needed for new reddit)

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

@@ -197,7 +197,11 @@ class PageInfo {
           
           try {
             v = new VideoData(video, this.settings, this);
+            if (!v.invalid) {
               v.initArDetection();
+            } else {
+              this.logger.log('error', 'debug', 'Video is invalid. Aard not started.', video);
+            }
             this.videos.push(v);
           } catch (e) {
             this.logger.log('error', 'debug', "rescan error: failed to initialize videoData. Skipping this video.",e);

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

@@ -39,10 +39,17 @@ class PlayerData {
     this.video = videoData.video;
     this.settings = videoData.settings;
     this.extensionMode = videoData.extensionMode;
+    this.invalid = false;
     this.element = this.getPlayer();
     this.dimensions = undefined;
     this.overlayNode = undefined;
 
+    // this happens when we don't find a matching player element
+    if (!this.element) {
+      this.invalid = true;
+      return;
+    }
+
     if (this.extensionMode === ExtensionMode.Enabled) {
       this.checkPlayerSizeChange();
     }
@@ -76,15 +83,11 @@ class PlayerData {
   }
 
   startChangeDetection(){
-    const ths = this;
+    if (this.invalid) {
-    this.observer = new MutationObserver((m,o) => this.onPlayerDimensionsChanged(m,o,ths));
-
-    const isFullScreen = PlayerData.isFullScreen();
-    this.element = this.getPlayer(isFullScreen);
-    
-    if (!this.element) {
       return;
     }
+    const ths = this;
+    this.observer = new MutationObserver((m,o) => this.onPlayerDimensionsChanged(m,o,ths));
 
     const observerConf = {
       attributes: true,
@@ -157,7 +160,7 @@ class PlayerData {
     return false;
   }
 
-  getPlayer(isFullScreen) {
+  getPlayer() {
     const host = window.location.host;
     let element = this.video.parentNode;
     const videoWidth = this.video.offsetWidth, videoHeight = this.video.offsetHeight;
@@ -165,6 +168,7 @@ class PlayerData {
     let scorePenalty = 0;
     let score;
 
+    try {
       if(! element ){
         this.logger.log('info', 'debug', "[PlayerDetect::_pd_getPlayer] element is not valid, doing nothing.", element)
         if(this.element) {
@@ -191,7 +195,6 @@ class PlayerData {
           }
         } else if (this.settings.active.sites[host].DOM.player.querySelectors) {
           const allSelectors = document.querySelectorAll(this.settings.active.sites[host].DOM.player.querySelectors);
-
           // actually we'll also score this branch in a similar way we score the regular, auto branch
           while (element) {
 
@@ -217,6 +220,7 @@ class PlayerData {
 
             element = element.parentNode;
           }
+
           if (elementQ.length) {
             // return element with biggest score
             // if video player has not been found, proceed to automatic detection
@@ -225,7 +229,7 @@ class PlayerData {
         }
       }
 
-    
+      // try to find element the old fashioned way
 
       while (element){    
         // odstranimo čudne elemente, ti bi pokvarili zadeve
@@ -269,8 +273,14 @@ class PlayerData {
         return elementQ.sort( (a,b) => b.score - a.score)[0].element;
       }
 
-    // if no candidates were found, return parent node
+      // if no candidates were found, something is obviously very, _very_ wrong.
-    return this.video.parentNode;
+      // we return nothing. Player will be marked as invalid and setup will stop.
+      // VideoData should check for that before starting anything.
+      this.logger.log('warn', 'debug', '[PlayerData::getPlayer] no matching player was found for video', this.video, 'Extension cannot work on this site.');
+      return;
+    } catch (e) {
+      this.logger.log('crit', 'debug', '[PlayerData::getPlayer] something went wrong while detecting player:', e, 'Shutting down extension for this page');
+    }
   }
 
   equalish(a,b, tolerance) {

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

@@ -17,13 +17,13 @@ class VideoData {
 
     this.userCssClassName = `uw-fuck-you-and-do-what-i-tell-you_${this.vdid}`;
 
-
+    // We only init observers once player is confirmed valid
-    // We'll replace cssWatcher (in resizer) with mutationObserver
     const observerConf = {
       attributes: true,
       // attributeFilter: ['style', 'class'],
       attributeOldValue: true,
     };
+
     const ths = this;
     this.observer = new MutationObserver( (m, o) => this.onVideoDimensionsChanged(m, o, ths));
     this.observer.observe(video, observerConf);
@@ -31,8 +31,14 @@ class VideoData {
     // POZOR: VRSTNI RED JE POMEMBEN (arDetect mora bit zadnji)
     // NOTE: ORDERING OF OBJ INITIALIZATIONS IS IMPORTANT (arDetect needs to go last)    
     this.player = new PlayerData(this);
-    this.resizer = new Resizer(this);
+    if (this.player.invalid) {
+      this.invalid = true;
+      return;
+    }
 
+    
+
+    this.resizer = new Resizer(this);
     this.arDetector = new ArDetector(this);  // this starts Ar detection. needs optional parameter that prevets ardetdctor from starting
     // player dimensions need to be in:
     // this.player.dimensions
@@ -55,37 +61,66 @@ class VideoData {
       return;
     }
     for (let mutation of mutationList) {
-      if (mutation.type === 'attributes') {
+      if (mutation.type === 'attributes' 
-        if (mutation.attributeName === 'class') {
+          && mutation.attributeName === 'class'
-          if (!context.video.classList.contains(this.userCssClassName)) {
+          && !context.video.classList.contains(this.userCssClassName) ) {
         // force the page to include our class in classlist, if the classlist has been removed
-            context.video.classList.add(this.userCssClassName);
+        // 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.
       
-          // } else if () {
+        context.video.classList.add(this.userCssClassName);  
-            // this bug should really get 
+        break;
-          } else {
-              context.restoreAr();
       }
-        } else if (mutation.attributeName === 'style' && mutation.attributeOldValue !== context.video.getAttribute('style')) {
+    }
-          // if size of the video has changed, this may mean we need to recalculate/reapply
+
-          // last calculated aspect ratio
+    // 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();
     context.restoreAr();
-        } else if (mutation.attribute = 'src' && mutation.attributeOldValue !== this.video.getAttribute('src')) {
+
-          // try fixing alignment issue on video change
+    // sometimes something fucky wucky happens and mutations aren't detected correctly, so we
+    // try to get around that
+    setTimeout( () => {
+      context.validateVideoOffsets();
+    }, 100);
+  }
+
+  validateVideoOffsets() {
+    // THIS BREAKS PANNING
+    const cs = window.getComputedStyle(this.video);
+    const pcs = window.getComputedStyle(this.player.element);
+
     try {
-            context.player.forceRefreshPlayerElement();
+      const transformMatrix = cs.transform.split(')')[0].split(',');
-            context.restoreAr();
+      const translateX = +transformMatrix[4];
+      const translateY = +transformMatrix[5];
+      const vh = +(cs.height.split('px')[0]);
+      const vw = +(cs.width.split('px')[0]);
+      const ph = +(pcs.height.split('px')[0]);
+      const pw = +(pcs.width.split('px')[0]);
+
+      // TODO: check & account for panning and alignment
+      if (this.isWithin(vh, (ph - (translateY / 2)), 2)
+          && this.isWithin(vw, (pw - (translateX / 2)), 2)) {
+      } else {
+        this.player.forceRefreshPlayerElement();
+        this.restoreAr();
+      }
+      
     } catch(e) {
-            console.error("[VideoData::onVideoDimensionsChanged] There was an error when handling src change.", e);
+      // do nothing on fail
-          }
-        }
     }
   }
+
+  isWithin(a, b, diff) {
+    return a < b + diff && a > b - diff
   }
 
   firstTimeArdInit(){
-    if(this.destroyed) {
+    if(this.destroyed || this.invalid) {
       // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
       return;
     }
@@ -95,7 +130,7 @@ class VideoData {
   }
 
   initArDetection() {
-    if(this.destroyed) {
+    if(this.destroyed || this.invalid) {
       // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
       return;
     }
@@ -110,7 +145,7 @@ class VideoData {
   
   startArDetection() {
     this.logger.log('info', 'debug', "[VideoData::startArDetection] starting AR detection")
-    if(this.destroyed) {
+    if(this.destroyed || this.invalid) {
       // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
       return;
     }
@@ -121,7 +156,7 @@ class VideoData {
   }
 
   rebootArDetection() {
-    if(this.destroyed) {
+    if(this.destroyed || this.invalid) {
       // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
       return;
     }
@@ -179,7 +214,7 @@ class VideoData {
   }
 
   resume(){
-    if(this.destroyed) {
+    if(this.destroyed || this.invalid) {
       // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
       return;
     }
@@ -214,22 +249,37 @@ class VideoData {
   }
 
   setLastAr(lastAr){
+    if (this.invalid) {
+      return;
+    }
     this.resizer.setLastAr(lastAr);
   }
 
   setAr(ar, lastAr){
+    if (this.invalid) {
+      return;
+    }
     this.resizer.setAr(ar, lastAr);
   }
 
   resetAr() {
+    if (this.invalid) {
+      return;
+    }
     this.resizer.reset();
   }
 
   resetLastAr() {
+    if (this.invalid) {
+      return;
+    }
     this.resizer.setLastAr('original');
   }
 
   panHandler(event, forcePan) {
+    if (this.invalid) {
+      return;
+    }
     if(this.destroyed) {
       // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
       return;
@@ -242,34 +292,58 @@ class VideoData {
   }
 
   setPanMode(mode) {
+    if (this.invalid) {
+      return;
+    }
     this.resizer.setPanMode(mode);
   }
 
   setVideoAlignment(videoAlignment) {
+    if (this.invalid) {
+      return;
+    }
     this.resizer.setVideoAlignment(videoAlignment);
   }
 
   restoreAr(){
+    if (this.invalid) {
+      return;
+    }
     this.resizer.restore();
   }
 
   setStretchMode(stretchMode){
+    if (this.invalid) {
+      return;
+    }
     this.resizer.setStretchMode(stretchMode);
   }
 
   setZoom(zoomLevel, no_announce){
+    if (this.invalid) {
+      return;
+    }
     this.resizer.setZoom(zoomLevel, no_announce);
   }
 
   zoomStep(step){
+    if (this.invalid) {
+      return;
+    }
     this.resizer.zoomStep(step);
   }
 
   announceZoom(scale){
+    if (this.invalid) {
+      return;
+    }
     this.pageInfo.announceZoom(scale);
   }
 
   markPlayer(name, color) {
+    if (this.invalid) {
+      return;
+    }
     if (this.player) {
       this.player.markPlayer(name, color)
     }