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);
-            v.initArDetection();
+            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,112 +168,119 @@ class PlayerData {
     let scorePenalty = 0;
     let score;
 
-    if(! element ){
+    try {
-      this.logger.log('info', 'debug', "[PlayerDetect::_pd_getPlayer] element is not valid, doing nothing.", element)
+      if(! element ){
-      if(this.element) {
+        this.logger.log('info', 'debug', "[PlayerDetect::_pd_getPlayer] element is not valid, doing nothing.", element)
-        const ths = this;
+        if(this.element) {
+          const ths = this;
+        }
+        this.element = undefined;
+        this.dimensions = undefined;
+        return;
       }
-      this.element = undefined;
-      this.dimensions = undefined;
-      return;
-    }
 
-    if (this.settings.active.sites[host]
+      if (this.settings.active.sites[host]
-        && this.settings.active.sites[host].DOM
+          && this.settings.active.sites[host].DOM
-        && this.settings.active.sites[host].DOM.player
+          && this.settings.active.sites[host].DOM.player
-        && this.settings.active.sites[host].DOM.player.manual) {
+          && this.settings.active.sites[host].DOM.player.manual) {
-      if (this.settings.active.sites[host].DOM.player.useRelativeAncestor
+        if (this.settings.active.sites[host].DOM.player.useRelativeAncestor
-          && this.settings.active.sites[host].DOM.player.videoAncestor) {
+            && this.settings.active.sites[host].DOM.player.videoAncestor) {
 
-        let parentsLeft = this.settings.active.sites[host].DOM.player.videoAncestor - 1;
+          let parentsLeft = this.settings.active.sites[host].DOM.player.videoAncestor - 1;
-        while (parentsLeft --> 0) {
+          while (parentsLeft --> 0) {
-          element = element.parentNode;
+            element = element.parentNode;
-        }
+          }
-        if (element) {
+          if (element) {
-          return element;
+            return element;
-        }
+          }
-      } else if (this.settings.active.sites[host].DOM.player.querySelectors) {
+        } else if (this.settings.active.sites[host].DOM.player.querySelectors) {
-        const allSelectors = document.querySelectorAll(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) {
 
-        // actually we'll also score this branch in a similar way we score the regular, auto branch
+            // Let's see how this works
-        while (element) {
+            if (this.collectionHas(allSelectors, element)) {
+              score = 100; // every matching element gets a baseline 100 points
               
-          // Let's see how this works
+              // elements that match the size get a hefty bonus
-          if (this.collectionHas(allSelectors, element)) {
+              if ( (element.offsetWidth >= videoWidth && this.equalish(element.offsetHeight, videoHeight, 2))
-            score = 100; // every matching element gets a baseline 100 points
+                || (element.offsetHeight >= videoHeight && this.equalish(element.offsetWidth, videoHeight, 2))) {
+                  score += 75;
+              }
 
-            // elements that match the size get a hefty bonus
+              // elements farther away from the video get a penalty
-            if ( (element.offsetWidth >= videoWidth && this.equalish(element.offsetHeight, videoHeight, 2))
+              score -= (scorePenalty++) * 20;
-              || (element.offsetHeight >= videoHeight && this.equalish(element.offsetWidth, videoHeight, 2))) {
+
-                score += 75;
+              // push the element on the queue/stack:
+              elementQ.push({
+                score: score,
+                element: element,
+              });
             }
 
-            // elements farther away from the video get a penalty
+            element = element.parentNode;
-            score -= (scorePenalty++) * 20;
-
-            // push the element on the queue/stack:
-            elementQ.push({
-              score: score,
-              element: element,
-            });
           }
 
+          if (elementQ.length) {
+            // return element with biggest score
+            // if video player has not been found, proceed to automatic detection
+            return elementQ.sort( (a,b) => b.score - a.score)[0].element;
+          }
+        }
+      }
+
+      // try to find element the old fashioned way
+
+      while (element){    
+        // odstranimo čudne elemente, ti bi pokvarili zadeve
+        // remove weird elements, those would break our stuff
+        if ( element.offsetWidth == 0 || element.offsetHeight == 0){
           element = element.parentNode;
+          continue;
         }
-        if (elementQ.length) {
+    
-          // return element with biggest score
+        // element je player, če je ena stranica enako velika kot video, druga pa večja ali enaka. 
-          // if video player has not been found, proceed to automatic detection
+        // za enakost dovolimo mala odstopanja
-          return elementQ.sort( (a,b) => b.score - a.score)[0].element;
+        // element is player, if one of the sides is as long as the video and the other bigger (or same)
+        // we allow for tiny variations when checking for equality
+        if ( (element.offsetWidth >= videoWidth && this.equalish(element.offsetHeight, videoHeight, 2))
+            || (element.offsetHeight >= videoHeight && this.equalish(element.offsetWidth, videoHeight, 2))) {
+          
+          // todo — in case the match is only equalish and not exact, take difference into account when 
+          // calculating score
+          
+          score = 100;
+
+          if (element.id.indexOf('player') !== -1) { // prefer elements with 'player' in id
+            score += 75;
+          }
+          if (element.classList.toString().indexOf('player') !== -1) {  // prefer elements with 'player' in classlist, but a bit less than id
+            score += 50;
+          }
+          score -= scorePenalty++; // prefer elements closer to <video>
+          
+          elementQ.push({
+            element: element,
+            score: score,
+          });
         }
-      }
-    }
         
-    
-
-    while (element){    
-      // odstranimo čudne elemente, ti bi pokvarili zadeve
-      // remove weird elements, those would break our stuff
-      if ( element.offsetWidth == 0 || element.offsetHeight == 0){
         element = element.parentNode;
-        continue;
       }
 
-      // element je player, če je ena stranica enako velika kot video, druga pa večja ali enaka. 
+      if (elementQ.length) {
-      // za enakost dovolimo mala odstopanja
+        // return element with biggest score
-      // element is player, if one of the sides is as long as the video and the other bigger (or same)
+        return elementQ.sort( (a,b) => b.score - a.score)[0].element;
-      // we allow for tiny variations when checking for equality
-      if ( (element.offsetWidth >= videoWidth && this.equalish(element.offsetHeight, videoHeight, 2))
-           || (element.offsetHeight >= videoHeight && this.equalish(element.offsetWidth, videoHeight, 2))) {
-        
-        // todo — in case the match is only equalish and not exact, take difference into account when 
-        // calculating score
-        
-        score = 100;
-
-        if (element.id.indexOf('player') !== -1) { // prefer elements with 'player' in id
-          score += 75;
-        }
-        if (element.classList.toString().indexOf('player') !== -1) {  // prefer elements with 'player' in classlist, but a bit less than id
-          score += 50;
-        }
-        score -= scorePenalty++; // prefer elements closer to <video>
-        
-        elementQ.push({
-          element: element,
-          score: score,
-        });
       }
 
-      element = element.parentNode;
+      // if no candidates were found, something is obviously very, _very_ wrong.
+      // 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');
     }
-
-    if (elementQ.length) {
-      // return element with biggest score
-      return elementQ.sort( (a,b) => b.score - a.score)[0].element;
-    }
-
-    // if no candidates were found, return parent node
-    return this.video.parentNode;
   }
 
   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
+        // 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
-          context.player.forceRefreshPlayerElement();
-          context.restoreAr();
-        } else if (mutation.attribute = 'src' && mutation.attributeOldValue !== this.video.getAttribute('src')) {
-          // try fixing alignment issue on video change
-          try {
-            context.player.forceRefreshPlayerElement();
-            context.restoreAr();
-          } catch (e) {
-            console.error("[VideoData::onVideoDimensionsChanged] There was an error when handling src change.", e);
-          }
-        }
       }
     }
+
+    // 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();
+
+    // 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 {
+      const transformMatrix = cs.transform.split(')')[0].split(',');
+      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) {
+      // 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)
     }