Merge branch '4.2.3' into stable

CHANGELOG.md

@@ -6,7 +6,19 @@
 
 * Settings page looks ugly af right now. Maybe fix it some time later
 
-### v4.2.1 (current)
+### v4.2.3 / 4.2.3.1
+
+* Fixed twitchy behaviour on Twitch, Facebook and Twatter. Here's a [blog post](https://stuff.tamius.net/sacred-texts/2019/08/24/ultrawidify-the-twitchy-twitch-problem/) that covers the issue in more detail.
+* Cropping now uses user styles (as opposed to modifying element's style attribute)
+* Fixed the issue where one-pixel letterbox would result in constant aspect ratio corrections.
+* Started using mutation observers to watch for anything modifying the size of our video.
+* **[4.2.3.1]** fixed some bugs in popup.
+
+### v4.2.2 
+* Fixed alignment issues for reddit on videos from v.reddit
+* 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. If you're still experiencing issues with inconsistent video alignment, please contact me via github, reddit or email. See 'Report a problem' tab for more details.
+
+### v4.2.1
 * Fixed bug where custom CSS didn't get applied to pages
 
 ### v4.2.0 

src/ext/lib/ActionHandler.js

@@ -120,6 +120,12 @@ class ActionHandler {
     }
   }
 
+  unregisterHandleMouse(videoData) {
+    var ths = this;
+    if (videoData.player && videoData.player.element) {
+      videoData.player.element.removeEventListener('mousemove', (event) => ths.handleMouseMove(event, videoData));
+    }
+  }
 
   setKeyboardLocal(state) {
     if (state === ExtensionMode.Enabled) {

src/ext/lib/Settings.js

@@ -14,6 +14,7 @@ class Settings {
   constructor(activeSettings, updateCallback) {
     this.active = activeSettings ? activeSettings : undefined;
     this.default = ExtensionConf;
+    this.default['version'] = this.getExtensionVersion();
     this.useSync = false;
     this.version = undefined;
     this.updateCallback = updateCallback;
@@ -63,11 +64,26 @@ class Settings {
     }
   }
 
+  getExtensionVersion() {
+    if (currentBrowser.firefox) {
+      return browser.runtime.getManifest().version;
+    } else if (currentBrowser.chrome) {
+      return chrome.runtime.getManifest().version;
+    } else if (currentBrowser.edge) {
+      return browser.runtime.getManifest().version;
+    }
+  }
+
   async init() {
     const settings = await this.get();
+    const oldVersion = settings.version;
+    const currentVersion = this.getExtensionVersion();
 
     if(Debug.debug) {
-      console.log("[Settings::init] Configuration fetched from storage:", settings);
+      console.log("[Settings::init] Configuration fetched from storage:", settings,
+                  "\nlast saved with:", settings.version,
+                  "\ncurrent version:", currentVersion
+                  );
 
       if (Debug.flushStoredSettings) {
         console.log("%c[Settings::init] Debug.flushStoredSettings is true. Using default settings", "background: #d00; color: #ffd");
@@ -96,18 +112,17 @@ class Settings {
     // if there's settings, set saved object as active settings
     this.active = settings;
 
-    // check if extension has been updated. If not, return settings as they were retreived
+    // from some point to 4.2.3.1, settings version wasn't saved. Fix that.
-    if (currentBrowser.firefox) {
+    if (!settings.version) {
-      this.version = browser.runtime.getManifest().version;
+      this.active.version = currentVersion;
-    } else if (currentBrowser.chrome) {
-      this.version = chrome.runtime.getManifest().version;
-    } else if (currentBrowser.edge) {
-      this.version = browser.runtime.getManifest().version;
     }
 
-    if(settings.version === this.version) {
+    // check if extension has been updated. If not, return settings as they were retreived
+    
+
+    if(oldVersion === currentVersion) {
       if(Debug.debug) {
-        console.log("[Settings::init] extension was saved with current version of ultrawidify (", this.version, "). Returning object as-is.");
+        console.log("[Settings::init] extension was saved with current version of ultrawidify. Returning object as-is.");
       }
 
       return this.active;
@@ -131,6 +146,8 @@ class Settings {
 
     // set 'whatsNewChecked' flag to false when updating
     this.active.whatsNewChecked = false;
+    // update settings version to current
+    this.active.version = currentVersion; 
 
     this.set(this.active);
     return this.active;

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

@@ -71,8 +71,12 @@ class PageInfo {
       clearTimeout(this.rescanTimer);
     }
     for (var video of this.videos) {
-      this.comms.unregisterVideo(video.id)
+      try {
-      video.destroy();
+        this.comms.unregisterVideo(video.id)
+        video.destroy();
+      } catch (e) {
+        console.log("unabel to destroy video!", e)
+      }
     }
 
     try {

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

@@ -52,12 +52,16 @@ class VideoData {
   }
 
   onVideoDimensionsChanged(mutationList, observer) {
+    if (!mutationList || this.video === undefined) {  // something's wrong
+      if (observer && this.video) {
+        observer.disconnect();
+      }
+      return;
+    }
     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);
 
@@ -71,6 +75,13 @@ class VideoData {
           // if size of the video has changed, this may mean we need to recalculate/reapply
           // last calculated aspect ratio
           this.restoreAr();
+        } else if (mutation.attribute = 'src' && mutation.attributeOldValue !== this.video.getAttribute('src')) {
+          // try fixing alignment issue on video change
+          try {
+            this.restoreAr();
+          } catch (e) {
+            console.error("[VideoData::onVideoDimensionsChanged] There was an error when handling src change.", e);
+          }
         }
       }
     }
@@ -78,7 +89,8 @@ class VideoData {
 
   firstTimeArdInit(){
     if(this.destroyed) {
-      throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
+      // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
+      return;
     }
     if(! this.arSetupComplete){
       this.arDetector = new ArDetector(this);
@@ -87,7 +99,8 @@ class VideoData {
 
   initArDetection() {
     if(this.destroyed) {
-      throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
+      // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
+      return;
     }
     if(this.arDetector){
       this.arDetector.init();
@@ -103,7 +116,8 @@ class VideoData {
       console.log("[VideoData::startArDetection] starting AR detection")
     }
     if(this.destroyed) {
-      throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
+      // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
+      return;
     }
     if(!this.arDetector) {
       this.arDetector.init();
@@ -113,7 +127,8 @@ class VideoData {
 
   rebootArDetection() {
     if(this.destroyed) {
-      throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
+      // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
+      return;
     }
     this.arDetector.init();
   }
@@ -131,20 +146,31 @@ class VideoData {
 
     this.pause();
     this.destroyed = true;
-    if(this.arDetector){
+    if (this.arDetector){
-      this.arDetector.stop();
+      try {
-      this.arDetector.destroy();
+        this.arDetector.stop();
+        this.arDetector.destroy();
+      } catch (e) {}
     }
-    this.arDetector = null;
+    this.arDetector = undefined;
-    if(this.resizer){
+    if (this.resizer){
-      this.resizer.destroy();
+      try {
+       this.resizer.destroy();
+      } catch (e) {}
     }
-    this.resizer = null;
+    this.resizer = undefined;
-    if(this.player){
+    if (this.player){
-      this.player.destroy();
+      try {
+        this.player.destroy();
+      } catch (e) {}
     }
-    this.player = null;
+    if (this.observer) {
-    this.video = null;
+      try {
+        this.observer.disconnect();
+      } catch (e) {}
+    }
+    this.player = undefined;
+    this.video = undefined;
   }
 
   pause(){
@@ -152,9 +178,6 @@ class VideoData {
     if(this.arDetector){
       this.arDetector.stop();
     }
-    if(this.resizer){
-      this.resizer.stop();
-    }
     if(this.player){
       this.player.stop();
     }
@@ -162,7 +185,8 @@ class VideoData {
 
   resume(){
     if(this.destroyed) {
-      throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
+      // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
+      return;
     }
     this.paused = false;
     try {
@@ -214,7 +238,8 @@ class VideoData {
 
   panHandler(event, forcePan) {
     if(this.destroyed) {
-      throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
+      // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
+      return;
     }
     if(!this.resizer) {
       this.destroy();

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.3",
+  "version": "4.2.3.1",
   "applications": {
     "gecko": {
       "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"

src/popup/App.vue

@@ -34,7 +34,7 @@
                   class="tabitem ltr"
                   :class="{
                     'tabitem-selected': site.host === selectedSite,
-                    'tabitem-disabled': !settings.canStartExtension(site.host)
+                    'tabitem-disabled': (settings && !settings.canStartExtension(site.host))
                   }"
                   @click="selectSite(site.host)"
               >
@@ -59,7 +59,7 @@
                    class="tabitem ltr"
                    :class="{
                      'tabitem-selected': selectedFrame === frame.id,
-                     'disabled': !isDefaultFrame(frame.id) && !settings.canStartExtension(frame.label)
+                     'disabled': !isDefaultFrame(frame.id) && (settings && !settings.canStartExtension(frame.label))
                    }"
                    :key="frame.id"
                    @click="selectFrame(frame.id)"
@@ -100,7 +100,7 @@
             :class="{'selected-tab': selectedTab === 'whats-new'}"
             @click="selectTab('whats-new')"
         >
-          <div :class="{'new': !settings.active.whatsNewChecked}"
+          <div :class="{'new': settings && settings.active && !settings.active.whatsNewChecked}"
             >
             What's new?
           </div>
@@ -196,6 +196,7 @@ export default {
       siteTabDisabled: false,
       videoTabDisabled: false,
       canShowVideoTab: {canShow: true, warning: true},
+      showWhatsNew: false,
     }
   },
   async created() {
@@ -266,7 +267,6 @@ export default {
       this.selectedFrame = frame;
     },
     async updateConfig() {
-
       // when this runs, a site could have been enabled or disabled
       // this means we must update canShowVideoTab
       this.updateCanShowVideoTab();
@@ -278,6 +278,7 @@ export default {
 
       if (!this.settings) {
         this.canShowVideoTab = {canShow: true, warning: false};
+        return;
       }
       for (const site of this.activeSites) {
         t = this.settings.canStartExtension(site.host);
@@ -287,8 +288,8 @@ export default {
       if (t === undefined) {
         // something isn't the way it should be. Show sites.
         this.canShowVideoTab = {canShow: true, warning: true};
+        return;
       }
-
       this.canShowVideoTab = {canShow: canShow, warning: warning};
     },
     processReceivedMessage(message, port) {
@@ -330,7 +331,7 @@ export default {
         }
       }
 
-return true;
+      return true;
     },
     showFirstTab(videoTab) {
       // determine which tab to show.
@@ -381,6 +382,11 @@ return true;
 
       if (videoTab.frames.length < 2 || Object.keys(videoTab.frames).length < 2) {
         this.selectedFrame = '__all';
+        this.activeSites = [{
+          host: this.site.host,
+          isIFrame: false,  // not used tho. Maybe one day
+        }];
+        this.updateCanShowVideoTab(); // update whether video tab can be shown
         return;
       }
       for (const frame in videoTab.frames) {

src/popup/panels/WhatsNewPanel.vue

@@ -2,15 +2,16 @@
   <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.3</p>
+    <p class="label">4.2.3[.1]</p>
     <ul>
       <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>Cropping now uses user styles (as opposed to modifying element's style attribute)</li>
       <li>Fixed the issue where one-pixel letterbox would result in constant aspect ratio corrections.</li>
       <li>Started using mutation observers to watch for anything modifying the size of our video.</li>
+      <li><b>[4.2.3.1]</b> fixed some bugs in popup.</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.
+    <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>
@@ -23,7 +24,7 @@ export default {
     return {
       BrowserDetect: BrowserDetect
     }
-  }
+  },
 }
 </script>