Twitching issue was fixed but performance is shite

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/comms/CommsServer.js

@@ -220,7 +220,7 @@ 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;
     }

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

@@ -41,6 +41,20 @@ 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
+    });
+  }
+
   destroy() {
     if(Debug.debug || Debug.init){
       console.log("[PageInfo::destroy] destroying all videos!")

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

@@ -13,6 +13,8 @@ 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}`;
 
     // POZOR: VRSTNI RED JE POMEMBEN (arDetect mora bit zadnji)
     // NOTE: ORDERING OF OBJ INITIALIZATIONS IS IMPORTANT (arDetect needs to go last)    
@@ -30,12 +32,13 @@ 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);
   }
 
   firstTimeArdInit(){

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

@@ -55,6 +55,9 @@ class Resizer {
     } else {
       this.canPan = false;
     }
+
+    this.userCss = '';
+    this.userCssClassName = videoData.userCssClassName; 
   }
   
   start(){
@@ -67,6 +70,18 @@ class Resizer {
     this.stopCssWatcher();
   }
 
+  injectCss(css) {
+    this.conf.pageInfo.injectCss(css);
+  }
+  
+  ejectCss(css) {
+    this.conf.pageInfo.ejectCss(css);
+  }
+
+  prepareCss(css) {
+    return `.${this.userCssClassName} {${css}}`;
+  }
+
   destroy(){
     if(Debug.debug || Debug.init){
       console.log(`[Resizer::destroy] <rid:${this.resizerId}> received destroy command.`);
@@ -211,7 +226,7 @@ class Resizer {
 
     if (! this.video) {
       // console.log("No video detected.")
-      this.videoData.destroy();
+      this.conf.destroy();
     }
 
     if (this.extensionMode === ExtensionMode.Enabled || PlayerData.isFullScreen()) {
@@ -572,7 +587,7 @@ class Resizer {
 
     for(var i in styleArray) {
       if(styleArray[i]) {
-        styleString += styleArray[i] + "; ";
+        styleString += styleArray[i] + " !important; ";
       }
     }
 
@@ -593,7 +608,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 +618,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,51 +625,42 @@ 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.video.setAttribute("style", styleString);
-    this.currentStyleString = styleString;
 
+    // remove old CSS
+    if (this.userCss) {
+      this.ejectCss(this.userCss);
+    }
+
+    // this.currentStyleString = styleString;
     this.currentCssValidFor = this.conf.player.dimensions;
-    
+    this.userCss = this.prepareCss(styleString);
+
+    // inject new CSS
+    this.injectCss(this.userCss);
+    this.video.classList.add(this.userCssClassName);
+
     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;
       }
-      
+      this.restore_wd = false;
-      // 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)
@@ -697,8 +702,7 @@ class Resizer {
     cssValid &= this.currentVideoSettings.validFor.width === this.conf.player.dimensions.width;
 
     if (cssValid) {
-      const styleString = this.video.getAttribute('style');
+      cssValid &= this.video.classList.contains(this.userCssClassName);
-      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'); 

src/ext/uw-bg.js

@@ -70,7 +70,7 @@ class UWServer {
   }
   removetCss(css, sender) {
     if (BrowserDetect.firefox || BrowserDetect.edge) {
-      browser.tabs.removeCSS(sender.tab.idd, {code: css, cssOrigin: 'user', frameId: sender.frameId});
+      browser.tabs.removeCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
     } else if (BrowserDetect.chrome) {
       chrome.tabs.removeCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
     }

src/popup/panels/WhatsNewPanel.vue

@@ -2,17 +2,11 @@
   <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.</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,
-        (which means I haven't been able to fix it either), reports describe behaviour similar to what was going on with Iridium. Examining
-        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
-        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>
-    
   </div>
 </template>
 <script>