Start working on applying extra css to player and video elements

src/ext/conf/ExtensionConf.js

@@ -931,13 +931,14 @@ var ExtensionConf = {
         video: {
           manual: false,
           querySelectors: '',
+          additionalCss: '',
         },
         player: {
           manual: true,
           useRelativeAncestor: true,
           querySelectors: '',
           videoAncestor: 1,
-          playerNodeCss: '',
+          additionalCss: '',
         }
       }
       // videoElement: {        // extra stuff for video tag

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

@@ -511,7 +511,7 @@ class Resizer {
       }
     }
 
-    // if(Debug.debug) {
+    if(Debug.debug) {
       console.log("[Resizer::_res_computeOffsets] <rid:"+this.resizerId+"> calculated offsets:\n\n",
       '---- data in ----\n',
       'player dimensions:', {w: this.conf.player.dimensions.width, h: this.conf.player.dimensions.height},
@@ -520,13 +520,14 @@ class Resizer {
       'pan & zoom:       ', this.pan, this.zoom,
       '\n\n---- data out ----\n',
       'translate:', translate);
-    // }
+    }
 
     return translate; 
   }
   
   applyCss(stretchFactors, translate){
-
+    // apply extra CSS here. In case of duplicated properties, extraCss overrides 
+    // default styleString
     if (! this.video) {
       if(Debug.debug) {
         console.log("[Resizer::applyCss] <rid:"+this.resizerId+"> Video went missing, doing nothing.");
@@ -545,13 +546,34 @@ class Resizer {
     }
 
     var styleArrayStr = this.video.getAttribute('style');
-    var styleArrayObj = window.getComputedStyle(this.video);
 
 
     if (styleArrayStr) {
       var styleArray = styleArrayStr.split(";");
-      for(var i in styleArray){
+
-        
+      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. 
@@ -568,19 +590,20 @@ class Resizer {
       var styleArray = [];
     }
     
-
     // add remaining elements
     
-    if(stretchFactors){
+    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");
     }
 
     // build style string back
     var styleString = "";
-    for(var i in styleArray)
+    for(var i in styleArray) {
-      if(styleArray[i])
+      if(styleArray[i]) {
         styleString += styleArray[i] + "; ";
+      }
+    }
     
     this.setStyleString(styleString);
   }

src/popup/panels/SiteDetailsPanel.vue

@@ -20,6 +20,15 @@
                @blur="updateVideoQuerySelector"
         />
       </div>
+      <div class="flex flex-column">
+        <div class="flex label-secondary form-label">Additional css</div>
+        <input type="text"
+               v-model="videoCss"
+               @change="updateVideoCss"
+               @blur="updateVideoCss"
+        />
+      </div>
+
     </div>
 
     <div class="label">
@@ -63,6 +72,14 @@
                 type="number" 
          />
       </div>
+      <div class="flex flex-column">
+        <div class="flex label-secondary form-label">Additional css</div>
+        <input type="text"
+               v-model="playerCss"
+               @change="updatePlayerCss"
+               @blur="updatePlayerCss"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -80,8 +97,10 @@ export default {
     return {
       videoManualQs: false,
       videoQs: '',
+      videoCss: '',
       playerManualQs: false,
       playerQs: '',
+      playerCss: '',
       playerByNodeIndex: false,
       playerParentNodeIndex: undefined,
     };
@@ -94,6 +113,7 @@ export default {
     try {
       this.videoManualQs = settings.active.sites[this.site].DOM.video.manual || this.videoManualQs;
       this.videoQs = settings.active.sites[this.site].DOM.video.querySelectors;
+      this.videoCss = settings.active.sites[this.site].DOM.video.additionalCss;
     } catch (e) {
       // that's here just in case relevant settings for this site don't exist yet
     }
@@ -101,6 +121,7 @@ export default {
     try {
       this.playerManualQs = settings.active.sites[this.site].DOM.player.manual || this.playerManualQs;
       this.playerQs = settings.active.sites[this.site].DOM.player.querySelectors;
+      this.playerCss = settings.active.sites[this.site].DOM.player.additionalCss;
       this.playerByNodeIndex = settings.active.sites[this.site].DOM.player.useRelativeAncestor;
       this.playerParentNodeIndex = settings.active.sites[this.site].DOM.player.videoAncestor;
     } catch (e) {
@@ -126,6 +147,7 @@ export default {
         this.settings.active.sites[this.site].DOM[scope] = {
           manual: false,
           querySelectors: '',
+          additionalCss: '',
           useRelativeAncestor: scope === 'player' ? false : undefined,
           videoAncestor: undefined,
           playerNodeCss: scope === 'player' ? '' : undefined,
@@ -137,11 +159,21 @@ export default {
       this.settings.active.sites[this.site].DOM.video.querySelectors = this.videoQs;
       this.settings.save();
     },
+    updateVideoCss() {
+      this.ensureSettings('video');
+      this.settings.active.sites[this.site].DOM.video.additionalCss = this.videoCss;
+      this.settings.save();
+    },
     updatePlayerQuerySelector() {
       this.ensureSettings('player');
       this.settings.active.sites[this.site].DOM.player.querySelectors = this.playerQs;
       this.settings.save();
     },
+    updateVideoCss() {
+      this.ensureSettings('player');
+      this.settings.active.sites[this.site].DOM.player.additionalCss = this.playerCss;
+      this.settings.save();
+    },
     updatePlayerParentNodeIndex() {
       this.ensureSettings('player');
       this.settings.active.sites[this.site].DOM.player.videoAncestor = this.playerParentNodeIndex;