Merge branch '4.2.3' into stable

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ultravidify",
-  "version": "4.2.1",
+  "version": "4.2.3",
   "description": "Aspect ratio fixer for youtube that works around some people's disability to properly encode 21:9 (and sometimes, 16:9) videos.",
   "author": "Tamius Han <tamius.han@gmail.com>",
   "scripts": {
@@ -13,7 +13,7 @@
     "build-edge:dev": "cross-env NODE_ENV=development BROWSER=edge webpack --hide-modules",
     "build-zip": "node scripts/build-zip.js",
     "watch": "npm run build -- --watch",
-    "watch-chrome": "npm run build-chrome-- --watch",
+    "watch-chrome": "npm run build-chrome -- --watch",
     "watch-edge": "npm run build-edge -- --watch",
     "watch:dev": "cross-env HMR=true npm run build:dev -- --watch",
     "watch-chrome:dev": "cross-env HMR=true npm run build-chrome:dev -- --watch",

src/ext/conf/Debug.js

@@ -1,6 +1,6 @@
 // Set prod to true when releasing
-const _prod = true; 
+// const _prod = true; 
-// const _prod = false; 
+const _prod = false; 
 
 var Debug = {
   // performanceMetrics: true, // should not be affected by debug.debug in order to allow benchmarking of the impact logging in console has
@@ -19,7 +19,7 @@ var Debug = {
   // flushStoredSettings: false,
   // playerDetect: true,
   // periodic: true,
-  // videoRescan: true,
+  // // videoRescan: true,
   // mousemove: true,
   // arDetect: {
     // edgeDetect: true

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

@@ -765,22 +765,34 @@ class ArDetector {
     if(Debug.debug && Debug.debugArDetect){
       console.log(`%c[ArDetect::frameCheck] Triggering aspect ration change! new ar: ${newAr}`, "color: #aaf");
     }
-    this.processAr(newAr);
   
     // we also know edges for guardline, so set them.
     // we need to be mindful of fallbackMode though
-    if (!this.fallbackMode) {
+    // if edges are okay and not invalid, we also 
-      this.guardLine.setBlackbar({top: edgePost.guardLineTop, bottom: edgePost.guardLineBottom});
+    // allow automatic aspect ratio correction. If edges
-    } else {
+    // are bogus, we remain aspect ratio unchanged.
-      if (this.conf.player.dimensions){
+    try {
-        this.guardLine.setBlackbarManual({
+      if (!this.fallbackMode) {
-          top: this.settings.active.arDetect.fallbackMode.noTriggerZonePx,
+        // throws error if top/bottom are invalid
-          bottom: this.conf.player.dimensions.height - this.settings.active.arDetect.fallbackMode.noTriggerZonePx - 1
+        this.guardLine.setBlackbar({top: edgePost.guardLineTop, bottom: edgePost.guardLineBottom});
-        },{
+      } else {
-          top: edgePost.guardLineTop + this.settings.active.arDetect.guardLine.edgeTolerancePx,
+        if (this.conf.player.dimensions){
-          bottom: edgePost.guardLineBottom - this.settings.active.arDetect.guardLine.edgeTolerancePx
+          this.guardLine.setBlackbarManual({
-        })
+            top: this.settings.active.arDetect.fallbackMode.noTriggerZonePx,
+            bottom: this.conf.player.dimensions.height - this.settings.active.arDetect.fallbackMode.noTriggerZonePx - 1
+          },{
+            top: edgePost.guardLineTop + this.settings.active.arDetect.guardLine.edgeTolerancePx,
+            bottom: edgePost.guardLineBottom - this.settings.active.arDetect.guardLine.edgeTolerancePx
+          })
+        }
       }
+
+      this.processAr(newAr);
+    } catch (e) {
+      // edges weren't gucci, so we'll just reset 
+      // the aspect ratio to defaults
+      this.guardline.reset();
+      this.conf.resizer.setAr({type: AspectRatio.Automatic, ratio: this.getDefaultAr()});
     }
 
     // }

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

@@ -34,9 +34,7 @@ class GuardLine {
     // to odstrani vse neveljavne nastavitve in vse možnosti, ki niso smiselne
     // this removes any configs with invalid values or values that dont make sense
     if (bbTop < 0 || bbBottom >= this.conf.canvas.height ){
-      console.log("%c[GuardLine::setBlackbar] INVALID SETTINGS IN GUARDLINE","background: #000; color: #fff")
+      throw "INVALID_SETTINGS_IN_GUARDLINE"
-      this.reset();
-      return;
     }
 
     this.blackbar = {

src/ext/lib/ar-detect/edge-detect/EdgeDetect.js

@@ -247,91 +247,91 @@ class EdgeDetect{
     var bottomEdgeCount = 0;
       
     try {
-    for (const sample of samples.res_top){
+      for (const sample of samples.res_top){
-      blackEdgeViolation = false; // reset this
+        blackEdgeViolation = false; // reset this
-      
+        
-      // determine our bounds. Note that sample.col is _not_ corrected for imageData, but halfSample is
+        // determine our bounds. Note that sample.col is _not_ corrected for imageData, but halfSample is
-      sampleStart = (sample.col << 2) - this.halfSample;
+        sampleStart = (sample.col << 2) - this.halfSample;
-      
+        
-      if(sampleStart < 0)
+        if(sampleStart < 0)
-        sampleStart = 0;
+          sampleStart = 0;
-      
+        
-      sampleEnd = sampleStart + this.sampleWidthBase;
+        sampleEnd = sampleStart + this.sampleWidthBase;
-      if(sampleEnd > this.conf.canvasImageDataRowLength)
+        if (sampleEnd > this.conf.canvasImageDataRowLength)
-        sampleEnd = this.conf.canvasImageDataRowLength;
+          sampleEnd = this.conf.canvasImageDataRowLength;
-      
+        
-      // calculate row offsets for imageData array
+        // calculate row offsets for imageData array
-      sampleRow_black = (sample.black - this.settings.active.arDetect.edgeDetection.edgeTolerancePx - 1) * this.conf.canvasImageDataRowLength;
+        sampleRow_black = (sample.black - this.settings.active.arDetect.edgeDetection.edgeTolerancePx - 1) * this.conf.canvasImageDataRowLength;
-      sampleRow_color = (sample.black + this.settings.active.arDetect.edgeDetection.edgeTolerancePx) * this.conf.canvasImageDataRowLength;
+        sampleRow_color = (sample.black + this.settings.active.arDetect.edgeDetection.edgeTolerancePx) * this.conf.canvasImageDataRowLength;
-      
+        
-      // že ena kršitev črnega roba pomeni, da kandidat ni primeren
+        // že ena kršitev črnega roba pomeni, da kandidat ni primeren
-      // even a single black edge violation means the candidate is not an edge
+        // even a single black edge violation means the candidate is not an edge
-      loopEnd = sampleRow_black + sampleEnd;
+        loopEnd = sampleRow_black + sampleEnd;
 
-      if(Debug.debugCanvas.enabled){
+        if (Debug.debugCanvas.enabled){
-        blackEdgeViolation = this._blackbarTest_dbg(image, sampleRow_black + sampleStart, loopEnd);
+          blackEdgeViolation = this._blackbarTest_dbg(image, sampleRow_black + sampleStart, loopEnd);
-      } else {
+        } else {
-        blackEdgeViolation = this._blackbarTest(image, sampleRow_black + sampleStart, loopEnd);
+          blackEdgeViolation = this._blackbarTest(image, sampleRow_black + sampleStart, loopEnd);
-      }
+        }
 
-      // če je bila črna črta skrunjena, preverimo naslednjega kandidata
+        // če je bila črna črta skrunjena, preverimo naslednjega kandidata
-      // if we failed, we continue our search with the next candidate
+        // if we failed, we continue our search with the next candidate
-      if (blackEdgeViolation) {
+        if (blackEdgeViolation) {
-        continue;
+          continue;
-      }
+        }
-      
+        
-      detections = 0;
+        detections = 0;
-      loopEnd = sampleRow_color + sampleEnd;
+        loopEnd = sampleRow_color + sampleEnd;
 
-      if(Debug.debugCanvas.enabled) {
+        if (Debug.debugCanvas.enabled) {
-        this._imageTest_dbg(image, sampleRow_color + sampleStart, loopEnd, sample.black, edgeCandidatesTop)
+          this._imageTest_dbg(image, sampleRow_color + sampleStart, loopEnd, sample.black, edgeCandidatesTop)
-      } else {
+        } else {
-        this._imageTest(image, sampleRow_color + sampleStart, loopEnd, sample.black, edgeCandidatesTop);
+          this._imageTest(image, sampleRow_color + sampleStart, loopEnd, sample.black, edgeCandidatesTop);
-      }
+        }
-    }
-    
-    for (const sample of samples.res_bottom){
-      blackEdgeViolation = false; // reset this
-      
-      // determine our bounds. Note that sample.col is _not_ corrected for imageData, but this.halfSample is
-      sampleStart = (sample.col << 2) - this.halfSample;
-      
-      if(sampleStart < 0)
-        sampleStart = 0;
-      
-      sampleEnd = sampleStart + this.sampleWidthBase;
-      if(sampleEnd > this.conf.canvasImageDataRowLength)
-        sampleEnd = this.conf.canvasImageDataRowLength;
-      
-      // calculate row offsets for imageData array
-      sampleRow_black = (sample.black + this.settings.active.arDetect.edgeDetection.edgeTolerancePx + 1) * this.conf.canvasImageDataRowLength;
-      sampleRow_color = (sample.black - this.settings.active.arDetect.edgeDetection.edgeTolerancePx) * this.conf.canvasImageDataRowLength;
-      
-      // že ena kršitev črnega roba pomeni, da kandidat ni primeren
-      // even a single black edge violation means the candidate is not an edge
-      loopEnd = sampleRow_black + sampleEnd;
-      
-      if(Debug.debugCanvas.enabled){
-        blackEdgeViolation = this._blackbarTest_dbg(image, sampleRow_black + sampleStart, loopEnd);
-      } else {
-        blackEdgeViolation = this._blackbarTest(image, sampleRow_black + sampleStart, loopEnd);
       }
       
-      // če je bila črna črta skrunjena, preverimo naslednjega kandidata
+      for (const sample of samples.res_bottom){
-      // if we failed, we continue our search with the next candidate
+        blackEdgeViolation = false; // reset this
-      if (blackEdgeViolation) {
+        
-        continue;
+        // determine our bounds. Note that sample.col is _not_ corrected for imageData, but this.halfSample is
-      }
+        sampleStart = (sample.col << 2) - this.halfSample;
-      
+        
-      detections = 0;
+        if(sampleStart < 0)
-      loopEnd = sampleRow_color + sampleEnd;
+          sampleStart = 0;
+        
+        sampleEnd = sampleStart + this.sampleWidthBase;
+        if(sampleEnd > this.conf.canvasImageDataRowLength)
+          sampleEnd = this.conf.canvasImageDataRowLength;
+        
+        // calculate row offsets for imageData array
+        sampleRow_black = (sample.black + this.settings.active.arDetect.edgeDetection.edgeTolerancePx + 1) * this.conf.canvasImageDataRowLength;
+        sampleRow_color = (sample.black - this.settings.active.arDetect.edgeDetection.edgeTolerancePx) * this.conf.canvasImageDataRowLength;
+        
+        // že ena kršitev črnega roba pomeni, da kandidat ni primeren
+        // even a single black edge violation means the candidate is not an edge
+        loopEnd = sampleRow_black + sampleEnd;
+        
+        if(Debug.debugCanvas.enabled){
+          blackEdgeViolation = this._blackbarTest_dbg(image, sampleRow_black + sampleStart, loopEnd);
+        } else {
+          blackEdgeViolation = this._blackbarTest(image, sampleRow_black + sampleStart, loopEnd);
+        }
+        
+        // če je bila črna črta skrunjena, preverimo naslednjega kandidata
+        // if we failed, we continue our search with the next candidate
+        if (blackEdgeViolation) {
+          continue;
+        }
+        
+        detections = 0;
+        loopEnd = sampleRow_color + sampleEnd;
 
-      if(Debug.debugCanvas.enabled) {
+        if(Debug.debugCanvas.enabled) {
-        this._imageTest_dbg(image, sampleRow_color + sampleStart, loopEnd, sample.black, edgeCandidatesBottom);
+          this._imageTest_dbg(image, sampleRow_color + sampleStart, loopEnd, sample.black, edgeCandidatesBottom);
-      } else {
+        } else {
-        this._imageTest(image, sampleRow_color + sampleStart, loopEnd, sample.black, edgeCandidatesBottom);
+          this._imageTest(image, sampleRow_color + sampleStart, loopEnd, sample.black, edgeCandidatesBottom);
+        }
       }
-    }
     } catch (e) {
       console.log("\n\nuwu fucky wucky:", e, "\n\n")
     }
@@ -623,7 +623,9 @@ class EdgeDetect{
 
     if (reverseSearchDirection) {
       increment = -this.conf.canvasImageDataRowLength;
-      arrayStart = bottom - this.conf.canvasImageDataRowLength;
+      // don't subtract this.conf.canvasImageDataRowLength — it has already been accounted for
+      // when we calculated bottom and top
+      arrayStart = bottom; 
       arrayEnd = top;
 
       // this is a hack so we get pointer-like things rather than values

src/ext/lib/comms/CommsServer.js

@@ -220,10 +220,13 @@ class CommsServer {
       this.server.injectCss(message.cssString, sender);
       return;
     }
-    if (message.cmd === 'remove-css') {
+    if (message.cmd === 'remove-css' || message.cmd === 'eject-css') {
       this.server.removeCss(message.cssString, sender);
       return;
     }
+    if (message.cmd === 'replace-css') {
+      this.server.replaceCss(message.oldCssString, message.newCssString, sender);
+    }
 
     if (message.forwardToContentScript) {
       if (Debug.debug && Debug.comms) {

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

@@ -41,6 +41,28 @@ class PageInfo {
     this.currentZoomScale = 1;
   }
 
+  injectCss(cssString) {
+    this.comms.sendMessage({
+      cmd: 'inject-css',
+      cssString: cssString
+    });
+  }
+
+  ejectCss(cssString) {
+    this.comms.sendMessage({
+      cmd: 'eject-css',
+      cssString: cssString
+    });
+  }
+
+  replaceCss(oldCssString, newCssString) {
+    this.comms.sendMessage({
+      cmd: 'replace-css',
+      newCssString,
+      oldCssString
+    });
+  }
+
   destroy() {
     if(Debug.debug || Debug.init){
       console.log("[PageInfo::destroy] destroying all videos!")

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

@@ -13,6 +13,18 @@ class VideoData {
     this.pageInfo = pageInfo;
     this.extensionMode = pageInfo.extensionMode;
 
+    this.vdid = (Math.random()*100).toFixed();
+    this.userCssClassName = `uw-fuck-you-and-do-what-i-tell-you_${this.vdid}`;
+
+
+    // We'll replace cssWatcher (in resizer) with mutationObserver
+    const observerConf = {
+      attributes: true,
+      // attributeFilter: ['style', 'class'],
+      attributeOldValue: true,
+    };
+    this.observer = new MutationObserver(this.onVideoDimensionsChanged);
+    this.observer.observe(video, observerConf);
 
     // POZOR: VRSTNI RED JE POMEMBEN (arDetect mora bit zadnji)
     // NOTE: ORDERING OF OBJ INITIALIZATIONS IS IMPORTANT (arDetect needs to go last)    
@@ -30,12 +42,38 @@ class VideoData {
     this.resizer.reset();
 
     
-    this.vdid = (Math.random()*100).toFixed();
     if (Debug.init) {
       console.log("[VideoData::ctor] Created videoData with vdid", this.vdid,"\nextension mode:", this.extensionMode);
     }
 
     this.pageInfo.initMouseActionHandler(this);
+
+    this.video.classList.add(this.userCssClassName); // this also needs to be applied BEFORE we initialize resizer!
+  }
+
+  onVideoDimensionsChanged(mutationList, observer) {
+    for (let mutation of mutationList) {
+      if (mutation.type === 'attributes') {
+        console.log("video attributes were changed:", mutation)
+        if (mutation.attributeName === 'class') {
+          if (!this.video.classList.contains(this.userCssClassName)) {
+            console.log("class changed!")
+            // force the page to include our class in classlist, if the classlist has been removed
+            this.video.classList.add(this.userCssClassName);
+
+          // } else if () {
+            // this bug should really get 
+          } else {
+              this.restoreAr();
+          }
+        } else if (mutation.attributeName === 'style' && mutation.attributeOldValue !== this.video.getAttribute('style')) {
+          console.log("style changed")
+          // if size of the video has changed, this may mean we need to recalculate/reapply
+          // last calculated aspect ratio
+          this.restoreAr();
+        }
+      }
+    }
   }
 
   firstTimeArdInit(){

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

@@ -24,8 +24,6 @@ class Resizer {
     this.stretcher = new Stretcher(this.conf); 
     this.zoom = new Zoom(this.conf);
 
-    this.cssCheckDisabled = false;
-
     // load up default values
     this.correctedVideoDimensions = {};
     this.currentCss = {};
@@ -33,16 +31,6 @@ class Resizer {
     this.currentPlayerStyleString = "";
     this.currentCssValidFor = {};
 
-    // restore watchdog. While true, applyCss() tries to re-apply new css until this value becomes false again
-    // value becomes false when width and height of <video> tag match with what we want to set. Only necessary when
-    // calling _res_restore() for some weird reason.
-    this.restore_wd = false;
-
-    // CSS watcher will trigger _very_ often for this many iterations
-    this.cssWatcherIncreasedFrequencyCounter = 0;
-
-    
-    // this.lastAr = this.settings.getDefaultAr();                 // this is the aspect ratio we start with
     this.lastAr = {type: AspectRatio.Initial};
     this.videoAlignment = this.settings.getDefaultVideoAlignment(window.location.hostname); // this is initial video alignment
     this.destroyed = false;
@@ -50,21 +38,30 @@ class Resizer {
     this.resizerId = (Math.random(99)*100).toFixed(0);
 
     if (this.settings.active.pan) {
-      console.log("can pan:", this.settings.active.miscSettings.mousePan.enabled, "(default:", this.settings.active.miscSettings.mousePan.enabled, ")")
+      // console.log("can pan:", this.settings.active.miscSettings.mousePan.enabled, "(default:", this.settings.active.miscSettings.mousePan.enabled, ")")
       this.canPan = this.settings.active.miscSettings.mousePan.enabled;
     } else {
       this.canPan = false;
     }
+
+    this.userCss = '';
+    this.userCssClassName = videoData.userCssClassName; 
   }
   
-  start(){
+  injectCss(css) {
-    if(!this.destroyed) {
+    this.conf.pageInfo.injectCss(css);
-      this.startCssWatcher();
+  }
-    }
+  
+  ejectCss(css) {
+    this.conf.pageInfo.ejectCss(css);
+  }
+  
+  replaceCss(oldCss, newCss) {
+    this.conf.pageInfo.replaceCss(oldCss, newCss);
   }
 
-  stop(){
+  prepareCss(css) {
-    this.stopCssWatcher();
+    return `.${this.userCssClassName} {${css}}`;
   }
 
   destroy(){
@@ -72,7 +69,6 @@ class Resizer {
       console.log(`[Resizer::destroy] <rid:${this.resizerId}> received destroy command.`);
     }
     this.destroyed = true;
-    this.stopCssWatcher();
   }
 
   calculateRatioForLegacyOptions(ar){
@@ -211,14 +207,9 @@ class Resizer {
 
     if (! this.video) {
       // console.log("No video detected.")
-      this.videoData.destroy();
+      this.conf.destroy();
     }
 
-    if (this.extensionMode === ExtensionMode.Enabled || PlayerData.isFullScreen()) {
-      this.startCssWatcher();
-    }
-    this.cssWatcherIncreasedFrequencyCounter = 20;
-
     // // pause AR on basic stretch, unpause when using other mdoes
     // fir sine reason unpause doesn't unpause. investigate that later
     try {
@@ -248,13 +239,8 @@ class Resizer {
           if(Debug.debug){
             console.log("[Resizer::setAr] <rid:"+this.resizerId+"> Illegal video dimensions found. We will pause everything.");
           }
-          // if we get illegal video dimensions, cssWatcher goes nuts. This is harmful,
-          // so we stop it until that sorts itself out
-          this.stopCssWatcher();
         }
         return;
-      } else {
-        this.startCssWatcher();
       }
       if(this.stretcher.mode === Stretch.Conditional){
          this.stretcher.applyConditionalStretch(stretchFactors, ar.ratio);
@@ -354,74 +340,12 @@ class Resizer {
     this.restore();
   }
 
-  startCssWatcher(){
-    if(Debug.debug) {
-      console.log("[Resizer.js::startCssWatcher] starting css watcher. Is resizer destroyed?", this.destroyed);
-    }
-    if (this.destroyed) {
-      return;
-    }
-
-    this.cssCheckDisabled = false;
-
-    if(!this.cssWatcherTimer){
-      this.scheduleCssWatcher(1);
-    } else {
-      clearTimeout(this.cssWatcherTimer);
-      this.scheduleCssWatcher(1);
-    }
-  }
-  
-  scheduleCssWatcher(timeout, force_reset) {
-    if (this.destroyed || (this.extensionMode !== ExtensionMode.Enabled && !PlayerData.isFullScreen())) {
-      return;
-    }
-
-    if(timeout === undefined) {
-      this.cssCheck(); // no timeout = one-off
-      return;
-    }
-
-    // one extra check to ensure we don't run css checks when we aren't supposed to
-    if (this.cssCheckDisabled) {
-      return;
-    }
-
-    if(this.cssWatcherTimeout) {
-      clearTimeout(this.cssWatcherTimer);
-    }
-
-    var ths = this;
-    this.cssWatcherTimer = setTimeout(function () {
-        ths.cssWatcherTimer = null;
-        try {
-          if (! ths.cssCheckDisabled) {
-            ths.cssCheck();
-          }
-        } catch (e) {
-          if(Debug.debug) {
-            console.log("[Resizer.js::scheduleCssWatcher] Css check failed. Error:", e);
-          }
-        }
-      }, timeout);
-  }
-
-  stopCssWatcher() {
-    if (Debug.debug) {
-      console.log(`[Resizer.js] <${this.resizerId}> STOPPING CSS WATCHER!`)
-    }
-    this.cssCheckDisabled = true;
-    clearInterval(this.cssWatcherTimeout);
-  }
-
   restore() {
     if(Debug.debug){
       console.log("[Resizer::restore] <rid:"+this.resizerId+"> attempting to restore aspect ratio. this & settings:", {'a_lastAr': this.lastAr, 'this': this, "settings": this.settings} );
     }
     
     // this is true until we verify that css has actually been applied
-    this.restore_wd = true;
-    
     if(this.lastAr.type === AspectRatio.Initial){
       this.setAr({type: AspectRatio.Reset});
     }
@@ -572,7 +496,7 @@ class Resizer {
 
     for(var i in styleArray) {
       if(styleArray[i]) {
-        styleString += styleArray[i] + "; ";
+        styleString += styleArray[i] + " !important; ";
       }
     }
 
@@ -593,7 +517,7 @@ class Resizer {
     }
 
     if (Debug.debug && Debug.resizer) {
-      console.log("[Resizer::applyCss] <rid:"+this.resizerId+"> will apply css.", {stretchFactors, translate});
+      console.log("[Resizer::applyCss] <rid:"+this.resizerId+"> will apply css.", {stretchFactors, translate, video: this.video});
     }
     
     // save stuff for quick tests (before we turn numbers into css values):
@@ -603,7 +527,6 @@ class Resizer {
       // videoHeight: dimensions.height
     }
 
-    const styleArrayString = this.video.getAttribute('style');
     let extraStyleString;
     try {
       extraStyleString = this.settings.active.sites[window.location.host].DOM.video.additionalCss;
@@ -611,113 +534,31 @@ class Resizer {
       // do nothing. It's ok if no special settings are defined for this site, we'll just do defaults
     }
 
-    const styleArray = this.buildStyleArray(styleArrayString, extraStyleString)
+    const styleArray = this.buildStyleArray('', 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");
+      styleArray.push("top: 0px !important; left: 0px !important; bottom: 0px !important; right: 0px");
     }
-    const styleString = this.buildStyleString(styleArray);
+    const styleString = `${this.buildStyleString(styleArray)}${extraStyleString || ''}`; // string returned by buildStyleString() should end with ; anyway
 
     // build style string back
     this.setStyleString(styleString);
   }
 
   setStyleString (styleString) {
-    this.video.setAttribute("style", styleString);
-    this.currentStyleString = styleString;
-
     this.currentCssValidFor = this.conf.player.dimensions;
-    
+    const newCssString = this.prepareCss(styleString);
-    if (this.restore_wd) {
-      if (!this.video){
-        if(Debug.debug)
-          console.log("[Resizer::_res_setStyleString] <rid:"+this.resizerId+"> Video element went missing, nothing to do here.")
-        return;
-      }
-      
-      // if(
-      //   styleString.indexOf("width: " + this.video.style.width) == -1 ||
-      //   styleString.indexOf("height: " + this.video.style.height) == -1) {
-      //   // css ni nastavljen?
-      //   // css not set?
-      //   if(Debug.debug)
-      //     console.log("[Resizer::_res_setStyleString] Style string not set ???");
-        
-      //   if(count < settings.active.resizer.setStyleString.maxRetries){
-      //     setTimeout( this.setStyleString, settings.active.resizer.setStyleString.retryTimeout, count + 1);
-      //   }
-      //   else if(Debug.debug){
-      //     console.log("[Resizer::_res_setStyleString] we give up. css string won't be set");
-      //   }
-      // }
-      // else{
-        this.restore_wd = false;
-      // }
-    }
-    else{
-      if(Debug.debug)
-        console.log("[Resizer::_res_setStyleString] <rid:"+this.resizerId+"> css applied. Style string:", styleString);
-    }
-  }
 
-  cssCheck(){
+    // inject new CSS or replace existing one
-    if (this.cssCheckDisabled) {
+    if (!this.userCss) {
-      throw "fucking dont"
+      this.injectCss(newCssString);
-      return;
+      this.userCss = newCssString;
-    }
+    } else if (newCssString !== this.userCss) {
-    // this means we haven't set our CSS yet, or that we changed video.
+      // we only replace css if it
-    // if(! this.currentCss.tranform) {
+      this.replaceCss(this.userCss, newCssString);
-    //   this.scheduleCssWatcher(200);      
+      this.userCss = newCssString;
-    //   return;
-    // }
-    
-    // this means video went missing. videoData will be re-initialized when the next video is found
-    if (!this.video){
-      if(Debug.debug && Debug.resizer) {
-        console.log("[Resizer::cssCheck] <rid:"+this.resizerId+"> no video detecting, issuing destroy command");
-      }
-      this.conf.destroy();
-      return;
-    }
-    
-    if(this.destroyed) {
-      if(Debug.debug && Debug.resizer) {
-        console.log("[Resizer::cssCheck] <rid:"+this.resizerId+"> destroyed flag is set, we shouldnt be running");
-      }
-      this.stopCssWatcher();
-      return;
-    }
-
-    let cssValid = true;
-
-    // first, a quick test:
-    cssValid &= this.currentVideoSettings.validFor.width === this.conf.player.dimensions.width;
-
-    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;
-        this.scheduleCssWatcher(20);
-    } else {
-      this.scheduleCssWatcher(1000);    
     }
   }
 }

src/ext/uw-bg.js

@@ -58,7 +58,7 @@ class UWServer {
         console.log("[uwbg::injectCss] Injecting CSS:", css, sender);
       }
       if (BrowserDetect.firefox || BrowserDetect.edge) {
-        await browser.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
+        browser.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
       } else if (BrowserDetect.chrome) {
         chrome.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
       }
@@ -68,11 +68,21 @@ class UWServer {
       }
     }
   }
-  removetCss(css, sender) {
+  async removeCss(css, sender) {
-    if (BrowserDetect.firefox || BrowserDetect.edge) {
+    try {
-      browser.tabs.removeCSS(sender.tab.idd, {code: css, cssOrigin: 'user', frameId: sender.frameId});
+      if (BrowserDetect.firefox || BrowserDetect.edge) {
-    } else if (BrowserDetect.chrome) {
+        browser.tabs.removeCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
-      chrome.tabs.removeCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
+      } else if (BrowserDetect.chrome) {
+        // this doesn't work currently, but hopefully chrome will get this feature in the future
+        chrome.tabs.removeCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
+      }
+    } catch (e) { }
+  }
+
+  async replaceCss(oldCss, newCss, sender) {
+    if (oldCss !== newCss) {
+      this.injectCss(newCss, sender);
+      this.removeCss(oldCss, sender);
     }
   }
 

src/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "Ultrawidify",
   "description": "Removes black bars on ultrawide videos and offers advanced options to fix aspect ratio.",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "applications": {
     "gecko": {
       "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"

src/options/AutodetectionSettings.vue

@@ -517,7 +517,7 @@
         <div class="flex flex-input">
           <input type="checkbox"
                  v-model="settings.active.arDetect.guardLine.enabled"
-          /> Enable guardline</span>
+          /> Enable guardline
         </div>
       </div>
       <div class="flex flex-row row-padding">

src/popup/panels/WhatsNewPanel.vue

@@ -2,22 +2,28 @@
   <div>
     <h2>What's new</h2>
     <p>Full changelog for older versions <a href="https://github.com/xternal7/ultrawidify/blob/master/CHANGELOG.md">is available here</a>.</p>
-    <p class="label">4.2.2</p>
+    <p class="label">4.2.3</p>
     <ul>
-      <li>Fixed alignment issues for reddit on videos from v.reddit</li>
+      <li>Fixed twitchy behaviour on Twitch, Facebook and Twatter. Here's a <a href="https://stuff.tamius.net/sacred-texts/2019/08/24/ultrawidify-the-twitchy-twitch-problem/" target="_blank">blog post</a> that covers the issue in more detail.</li>
-      <li>Some people reported issues with inconsistent video alignment on youtube. While I've not been able to make that bug happen to me,
+      <li>Cropping now uses user styles (as opposed to modifying element's style attribute)</li>
-        (which means I haven't been able to fix it either), reports describe behaviour similar to what was going on with Iridium. Examining
+      <li>Fixed the issue where one-pixel letterbox would result in constant aspect ratio corrections.</li>
-        the Iridium issue revealed an issue that could be potentially blamed for this behaviour. That issue was fixed. Since I've never been able to make this problem
+      <li>Started using mutation observers to watch for anything modifying the size of our video.</li>
-        happen to me, I'm not being able to verify whether that issue is gone. <b>If you're still experiencing issues with inconsistent video alignment,
-          please contact me via github, reddit or email.</b> See 'Report a problem' tab for more details.</li>
     </ul>
-
+    <p>As you can tell, I don't leave reddit and youtube much. To be fair, the twitching issue was intermittent on twitch.</p>
-    
+    <p v-if="BrowserDetect.Chrome"><b>Chrome users:</b> as a result of Chrome's shortcomings, there now exists one potential performance issue.
+    If you notice any performance issues, please contact me via github, email or reddit (see: 'report a problem' tab
+    of this popup).</p>
   </div>
 </template>
 <script>
-export default {
+import BrowserDetect from '../../ext/conf/BrowserDetect';
 
+export default {
+  data () {
+    return {
+      BrowserDetect: BrowserDetect
+    }
+  }
 }
 </script>