Manually assigning players sorta works, but is bugged

src/ext/conf/Debug.js

@@ -8,7 +8,7 @@ var Debug = {
   debug: true,
   // debug: false,
   // keyboard: true,
-  // debugResizer: true,
+  resizer: true,
   // debugArDetect: true,
   // scaler: true,
   // debugStorage: false,
@@ -18,7 +18,7 @@ var Debug = {
   // showArDetectCanvas: true,
   // flushStoredSettings: true,
   // flushStoredSettings: false,
-  // playerDetectDebug: true,
+  playerDetect: true,
   // periodic: true,
   // videoRescan: true,
   // mousemove: true,

src/ext/conf/ExtensionConf.js

@@ -936,9 +936,9 @@ var ExtensionConf = {
         player: {
           manual: true,
           useRelativeAncestor: true,
-          querySelectors: '',
+          // querySelectors: '',
           videoAncestor: 1,
-          additionalCss: '',
+          // additionalCss: '',
         }
       }
       // videoElement: {        // extra stuff for video tag

src/ext/lib/ar-detect/ArDetector.js

@@ -572,8 +572,8 @@ class ArDetector {
         // this means canvas needs to be resized, so we'll just re-run setup with all those new parameters
         this.stop();
           
-        var newCanvasWidth = window.innerHeight * (this.video.videoWidth / this.video.videoHeight);
+        let newCanvasWidth = window.innerHeight * (this.video.videoWidth / this.video.videoHeight);
-        var newCanvasHeight = window.innerHeight;
+        let newCanvasHeight = window.innerHeight;
         
         if (this.conf.resizer.videoAlignment === VideoAlignment.Center) {
           this.canvasDrawWindowHOffset = Math.round((window.innerWidth - newCanvasWidth) * 0.5);

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

@@ -233,7 +233,7 @@ class PlayerData {
     return false;
   }
 
-  getPlayer() {
+  getPlayer(isFullScreen) {
     const host = window.location.host;
     let element = this.video.parentNode;
 
@@ -322,28 +322,28 @@ class PlayerData {
       element = element.parentNode;
     }
 
-    return element;
+
+
+    return playerCandidateNode;
   }
 
 
   getPlayerDimensions(){
-    let element = this.getPlayer();
+    const isFullScreen = PlayerData.isFullScreen();
+
+    const element = this.getPlayer(isFullScreen);
 
     if(! element ){
       if(Debug.debug) {
-        console.log("[PlayerDetect::_pd_getPlayer] element is not valid, doing nothing.", element)
+        console.log("[PlayerDetect::getPlayerDimensions] element is not valid, doing nothing.", element)
-      }
-      if(this.element) {
-        const ths = this;
       }
       this.element = undefined;
       this.dimensions = undefined;
       return;
     }
 
-    var isFullScreen = PlayerData.isFullScreen();
           
-    if (isFullScreen && playerCandidateNode == element) {
+    if (isFullScreen) {
       this.dimensions = {
         width: window.innerWidth,
         height: window.innerHeight,
@@ -356,7 +356,7 @@ class PlayerData {
     } else {
       this.dimensions = {
         width: element.offsetWidth,
-        height: element.offsetWidth,
+        height: element.offsetHeight,
         fullscreen: isFullScreen
       };
       if(this.element != element) {
@@ -376,7 +376,7 @@ class PlayerData {
         // return true;
       // }
 
-      if(this.dimensions && this.dimensions.fullscreen){
+      if (this.dimensions && this.dimensions.fullscreen){
         if(! PlayerData.isFullScreen()){
           console.log("[PlayerDetect] player size changed. reason: exited fullscreen");
         }
@@ -387,7 +387,7 @@ class PlayerData {
       if ( this.element && 
            ( this.dimensions.width != this.element.offsetWidth ||
              this.dimensions.height != this.element.offsetHeight )
-      ){
+      ) {
         console.log("[PlayerDetect] player size changed. reason: dimension change. Old dimensions?", this.dimensions.width, this.dimensions.height, "new dimensions:", this.element.offsetWidth, this.element.offsetHeight);
       }
     }

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

@@ -0,0 +1,58 @@
+import Debug from '../../conf/Debug';
+
+class CssHandler {
+  static buildStyleArray(existingStyleString, extraStyleString) {
+    if (existingStyleString) {
+      const styleArray = existingStyleString.split(";");
+
+      if (extraStyleString) {
+        const extraCss = extraStyleString.split(';');
+        let dup = false;
+
+        for (const ecss of extraCss) {
+          for (let i in styleArray) {
+            if (ecss.split(':')[0].trim() === styleArray[i].split(':')[0].trim()) {
+              dup = true;
+              styleArray[i] = ecss;
+            }
+            if (dup) {
+              dup = false;
+              continue;
+            }
+            styleArray.push(ecss);
+          }
+        }
+      }
+  
+      for (var i in styleArray) {
+        styleArray[i] = styleArray[i].trim();   
+        // some sites do 'top: 50%; left: 50%; transform: <transform>' to center videos. 
+        // we dont wanna, because we already center videos on our own
+        if (styleArray[i].startsWith("transform:") ||
+            styleArray[i].startsWith("top:") ||
+            styleArray[i].startsWith("left:") ||
+            styleArray[i].startsWith("right:") ||
+            styleArray[i].startsWith("bottom:") ){
+          delete styleArray[i];
+        }
+      }
+      return styleArray;
+    }
+
+    return [];
+  }
+
+  static buildStyleString(styleArray) {
+    let styleString = '';
+
+    for(var i in styleArray) {
+      if(styleArray[i]) {
+        styleString += styleArray[i] + "; ";
+      }
+    }
+
+    return styleString;
+  }
+}
+
+export default CssHandler;

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

@@ -30,6 +30,7 @@ class Resizer {
     this.correctedVideoDimensions = {};
     this.currentCss = {};
     this.currentStyleString = "";
+    this.currentPlayerStyleString = "";
     this.currentCssValidFor = {};
 
     // restore watchdog. While true, applyCss() tries to re-apply new css until this value becomes false again
@@ -96,7 +97,7 @@ class Resizer {
     if (! this.conf.player.dimensions) {
       ratioOut = screen.width / screen.height;
     } else {
-      if (Debug.debug && Debug.debugResizer) {
+      if (Debug.debug && Debug.resizer) {
         console.log(`[Resizer::calculateRatioForLegacyOptions] <rid:${this.resizerId}> Player dimensions:`, this.conf.player.dimensions.width ,'x', this.conf.player.dimensions.height,'aspect ratio:', this.conf.player.dimensions.width / this.conf.player.dimensions.height)
       }
       ratioOut = this.conf.player.dimensions.width / this.conf.player.dimensions.height;
@@ -194,7 +195,7 @@ class Resizer {
       // I'm not sure whether they do. Check that.
       ar = this.calculateRatioForLegacyOptions(ar);
       if (! ar) {
-        if (Debug.debug && Debug.debugResizer) {
+        if (Debug.debug && Debug.resizer) {
           console.log(`[Resizer::setAr] <${this.resizerId}> Something wrong with ar or the player. Doing nothing.`);
         }
         return;
@@ -525,6 +526,59 @@ class Resizer {
     return translate; 
   }
   
+  buildStyleArray(existingStyleString, extraStyleString) {
+    if (existingStyleString) {
+      const styleArray = existingStyleString.split(";");
+
+      if (extraStyleString) {
+        const extraCss = extraStyleString.split(';');
+        let dup = false;
+
+        for (const ecss of extraCss) {
+          for (let i in styleArray) {
+            if (ecss.split(':')[0].trim() === styleArray[i].split(':')[0].trim()) {
+              dup = true;
+              styleArray[i] = ecss;
+            }
+            if (dup) {
+              dup = false;
+              continue;
+            }
+            styleArray.push(ecss);
+          }
+        }
+      }
+  
+      for (var i in styleArray) {
+        styleArray[i] = styleArray[i].trim();   
+        // some sites do 'top: 50%; left: 50%; transform: <transform>' to center videos. 
+        // we dont wanna, because we already center videos on our own
+        if (styleArray[i].startsWith("transform:") ||
+            styleArray[i].startsWith("top:") ||
+            styleArray[i].startsWith("left:") ||
+            styleArray[i].startsWith("right:") ||
+            styleArray[i].startsWith("bottom:") ){
+          delete styleArray[i];
+        }
+      }
+      return styleArray;
+    }
+
+    return [];
+  }
+
+  buildStyleString(styleArray) {
+    let styleString = '';
+
+    for(var i in styleArray) {
+      if(styleArray[i]) {
+        styleString += styleArray[i] + "; ";
+      }
+    }
+
+    return styleString;
+  }
+
   applyCss(stretchFactors, translate){
     // apply extra CSS here. In case of duplicated properties, extraCss overrides 
     // default styleString
@@ -537,6 +591,10 @@ class Resizer {
       this.conf.destroy();
       return;
     }
+
+    if (Debug.debug && Debug.resizer) {
+      console.log("[Resizer::applyCss] <rid:"+this.resizerId+"> will apply css.", {stretchFactors, translate});
+    }
     
     // save stuff for quick tests (before we turn numbers into css values):
     this.currentVideoSettings = {
@@ -545,78 +603,54 @@ class Resizer {
       // videoHeight: dimensions.height
     }
 
-    var styleArrayStr = this.video.getAttribute('style');
+    const styleArrayString = this.video.getAttribute('style');
-
+    let extraStyleString;
-
+    try {
-    if (styleArrayStr) {
+      extraStyleString = this.settings.active.sites[window.location.host].DOM.video.additionalCss;
-      var styleArray = styleArrayStr.split(";");
+    } catch (e) {
-
+      // do nothing. It's ok if no special settings are defined for this site, we'll just do defaults
-      try {
-        const extraCss = this.settings.active.sites[window.location.host].DOM.video.additionalCss.split(';');
-        let dup = false;
-
-        for (const ecss of extraCss) {
-          for (let i in styleString) {
-            if (ecss.split(':')[0].trim() === styleString[i].split(':')[0].trim()) {
-              dup = true;
-              styleString[i] = ecss;
-            }
-            if (dup) {
-              dup = false;
-              continue;
-            }
-            styleString.push(ecss);
-          }
-        }
-      } catch (e) {
-        // do nothing. We just want to catch cases where things like that aren't defined
-        // for the current video
-      }
-  
-      for (var i in styleArray) {
-        styleArray[i] = styleArray[i].trim();
-        
-        // some sites do 'top: 50%; left: 50%; transform: <transform>' to center videos. 
-        // we dont wanna, because we already center videos on our own
-        if (styleArray[i].startsWith("transform:") ||
-            styleArray[i].startsWith("top:") ||
-            styleArray[i].startsWith("left:") ||
-            styleArray[i].startsWith("right:") ||
-            styleArray[i].startsWith("bottom:") ){
-          delete styleArray[i];
-        }
-      }
-    }else {
-      var styleArray = [];
     }
-    
+
+    const styleArray = this.buildStyleArray(styleArrayString, extraStyleString)
+
     // add remaining elements
     
     if (stretchFactors) {
       styleArray.push(`transform: translate(${translate.x}px, ${translate.y}px) scale(${stretchFactors.xFactor}, ${stretchFactors.yFactor})`);
       styleArray.push("top: 0px; left: 0px; bottom: 0px; right: 0px");
     }
+    const styleString = this.buildStyleString(styleArray);
+
+    // see if we have any extra css for the player element:
+    let playerStyleString;
+    try {
+      playerStyleString = this.settings.active.sites[window.location.host].DOM.player.additionalCss;
+      if (playerStyleString) {
+        const playerStyleArrayString = this.player.eleemnt.getAttribute('style');
+        const playerStyleArray = this.buildStyleArray(playerStyleString, playerStyleString);
+        playerStyleString = this.buildStyleString(playerStyleArray);
+      }
+    } catch (e) {
+      // do nothing. It's ok if there's no special settings for the player element
+    }
 
     // build style string back
-    var styleString = "";
+    this.setStyleString(styleString, playerStyleString);
-    for(var i in styleArray) {
-      if(styleArray[i]) {
-        styleString += styleArray[i] + "; ";
-      }
-    }
-    
-    this.setStyleString(styleString);
   }
 
-  setStyleString (styleString, count = 0) {
+  setStyleString (styleString, playerStyleString) {
     this.video.setAttribute("style", styleString);
+    this.currentStyleString = styleString;
+
+    if (playerStyleString) {
+      this.player.element.setAttribute('style', styleString);
+      this.currentPlayerStyleString = playerStyleString;
+    }
 
-    this.currentStyleString = this.video.getAttribute('style');
     this.currentCssValidFor = this.conf.player.dimensions;
     
-    if(this.restore_wd){
+    if (this.restore_wd) {
-  
+      if (!this.video){
-      if(! this.video){
         if(Debug.debug)
           console.log("[Resizer::_res_setStyleString] <rid:"+this.resizerId+"> Video element went missing, nothing to do here.")
         return;
@@ -659,8 +693,8 @@ class Resizer {
     // }
     
     // this means video went missing. videoData will be re-initialized when the next video is found
-    if(! this.video){
+    if (!this.video){
-      if(Debug.debug && Debug.debugResizer) {
+      if(Debug.debug && Debug.resizer) {
         console.log("[Resizer::cssCheck] <rid:"+this.resizerId+"> no video detecting, issuing destroy command");
       }
       this.conf.destroy();
@@ -668,23 +702,35 @@ class Resizer {
     }
     
     if(this.destroyed) {
-      if(Debug.debug && Debug.debugResizer) {
+      if(Debug.debug && Debug.resizer) {
         console.log("[Resizer::cssCheck] <rid:"+this.resizerId+"> destroyed flag is set, we shouldnt be running");
       }
       this.stopCssWatcher();
       return;
     }
 
-    var styleString = this.video.getAttribute('style');
+    let cssValid = true;
 
     // first, a quick test:
-    // if (this.currentVideoSettings.validFor == this.conf.player.dimensions ){
+    cssValid &= this.currentVideoSettings.validFor.width === this.conf.player.dimensions.width;
-    if (this.currentStyleString !== styleString){
+    cssValid &= this.currentVideoSettings.validFor.height === this.conf.player.dimensions.height;
-      if(Debug.debug && Debug.debugResizer) {
+
+    if (cssValid) {
+      const styleString = this.video.getAttribute('style');
+      cssValid &= this.currentStyleString === styleString;
+    }
+    if (cssValid && this.currentPlayerStyleString) {  // only check for changes to player element if we applied them before
+      const playerStyleString = this.player.element.getAttribute('style'); 
+      cssValid &= this.currentPlayerStyleString === playerStyleString;
+    }
+    if (!cssValid){
+      if(Debug.debug && Debug.resizer) {
         console.log(`%c[Resizer::cssCheck] <rid:${this.resizerId}> something touched our style string. We need to re-apply the style.`, {background: '#ddf', color: '#007'});
       }
       this.restore();
       this.scheduleCssWatcher(10);
+
+      return;
     }
     if (this.cssWatcherIncreasedFrequencyCounter > 0) {
       --this.cssWatcherIncreasedFrequencyCounter;