From 5695534a9a6514bfcd910d0382c606a6556cc612 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 2 Sep 2020 16:26:01 +0000
Subject: [PATCH 01/15] Bump bl from 3.0.0 to 3.0.1

Bumps [bl](https://github.com/rvagg/bl) from 3.0.0 to 3.0.1.
- [Release notes](https://github.com/rvagg/bl/releases)
- [Commits](https://github.com/rvagg/bl/compare/v3.0.0...v3.0.1)

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8e02e4b..cbce842 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1863,9 +1863,9 @@
       "optional": true
     },
     "bl": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/bl/-/bl-3.0.0.tgz",
-      "integrity": "sha512-EUAyP5UHU5hxF8BPT0LKW8gjYLhq1DQIcneOX/pL/m2Alo+OYDQAJlHq+yseMP50Os2nHXOSic6Ss3vSQeyf4A==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-3.0.1.tgz",
+      "integrity": "sha512-jrCW5ZhfQ/Vt07WX1Ngs+yn9BDqPL/gw28S7s9H6QK/gupnizNzJAss5akW20ISgOrbLTlXOOCTJeNUQqruAWQ==",
       "dev": true,
       "requires": {
         "readable-stream": "^3.0.1"

From 02fa4e2fe880524659a269adb3276f1f0e6e3b9a Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sun, 20 Sep 2020 12:26:03 +0200
Subject: [PATCH 02/15] style fixes

---
 src/ext/lib/video-transform/Scaler.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/ext/lib/video-transform/Scaler.js b/src/ext/lib/video-transform/Scaler.js
index 577eccf..d846274 100644
--- a/src/ext/lib/video-transform/Scaler.js
+++ b/src/ext/lib/video-transform/Scaler.js
@@ -32,10 +32,9 @@ class Scaler {
     }
 
     
-    if(! this.conf.player.dimensions ){
+    if (!this.conf.player.dimensions) {
       ratioOut = screen.width / screen.height;
-    }
-    else {
+    } else {
       ratioOut = this.conf.player.dimensions.width / this.conf.player.dimensions.height;
     }
     
@@ -47,17 +46,17 @@ class Scaler {
     
     var fileAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
       
-    if (ar.type === AspectRatio.FitWidth){
+    if (ar.type === AspectRatio.FitWidth) {
       ratioOut > fileAr ? ratioOut : fileAr
       ar.ratio = ratioOut;
       return ratioOut;
     }
-    else if(ar.type === AspectRatio.FitHeight){
+    else if (ar.type === AspectRatio.FitHeight) {
       ratioOut < fileAr ? ratioOut : fileAr
       ar.ratio = ratioOut;
       return ratioOut;
     }
-    else if(ar.type === AspectRatio.Reset){
+    else if (ar.type === AspectRatio.Reset) {
       this.logger.log('info', 'debug', "[Scaler.js::modeToAr] Using original aspect ratio -", fileAr)
       ar.ar = fileAr;
       return fileAr;

From b55d9dd7b957c3a952b8ec5edc8d1d2091b61896 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Wed, 23 Sep 2020 00:19:42 +0200
Subject: [PATCH 03/15] fix?

---
 src/ext/lib/video-transform/Resizer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ext/lib/video-transform/Resizer.js b/src/ext/lib/video-transform/Resizer.js
index f8c5223..183e4b8 100644
--- a/src/ext/lib/video-transform/Resizer.js
+++ b/src/ext/lib/video-transform/Resizer.js
@@ -449,7 +449,7 @@ class Resizer {
     const hdiff = this.conf.player.dimensions.height - this.conf.video.offsetHeight;
 
     if (wdiff < 0 && hdiff < 0 && this.zoom.scale > 1) {
-      this.conf.player.re
+      this.conf.player.restore();
     }
 
     const wdiffAfterZoom = this.conf.video.offsetWidth * stretchFactors.xFactor - this.conf.player.dimensions.width;

From 4f478a4667a930c86b28c7fbfa1be0aa0cf88ec6 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Wed, 23 Sep 2020 00:23:24 +0200
Subject: [PATCH 04/15] Calculate "real" displayed side of video instead of
 relying on offsetWidth

---
 src/ext/lib/video-transform/Resizer.js | 76 ++++++++++++++++++++++++--
 1 file changed, 72 insertions(+), 4 deletions(-)

diff --git a/src/ext/lib/video-transform/Resizer.js b/src/ext/lib/video-transform/Resizer.js
index 183e4b8..12e31d7 100644
--- a/src/ext/lib/video-transform/Resizer.js
+++ b/src/ext/lib/video-transform/Resizer.js
@@ -442,18 +442,85 @@ class Resizer {
 
   // mostly internal stuff
 
+  /**
+   * Returns the size of the video file _as displayed_ on the screen.
+   * Consider the following example:
+   * 
+   *   * player dimensions are 2560x1080
+   *   * <video> is child of player
+   *   * <video> has the following css: {width: 100%, height: 100%}
+   *   * video file dimensions are 1280x720
+   * 
+   * CSS will ensure that the dimensions of <video> tag are equal to the dimension of the
+   * player element — that is, 2560x1080px. This is no bueno, because the browser will upscale 
+   * the video file to take up as much space as it can (without stretching it). This means
+   * we'll get a 1920x1080 video (as displayed) and a letterbox.
+   * 
+   * We can't get that number out of anywhere: video.videoWidth will return 1280 (video file
+   * dimensions) and .offsetWidth (and the likes) will return the <video> tag dimension. Neither
+   * will return the actual size of video as displayed, which we need in order to calculate the 
+   * extra space to the left and right of the video.
+   * 
+   * We make the assumption of the 
+   */
+  computeVideoDisplayedDimensions() {
+    const offsetWidth = this.conf.video.offsetWidth;
+    const offsetHeight = this.conf.video.offsetHeight;
+
+    const scaleX = offsetWidth / this.conf.video.videoWidth;
+    const scaleY = offsetHeight / this.conf.video.videoHeight;
+
+    // if differences between the scale factors are minimal, we presume offsetWidth and 
+    // offsetHeight are the accurate enough for our needs
+    if (Math.abs(scaleX - scaleY) < 0.02) {
+      return {
+        realVideoWidth: offsetWidth,
+        realVideoHeight: offsetHeight,
+        marginX: 0,
+        marginY: 0,
+      }
+    }
+
+    // if we're still here, we need to calculate real video dimensions
+    const diffX = Math.abs(scaleY * this.conf.video.videoWidth - offsetWidth);
+    const diffY = Math.abs(scaleX * this.conf.video.videoHeight - offsetHeight);
+
+    // in this case, we want to base our real dimensions off scaleX
+    // otherwise, we want to base it off scaleY
+    if (diffX < diffY) {
+      const realHeight = this.conf.video.videoHeight * scaleX;
+      return {
+        realVideoWidth: offsetWidth,
+        realVideoHeight: realHeight,
+        marginX: 0,
+        marginY: (offsetHeight - realHeight) * 0.5
+      }
+    } else {
+      const realWidth = this.conf.video.videoWidth * scaleY;
+      return {
+        realVideoWidth: realWidth,
+        realVideoHeight: offsetHeight,
+        marginX: (offsetWidth - realWidth) * 0.5,
+        marginY: 0
+      }
+    }
+  }
+
   computeOffsets(stretchFactors){
     this.logger.log('info', 'debug', "[Resizer::computeOffsets] <rid:"+this.resizerId+"> video will be aligned to ", this.settings.active.sites['@global'].videoAlignment);
 
-    const wdiff = this.conf.player.dimensions.width - this.conf.video.offsetWidth;
-    const hdiff = this.conf.player.dimensions.height - this.conf.video.offsetHeight;
+    const {realVideoWidth, realVideoHeight, marginX, marginY} = this.computeVideoDisplayedDimensions();
+
+
+    const wdiff = this.conf.player.dimensions.width - realVideoWidth;
+    const hdiff = this.conf.player.dimensions.height - realVideoHeight;
 
     if (wdiff < 0 && hdiff < 0 && this.zoom.scale > 1) {
       this.conf.player.restore();
     }
 
-    const wdiffAfterZoom = this.conf.video.offsetWidth * stretchFactors.xFactor - this.conf.player.dimensions.width;
-    const hdiffAfterZoom = this.conf.video.offsetHeight * stretchFactors.yFactor - this.conf.player.dimensions.height;
+    const wdiffAfterZoom = realVideoWidth * stretchFactors.xFactor - this.conf.player.dimensions.width;
+    const hdiffAfterZoom = realVideoHeight * stretchFactors.yFactor - this.conf.player.dimensions.height;
     
     const translate = {
       x: wdiff * 0.5,
@@ -482,6 +549,7 @@ class Resizer {
                     '---- data in ----',
                     '\nplayer dimensions:    ', {w: this.conf.player.dimensions.width, h: this.conf.player.dimensions.height},
                     '\nvideo dimensions:     ', {w: this.conf.video.offsetWidth, h: this.conf.video.offsetHeight},
+                    '\nreal video dimensions:', {w: realVideoWidth, h: realVideoHeight},
                     '\nstretch factors:      ', stretchFactors,
                     '\npan & zoom:           ', this.pan, this.zoom.scale,
                     '\nwdiff, hdiff:         ', wdiff, 'x', hdiff,

From 47475ac597c9fde2ccffca84423b0777bb7df899 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Wed, 21 Oct 2020 19:46:25 +0200
Subject: [PATCH 05/15] document aspect ratio enum

---
 src/common/enums/aspect-ratio.enum.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/common/enums/aspect-ratio.enum.js b/src/common/enums/aspect-ratio.enum.js
index 9337b9e..95c92f1 100644
--- a/src/common/enums/aspect-ratio.enum.js
+++ b/src/common/enums/aspect-ratio.enum.js
@@ -1,10 +1,11 @@
 var AspectRatio = Object.freeze({
-  Initial: -1,
-  Reset: 0,
-  Automatic: 1,
-  FitWidth: 2,
-  FitHeight: 3,
-  Fixed: 4,
+  Initial: -1,    // page default
+  Reset: 0,       // reset to initial
+  Automatic: 1,   // set by Aard
+  FitWidth: 2,    // legacy/dynamic: fit to width
+  FitHeight: 3,   // legacy/dynamic: fit to height
+  Fixed: 4,       // pre-determined aspect ratio
+  Manual: 5,      // ratio achieved by zooming in/zooming out
 });
 
 export default AspectRatio;

From c7d133ba3d561867103fc9484ea15413348debbf Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Wed, 21 Oct 2020 19:48:04 +0200
Subject: [PATCH 06/15] ensure aspect ratio only gets changed on aspect ratio
 changes

---
 src/ext/lib/video-transform/Resizer.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/ext/lib/video-transform/Resizer.js b/src/ext/lib/video-transform/Resizer.js
index 12e31d7..3757e8a 100644
--- a/src/ext/lib/video-transform/Resizer.js
+++ b/src/ext/lib/video-transform/Resizer.js
@@ -155,11 +155,11 @@ class Resizer {
 
     // reset zoom, but only on aspect ratio switch. We also know that aspect ratio gets converted to
     // AspectRatio.Fixed when zooming, so let's keep that in mind
-    if (ar.type !== AspectRatio.Fixed) {
-      this.zoom.reset();
-      this.resetPan();
-    } else if (ar.ratio !== this.lastAr.ratio) {
-      // we must check against this.lastAR.ratio because some calls provide same value for ar and lastAr
+    if (
+      (ar.type !== AspectRatio.Fixed && ar.type !== AspectRatio.Manual) // anything not these two _always_ changes AR
+      || ar.type !== this.lastAr.type                                   // this also means aspect ratio has changed
+      || ar.ratio !== this.lastAr.ratio                                 // this also means aspect ratio has changed
+      ) {
       this.zoom.reset();
       this.resetPan();
     }

From 709323623757af9f65ac301c76b5d02d1a074a0a Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Wed, 21 Oct 2020 19:48:56 +0200
Subject: [PATCH 07/15] fix some issues related to panning

---
 src/ext/lib/video-transform/Resizer.js | 35 +++++++++++++++-----------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/ext/lib/video-transform/Resizer.js b/src/ext/lib/video-transform/Resizer.js
index 3757e8a..c8d4879 100644
--- a/src/ext/lib/video-transform/Resizer.js
+++ b/src/ext/lib/video-transform/Resizer.js
@@ -239,29 +239,29 @@ class Resizer {
       this.conf.destroy();
     }
 
-    // pause AR on basic stretch, unpause when using other modes
-    // for sine reason unpause doesn't unpause. investigate that later
-    try {
-      if (this.stretcher.mode === Stretch.Basic) {
-        this.conf.arDetector.pause();
-      } else {
-        if (this.lastAr.type === AspectRatio.Automatic) {
-          this.conf.arDetector.unpause();
-        }
+    // pause AR on:
+    // * ar.type NOT automatic
+    // * ar.type is auto, but stretch is set to basic basic stretch
+    // 
+    // unpause when using other modes
+    if (ar.type !== AspectRatio.Automatic || this.stretcher.mode === Stretch.Basic) {
+      this.conf?.arDetector?.pause();
+    } else {
+      if (this.lastAr.type === AspectRatio.Automatic) {
+        this.conf?.arDetector?.unpause();
       }
-    } catch (e) {   // resizer starts before arDetector. this will do nothing but fail if arDetector isn't setup
-
     }
 
     // do stretch thingy
     if (this.stretcher.mode === Stretch.NoStretch 
         || this.stretcher.mode === Stretch.Conditional 
         || this.stretcher.mode === Stretch.FixedSource){
+     
       var stretchFactors = this.scaler.calculateCrop(ar);
 
-      this.logger.log('error', 'debug', `[Resizer::setAr] <rid:${this.resizerId}> failed to set AR due to problem with calculating crop. Error:`, stretchFactors && stretchFactors.error);
 
       if(! stretchFactors || stretchFactors.error){
+        this.logger.log('error', 'debug', `[Resizer::setAr] <rid:${this.resizerId}> failed to set AR due to problem with calculating crop. Error:`, stretchFactors?.error);
         if (stretchFactors?.error === 'no_video'){
           this.conf.destroy();
           return;
@@ -309,8 +309,13 @@ class Resizer {
 
   }
 
+
   toFixedAr() {
-    this.lastAr.type = AspectRatio.Fixed;
+    // converting to fixed AR means we also turn off autoAR
+    this.setAr({
+      ar: this.lastAr.ar,
+      type: AspectRatio.Fixed
+    });
   }
 
   resetLastAr() {
@@ -339,7 +344,9 @@ class Resizer {
       this.videoAlignment = VideoAlignment.Center;
 
       // because non-fixed aspect ratios reset panning:
-      this.toFixedAr();
+      if (this.lastAr.type !== AspectRatio.Fixed) {
+        this.toFixedAr();
+      }
 
       const player = this.conf.player.element;
 

From ec83830e78f20e398fa5d3c03d4cefb2a148cc59 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Wed, 21 Oct 2020 19:49:26 +0200
Subject: [PATCH 08/15] Force zero margins on <video> element.

This should fix issues with alignment on twitch and hulu, et al.
---
 src/ext/lib/video-transform/Resizer.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/ext/lib/video-transform/Resizer.js b/src/ext/lib/video-transform/Resizer.js
index c8d4879..2f10867 100644
--- a/src/ext/lib/video-transform/Resizer.js
+++ b/src/ext/lib/video-transform/Resizer.js
@@ -613,11 +613,13 @@ class Resizer {
         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:") ){
+        if (styleArray[i].startsWith("transform:")
+            || styleArray[i].startsWith("top:") 
+            || styleArray[i].startsWith("left:") 
+            || styleArray[i].startsWith("right:") 
+            || styleArray[i].startsWith("bottom:")
+            || styleArray[i].startsWith("margin")
+          ){
           delete styleArray[i];
         }
       }
@@ -667,9 +669,13 @@ class Resizer {
 
     const styleArray = this.buildStyleArray('', extraStyleString)
 
+    // sometimes, site designers will center <video> by setting margin: to something. We do not like that, as
+    // it prevents extension from working properly.
+    styleArray.push('margin: 0px 0px 0px 0px !important; width: initial !important; height: initial !important');
+
     // add remaining elements
     if (stretchFactors) {
-      styleArray.push(`transform: translate(${translate.x}px, ${translate.y}px) scale(${stretchFactors.xFactor}, ${stretchFactors.yFactor})`);
+      styleArray.push(`transform: translate(${translate.x}px, ${translate.y}px) scale(${stretchFactors.xFactor}, ${stretchFactors.yFactor});`);
 
       // important — guarantees video will be properly aligned
       styleArray.push("top: 0px !important; left: 0px !important; bottom: 0px !important; right: 0px;"); 

From 43b136ca4639100260e255771908ab4bc5c4fbfe Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Wed, 21 Oct 2020 21:26:00 +0200
Subject: [PATCH 09/15] Fix crashing when checking player size

---
 src/ext/lib/video-data/PlayerData.js   | 2 +-
 src/ext/lib/video-transform/Resizer.js | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/ext/lib/video-data/PlayerData.js b/src/ext/lib/video-data/PlayerData.js
index cc5239f..5527bc4 100644
--- a/src/ext/lib/video-data/PlayerData.js
+++ b/src/ext/lib/video-data/PlayerData.js
@@ -394,7 +394,7 @@ class PlayerData {
     this.getPlayer();
   }
 
-  checkPlayerSizeChange(){
+  checkPlayerSizeChange() {
     // this 'if' is just here for debugging — real code starts later. It's safe to collapse and
     // ignore the contents of this if (unless we need to change how logging works)
     if (this.logger.canLog('debug')){
diff --git a/src/ext/lib/video-transform/Resizer.js b/src/ext/lib/video-transform/Resizer.js
index 2f10867..7dcf149 100644
--- a/src/ext/lib/video-transform/Resizer.js
+++ b/src/ext/lib/video-transform/Resizer.js
@@ -303,10 +303,8 @@ class Resizer {
 
     this.zoom.applyZoom(stretchFactors);
 
-    //TODO: correct these two
     var translate = this.computeOffsets(stretchFactors);
     this.applyCss(stretchFactors, translate);
-
   }
 
 
@@ -581,8 +579,11 @@ class Resizer {
         `Video seems to be both wider and taller (or shorter and narrower) than player element at the same time. This is super duper not supposed to happen.\n\n`,
         `Player element needs to be checked.`
       )
-      this.player.checkPlayerSizeChange();
+      if (this.conf.player.checkPlayerSizeChange()) {
+        this.conf.player.onPlayerDimensionsChanged();
+      }
     }
+
     return translate; 
   }
   

From 48167623ffe5d1977e065e6b04af796830531e34 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Wed, 21 Oct 2020 21:42:22 +0200
Subject: [PATCH 10/15] Force user styles a bit harder

---
 src/ext/lib/video-transform/Resizer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ext/lib/video-transform/Resizer.js b/src/ext/lib/video-transform/Resizer.js
index 7dcf149..3b18327 100644
--- a/src/ext/lib/video-transform/Resizer.js
+++ b/src/ext/lib/video-transform/Resizer.js
@@ -676,7 +676,7 @@ class Resizer {
 
     // add remaining elements
     if (stretchFactors) {
-      styleArray.push(`transform: translate(${translate.x}px, ${translate.y}px) scale(${stretchFactors.xFactor}, ${stretchFactors.yFactor});`);
+      styleArray.push(`transform: translate(${translate.x}px, ${translate.y}px) scale(${stretchFactors.xFactor}, ${stretchFactors.yFactor}) !important;`);
 
       // important — guarantees video will be properly aligned
       styleArray.push("top: 0px !important; left: 0px !important; bottom: 0px !important; right: 0px;"); 

From 7fb9aad0d0ddda325ea29fcc3acd1a38cc6e0492 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Wed, 21 Oct 2020 23:51:58 +0200
Subject: [PATCH 11/15] misc fixes

---
 src/ext/lib/video-data/VideoData.js    | 4 +++-
 src/ext/lib/video-transform/Resizer.js | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/ext/lib/video-data/VideoData.js b/src/ext/lib/video-data/VideoData.js
index 9be729a..2fbf15f 100644
--- a/src/ext/lib/video-data/VideoData.js
+++ b/src/ext/lib/video-data/VideoData.js
@@ -56,6 +56,7 @@ class VideoData {
 
       this.restoreCrop();
       this.videoDimensionsLoaded = true;
+
     }
   }
 
@@ -123,7 +124,7 @@ class VideoData {
   }
 
   restoreCrop() {  
-    this.logger.log('info', 'debug', '[VideoData::restoreCrop] Attempting to reset/restore aspect ratio.')
+    this.logger.log('info', 'debug', '[VideoData::restoreCrop] Attempting to reset aspect ratio.')
     // if we have default crop set for this page, apply this.
     // otherwise, reset crop
     if (this.pageInfo.defaultCrop) {
@@ -132,6 +133,7 @@ class VideoData {
       this.resizer.reset();
 
       try {
+        this.stopArDetection();
         this.startArDetection();
       } catch (e) {
         this.logger.log('warn', 'debug', '[VideoData::restoreCrop] Autodetection not resumed. Reason:', e);
diff --git a/src/ext/lib/video-transform/Resizer.js b/src/ext/lib/video-transform/Resizer.js
index 3b18327..5402288 100644
--- a/src/ext/lib/video-transform/Resizer.js
+++ b/src/ext/lib/video-transform/Resizer.js
@@ -385,7 +385,7 @@ class Resizer {
   }
 
   restore() {
-    this.logger.log('info', 'debug', "[Resizer::restore] <rid:"+this.resizerId+"> attempting to restore aspect ratio", {'a_lastAr': this.lastAr} );
+    this.logger.log('info', 'debug', "[Resizer::restore] <rid:"+this.resizerId+"> attempting to restore aspect ratio", {'lastAr': this.lastAr} );
     
     // this is true until we verify that css has actually been applied
     if(this.lastAr.type === AspectRatio.Initial){

From 28c12861e535e37dfab728f234da0631f8e7b964 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Wed, 21 Oct 2020 23:52:16 +0200
Subject: [PATCH 12/15] Change action handler

---
 src/ext/lib/ActionHandler.js | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/ext/lib/ActionHandler.js b/src/ext/lib/ActionHandler.js
index c0d2bf0..dd34e3e 100644
--- a/src/ext/lib/ActionHandler.js
+++ b/src/ext/lib/ActionHandler.js
@@ -104,14 +104,36 @@ class ActionHandler {
       }
     }
 
-    document.addEventListener('keydown',  (event) => ths.handleKeydown(event) );
-    document.addEventListener('keyup', (event) => ths.handleKeyup(event) );
+    // events should be handled in handleEvent function. We need to do things this 
+    // way, otherwise we can't remove event listenerđ
+    // https://stackoverflow.com/a/19507086
+    document.addEventListener('keydown', this );
+    document.addEventListener('keyup', this );
 
     this.pageInfo.setActionHandler(this);
 
     this.logger.log('info', 'debug', "[ActionHandler::init] initialization complete");
   }
 
+  handleEvent(event) {
+    switch(event.type) {
+      case 'keydown':
+        this.handleKeydown(event);
+        break;
+      case 'keyup': 
+        this.handleKeyup(event);
+        break;
+      case 'mousemove':
+        this.handleMouseMove(event);
+        break;
+    }
+  }
+
+  destroy() {
+    document.removeEventListener('keydown', this);
+    document.removeEventListener('keyup', this);
+  }
+
   registerHandleMouse(videoData) {
     this.logger.log('info', ['actionHandler', 'mousemove'], "[ActionHandler::registerHandleMouse] registering handle mouse for videodata:", videoData.id)
 

From 43a86a7495d46ef6b5ce81fc6cd0781afb155582 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Wed, 21 Oct 2020 23:52:49 +0200
Subject: [PATCH 13/15] Destroy old pageInfo instance when initializing WU

---
 src/ext/uw.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/ext/uw.js b/src/ext/uw.js
index 702105b..e5a2e3f 100644
--- a/src/ext/uw.js
+++ b/src/ext/uw.js
@@ -155,6 +155,10 @@ class UW {
     }
   
     try {
+      if (this.pageInfo) {
+        this.logger.log('info', 'debug', '[uw.js::setup] An instance of pageInfo already exists and will be destroyed.');
+        this.pageInfo.destroy();
+      }
       this.pageInfo = new PageInfo(this.comms, this.settings, this.logger, extensionMode, isSiteDisabled);
       this.logger.log('info', 'debug', "[uw.js::setup] pageInfo initialized.");
   
@@ -162,6 +166,9 @@ class UW {
 
       // start action handler only if extension is enabled for this site
       if (!isSiteDisabled) {
+        if (this.actionHandler) {
+          this.actionHandler.destroy();
+        }
         this.actionHandler = new ActionHandler(this.pageInfo);
         this.actionHandler.init();
         

From 288f2334f6892582f876606f3d4942b6219a64c8 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Wed, 21 Oct 2020 23:55:42 +0200
Subject: [PATCH 14/15] Changelog

---
 CHANGELOG.md                       |  9 ++++++++-
 src/popup/panels/WhatsNewPanel.vue | 14 +++++---------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2c15110..67d27cb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,7 +13,14 @@ QoL improvements for me:
 
 * logging: allow to enable logging at will and export said logs to a file
 
-### v4.4.9 (Current)
+### v4.4.10 (Current)
+
+* Video alignment should now work on Twitch [#109](https://github.com/tamius-han/ultrawidify/issues/109)
+* Videos should now align properly on Hulu while cropped [#111](https://github.com/tamius-han/ultrawidify/issues/111) & via email
+* Fixed a problem where changing certain settings would cause multiple instances of Ultrawidify to run on a page, effectively preventing some crop options to be set until reload. (possibly [#112](https://github.com/tamius-han/ultrawidify/issues/112)?)
+* Fixed a problem where embedded videos would be misaligned after switching from full screen
+
+### v4.4.9
 
 * Fixed the youtube alignment issue (previously fixed in v4.4.7.1-2), but this time for real (and in a bit more proper way)
 * Fixed the bug where extension wouldn't work when URL specified a port (e.g. www.example.com:80)
diff --git a/src/popup/panels/WhatsNewPanel.vue b/src/popup/panels/WhatsNewPanel.vue
index 99b22b9..de220bd 100644
--- a/src/popup/panels/WhatsNewPanel.vue
+++ b/src/popup/panels/WhatsNewPanel.vue
@@ -2,25 +2,21 @@
   <div>
     <h2>What's new</h2>
     <p>Full changelog for older versions <a href="https://github.com/tamius-han/ultrawidify/blob/master/CHANGELOG.md">is available here</a>.</p>
-    <p class="label">4.4.9.2</p>
+    <p class="label">4.4.10</p>
     <ul>
       <li>
-        Fixed issue with video alignment on youtube under certain conditions (previously fixed in v4.4.7.1-2), but this time for real (hopefully). 
+        Video alignment should now work on Twitch (<a href="https://github.com/tamius-han/ultrawidify/issues/109">#109</a>)
       </li>
       <li>
-        Fixed the bug where extension wouldn't work when URL specified a port (e.g. www.example.com:80)
+        Videos should now align properly on Hulu while cropped (<a href="https://github.com/tamius-han/ultrawidify/issues/111">#111 &amp; via email</a>)
       </li>
       <li>
-        <b>[4.4.9.1]</b> removed source maps from extension build
+        Fixed a problem where changing certain settings would cause multiple instances of Ultrawidify to run on a page, effectively preventing some crop options to be set until reload. (possibly <a href="(https://github.com/tamius-han/ultrawidify/issues/112">#112</a>?)
       </li>
        <li>
-        <b>[4.4.9.2]</b> updated npm packages
+        Fixed a problem where embedded videos would be misaligned after switching from full screen
       </li>
     </ul>
-    <p>
-      In addition to that, as of 4.4.9.1 the build process ensures removal of `node_modules` before building the extension so we can have
-      reproducible builds except for real this time. Hopefully.
-    </p>
   </div>
 </template>
 <script>

From 65dacee8294b9ca39eca2628da3c41037fc76328 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Wed, 21 Oct 2020 23:56:38 +0200
Subject: [PATCH 15/15] Version bump

---
 package-lock.json | 2 +-
 src/manifest.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cbce842..0b61c74 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "ultrawidify",
-  "version": "4.4.9",
+  "version": "4.4.10",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/src/manifest.json b/src/manifest.json
index 0535fbb..fc00a4b 100644
--- a/src/manifest.json
+++ b/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.4.9.2",
+  "version": "4.4.10",
   "applications": {
     "gecko": {
       "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"