From a5bf3ec1e0f88556acd401b6aa302b92a4e16a57 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 30 Jan 2021 10:38:45 +0100
Subject: [PATCH 01/68] Remove redundant code

---
 src/ext/lib/video-transform/Resizer.js | 36 --------------------------
 1 file changed, 36 deletions(-)

diff --git a/src/ext/lib/video-transform/Resizer.js b/src/ext/lib/video-transform/Resizer.js
index 6b056eb..1176df6 100644
--- a/src/ext/lib/video-transform/Resizer.js
+++ b/src/ext/lib/video-transform/Resizer.js
@@ -182,42 +182,6 @@ class Resizer {
       this.conf.pageInfo.updateCurrentCrop(ar);
     }
 
-    // if (ar.type === AspectRatio.Automatic || 
-    //     ar.type === AspectRatio.Reset && this.lastAr.type === AspectRatio.Initial) {
-    //   // some sites do things that interfere with our site (and aspect ratio setting in general)
-    //   // first, we check whether video contains anything we don't like
-    //   if (siteSettings?.autoarPreventConditions?.videoStyleString) {
-    //     const styleString = (this.video.getAttribute('style') || '').split(';');
-
-    //     if (siteSettings.autoarPreventConditions.videoStyleString.containsProperty) {
-    //       const bannedProperties = siteSettings.autoarPreventConditions.videoStyleString.containsProperty;
-    //       for (const prop in bannedProperties) {
-    //         for (const s of styleString) {
-    //           if (s.trim().startsWith(prop)) {
-
-    //             // check if css property has a list of allowed values:
-    //             if (bannedProperties[prop].allowedValues) {
-    //               const styleValue = s.split(':')[1].trim();
-
-    //               // check if property value is on the list of allowed values
-    //               // if it's not, we aren't allowed to start aard
-    //               if (bannedProperties[prop].allowedValues.indexOf(styleValue) === -1) {
-    //                 this.logger.log('error', 'debug', "%c[Resizer::setAr] video style contains forbidden css property/value combo: ", "color: #900, background: #100", prop, " — we aren't allowed to start autoar.")
-    //                 return;
-    //               }
-    //             } else {
-    //               // no allowed values, no problem. We have forbidden property
-    //               // and this means aard can't start.
-    //               this.logger.log('info', 'debug', "%c[Resizer::setAr] video style contains forbidden css property: ", "color: #900, background: #100", prop, " — we aren't allowed to start autoar.")
-    //               return;
-    //             }
-    //           }
-    //         }
-    //       }
-    //     }
-    //   }
-    // }
-
     if (lastAr) {
       this.lastAr = this.calculateRatioForLegacyOptions(lastAr);
       ar = this.calculateRatioForLegacyOptions(ar);

From 9a0c0ba8107de38cd7ad9e061f6eaafdab263549 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 30 Jan 2021 12:16:27 +0100
Subject: [PATCH 02/68] whitespace

---
 src/ext/lib/video-data/PlayerData.js     | 1 +
 src/ext/lib/video-transform/Stretcher.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/ext/lib/video-data/PlayerData.js b/src/ext/lib/video-data/PlayerData.js
index 3d787ca..7e4b69d 100644
--- a/src/ext/lib/video-data/PlayerData.js
+++ b/src/ext/lib/video-data/PlayerData.js
@@ -37,6 +37,7 @@ if (process.env.CHANNEL !== 'stable'){
 */
 
 class PlayerData {
+  
   constructor(videoData) {
     try {
       this.logger = videoData.logger;
diff --git a/src/ext/lib/video-transform/Stretcher.js b/src/ext/lib/video-transform/Stretcher.js
index ea9306e..f767517 100644
--- a/src/ext/lib/video-transform/Stretcher.js
+++ b/src/ext/lib/video-transform/Stretcher.js
@@ -187,6 +187,7 @@ squeezeFactor:          ${squeezeFactor}`, '\nvideo', this.conf.video);
         
         this.logger.log('info', 'stretcher', "[Stretcher.js::calculateStretch] stretching strategy 3")
       }
+
     } else {
       // player adds LETTERBOX
 

From 5bd29524375404a6e679c04b5c62264125f6f73a Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 30 Jan 2021 12:16:37 +0100
Subject: [PATCH 03/68] Fix chrome bug .. hopefully

---
 src/ext/lib/video-transform/Resizer.js   |  2 ++
 src/ext/lib/video-transform/Scaler.js    | 24 +++++++++++++
 src/ext/lib/video-transform/Stretcher.js | 43 ++++++++++++++++++++++++
 3 files changed, 69 insertions(+)

diff --git a/src/ext/lib/video-transform/Resizer.js b/src/ext/lib/video-transform/Resizer.js
index 1176df6..024b46e 100644
--- a/src/ext/lib/video-transform/Resizer.js
+++ b/src/ext/lib/video-transform/Resizer.js
@@ -269,6 +269,8 @@ class Resizer {
 
     this.zoom.applyZoom(stretchFactors);
 
+    this.stretcher.chromeBugMitigation(stretchFactors);
+
     var translate = this.computeOffsets(stretchFactors);
     this.applyCss(stretchFactors, translate);
   }
diff --git a/src/ext/lib/video-transform/Scaler.js b/src/ext/lib/video-transform/Scaler.js
index b625ac2..e972646 100644
--- a/src/ext/lib/video-transform/Scaler.js
+++ b/src/ext/lib/video-transform/Scaler.js
@@ -180,6 +180,30 @@ class Scaler {
     
     this.logger.log('info', 'scaler', "[Scaler::calculateCrop] Crop factor calculated — ", videoDimensions.xFactor);
 
+    // Workaround for Chrome/Edge issue where zooming too much results in video being stretched incorrectly
+    /**
+     * Bug description — if the following are true:
+     *   * user is using Chrome or Edge (but surprisingly not Opera)
+     *   * user is using hardware acceleration
+     *   * user is using a noVideo card
+     *   * user is in full screen mode
+     * Then the video will do Stretch.Basic no matter what you put in `transform: scale(x,y)`.
+     * 
+     * Because this issue happens regardless of how you upscale the video (doesn't matter if you use transform:scale
+     * or width+height or anything else), the aspect ratio needs to be limited _before_ applying arCorrectionFactor
+     * (note that arCorrectionFactor is usually <= 1, as it conpensates for zooming that height=[>100%] on <video>
+     * style attribute does). 
+     * 
+     * This method is also repeated in calculate stretch method.
+     */
+
+    if (BrowserDetect.anyChromium && this.conf.player?.isFullScreen && this.conf.player?.dimensions?.fullscreen) {
+      const maxSafeAr = (window.innerWidth * 0.995) / window.innerHeight;
+      
+      videoDimensions.xFactor = Math.min(videoDimensions.xFactor, maxSafeAr);
+      videoDimensions.yFactor = Math.min(videoDimensions.yFactor, maxSafeAr);
+    }
+
     // correct the factors
     videoDimensions.xFactor *= arCorrectionFactor;
     videoDimensions.yFactor *= arCorrectionFactor;
diff --git a/src/ext/lib/video-transform/Stretcher.js b/src/ext/lib/video-transform/Stretcher.js
index f767517..cd1eb06 100644
--- a/src/ext/lib/video-transform/Stretcher.js
+++ b/src/ext/lib/video-transform/Stretcher.js
@@ -230,6 +230,49 @@ squeezeFactor:          ${squeezeFactor}`, '\nvideo', this.conf.video);
 
     return stretchFactors;
   }
+
+  /**
+   * Ensure that <video> element is never both taller-ish and wider-ish than the screen, while in fullscreen
+   * on Chromium-based browsers. 
+   * 
+   * Workaround for Chrome/Edge issue where zooming too much results in video being stretched incorrectly.
+   * 
+   * Bug description — if the following are true:
+   *   * user is using Chrome or Edge (but surprisingly not Opera)
+   *   * user is using hardware acceleration
+   *   * user is using a noVideo card
+   *   * user is in full screen mode
+   *   * the video is both roughly taller and roughly wider than the monitor
+   * Then the video will do Stretch.Basic no matter what you put in `transform: scale(x,y)`.
+   * 
+   * In practice, the issue appears slightly _before_ the last condition is met (video needs to be ~3434 px wide
+   * in order for this bug to trigger on my 3440x1440 display).
+   * 
+   * Because this issue happens regardless of how you upscale the video (doesn't matter if you use transform:scale
+   * or width+height or anything else), the aspect ratio needs to be limited _before_ applying arCorrectionFactor
+   * (note that arCorrectionFactor is usually <= 1, as it conpensates for zooming that height=[>100%] on <video>
+   * style attribute does).
+   */
+  chromeBugMitigation(stretchFactors) {
+      if (BrowserDetect.anyChromium && this.conf.player?.isFullScreen && this.conf.player?.dimensions?.fullscreen) {
+        const playerAr = playerArOverride || this.conf.player.dimensions.width / this.conf.player.dimensions.height;
+        const streamAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
+        
+        let maxSafeAr;
+
+        if (playerAr >= (streamAr * 1.1)) {
+          maxSafeAr = (window.innerWidth * 0.997) / window.innerHeight;
+        } else if (playerAr < (streamAr * 0.95)) {
+          maxSafeAr = window.innerWidth / (window.innerHeight * 0.997);
+        } else {
+          // in some cases, we tolerate minor stretch to avoid tiny black bars
+          return;
+        }
+        
+        stretchFactors.xFactor = Math.min(stretchFactors.xFactor, maxSafeAr);
+        stretchFactors.yFactor = Math.min(stretchFactors.yFactor, maxSafeAr);
+      }
+  }
 }
 
 export default Stretcher;

From bc5d5046df8664411f70c2433989517c8210cbbf Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 30 Jan 2021 12:21:04 +0100
Subject: [PATCH 04/68] Webpack fix

---
 webpack.config.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webpack.config.js b/webpack.config.js
index 447d6d9..c521abf 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -121,7 +121,7 @@ const config = {
                                             .substr(2)         // YYYY -> YY
                                             .replace('-', '')  // YY-MM-DD -> YYMM-DD
                                             .replace('-', '.') // YYMM-DD -> YYMM.DD
-                                    }.${process.env.BUILD_NUMBER ?? 0}`;
+                                    }.${process.env.BUILD_NUMBER === undefined ? 0 : process.env.BUILD_NUMBER}`;
             jsonContent.browser_action.default_title = "Ultrawidify Nightly";
             
             // because we don't want web-ext to submit this as proper release
@@ -137,7 +137,7 @@ const config = {
                                             .substr(2)         // YYYY -> YY
                                             .replace('-', '')  // YY-MM-DD -> YYMM-DD
                                             .replace('-', '.') // YYMM-DD -> YYMM.DD
-                                    }.${process.env.BUILD_NUMBER ?? 0}`;
+                                    }.${process.env.BUILD_NUMBER === undefined ? 0 : process.env.BUILD_NUMBER}`;
             jsonContent.browser_action.default_title = "Ultrawidify Testing";
             
             // because we don't want web-ext to submit this as proper release

From 71cb3574247f63b1e951a20e197e675c7d2b49ce Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 30 Jan 2021 13:07:19 +0100
Subject: [PATCH 05/68] Fix imports

---
 src/ext/lib/video-transform/Scaler.js    | 2 ++
 src/ext/lib/video-transform/Stretcher.js | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/ext/lib/video-transform/Scaler.js b/src/ext/lib/video-transform/Scaler.js
index e972646..10e3121 100644
--- a/src/ext/lib/video-transform/Scaler.js
+++ b/src/ext/lib/video-transform/Scaler.js
@@ -1,5 +1,7 @@
 import Debug from '../../conf/Debug';
 import AspectRatio from '../../../common/enums/aspect-ratio.enum';
+import BrowserDetect from '../../conf/BrowserDetect';
+
 
 // računa velikost videa za približevanje/oddaljevanje
 // does video size calculations for zooming/cropping
diff --git a/src/ext/lib/video-transform/Stretcher.js b/src/ext/lib/video-transform/Stretcher.js
index cd1eb06..48424ab 100644
--- a/src/ext/lib/video-transform/Stretcher.js
+++ b/src/ext/lib/video-transform/Stretcher.js
@@ -1,4 +1,5 @@
 import Stretch from '../../../common/enums/stretch.enum';
+import BrowserDetect from '../../conf/BrowserDetect';
 
 // računa vrednosti za transform-scale (x, y)
 // transform: scale(x,y) se uporablja za raztegovanje videa, ne pa za približevanje

From 0aa7beb5258599d0368f2e05dd97e85a9ce19847 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 30 Jan 2021 13:31:30 +0100
Subject: [PATCH 06/68] Fix chrome condition test

---
 src/ext/lib/video-transform/Stretcher.js | 39 ++++++++++++++----------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/ext/lib/video-transform/Stretcher.js b/src/ext/lib/video-transform/Stretcher.js
index 48424ab..bcb5a29 100644
--- a/src/ext/lib/video-transform/Stretcher.js
+++ b/src/ext/lib/video-transform/Stretcher.js
@@ -255,24 +255,31 @@ squeezeFactor:          ${squeezeFactor}`, '\nvideo', this.conf.video);
    * style attribute does).
    */
   chromeBugMitigation(stretchFactors) {
-      if (BrowserDetect.anyChromium && this.conf.player?.isFullScreen && this.conf.player?.dimensions?.fullscreen) {
-        const playerAr = playerArOverride || this.conf.player.dimensions.width / this.conf.player.dimensions.height;
-        const streamAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
-        
-        let maxSafeAr;
+    if (BrowserDetect.anyChromium && this.conf.player?.isFullScreen && this.conf.player?.dimensions?.fullscreen) {
+      const playerAr = playerArOverride || this.conf.player.dimensions.width / this.conf.player.dimensions.height;
+      const streamAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
+      
+      let maxSafeAr;
 
-        if (playerAr >= (streamAr * 1.1)) {
-          maxSafeAr = (window.innerWidth * 0.997) / window.innerHeight;
-        } else if (playerAr < (streamAr * 0.95)) {
-          maxSafeAr = window.innerWidth / (window.innerHeight * 0.997);
-        } else {
-          // in some cases, we tolerate minor stretch to avoid tiny black bars
-          return;
-        }
-        
-        stretchFactors.xFactor = Math.min(stretchFactors.xFactor, maxSafeAr);
-        stretchFactors.yFactor = Math.min(stretchFactors.yFactor, maxSafeAr);
+      if (playerAr >= (streamAr * 1.1)) {
+        maxSafeAr = (window.innerWidth * 0.997) / window.innerHeight;
+      } else if (playerAr < (streamAr * 0.95)) {
+        maxSafeAr = window.innerWidth / (window.innerHeight * 0.997);
+      } else {
+        // in some cases, we tolerate minor stretch to avoid tiny black bars
+        return;
       }
+      
+      const maxSafeStretchFactor = this.conf.resizer.stretcher.calculateCrop(maxSafeAr).xFactor;
+
+      console.info('Stretch factors before:', stretchFactors.xFactor, stretchFactors.yFactor, "max safe:", maxSafeStretchFactor, "max safe ar:", maxSafeAr);
+
+      stretchFactors.xFactor = Math.min(stretchFactors.xFactor, maxSafeStretchFactor);
+      stretchFactors.yFactor = Math.min(stretchFactors.yFactor, maxSafeStretchFactor);
+
+      console.info('Stretch factors after:', stretchFactors.xFactor, stretchFactors.yFactor);
+
+    }
   }
 }
 

From 35208cf9e85861d208ab3d1874bb7c158bdee2c2 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 30 Jan 2021 13:50:11 +0100
Subject: [PATCH 07/68] log wtf is going on with scaler and resizer

---
 src/ext/lib/Logger.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/ext/lib/Logger.js b/src/ext/lib/Logger.js
index c671c5e..21fa72f 100644
--- a/src/ext/lib/Logger.js
+++ b/src/ext/lib/Logger.js
@@ -44,6 +44,16 @@ class Logger {
   }
 
   static async getConfig() {
+    return { "allowLogging": true,
+      "consoleOptions": {
+        "enabled": true,
+        "debug": true,
+        "resizer": true,
+        "scaler": true,
+        "stretcher": true
+      },
+      "fileOptions": {}
+    }
     let ret;
 
     if (currentBrowser.firefox) {

From 38d1be5fc2883ba35f2fe1b87f3d2ef9392830ea Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sun, 31 Jan 2021 00:24:02 +0100
Subject: [PATCH 08/68] fix condition

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

diff --git a/src/ext/lib/video-transform/Stretcher.js b/src/ext/lib/video-transform/Stretcher.js
index bcb5a29..96cb72a 100644
--- a/src/ext/lib/video-transform/Stretcher.js
+++ b/src/ext/lib/video-transform/Stretcher.js
@@ -255,7 +255,7 @@ squeezeFactor:          ${squeezeFactor}`, '\nvideo', this.conf.video);
    * style attribute does).
    */
   chromeBugMitigation(stretchFactors) {
-    if (BrowserDetect.anyChromium && this.conf.player?.isFullScreen && this.conf.player?.dimensions?.fullscreen) {
+    if (BrowserDetect.anyChromium && this.conf.player?.dimensions?.fullscreen) {
       const playerAr = playerArOverride || this.conf.player.dimensions.width / this.conf.player.dimensions.height;
       const streamAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
       

From 56ebd2d36c1aa59964a0badfb87563fc7028a7e1 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sun, 31 Jan 2021 00:47:32 +0100
Subject: [PATCH 09/68] Fix

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

diff --git a/src/ext/lib/video-transform/Stretcher.js b/src/ext/lib/video-transform/Stretcher.js
index 96cb72a..477539f 100644
--- a/src/ext/lib/video-transform/Stretcher.js
+++ b/src/ext/lib/video-transform/Stretcher.js
@@ -256,7 +256,7 @@ squeezeFactor:          ${squeezeFactor}`, '\nvideo', this.conf.video);
    */
   chromeBugMitigation(stretchFactors) {
     if (BrowserDetect.anyChromium && this.conf.player?.dimensions?.fullscreen) {
-      const playerAr = playerArOverride || this.conf.player.dimensions.width / this.conf.player.dimensions.height;
+      const playerAr = this.conf.player.dimensions.width / this.conf.player.dimensions.height;
       const streamAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
       
       let maxSafeAr;

From 851f0e0e84aa6e4f124f5afcdd33c6da1d32df03 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sun, 31 Jan 2021 00:58:43 +0100
Subject: [PATCH 10/68] fix pt 2

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

diff --git a/src/ext/lib/video-transform/Stretcher.js b/src/ext/lib/video-transform/Stretcher.js
index 477539f..3b19ddb 100644
--- a/src/ext/lib/video-transform/Stretcher.js
+++ b/src/ext/lib/video-transform/Stretcher.js
@@ -270,7 +270,7 @@ squeezeFactor:          ${squeezeFactor}`, '\nvideo', this.conf.video);
         return;
       }
       
-      const maxSafeStretchFactor = this.conf.resizer.stretcher.calculateCrop(maxSafeAr).xFactor;
+      const maxSafeStretchFactor = this.conf.resizer.scaler.calculateCrop(maxSafeAr).xFactor;
 
       console.info('Stretch factors before:', stretchFactors.xFactor, stretchFactors.yFactor, "max safe:", maxSafeStretchFactor, "max safe ar:", maxSafeAr);
 

From ee9599d0409f372aa37358f65ab269ad3b7f603e Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sun, 31 Jan 2021 01:04:31 +0100
Subject: [PATCH 11/68] bind this for shits and giggles on
 onPlayerDimensionsChanged

---
 src/ext/lib/video-data/PlayerData.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/ext/lib/video-data/PlayerData.js b/src/ext/lib/video-data/PlayerData.js
index 7e4b69d..620eec1 100644
--- a/src/ext/lib/video-data/PlayerData.js
+++ b/src/ext/lib/video-data/PlayerData.js
@@ -87,6 +87,7 @@ class PlayerData {
 
   // player size observer may not be strictly necessary here
   onPlayerDimensionsChanged(mutationList, observer, context) {
+    console.log("context:", context, "this:", this);
     if (context.checkPlayerSizeChange()) {
       context.videoData.resizer.restore();
     }
@@ -115,7 +116,7 @@ class PlayerData {
 
     try {
       const ths = this;
-      this.observer = new MutationObserver((m,o) => this.onPlayerDimensionsChanged(m,o,ths));
+      this.observer = new MutationObserver((m,o) => this.onPlayerDimensionsChanged(m,o,this).bind(this));
 
       const observerConf = {
         attributes: true,

From f1613b950c7c3e3b51b8bd5ddc14bce865e4d320 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sun, 31 Jan 2021 01:18:35 +0100
Subject: [PATCH 12/68] fix a lil bit more

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

diff --git a/src/ext/lib/video-transform/Stretcher.js b/src/ext/lib/video-transform/Stretcher.js
index 3b19ddb..dde5657 100644
--- a/src/ext/lib/video-transform/Stretcher.js
+++ b/src/ext/lib/video-transform/Stretcher.js
@@ -270,7 +270,7 @@ squeezeFactor:          ${squeezeFactor}`, '\nvideo', this.conf.video);
         return;
       }
       
-      const maxSafeStretchFactor = this.conf.resizer.scaler.calculateCrop(maxSafeAr).xFactor;
+      const maxSafeStretchFactor = this.conf.resizer.scaler.calculateCrop({type: AspectRatio.Fixed, ratio: maxSafeAr}).xFactor;
 
       console.info('Stretch factors before:', stretchFactors.xFactor, stretchFactors.yFactor, "max safe:", maxSafeStretchFactor, "max safe ar:", maxSafeAr);
 

From 3ab619799a460085f46321dea1507377831f58ca Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sun, 31 Jan 2021 01:34:43 +0100
Subject: [PATCH 13/68] fix pt 3

---
 src/ext/lib/video-data/PlayerData.js     | 3 +--
 src/ext/lib/video-transform/Stretcher.js | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ext/lib/video-data/PlayerData.js b/src/ext/lib/video-data/PlayerData.js
index 620eec1..51de27e 100644
--- a/src/ext/lib/video-data/PlayerData.js
+++ b/src/ext/lib/video-data/PlayerData.js
@@ -115,8 +115,7 @@ class PlayerData {
     }
 
     try {
-      const ths = this;
-      this.observer = new MutationObserver((m,o) => this.onPlayerDimensionsChanged(m,o,this).bind(this));
+      this.observer = new MutationObserver((m,o) => this.onPlayerDimensionsChanged(m,o,this));
 
       const observerConf = {
         attributes: true,
diff --git a/src/ext/lib/video-transform/Stretcher.js b/src/ext/lib/video-transform/Stretcher.js
index dde5657..53efd31 100644
--- a/src/ext/lib/video-transform/Stretcher.js
+++ b/src/ext/lib/video-transform/Stretcher.js
@@ -1,5 +1,6 @@
 import Stretch from '../../../common/enums/stretch.enum';
 import BrowserDetect from '../../conf/BrowserDetect';
+import AspectRatio from '../../../common/enums/aspect-ratio.enum';
 
 // računa vrednosti za transform-scale (x, y)
 // transform: scale(x,y) se uporablja za raztegovanje videa, ne pa za približevanje

From bc19164c25c2a4264b40f37b6f7c2804e9ccc2f7 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sun, 31 Jan 2021 01:42:08 +0100
Subject: [PATCH 14/68] fix pt 4

---
 src/ext/lib/video-data/PlayerData.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/ext/lib/video-data/PlayerData.js b/src/ext/lib/video-data/PlayerData.js
index 51de27e..b131d82 100644
--- a/src/ext/lib/video-data/PlayerData.js
+++ b/src/ext/lib/video-data/PlayerData.js
@@ -87,9 +87,8 @@ class PlayerData {
 
   // player size observer may not be strictly necessary here
   onPlayerDimensionsChanged(mutationList, observer, context) {
-    console.log("context:", context, "this:", this);
-    if (context.checkPlayerSizeChange()) {
-      context.videoData.resizer.restore();
+    if (this?.checkPlayerSizeChange()) {
+      this.videoData.resizer.restore();
     }
   }
 

From fff575f762d927d28546fde1eb786879f0761926 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sun, 31 Jan 2021 01:54:33 +0100
Subject: [PATCH 15/68] Version bump

---
 CHANGELOG.md                       | 4 ++++
 package-lock.json                  | 2 +-
 package.json                       | 2 +-
 src/manifest.json                  | 2 +-
 src/popup/panels/WhatsNewPanel.vue | 7 ++-----
 5 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3ca3532..38f9247 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,10 @@
 
 ## v4.x (current major)
 
+### v4.5.3
+
+* Provides workaround for the fullscreen stretching bug Chrome 88 (or a recent Windows 10 update) introduced for nVidia users using hardware acceleration on Windows 10. In order to mitigate this bug, Ultrawidify needs to keep a 5-10 px wide black border while watching videos in full screen. This bug is also present in Edge.
+
 ### v4.5.2
 
 * Fixed the issue where videos would sometimes get misaligned while using hybrid stretch, except for real this time. ([#125](https://github.com/tamius-han/ultrawidify/issues/125))
diff --git a/package-lock.json b/package-lock.json
index e885ec9..5b8dbae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "ultrawidify",
-  "version": "4.5.2",
+  "version": "4.5.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 2cebcce..b4c2de1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ultrawidify",
-  "version": "4.5.2",
+  "version": "4.5.3",
   "description": "Aspect ratio fixer for youtube and other sites, with automatic aspect ratio detection. Supports ultrawide and other ratios.",
   "author": "Tamius Han <tamius.han@gmail.com>",
   "scripts": {
diff --git a/src/manifest.json b/src/manifest.json
index 4b58420..d9744e7 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.5.2",
+  "version": "4.5.3",
   "applications": {
     "gecko": {
       "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"
diff --git a/src/popup/panels/WhatsNewPanel.vue b/src/popup/panels/WhatsNewPanel.vue
index f70251d..1b744f8 100644
--- a/src/popup/panels/WhatsNewPanel.vue
+++ b/src/popup/panels/WhatsNewPanel.vue
@@ -2,13 +2,10 @@
   <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.5.2</p>
+    <p class="label">4.5.3</p>
     <ul>
       <li>
-        Fixed the issue where videos would sometimes get misaligned while using hybrid stretch, except for real this time. (<a href="https://github.com/tamius-han/ultrawidify/issues/125">#125</a>)
-      </li>
-      <li>
-        Improved DRM detection (the 'autodetection cannot work on this site' popup should now no longer show up on the sites where autodetection <i>can</i> work)
+        Provided a workaround for the fullscreen stretching bug Chrome 88 (or a recent Windows 10 update) introduced for nVidia users using hardware acceleration on Windows 10. In order to mitigate this bug, Ultrawidify needs to keep a 5-10 px wide black border while watching videos in full screen. This bug is also present in Edge.
       </li>
     </ul>
   </div>

From 78c04523c055a688ce6d47552161893aa68192f5 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sun, 31 Jan 2021 16:46:33 +0100
Subject: [PATCH 16/68] Prevent some more errors

---
 src/ext/lib/uwui/PlayerUI.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/ext/lib/uwui/PlayerUI.js b/src/ext/lib/uwui/PlayerUI.js
index 88fc206..dbab156 100644
--- a/src/ext/lib/uwui/PlayerUI.js
+++ b/src/ext/lib/uwui/PlayerUI.js
@@ -86,7 +86,11 @@ class PlayerUi extends UI {
 
   //#region lifecycle
   replace(playerElement) {
-    super.replace(this.getUiConfig(playerElement));
+    try {
+      super.replace(this.getUiConfig(playerElement));
+    } catch (e) {
+      this.logger.log('error', 'Couldn\'t replace player element for ui. Error:', e);
+    }
   }
   //#endregion
 }

From f3a9c06f9244b14404ba6027352a66f1c2f1a333 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sun, 31 Jan 2021 17:44:24 +0100
Subject: [PATCH 17/68] Anti-recursing measures

---
 src/ext/lib/video-transform/Scaler.js    | 59 ++++++++++--------------
 src/ext/lib/video-transform/Stretcher.js | 16 +++++--
 2 files changed, 36 insertions(+), 39 deletions(-)

diff --git a/src/ext/lib/video-transform/Scaler.js b/src/ext/lib/video-transform/Scaler.js
index 10e3121..eb621aa 100644
--- a/src/ext/lib/video-transform/Scaler.js
+++ b/src/ext/lib/video-transform/Scaler.js
@@ -117,7 +117,7 @@ class Scaler {
     }
 
     if (ar.type === AspectRatio.Reset){
-      return {xFactor: arCorrectionFactor, yFactor: arCorrectionFactor}
+      return {xFactor: arCorrectionFactor, yFactor: arCorrectionFactor, arCorrectionFactor: arCorrectionFactor}
     }
 
     // handle fuckie-wuckies
@@ -151,13 +151,28 @@ class Scaler {
       yFactor: 1,
       actualWidth: 0,   // width of the video (excluding pillarbox) when <video> tag height is equal to width
       actualHeight: 0,  // height of the video (excluding letterbox) when <video> tag height is equal to height
+      arCorrectionFactor: arCorrectionFactor,
     }
   
+    this.calculateCropCore(videoDimensions, ar.ratio, streamAr, playerAr)
+    
+    return videoDimensions;
+  }
+
+  /**
+   * The act of calculating aspect ratio is separated due to resue elsewhere in the extension.
+   * We are doing that to avoid surprise recursions.
+   * @param {*} videoDimensions 
+   * @param {*} ar 
+   * @param {*} streamAr 
+   * @param {*} playerAr 
+   */
+  calculateCropCore(videoDimensions, ar, streamAr, playerAr) {
     if (streamAr < playerAr) {
-      if (streamAr < ar.ratio){
+      if (streamAr < ar){
         // in this situation we have to crop letterbox on top/bottom of the player
         // we cut it, but never more than the player
-        videoDimensions.xFactor = Math.min(ar.ratio, playerAr) / streamAr;
+        videoDimensions.xFactor = Math.min(ar, playerAr) / streamAr;
         videoDimensions.yFactor = videoDimensions.xFactor;
       } else {
         // in this situation, we would be cutting pillarbox. Inside horizontal player.
@@ -166,7 +181,7 @@ class Scaler {
         videoDimensions.yFactor = 1;
       }
     } else {
-      if (streamAr < ar.ratio || playerAr < ar.ratio){
+      if (streamAr < ar || playerAr < ar){
         // in this situation, we need to add extra letterbox on top of our letterbox
         // this means we simply don't crop anything _at all_
         videoDimensions.xFactor = 1;
@@ -179,38 +194,14 @@ class Scaler {
         // videoDimensions.yFactor = videoDimensions.xFactor;
       }
     }
-    
+
     this.logger.log('info', 'scaler', "[Scaler::calculateCrop] Crop factor calculated — ", videoDimensions.xFactor);
-
-    // Workaround for Chrome/Edge issue where zooming too much results in video being stretched incorrectly
-    /**
-     * Bug description — if the following are true:
-     *   * user is using Chrome or Edge (but surprisingly not Opera)
-     *   * user is using hardware acceleration
-     *   * user is using a noVideo card
-     *   * user is in full screen mode
-     * Then the video will do Stretch.Basic no matter what you put in `transform: scale(x,y)`.
-     * 
-     * Because this issue happens regardless of how you upscale the video (doesn't matter if you use transform:scale
-     * or width+height or anything else), the aspect ratio needs to be limited _before_ applying arCorrectionFactor
-     * (note that arCorrectionFactor is usually <= 1, as it conpensates for zooming that height=[>100%] on <video>
-     * style attribute does). 
-     * 
-     * This method is also repeated in calculate stretch method.
-     */
-
-    if (BrowserDetect.anyChromium && this.conf.player?.isFullScreen && this.conf.player?.dimensions?.fullscreen) {
-      const maxSafeAr = (window.innerWidth * 0.995) / window.innerHeight;
-      
-      videoDimensions.xFactor = Math.min(videoDimensions.xFactor, maxSafeAr);
-      videoDimensions.yFactor = Math.min(videoDimensions.yFactor, maxSafeAr);
+ 
+    // correct the scale factor
+    if (videoDimensions.arCorrectionFactor) {
+      videoDimensions.xFactor *= videoDimensions.arCorrectionFactor;
+      videoDimensions.yFactor *= videoDimensions.arCorrectionFactor;
     }
-
-    // correct the factors
-    videoDimensions.xFactor *= arCorrectionFactor;
-    videoDimensions.yFactor *= arCorrectionFactor;
-
-    return videoDimensions;
   }
 }
 
diff --git a/src/ext/lib/video-transform/Stretcher.js b/src/ext/lib/video-transform/Stretcher.js
index 53efd31..56e07b8 100644
--- a/src/ext/lib/video-transform/Stretcher.js
+++ b/src/ext/lib/video-transform/Stretcher.js
@@ -271,15 +271,21 @@ squeezeFactor:          ${squeezeFactor}`, '\nvideo', this.conf.video);
         return;
       }
       
-      const maxSafeStretchFactor = this.conf.resizer.scaler.calculateCrop({type: AspectRatio.Fixed, ratio: maxSafeAr}).xFactor;
+      const maxSafeStretchFactor = this.conf.resizer.scaler.calculateCropCore(
+        { 
+          xFactor: 1,
+          yFactor: 1,
+          arCorrectionFactor: stretchFactors.arCorrectionFactor
+        },
+        maxSafeAr,
+        streamAr,
+        playerAr
+      ).xFactor;
 
-      console.info('Stretch factors before:', stretchFactors.xFactor, stretchFactors.yFactor, "max safe:", maxSafeStretchFactor, "max safe ar:", maxSafeAr);
+      // console.info('Stretch factors before:', stretchFactors.xFactor, stretchFactors.yFactor, "max safe:", maxSafeStretchFactor, "max safe ar:", maxSafeAr);
 
       stretchFactors.xFactor = Math.min(stretchFactors.xFactor, maxSafeStretchFactor);
       stretchFactors.yFactor = Math.min(stretchFactors.yFactor, maxSafeStretchFactor);
-
-      console.info('Stretch factors after:', stretchFactors.xFactor, stretchFactors.yFactor);
-
     }
   }
 }

From f961c8aea88a4ffe31ea80736daf74b80bec83ca Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sun, 31 Jan 2021 17:44:33 +0100
Subject: [PATCH 18/68] Don't do logging by default

---
 src/ext/lib/Logger.js | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/ext/lib/Logger.js b/src/ext/lib/Logger.js
index 21fa72f..c671c5e 100644
--- a/src/ext/lib/Logger.js
+++ b/src/ext/lib/Logger.js
@@ -44,16 +44,6 @@ class Logger {
   }
 
   static async getConfig() {
-    return { "allowLogging": true,
-      "consoleOptions": {
-        "enabled": true,
-        "debug": true,
-        "resizer": true,
-        "scaler": true,
-        "stretcher": true
-      },
-      "fileOptions": {}
-    }
     let ret;
 
     if (currentBrowser.firefox) {

From 96a5b8da8f4a5f69576185557257a21f65f2a6ea Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sun, 31 Jan 2021 17:57:35 +0100
Subject: [PATCH 19/68] Add a bit of 'maybe' to "whoops no Aard on this site"
 notification

---
 src/common/data/notifications.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/data/notifications.js b/src/common/data/notifications.js
index b80a791..368d486 100644
--- a/src/common/data/notifications.js
+++ b/src/common/data/notifications.js
@@ -6,7 +6,7 @@ let Notifications = Object.freeze({
   },
   'AARD_DRM': {
     icon: 'exclamation-triangle',
-    text: '<b>Autodetection cannot run on this video.</b> This usually happens when sites use DRM. You will have to set aspect ratio manually.',
+    text: '<b>Autodetection may not be able to run on this video.</b> On sites that utilize DRM you will have to set aspect ratio manually.',
     timeout: 5000,
   }
 });

From ea186d0aeb4289376383acf4fb87bc8d251e00bf Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sun, 31 Jan 2021 23:32:32 +0100
Subject: [PATCH 20/68] always return videoDimensions

---
 src/ext/lib/video-transform/Scaler.js    | 4 +++-
 src/ext/lib/video-transform/Stretcher.js | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/ext/lib/video-transform/Scaler.js b/src/ext/lib/video-transform/Scaler.js
index eb621aa..5a09846 100644
--- a/src/ext/lib/video-transform/Scaler.js
+++ b/src/ext/lib/video-transform/Scaler.js
@@ -146,7 +146,7 @@ class Scaler {
   
     this.logger.log('info', 'scaler', "[Scaler::calculateCrop] ar is " ,ar.ratio, ", file ar is", streamAr, ", this.conf.player.dimensions are ", this.conf.player.dimensions.width, "×", this.conf.player.dimensions.height, "| obj:", this.conf.player.dimensions);
     
-    var videoDimensions = {
+    const videoDimensions = {
       xFactor: 1,
       yFactor: 1,
       actualWidth: 0,   // width of the video (excluding pillarbox) when <video> tag height is equal to width
@@ -202,6 +202,8 @@ class Scaler {
       videoDimensions.xFactor *= videoDimensions.arCorrectionFactor;
       videoDimensions.yFactor *= videoDimensions.arCorrectionFactor;
     }
+
+    return videoDimensions;
   }
 }
 
diff --git a/src/ext/lib/video-transform/Stretcher.js b/src/ext/lib/video-transform/Stretcher.js
index 56e07b8..559dff8 100644
--- a/src/ext/lib/video-transform/Stretcher.js
+++ b/src/ext/lib/video-transform/Stretcher.js
@@ -286,6 +286,8 @@ squeezeFactor:          ${squeezeFactor}`, '\nvideo', this.conf.video);
 
       stretchFactors.xFactor = Math.min(stretchFactors.xFactor, maxSafeStretchFactor);
       stretchFactors.yFactor = Math.min(stretchFactors.yFactor, maxSafeStretchFactor);
+
+      return stretchFactors;
     }
   }
 }

From 02b4b447805427d56b237edc179ab19ef2d095b5 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sun, 31 Jan 2021 23:55:50 +0100
Subject: [PATCH 21/68] Additional anti-recursing measures

---
 src/ext/lib/video-data/PlayerData.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/ext/lib/video-data/PlayerData.js b/src/ext/lib/video-data/PlayerData.js
index b131d82..f0abd6d 100644
--- a/src/ext/lib/video-data/PlayerData.js
+++ b/src/ext/lib/video-data/PlayerData.js
@@ -85,11 +85,21 @@ class PlayerData {
     return ( window.innerHeight == window.screen.height && window.innerWidth == window.screen.width);
   }
 
+  
   // player size observer may not be strictly necessary here
+  _playerDimensionChangedInProgress = false;
   onPlayerDimensionsChanged(mutationList, observer, context) {
+    if (this._playerDimensionChangedInProgress) {
+      return;
+    }
+    
+    this._playerDimensionChangedInProgress = true;
+
     if (this?.checkPlayerSizeChange()) {
       this.videoData.resizer.restore();
     }
+
+    this._playerDimensionChangedInProgress = false;
   }
 
 

From 870384f83bf78ae7660e3c6f5d75a143c661f449 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Mon, 1 Feb 2021 00:11:24 +0100
Subject: [PATCH 22/68] Decrease callback frequency

---
 src/ext/lib/video-data/PlayerData.js | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/ext/lib/video-data/PlayerData.js b/src/ext/lib/video-data/PlayerData.js
index f0abd6d..eced137 100644
--- a/src/ext/lib/video-data/PlayerData.js
+++ b/src/ext/lib/video-data/PlayerData.js
@@ -4,6 +4,7 @@ import AspectRatio from '../../../common/enums/aspect-ratio.enum';
 import PlayerNotificationUi from '../uwui/PlayerNotificationUI';
 import PlayerUi from '../uwui/PlayerUI';
 import BrowserDetect from '../../conf/BrowserDetect';
+import _ from 'lodash';
 
 if (process.env.CHANNEL !== 'stable'){
   console.info("Loading: PlayerData.js");
@@ -87,19 +88,10 @@ class PlayerData {
 
   
   // player size observer may not be strictly necessary here
-  _playerDimensionChangedInProgress = false;
   onPlayerDimensionsChanged(mutationList, observer, context) {
-    if (this._playerDimensionChangedInProgress) {
-      return;
-    }
-    
-    this._playerDimensionChangedInProgress = true;
-
     if (this?.checkPlayerSizeChange()) {
       this.videoData.resizer.restore();
     }
-
-    this._playerDimensionChangedInProgress = false;
   }
 
 
@@ -124,7 +116,16 @@ class PlayerData {
     }
 
     try {
-      this.observer = new MutationObserver((m,o) => this.onPlayerDimensionsChanged(m,o,this));
+      this.observer = new MutationObserver(
+        _.debounce(           // don't do this too much:
+          (m,o) => this.onPlayerDimensionsChanged(m,o,this),
+          250,                // do it once per this many ms
+          {
+            leading: true,    // do it when we call this fallback first
+            trailing: true    // do it after the timeout if we call this callback few more times
+          }
+        )
+      );
 
       const observerConf = {
         attributes: true,

From 5efa8c88c124f57765c9da658d02bdf5b7af8b02 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sun, 7 Feb 2021 12:54:20 +0100
Subject: [PATCH 23/68] Additional anti-recursing measures, pt 2

---
 src/ext/lib/video-data/PlayerData.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/ext/lib/video-data/PlayerData.js b/src/ext/lib/video-data/PlayerData.js
index eced137..06cac7f 100644
--- a/src/ext/lib/video-data/PlayerData.js
+++ b/src/ext/lib/video-data/PlayerData.js
@@ -88,10 +88,18 @@ class PlayerData {
 
   
   // player size observer may not be strictly necessary here
+  // note that this function is called manually as well — whenever aspect ratio changes.
+  // this can result in recursive calls. We don't want recusrive calls.
+  onPlayerDimensionsChanged_recursing = false;
   onPlayerDimensionsChanged(mutationList, observer, context) {
+    if (this.onPlayerDimensionsChanged_recursing) {
+      return;
+    }
+    this.onPlayerDimensionsChanged_recursing = true;
     if (this?.checkPlayerSizeChange()) {
       this.videoData.resizer.restore();
     }
+    this.onPlayerDimensionsChanged_recursing = false;
   }
 
 

From f63fd895fe249ddf48e8d85792d54a24c489e164 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Mon, 8 Feb 2021 20:43:56 +0100
Subject: [PATCH 24/68] Rework observers a little. Debounce offset validation
 in videoData

---
 src/ext/lib/video-data/PlayerData.js | 53 ++++++++++++++-------------
 src/ext/lib/video-data/VideoData.js  | 55 +++++++++++++++++++++-------
 2 files changed, 70 insertions(+), 38 deletions(-)

diff --git a/src/ext/lib/video-data/PlayerData.js b/src/ext/lib/video-data/PlayerData.js
index 06cac7f..3c5fda5 100644
--- a/src/ext/lib/video-data/PlayerData.js
+++ b/src/ext/lib/video-data/PlayerData.js
@@ -5,6 +5,7 @@ import PlayerNotificationUi from '../uwui/PlayerNotificationUI';
 import PlayerUi from '../uwui/PlayerUI';
 import BrowserDetect from '../../conf/BrowserDetect';
 import _ from 'lodash';
+import { sleep } from '../../../common/js/utils';
 
 if (process.env.CHANNEL !== 'stable'){
   console.info("Loading: PlayerData.js");
@@ -78,28 +79,15 @@ class PlayerData {
     }
   }
 
-  async sleep(timeout) {
-    return new Promise( (resolve, reject) => setTimeout(() => resolve(), timeout));
-  }
-
   static isFullScreen(){
     return ( window.innerHeight == window.screen.height && window.innerWidth == window.screen.width);
   }
 
   
-  // player size observer may not be strictly necessary here
-  // note that this function is called manually as well — whenever aspect ratio changes.
-  // this can result in recursive calls. We don't want recusrive calls.
-  onPlayerDimensionsChanged_recursing = false;
-  onPlayerDimensionsChanged(mutationList, observer, context) {
-    if (this.onPlayerDimensionsChanged_recursing) {
-      return;
-    }
-    this.onPlayerDimensionsChanged_recursing = true;
+  onPlayerDimensionsChanged(mutationList, observer) {
     if (this?.checkPlayerSizeChange()) {
       this.videoData.resizer.restore();
     }
-    this.onPlayerDimensionsChanged_recursing = false;
   }
 
 
@@ -124,16 +112,31 @@ class PlayerData {
     }
 
     try {
-      this.observer = new MutationObserver(
-        _.debounce(           // don't do this too much:
-          (m,o) => this.onPlayerDimensionsChanged(m,o,this),
-          250,                // do it once per this many ms
-          {
-            leading: true,    // do it when we call this fallback first
-            trailing: true    // do it after the timeout if we call this callback few more times
-          }
-        )
-      );
+      if (BrowserDetect.firefox) {
+        this.observer = new MutationObserver(
+          _.debounce(           // don't do this too much:
+            this.onPlayerDimensionsChanged,
+            250,                // do it once per this many ms
+            {
+              leading: true,    // do it when we call this fallback first
+              trailing: true    // do it after the timeout if we call this callback few more times
+            }
+          )
+        );
+      } else {
+        // Chrome for some reason insists that this.onPlayerDimensionsChanged is not a function
+        // when it's not wrapped into an anonymous function
+        this.observer = new MutationObserver(
+          _.debounce(           // don't do this too much:
+            (m,o) => this.onPlayerDimensionsChanged(m,o),
+            250,                // do it once per this many ms
+            {
+              leading: true,    // do it when we call this fallback first
+              trailing: true    // do it after the timeout if we call this callback few more times
+            }
+          )
+        );
+      }
 
       const observerConf = {
         attributes: true,
@@ -152,7 +155,7 @@ class PlayerData {
 
   async legacyChangeDetection() {
     while (!this.halted) {
-      await this.sleep(1000);
+      await sleep(1000);
       try {
         this.doPeriodicPlayerElementChangeCheck();
       } catch (e) {
diff --git a/src/ext/lib/video-data/VideoData.js b/src/ext/lib/video-data/VideoData.js
index 8f7d727..486490d 100644
--- a/src/ext/lib/video-data/VideoData.js
+++ b/src/ext/lib/video-data/VideoData.js
@@ -3,6 +3,8 @@ import PlayerData from './PlayerData';
 import Resizer from '../video-transform/Resizer';
 import ArDetector from '../ar-detect/ArDetector';
 import AspectRatio from '../../../common/enums/aspect-ratio.enum';
+import _ from 'lodash';
+import BrowserDetect from '../../conf/BrowserDetect';
 
 class VideoData {
   
@@ -134,10 +136,37 @@ class VideoData {
     this.resizer = new Resizer(this);
 
     // INIT OBSERVERS
-    this.observer = new MutationObserver( (m, o) => {
-      this.logger.log('info', 'debug', `[VideoData::setupStageTwo->mutationObserver] Mutation observer detected a mutation:`, {m, o});
-      this.onVideoDimensionsChanged(m, o, this)
-    });
+    try {
+      if (BrowserDetect.firefox) {
+        this.observer = new MutationObserver( 
+          _.debounce(
+            this.onVideoDimensionsChanged,
+            250,
+            {
+              leading: true,
+              trailing: true
+            }
+          )
+        );
+      } else {
+        // Chrome for some reason insists that this.onPlayerDimensionsChanged is not a function
+        // when it's not wrapped into an anonymous function
+        this.observer = new MutationObserver( 
+          _.debounce(
+            (m, o) => {
+              this.onVideoDimensionsChanged(m, o)
+            }, 
+            250,
+            {
+              leading: true,
+              trailing: true
+            }
+          )
+        );
+      }
+    } catch (e) {
+      console.error('[VideoData] Observer setup failed:', e);
+    }
     this.observer.observe(this.video, observerConf);
 
     // INIT AARD
@@ -263,9 +292,9 @@ class VideoData {
   }
 
 
-  onVideoDimensionsChanged(mutationList, observer, context) {
-    if (!mutationList || context.video === undefined) {  // something's wrong
-      if (observer && context.video) {
+  onVideoDimensionsChanged(mutationList, observer) {
+    if (!mutationList || this.video === undefined) {  // something's wrong
+      if (observer && this.video) {
         observer.disconnect();
       }
       return;
@@ -275,14 +304,14 @@ class VideoData {
     for (let mutation of mutationList) {
       if (mutation.type === 'attributes') {
         if (mutation.attributeName === 'class') {
-          if(!context.video.classList.contains(this.userCssClassName) ) {
+          if(!this.video.classList.contains(this.userCssClassName) ) {
             // force the page to include our class in classlist, if the classlist has been removed
             // while classList.add() doesn't duplicate classes (does nothing if class is already added),
             // we still only need to make sure we're only adding our class to classlist if it has been
             // removed. classList.add() will _still_ trigger mutation (even if classlist wouldn't change).
             // This is a problem because INFINITE RECURSION TIME, and we _really_ don't want that.
-            context.video.classList.add(this.userCssClassName);
-            context.video.classList.add('uw-ultrawidify-base-wide-screen'); 
+            this.video.classList.add(this.userCssClassName);
+            this.video.classList.add('uw-ultrawidify-base-wide-screen'); 
           }
           // always trigger refresh on class changes, since change of classname might trigger change 
           // of the player size as well.
@@ -301,13 +330,13 @@ class VideoData {
     // adding player observer taught us that if element size gets triggered by a class, then
     // the 'style' attributes don't necessarily trigger. This means we also need to trigger
     // restoreAr here, in case video size was changed this way
-    context.player.forceRefreshPlayerElement();
-    context.restoreAr();
+    this.player.forceRefreshPlayerElement();
+    this.restoreAr();
 
     // sometimes something fucky wucky happens and mutations aren't detected correctly, so we
     // try to get around that
     setTimeout( () => {
-      context.validateVideoOffsets();
+      this.validateVideoOffsets();
     }, 100);
   }
 

From cb5218e52d8e7b0283fad7756e5319e15a549e1d Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Mon, 8 Feb 2021 20:44:34 +0100
Subject: [PATCH 25/68] Only allow one instance of offset validation watcher
 per video element

---
 src/ext/lib/video-data/VideoData.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/ext/lib/video-data/VideoData.js b/src/ext/lib/video-data/VideoData.js
index 486490d..8643422 100644
--- a/src/ext/lib/video-data/VideoData.js
+++ b/src/ext/lib/video-data/VideoData.js
@@ -25,6 +25,8 @@ class VideoData {
     this.videoLoaded = false;
     this.videoDimensionsLoaded = true;
 
+    this.validationId = null;
+
     this.dimensions = {
       width: this.video.offsetWidth,
       height: this.video.offsetHeight,
@@ -276,8 +278,14 @@ class VideoData {
     }
   }
 
+  /**
+   * Starts fallback change detection (validates whether currently applied settings are correct)
+   */
   async fallbackChangeDetection() {
-    while (!this.destroyed && !this.invalid) {
+    const validationId = Date.now();
+    this.validationId = validationId;
+
+    while (!this.destroyed && !this.invalid && this.validationId === validationId) {
       await this.sleep(500);
       this.doPeriodicFallbackChangeDetectionCheck();
     }

From dc71a2586399d269758610f1941003f8c523f5ee Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Mon, 8 Feb 2021 20:44:49 +0100
Subject: [PATCH 26/68] Do additional logging

---
 src/ext/lib/video-data/VideoData.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/ext/lib/video-data/VideoData.js b/src/ext/lib/video-data/VideoData.js
index 8643422..422e361 100644
--- a/src/ext/lib/video-data/VideoData.js
+++ b/src/ext/lib/video-data/VideoData.js
@@ -370,16 +370,24 @@ class VideoData {
       const ph = +(pcs.height.split('px')[0]);
       const pw = +(pcs.width.split('px')[0]);
 
+      console.info(
+        '---- [ video offsets & stuff ] ----\n',
+        'video offset x:', translateX, '(x2:', translateX * 2, ') + width:', vw, 'should = player width:', pw, '\n',
+        'video offset y:', translateY, '(x2:', translateY * 2, ') + height:', vh, 'should = player height:', ph
+      );
       // TODO: check & account for panning and alignment
       if (transformMatrix[0] !== 'none'
           && this.isWithin(vh, (ph - (translateY * 2)), 2)
           && this.isWithin(vw, (pw - (translateX * 2)), 2)) {
+        console.info('offsets are within tolerance');
       } else {
+        console.warn('offsets are incorrect')
         this.player.forceDetectPlayerElementChange();
+        this.restoreAr();
       }
       
     } catch(e) {
-      // do nothing on fail
+      console.error('Validating video offsets failed:', e)
     }
   }
 

From 226cfb654e898eaf125b1e125886355ffef0e36b Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Mon, 8 Feb 2021 20:44:49 +0100
Subject: [PATCH 27/68] We don't need this logging on master

This reverts commit dc71a2586399d269758610f1941003f8c523f5ee.
---
 src/ext/lib/video-data/VideoData.js | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/ext/lib/video-data/VideoData.js b/src/ext/lib/video-data/VideoData.js
index 422e361..8643422 100644
--- a/src/ext/lib/video-data/VideoData.js
+++ b/src/ext/lib/video-data/VideoData.js
@@ -370,24 +370,16 @@ class VideoData {
       const ph = +(pcs.height.split('px')[0]);
       const pw = +(pcs.width.split('px')[0]);
 
-      console.info(
-        '---- [ video offsets & stuff ] ----\n',
-        'video offset x:', translateX, '(x2:', translateX * 2, ') + width:', vw, 'should = player width:', pw, '\n',
-        'video offset y:', translateY, '(x2:', translateY * 2, ') + height:', vh, 'should = player height:', ph
-      );
       // TODO: check & account for panning and alignment
       if (transformMatrix[0] !== 'none'
           && this.isWithin(vh, (ph - (translateY * 2)), 2)
           && this.isWithin(vw, (pw - (translateX * 2)), 2)) {
-        console.info('offsets are within tolerance');
       } else {
-        console.warn('offsets are incorrect')
         this.player.forceDetectPlayerElementChange();
-        this.restoreAr();
       }
       
     } catch(e) {
-      console.error('Validating video offsets failed:', e)
+      // do nothing on fail
     }
   }
 

From 4d1da636e33239c0ef66e3a053437b9e5778cad8 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Mon, 8 Feb 2021 20:47:06 +0100
Subject: [PATCH 28/68] Log just a little on master as well

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

diff --git a/src/ext/lib/video-data/VideoData.js b/src/ext/lib/video-data/VideoData.js
index 8643422..9454a08 100644
--- a/src/ext/lib/video-data/VideoData.js
+++ b/src/ext/lib/video-data/VideoData.js
@@ -379,7 +379,7 @@ class VideoData {
       }
       
     } catch(e) {
-      // do nothing on fail
+      console.error('Validating video offsets failed:', e)
     }
   }
 

From 3b79829b72ef5be9ab39c18045032d9e850ff4b3 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Mon, 8 Feb 2021 20:55:17 +0100
Subject: [PATCH 29/68] Do tsconfig and webpack

---
 tsconfig.json     |  8 ++++++++
 webpack.config.js | 13 ++++++++-----
 2 files changed, 16 insertions(+), 5 deletions(-)
 create mode 100644 tsconfig.json

diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..8ee3397
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "outDir": "./ts-out",
+    "allowJs": true,
+    "target": "es2020"
+  },
+  "include": [ "./src/**/*" ]
+}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index c521abf..380794c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -22,19 +22,22 @@ const config = {
     path: __dirname + `/dist-${process.env.BROWSER == 'firefox' ? 'ff' : process.env.BROWSER}`,
     filename: '[name].js',
   },
+
+  devtool: "source-map",
+
   resolve: {
     // maybe we'll move to TS some day, but today is not the day
     extensions: [
-      // '.ts', '.tsx',
+      '.ts', '.tsx',
       '.js', '.vue'
     ],
   },
   module: {
     rules: [
-      // { 
-      //   test: /\.tsx?$/,
-      //   loader: 'ts-loader',
-      // },
+      { 
+        test: /\.tsx?$/,
+        loader: 'ts-loader',
+      },
       {
         test: /\.vue$/,
         loaders: 'vue-loader',

From cfc7f6aca626b1ba9da56a9d708154872a46311f Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Mon, 8 Feb 2021 21:05:27 +0100
Subject: [PATCH 30/68] add new packages

---
 package-lock.json | 148 ++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |   2 +
 2 files changed, 150 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 5b8dbae..cf3e1a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14451,6 +14451,154 @@
         "tslib": "^1.9.3"
       }
     },
+    "ts-loader": {
+      "version": "8.0.16",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-8.0.16.tgz",
+      "integrity": "sha512-Cr9ywsgg1n8cjGjIogHLPlqe3WJUHzuJaqwNo5I596KpIqekKzxvSENbrXeOypHcXSPPsr8hV6mglngyXvcKrg==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "enhanced-resolve": "^4.0.0",
+        "loader-utils": "^2.0.0",
+        "micromatch": "^4.0.0",
+        "semver": "^7.3.4"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "braces": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+          "dev": true,
+          "requires": {
+            "fill-range": "^7.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "emojis-list": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+          "dev": true
+        },
+        "fill-range": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+          "dev": true,
+          "requires": {
+            "to-regex-range": "^5.0.1"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "is-number": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+          "dev": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "micromatch": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
+          "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
+          "dev": true,
+          "requires": {
+            "braces": "^3.0.1",
+            "picomatch": "^2.0.5"
+          }
+        },
+        "semver": {
+          "version": "7.3.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
+          "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "to-regex-range": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+          "dev": true,
+          "requires": {
+            "is-number": "^7.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "dev": true
+        }
+      }
+    },
     "ts-node": {
       "version": "8.10.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-8.10.2.tgz",
diff --git a/package.json b/package.json
index b4c2de1..877f600 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "concurrently": "^5.2.0",
     "fs-extra": "^7.0.1",
     "json-cyclic": "0.0.3",
+    "lodash": "^4.17.20",
     "vue": "^3.0.0-beta.1",
     "vuex": "^4.0.0-alpha.1",
     "vuex-webextensions": "^1.3.0"
@@ -50,6 +51,7 @@
     "mini-css-extract-plugin": "^0.4.4",
     "node-sass": "^4.14.1",
     "sass-loader": "^7.1.0",
+    "ts-loader": "^8.0.16",
     "vue-cli-plugin-vue-next": "~0.1.4",
     "vue-loader": "^16.0.0",
     "web-ext-types": "^2.1.0",

From efefa4ef32eef9e477874cfeb4e619a9aeaec288 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Mon, 8 Feb 2021 22:45:34 +0100
Subject: [PATCH 31/68] update packages

---
 package-lock.json | 3027 ++++++++++++++++++++++++++++++++++++++-------
 package.json      |    8 +-
 2 files changed, 2584 insertions(+), 451 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cf3e1a8..6c79e46 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -106,42 +106,190 @@
       }
     },
     "@babel/compat-data": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.10.5.tgz",
-      "integrity": "sha512-mPVoWNzIpYJHbWje0if7Ck36bpbtTvIxOi9+6WSK9wjGEXearAqlwBoTQvVjsAY2VIwgcs8V940geY3okzRCEw==",
-      "requires": {
-        "browserslist": "^4.12.0",
-        "invariant": "^2.2.4",
-        "semver": "^5.5.0"
-      }
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.12.13.tgz",
+      "integrity": "sha512-U/hshG5R+SIoW7HVWIdmy1cB7s3ki+r3FpyEZiCgpi4tFgPnX/vynY80ZGSASOIrUM6O7VxOgCZgdt7h97bUGg=="
     },
     "@babel/core": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.10.5.tgz",
-      "integrity": "sha512-O34LQooYVDXPl7QWCdW9p4NR+QlzOr7xShPPJz8GsuCU3/8ua/wqTr7gmnxXv+WBESiGU/G5s16i6tUvHkNb+w==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.13.tgz",
+      "integrity": "sha512-BQKE9kXkPlXHPeqissfxo0lySWJcYdEP0hdtJOH/iJfDdhOCcgtNCjftCJg3qqauB4h+lz2N6ixM++b9DN1Tcw==",
       "requires": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/generator": "^7.10.5",
-        "@babel/helper-module-transforms": "^7.10.5",
-        "@babel/helpers": "^7.10.4",
-        "@babel/parser": "^7.10.5",
-        "@babel/template": "^7.10.4",
-        "@babel/traverse": "^7.10.5",
-        "@babel/types": "^7.10.5",
+        "@babel/code-frame": "^7.12.13",
+        "@babel/generator": "^7.12.13",
+        "@babel/helper-module-transforms": "^7.12.13",
+        "@babel/helpers": "^7.12.13",
+        "@babel/parser": "^7.12.13",
+        "@babel/template": "^7.12.13",
+        "@babel/traverse": "^7.12.13",
+        "@babel/types": "^7.12.13",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.1",
         "json5": "^2.1.2",
         "lodash": "^4.17.19",
-        "resolve": "^1.3.2",
         "semver": "^5.4.1",
         "source-map": "^0.5.0"
       },
       "dependencies": {
-        "lodash": {
-          "version": "4.17.19",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
-          "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
+        "@babel/code-frame": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
+          "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
+          "requires": {
+            "@babel/highlight": "^7.12.13"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.12.15",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.15.tgz",
+          "integrity": "sha512-6F2xHxBiFXWNSGb7vyCUTBF8RCLY66rS0zEPcP8t/nQyXjha5EuK4z7H5o7fWG8B4M7y6mqVWq1J+1PuwRhecQ==",
+          "requires": {
+            "@babel/types": "^7.12.13",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz",
+          "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==",
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.12.13",
+            "@babel/template": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
+          "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-member-expression-to-functions": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.13.tgz",
+          "integrity": "sha512-B+7nN0gIL8FZ8SvMcF+EPyB21KnCcZHQZFczCxbiNGV/O0rsrSBlWGLzmtBJ3GMjSVMIm4lpFhR+VdVBuIsUcQ==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-module-imports": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.13.tgz",
+          "integrity": "sha512-NGmfvRp9Rqxy0uHSSVP+SRIW1q31a7Ji10cLBcqSDUngGentY4FRiHOFZFE1CLU5eiL0oE8reH7Tg1y99TDM/g==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.12.13.tgz",
+          "integrity": "sha512-acKF7EjqOR67ASIlDTupwkKM1eUisNAjaSduo5Cz+793ikfnpe7p4Q7B7EWU2PCoSTPWsQkR7hRUWEIZPiVLGA==",
+          "requires": {
+            "@babel/helper-module-imports": "^7.12.13",
+            "@babel/helper-replace-supers": "^7.12.13",
+            "@babel/helper-simple-access": "^7.12.13",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "@babel/template": "^7.12.13",
+            "@babel/traverse": "^7.12.13",
+            "@babel/types": "^7.12.13",
+            "lodash": "^4.17.19"
+          }
+        },
+        "@babel/helper-optimise-call-expression": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz",
+          "integrity": "sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.12.13.tgz",
+          "integrity": "sha512-pctAOIAMVStI2TMLhozPKbf5yTEXc0OJa0eENheb4w09SrgOWEs+P4nTOZYJQCqs8JlErGLDPDJTiGIp3ygbLg==",
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.12.13",
+            "@babel/helper-optimise-call-expression": "^7.12.13",
+            "@babel/traverse": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-simple-access": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.12.13.tgz",
+          "integrity": "sha512-0ski5dyYIHEfwpWGx5GPWhH35j342JaflmCeQmsPWcrOQDtCN6C1zKAVRFVbK53lPW2c9TsuLLSUDf0tIGJ5hA==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
+          "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+          "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+        },
+        "@babel/highlight": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.12.13.tgz",
+          "integrity": "sha512-kocDQvIbgMKlWxXe9fof3TQ+gkIPOUSEYhJjqUjvKMez3krV7vbzYCDq39Oj11UAVK7JqPVGQPlgE85dPNlQww==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.12.15",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.15.tgz",
+          "integrity": "sha512-AQBOU2Z9kWwSZMd6lNjCX0GUgFonL1wAM1db8L8PMk9UDaGsRCArBkU4Sc+UCM3AE4hjbXx+h58Lb3QT4oRmrA=="
+        },
+        "@babel/template": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
+          "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/parser": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.13.tgz",
+          "integrity": "sha512-3Zb4w7eE/OslI0fTp8c7b286/cQps3+vdLW3UcwC8VSJC6GbKn55aeVVu2QJNuCDoeKyptLOFrPq8WqZZBodyA==",
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/generator": "^7.12.13",
+            "@babel/helper-function-name": "^7.12.13",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/parser": "^7.12.13",
+            "@babel/types": "^7.12.13",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.19"
+          }
+        },
+        "@babel/types": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz",
+          "integrity": "sha512-oKrdZTld2im1z8bDwTOQvUbxKwE+854zc16qWZQlcTqMN00pWxHQ4ZeOq0yDMnisOpRykH2/5Qqcrk/OlbAjiQ==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
         }
       }
     },
@@ -156,81 +304,247 @@
       }
     },
     "@babel/helper-annotate-as-pure": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz",
-      "integrity": "sha512-XQlqKQP4vXFB7BN8fEEerrmYvHp3fK/rBkRFz9jaJbzK0B1DSfej9Kc7ZzE8Z/OnId1jpJdNAZ3BFQjWG68rcA==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.13.tgz",
+      "integrity": "sha512-7YXfX5wQ5aYM/BOlbSccHDbuXXFPxeoUmfWtz8le2yTkTZc+BxsiEnENFoi2SlmA8ewDkG2LgIMIVzzn2h8kfw==",
       "requires": {
-        "@babel/types": "^7.10.4"
-      }
-    },
-    "@babel/helper-builder-binary-assignment-operator-visitor": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.10.4.tgz",
-      "integrity": "sha512-L0zGlFrGWZK4PbT8AszSfLTM5sDU1+Az/En9VrdT8/LmEiJt4zXt+Jve9DCAnQcbqDhCI+29y/L93mrDzddCcg==",
-      "requires": {
-        "@babel/helper-explode-assignable-expression": "^7.10.4",
-        "@babel/types": "^7.10.4"
-      }
-    },
-    "@babel/helper-compilation-targets": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.10.4.tgz",
-      "integrity": "sha512-a3rYhlsGV0UHNDvrtOXBg8/OpfV0OKTkxKPzIplS1zpx7CygDcWWxckxZeDd3gzPzC4kUT0A4nVFDK0wGMh4MQ==",
-      "requires": {
-        "@babel/compat-data": "^7.10.4",
-        "browserslist": "^4.12.0",
-        "invariant": "^2.2.4",
-        "levenary": "^1.1.1",
-        "semver": "^5.5.0"
-      }
-    },
-    "@babel/helper-create-class-features-plugin": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.10.5.tgz",
-      "integrity": "sha512-0nkdeijB7VlZoLT3r/mY3bUkw3T8WG/hNw+FATs/6+pG2039IJWjTYL0VTISqsNHMUTEnwbVnc89WIJX9Qed0A==",
-      "requires": {
-        "@babel/helper-function-name": "^7.10.4",
-        "@babel/helper-member-expression-to-functions": "^7.10.5",
-        "@babel/helper-optimise-call-expression": "^7.10.4",
-        "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/helper-replace-supers": "^7.10.4",
-        "@babel/helper-split-export-declaration": "^7.10.4"
-      }
-    },
-    "@babel/helper-create-regexp-features-plugin": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.10.4.tgz",
-      "integrity": "sha512-2/hu58IEPKeoLF45DBwx3XFqsbCXmkdAay4spVr2x0jYgRxrSNp+ePwvSsy9g6YSaNDcKIQVPXk1Ov8S2edk2g==",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.10.4",
-        "@babel/helper-regex": "^7.10.4",
-        "regexpu-core": "^4.7.0"
-      }
-    },
-    "@babel/helper-define-map": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-map/-/helper-define-map-7.10.5.tgz",
-      "integrity": "sha512-fMw4kgFB720aQFXSVaXr79pjjcW5puTCM16+rECJ/plGS+zByelE8l9nCpV1GibxTnFVmUuYG9U8wYfQHdzOEQ==",
-      "requires": {
-        "@babel/helper-function-name": "^7.10.4",
-        "@babel/types": "^7.10.5",
-        "lodash": "^4.17.19"
+        "@babel/types": "^7.12.13"
       },
       "dependencies": {
-        "lodash": {
-          "version": "4.17.19",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
-          "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
+        "@babel/helper-validator-identifier": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+          "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+        },
+        "@babel/types": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz",
+          "integrity": "sha512-oKrdZTld2im1z8bDwTOQvUbxKwE+854zc16qWZQlcTqMN00pWxHQ4ZeOq0yDMnisOpRykH2/5Qqcrk/OlbAjiQ==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
         }
       }
     },
-    "@babel/helper-explode-assignable-expression": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.10.4.tgz",
-      "integrity": "sha512-4K71RyRQNPRrR85sr5QY4X3VwG4wtVoXZB9+L3r1Gp38DhELyHCtovqydRi7c1Ovb17eRGiQ/FD5s8JdU0Uy5A==",
+    "@babel/helper-builder-binary-assignment-operator-visitor": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.12.13.tgz",
+      "integrity": "sha512-CZOv9tGphhDRlVjVkAgm8Nhklm9RzSmWpX2my+t7Ua/KT616pEzXsQCjinzvkRvHWJ9itO4f296efroX23XCMA==",
       "requires": {
-        "@babel/traverse": "^7.10.4",
-        "@babel/types": "^7.10.4"
+        "@babel/helper-explode-assignable-expression": "^7.12.13",
+        "@babel/types": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-validator-identifier": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+          "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+        },
+        "@babel/types": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz",
+          "integrity": "sha512-oKrdZTld2im1z8bDwTOQvUbxKwE+854zc16qWZQlcTqMN00pWxHQ4ZeOq0yDMnisOpRykH2/5Qqcrk/OlbAjiQ==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/helper-compilation-targets": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.12.13.tgz",
+      "integrity": "sha512-dXof20y/6wB5HnLOGyLh/gobsMvDNoekcC+8MCV2iaTd5JemhFkPD73QB+tK3iFC9P0xJC73B6MvKkyUfS9cCw==",
+      "requires": {
+        "@babel/compat-data": "^7.12.13",
+        "@babel/helper-validator-option": "^7.12.11",
+        "browserslist": "^4.14.5",
+        "semver": "^5.5.0"
+      },
+      "dependencies": {
+        "@babel/helper-validator-option": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.12.11.tgz",
+          "integrity": "sha512-TBFCyj939mFSdeX7U7DDj32WtzYY7fDcalgq8v3fBZMNOJQNn7nOYzMaUCiPxPYfCup69mtIpqlKgMZLvQ8Xhw=="
+        }
+      }
+    },
+    "@babel/helper-create-class-features-plugin": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.12.13.tgz",
+      "integrity": "sha512-Vs/e9wv7rakKYeywsmEBSRC9KtmE7Px+YBlESekLeJOF0zbGUicGfXSNi3o+tfXSNS48U/7K9mIOOCR79Cl3+Q==",
+      "requires": {
+        "@babel/helper-function-name": "^7.12.13",
+        "@babel/helper-member-expression-to-functions": "^7.12.13",
+        "@babel/helper-optimise-call-expression": "^7.12.13",
+        "@babel/helper-replace-supers": "^7.12.13",
+        "@babel/helper-split-export-declaration": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
+          "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
+          "requires": {
+            "@babel/highlight": "^7.12.13"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.12.15",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.15.tgz",
+          "integrity": "sha512-6F2xHxBiFXWNSGb7vyCUTBF8RCLY66rS0zEPcP8t/nQyXjha5EuK4z7H5o7fWG8B4M7y6mqVWq1J+1PuwRhecQ==",
+          "requires": {
+            "@babel/types": "^7.12.13",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz",
+          "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==",
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.12.13",
+            "@babel/template": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
+          "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-member-expression-to-functions": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.13.tgz",
+          "integrity": "sha512-B+7nN0gIL8FZ8SvMcF+EPyB21KnCcZHQZFczCxbiNGV/O0rsrSBlWGLzmtBJ3GMjSVMIm4lpFhR+VdVBuIsUcQ==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-optimise-call-expression": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz",
+          "integrity": "sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.12.13.tgz",
+          "integrity": "sha512-pctAOIAMVStI2TMLhozPKbf5yTEXc0OJa0eENheb4w09SrgOWEs+P4nTOZYJQCqs8JlErGLDPDJTiGIp3ygbLg==",
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.12.13",
+            "@babel/helper-optimise-call-expression": "^7.12.13",
+            "@babel/traverse": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
+          "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+          "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+        },
+        "@babel/highlight": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.12.13.tgz",
+          "integrity": "sha512-kocDQvIbgMKlWxXe9fof3TQ+gkIPOUSEYhJjqUjvKMez3krV7vbzYCDq39Oj11UAVK7JqPVGQPlgE85dPNlQww==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.12.15",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.15.tgz",
+          "integrity": "sha512-AQBOU2Z9kWwSZMd6lNjCX0GUgFonL1wAM1db8L8PMk9UDaGsRCArBkU4Sc+UCM3AE4hjbXx+h58Lb3QT4oRmrA=="
+        },
+        "@babel/template": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
+          "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/parser": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.13.tgz",
+          "integrity": "sha512-3Zb4w7eE/OslI0fTp8c7b286/cQps3+vdLW3UcwC8VSJC6GbKn55aeVVu2QJNuCDoeKyptLOFrPq8WqZZBodyA==",
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/generator": "^7.12.13",
+            "@babel/helper-function-name": "^7.12.13",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/parser": "^7.12.13",
+            "@babel/types": "^7.12.13",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.19"
+          }
+        },
+        "@babel/types": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz",
+          "integrity": "sha512-oKrdZTld2im1z8bDwTOQvUbxKwE+854zc16qWZQlcTqMN00pWxHQ4ZeOq0yDMnisOpRykH2/5Qqcrk/OlbAjiQ==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/helper-create-regexp-features-plugin": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.12.13.tgz",
+      "integrity": "sha512-XC+kiA0J3at6E85dL5UnCYfVOcIZ834QcAY0TIpgUVnz0zDzg+0TtvZTnJ4g9L1dPRGe30Qi03XCIS4tYCLtqw==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.12.13",
+        "regexpu-core": "^4.7.1"
+      }
+    },
+    "@babel/helper-explode-assignable-expression": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.12.13.tgz",
+      "integrity": "sha512-5loeRNvMo9mx1dA/d6yNi+YiKziJZFylZnCo1nmFF4qPU4yJ14abhWESuSMQSlQxWdxdOFzxXjk/PpfudTtYyw==",
+      "requires": {
+        "@babel/types": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-validator-identifier": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+          "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+        },
+        "@babel/types": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz",
+          "integrity": "sha512-oKrdZTld2im1z8bDwTOQvUbxKwE+854zc16qWZQlcTqMN00pWxHQ4ZeOq0yDMnisOpRykH2/5Qqcrk/OlbAjiQ==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-function-name": {
@@ -252,11 +566,28 @@
       }
     },
     "@babel/helper-hoist-variables": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.10.4.tgz",
-      "integrity": "sha512-wljroF5PgCk2juF69kanHVs6vrLwIPNp6DLD+Lrl3hoQ3PpPPikaDRNFA+0t81NOoMt2DL6WW/mdU8k4k6ZzuA==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.12.13.tgz",
+      "integrity": "sha512-KSC5XSj5HreRhYQtZ3cnSnQwDzgnbdUDEFsxkN0m6Q3WrCRt72xrnZ8+h+pX7YxM7hr87zIO3a/v5p/H3TrnVw==",
       "requires": {
-        "@babel/types": "^7.10.4"
+        "@babel/types": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-validator-identifier": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+          "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+        },
+        "@babel/types": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz",
+          "integrity": "sha512-oKrdZTld2im1z8bDwTOQvUbxKwE+854zc16qWZQlcTqMN00pWxHQ4ZeOq0yDMnisOpRykH2/5Qqcrk/OlbAjiQ==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-member-expression-to-functions": {
@@ -309,33 +640,33 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
       "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg=="
     },
-    "@babel/helper-regex": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-regex/-/helper-regex-7.10.5.tgz",
-      "integrity": "sha512-68kdUAzDrljqBrio7DYAEgCoJHxppJOERHOgOrDN7WjOzP0ZQ1LsSDRXcemzVZaLvjaJsJEESb6qt+znNuENDg==",
+    "@babel/helper-remap-async-to-generator": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.12.13.tgz",
+      "integrity": "sha512-Qa6PU9vNcj1NZacZZI1Mvwt+gXDH6CTfgAkSjeRMLE8HxtDK76+YDId6NQR+z7Rgd5arhD2cIbS74r0SxD6PDA==",
       "requires": {
-        "lodash": "^4.17.19"
+        "@babel/helper-annotate-as-pure": "^7.12.13",
+        "@babel/helper-wrap-function": "^7.12.13",
+        "@babel/types": "^7.12.13"
       },
       "dependencies": {
-        "lodash": {
-          "version": "4.17.19",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
-          "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
+        "@babel/helper-validator-identifier": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+          "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+        },
+        "@babel/types": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz",
+          "integrity": "sha512-oKrdZTld2im1z8bDwTOQvUbxKwE+854zc16qWZQlcTqMN00pWxHQ4ZeOq0yDMnisOpRykH2/5Qqcrk/OlbAjiQ==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
         }
       }
     },
-    "@babel/helper-remap-async-to-generator": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.10.4.tgz",
-      "integrity": "sha512-86Lsr6NNw3qTNl+TBcF1oRZMaVzJtbWTyTko+CQL/tvNvcGYEFKbLXDPxtW0HKk3McNOk4KzY55itGWCAGK5tg==",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.10.4",
-        "@babel/helper-wrap-function": "^7.10.4",
-        "@babel/template": "^7.10.4",
-        "@babel/traverse": "^7.10.4",
-        "@babel/types": "^7.10.4"
-      }
-    },
     "@babel/helper-replace-supers": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.10.4.tgz",
@@ -356,6 +687,31 @@
         "@babel/types": "^7.10.4"
       }
     },
+    "@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.12.1.tgz",
+      "integrity": "sha512-Mf5AUuhG1/OCChOJ/HcADmvcHM42WJockombn8ATJG3OnyiSxBK/Mm5x78BQWvmtXZKHgbjdGL2kin/HOLlZGA==",
+      "requires": {
+        "@babel/types": "^7.12.1"
+      },
+      "dependencies": {
+        "@babel/helper-validator-identifier": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+          "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+        },
+        "@babel/types": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz",
+          "integrity": "sha512-oKrdZTld2im1z8bDwTOQvUbxKwE+854zc16qWZQlcTqMN00pWxHQ4ZeOq0yDMnisOpRykH2/5Qqcrk/OlbAjiQ==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
     "@babel/helper-split-export-declaration": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.4.tgz",
@@ -375,24 +731,228 @@
       "integrity": "sha512-YpJabsXlJVWP0USHjnC/AQDTLlZERbON577YUVO/wLpqyj6HAtVYnWaQaN0iUN+1/tWn3c+uKKXjRut5115Y2A=="
     },
     "@babel/helper-wrap-function": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.10.4.tgz",
-      "integrity": "sha512-6py45WvEF0MhiLrdxtRjKjufwLL1/ob2qDJgg5JgNdojBAZSAKnAjkyOCNug6n+OBl4VW76XjvgSFTdaMcW0Ug==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.12.13.tgz",
+      "integrity": "sha512-t0aZFEmBJ1LojdtJnhOaQEVejnzYhyjWHSsNSNo8vOYRbAJNh6r6GQF7pd36SqG7OKGbn+AewVQ/0IfYfIuGdw==",
       "requires": {
-        "@babel/helper-function-name": "^7.10.4",
-        "@babel/template": "^7.10.4",
-        "@babel/traverse": "^7.10.4",
-        "@babel/types": "^7.10.4"
+        "@babel/helper-function-name": "^7.12.13",
+        "@babel/template": "^7.12.13",
+        "@babel/traverse": "^7.12.13",
+        "@babel/types": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
+          "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
+          "requires": {
+            "@babel/highlight": "^7.12.13"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.12.15",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.15.tgz",
+          "integrity": "sha512-6F2xHxBiFXWNSGb7vyCUTBF8RCLY66rS0zEPcP8t/nQyXjha5EuK4z7H5o7fWG8B4M7y6mqVWq1J+1PuwRhecQ==",
+          "requires": {
+            "@babel/types": "^7.12.13",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz",
+          "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==",
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.12.13",
+            "@babel/template": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
+          "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
+          "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+          "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+        },
+        "@babel/highlight": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.12.13.tgz",
+          "integrity": "sha512-kocDQvIbgMKlWxXe9fof3TQ+gkIPOUSEYhJjqUjvKMez3krV7vbzYCDq39Oj11UAVK7JqPVGQPlgE85dPNlQww==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.12.15",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.15.tgz",
+          "integrity": "sha512-AQBOU2Z9kWwSZMd6lNjCX0GUgFonL1wAM1db8L8PMk9UDaGsRCArBkU4Sc+UCM3AE4hjbXx+h58Lb3QT4oRmrA=="
+        },
+        "@babel/template": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
+          "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/parser": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.13.tgz",
+          "integrity": "sha512-3Zb4w7eE/OslI0fTp8c7b286/cQps3+vdLW3UcwC8VSJC6GbKn55aeVVu2QJNuCDoeKyptLOFrPq8WqZZBodyA==",
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/generator": "^7.12.13",
+            "@babel/helper-function-name": "^7.12.13",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/parser": "^7.12.13",
+            "@babel/types": "^7.12.13",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.19"
+          }
+        },
+        "@babel/types": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz",
+          "integrity": "sha512-oKrdZTld2im1z8bDwTOQvUbxKwE+854zc16qWZQlcTqMN00pWxHQ4ZeOq0yDMnisOpRykH2/5Qqcrk/OlbAjiQ==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helpers": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.10.4.tgz",
-      "integrity": "sha512-L2gX/XeUONeEbI78dXSrJzGdz4GQ+ZTA/aazfUsFaWjSe95kiCuOZ5HsXvkiw3iwF+mFHSRUfJU8t6YavocdXA==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.12.13.tgz",
+      "integrity": "sha512-oohVzLRZ3GQEk4Cjhfs9YkJA4TdIDTObdBEZGrd6F/T0GPSnuV6l22eMcxlvcvzVIPH3VTtxbseudM1zIE+rPQ==",
       "requires": {
-        "@babel/template": "^7.10.4",
-        "@babel/traverse": "^7.10.4",
-        "@babel/types": "^7.10.4"
+        "@babel/template": "^7.12.13",
+        "@babel/traverse": "^7.12.13",
+        "@babel/types": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
+          "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
+          "requires": {
+            "@babel/highlight": "^7.12.13"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.12.15",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.15.tgz",
+          "integrity": "sha512-6F2xHxBiFXWNSGb7vyCUTBF8RCLY66rS0zEPcP8t/nQyXjha5EuK4z7H5o7fWG8B4M7y6mqVWq1J+1PuwRhecQ==",
+          "requires": {
+            "@babel/types": "^7.12.13",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz",
+          "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==",
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.12.13",
+            "@babel/template": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
+          "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
+          "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+          "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+        },
+        "@babel/highlight": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.12.13.tgz",
+          "integrity": "sha512-kocDQvIbgMKlWxXe9fof3TQ+gkIPOUSEYhJjqUjvKMez3krV7vbzYCDq39Oj11UAVK7JqPVGQPlgE85dPNlQww==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.12.15",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.15.tgz",
+          "integrity": "sha512-AQBOU2Z9kWwSZMd6lNjCX0GUgFonL1wAM1db8L8PMk9UDaGsRCArBkU4Sc+UCM3AE4hjbXx+h58Lb3QT4oRmrA=="
+        },
+        "@babel/template": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
+          "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/parser": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.13.tgz",
+          "integrity": "sha512-3Zb4w7eE/OslI0fTp8c7b286/cQps3+vdLW3UcwC8VSJC6GbKn55aeVVu2QJNuCDoeKyptLOFrPq8WqZZBodyA==",
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/generator": "^7.12.13",
+            "@babel/helper-function-name": "^7.12.13",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/parser": "^7.12.13",
+            "@babel/types": "^7.12.13",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.19"
+          }
+        },
+        "@babel/types": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz",
+          "integrity": "sha512-oKrdZTld2im1z8bDwTOQvUbxKwE+854zc16qWZQlcTqMN00pWxHQ4ZeOq0yDMnisOpRykH2/5Qqcrk/OlbAjiQ==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/highlight": {
@@ -411,13 +971,20 @@
       "integrity": "sha512-wfryxy4bE1UivvQKSQDU4/X6dr+i8bctjUjj8Zyt3DQy7NtPizJXT8M52nqpNKL+nq2PW8lxk4ZqLj0fD4B4hQ=="
     },
     "@babel/plugin-proposal-async-generator-functions": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.10.5.tgz",
-      "integrity": "sha512-cNMCVezQbrRGvXJwm9fu/1sJj9bHdGAgKodZdLqOQIpfoH3raqmRPBM17+lh7CzhiKRRBrGtZL9WcjxSoGYUSg==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.12.13.tgz",
+      "integrity": "sha512-1KH46Hx4WqP77f978+5Ye/VUbuwQld2hph70yaw2hXS2v7ER2f3nlpNMu909HO2rbvP0NKLlMVDPh9KXklVMhA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/helper-remap-async-to-generator": "^7.10.4",
+        "@babel/helper-plugin-utils": "^7.12.13",
+        "@babel/helper-remap-async-to-generator": "^7.12.13",
         "@babel/plugin-syntax-async-generators": "^7.8.0"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-proposal-class-properties": {
@@ -529,21 +1096,60 @@
       }
     },
     "@babel/plugin-proposal-dynamic-import": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.10.4.tgz",
-      "integrity": "sha512-up6oID1LeidOOASNXgv/CFbgBqTuKJ0cJjz6An5tWD+NVBNlp3VNSBxv2ZdU7SYl3NxJC7agAQDApZusV6uFwQ==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.12.1.tgz",
+      "integrity": "sha512-a4rhUSZFuq5W8/OO8H7BL5zspjnc1FLd9hlOxIK/f7qG4a0qsqk8uvF/ywgBA8/OmjsapjpvaEOYItfGG1qIvQ==",
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4",
         "@babel/plugin-syntax-dynamic-import": "^7.8.0"
       }
     },
-    "@babel/plugin-proposal-json-strings": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.10.4.tgz",
-      "integrity": "sha512-fCL7QF0Jo83uy1K0P2YXrfX11tj3lkpN7l4dMv9Y9VkowkhkQDwFHFd8IiwyK5MZjE8UpbgokkgtcReH88Abaw==",
+    "@babel/plugin-proposal-export-namespace-from": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.12.13.tgz",
+      "integrity": "sha512-INAgtFo4OnLN3Y/j0VwAgw3HDXcDtX+C/erMvWzuV9v71r7urb6iyMXu7eM9IgLr1ElLlOkaHjJ0SbCmdOQ3Iw==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-plugin-utils": "^7.12.13",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
+      }
+    },
+    "@babel/plugin-proposal-json-strings": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.12.13.tgz",
+      "integrity": "sha512-v9eEi4GiORDg8x+Dmi5r8ibOe0VXoKDeNPYcTTxdGN4eOWikrJfDJCJrr1l5gKGvsNyGJbrfMftC2dTL6oz7pg==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13",
         "@babel/plugin-syntax-json-strings": "^7.8.0"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
+      }
+    },
+    "@babel/plugin-proposal-logical-assignment-operators": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.12.13.tgz",
+      "integrity": "sha512-fqmiD3Lz7jVdK6kabeSr1PZlWSUVqSitmHEe3Z00dtGTKieWnX9beafvavc32kjORa5Bai4QNHgFDwWJP+WtSQ==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-proposal-nullish-coalescing-operator": {
@@ -556,31 +1162,52 @@
       }
     },
     "@babel/plugin-proposal-numeric-separator": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.10.4.tgz",
-      "integrity": "sha512-73/G7QoRoeNkLZFxsoCCvlg4ezE4eM+57PnOqgaPOozd5myfj7p0muD1mRVJvbUWbOzD+q3No2bWbaKy+DJ8DA==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.12.13.tgz",
+      "integrity": "sha512-O1jFia9R8BUCl3ZGB7eitaAPu62TXJRHn7rh+ojNERCFyqRwJMTmhz+tJ+k0CwI6CLjX/ee4qW74FSqlq9I35w==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-plugin-utils": "^7.12.13",
         "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-proposal-object-rest-spread": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.10.4.tgz",
-      "integrity": "sha512-6vh4SqRuLLarjgeOf4EaROJAHjvu9Gl+/346PbDH9yWbJyfnJ/ah3jmYKYtswEyCoWZiidvVHjHshd4WgjB9BA==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.12.13.tgz",
+      "integrity": "sha512-WvA1okB/0OS/N3Ldb3sziSrXg6sRphsBgqiccfcQq7woEn5wQLNX82Oc4PlaFcdwcWHuQXAtb8ftbS8Fbsg/sg==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-plugin-utils": "^7.12.13",
         "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
-        "@babel/plugin-transform-parameters": "^7.10.4"
+        "@babel/plugin-transform-parameters": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-proposal-optional-catch-binding": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.10.4.tgz",
-      "integrity": "sha512-LflT6nPh+GK2MnFiKDyLiqSqVHkQnVf7hdoAvyTnnKj9xB3docGRsdPuxp6qqqW19ifK3xgc9U5/FwrSaCNX5g==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.12.13.tgz",
+      "integrity": "sha512-9+MIm6msl9sHWg58NvqpNpLtuFbmpFYk37x8kgnGzAHvX35E1FyAwSUt5hIkSoWJFSAH+iwU8bJ4fcD1zKXOzg==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-plugin-utils": "^7.12.13",
         "@babel/plugin-syntax-optional-catch-binding": "^7.8.0"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-proposal-optional-chaining": {
@@ -593,21 +1220,35 @@
       }
     },
     "@babel/plugin-proposal-private-methods": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.10.4.tgz",
-      "integrity": "sha512-wh5GJleuI8k3emgTg5KkJK6kHNsGEr0uBTDBuQUBJwckk9xs1ez79ioheEVVxMLyPscB0LfkbVHslQqIzWV6Bw==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.12.13.tgz",
+      "integrity": "sha512-sV0V57uUwpauixvR7s2o75LmwJI6JECwm5oPUY5beZB1nBl2i37hc7CJGqB5G+58fur5Y6ugvl3LRONk5x34rg==",
       "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.10.4",
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-create-class-features-plugin": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-proposal-unicode-property-regex": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.10.4.tgz",
-      "integrity": "sha512-H+3fOgPnEXFL9zGYtKQe4IDOPKYlZdF1kqFDQRRb8PK4B8af1vAGK04tF5iQAAsui+mHNBQSAtd2/ndEDe9wuA==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.12.13.tgz",
+      "integrity": "sha512-XyJmZidNfofEkqFV5VC/bLabGmO5QzenPO/YOfGuEbgU+2sSwMmio3YLb4WtBgcmmdwZHyVyv8on77IUjQ5Gvg==",
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.10.4",
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-create-regexp-features-plugin": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-syntax-async-generators": {
@@ -619,11 +1260,18 @@
       }
     },
     "@babel/plugin-syntax-class-properties": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.10.4.tgz",
-      "integrity": "sha512-GCSBF7iUle6rNugfURwNmCGG3Z/2+opxAMLs1nND4bhEG5PuxTIggDBoeYYSujAlLtsupzOHYJQgPS3pivwXIA==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-syntax-dynamic-import": {
@@ -634,6 +1282,14 @@
         "@babel/helper-plugin-utils": "^7.8.0"
       }
     },
+    "@babel/plugin-syntax-export-namespace-from": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.3"
+      }
+    },
     "@babel/plugin-syntax-flow": {
       "version": "7.12.1",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.12.1.tgz",
@@ -650,6 +1306,14 @@
         "@babel/helper-plugin-utils": "^7.8.0"
       }
     },
+    "@babel/plugin-syntax-logical-assignment-operators": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
     "@babel/plugin-syntax-nullish-coalescing-operator": {
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
@@ -691,11 +1355,18 @@
       }
     },
     "@babel/plugin-syntax-top-level-await": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.10.4.tgz",
-      "integrity": "sha512-ni1brg4lXEmWyafKr0ccFWkJG0CeMt4WV1oyeBW6EFObF4oOHclbkj5cARxAPQyAQ2UTuplJyK4nfkXIMMFvsQ==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.12.13.tgz",
+      "integrity": "sha512-A81F9pDwyS7yM//KwbCSDqy3Uj4NMIurtplxphWxoYtNPov7cJsDkAFNNyVlIZ3jwGycVsurZ+LtOA8gZ376iQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-syntax-typescript": {
@@ -707,94 +1378,313 @@
       }
     },
     "@babel/plugin-transform-arrow-functions": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.10.4.tgz",
-      "integrity": "sha512-9J/oD1jV0ZCBcgnoFWFq1vJd4msoKb/TCpGNFyyLt0zABdcvgK3aYikZ8HjzB14c26bc7E3Q1yugpwGy2aTPNA==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.12.13.tgz",
+      "integrity": "sha512-tBtuN6qtCTd+iHzVZVOMNp+L04iIJBpqkdY42tWbmjIT5wvR2kx7gxMBsyhQtFzHwBbyGi9h8J8r9HgnOpQHxg==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-transform-async-to-generator": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.10.4.tgz",
-      "integrity": "sha512-F6nREOan7J5UXTLsDsZG3DXmZSVofr2tGNwfdrVwkDWHfQckbQXnXSPfD7iO+c/2HGqycwyLST3DnZ16n+cBJQ==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.12.13.tgz",
+      "integrity": "sha512-psM9QHcHaDr+HZpRuJcE1PXESuGWSCcbiGFFhhwfzdbTxaGDVzuVtdNYliAwcRo3GFg0Bc8MmI+AvIGYIJG04A==",
       "requires": {
-        "@babel/helper-module-imports": "^7.10.4",
-        "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/helper-remap-async-to-generator": "^7.10.4"
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.12.13",
+        "@babel/helper-remap-async-to-generator": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-module-imports": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.13.tgz",
+          "integrity": "sha512-NGmfvRp9Rqxy0uHSSVP+SRIW1q31a7Ji10cLBcqSDUngGentY4FRiHOFZFE1CLU5eiL0oE8reH7Tg1y99TDM/g==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+          "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+        },
+        "@babel/types": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz",
+          "integrity": "sha512-oKrdZTld2im1z8bDwTOQvUbxKwE+854zc16qWZQlcTqMN00pWxHQ4ZeOq0yDMnisOpRykH2/5Qqcrk/OlbAjiQ==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/plugin-transform-block-scoped-functions": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.10.4.tgz",
-      "integrity": "sha512-WzXDarQXYYfjaV1szJvN3AD7rZgZzC1JtjJZ8dMHUyiK8mxPRahynp14zzNjU3VkPqPsO38CzxiWO1c9ARZ8JA==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.12.13.tgz",
+      "integrity": "sha512-zNyFqbc3kI/fVpqwfqkg6RvBgFpC4J18aKKMmv7KdQ/1GgREapSJAykLMVNwfRGO3BtHj3YQZl8kxCXPcVMVeg==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-transform-block-scoping": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.10.5.tgz",
-      "integrity": "sha512-6Ycw3hjpQti0qssQcA6AMSFDHeNJ++R6dIMnpRqUjFeBBTmTDPa8zgF90OVfTvAo11mXZTlVUViY1g8ffrURLg==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.12.13.tgz",
+      "integrity": "sha512-Pxwe0iqWJX4fOOM2kEZeUuAxHMWb9nK+9oh5d11bsLoB0xMg+mkDpt0eYuDZB7ETrY9bbcVlKUGTOGWy7BHsMQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-transform-classes": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.10.4.tgz",
-      "integrity": "sha512-2oZ9qLjt161dn1ZE0Ms66xBncQH4In8Sqw1YWgBUZuGVJJS5c0OFZXL6dP2MRHrkU/eKhWg8CzFJhRQl50rQxA==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.12.13.tgz",
+      "integrity": "sha512-cqZlMlhCC1rVnxE5ZGMtIb896ijL90xppMiuWXcwcOAuFczynpd3KYemb91XFFPi3wJSe/OcrX9lXoowatkkxA==",
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.10.4",
-        "@babel/helper-define-map": "^7.10.4",
-        "@babel/helper-function-name": "^7.10.4",
-        "@babel/helper-optimise-call-expression": "^7.10.4",
-        "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/helper-replace-supers": "^7.10.4",
-        "@babel/helper-split-export-declaration": "^7.10.4",
+        "@babel/helper-annotate-as-pure": "^7.12.13",
+        "@babel/helper-function-name": "^7.12.13",
+        "@babel/helper-optimise-call-expression": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.12.13",
+        "@babel/helper-replace-supers": "^7.12.13",
+        "@babel/helper-split-export-declaration": "^7.12.13",
         "globals": "^11.1.0"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
+          "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
+          "requires": {
+            "@babel/highlight": "^7.12.13"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.12.15",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.15.tgz",
+          "integrity": "sha512-6F2xHxBiFXWNSGb7vyCUTBF8RCLY66rS0zEPcP8t/nQyXjha5EuK4z7H5o7fWG8B4M7y6mqVWq1J+1PuwRhecQ==",
+          "requires": {
+            "@babel/types": "^7.12.13",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz",
+          "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==",
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.12.13",
+            "@babel/template": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
+          "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-member-expression-to-functions": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.13.tgz",
+          "integrity": "sha512-B+7nN0gIL8FZ8SvMcF+EPyB21KnCcZHQZFczCxbiNGV/O0rsrSBlWGLzmtBJ3GMjSVMIm4lpFhR+VdVBuIsUcQ==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-optimise-call-expression": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz",
+          "integrity": "sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.12.13.tgz",
+          "integrity": "sha512-pctAOIAMVStI2TMLhozPKbf5yTEXc0OJa0eENheb4w09SrgOWEs+P4nTOZYJQCqs8JlErGLDPDJTiGIp3ygbLg==",
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.12.13",
+            "@babel/helper-optimise-call-expression": "^7.12.13",
+            "@babel/traverse": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
+          "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+          "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+        },
+        "@babel/highlight": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.12.13.tgz",
+          "integrity": "sha512-kocDQvIbgMKlWxXe9fof3TQ+gkIPOUSEYhJjqUjvKMez3krV7vbzYCDq39Oj11UAVK7JqPVGQPlgE85dPNlQww==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.12.15",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.15.tgz",
+          "integrity": "sha512-AQBOU2Z9kWwSZMd6lNjCX0GUgFonL1wAM1db8L8PMk9UDaGsRCArBkU4Sc+UCM3AE4hjbXx+h58Lb3QT4oRmrA=="
+        },
+        "@babel/template": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
+          "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/parser": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.13.tgz",
+          "integrity": "sha512-3Zb4w7eE/OslI0fTp8c7b286/cQps3+vdLW3UcwC8VSJC6GbKn55aeVVu2QJNuCDoeKyptLOFrPq8WqZZBodyA==",
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/generator": "^7.12.13",
+            "@babel/helper-function-name": "^7.12.13",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/parser": "^7.12.13",
+            "@babel/types": "^7.12.13",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.19"
+          }
+        },
+        "@babel/types": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz",
+          "integrity": "sha512-oKrdZTld2im1z8bDwTOQvUbxKwE+854zc16qWZQlcTqMN00pWxHQ4ZeOq0yDMnisOpRykH2/5Qqcrk/OlbAjiQ==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/plugin-transform-computed-properties": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.10.4.tgz",
-      "integrity": "sha512-JFwVDXcP/hM/TbyzGq3l/XWGut7p46Z3QvqFMXTfk6/09m7xZHJUN9xHfsv7vqqD4YnfI5ueYdSJtXqqBLyjBw==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.12.13.tgz",
+      "integrity": "sha512-dDfuROUPGK1mTtLKyDPUavmj2b6kFu82SmgpztBFEO974KMjJT+Ytj3/oWsTUMBmgPcp9J5Pc1SlcAYRpJ2hRA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-transform-destructuring": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.10.4.tgz",
-      "integrity": "sha512-+WmfvyfsyF603iPa6825mq6Qrb7uLjTOsa3XOFzlYcYDHSS4QmpOWOL0NNBY5qMbvrcf3tq0Cw+v4lxswOBpgA==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.12.13.tgz",
+      "integrity": "sha512-Dn83KykIFzjhA3FDPA1z4N+yfF3btDGhjnJwxIj0T43tP0flCujnU8fKgEkf0C1biIpSv9NZegPBQ1J6jYkwvQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-transform-dotall-regex": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.10.4.tgz",
-      "integrity": "sha512-ZEAVvUTCMlMFAbASYSVQoxIbHm2OkG2MseW6bV2JjIygOjdVv8tuxrCTzj1+Rynh7ODb8GivUy7dzEXzEhuPaA==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.12.13.tgz",
+      "integrity": "sha512-foDrozE65ZFdUC2OfgeOCrEPTxdB3yjqxpXh8CH+ipd9CHd4s/iq81kcUpyH8ACGNEPdFqbtzfgzbT/ZGlbDeQ==",
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.10.4",
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-create-regexp-features-plugin": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-transform-duplicate-keys": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.10.4.tgz",
-      "integrity": "sha512-GL0/fJnmgMclHiBTTWXNlYjYsA7rDrtsazHG6mglaGSTh0KsrW04qml+Bbz9FL0LcJIRwBWL5ZqlNHKTkU3xAA==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.12.13.tgz",
+      "integrity": "sha512-NfADJiiHdhLBW3pulJlJI2NB0t4cci4WTZ8FtdIuNc2+8pslXdPtRRAEWqUY+m9kNOk2eRYbTAOipAxlrOcwwQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.10.4.tgz",
-      "integrity": "sha512-S5HgLVgkBcRdyQAHbKj+7KyuWx8C6t5oETmUuwz1pt3WTWJhsUV0WIIXuVvfXMxl/QQyHKlSCNNtaIamG8fysw==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.12.13.tgz",
+      "integrity": "sha512-fbUelkM1apvqez/yYx1/oICVnGo2KM5s63mhGylrmXUxK/IAXSIf87QIxVfZldWf4QsOafY6vV3bX8aMHSvNrA==",
       "requires": {
-        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.10.4",
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-transform-flow-strip-types": {
@@ -807,46 +1697,306 @@
       }
     },
     "@babel/plugin-transform-for-of": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.10.4.tgz",
-      "integrity": "sha512-ItdQfAzu9AlEqmusA/65TqJ79eRcgGmpPPFvBnGILXZH975G0LNjP1yjHvGgfuCxqrPPueXOPe+FsvxmxKiHHQ==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.12.13.tgz",
+      "integrity": "sha512-xCbdgSzXYmHGyVX3+BsQjcd4hv4vA/FDy7Kc8eOpzKmBBPEOTurt0w5fCRQaGl+GSBORKgJdstQ1rHl4jbNseQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-transform-function-name": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.10.4.tgz",
-      "integrity": "sha512-OcDCq2y5+E0dVD5MagT5X+yTRbcvFjDI2ZVAottGH6tzqjx/LKpgkUepu3hp/u4tZBzxxpNGwLsAvGBvQ2mJzg==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.12.13.tgz",
+      "integrity": "sha512-6K7gZycG0cmIwwF7uMK/ZqeCikCGVBdyP2J5SKNCXO5EOHcqi+z7Jwf8AmyDNcBgxET8DrEtCt/mPKPyAzXyqQ==",
       "requires": {
-        "@babel/helper-function-name": "^7.10.4",
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-function-name": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
+          "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
+          "requires": {
+            "@babel/highlight": "^7.12.13"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz",
+          "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==",
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.12.13",
+            "@babel/template": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
+          "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+          "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+        },
+        "@babel/highlight": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.12.13.tgz",
+          "integrity": "sha512-kocDQvIbgMKlWxXe9fof3TQ+gkIPOUSEYhJjqUjvKMez3krV7vbzYCDq39Oj11UAVK7JqPVGQPlgE85dPNlQww==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.12.15",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.15.tgz",
+          "integrity": "sha512-AQBOU2Z9kWwSZMd6lNjCX0GUgFonL1wAM1db8L8PMk9UDaGsRCArBkU4Sc+UCM3AE4hjbXx+h58Lb3QT4oRmrA=="
+        },
+        "@babel/template": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
+          "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/parser": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/types": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz",
+          "integrity": "sha512-oKrdZTld2im1z8bDwTOQvUbxKwE+854zc16qWZQlcTqMN00pWxHQ4ZeOq0yDMnisOpRykH2/5Qqcrk/OlbAjiQ==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/plugin-transform-literals": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.10.4.tgz",
-      "integrity": "sha512-Xd/dFSTEVuUWnyZiMu76/InZxLTYilOSr1UlHV+p115Z/Le2Fi1KXkJUYz0b42DfndostYlPub3m8ZTQlMaiqQ==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.12.13.tgz",
+      "integrity": "sha512-FW+WPjSR7hiUxMcKqyNjP05tQ2kmBCdpEpZHY1ARm96tGQCCBvXKnpjILtDplUnJ/eHZ0lALLM+d2lMFSpYJrQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-transform-member-expression-literals": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.10.4.tgz",
-      "integrity": "sha512-0bFOvPyAoTBhtcJLr9VcwZqKmSjFml1iVxvPL0ReomGU53CX53HsM4h2SzckNdkQcHox1bpAqzxBI1Y09LlBSw==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.12.13.tgz",
+      "integrity": "sha512-kxLkOsg8yir4YeEPHLuO2tXP9R/gTjpuTOjshqSpELUN3ZAg2jfDnKUvzzJxObun38sw3wm4Uu69sX/zA7iRvg==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-transform-modules-amd": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.10.5.tgz",
-      "integrity": "sha512-elm5uruNio7CTLFItVC/rIzKLfQ17+fX7EVz5W0TMgIHFo1zY0Ozzx+lgwhL4plzl8OzVn6Qasx5DeEFyoNiRw==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.12.13.tgz",
+      "integrity": "sha512-JHLOU0o81m5UqG0Ulz/fPC68/v+UTuGTWaZBUwpEk1fYQ1D9LfKV6MPn4ttJKqRo5Lm460fkzjLTL4EHvCprvA==",
       "requires": {
-        "@babel/helper-module-transforms": "^7.10.5",
-        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-module-transforms": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.12.13",
         "babel-plugin-dynamic-import-node": "^2.3.3"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
+          "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
+          "requires": {
+            "@babel/highlight": "^7.12.13"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.12.15",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.15.tgz",
+          "integrity": "sha512-6F2xHxBiFXWNSGb7vyCUTBF8RCLY66rS0zEPcP8t/nQyXjha5EuK4z7H5o7fWG8B4M7y6mqVWq1J+1PuwRhecQ==",
+          "requires": {
+            "@babel/types": "^7.12.13",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz",
+          "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==",
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.12.13",
+            "@babel/template": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
+          "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-member-expression-to-functions": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.13.tgz",
+          "integrity": "sha512-B+7nN0gIL8FZ8SvMcF+EPyB21KnCcZHQZFczCxbiNGV/O0rsrSBlWGLzmtBJ3GMjSVMIm4lpFhR+VdVBuIsUcQ==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-module-imports": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.13.tgz",
+          "integrity": "sha512-NGmfvRp9Rqxy0uHSSVP+SRIW1q31a7Ji10cLBcqSDUngGentY4FRiHOFZFE1CLU5eiL0oE8reH7Tg1y99TDM/g==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.12.13.tgz",
+          "integrity": "sha512-acKF7EjqOR67ASIlDTupwkKM1eUisNAjaSduo5Cz+793ikfnpe7p4Q7B7EWU2PCoSTPWsQkR7hRUWEIZPiVLGA==",
+          "requires": {
+            "@babel/helper-module-imports": "^7.12.13",
+            "@babel/helper-replace-supers": "^7.12.13",
+            "@babel/helper-simple-access": "^7.12.13",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "@babel/template": "^7.12.13",
+            "@babel/traverse": "^7.12.13",
+            "@babel/types": "^7.12.13",
+            "lodash": "^4.17.19"
+          }
+        },
+        "@babel/helper-optimise-call-expression": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz",
+          "integrity": "sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.12.13.tgz",
+          "integrity": "sha512-pctAOIAMVStI2TMLhozPKbf5yTEXc0OJa0eENheb4w09SrgOWEs+P4nTOZYJQCqs8JlErGLDPDJTiGIp3ygbLg==",
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.12.13",
+            "@babel/helper-optimise-call-expression": "^7.12.13",
+            "@babel/traverse": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-simple-access": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.12.13.tgz",
+          "integrity": "sha512-0ski5dyYIHEfwpWGx5GPWhH35j342JaflmCeQmsPWcrOQDtCN6C1zKAVRFVbK53lPW2c9TsuLLSUDf0tIGJ5hA==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
+          "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+          "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+        },
+        "@babel/highlight": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.12.13.tgz",
+          "integrity": "sha512-kocDQvIbgMKlWxXe9fof3TQ+gkIPOUSEYhJjqUjvKMez3krV7vbzYCDq39Oj11UAVK7JqPVGQPlgE85dPNlQww==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.12.15",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.15.tgz",
+          "integrity": "sha512-AQBOU2Z9kWwSZMd6lNjCX0GUgFonL1wAM1db8L8PMk9UDaGsRCArBkU4Sc+UCM3AE4hjbXx+h58Lb3QT4oRmrA=="
+        },
+        "@babel/template": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
+          "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/parser": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.13.tgz",
+          "integrity": "sha512-3Zb4w7eE/OslI0fTp8c7b286/cQps3+vdLW3UcwC8VSJC6GbKn55aeVVu2QJNuCDoeKyptLOFrPq8WqZZBodyA==",
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/generator": "^7.12.13",
+            "@babel/helper-function-name": "^7.12.13",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/parser": "^7.12.13",
+            "@babel/types": "^7.12.13",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.19"
+          }
+        },
+        "@babel/types": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz",
+          "integrity": "sha512-oKrdZTld2im1z8bDwTOQvUbxKwE+854zc16qWZQlcTqMN00pWxHQ4ZeOq0yDMnisOpRykH2/5Qqcrk/OlbAjiQ==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/plugin-transform-modules-commonjs": {
@@ -861,123 +2011,651 @@
       }
     },
     "@babel/plugin-transform-modules-systemjs": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.10.5.tgz",
-      "integrity": "sha512-f4RLO/OL14/FP1AEbcsWMzpbUz6tssRaeQg11RH1BP/XnPpRoVwgeYViMFacnkaw4k4wjRSjn3ip1Uw9TaXuMw==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.12.13.tgz",
+      "integrity": "sha512-aHfVjhZ8QekaNF/5aNdStCGzwTbU7SI5hUybBKlMzqIMC7w7Ho8hx5a4R/DkTHfRfLwHGGxSpFt9BfxKCoXKoA==",
       "requires": {
-        "@babel/helper-hoist-variables": "^7.10.4",
-        "@babel/helper-module-transforms": "^7.10.5",
-        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-hoist-variables": "^7.12.13",
+        "@babel/helper-module-transforms": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.12.13",
+        "@babel/helper-validator-identifier": "^7.12.11",
         "babel-plugin-dynamic-import-node": "^2.3.3"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
+          "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
+          "requires": {
+            "@babel/highlight": "^7.12.13"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.12.15",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.15.tgz",
+          "integrity": "sha512-6F2xHxBiFXWNSGb7vyCUTBF8RCLY66rS0zEPcP8t/nQyXjha5EuK4z7H5o7fWG8B4M7y6mqVWq1J+1PuwRhecQ==",
+          "requires": {
+            "@babel/types": "^7.12.13",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz",
+          "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==",
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.12.13",
+            "@babel/template": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
+          "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-member-expression-to-functions": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.13.tgz",
+          "integrity": "sha512-B+7nN0gIL8FZ8SvMcF+EPyB21KnCcZHQZFczCxbiNGV/O0rsrSBlWGLzmtBJ3GMjSVMIm4lpFhR+VdVBuIsUcQ==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-module-imports": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.13.tgz",
+          "integrity": "sha512-NGmfvRp9Rqxy0uHSSVP+SRIW1q31a7Ji10cLBcqSDUngGentY4FRiHOFZFE1CLU5eiL0oE8reH7Tg1y99TDM/g==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.12.13.tgz",
+          "integrity": "sha512-acKF7EjqOR67ASIlDTupwkKM1eUisNAjaSduo5Cz+793ikfnpe7p4Q7B7EWU2PCoSTPWsQkR7hRUWEIZPiVLGA==",
+          "requires": {
+            "@babel/helper-module-imports": "^7.12.13",
+            "@babel/helper-replace-supers": "^7.12.13",
+            "@babel/helper-simple-access": "^7.12.13",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "@babel/template": "^7.12.13",
+            "@babel/traverse": "^7.12.13",
+            "@babel/types": "^7.12.13",
+            "lodash": "^4.17.19"
+          }
+        },
+        "@babel/helper-optimise-call-expression": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz",
+          "integrity": "sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.12.13.tgz",
+          "integrity": "sha512-pctAOIAMVStI2TMLhozPKbf5yTEXc0OJa0eENheb4w09SrgOWEs+P4nTOZYJQCqs8JlErGLDPDJTiGIp3ygbLg==",
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.12.13",
+            "@babel/helper-optimise-call-expression": "^7.12.13",
+            "@babel/traverse": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-simple-access": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.12.13.tgz",
+          "integrity": "sha512-0ski5dyYIHEfwpWGx5GPWhH35j342JaflmCeQmsPWcrOQDtCN6C1zKAVRFVbK53lPW2c9TsuLLSUDf0tIGJ5hA==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
+          "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+          "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+        },
+        "@babel/highlight": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.12.13.tgz",
+          "integrity": "sha512-kocDQvIbgMKlWxXe9fof3TQ+gkIPOUSEYhJjqUjvKMez3krV7vbzYCDq39Oj11UAVK7JqPVGQPlgE85dPNlQww==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.12.15",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.15.tgz",
+          "integrity": "sha512-AQBOU2Z9kWwSZMd6lNjCX0GUgFonL1wAM1db8L8PMk9UDaGsRCArBkU4Sc+UCM3AE4hjbXx+h58Lb3QT4oRmrA=="
+        },
+        "@babel/template": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
+          "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/parser": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.13.tgz",
+          "integrity": "sha512-3Zb4w7eE/OslI0fTp8c7b286/cQps3+vdLW3UcwC8VSJC6GbKn55aeVVu2QJNuCDoeKyptLOFrPq8WqZZBodyA==",
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/generator": "^7.12.13",
+            "@babel/helper-function-name": "^7.12.13",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/parser": "^7.12.13",
+            "@babel/types": "^7.12.13",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.19"
+          }
+        },
+        "@babel/types": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz",
+          "integrity": "sha512-oKrdZTld2im1z8bDwTOQvUbxKwE+854zc16qWZQlcTqMN00pWxHQ4ZeOq0yDMnisOpRykH2/5Qqcrk/OlbAjiQ==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/plugin-transform-modules-umd": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.10.4.tgz",
-      "integrity": "sha512-mohW5q3uAEt8T45YT7Qc5ws6mWgJAaL/8BfWD9Dodo1A3RKWli8wTS+WiQ/knF+tXlPirW/1/MqzzGfCExKECA==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.12.13.tgz",
+      "integrity": "sha512-BgZndyABRML4z6ibpi7Z98m4EVLFI9tVsZDADC14AElFaNHHBcJIovflJ6wtCqFxwy2YJ1tJhGRsr0yLPKoN+w==",
       "requires": {
-        "@babel/helper-module-transforms": "^7.10.4",
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-module-transforms": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
+          "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
+          "requires": {
+            "@babel/highlight": "^7.12.13"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.12.15",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.15.tgz",
+          "integrity": "sha512-6F2xHxBiFXWNSGb7vyCUTBF8RCLY66rS0zEPcP8t/nQyXjha5EuK4z7H5o7fWG8B4M7y6mqVWq1J+1PuwRhecQ==",
+          "requires": {
+            "@babel/types": "^7.12.13",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz",
+          "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==",
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.12.13",
+            "@babel/template": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
+          "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-member-expression-to-functions": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.13.tgz",
+          "integrity": "sha512-B+7nN0gIL8FZ8SvMcF+EPyB21KnCcZHQZFczCxbiNGV/O0rsrSBlWGLzmtBJ3GMjSVMIm4lpFhR+VdVBuIsUcQ==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-module-imports": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.13.tgz",
+          "integrity": "sha512-NGmfvRp9Rqxy0uHSSVP+SRIW1q31a7Ji10cLBcqSDUngGentY4FRiHOFZFE1CLU5eiL0oE8reH7Tg1y99TDM/g==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.12.13.tgz",
+          "integrity": "sha512-acKF7EjqOR67ASIlDTupwkKM1eUisNAjaSduo5Cz+793ikfnpe7p4Q7B7EWU2PCoSTPWsQkR7hRUWEIZPiVLGA==",
+          "requires": {
+            "@babel/helper-module-imports": "^7.12.13",
+            "@babel/helper-replace-supers": "^7.12.13",
+            "@babel/helper-simple-access": "^7.12.13",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "@babel/template": "^7.12.13",
+            "@babel/traverse": "^7.12.13",
+            "@babel/types": "^7.12.13",
+            "lodash": "^4.17.19"
+          }
+        },
+        "@babel/helper-optimise-call-expression": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz",
+          "integrity": "sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.12.13.tgz",
+          "integrity": "sha512-pctAOIAMVStI2TMLhozPKbf5yTEXc0OJa0eENheb4w09SrgOWEs+P4nTOZYJQCqs8JlErGLDPDJTiGIp3ygbLg==",
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.12.13",
+            "@babel/helper-optimise-call-expression": "^7.12.13",
+            "@babel/traverse": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-simple-access": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.12.13.tgz",
+          "integrity": "sha512-0ski5dyYIHEfwpWGx5GPWhH35j342JaflmCeQmsPWcrOQDtCN6C1zKAVRFVbK53lPW2c9TsuLLSUDf0tIGJ5hA==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
+          "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+          "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+        },
+        "@babel/highlight": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.12.13.tgz",
+          "integrity": "sha512-kocDQvIbgMKlWxXe9fof3TQ+gkIPOUSEYhJjqUjvKMez3krV7vbzYCDq39Oj11UAVK7JqPVGQPlgE85dPNlQww==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.12.15",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.15.tgz",
+          "integrity": "sha512-AQBOU2Z9kWwSZMd6lNjCX0GUgFonL1wAM1db8L8PMk9UDaGsRCArBkU4Sc+UCM3AE4hjbXx+h58Lb3QT4oRmrA=="
+        },
+        "@babel/template": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
+          "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/parser": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.13.tgz",
+          "integrity": "sha512-3Zb4w7eE/OslI0fTp8c7b286/cQps3+vdLW3UcwC8VSJC6GbKn55aeVVu2QJNuCDoeKyptLOFrPq8WqZZBodyA==",
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/generator": "^7.12.13",
+            "@babel/helper-function-name": "^7.12.13",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/parser": "^7.12.13",
+            "@babel/types": "^7.12.13",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.19"
+          }
+        },
+        "@babel/types": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz",
+          "integrity": "sha512-oKrdZTld2im1z8bDwTOQvUbxKwE+854zc16qWZQlcTqMN00pWxHQ4ZeOq0yDMnisOpRykH2/5Qqcrk/OlbAjiQ==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.10.4.tgz",
-      "integrity": "sha512-V6LuOnD31kTkxQPhKiVYzYC/Jgdq53irJC/xBSmqcNcqFGV+PER4l6rU5SH2Vl7bH9mLDHcc0+l9HUOe4RNGKA==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.12.13.tgz",
+      "integrity": "sha512-Xsm8P2hr5hAxyYblrfACXpQKdQbx4m2df9/ZZSQ8MAhsadw06+jW7s9zsSw6he+mJZXRlVMyEnVktJo4zjk1WA==",
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.10.4"
+        "@babel/helper-create-regexp-features-plugin": "^7.12.13"
       }
     },
     "@babel/plugin-transform-new-target": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.10.4.tgz",
-      "integrity": "sha512-YXwWUDAH/J6dlfwqlWsztI2Puz1NtUAubXhOPLQ5gjR/qmQ5U96DY4FQO8At33JN4XPBhrjB8I4eMmLROjjLjw==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.12.13.tgz",
+      "integrity": "sha512-/KY2hbLxrG5GTQ9zzZSc3xWiOy379pIETEhbtzwZcw9rvuaVV4Fqy7BYGYOWZnaoXIQYbbJ0ziXLa/sKcGCYEQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-transform-object-super": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.10.4.tgz",
-      "integrity": "sha512-5iTw0JkdRdJvr7sY0vHqTpnruUpTea32JHmq/atIWqsnNussbRzjEDyWep8UNztt1B5IusBYg8Irb0bLbiEBCQ==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.12.13.tgz",
+      "integrity": "sha512-JzYIcj3XtYspZDV8j9ulnoMPZZnF/Cj0LUxPOjR89BdBVx+zYJI9MdMIlUZjbXDX+6YVeS6I3e8op+qQ3BYBoQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/helper-replace-supers": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.12.13",
+        "@babel/helper-replace-supers": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
+          "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
+          "requires": {
+            "@babel/highlight": "^7.12.13"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.12.15",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.15.tgz",
+          "integrity": "sha512-6F2xHxBiFXWNSGb7vyCUTBF8RCLY66rS0zEPcP8t/nQyXjha5EuK4z7H5o7fWG8B4M7y6mqVWq1J+1PuwRhecQ==",
+          "requires": {
+            "@babel/types": "^7.12.13",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz",
+          "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==",
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.12.13",
+            "@babel/template": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
+          "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-member-expression-to-functions": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.13.tgz",
+          "integrity": "sha512-B+7nN0gIL8FZ8SvMcF+EPyB21KnCcZHQZFczCxbiNGV/O0rsrSBlWGLzmtBJ3GMjSVMIm4lpFhR+VdVBuIsUcQ==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-optimise-call-expression": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz",
+          "integrity": "sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.12.13.tgz",
+          "integrity": "sha512-pctAOIAMVStI2TMLhozPKbf5yTEXc0OJa0eENheb4w09SrgOWEs+P4nTOZYJQCqs8JlErGLDPDJTiGIp3ygbLg==",
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.12.13",
+            "@babel/helper-optimise-call-expression": "^7.12.13",
+            "@babel/traverse": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
+          "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+          "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+        },
+        "@babel/highlight": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.12.13.tgz",
+          "integrity": "sha512-kocDQvIbgMKlWxXe9fof3TQ+gkIPOUSEYhJjqUjvKMez3krV7vbzYCDq39Oj11UAVK7JqPVGQPlgE85dPNlQww==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.12.15",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.15.tgz",
+          "integrity": "sha512-AQBOU2Z9kWwSZMd6lNjCX0GUgFonL1wAM1db8L8PMk9UDaGsRCArBkU4Sc+UCM3AE4hjbXx+h58Lb3QT4oRmrA=="
+        },
+        "@babel/template": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
+          "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/parser": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.13.tgz",
+          "integrity": "sha512-3Zb4w7eE/OslI0fTp8c7b286/cQps3+vdLW3UcwC8VSJC6GbKn55aeVVu2QJNuCDoeKyptLOFrPq8WqZZBodyA==",
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/generator": "^7.12.13",
+            "@babel/helper-function-name": "^7.12.13",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/parser": "^7.12.13",
+            "@babel/types": "^7.12.13",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.19"
+          }
+        },
+        "@babel/types": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz",
+          "integrity": "sha512-oKrdZTld2im1z8bDwTOQvUbxKwE+854zc16qWZQlcTqMN00pWxHQ4ZeOq0yDMnisOpRykH2/5Qqcrk/OlbAjiQ==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/plugin-transform-parameters": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.10.5.tgz",
-      "integrity": "sha512-xPHwUj5RdFV8l1wuYiu5S9fqWGM2DrYc24TMvUiRrPVm+SM3XeqU9BcokQX/kEUe+p2RBwy+yoiR1w/Blq6ubw==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.12.13.tgz",
+      "integrity": "sha512-e7QqwZalNiBRHCpJg/P8s/VJeSRYgmtWySs1JwvfwPqhBbiWfOcHDKdeAi6oAyIimoKWBlwc8oTgbZHdhCoVZA==",
       "requires": {
-        "@babel/helper-get-function-arity": "^7.10.4",
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-transform-property-literals": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.10.4.tgz",
-      "integrity": "sha512-ofsAcKiUxQ8TY4sScgsGeR2vJIsfrzqvFb9GvJ5UdXDzl+MyYCaBj/FGzXuv7qE0aJcjWMILny1epqelnFlz8g==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.12.13.tgz",
+      "integrity": "sha512-nqVigwVan+lR+g8Fj8Exl0UQX2kymtjcWfMOYM1vTYEKujeyv2SkMgazf2qNcK7l4SDiKyTA/nHCPqL4e2zo1A==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-transform-regenerator": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.10.4.tgz",
-      "integrity": "sha512-3thAHwtor39A7C04XucbMg17RcZ3Qppfxr22wYzZNcVIkPHfpM9J0SO8zuCV6SZa265kxBJSrfKTvDCYqBFXGw==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.12.13.tgz",
+      "integrity": "sha512-lxb2ZAvSLyJ2PEe47hoGWPmW22v7CtSl9jW8mingV4H2sEX/JOcrAj2nPuGWi56ERUm2bUpjKzONAuT6HCn2EA==",
       "requires": {
         "regenerator-transform": "^0.14.2"
       }
     },
     "@babel/plugin-transform-reserved-words": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.10.4.tgz",
-      "integrity": "sha512-hGsw1O6Rew1fkFbDImZIEqA8GoidwTAilwCyWqLBM9f+e/u/sQMQu7uX6dyokfOayRuuVfKOW4O7HvaBWM+JlQ==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.12.13.tgz",
+      "integrity": "sha512-xhUPzDXxZN1QfiOy/I5tyye+TRz6lA7z6xaT4CLOjPRMVg1ldRf0LHw0TDBpYL4vG78556WuHdyO9oi5UmzZBg==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-transform-shorthand-properties": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.10.4.tgz",
-      "integrity": "sha512-AC2K/t7o07KeTIxMoHneyX90v3zkm5cjHJEokrPEAGEy3UCp8sLKfnfOIGdZ194fyN4wfX/zZUWT9trJZ0qc+Q==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.12.13.tgz",
+      "integrity": "sha512-xpL49pqPnLtf0tVluuqvzWIgLEhuPpZzvs2yabUHSKRNlN7ScYU7aMlmavOeyXJZKgZKQRBlh8rHbKiJDraTSw==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-transform-spread": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.10.4.tgz",
-      "integrity": "sha512-1e/51G/Ni+7uH5gktbWv+eCED9pP8ZpRhZB3jOaI3mmzfvJTWHkuyYTv0Z5PYtyM+Tr2Ccr9kUdQxn60fI5WuQ==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.12.13.tgz",
+      "integrity": "sha512-dUCrqPIowjqk5pXsx1zPftSq4sT0aCeZVAxhdgs3AMgyaDmoUT0G+5h3Dzja27t76aUEIJWlFgPJqJ/d4dbTtg==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.12.13",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.12.1"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-transform-sticky-regex": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.10.4.tgz",
-      "integrity": "sha512-Ddy3QZfIbEV0VYcVtFDCjeE4xwVTJWTmUtorAJkn6u/92Z/nWJNV+mILyqHKrUxXYKA2EoCilgoPePymKL4DvQ==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.12.13.tgz",
+      "integrity": "sha512-Jc3JSaaWT8+fr7GRvQP02fKDsYk4K/lYwWq38r/UGfaxo89ajud321NH28KRQ7xy1Ybc0VUE5Pz8psjNNDUglg==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/helper-regex": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-transform-template-literals": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.10.5.tgz",
-      "integrity": "sha512-V/lnPGIb+KT12OQikDvgSuesRX14ck5FfJXt6+tXhdkJ+Vsd0lDCVtF6jcB4rNClYFzaB2jusZ+lNISDk2mMMw==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.12.13.tgz",
+      "integrity": "sha512-arIKlWYUgmNsF28EyfmiQHJLJFlAJNYkuQO10jL46ggjBpeb2re1P9K9YGxNJB45BqTbaslVysXDYm/g3sN/Qg==",
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.10.4",
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-transform-typeof-symbol": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.10.4.tgz",
-      "integrity": "sha512-QqNgYwuuW0y0H+kUE/GWSR45t/ccRhe14Fs/4ZRouNNQsyd4o3PG4OtHiIrepbM2WKUBDAXKCAK/Lk4VhzTaGA==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.12.13.tgz",
+      "integrity": "sha512-eKv/LmUJpMnu4npgfvs3LiHhJua5fo/CysENxa45YCQXZwKnGCQKAg87bvoqSW1fFT+HA32l03Qxsm8ouTY3ZQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-transform-typescript": {
@@ -1075,91 +2753,317 @@
       }
     },
     "@babel/plugin-transform-unicode-escapes": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.10.4.tgz",
-      "integrity": "sha512-y5XJ9waMti2J+e7ij20e+aH+fho7Wb7W8rNuu72aKRwCHFqQdhkdU2lo3uZ9tQuboEJcUFayXdARhcxLQ3+6Fg==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.12.13.tgz",
+      "integrity": "sha512-0bHEkdwJ/sN/ikBHfSmOXPypN/beiGqjo+o4/5K+vxEFNPRPdImhviPakMKG4x96l85emoa0Z6cDflsdBusZbw==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/plugin-transform-unicode-regex": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.10.4.tgz",
-      "integrity": "sha512-wNfsc4s8N2qnIwpO/WP2ZiSyjfpTamT2C9V9FDH/Ljub9zw6P3SjkXcFmc0RQUt96k2fmIvtla2MMjgTwIAC+A==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.12.13.tgz",
+      "integrity": "sha512-mDRzSNY7/zopwisPZ5kM9XKCfhchqIYwAKRERtEnhYscZB79VRekuRSoYbN0+KVe3y8+q1h6A4svXtP7N+UoCA==",
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.10.4",
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-create-regexp-features-plugin": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        }
       }
     },
     "@babel/preset-env": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.10.4.tgz",
-      "integrity": "sha512-tcmuQ6vupfMZPrLrc38d0sF2OjLT3/bZ0dry5HchNCQbrokoQi4reXqclvkkAT5b+gWc23meVWpve5P/7+w/zw==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.12.13.tgz",
+      "integrity": "sha512-JUVlizG8SoFTz4LmVUL8++aVwzwxcvey3N0j1tRbMAXVEy95uQ/cnEkmEKHN00Bwq4voAV3imQGnQvpkLAxsrw==",
       "requires": {
-        "@babel/compat-data": "^7.10.4",
-        "@babel/helper-compilation-targets": "^7.10.4",
-        "@babel/helper-module-imports": "^7.10.4",
-        "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/plugin-proposal-async-generator-functions": "^7.10.4",
-        "@babel/plugin-proposal-class-properties": "^7.10.4",
-        "@babel/plugin-proposal-dynamic-import": "^7.10.4",
-        "@babel/plugin-proposal-json-strings": "^7.10.4",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
-        "@babel/plugin-proposal-numeric-separator": "^7.10.4",
-        "@babel/plugin-proposal-object-rest-spread": "^7.10.4",
-        "@babel/plugin-proposal-optional-catch-binding": "^7.10.4",
-        "@babel/plugin-proposal-optional-chaining": "^7.10.4",
-        "@babel/plugin-proposal-private-methods": "^7.10.4",
-        "@babel/plugin-proposal-unicode-property-regex": "^7.10.4",
+        "@babel/compat-data": "^7.12.13",
+        "@babel/helper-compilation-targets": "^7.12.13",
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/helper-plugin-utils": "^7.12.13",
+        "@babel/helper-validator-option": "^7.12.11",
+        "@babel/plugin-proposal-async-generator-functions": "^7.12.13",
+        "@babel/plugin-proposal-class-properties": "^7.12.13",
+        "@babel/plugin-proposal-dynamic-import": "^7.12.1",
+        "@babel/plugin-proposal-export-namespace-from": "^7.12.13",
+        "@babel/plugin-proposal-json-strings": "^7.12.13",
+        "@babel/plugin-proposal-logical-assignment-operators": "^7.12.13",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.13",
+        "@babel/plugin-proposal-numeric-separator": "^7.12.13",
+        "@babel/plugin-proposal-object-rest-spread": "^7.12.13",
+        "@babel/plugin-proposal-optional-catch-binding": "^7.12.13",
+        "@babel/plugin-proposal-optional-chaining": "^7.12.13",
+        "@babel/plugin-proposal-private-methods": "^7.12.13",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.12.13",
         "@babel/plugin-syntax-async-generators": "^7.8.0",
-        "@babel/plugin-syntax-class-properties": "^7.10.4",
+        "@babel/plugin-syntax-class-properties": "^7.12.13",
         "@babel/plugin-syntax-dynamic-import": "^7.8.0",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
         "@babel/plugin-syntax-json-strings": "^7.8.0",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0",
         "@babel/plugin-syntax-numeric-separator": "^7.10.4",
         "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
         "@babel/plugin-syntax-optional-catch-binding": "^7.8.0",
         "@babel/plugin-syntax-optional-chaining": "^7.8.0",
-        "@babel/plugin-syntax-top-level-await": "^7.10.4",
-        "@babel/plugin-transform-arrow-functions": "^7.10.4",
-        "@babel/plugin-transform-async-to-generator": "^7.10.4",
-        "@babel/plugin-transform-block-scoped-functions": "^7.10.4",
-        "@babel/plugin-transform-block-scoping": "^7.10.4",
-        "@babel/plugin-transform-classes": "^7.10.4",
-        "@babel/plugin-transform-computed-properties": "^7.10.4",
-        "@babel/plugin-transform-destructuring": "^7.10.4",
-        "@babel/plugin-transform-dotall-regex": "^7.10.4",
-        "@babel/plugin-transform-duplicate-keys": "^7.10.4",
-        "@babel/plugin-transform-exponentiation-operator": "^7.10.4",
-        "@babel/plugin-transform-for-of": "^7.10.4",
-        "@babel/plugin-transform-function-name": "^7.10.4",
-        "@babel/plugin-transform-literals": "^7.10.4",
-        "@babel/plugin-transform-member-expression-literals": "^7.10.4",
-        "@babel/plugin-transform-modules-amd": "^7.10.4",
-        "@babel/plugin-transform-modules-commonjs": "^7.10.4",
-        "@babel/plugin-transform-modules-systemjs": "^7.10.4",
-        "@babel/plugin-transform-modules-umd": "^7.10.4",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.10.4",
-        "@babel/plugin-transform-new-target": "^7.10.4",
-        "@babel/plugin-transform-object-super": "^7.10.4",
-        "@babel/plugin-transform-parameters": "^7.10.4",
-        "@babel/plugin-transform-property-literals": "^7.10.4",
-        "@babel/plugin-transform-regenerator": "^7.10.4",
-        "@babel/plugin-transform-reserved-words": "^7.10.4",
-        "@babel/plugin-transform-shorthand-properties": "^7.10.4",
-        "@babel/plugin-transform-spread": "^7.10.4",
-        "@babel/plugin-transform-sticky-regex": "^7.10.4",
-        "@babel/plugin-transform-template-literals": "^7.10.4",
-        "@babel/plugin-transform-typeof-symbol": "^7.10.4",
-        "@babel/plugin-transform-unicode-escapes": "^7.10.4",
-        "@babel/plugin-transform-unicode-regex": "^7.10.4",
+        "@babel/plugin-syntax-top-level-await": "^7.12.13",
+        "@babel/plugin-transform-arrow-functions": "^7.12.13",
+        "@babel/plugin-transform-async-to-generator": "^7.12.13",
+        "@babel/plugin-transform-block-scoped-functions": "^7.12.13",
+        "@babel/plugin-transform-block-scoping": "^7.12.13",
+        "@babel/plugin-transform-classes": "^7.12.13",
+        "@babel/plugin-transform-computed-properties": "^7.12.13",
+        "@babel/plugin-transform-destructuring": "^7.12.13",
+        "@babel/plugin-transform-dotall-regex": "^7.12.13",
+        "@babel/plugin-transform-duplicate-keys": "^7.12.13",
+        "@babel/plugin-transform-exponentiation-operator": "^7.12.13",
+        "@babel/plugin-transform-for-of": "^7.12.13",
+        "@babel/plugin-transform-function-name": "^7.12.13",
+        "@babel/plugin-transform-literals": "^7.12.13",
+        "@babel/plugin-transform-member-expression-literals": "^7.12.13",
+        "@babel/plugin-transform-modules-amd": "^7.12.13",
+        "@babel/plugin-transform-modules-commonjs": "^7.12.13",
+        "@babel/plugin-transform-modules-systemjs": "^7.12.13",
+        "@babel/plugin-transform-modules-umd": "^7.12.13",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.12.13",
+        "@babel/plugin-transform-new-target": "^7.12.13",
+        "@babel/plugin-transform-object-super": "^7.12.13",
+        "@babel/plugin-transform-parameters": "^7.12.13",
+        "@babel/plugin-transform-property-literals": "^7.12.13",
+        "@babel/plugin-transform-regenerator": "^7.12.13",
+        "@babel/plugin-transform-reserved-words": "^7.12.13",
+        "@babel/plugin-transform-shorthand-properties": "^7.12.13",
+        "@babel/plugin-transform-spread": "^7.12.13",
+        "@babel/plugin-transform-sticky-regex": "^7.12.13",
+        "@babel/plugin-transform-template-literals": "^7.12.13",
+        "@babel/plugin-transform-typeof-symbol": "^7.12.13",
+        "@babel/plugin-transform-unicode-escapes": "^7.12.13",
+        "@babel/plugin-transform-unicode-regex": "^7.12.13",
         "@babel/preset-modules": "^0.1.3",
-        "@babel/types": "^7.10.4",
-        "browserslist": "^4.12.0",
-        "core-js-compat": "^3.6.2",
-        "invariant": "^2.2.2",
-        "levenary": "^1.1.1",
+        "@babel/types": "^7.12.13",
+        "core-js-compat": "^3.8.0",
         "semver": "^5.5.0"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
+          "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
+          "requires": {
+            "@babel/highlight": "^7.12.13"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.12.15",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.15.tgz",
+          "integrity": "sha512-6F2xHxBiFXWNSGb7vyCUTBF8RCLY66rS0zEPcP8t/nQyXjha5EuK4z7H5o7fWG8B4M7y6mqVWq1J+1PuwRhecQ==",
+          "requires": {
+            "@babel/types": "^7.12.13",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz",
+          "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==",
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.12.13",
+            "@babel/template": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
+          "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-member-expression-to-functions": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.13.tgz",
+          "integrity": "sha512-B+7nN0gIL8FZ8SvMcF+EPyB21KnCcZHQZFczCxbiNGV/O0rsrSBlWGLzmtBJ3GMjSVMIm4lpFhR+VdVBuIsUcQ==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-module-imports": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.13.tgz",
+          "integrity": "sha512-NGmfvRp9Rqxy0uHSSVP+SRIW1q31a7Ji10cLBcqSDUngGentY4FRiHOFZFE1CLU5eiL0oE8reH7Tg1y99TDM/g==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.12.13.tgz",
+          "integrity": "sha512-acKF7EjqOR67ASIlDTupwkKM1eUisNAjaSduo5Cz+793ikfnpe7p4Q7B7EWU2PCoSTPWsQkR7hRUWEIZPiVLGA==",
+          "requires": {
+            "@babel/helper-module-imports": "^7.12.13",
+            "@babel/helper-replace-supers": "^7.12.13",
+            "@babel/helper-simple-access": "^7.12.13",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "@babel/template": "^7.12.13",
+            "@babel/traverse": "^7.12.13",
+            "@babel/types": "^7.12.13",
+            "lodash": "^4.17.19"
+          }
+        },
+        "@babel/helper-optimise-call-expression": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz",
+          "integrity": "sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+          "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA=="
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.12.13.tgz",
+          "integrity": "sha512-pctAOIAMVStI2TMLhozPKbf5yTEXc0OJa0eENheb4w09SrgOWEs+P4nTOZYJQCqs8JlErGLDPDJTiGIp3ygbLg==",
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.12.13",
+            "@babel/helper-optimise-call-expression": "^7.12.13",
+            "@babel/traverse": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-simple-access": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.12.13.tgz",
+          "integrity": "sha512-0ski5dyYIHEfwpWGx5GPWhH35j342JaflmCeQmsPWcrOQDtCN6C1zKAVRFVbK53lPW2c9TsuLLSUDf0tIGJ5hA==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
+          "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
+          "requires": {
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+          "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+        },
+        "@babel/helper-validator-option": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.12.11.tgz",
+          "integrity": "sha512-TBFCyj939mFSdeX7U7DDj32WtzYY7fDcalgq8v3fBZMNOJQNn7nOYzMaUCiPxPYfCup69mtIpqlKgMZLvQ8Xhw=="
+        },
+        "@babel/highlight": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.12.13.tgz",
+          "integrity": "sha512-kocDQvIbgMKlWxXe9fof3TQ+gkIPOUSEYhJjqUjvKMez3krV7vbzYCDq39Oj11UAVK7JqPVGQPlgE85dPNlQww==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.12.15",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.15.tgz",
+          "integrity": "sha512-AQBOU2Z9kWwSZMd6lNjCX0GUgFonL1wAM1db8L8PMk9UDaGsRCArBkU4Sc+UCM3AE4hjbXx+h58Lb3QT4oRmrA=="
+        },
+        "@babel/plugin-proposal-class-properties": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.12.13.tgz",
+          "integrity": "sha512-8SCJ0Ddrpwv4T7Gwb33EmW1V9PY5lggTO+A8WjyIwxrSHDUyBw4MtF96ifn1n8H806YlxbVCoKXbbmzD6RD+cA==",
+          "requires": {
+            "@babel/helper-create-class-features-plugin": "^7.12.13",
+            "@babel/helper-plugin-utils": "^7.12.13"
+          }
+        },
+        "@babel/plugin-proposal-nullish-coalescing-operator": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.12.13.tgz",
+          "integrity": "sha512-Qoxpy+OxhDBI5kRqliJFAl4uWXk3Bn24WeFstPH0iLymFehSAUR8MHpqU7njyXv/qbo7oN6yTy5bfCmXdKpo1Q==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.12.13",
+            "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0"
+          }
+        },
+        "@babel/plugin-proposal-optional-chaining": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.12.13.tgz",
+          "integrity": "sha512-0ZwjGfTcnZqyV3y9DSD1Yk3ebp+sIUpT2YDqP8hovzaNZnQq2Kd7PEqa6iOIUDBXBt7Jl3P7YAcEIL5Pz8u09Q==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.12.13",
+            "@babel/helper-skip-transparent-expression-wrappers": "^7.12.1",
+            "@babel/plugin-syntax-optional-chaining": "^7.8.0"
+          }
+        },
+        "@babel/plugin-transform-modules-commonjs": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.12.13.tgz",
+          "integrity": "sha512-OGQoeVXVi1259HjuoDnsQMlMkT9UkZT9TpXAsqWplS/M0N1g3TJAn/ByOCeQu7mfjc5WpSsRU+jV1Hd89ts0kQ==",
+          "requires": {
+            "@babel/helper-module-transforms": "^7.12.13",
+            "@babel/helper-plugin-utils": "^7.12.13",
+            "@babel/helper-simple-access": "^7.12.13",
+            "babel-plugin-dynamic-import-node": "^2.3.3"
+          }
+        },
+        "@babel/template": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
+          "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/parser": "^7.12.13",
+            "@babel/types": "^7.12.13"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.13.tgz",
+          "integrity": "sha512-3Zb4w7eE/OslI0fTp8c7b286/cQps3+vdLW3UcwC8VSJC6GbKn55aeVVu2QJNuCDoeKyptLOFrPq8WqZZBodyA==",
+          "requires": {
+            "@babel/code-frame": "^7.12.13",
+            "@babel/generator": "^7.12.13",
+            "@babel/helper-function-name": "^7.12.13",
+            "@babel/helper-split-export-declaration": "^7.12.13",
+            "@babel/parser": "^7.12.13",
+            "@babel/types": "^7.12.13",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.19"
+          }
+        },
+        "@babel/types": {
+          "version": "7.12.13",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz",
+          "integrity": "sha512-oKrdZTld2im1z8bDwTOQvUbxKwE+854zc16qWZQlcTqMN00pWxHQ4ZeOq0yDMnisOpRykH2/5Qqcrk/OlbAjiQ==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/preset-flow": {
@@ -1172,9 +3076,9 @@
       }
     },
     "@babel/preset-modules": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.3.tgz",
-      "integrity": "sha512-Ra3JXOHBq2xd56xSF7lMKXdjBn3T772Y1Wet3yWnkDly9zHvJki029tAFzvAAK5cf4YV3yoxuP61crYRol6SVg==",
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.4.tgz",
+      "integrity": "sha512-J36NhwnfdzpmH41M1DrnkkgAqhZaqr/NBdPfQ677mLzlaXo+oDiv1deyCDtgAhz8p328otdob0Du7+xgHGZbKg==",
       "requires": {
         "@babel/helper-plugin-utils": "^7.0.0",
         "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
@@ -2454,9 +4358,9 @@
       }
     },
     "@types/json-schema": {
-      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.5.tgz",
-      "integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==",
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz",
+      "integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==",
       "dev": true
     },
     "@types/keygrip": {
@@ -2487,6 +4391,12 @@
         "@types/koa": "*"
       }
     },
+    "@types/lodash": {
+      "version": "4.14.168",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.168.tgz",
+      "integrity": "sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q==",
+      "dev": true
+    },
     "@types/long": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz",
@@ -4436,22 +6346,21 @@
       "integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg=="
     },
     "babel-loader": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz",
-      "integrity": "sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==",
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.2.tgz",
+      "integrity": "sha512-JvTd0/D889PQBtUXJ2PXaKU/pjZDMtHA9V2ecm+eNRmmBCMR09a+fmpGTNwnJtFmFl5Ei7Vy47LjBb+L0wQ99g==",
       "dev": true,
       "requires": {
-        "find-cache-dir": "^2.1.0",
+        "find-cache-dir": "^3.3.1",
         "loader-utils": "^1.4.0",
-        "mkdirp": "^0.5.3",
-        "pify": "^4.0.1",
+        "make-dir": "^3.1.0",
         "schema-utils": "^2.6.5"
       },
       "dependencies": {
         "ajv": {
-          "version": "6.12.3",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.3.tgz",
-          "integrity": "sha512-4K0cK3L1hsqk9xIb2z9vs/XU+PGJZ9PNpJRDS9YLzmNdX6jmVPfamLvTJr0aDAusnHyCHO6MjzlkAsgtqp9teA==",
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
           "dev": true,
           "requires": {
             "fast-deep-equal": "^3.1.1",
@@ -4460,6 +6369,12 @@
             "uri-js": "^4.2.2"
           }
         },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "dev": true
+        },
         "emojis-list": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
@@ -4472,6 +6387,27 @@
           "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
           "dev": true
         },
+        "find-cache-dir": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
+          "integrity": "sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==",
+          "dev": true,
+          "requires": {
+            "commondir": "^1.0.1",
+            "make-dir": "^3.0.2",
+            "pkg-dir": "^4.1.0"
+          }
+        },
+        "find-up": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^5.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
         "json5": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
@@ -4492,36 +6428,85 @@
             "json5": "^1.0.1"
           }
         },
-        "mkdirp": {
-          "version": "0.5.5",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
-          "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+        "locate-path": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
           "dev": true,
           "requires": {
-            "minimist": "^1.2.5"
-          },
-          "dependencies": {
-            "minimist": {
-              "version": "1.2.5",
-              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-              "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-              "dev": true
-            }
+            "p-locate": "^4.1.0"
+          }
+        },
+        "make-dir": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+          "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+          "dev": true,
+          "requires": {
+            "semver": "^6.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.2.0"
+          }
+        },
+        "path-exists": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+          "dev": true
+        },
+        "pkg-dir": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+          "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+          "dev": true,
+          "requires": {
+            "find-up": "^4.0.0"
           }
         },
         "schema-utils": {
-          "version": "2.7.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
-          "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+          "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
           "dev": true,
           "requires": {
-            "@types/json-schema": "^7.0.4",
-            "ajv": "^6.12.2",
-            "ajv-keywords": "^3.4.1"
+            "@types/json-schema": "^7.0.5",
+            "ajv": "^6.12.4",
+            "ajv-keywords": "^3.5.2"
           }
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
         }
       }
     },
+    "babel-messages": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz",
+      "integrity": "sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=",
+      "dev": true,
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-check-es2015-constants": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz",
+      "integrity": "sha1-NRV7EBQm/S/9PaP3XH0ekYNbv4o=",
+      "dev": true,
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
     "babel-plugin-dynamic-import-node": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
@@ -4530,6 +6515,152 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-plugin-transform-es2015-arrow-functions": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz",
+      "integrity": "sha1-RSaSy3EdX3ncf4XkQM5BufJE0iE=",
+      "dev": true,
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-plugin-transform-es2015-block-scoping": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.26.0.tgz",
+      "integrity": "sha1-1w9SmcEwjQXBL0Y4E7CgnnOxiV8=",
+      "dev": true,
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "babel-template": "^6.26.0",
+        "babel-traverse": "^6.26.0",
+        "babel-types": "^6.26.0",
+        "lodash": "^4.17.4"
+      }
+    },
+    "babel-plugin-transform-es2015-template-literals": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.22.0.tgz",
+      "integrity": "sha1-qEs0UPfp+PH2g51taH2oS7EjbY0=",
+      "dev": true,
+      "requires": {
+        "babel-runtime": "^6.22.0"
+      }
+    },
+    "babel-preset-es2020": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/babel-preset-es2020/-/babel-preset-es2020-1.0.2.tgz",
+      "integrity": "sha1-SJJyypyLH8pZss/EsqL6sC7t63k=",
+      "dev": true,
+      "requires": {
+        "babel-plugin-check-es2015-constants": "^6.8.0",
+        "babel-plugin-transform-es2015-arrow-functions": "^6.8.0",
+        "babel-plugin-transform-es2015-block-scoping": "^6.9.0",
+        "babel-plugin-transform-es2015-template-literals": "^6.8.0"
+      }
+    },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "dev": true,
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+          "dev": true
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
+          "dev": true
+        }
+      }
+    },
+    "babel-template": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-template/-/babel-template-6.26.0.tgz",
+      "integrity": "sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=",
+      "dev": true,
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "babel-traverse": "^6.26.0",
+        "babel-types": "^6.26.0",
+        "babylon": "^6.18.0",
+        "lodash": "^4.17.4"
+      }
+    },
+    "babel-traverse": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-traverse/-/babel-traverse-6.26.0.tgz",
+      "integrity": "sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=",
+      "dev": true,
+      "requires": {
+        "babel-code-frame": "^6.26.0",
+        "babel-messages": "^6.23.0",
+        "babel-runtime": "^6.26.0",
+        "babel-types": "^6.26.0",
+        "babylon": "^6.18.0",
+        "debug": "^2.6.8",
+        "globals": "^9.18.0",
+        "invariant": "^2.2.2",
+        "lodash": "^4.17.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "globals": {
+          "version": "9.18.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
+          "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==",
+          "dev": true
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
+    "babel-types": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz",
+      "integrity": "sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=",
+      "dev": true,
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "esutils": "^2.0.2",
+        "lodash": "^4.17.4",
+        "to-fast-properties": "^1.0.3"
+      },
+      "dependencies": {
+        "to-fast-properties": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz",
+          "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=",
+          "dev": true
+        }
+      }
+    },
+    "babylon": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+      "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
+      "dev": true
+    },
     "backo2": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
@@ -5034,20 +7165,21 @@
       }
     },
     "browserslist": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.13.0.tgz",
-      "integrity": "sha512-MINatJ5ZNrLnQ6blGvePd/QOz9Xtu+Ne+x29iQSCHfkU5BugKVJwZKn/iiL8UbpIpa3JhviKjz+XxMo0m2caFQ==",
+      "version": "4.16.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.3.tgz",
+      "integrity": "sha512-vIyhWmIkULaq04Gt93txdh+j02yX/JzlyhLYbV3YQCn/zvES3JnY7TifHHvvr1w5hTDluNKMkV05cs4vy8Q7sw==",
       "requires": {
-        "caniuse-lite": "^1.0.30001093",
-        "electron-to-chromium": "^1.3.488",
-        "escalade": "^3.0.1",
-        "node-releases": "^1.1.58"
+        "caniuse-lite": "^1.0.30001181",
+        "colorette": "^1.2.1",
+        "electron-to-chromium": "^1.3.649",
+        "escalade": "^3.1.1",
+        "node-releases": "^1.1.70"
       },
       "dependencies": {
         "electron-to-chromium": {
-          "version": "1.3.509",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.509.tgz",
-          "integrity": "sha512-cN4lkjNRuTG8rtAqTOVgwpecEC2kbKA04PG6YijcKGHK/kD0xLjiqExcAOmLUwtXZRF8cBeam2I0VZcih919Ug=="
+          "version": "1.3.657",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.657.tgz",
+          "integrity": "sha512-/9ROOyvEflEbaZFUeGofD+Tqs/WynbSTbNgNF+/TJJxH1ePD/e6VjZlDJpW3FFFd3nj5l3Hd8ki2vRwy+gyRFw=="
         }
       }
     },
@@ -5325,9 +7457,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001105",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001105.tgz",
-      "integrity": "sha512-JupOe6+dGMr7E20siZHIZQwYqrllxotAhiaej96y6x00b/48rPt42o+SzOSCPbrpsDWvRja40Hwrj0g0q6LZJg=="
+      "version": "1.0.30001185",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001185.tgz",
+      "integrity": "sha512-Fpi4kVNtNvJ15H0F6vwmXtb3tukv3Zg3qhKkOGUq7KJ1J6b9kf4dnNgtEAFXhRsJo0gNj9W60+wBvn0JcTvdTg=="
     },
     "capital-case": {
       "version": "1.0.4",
@@ -5995,6 +8127,11 @@
         "color-name": "^1.0.0"
       }
     },
+    "colorette": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz",
+      "integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw=="
+    },
     "colormin": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/colormin/-/colormin-1.1.2.tgz",
@@ -6357,11 +8494,11 @@
       "integrity": "sha512-W2VYNB0nwQQE7tKS7HzXd7r2y/y2SVJl4ga6oH/dnaLFzM0o2lB2P3zCkWj5Wc/zyMYjtgd5Hmhk0ObkQFZOIA=="
     },
     "core-js-compat": {
-      "version": "3.6.5",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.6.5.tgz",
-      "integrity": "sha512-7ItTKOhOZbznhXAQ2g/slGg1PJV5zDO/WdkTwi7UEOJmkvsE32PWvx6mKtDjiMpjnR2CNf6BAD6sSxIlv7ptng==",
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.8.3.tgz",
+      "integrity": "sha512-1sCb0wBXnBIL16pfFG1Gkvei6UzvKyTNYpiC41yrdjEv0UoJoq9E/abTMzyYJ6JpTkAj15dLjbqifIzEBDVvog==",
       "requires": {
-        "browserslist": "^4.8.5",
+        "browserslist": "^4.16.1",
         "semver": "7.0.0"
       },
       "dependencies": {
@@ -7429,9 +9566,9 @@
       "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
     },
     "escalade": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.0.2.tgz",
-      "integrity": "sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ=="
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
     },
     "escape-html": {
       "version": "1.0.3",
@@ -8268,9 +10405,9 @@
       }
     },
     "gensync": {
-      "version": "1.0.0-beta.1",
-      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.1.tgz",
-      "integrity": "sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg=="
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="
     },
     "get-caller-file": {
       "version": "2.0.5",
@@ -9167,6 +11304,7 @@
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
       "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dev": true,
       "requires": {
         "loose-envify": "^1.0.0"
       }
@@ -9720,14 +11858,6 @@
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
       "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A=="
     },
-    "levenary": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/levenary/-/levenary-1.1.1.tgz",
-      "integrity": "sha512-mkAdOIt79FD6irqjYSs4rdbnlT5vRonMEvBVPVb3XmevfS8kgRXwfes0dhPdEtzTWD/1eNE/Bm/G1iRt6DcnQQ==",
-      "requires": {
-        "leven": "^3.1.0"
-      }
-    },
     "lines-and-columns": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
@@ -10081,6 +12211,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
       "requires": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
@@ -10724,9 +12855,9 @@
       }
     },
     "node-releases": {
-      "version": "1.1.60",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.60.tgz",
-      "integrity": "sha512-gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA=="
+      "version": "1.1.70",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.70.tgz",
+      "integrity": "sha512-Slf2s69+2/uAD79pVVQo8uSiC34+g8GWY8UH2Qtqv34ZfhYrxpYpfzs9Js9d6O0mbDmALuxaTlplnBTnSELcrw=="
     },
     "node-sass": {
       "version": "4.14.1",
@@ -12719,9 +14850,9 @@
       }
     },
     "regexpu-core": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.0.tgz",
-      "integrity": "sha512-TQ4KXRnIn6tz6tjnrXEkD/sshygKH/j5KzK86X8MkeHyZ8qst/LZ89j3X4/8HEIfHANTFIP/AbXakeRhWIl5YQ==",
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.1.tgz",
+      "integrity": "sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==",
       "requires": {
         "regenerate": "^1.4.0",
         "regenerate-unicode-properties": "^8.2.0",
@@ -12754,9 +14885,9 @@
       "integrity": "sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A=="
     },
     "regjsparser": {
-      "version": "0.6.4",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.4.tgz",
-      "integrity": "sha512-64O87/dPDgfk8/RQqC4gkZoGyyWFIEUTTh80CU6CWuK5vkCGyekIx+oKcEIYtP/RAxSQltCZHCNu/mdd7fqlJw==",
+      "version": "0.6.7",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.7.tgz",
+      "integrity": "sha512-ib77G0uxsA2ovgiYbCVGx4Pv3PSttAx2vIwidqQzbL2U5S4Q+j00HdSAneSBuyVcMvEnTXMjiGgB+DlXozVhpQ==",
       "requires": {
         "jsesc": "~0.5.0"
       },
diff --git a/package.json b/package.json
index 877f600..93678d9 100644
--- a/package.json
+++ b/package.json
@@ -37,12 +37,14 @@
     "vuex-webextensions": "^1.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.10.5",
+    "@babel/core": "^7.12.13",
     "@babel/plugin-proposal-optional-chaining": "^7.10.4",
-    "@babel/preset-env": "^7.10.4",
+    "@babel/preset-env": "^7.12.13",
+    "@types/lodash": "^4.14.168",
     "@vue/compiler-sfc": "^3.0.3",
     "archiver": "^3.0.0",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^8.2.2",
+    "babel-preset-es2020": "^1.0.2",
     "copy-webpack-plugin": "^4.5.3",
     "cross-env": "^5.2.0",
     "css-loader": "^0.28.11",

From d9053e26b5117132c5589ee6b0dfc877019f49a9 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Mon, 8 Feb 2021 22:45:41 +0100
Subject: [PATCH 32/68] update configs

---
 .babelrc          | 6 +++---
 tsconfig.json     | 2 +-
 webpack.config.js | 3 ++-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/.babelrc b/.babelrc
index eb5b0c1..fdc0cc0 100644
--- a/.babelrc
+++ b/.babelrc
@@ -6,9 +6,9 @@
     ["@babel/preset-env", {
       "useBuiltIns": false,
       "targets": {
-        "esmodules": true,
-      },
-    }],
+        "esmodules": true
+      }
+    }]
   ]
 }
 // {
diff --git a/tsconfig.json b/tsconfig.json
index 8ee3397..f73287b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "outDir": "./ts-out",
     "allowJs": true,
-    "target": "es2020"
+    "target": "es2018"
   },
   "include": [ "./src/**/*" ]
 }
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 380794c..aa5dbf3 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -35,8 +35,9 @@ const config = {
   module: {
     rules: [
       { 
-        test: /\.tsx?$/,
+        test: /\.ts$/,
         loader: 'ts-loader',
+        exclude: /node_modules/
       },
       {
         test: /\.vue$/,

From ee3ccef0e4b18d7374ba42173447f5f6fa85068d Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Mon, 8 Feb 2021 22:45:51 +0100
Subject: [PATCH 33/68] Migrate first batch to typescript

---
 .../{PlayerData.js => PlayerData.ts}          | 32 ++++++-
 .../video-data/{VideoData.js => VideoData.ts} | 50 ++++++++---
 .../{Resizer.js => Resizer.ts}                | 85 ++++++++++++-------
 .../{Stretcher.js => Stretcher.ts}            | 23 ++++-
 .../lib/video-transform/{Zoom.js => Zoom.ts}  | 29 +++++--
 5 files changed, 164 insertions(+), 55 deletions(-)
 rename src/ext/lib/video-data/{PlayerData.js => PlayerData.ts} (96%)
 rename src/ext/lib/video-data/{VideoData.js => VideoData.ts} (95%)
 rename src/ext/lib/video-transform/{Resizer.js => Resizer.ts} (93%)
 rename src/ext/lib/video-transform/{Stretcher.js => Stretcher.ts} (96%)
 rename src/ext/lib/video-transform/{Zoom.js => Zoom.ts} (78%)

diff --git a/src/ext/lib/video-data/PlayerData.js b/src/ext/lib/video-data/PlayerData.ts
similarity index 96%
rename from src/ext/lib/video-data/PlayerData.js
rename to src/ext/lib/video-data/PlayerData.ts
index 3c5fda5..e289a40 100644
--- a/src/ext/lib/video-data/PlayerData.js
+++ b/src/ext/lib/video-data/PlayerData.ts
@@ -4,8 +4,11 @@ import AspectRatio from '../../../common/enums/aspect-ratio.enum';
 import PlayerNotificationUi from '../uwui/PlayerNotificationUI';
 import PlayerUi from '../uwui/PlayerUI';
 import BrowserDetect from '../../conf/BrowserDetect';
-import _ from 'lodash';
+import * as _ from 'lodash';
 import { sleep } from '../../../common/js/utils';
+import VideoData from './VideoData';
+import Settings from '../Settings';
+import Logger from '../Logger';
 
 if (process.env.CHANNEL !== 'stable'){
   console.info("Loading: PlayerData.js");
@@ -40,6 +43,31 @@ if (process.env.CHANNEL !== 'stable'){
 
 class PlayerData {
   
+  //#region helper objects
+  logger: Logger;
+  videoData: VideoData;
+  settings: Settings;
+  notificationService: PlayerNotificationUi;
+  //#endregion
+
+  //#region HTML objects
+  video: any;
+  element: any;
+  overlayNode: any;
+  //#endregion
+
+  //#region flags
+  invalid: boolean = false;
+  private periodicallyRefreshPlayerElement: boolean = false;
+  halted: boolean = true;
+
+  //#region misc stuff
+  extensionMode: any;
+  dimensions: any;
+  private playerIdElement: any;
+  private observer: MutationObserver;
+  //#endregion
+
   constructor(videoData) {
     try {
       this.logger = videoData.logger;
@@ -84,7 +112,7 @@ class PlayerData {
   }
 
   
-  onPlayerDimensionsChanged(mutationList, observer) {
+  onPlayerDimensionsChanged(mutationList?, observer?) {
     if (this?.checkPlayerSizeChange()) {
       this.videoData.resizer.restore();
     }
diff --git a/src/ext/lib/video-data/VideoData.js b/src/ext/lib/video-data/VideoData.ts
similarity index 95%
rename from src/ext/lib/video-data/VideoData.js
rename to src/ext/lib/video-data/VideoData.ts
index 9454a08..36664a1 100644
--- a/src/ext/lib/video-data/VideoData.js
+++ b/src/ext/lib/video-data/VideoData.ts
@@ -3,11 +3,43 @@ import PlayerData from './PlayerData';
 import Resizer from '../video-transform/Resizer';
 import ArDetector from '../ar-detect/ArDetector';
 import AspectRatio from '../../../common/enums/aspect-ratio.enum';
-import _ from 'lodash';
+import * as _ from 'lodash';
 import BrowserDetect from '../../conf/BrowserDetect';
+import Logger from '../Logger';
+import Settings from '../Settings';
+import PageInfo from './PageInfo';
+import { sleep } from '../../../common/js/utils';
 
 class VideoData {
-  
+  //#region flags
+  arSetupComplete: boolean = false;
+  destroyed: boolean = false;
+  invalid: boolean = false;
+  videoStatusOk: boolean = false;
+  videoLoaded: boolean = false;
+  videoDimensionsLoaded: boolean = false;
+  paused: boolean = false;
+  //#endregion
+
+  //#region misc stuff
+  vdid: string;
+  video: any;
+  observer: MutationObserver;
+  extensionMode: any;
+  userCssClassName: string;
+  validationId: number;
+  dimensions: any;
+  //#endregion
+
+  //#region helper objects
+  logger: Logger;
+  settings: Settings;
+  pageInfo: PageInfo;
+  player: PlayerData;
+  resizer: Resizer;
+  arDetector: ArDetector;
+  //#endregion
+
 
   constructor(video, settings, pageInfo){
     this.vdid = (Math.random()*100).toFixed();
@@ -267,7 +299,8 @@ class VideoData {
     if (this.pageInfo.defaultCrop) {
       this.resizer.setAr(this.pageInfo.defaultCrop);
     } else {
-      this.resizer.reset();
+    console.log("RESETTING!")
+    this.resizer.reset();
 
       try {
         this.stopArDetection();
@@ -286,7 +319,7 @@ class VideoData {
     this.validationId = validationId;
 
     while (!this.destroyed && !this.invalid && this.validationId === validationId) {
-      await this.sleep(500);
+      await sleep(500);
       this.doPeriodicFallbackChangeDetectionCheck();
     }
   }
@@ -295,11 +328,6 @@ class VideoData {
     this.validateVideoOffsets();
   }
 
-  async sleep(timeout) {
-    return new Promise( (resolve) => setTimeout(() => resolve(), timeout));
-  }
-
-
   onVideoDimensionsChanged(mutationList, observer) {
     if (!mutationList || this.video === undefined) {  // something's wrong
       if (observer && this.video) {
@@ -391,7 +419,7 @@ class VideoData {
    * Gets the contents of the style attribute of the video element
    * in a form of an object.
    */
-  getVideoStyle() {
+  getVideoStyle(): any {
     // This will _always_ give us an array. Empty string gives an array
     // that contains one element. That element is an empty string.
     const styleArray = (this.video.getAttribute('style') || '').split(';');
@@ -502,7 +530,7 @@ class VideoData {
     }
     this.paused = false;
     try {
-      this.resizer.start();
+      // this.resizer.start();
       if (this.player) {
         this.player.start();
       }
diff --git a/src/ext/lib/video-transform/Resizer.js b/src/ext/lib/video-transform/Resizer.ts
similarity index 93%
rename from src/ext/lib/video-transform/Resizer.js
rename to src/ext/lib/video-transform/Resizer.ts
index 024b46e..c8679b4 100644
--- a/src/ext/lib/video-transform/Resizer.js
+++ b/src/ext/lib/video-transform/Resizer.ts
@@ -9,34 +9,59 @@ import VideoAlignment from '../../../common/enums/video-alignment.enum';
 import AspectRatio from '../../../common/enums/aspect-ratio.enum';
 import CropModePersistance from '../../../common/enums/crop-mode-persistence.enum';
 import { sleep } from '../Util';
+import Logger from '../Logger';
+import Settings from '../Settings';
+import VideoData from '../video-data/VideoData';
 
 if(Debug.debug) {
   console.log("Loading: Resizer.js");
 }
 
 class Resizer {
-  
+  //#region flags
+  canPan: boolean = false;
+  destroyed: boolean = false;
+  //#endregion
+
+  //#region helper objects
+  logger: Logger;
+  settings: Settings;
+  scaler: Scaler;
+  stretcher: Stretcher;
+  zoom: Zoom;
+  conf: VideoData;
+  //#endregion
+
+  //#region HTML elements
+  video: any;
+  //#endregion
+
+  //#region data
+  correctedVideoDimensions: any;
+  currentCss: any;
+  currentStyleString: string;
+  currentPlayerStyleString: any;
+  currentCssValidFor: any;
+  currentVideoSettings: any;
+  lastAr: {type: any, ratio?: number} = {type: AspectRatio.Initial};
+  resizerId: any;
+  videoAlignment: any;
+  userCss: string;
+  userCssClassName: any;
+  pan: any = null;
+  //#endregion
+
   constructor(videoData) {
-    this.resizerId = (Math.random(99)*100).toFixed(0);
+    this.resizerId = (Math.random()*100).toFixed(0);
     this.conf = videoData;
     this.logger = videoData.logger;
     this.video = videoData.video;
     this.settings = videoData.settings;
-    this.extensionMode = videoData.extensionMode;
-
 
     this.scaler = new Scaler(this.conf);
     this.stretcher = new Stretcher(this.conf); 
     this.zoom = new Zoom(this.conf);
 
-    // load up default values
-    this.correctedVideoDimensions = {};
-    this.currentCss = {};
-    this.currentStyleString = "";
-    this.currentPlayerStyleString = "";
-    this.currentCssValidFor = {};
-
-    this.lastAr = {type: AspectRatio.Initial};
     this.videoAlignment = this.settings.getDefaultVideoAlignment(window.location.hostname); // this is initial video alignment
     this.destroyed = false;
 
@@ -47,7 +72,6 @@ class Resizer {
       this.canPan = false;
     }
 
-    this.userCss = '';
     this.userCssClassName = videoData.userCssClassName; 
   }
   
@@ -140,7 +164,7 @@ class Resizer {
     }
   }
 
-  async setAr(ar, lastAr) {
+  async setAr(ar: {type: any, ratio?: number}, lastAr?: {type: any, ratio?: number}) {
     if (this.destroyed) {
       return;
     }
@@ -157,6 +181,7 @@ class Resizer {
     }
 
     const siteSettings = this.settings.active.sites[window.location.hostname];
+    let stretchFactors: {xFactor: number, yFactor: number, arCorrectionFactor?: number, ratio?: number} | any;
 
     // 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
@@ -224,7 +249,7 @@ class Resizer {
         || this.stretcher.mode === Stretch.Conditional 
         || this.stretcher.mode === Stretch.FixedSource){
      
-      var stretchFactors = this.scaler.calculateCrop(ar);
+      stretchFactors = this.scaler.calculateCrop(ar);
 
       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);
@@ -255,15 +280,15 @@ class Resizer {
       );
 
     } else if (this.stretcher.mode === Stretch.Hybrid) {
-      var stretchFactors = this.stretcher.calculateStretch(ar.ratio);
+      stretchFactors = this.stretcher.calculateStretch(ar.ratio);
       this.logger.log('info', 'debug', '[Resizer::setAr] Processed stretch factors for hybrid stretch/crop. Stretch factors are:', stretchFactors);
     } else if (this.stretcher.mode === Stretch.Fixed) {
-      var stretchFactors = this.stretchFactors.calculateStretchFixed(ar.ratio)
+      stretchFactors = this.stretcher.calculateStretchFixed(ar.ratio)
     } else if (this.stretcher.mode === Stretch.Basic) {
-      var stretchFactors = this.stretcher.calculateBasicStretch();
+      stretchFactors = this.stretcher.calculateBasicStretch();
       this.logger.log('info', 'debug', '[Resizer::setAr] Processed stretch factors for basic stretch. Stretch factors are:', stretchFactors);
     } else {
-      var stretchFactors = {xFactor: 1, yFactor: 1};
+      stretchFactors = {xFactor: 1, yFactor: 1};
       this.logger.log('error', 'debug', '[Resizer::setAr] Okay wtf happened? If you see this, something has gone wrong', stretchFactors,"\n------[ i n f o   d u m p ]------\nstretcher:", this.stretcher);
     }
 
@@ -272,6 +297,10 @@ class Resizer {
     this.stretcher.chromeBugMitigation(stretchFactors);
 
     var translate = this.computeOffsets(stretchFactors);
+
+
+    console.log("aspect ratio will be set. stretch factors:", stretchFactors, "translate:", translate);
+
     this.applyCss(stretchFactors, translate);
   }
 
@@ -279,7 +308,7 @@ class Resizer {
   toFixedAr() {
     // converting to fixed AR means we also turn off autoAR
     this.setAr({
-      ar: this.lastAr.ar,
+      ratio: this.lastAr.ratio,
       type: AspectRatio.Fixed
     });
   }
@@ -296,7 +325,7 @@ class Resizer {
     return this.lastAr;
   }
 
-  setStretchMode(stretchMode, fixedStretchRatio){
+  setStretchMode(stretchMode, fixedStretchRatio?){
     this.stretcher.setStretchMode(stretchMode, fixedStretchRatio);
     this.restore();
   }
@@ -326,7 +355,7 @@ class Resizer {
   }
 
   resetPan() {
-    this.pan = {};
+    this.pan = {x: 0, y: 0};
     this.videoAlignment = this.settings.getDefaultVideoAlignment(window.location.hostname);
   }
 
@@ -334,7 +363,7 @@ class Resizer {
     // relativeMousePos[X|Y] - on scale from 0 to 1, how close is the mouse to player edges. 
     // use these values: top, left: 0, bottom, right: 1
     if(! this.pan){
-      this.pan = {};
+      this.pan = {x: 0, y: 0};
     }
 
     if (this.settings.active.miscSettings.mousePanReverseMouse) {
@@ -386,10 +415,6 @@ class Resizer {
     }
   }
 
-  resetPan(){
-    this.pan = undefined;
-  }
-
   setZoom(zoomLevel, no_announce) {
     this.zoom.setZoom(zoomLevel, no_announce);
   }
@@ -489,7 +514,7 @@ class Resizer {
     const hdiff = this.conf.player.dimensions.height - realVideoHeight;
 
     if (wdiff < 0 && hdiff < 0 && this.zoom.scale > 1) {
-      this.conf.player.restore();
+      this.conf.resizer.restore();
     }
 
     const wdiffAfterZoom = realVideoWidth * stretchFactors.xFactor - this.conf.player.dimensions.width;
@@ -503,7 +528,7 @@ class Resizer {
     
     
 
-    if (this.pan) {
+    if (this.pan.relativeOffsetX || this.pan.relativeOffsetY) {
       // don't offset when video is smaller than player
       if(wdiffAfterZoom >= 0 || hdiffAfterZoom >= 0) {
         translate.x += wdiffAfterZoom * this.pan.relativeOffsetX * this.zoom.scale;
@@ -518,7 +543,7 @@ class Resizer {
       }
     }
   
-    this.logger.log('info', ['debug', 'resizer'], "[Resizer::_res_computeOffsets] <rid:"+this.resizerId+"> calculated offsets:\n\n",
+    console.log('info', ['debug', 'resizer'], "[Resizer::_res_computeOffsets] <rid:"+this.resizerId+"> calculated offsets:\n\n",
                     '---- 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},
diff --git a/src/ext/lib/video-transform/Stretcher.js b/src/ext/lib/video-transform/Stretcher.ts
similarity index 96%
rename from src/ext/lib/video-transform/Stretcher.js
rename to src/ext/lib/video-transform/Stretcher.ts
index 559dff8..50ca385 100644
--- a/src/ext/lib/video-transform/Stretcher.js
+++ b/src/ext/lib/video-transform/Stretcher.ts
@@ -1,6 +1,9 @@
 import Stretch from '../../../common/enums/stretch.enum';
 import BrowserDetect from '../../conf/BrowserDetect';
 import AspectRatio from '../../../common/enums/aspect-ratio.enum';
+import VideoData from '../video-data/VideoData';
+import Logger from '../Logger';
+import Settings from '../Settings';
 
 // računa vrednosti za transform-scale (x, y)
 // transform: scale(x,y) se uporablja za raztegovanje videa, ne pa za približevanje
@@ -8,8 +11,20 @@ import AspectRatio from '../../../common/enums/aspect-ratio.enum';
 // transform: scale(x,y) is used for stretching, not zooming. 
 
 class Stretcher {
-  // internal variables
+  //#region flags
 
+  //#endregion
+
+  //#region helper objects
+  conf: VideoData;
+  logger: Logger;
+  settings: Settings;
+  //#endregion
+
+  //#region misc data
+  mode: any;
+  fixedStretchRatio: any;
+  //#endregion
 
   // functions
   constructor(videoData) {
@@ -20,7 +35,7 @@ class Stretcher {
     this.fixedStretchRatio = undefined;
   }
 
-  setStretchMode(stretchMode, fixedStretchRatio) {
+  setStretchMode(stretchMode, fixedStretchRatio?) {
     if (stretchMode === Stretch.Default) {
       this.mode = this.settings.getDefaultStretchMode(window.location.hostname);
     } else {
@@ -145,7 +160,7 @@ squeezeFactor:          ${squeezeFactor}`, '\nvideo', this.conf.video);
     return arCorrectionFactor;
   }
 
-   calculateStretch(actualAr, playerArOverride) {
+   calculateStretch(actualAr, playerArOverride?) {
     const playerAr = playerArOverride || this.conf.player.dimensions.width / this.conf.player.dimensions.height;
     const streamAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
 
@@ -153,7 +168,7 @@ squeezeFactor:          ${squeezeFactor}`, '\nvideo', this.conf.video);
       actualAr = playerAr;
     }
 
-    var stretchFactors = {
+    var stretchFactors: any = {
       xFactor: 1,
       yFactor: 1
     };
diff --git a/src/ext/lib/video-transform/Zoom.js b/src/ext/lib/video-transform/Zoom.ts
similarity index 78%
rename from src/ext/lib/video-transform/Zoom.js
rename to src/ext/lib/video-transform/Zoom.ts
index b95bb1e..ce21642 100644
--- a/src/ext/lib/video-transform/Zoom.js
+++ b/src/ext/lib/video-transform/Zoom.ts
@@ -1,19 +1,32 @@
 import Debug from '../../conf/Debug';
+import Logger from '../Logger';
+import VideoData from '../video-data/VideoData';
 
 // računa približevanje ter računa/popravlja odmike videa
 // calculates zooming and video offsets/panning
 
 class Zoom {
-  // functions
+  //#region flags
+
+  //#endregion
+
+  //#region helper objects
+  conf: VideoData;
+  logger: Logger;
+  //#endregion
+
+  //#region misc data
+  scale: number = 1;
+  logScale: number = 0;
+  scaleStep: number = 0.1; 
+  minScale: number = -1;    // 50% (log2(0.5) = -1)
+  maxScale: number = 3;     // 800% (log2(8) = 3)
+  //#endregion
+
+
   constructor(videoData) {
     this.conf = videoData;
     this.logger = videoData.logger;
-
-    this.scale = 1;
-    this.logScale = 0;
-    this.scaleStep = 0.1;
-    this.minScale = -1;  // 50% (log2(0.5) = -1)
-    this.maxScale = 3;   // 800% (log2(8) = 3)
   }
 
   reset(){
@@ -41,7 +54,7 @@ class Zoom {
     this.conf.announceZoom(this.scale);
   }
 
-  setZoom(scale, no_announce){
+  setZoom(scale: number, no_announce?){
     this.logger.log('info', 'debug', "[Zoom::setZoom] Setting zoom to", scale, "!");
 
     // NOTE: SCALE IS NOT LOGARITHMIC

From 9a864bc11ced9ddf44a51b6a9e510c4c104fe8f8 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Mon, 8 Feb 2021 23:04:54 +0100
Subject: [PATCH 34/68] Migrate pseudo-enums to typescript enums. Fix related
 imports & stuff

---
 README.md                                     |  2 +-
 src/common/components/ActionAlt.vue           |  6 +-
 src/common/components/ActionRow.vue           |  2 +-
 src/common/enums/AntiGradientMode.enum.ts     |  7 ++
 src/common/enums/AspectRatioType.enum.ts      | 11 +++
 src/common/enums/CropModePersistence.enum.ts  |  9 ++
 src/common/enums/ExtensionMode.enum.ts        | 10 +++
 src/common/enums/StretchType.enum.ts          | 11 +++
 src/common/enums/VideoAlignmentType.enum.ts   |  8 ++
 src/common/enums/anti-gradient-mode.enum.js   |  7 --
 src/common/enums/aspect-ratio.enum.js         | 24 ------
 .../enums/crop-mode-persistence.enum.js       |  9 --
 src/common/enums/extension-mode.enum.js       | 19 -----
 src/common/enums/stretch.enum.js              | 11 ---
 src/common/enums/video-alignment.enum.js      |  8 --
 src/common/mixins/ComputeActionsMixin.js      |  2 +-
 src/ext/conf/ActionList.js                    | 44 +++++-----
 src/ext/conf/ExtConfPatches.js                | 18 ++--
 src/ext/conf/ExtensionConf.js                 | 84 +++++++++----------
 src/ext/lib/ActionHandler.js                  |  4 +-
 src/ext/lib/Settings.js                       | 22 ++---
 src/ext/lib/ar-detect/ArDetector.js           | 28 +++----
 .../lib/ar-detect/edge-detect/EdgeDetect.js   |  2 +-
 src/ext/lib/video-data/PageInfo.js            |  8 +-
 src/ext/lib/video-data/PlayerData.ts          |  4 +-
 src/ext/lib/video-data/VideoData.ts           |  4 +-
 src/ext/lib/video-transform/Resizer.ts        | 84 +++++++++----------
 src/ext/lib/video-transform/Scaler.js         | 22 ++---
 src/ext/lib/video-transform/Stretcher.ts      | 18 ++--
 src/ext/uw.js                                 |  2 +-
 src/options/GeneralSettings.vue               | 38 ++++-----
 .../controls-settings/AddEditActionPopup.vue  |  2 +-
 .../controls-settings/ControlsSettings.vue    |  2 +-
 .../command-builder/CommandAddEdit.vue        |  2 +-
 src/popup/App.vue                             |  2 +-
 src/popup/js/ExecAction.js                    |  2 +-
 src/popup/panels/SiteDetailsPanel.vue         | 10 +--
 src/popup/panels/VideoPanel.vue               |  2 +-
 38 files changed, 264 insertions(+), 286 deletions(-)
 create mode 100644 src/common/enums/AntiGradientMode.enum.ts
 create mode 100644 src/common/enums/AspectRatioType.enum.ts
 create mode 100644 src/common/enums/CropModePersistence.enum.ts
 create mode 100644 src/common/enums/ExtensionMode.enum.ts
 create mode 100644 src/common/enums/StretchType.enum.ts
 create mode 100644 src/common/enums/VideoAlignmentType.enum.ts
 delete mode 100644 src/common/enums/anti-gradient-mode.enum.js
 delete mode 100644 src/common/enums/aspect-ratio.enum.js
 delete mode 100644 src/common/enums/crop-mode-persistence.enum.js
 delete mode 100644 src/common/enums/extension-mode.enum.js
 delete mode 100644 src/common/enums/stretch.enum.js
 delete mode 100644 src/common/enums/video-alignment.enum.js

diff --git a/README.md b/README.md
index a8d70fa..6355a07 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Ultrawidify — aspect ratio fixer for youtube and netflix
+# Ultrawidify — aspect ratio fixer for youtube and netflix
 
 ## Super TL;DR: I'm just looking for the install links, thanks
 
diff --git a/src/common/components/ActionAlt.vue b/src/common/components/ActionAlt.vue
index da044c2..7ccd521 100644
--- a/src/common/components/ActionAlt.vue
+++ b/src/common/components/ActionAlt.vue
@@ -5,7 +5,7 @@
 
       </div>
       <div class="flex action-name">
-        <span v-if="action.cmd && action.cmd.length > 1 || action.cmd[0].action === 'set-ar' && action.userAdded || (action.cmd[0].arg === AspectRatio.Fixed)" class="icon red" @click="removeAction()">🗙</span>
+        <span v-if="action.cmd && action.cmd.length > 1 || action.cmd[0].action === 'set-ar' && action.userAdded || (action.cmd[0].arg === AspectRatioType.Fixed)" class="icon red" @click="removeAction()">🗙</span>
         <span v-else class="icon transparent">🗙</span> &nbsp; &nbsp;
         <span class="icon" @click="editAction()">🖉</span> &nbsp; &nbsp;
         {{action.name}}
@@ -108,8 +108,8 @@
 </template>
 
 <script>
-import Stretch from '../enums/stretch.enum';
-import AspectRatio from '../enums/aspect-ratio.enum';
+import StretchType from '../enums/StretchType.enum';
+import AspectRatioType from '../enums/AspectRatioType.enum';
 import KeyboardShortcutParser from '../js/KeyboardShortcutParser';
 
 
diff --git a/src/common/components/ActionRow.vue b/src/common/components/ActionRow.vue
index 02ee813..9865926 100644
--- a/src/common/components/ActionRow.vue
+++ b/src/common/components/ActionRow.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script>
-import Stretch from '../enums/stretch.enum';
+import StretchType from '../enums/StretchType.enum';
 import KeyboardShortcutParser from '../js/KeyboardShortcutParser'
 
 export default {
diff --git a/src/common/enums/AntiGradientMode.enum.ts b/src/common/enums/AntiGradientMode.enum.ts
new file mode 100644
index 0000000..a0e4bd9
--- /dev/null
+++ b/src/common/enums/AntiGradientMode.enum.ts
@@ -0,0 +1,7 @@
+enum AntiGradientMode {
+  Disabled = 0,
+  Lax = 1,
+  Strict = 2
+}
+
+export default AntiGradientMode;
diff --git a/src/common/enums/AspectRatioType.enum.ts b/src/common/enums/AspectRatioType.enum.ts
new file mode 100644
index 0000000..8b9d38e
--- /dev/null
+++ b/src/common/enums/AspectRatioType.enum.ts
@@ -0,0 +1,11 @@
+enum AspectRatioType {
+  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 AspectRatioType;
diff --git a/src/common/enums/CropModePersistence.enum.ts b/src/common/enums/CropModePersistence.enum.ts
new file mode 100644
index 0000000..581715c
--- /dev/null
+++ b/src/common/enums/CropModePersistence.enum.ts
@@ -0,0 +1,9 @@
+enum CropModePersistence {
+  Default = -1,
+  Disabled = 0,
+  UntilPageReload = 1,
+  CurrentSession = 2,
+  Forever = 3,
+}
+
+export default CropModePersistence;
diff --git a/src/common/enums/ExtensionMode.enum.ts b/src/common/enums/ExtensionMode.enum.ts
new file mode 100644
index 0000000..b1c9b69
--- /dev/null
+++ b/src/common/enums/ExtensionMode.enum.ts
@@ -0,0 +1,10 @@
+enum ExtensionMode {
+  AutoDisabled = -2,
+  Disabled = -1,
+  Default = 0,
+  Whitelist = 1,
+  Basic = 2,
+  Enabled = 3,
+};
+
+export default ExtensionMode;
diff --git a/src/common/enums/StretchType.enum.ts b/src/common/enums/StretchType.enum.ts
new file mode 100644
index 0000000..66dd2e2
--- /dev/null
+++ b/src/common/enums/StretchType.enum.ts
@@ -0,0 +1,11 @@
+enum StretchType {
+  NoStretch = 0,
+  Basic = 1,
+  Hybrid = 2,
+  Conditional = 3,
+  Fixed = 4,
+  FixedSource = 5,
+  Default = -1
+};
+
+export default StretchType;
diff --git a/src/common/enums/VideoAlignmentType.enum.ts b/src/common/enums/VideoAlignmentType.enum.ts
new file mode 100644
index 0000000..bd22d26
--- /dev/null
+++ b/src/common/enums/VideoAlignmentType.enum.ts
@@ -0,0 +1,8 @@
+enum VideoAlignmentType {
+  Left = 0,
+  Center = 1,
+  Right = 2,
+  Default = -1
+};
+
+export default VideoAlignmentType;
diff --git a/src/common/enums/anti-gradient-mode.enum.js b/src/common/enums/anti-gradient-mode.enum.js
deleted file mode 100644
index c8924da..0000000
--- a/src/common/enums/anti-gradient-mode.enum.js
+++ /dev/null
@@ -1,7 +0,0 @@
-var AntiGradientMode = Object.freeze({
-  Disabled: 0,
-  Lax: 1,
-  Strict: 2
-});
-
-export default AntiGradientMode;
diff --git a/src/common/enums/aspect-ratio.enum.js b/src/common/enums/aspect-ratio.enum.js
deleted file mode 100644
index 46c1f7d..0000000
--- a/src/common/enums/aspect-ratio.enum.js
+++ /dev/null
@@ -1,24 +0,0 @@
-var AspectRatio = Object.freeze({
-  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
-
-  toString: (ar) => {
-    switch (ar) {
-      case -1: return 'Initial';
-      case 0:  return 'Reset';
-      case 1:  return 'Automatic';
-      case 2:  return 'FitWidth';
-      case 3:  return 'FitHeight';
-      case 4:  return 'Fixed';
-      case 5:  return 'Manual';
-      default: return '<not an valid enum value>'
-    }
-  }
-});
-
-export default AspectRatio;
diff --git a/src/common/enums/crop-mode-persistence.enum.js b/src/common/enums/crop-mode-persistence.enum.js
deleted file mode 100644
index 121eb44..0000000
--- a/src/common/enums/crop-mode-persistence.enum.js
+++ /dev/null
@@ -1,9 +0,0 @@
-var CropModePersistence = Object.freeze({
-  Default: -1,
-  Disabled: 0,
-  UntilPageReload: 1,
-  CurrentSession: 2,
-  Forever: 3,
-});
-
-export default CropModePersistence;
\ No newline at end of file
diff --git a/src/common/enums/extension-mode.enum.js b/src/common/enums/extension-mode.enum.js
deleted file mode 100644
index a4f0a6d..0000000
--- a/src/common/enums/extension-mode.enum.js
+++ /dev/null
@@ -1,19 +0,0 @@
-if (process.env.CHANNEL !== 'stable') {
-  console.info('Loading ExtensionMode');
-}
-
-
-var ExtensionMode = Object.freeze({
-  AutoDisabled: -2,
-  Disabled: -1,
-  Default: 0,
-  Whitelist: 1,
-  Basic: 2,
-  Enabled: 3,
-});
-
-if (process.env.CHANNEL !== 'stable') {
-  console.info('Loaded ExtensionMode');
-}
-
-export default ExtensionMode;
diff --git a/src/common/enums/stretch.enum.js b/src/common/enums/stretch.enum.js
deleted file mode 100644
index 130f92b..0000000
--- a/src/common/enums/stretch.enum.js
+++ /dev/null
@@ -1,11 +0,0 @@
-var Stretch = Object.freeze({
-  NoStretch: 0,
-  Basic: 1,
-  Hybrid: 2,
-  Conditional: 3,
-  Fixed: 4,
-  FixedSource: 5,
-  Default: -1
-});
-
-export default Stretch;
diff --git a/src/common/enums/video-alignment.enum.js b/src/common/enums/video-alignment.enum.js
deleted file mode 100644
index 3158f37..0000000
--- a/src/common/enums/video-alignment.enum.js
+++ /dev/null
@@ -1,8 +0,0 @@
-var VideoAlignment = Object.freeze({
-  Left: 0,
-  Center: 1,
-  Right: 2,
-  Default: -1
-});
-
-export default VideoAlignment;
diff --git a/src/common/mixins/ComputeActionsMixin.js b/src/common/mixins/ComputeActionsMixin.js
index d6726ab..0e4acf7 100644
--- a/src/common/mixins/ComputeActionsMixin.js
+++ b/src/common/mixins/ComputeActionsMixin.js
@@ -10,7 +10,7 @@ export default {
       }) || [];
     },
     extensionActions: function(){
-      return this.scopeActions.filter(x => x.cmd.length === 1 && x.cmd[0].action === 'set-extension-mode') || [];
+      return this.scopeActions.filter(x => x.cmd.length === 1 && x.cmd[0].action === 'set-ExtensionMode') || [];
     },
     aardActions: function(){
       return this.scopeActions.filter(x => x.cmd.length === 1 && x.cmd[0].action === 'set-autoar-mode') || [];
diff --git a/src/ext/conf/ActionList.js b/src/ext/conf/ActionList.js
index c3c69ac..11a0243 100644
--- a/src/ext/conf/ActionList.js
+++ b/src/ext/conf/ActionList.js
@@ -1,27 +1,27 @@
-import VideoAlignment from '../../common/enums/video-alignment.enum';
-import Stretch from '../../common/enums/stretch.enum';
-import ExtensionMode from '../../common/enums/extension-mode.enum';
-import AspectRatio from '../../common/enums/aspect-ratio.enum';
-import CropModePersistence from '../../common/enums/crop-mode-persistence.enum';
+import VideoAlignmentType from '../../common/enums/VideoAlignmentType.enum';
+import StretchType from '../../common/enums/StretchType.enum';
+import ExtensionMode from '../../common/enums/ExtensionMode.enum';
+import AspectRatioType from '../../common/enums/AspectRatioType.enum';
+import CropModePersistence from '../../common/enums/CropModePersistence.enum';
 
 var ActionList = {
   'set-ar': {
     name: 'Set aspect ratio',
     args: [{
       name: 'Automatic',
-      arg: AspectRatio.Automatic,
+      arg: AspectRatioType.Automatic,
     },{
       name: 'Fit width',
-      arg: AspectRatio.FitWidth,
+      arg: AspectRatioType.FitWidth,
     },{
       name: 'Fit height',
-      arg: AspectRatio.FitHeight,
+      arg: AspectRatioType.FitHeight,
     },{
       name: 'Reset',
-      arg: AspectRatio.Reset,
+      arg: AspectRatioType.Reset,
     },{
       name: 'Manually specify ratio',
-      arg: AspectRatio.Fixed,
+      arg: AspectRatioType.Fixed,
       customArg: true,
       customSetter: (value) => {
         const [width, height] = value.split(':');
@@ -70,33 +70,33 @@ var ActionList = {
     name: 'Set stretch',
     args: [{
       name: 'Normal',
-      arg: Stretch.NoStretch
+      arg: StretchType.NoStretch
     },{
       name: 'Basic',
-      arg: Stretch.Basic,
+      arg: StretchType.Basic,
     },{
       name: 'Hybrid',
-      arg: Stretch.Hybrid,
+      arg: StretchType.Hybrid,
     },{
       name: 'Thin borders',
-      arg: Stretch.Conditional,
+      arg: StretchType.Conditional,
     },{
       name: 'Fixed (source)',
-      arg: Stretch.FixedSource,
+      arg: StretchType.FixedSource,
       customArg: true,
       scopes: {
         page: true,
       }
     },{
       name: 'Fixed (displayed)',
-      arg: Stretch.Fixed,
+      arg: StretchType.Fixed,
       customArg: true,
       scopes: {
         page: true,
       }
     },{
       name: 'Default',
-      arg: Stretch.Default,
+      arg: StretchType.Default,
       scopes: {
         site: true
       }
@@ -111,16 +111,16 @@ var ActionList = {
     name: 'Set video alignment',
     args: [{
       name: 'Left',
-      arg: VideoAlignment.Left,
+      arg: VideoAlignmentType.Left,
     },{
       name: 'Center',
-      arg: VideoAlignment.Center,
+      arg: VideoAlignmentType.Center,
     },{
       name: 'Right',
-      arg: VideoAlignment.Right
+      arg: VideoAlignmentType.Right
     },{
       name: 'Default',
-      arg: VideoAlignment.Default,
+      arg: VideoAlignmentType.Default,
       scopes: {
         site: true,
       }
@@ -179,7 +179,7 @@ var ActionList = {
       page: true,
     }
   },
-  'set-extension-mode': {
+  'set-ExtensionMode': {
     name: 'Set extension mode',
     args: [{
       name: 'Enable',
diff --git a/src/ext/conf/ExtConfPatches.js b/src/ext/conf/ExtConfPatches.js
index 349a2c2..bfd7d21 100644
--- a/src/ext/conf/ExtConfPatches.js
+++ b/src/ext/conf/ExtConfPatches.js
@@ -1,8 +1,8 @@
 // How to use:
 // version: {ExtensionConf object, but only properties that get overwritten}
-import Stretch from '../../common/enums/stretch.enum';
-import ExtensionMode from '../../common/enums/extension-mode.enum';
-import VideoAlignment from '../../common/enums/video-alignment.enum';
+import StretchType from '../../common/enums/StretchType.enum';
+import ExtensionMode from '../../common/enums/ExtensionMode.enum';
+import VideoAlignmentType from '../../common/enums/VideoAlignmentType.enum';
 
 const ExtensionConfPatch = [
   {
@@ -267,7 +267,7 @@ const ExtensionConfPatch = [
             label: '4:3 stretch (src)',
             cmd: [{
               action: 'set-stretch',
-              arg: Stretch.FixedSource,
+              arg: StretchType.FixedSource,
               customArg: 1.33,
             }],
             scopes: {
@@ -284,7 +284,7 @@ const ExtensionConfPatch = [
             label: '16:9 stretch (src)',
             cmd: [{
               action: 'set-stretch',
-              arg: Stretch.FixedSource,
+              arg: StretchType.FixedSource,
               customArg: 1.77,
             }],
             scopes: {
@@ -309,8 +309,8 @@ const ExtensionConfPatch = [
         autoar: ExtensionMode.Enabled,
         autoarFallback: ExtensionMode.Enabled,
         override: true,                  // ignore value localStorage in favour of this
-        stretch: Stretch.Default,
-        videoAlignment: VideoAlignment.Default,
+        stretch: StretchType.Default,
+        videoAlignment: VideoAlignmentType.Default,
         keyboardShortcutsEnabled: ExtensionMode.Default,
         DOM: {
           player: {
@@ -339,8 +339,8 @@ const ExtensionConfPatch = [
           autoar: ExtensionMode.Enabled,     
           override: false,
           type: 'community',
-          stretch: Stretch.Default,
-          videoAlignment: VideoAlignment.Default,
+          stretch: StretchType.Default,
+          videoAlignment: VideoAlignmentType.Default,
           keyboardShortcutsEnabled: ExtensionMode.Default,
           arPersistence: true,              // persist aspect ratio between different videos
           autoarPreventConditions: {        // prevents autoar on following conditions
diff --git a/src/ext/conf/ExtensionConf.js b/src/ext/conf/ExtensionConf.js
index 0da109d..fc1d2ba 100644
--- a/src/ext/conf/ExtensionConf.js
+++ b/src/ext/conf/ExtensionConf.js
@@ -1,11 +1,11 @@
 import Debug from './Debug';
 import currentBrowser from './BrowserDetect';
-import VideoAlignment from '../../common/enums/video-alignment.enum';
-import Stretch from '../../common/enums/stretch.enum';
-import ExtensionMode from '../../common/enums/extension-mode.enum';
-import AntiGradientMode from '../../common/enums/anti-gradient-mode.enum';
-import AspectRatio from '../../common/enums/aspect-ratio.enum';
-import CropModePersistence from '../../common/enums/crop-mode-persistence.enum';
+import VideoAlignmentType from '../../common/enums/VideoAlignmentType.enum';
+import StretchType from '../../common/enums/StretchType.enum';
+import ExtensionMode from '../../common/enums/ExtensionMode.enum';
+import AntiGradientMode from '../../common/enums/AntiGradientMode.enum';
+import AspectRatioType from '../../common/enums/AspectRatioType.enum';
+import CropModePersistence from '../../common/enums/CropModePersistence.enum';
 
 if(Debug.debug)
   console.log("Loading: ExtensionConf.js");
@@ -176,7 +176,7 @@ var ExtensionConf = {
     label: 'Automatic',                     // name displayed in ui (can be overridden in scope/playerUi)
     cmd: [{
       action: 'set-ar',
-      arg: AspectRatio.Automatic,
+      arg: AspectRatioType.Automatic,
       persistent: false, // optional, false by default. If true, change doesn't take effect immediately.
                          // Instead, this action saves stuff to settings
     }],
@@ -211,7 +211,7 @@ var ExtensionConf = {
     label: 'Reset',
     cmd: [{
       action: 'set-ar',
-      arg: AspectRatio.Reset,
+      arg: AspectRatioType.Reset,
     }],
     scopes: {
       page: {
@@ -237,7 +237,7 @@ var ExtensionConf = {
     label: 'Fit width',
     cmd: [{
       action: 'set-ar',
-      arg: AspectRatio.FitWidth,
+      arg: AspectRatioType.FitWidth,
     }],
     scopes: {
       page: {
@@ -263,7 +263,7 @@ var ExtensionConf = {
     label: 'Fit height',
     cmd: [{
       action: 'set-ar',
-      arg: AspectRatio.FitHeight
+      arg: AspectRatioType.FitHeight
     }],
     scopes: {
       page: {
@@ -290,7 +290,7 @@ var ExtensionConf = {
     label: '16:9',
     cmd: [{
       action: 'set-ar',
-      arg: AspectRatio.Fixed,
+      arg: AspectRatioType.Fixed,
       customArg: 1.78,
     }],
     scopes: {
@@ -318,7 +318,7 @@ var ExtensionConf = {
     label: '21:9',
     cmd: [{
       action: 'set-ar',
-      arg: AspectRatio.Fixed,
+      arg: AspectRatioType.Fixed,
       customArg: 2.39
     }],
     scopes: {
@@ -346,7 +346,7 @@ var ExtensionConf = {
     label: '18:9',
     cmd: [{
       action: 'set-ar',
-      arg: AspectRatio.Fixed,
+      arg: AspectRatioType.Fixed,
       customArg: 2.0,
     }],
     scopes: {
@@ -547,7 +547,7 @@ var ExtensionConf = {
     label: 'Don\'t stretch',
     cmd: [{
       action: 'set-stretch',
-      arg: Stretch.NoStretch,
+      arg: StretchType.NoStretch,
     }],
     scopes: {
       global: {
@@ -572,7 +572,7 @@ var ExtensionConf = {
     label: 'Basic stretch',
     cmd: [{
       action: 'set-stretch',
-      arg: Stretch.Basic,
+      arg: StretchType.Basic,
     }],
     scopes: {
       global: {
@@ -597,7 +597,7 @@ var ExtensionConf = {
     label: 'Hybrid stretch',
     cmd: [{
       action: 'set-stretch',
-      arg: Stretch.Hybrid,
+      arg: StretchType.Hybrid,
     }],
     scopes: {
       global: {
@@ -622,7 +622,7 @@ var ExtensionConf = {
     label: 'Thin borders only',
     cmd: [{
       action: 'set-stretch',
-      arg: Stretch.Conditional,
+      arg: StretchType.Conditional,
     }],
     scopes: {
       global: {
@@ -647,7 +647,7 @@ var ExtensionConf = {
     label: 'Default',
     cmd: [{
       action: 'set-stretch',
-      arg: Stretch.Default,
+      arg: StretchType.Default,
     }],
     scopes: {
       site: {
@@ -660,7 +660,7 @@ var ExtensionConf = {
     label: '4:3 stretch (src)',
     cmd: [{
       action: 'set-stretch',
-      arg: Stretch.FixedSource,
+      arg: StretchType.FixedSource,
       customArg: 1.33,
     }],
     scopes: {
@@ -677,7 +677,7 @@ var ExtensionConf = {
     label: '16:9 stretch (src)',
     cmd: [{
       action: 'set-stretch',
-      arg: Stretch.FixedSource,
+      arg: StretchType.FixedSource,
       customArg: 1.77,
     }],
     scopes: {
@@ -698,7 +698,7 @@ var ExtensionConf = {
     label: 'Left',
     cmd: [{
       action: 'set-alignment',
-      arg: VideoAlignment.Left,
+      arg: VideoAlignmentType.Left,
     }],
     scopes: {
       global: {
@@ -720,7 +720,7 @@ var ExtensionConf = {
     label: 'Center',
     cmd: [{
       action: 'set-alignment',
-      arg: VideoAlignment.Center,
+      arg: VideoAlignmentType.Center,
     }],
     scopes: {
       global: {
@@ -742,7 +742,7 @@ var ExtensionConf = {
     label: 'Right',
     cmd: [{
       action: 'set-alignment',
-      arg: VideoAlignment.Right
+      arg: VideoAlignmentType.Right
     }],
     scopes: {
       global: {
@@ -764,7 +764,7 @@ var ExtensionConf = {
     label: 'Default',
     cmd: [{
       action: 'set-alignment',
-      arg: VideoAlignment.Default
+      arg: VideoAlignmentType.Default
     }],
     scopes: {
       site: {
@@ -780,7 +780,7 @@ var ExtensionConf = {
     name: 'Enable extension',
     label: 'Enable',
     cmd: [{
-      action: 'set-extension-mode',
+      action: 'set-ExtensionMode',
       arg: ExtensionMode.Enabled,
       persistent: true,
     }],
@@ -796,7 +796,7 @@ var ExtensionConf = {
     name: 'Enable extension on whitelisted sites only',
     label: 'On whitelist only',
     cmd: [{
-      action: 'set-extension-mode',
+      action: 'set-ExtensionMode',
       arg: ExtensionMode.Whitelist,
       persistent: true,
     }],
@@ -809,7 +809,7 @@ var ExtensionConf = {
     name: 'Extension mode: use default settings',
     label: 'Default',
     cmd: [{
-      action: 'set-extension-mode',
+      action: 'set-ExtensionMode',
       arg: ExtensionMode.Default,
       persistent: true,
     }],
@@ -822,7 +822,7 @@ var ExtensionConf = {
     name: 'Disable extension',
     label: 'Disable',
     cmd: [{
-      action: 'set-extension-mode',
+      action: 'set-ExtensionMode',
       arg: ExtensionMode.Disabled,
       persistent: true,
     }],
@@ -1006,8 +1006,8 @@ var ExtensionConf = {
       autoarFallback: currentBrowser.firefox ?     // if autoAr fails, try fallback mode?
                        ExtensionMode.Enabled :     // Options same as in autoar.
                        ExtensionMode.Disabled,     // if autoar is disabled, this setting is irrelevant
-      stretch: Stretch.NoStretch,                  // Default stretch mode. 
-      videoAlignment: VideoAlignment.Center,       // Video alignment
+      stretch: StretchType.NoStretch,                  // Default stretch mode. 
+      videoAlignment: VideoAlignmentType.Center,       // Video alignment
       keyboardShortcutsEnabled: ExtensionMode.Enabled,
     },
     "www.youtube.com" : {
@@ -1017,8 +1017,8 @@ var ExtensionConf = {
       override: false,                  // ignore value localStorage in favour of this
       type: 'official',                 // is officially supported? (Alternatives are 'community' and 'user-defined')
       actions: null,                    // overrides global keyboard shortcuts and button configs. Is array, is optional.
-      stretch: Stretch.Default,
-      videoAlignment: VideoAlignment.Default,
+      stretch: StretchType.Default,
+      videoAlignment: VideoAlignmentType.Default,
       keyboardShortcutsEnabled: ExtensionMode.Default,
       DOM: {
         player: {
@@ -1035,8 +1035,8 @@ var ExtensionConf = {
       autoar: ExtensionMode.Enabled,     
       override: false,
       type: 'official',
-      stretch: Stretch.Default,
-      videoAlignment: VideoAlignment.Default,
+      stretch: StretchType.Default,
+      videoAlignment: VideoAlignmentType.Default,
       keyboardShortcutsEnabled: ExtensionMode.Default,
       arPersistence: true,              // persist aspect ratio between different videos
       "DOM": {
@@ -1054,8 +1054,8 @@ var ExtensionConf = {
       autoar: ExtensionMode.Enabled,     
       override: false,
       type: 'community',
-      stretch: Stretch.Default,
-      videoAlignment: VideoAlignment.Default,
+      stretch: StretchType.Default,
+      videoAlignment: VideoAlignmentType.Default,
       keyboardShortcutsEnabled: ExtensionMode.Default,
       arPersistence: true,              // persist aspect ratio between different videos
       DOM: {
@@ -1074,8 +1074,8 @@ var ExtensionConf = {
       autoar: ExtensionMode.Enabled,     
       override: true,
       type: 'official',
-      stretch: Stretch.Default,
-      videoAlignment: VideoAlignment.Default,
+      stretch: StretchType.Default,
+      videoAlignment: VideoAlignmentType.Default,
       keyboardShortcutsEnabled: ExtensionMode.Default,
       DOM: {
         player: {
@@ -1117,8 +1117,8 @@ var ExtensionConf = {
       autoar:ExtensionMode.Enabled,     
       override: false,
       type: 'testing',
-      stretch: Stretch.Default,
-      videoAlignment: VideoAlignment.Default,
+      stretch: StretchType.Default,
+      videoAlignment: VideoAlignmentType.Default,
       keyboardShortcutsEnabled: ExtensionMode.Default,
       DOM: {
         player: {
@@ -1134,8 +1134,8 @@ var ExtensionConf = {
       autoar: ExtensionMode.Enabled,     
       override: false,
       type: 'testing',
-      stretch: Stretch.Default,
-      videoAlignment: VideoAlignment.Default,
+      stretch: StretchType.Default,
+      videoAlignment: VideoAlignmentType.Default,
       keyboardShortcutsEnabled: ExtensionMode.Default,
       DOM: {
         player: {
diff --git a/src/ext/lib/ActionHandler.js b/src/ext/lib/ActionHandler.js
index 5430859..210c768 100644
--- a/src/ext/lib/ActionHandler.js
+++ b/src/ext/lib/ActionHandler.js
@@ -1,6 +1,6 @@
 import Debug from '../conf/Debug';
 import PlayerData from './video-data/PlayerData';
-import ExtensionMode from '../../common/enums/extension-mode.enum';
+import ExtensionMode from '../../common/enums/ExtensionMode.enum';
 
 if(process.env.CHANNEL !== 'stable'){
   console.info("Loading ActionHandler");
@@ -275,7 +275,7 @@ class ActionHandler {
               this.settings.active.sites[site].stretch = cmd.arg;
             } else if (cmd.action === "set-alignment") {
               this.settings.active.sites[site].videoAlignment = cmd.arg;
-            } else if (cmd.action === "set-extension-mode") {
+            } else if (cmd.action === "set-ExtensionMode") {
               this.settings.active.sites[site].status = cmd.arg;
             } else if (cmd.action === "set-autoar-mode") {
               this.settings.active.sites[site].arStatus = cmd.arg;
diff --git a/src/ext/lib/Settings.js b/src/ext/lib/Settings.js
index 61a3b40..35341bb 100644
--- a/src/ext/lib/Settings.js
+++ b/src/ext/lib/Settings.js
@@ -1,12 +1,12 @@
 import Debug from '../conf/Debug';
 import currentBrowser from '../conf/BrowserDetect';
 import ExtensionConf from '../conf/ExtensionConf';
-import ExtensionMode from '../../common/enums/extension-mode.enum';
+import ExtensionMode from '../../common/enums/ExtensionMode.enum';
 import ObjectCopy from '../lib/ObjectCopy';
-import Stretch from '../../common/enums/stretch.enum';
-import VideoAlignment from '../../common/enums/video-alignment.enum';
+import StretchType from '../../common/enums/StretchType.enum';
+import VideoAlignmentType from '../../common/enums/VideoAlignmentType.enum';
 import ExtensionConfPatch from '../conf/ExtConfPatches';
-import CropModePersistence from '../../common/enums/crop-mode-persistence.enum';
+import CropModePersistence from '../../common/enums/CropModePersistence.enum';
 import BrowserDetect from '../conf/BrowserDetect';
 
 if(process.env.CHANNEL !== 'stable'){
@@ -301,10 +301,10 @@ class Settings {
         sites[site].autoar = ExtensionMode.Default;
       }
       if (sites[site].stretch === undefined) {
-        sites[site].stretch = Stretch.Default;
+        sites[site].stretch = StretchType.Default;
       }
       if (sites[site].videoAlignment === undefined) {
-        sites[site].videoAlignment = VideoAlignment.Default;
+        sites[site].videoAlignment = VideoAlignmentType.Default;
       }
       if (sites[site].keyboardShortcutsEnabled === undefined) {
         sites[site].keyboardShortcutsEnabled = ExtensionMode.Default;
@@ -544,8 +544,8 @@ class Settings {
       mode: ExtensionMode.Default,
       autoar: ExtensionMode.Default,
       autoarFallback: ExtensionMode.Default,
-      stretch: Stretch.Default,
-      videoAlignment: VideoAlignment.Default,
+      stretch: StretchType.Default,
+      videoAlignment: VideoAlignmentType.Default,
     };
 
     if (!option || allDefault[option] === undefined) {
@@ -565,7 +565,7 @@ class Settings {
   }
 
   getDefaultStretchMode(site) {
-    if (site && (this.active.sites[site]?.stretch ?? Stretch.Default) !== Stretch.Default) {
+    if (site && (this.active.sites[site]?.stretch ?? StretchType.Default) !== StretchType.Default) {
       return this.active.sites[site].stretch;
     }
 
@@ -573,7 +573,7 @@ class Settings {
   }
 
   getDefaultCropPersistenceMode(site) {
-    if (site && (this.active.sites[site]?.cropModePersistence ?? Stretch.Default) !== Stretch.Default) {
+    if (site && (this.active.sites[site]?.cropModePersistence ?? StretchType.Default) !== StretchType.Default) {
       return this.active.sites[site].cropModePersistence;
     }
 
@@ -582,7 +582,7 @@ class Settings {
   }
 
   getDefaultVideoAlignment(site) {
-    if ( (this.active.sites[site]?.videoAlignment ?? VideoAlignment.Default) !== VideoAlignment.Default) {
+    if ( (this.active.sites[site]?.videoAlignment ?? VideoAlignmentType.Default) !== VideoAlignmentType.Default) {
       return this.active.sites[site].videoAlignment;
     }
 
diff --git a/src/ext/lib/ar-detect/ArDetector.js b/src/ext/lib/ar-detect/ArDetector.js
index ad8f058..7467948 100644
--- a/src/ext/lib/ar-detect/ArDetector.js
+++ b/src/ext/lib/ar-detect/ArDetector.js
@@ -6,8 +6,8 @@ import EdgeDetectPrimaryDirection from './edge-detect/enums/EdgeDetectPrimaryDir
 import EdgeDetectQuality from './edge-detect/enums/EdgeDetectQualityEnum';
 import GuardLine from './GuardLine';
 // import DebugCanvas from './DebugCanvas';
-import VideoAlignment from '../../../common/enums/video-alignment.enum';
-import AspectRatio from '../../../common/enums/aspect-ratio.enum';
+import VideoAlignmentType from '../../../common/enums/VideoAlignmentType.enum';
+import AspectRatioType from '../../../common/enums/AspectRatioType.enum';
 import {sleep} from '../../lib/Util';
 import BrowserDetect from '../../conf/BrowserDetect';
 
@@ -187,7 +187,7 @@ class ArDetector {
     this.resetBlackLevel();
 
     // if we're restarting ArDetect, we need to do this in order to force-recalculate aspect ratio
-    this.conf.resizer.setLastAr({type: AspectRatio.Automatic, ratio: this.getDefaultAr()});
+    this.conf.resizer.setLastAr({type: AspectRatioType.Automatic, ratio: this.getDefaultAr()});
 
     this.canvasImageDataRowLength = cwidth << 2;
     this.noLetterboxCanvasReset = false;
@@ -212,9 +212,9 @@ class ArDetector {
       return;
     }
 
-    if (this.conf.resizer.lastAr.type === AspectRatio.Automatic) {
+    if (this.conf.resizer.lastAr.type === AspectRatioType.Automatic) {
       // ensure first autodetection will run in any case
-      this.conf.resizer.setLastAr({type: AspectRatio.Automatic, ratio: this.getDefaultAr()});
+      this.conf.resizer.setLastAr({type: AspectRatioType.Automatic, ratio: this.getDefaultAr()});
     }
 
 
@@ -475,7 +475,7 @@ class ArDetector {
     // poglejmo, če se je razmerje stranic spremenilo
     // check if aspect ratio is changed:
     let lastAr = this.conf.resizer.getLastAr();
-    if (lastAr.type === AspectRatio.Automatic && lastAr.ratio !== null && lastAr.ratio !== undefined){
+    if (lastAr.type === AspectRatioType.Automatic && lastAr.ratio !== null && lastAr.ratio !== undefined){
       // spremembo lahko zavrnemo samo, če uporabljamo avtomatski način delovanja in če smo razmerje stranic
       // že nastavili.
       //
@@ -500,7 +500,7 @@ class ArDetector {
     }
     this.logger.log('info', 'debug', `%c[ArDetect::processAr] <@${this.arid}>  Triggering aspect ratio change. New aspect ratio: ${trueAr}`, _ard_console_change);
     
-    this.conf.resizer.updateAr({type: AspectRatio.Automatic, ratio: trueAr}, {type: AspectRatio.Automatic, ratio: trueAr});
+    this.conf.resizer.updateAr({type: AspectRatioType.Automatic, ratio: trueAr}, {type: AspectRatioType.Automatic, ratio: trueAr});
   }
 
   clearImageData(id) {
@@ -575,7 +575,7 @@ class ArDetector {
           this.drmNotificationShown = true;
 
           this.conf.player.showNotification('AARD_DRM');
-          this.conf.resizer.setAr({type: AspectRatio.Reset});
+          this.conf.resizer.setAr({type: AspectRatioType.Reset});
         } 
 
         return;
@@ -588,9 +588,9 @@ class ArDetector {
         let newCanvasWidth = window.innerHeight * (this.video.videoWidth / this.video.videoHeight);
         let newCanvasHeight = window.innerHeight;
         
-        if (this.conf.resizer.videoAlignment === VideoAlignment.Center) {
+        if (this.conf.resizer.videoAlignment === VideoAlignmentType.Center) {
           this.canvasDrawWindowHOffset = Math.round((window.innerWidth - newCanvasWidth) * 0.5);
-        } else if (this.conf.resizer.videoAlignment === VideoAlignment.Left) {
+        } else if (this.conf.resizer.videoAlignment === VideoAlignmentType.Left) {
           this.canvasDrawWindowHOffset = 0;
         } else {
           this.canvasDrawWindowHOffset = window.innerWidth - newCanvasWidth;
@@ -637,7 +637,7 @@ class ArDetector {
       // da je letterbox izginil.
       // If we don't detect letterbox, we reset aspect ratio to aspect ratio of the video file. The aspect ratio could
       // have been corrected manually. It's also possible that letterbox (that was there before) disappeared.
-      this.conf.resizer.updateAr({type: AspectRatio.Automatic, ratio: this.getDefaultAr()});
+      this.conf.resizer.updateAr({type: AspectRatioType.Automatic, ratio: this.getDefaultAr()});
       this.guardLine.reset();
       this.noLetterboxCanvasReset = true;
 
@@ -677,7 +677,7 @@ class ArDetector {
     // (since the new letterbox edge isn't present in our sample due to technical
     // limitations)
     if (this.fallbackMode && guardLineOut.blackbarFail) {
-      this.conf.resizer.setAr({type: AspectRatio.Automatic, ratio: this.getDefaultAr()});
+      this.conf.resizer.setAr({type: AspectRatioType.Automatic, ratio: this.getDefaultAr()});
       this.guardLine.reset();
       this.noLetterboxCanvasReset = true;
 
@@ -702,7 +702,7 @@ class ArDetector {
 
           if(guardLineOut.blackbarFail){
             this.logger.log('info', 'arDetect', `[ArDetect::frameCheck] Detected blackbar violation and pillarbox. Resetting to default aspect ratio.`);
-            this.conf.resizer.setAr({type: AspectRatio.Automatic, ratio: this.getDefaultAr()});
+            this.conf.resizer.setAr({type: AspectRatioType.Automatic, ratio: this.getDefaultAr()});
             this.guardLine.reset();
           }
 
@@ -774,7 +774,7 @@ class ArDetector {
       // WE DO NOT RESET ASPECT RATIO HERE IN CASE OF PROBLEMS, CAUSES UNWARRANTED RESETS: 
       // (eg. here: https://www.youtube.com/watch?v=nw5Z93Yt-UQ&t=410)
       //
-      // this.conf.resizer.setAr({type: AspectRatio.Automatic, ratio: this.getDefaultAr()});
+      // this.conf.resizer.setAr({type: AspectRatioType.Automatic, ratio: this.getDefaultAr()});
     }
 
     this.clearImageData(imageData);
diff --git a/src/ext/lib/ar-detect/edge-detect/EdgeDetect.js b/src/ext/lib/ar-detect/edge-detect/EdgeDetect.js
index 8931667..421416d 100644
--- a/src/ext/lib/ar-detect/edge-detect/EdgeDetect.js
+++ b/src/ext/lib/ar-detect/edge-detect/EdgeDetect.js
@@ -2,7 +2,7 @@ import Debug from '../../../conf/Debug';
 import EdgeStatus from './enums/EdgeStatusEnum';
 import EdgeDetectQuality from './enums/EdgeDetectQualityEnum';
 import EdgeDetectPrimaryDirection from './enums/EdgeDetectPrimaryDirectionEnum';
-import AntiGradientMode from '../../../../common/enums/anti-gradient-mode.enum'; 
+import AntiGradientMode from '../../../../common/enums/AntiGradientMode.enum'; 
 
 if (Debug.debug) {
   console.log("Loading EdgeDetect.js");
diff --git a/src/ext/lib/video-data/PageInfo.js b/src/ext/lib/video-data/PageInfo.js
index fbf0264..7536fe8 100644
--- a/src/ext/lib/video-data/PageInfo.js
+++ b/src/ext/lib/video-data/PageInfo.js
@@ -1,8 +1,8 @@
 import Debug from '../../conf/Debug';
 import VideoData from './VideoData';
 import RescanReason from './enums/RescanReason';
-import AspectRatio from '../../../common/enums/aspect-ratio.enum';
-import CropModePersistence from '../../../common/enums/crop-mode-persistence.enum';
+import AspectRatioType from '../../../common/enums/AspectRatioType.enum';
+import CropModePersistence from '../../../common/enums/CropModePersistence.enum';
 
 if (process.env.CHANNEL !== 'stable'){
   console.info("Loading PageInfo");
@@ -414,7 +414,7 @@ class PageInfo {
   setAr(ar, playingOnly){
     this.logger.log('info', 'debug', '[PageInfo::setAr] aspect ratio:', ar, "playing only?", playingOnly)
 
-    if (ar.type !== AspectRatio.Automatic) {
+    if (ar.type !== AspectRatioType.Automatic) {
       this.stopArDetection(playingOnly);
     } else {
       this.logger.log('info', 'debug', '[PageInfo::setAr] aspect ratio is auto');
@@ -434,7 +434,7 @@ class PageInfo {
     }
 
     // TODO: find a way to only change aspect ratio for one video
-    if (ar === AspectRatio.Reset) {
+    if (ar === AspectRatioType.Reset) {
       for (var vd of this.videos) {
         if (!playingOnly || vd.isPlaying()) {
           vd.resetAr();
diff --git a/src/ext/lib/video-data/PlayerData.ts b/src/ext/lib/video-data/PlayerData.ts
index e289a40..075c7a7 100644
--- a/src/ext/lib/video-data/PlayerData.ts
+++ b/src/ext/lib/video-data/PlayerData.ts
@@ -1,6 +1,6 @@
 import Debug from '../../conf/Debug';
-import ExtensionMode from '../../../common/enums/extension-mode.enum'
-import AspectRatio from '../../../common/enums/aspect-ratio.enum';
+import ExtensionMode from '../../../common/enums/ExtensionMode.enum'
+import AspectRatioType from '../../../common/enums/AspectRatioType.enum';
 import PlayerNotificationUi from '../uwui/PlayerNotificationUI';
 import PlayerUi from '../uwui/PlayerUI';
 import BrowserDetect from '../../conf/BrowserDetect';
diff --git a/src/ext/lib/video-data/VideoData.ts b/src/ext/lib/video-data/VideoData.ts
index 36664a1..524a799 100644
--- a/src/ext/lib/video-data/VideoData.ts
+++ b/src/ext/lib/video-data/VideoData.ts
@@ -2,7 +2,7 @@ import Debug from '../../conf/Debug';
 import PlayerData from './PlayerData';
 import Resizer from '../video-transform/Resizer';
 import ArDetector from '../ar-detect/ArDetector';
-import AspectRatio from '../../../common/enums/aspect-ratio.enum';
+import AspectRatioType from '../../../common/enums/AspectRatioType.enum';
 import * as _ from 'lodash';
 import BrowserDetect from '../../conf/BrowserDetect';
 import Logger from '../Logger';
@@ -570,7 +570,7 @@ class VideoData {
       return;
     }
     
-    if (ar.type === AspectRatio.Fixed || ar.type === AspectRatio.FitHeight || ar.type === AspectRatio.FitHeight) {
+    if (ar.type === AspectRatioType.Fixed || ar.type === AspectRatioType.FitHeight || ar.type === AspectRatioType.FitHeight) {
       this.player.forceRefreshPlayerElement();
     }
 
diff --git a/src/ext/lib/video-transform/Resizer.ts b/src/ext/lib/video-transform/Resizer.ts
index c8679b4..5b5fd95 100644
--- a/src/ext/lib/video-transform/Resizer.ts
+++ b/src/ext/lib/video-transform/Resizer.ts
@@ -3,11 +3,11 @@ import Scaler from './Scaler';
 import Stretcher from './Stretcher';
 import Zoom from './Zoom';
 import PlayerData from '../video-data/PlayerData';
-import ExtensionMode from '../../../common/enums/extension-mode.enum';
-import Stretch from '../../../common/enums/stretch.enum';
-import VideoAlignment from '../../../common/enums/video-alignment.enum';
-import AspectRatio from '../../../common/enums/aspect-ratio.enum';
-import CropModePersistance from '../../../common/enums/crop-mode-persistence.enum';
+import ExtensionMode from '../../../common/enums/ExtensionMode.enum';
+import StretchType from '../../../common/enums/StretchType.enum';
+import VideoAlignmentType from '../../../common/enums/VideoAlignmentType.enum';
+import AspectRatioType from '../../../common/enums/AspectRatioType.enum';
+import CropModePersistance from '../../../common/enums/CropModePersistence.enum';
 import { sleep } from '../Util';
 import Logger from '../Logger';
 import Settings from '../Settings';
@@ -43,7 +43,7 @@ class Resizer {
   currentPlayerStyleString: any;
   currentCssValidFor: any;
   currentVideoSettings: any;
-  lastAr: {type: any, ratio?: number} = {type: AspectRatio.Initial};
+  lastAr: {type: any, ratio?: number} = {type: AspectRatioType.Initial};
   resizerId: any;
   videoAlignment: any;
   userCss: string;
@@ -98,12 +98,12 @@ class Resizer {
 
   calculateRatioForLegacyOptions(ar){
     // also present as modeToAr in Scaler.js
-    if (ar.type !== AspectRatio.FitWidth && ar.type !== AspectRatio.FitHeight && ar.ratio) {
+    if (ar.type !== AspectRatioType.FitWidth && ar.type !== AspectRatioType.FitHeight && ar.ratio) {
       return ar;
     }
     // Skrbi za "stare" možnosti, kot na primer "na širino zaslona", "na višino zaslona" in "ponastavi". 
     // Približevanje opuščeno.
-    // handles "legacy" options, such as 'fit to widht', 'fit to height' and AspectRatio.Reset. No zoom tho
+    // handles "legacy" options, such as 'fit to widht', 'fit to height' and AspectRatioType.Reset. No zoom tho
     var ratioOut;
 
     if (!this.conf.video) {
@@ -128,13 +128,13 @@ class Resizer {
     
     var fileAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
       
-    if (ar.type === AspectRatio.FitWidth){
+    if (ar.type === AspectRatioType.FitWidth){
       ar.ratio = ratioOut > fileAr ? ratioOut : fileAr;
     }
-    else if(ar.type === AspectRatio.FitHeight){
+    else if(ar.type === AspectRatioType.FitHeight){
       ar.ratio = ratioOut < fileAr ? ratioOut : fileAr;
     }
-    else if(ar.type === AspectRatio.Reset){
+    else if(ar.type === AspectRatioType.Reset){
       this.logger.log('info', 'debug', "[Scaler.js::modeToAr] Using original aspect ratio -", fileAr);
       ar.ratio = fileAr;
     } else {
@@ -152,7 +152,7 @@ class Resizer {
 
     // Some options require a bit more testing re: whether they make sense
     // if they don't, we refuse to update aspect ratio until they do
-    if (ar.type === AspectRatio.Automatic || ar.type === AspectRatio.Fixed) {
+    if (ar.type === AspectRatioType.Automatic || ar.type === AspectRatioType.Fixed) {
       if (!ar.ratio || isNaN(ar.ratio)) {
         return;
       }
@@ -184,9 +184,9 @@ class Resizer {
     let stretchFactors: {xFactor: number, yFactor: number, arCorrectionFactor?: number, ratio?: number} | any;
 
     // 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
+    // AspectRatioType.Fixed when zooming, so let's keep that in mind
     if (
-      (ar.type !== AspectRatio.Fixed && ar.type !== AspectRatio.Manual) // anything not these two _always_ changes AR
+      (ar.type !== AspectRatioType.Fixed && ar.type !== AspectRatioType.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
       ) {
@@ -198,9 +198,9 @@ class Resizer {
     // this means here's the optimal place to set or forget aspect ratio. Saving of current crop ratio
     // is handled in pageInfo.updateCurrentCrop(), which also makes sure to persist aspect ratio if ar
     // is set to persist between videos / through current session / until manual reset.
-    if (ar.type === AspectRatio.Automatic || 
-        ar.type === AspectRatio.Reset ||
-        ar.type === AspectRatio.Initial ) {
+    if (ar.type === AspectRatioType.Automatic || 
+        ar.type === AspectRatioType.Reset ||
+        ar.type === AspectRatioType.Initial ) {
       // reset/undo default 
       this.conf.pageInfo.updateCurrentCrop(undefined);
     } else {
@@ -221,7 +221,7 @@ class Resizer {
       this.lastAr = {type: ar.type, ratio: ar.ratio}
     }
 
-    // if (this.extensionMode === ExtensionMode.Basic && !PlayerData.isFullScreen() && ar.type !== AspectRatio.Reset) {
+    // if (this.extensionMode === ExtensionMode.Basic && !PlayerData.isFullScreen() && ar.type !== AspectRatioType.Reset) {
     //   // don't actually apply or calculate css when using basic mode if not in fullscreen
     //   //  ... unless we're resetting the aspect ratio to original
     //   return; 
@@ -236,18 +236,18 @@ class Resizer {
     // * 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) {
+    if (ar.type !== AspectRatioType.Automatic || this.stretcher.mode === StretchType.Basic) {
       this.conf?.arDetector?.pause();
     } else {
-      if (this.lastAr.type === AspectRatio.Automatic) {
+      if (this.lastAr.type === AspectRatioType.Automatic) {
         this.conf?.arDetector?.unpause();
       }
     }
 
     // do stretch thingy
-    if (this.stretcher.mode === Stretch.NoStretch 
-        || this.stretcher.mode === Stretch.Conditional 
-        || this.stretcher.mode === Stretch.FixedSource){
+    if (this.stretcher.mode === StretchType.NoStretch 
+        || this.stretcher.mode === StretchType.Conditional 
+        || this.stretcher.mode === StretchType.FixedSource){
      
       stretchFactors = this.scaler.calculateCrop(ar);
 
@@ -268,25 +268,25 @@ class Resizer {
         }
       }
 
-      if (this.stretcher.mode === Stretch.Conditional){
+      if (this.stretcher.mode === StretchType.Conditional){
         this.stretcher.applyConditionalStretch(stretchFactors, ar.ratio);
-      } else if (this.stretcher.mode === Stretch.FixedSource) {
+      } else if (this.stretcher.mode === StretchType.FixedSource) {
         this.stretcher.applyStretchFixedSource(stretchFactors);
       }
       this.logger.log('info', 'debug', "[Resizer::setAr] Processed stretch factors for ",
-                      this.stretcher.mode === Stretch.NoStretch ? 'stretch-free crop.' : 
-                        this.stretcher.mode === Stretch.Conditional ? 'crop with conditional stretch.' : 'crop with fixed stretch',
+                      this.stretcher.mode === StretchType.NoStretch ? 'stretch-free crop.' : 
+                        this.stretcher.mode === StretchType.Conditional ? 'crop with conditional StretchType.' : 'crop with fixed stretch',
                       'Stretch factors are:', stretchFactors
       );
 
-    } else if (this.stretcher.mode === Stretch.Hybrid) {
+    } else if (this.stretcher.mode === StretchType.Hybrid) {
       stretchFactors = this.stretcher.calculateStretch(ar.ratio);
       this.logger.log('info', 'debug', '[Resizer::setAr] Processed stretch factors for hybrid stretch/crop. Stretch factors are:', stretchFactors);
-    } else if (this.stretcher.mode === Stretch.Fixed) {
+    } else if (this.stretcher.mode === StretchType.Fixed) {
       stretchFactors = this.stretcher.calculateStretchFixed(ar.ratio)
-    } else if (this.stretcher.mode === Stretch.Basic) {
+    } else if (this.stretcher.mode === StretchType.Basic) {
       stretchFactors = this.stretcher.calculateBasicStretch();
-      this.logger.log('info', 'debug', '[Resizer::setAr] Processed stretch factors for basic stretch. Stretch factors are:', stretchFactors);
+      this.logger.log('info', 'debug', '[Resizer::setAr] Processed stretch factors for basic StretchType. Stretch factors are:', stretchFactors);
     } else {
       stretchFactors = {xFactor: 1, yFactor: 1};
       this.logger.log('error', 'debug', '[Resizer::setAr] Okay wtf happened? If you see this, something has gone wrong', stretchFactors,"\n------[ i n f o   d u m p ]------\nstretcher:", this.stretcher);
@@ -309,12 +309,12 @@ class Resizer {
     // converting to fixed AR means we also turn off autoAR
     this.setAr({
       ratio: this.lastAr.ratio,
-      type: AspectRatio.Fixed
+      type: AspectRatioType.Fixed
     });
   }
 
   resetLastAr() {
-    this.lastAr = {type: AspectRatio.Initial};
+    this.lastAr = {type: AspectRatioType.Initial};
   }
 
   setLastAr(override){
@@ -336,10 +336,10 @@ class Resizer {
         return;
       }
       // dont allow weird floats
-      this.videoAlignment = VideoAlignment.Center;
+      this.videoAlignment = VideoAlignmentType.Center;
 
       // because non-fixed aspect ratios reset panning:
-      if (this.lastAr.type !== AspectRatio.Fixed) {
+      if (this.lastAr.type !== AspectRatioType.Fixed) {
         this.toFixedAr();
       }
 
@@ -385,8 +385,8 @@ class Resizer {
     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){
-      this.setAr({type: AspectRatio.Reset});
+    if(this.lastAr.type === AspectRatioType.Initial){
+      this.setAr({type: AspectRatioType.Reset});
     }
     else {
       if (this.lastAr?.ratio === null) {
@@ -402,7 +402,7 @@ class Resizer {
     this.setStretchMode(this.settings.active.sites[window.location.hostname]?.stretch ?? this.settings.active.sites['@global'].stretch);
     this.zoom.setZoom(1);
     this.resetPan();
-    this.setAr({type: AspectRatio.Reset});
+    this.setAr({type: AspectRatioType.Reset});
   }
 
   setPanMode(mode) {
@@ -429,11 +429,11 @@ class Resizer {
   }
 
   resetCrop(){
-    this.setAr({type: AspectRatio.Reset});
+    this.setAr({type: AspectRatioType.Reset});
   }
 
   resetStretch(){
-    this.stretcher.setStretchMode(Stretch.NoStretch);
+    this.stretcher.setStretchMode(StretchType.NoStretch);
     this.restore();
   }
 
@@ -535,10 +535,10 @@ class Resizer {
         translate.y += hdiffAfterZoom * this.pan.relativeOffsetY * this.zoom.scale;
       }
     } else {
-      if (this.videoAlignment == VideoAlignment.Left) {
+      if (this.videoAlignment == VideoAlignmentType.Left) {
         translate.x += wdiffAfterZoom * 0.5;
       }
-      else if (this.videoAlignment == VideoAlignment.Right) {
+      else if (this.videoAlignment == VideoAlignmentType.Right) {
         translate.x -= wdiffAfterZoom * 0.5;
       }
     }
diff --git a/src/ext/lib/video-transform/Scaler.js b/src/ext/lib/video-transform/Scaler.js
index 5a09846..43b24ac 100644
--- a/src/ext/lib/video-transform/Scaler.js
+++ b/src/ext/lib/video-transform/Scaler.js
@@ -1,5 +1,5 @@
 import Debug from '../../conf/Debug';
-import AspectRatio from '../../../common/enums/aspect-ratio.enum';
+import AspectRatioType from '../../../common/enums/AspectRatioType.enum';
 import BrowserDetect from '../../conf/BrowserDetect';
 
 
@@ -19,9 +19,9 @@ class Scaler {
 
   // Skrbi za "stare" možnosti, kot na primer "na širino zaslona", "na višino zaslona" in "ponastavi". 
   // Približevanje opuščeno.
-  // handles "legacy" options, such as 'fit to widht', 'fit to height' and AspectRatio.Reset. No zoom tho
+  // handles "legacy" options, such as 'fit to widht', 'fit to height' and AspectRatioType.Reset. No zoom tho
   modeToAr (ar) {
-    if (ar.type !== AspectRatio.FitWidth && ar.type !== AspectRatio.FitHeight && ar.ratio) {
+    if (ar.type !== AspectRatioType.FitWidth && ar.type !== AspectRatioType.FitHeight && ar.ratio) {
       return ar.ratio; 
     }
 
@@ -48,17 +48,17 @@ class Scaler {
     
     var fileAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
       
-    if (ar.type === AspectRatio.FitWidth) {
+    if (ar.type === AspectRatioType.FitWidth) {
       ratioOut > fileAr ? ratioOut : fileAr
       ar.ratio = ratioOut;
       return ratioOut;
     }
-    else if (ar.type === AspectRatio.FitHeight) {
+    else if (ar.type === AspectRatioType.FitHeight) {
       ratioOut < fileAr ? ratioOut : fileAr
       ar.ratio = ratioOut;
       return ratioOut;
     }
-    else if (ar.type === AspectRatio.Reset) {
+    else if (ar.type === AspectRatioType.Reset) {
       this.logger.log('info', 'debug', "[Scaler.js::modeToAr] Using original aspect ratio -", fileAr)
       ar.ar = fileAr;
       return fileAr;
@@ -76,7 +76,7 @@ class Scaler {
      * undoes any zoom that style="height:123%" on the video element adds. 
      * 
      * There are few exceptions and additional caveatss:
-     *   * AspectRatio.FitHeight: we don't want to pre-downscale the video at all, as things
+     *   * AspectRatioType.FitHeight: we don't want to pre-downscale the video at all, as things
      *     will be scaled to fit height as-is.
      *   * When player is wider than stream, we want to undo any height compensations site
      *     tacks on the video tag.
@@ -94,10 +94,10 @@ class Scaler {
 
     let arCorrectionFactor = 1;
 
-    if (ar.type !== AspectRatio.FitHeight) {
+    if (ar.type !== AspectRatioType.FitHeight) {
       if (playerAr < compensatedStreamAr) {
         arCorrectionFactor = this.conf.player.dimensions.width / this.conf.video.offsetWidth;
-      } else if (ar.type !== AspectRatio.Reset) {
+      } else if (ar.type !== AspectRatioType.Reset) {
         arCorrectionFactor /= heightCompensationFactor;
       }
     }
@@ -116,7 +116,7 @@ class Scaler {
       return {error: "illegal_video_dimensions"};
     }
 
-    if (ar.type === AspectRatio.Reset){
+    if (ar.type === AspectRatioType.Reset){
       return {xFactor: arCorrectionFactor, yFactor: arCorrectionFactor, arCorrectionFactor: arCorrectionFactor}
     }
 
@@ -139,7 +139,7 @@ class Scaler {
     // Dejansko razmerje stranic datoteke/<video> značke
     // Actual aspect ratio of the file/<video> tag
 
-    if (ar.type === AspectRatio.Initial || !ar.ratio) {
+    if (ar.type === AspectRatioType.Initial || !ar.ratio) {
       ar.ratio = streamAr;
     }
 
diff --git a/src/ext/lib/video-transform/Stretcher.ts b/src/ext/lib/video-transform/Stretcher.ts
index 50ca385..9f826a2 100644
--- a/src/ext/lib/video-transform/Stretcher.ts
+++ b/src/ext/lib/video-transform/Stretcher.ts
@@ -1,6 +1,6 @@
-import Stretch from '../../../common/enums/stretch.enum';
+import StretchType from '../../../common/enums/StretchType.enum';
 import BrowserDetect from '../../conf/BrowserDetect';
-import AspectRatio from '../../../common/enums/aspect-ratio.enum';
+import AspectRatioType from '../../../common/enums/AspectRatioType.enum';
 import VideoData from '../video-data/VideoData';
 import Logger from '../Logger';
 import Settings from '../Settings';
@@ -36,10 +36,10 @@ class Stretcher {
   }
 
   setStretchMode(stretchMode, fixedStretchRatio?) {
-    if (stretchMode === Stretch.Default) {
+    if (stretchMode === StretchType.Default) {
       this.mode = this.settings.getDefaultStretchMode(window.location.hostname);
     } else {
-      if (stretchMode === Stretch.Fixed || stretchMode == Stretch.FixedSource) {
+      if (stretchMode === StretchType.Fixed || stretchMode == StretchType.FixedSource) {
         this.fixedStretchRatio = fixedStretchRatio;
       }
       this.mode = stretchMode;
@@ -68,11 +68,11 @@ class Stretcher {
       actualWidth = newWidth;
     }
 
-    var minW = this.conf.player.dimensions.width * (1 - this.settings.active.stretch.conditionalDifferencePercent);
-    var maxW = this.conf.player.dimensions.width * (1 + this.settings.active.stretch.conditionalDifferencePercent);
+    var minW = this.conf.player.dimensions.width * (1 - this.settings.active.StretchType.conditionalDifferencePercent);
+    var maxW = this.conf.player.dimensions.width * (1 + this.settings.active.StretchType.conditionalDifferencePercent);
 
-    var minH = this.conf.player.dimensions.height * (1 - this.settings.active.stretch.conditionalDifferencePercent);
-    var maxH = this.conf.player.dimensions.height * (1 + this.settings.active.stretch.conditionalDifferencePercent);
+    var minH = this.conf.player.dimensions.height * (1 - this.settings.active.StretchType.conditionalDifferencePercent);
+    var maxH = this.conf.player.dimensions.height * (1 + this.settings.active.StretchType.conditionalDifferencePercent);
 
     if (actualWidth >= minW && actualWidth <= maxW) {
       stretchFactors.xFactor *= this.conf.player.dimensions.width / actualWidth;
@@ -260,7 +260,7 @@ squeezeFactor:          ${squeezeFactor}`, '\nvideo', this.conf.video);
    *   * user is using a noVideo card
    *   * user is in full screen mode
    *   * the video is both roughly taller and roughly wider than the monitor
-   * Then the video will do Stretch.Basic no matter what you put in `transform: scale(x,y)`.
+   * Then the video will do StretchType.Basic no matter what you put in `transform: scale(x,y)`.
    * 
    * In practice, the issue appears slightly _before_ the last condition is met (video needs to be ~3434 px wide
    * in order for this bug to trigger on my 3440x1440 display).
diff --git a/src/ext/uw.js b/src/ext/uw.js
index cdf768e..351ec0d 100644
--- a/src/ext/uw.js
+++ b/src/ext/uw.js
@@ -1,6 +1,6 @@
 import Debug from './conf/Debug';
 import BrowserDetect from './conf/BrowserDetect';
-import ExtensionMode from '../common/enums/extension-mode.enum';
+import ExtensionMode from '../common/enums/ExtensionMode.enum';
 import Settings from './lib/Settings';
 import ActionHandler from './lib/ActionHandler';
 import Comms from './lib/comms/Comms';
diff --git a/src/options/GeneralSettings.vue b/src/options/GeneralSettings.vue
index ce42e2f..fb0f3bc 100644
--- a/src/options/GeneralSettings.vue
+++ b/src/options/GeneralSettings.vue
@@ -57,16 +57,16 @@
     </div>
     <div class="flex flex-row button-box">
       <Button label="Left" 
-              :selected="settings.active.sites['@global'].videoAlignment === VideoAlignment.Left"
-              @click.native="setDefaultvideoAlignment(VideoAlignment.Left)"> 
+              :selected="settings.active.sites['@global'].videoAlignment === VideoAlignmentType.Left"
+              @click.native="setDefaultvideoAlignment(VideoAlignmentType.Left)"> 
       </Button>
       <Button label="Center"
-              :selected="settings.active.sites['@global'].videoAlignment === VideoAlignment.Center"
-              @click.native="setDefaultvideoAlignment(VideoAlignment.Center)">
+              :selected="settings.active.sites['@global'].videoAlignment === VideoAlignmentType.Center"
+              @click.native="setDefaultvideoAlignment(VideoAlignmentType.Center)">
       </Button>
       <Button label="Right"
-              :selected="settings.active.sites['@global'].videoAlignment === VideoAlignment.Right"
-              @click.native="setDefaultvideoAlignment(VideoAlignment.Right)">
+              :selected="settings.active.sites['@global'].videoAlignment === VideoAlignmentType.Right"
+              @click.native="setDefaultvideoAlignment(VideoAlignmentType.Right)">
       </Button>
     </div>
 
@@ -75,20 +75,20 @@
     </div>
     <div class="flex flex-row button-box">
       <Button label="Don't stretch"
-              :selected="settings.active.sites['@global'].stretch === Stretch.NoStretch"
-              @click.native="setDefaultStretchingMode(Stretch.NoStretch)"> 
+              :selected="settings.active.sites['@global'].stretch === StretchType.NoStretch"
+              @click.native="setDefaultStretchingMode(StretchType.NoStretch)"> 
       </Button>
       <Button label="Basic stretch"
-              :selected="settings.active.sites['@global'].stretch === Stretch.Basic"
-              @click.native="setDefaultStretchingMode(Stretch.Basic)">
+              :selected="settings.active.sites['@global'].stretch === StretchType.Basic"
+              @click.native="setDefaultStretchingMode(StretchType.Basic)">
       </Button>
       <Button label="Hybrid stretch"
-              :selected="settings.active.sites['@global'].stretch === Stretch.Hybrid"
-              @click.native="setDefaultStretchingMode(Stretch.Hybrid)">
+              :selected="settings.active.sites['@global'].stretch === StretchType.Hybrid"
+              @click.native="setDefaultStretchingMode(StretchType.Hybrid)">
       </Button>
       <Button label="Thin borders only"
-              :selected="settings.active.sites['@global'].stretch === Stretch.Conditional"
-              @click.native="setDefaultStretchingMode(Stretch.Conditional)"
+              :selected="settings.active.sites['@global'].stretch === StretchType.Conditional"
+              @click.native="setDefaultStretchingMode(StretchType.Conditional)"
       >
       </Button>
     </div>
@@ -108,7 +108,7 @@
         <div class="flex flex-input">
           <input type="number"
                 step="any"
-                :value="settings.active.stretch.conditionalDifferencePercent"
+                :value="settings.active.StretchType.conditionalDifferencePercent"
                 @input="updateStretchThreshold($event.target.value)"
                 >
         </div>
@@ -152,9 +152,9 @@
 
 <script>
 import Button from '../common/components/Button';
-import Stretch from '../common/enums/stretch.enum';
-import ExtensionMode from '../common/enums/extension-mode.enum';
-import VideoAlignment from '../common/enums/video-alignment.enum';
+import StretchType from '../common/enums/StretchType.enum';
+import ExtensionMode from '../common/enums/ExtensionMode.enum';
+import VideoAlignmentType from '../common/enums/VideoAlignmentType.enum';
 import BrowserDetect from '../ext/conf/BrowserDetect';
 
 export default {
@@ -198,7 +198,7 @@ export default {
       if (!newThreshold || isNaN(newThreshold)) {
         return;
       }
-      this.settings.active.stretch.conditionalDifferencePercent = newThreshold;
+      this.settings.active.StretchType.conditionalDifferencePercent = newThreshold;
       this.settings.save();
     },
     resetSettings() {
diff --git a/src/options/controls-settings/AddEditActionPopup.vue b/src/options/controls-settings/AddEditActionPopup.vue
index b390da7..3113653 100644
--- a/src/options/controls-settings/AddEditActionPopup.vue
+++ b/src/options/controls-settings/AddEditActionPopup.vue
@@ -102,7 +102,7 @@
 
 <script>
 import ShortcutButton from '../../common/components/ShortcutButton.vue' 
-import Stretch from '../../common/enums/stretch.enum';
+import StretchType from '../../common/enums/StretchType.enum';
 import KeyboardShortcutParser from '../../common/js/KeyboardShortcutParser';
 import CommandChain from './command-builder/CommandChain';
 import CommandAddEdit from './command-builder/CommandAddEdit';
diff --git a/src/options/controls-settings/ControlsSettings.vue b/src/options/controls-settings/ControlsSettings.vue
index d03e596..f442ca8 100644
--- a/src/options/controls-settings/ControlsSettings.vue
+++ b/src/options/controls-settings/ControlsSettings.vue
@@ -111,7 +111,7 @@
 
 <script>
 import Button from '../../common/components/Button';
-import Stretch from '../../common/enums/stretch.enum';
+import StretchType from '../../common/enums/StretchType.enum';
 import ActionAlt from '../../common/components/ActionAlt';
 
 export default {
diff --git a/src/options/controls-settings/command-builder/CommandAddEdit.vue b/src/options/controls-settings/command-builder/CommandAddEdit.vue
index 7d6631c..97b19e0 100644
--- a/src/options/controls-settings/command-builder/CommandAddEdit.vue
+++ b/src/options/controls-settings/command-builder/CommandAddEdit.vue
@@ -89,7 +89,7 @@
 
 <script>
 import ActionList from '../../../ext/conf/ActionList';
-import Stretch from '../../../common/enums/stretch.enum';
+import StretchType from '../../../common/enums/StretchType.enum';
 
 export default {
   data () {
diff --git a/src/popup/App.vue b/src/popup/App.vue
index 5e677fe..ec50f96 100644
--- a/src/popup/App.vue
+++ b/src/popup/App.vue
@@ -219,7 +219,7 @@ import Settings from '../ext/lib/Settings';
 import ExecAction from './js/ExecAction.js';
 import DefaultSettingsPanel from './panels/DefaultSettingsPanel';
 import AboutPanel from './panels/AboutPanel';
-import ExtensionMode from '../common/enums/extension-mode.enum';
+import ExtensionMode from '../common/enums/ExtensionMode.enum';
 import Logger from '../ext/lib/Logger';
 import {ChromeShittinessMitigations as CSM} from '../common/js/ChromeShittinessMitigations';
 
diff --git a/src/popup/js/ExecAction.js b/src/popup/js/ExecAction.js
index a5a0afa..6baf140 100644
--- a/src/popup/js/ExecAction.js
+++ b/src/popup/js/ExecAction.js
@@ -59,7 +59,7 @@ class ExecAction {
           this.settings.active.sites[site].stretch = cmd.arg;
         } else if (cmd.action === "set-alignment") {
           this.settings.active.sites[site].videoAlignment = cmd.arg;
-        } else if (cmd.action === "set-extension-mode") {
+        } else if (cmd.action === "set-ExtensionMode") {
           this.settings.active.sites[site].mode = cmd.arg;
         } else if (cmd.action === "set-autoar-mode") {
           this.settings.active.sites[site].autoar = cmd.arg;
diff --git a/src/popup/panels/SiteDetailsPanel.vue b/src/popup/panels/SiteDetailsPanel.vue
index ebe483a..0e5d5fd 100644
--- a/src/popup/panels/SiteDetailsPanel.vue
+++ b/src/popup/panels/SiteDetailsPanel.vue
@@ -130,9 +130,9 @@
 import ShortcutButton from '../../common/components/ShortcutButton.vue';
 import QsElement from '../../common/components/QsElement.vue';
 import QuerySelectorSetting from '../../common/components/QuerySelectorSetting.vue';
-import ExtensionMode from '../../common/enums/extension-mode.enum';
-import VideoAlignment from '../../common/enums/video-alignment.enum';
-import Stretch from '../../common/enums/stretch.enum';
+import ExtensionMode from '../../common/enums/ExtensionMode.enum';
+import VideoAlignmentType from '../../common/enums/VideoAlignmentType.enum';
+import StretchType from '../../common/enums/StretchType.enum';
 export default {
   components: {
     QuerySelectorSetting,
@@ -186,8 +186,8 @@ export default {
           mode: ExtensionMode.Default,
           autoar: ExtensionMode.Default,
           type: 'user-added',
-          stretch: Stretch.Default,
-          videoAlignment: VideoAlignment.Default,
+          stretch: StretchType.Default,
+          videoAlignment: VideoAlignmentType.Default,
           keyboardShortcutsEnabled: ExtensionMode.Default,
         }
       }
diff --git a/src/popup/panels/VideoPanel.vue b/src/popup/panels/VideoPanel.vue
index 72f1968..175b3cf 100644
--- a/src/popup/panels/VideoPanel.vue
+++ b/src/popup/panels/VideoPanel.vue
@@ -125,7 +125,7 @@ import ExecAction from '../js/ExecAction';
 import KeyboardShortcutParser from '../../common/js/KeyboardShortcutParser';
 import ShortcutButton from '../../common/components/ShortcutButton';
 import ComputeActionsMixin from '../../common/mixins/ComputeActionsMixin';
-import CropModePersistence from '../../common/enums/crop-mode-persistence.enum';
+import CropModePersistence from '../../common/enums/CropModePersistence.enum';
 
 export default {
   data() {

From 4fdd6af291d2f4e877cc04c007cb58b94213d34c Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Mon, 8 Feb 2021 23:23:15 +0100
Subject: [PATCH 35/68] Add additional types

---
 package-lock.json | 53 ++++++++++++++++++++++++++++++++++++++++++++---
 package.json      |  8 +++++--
 tsconfig.json     | 12 +++++++++--
 3 files changed, 66 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6c79e46..3a96fba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4195,6 +4195,15 @@
         "@types/node": "*"
       }
     },
+    "@types/chrome": {
+      "version": "0.0.129",
+      "resolved": "https://registry.npmjs.org/@types/chrome/-/chrome-0.0.129.tgz",
+      "integrity": "sha512-7SdqJ7YFu8wBI13SRbxWibHG7W3W3N2Cdn2hRHw24tWiLBZGC2OOfIKREQyga8AeT83AaVcTirWDVMrph0Gkkw==",
+      "requires": {
+        "@types/filesystem": "*",
+        "@types/har-format": "*"
+      }
+    },
     "@types/connect": {
       "version": "3.4.33",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.33.tgz",
@@ -4266,6 +4275,24 @@
         "@types/range-parser": "*"
       }
     },
+    "@types/filesystem": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/filesystem/-/filesystem-0.0.29.tgz",
+      "integrity": "sha512-85/1KfRedmfPGsbK8YzeaQUyV1FQAvMPMTuWFQ5EkLd2w7szhNO96bk3Rh/SKmOfd9co2rCLf0Voy4o7ECBOvw==",
+      "requires": {
+        "@types/filewriter": "*"
+      }
+    },
+    "@types/filewriter": {
+      "version": "0.0.28",
+      "resolved": "https://registry.npmjs.org/@types/filewriter/-/filewriter-0.0.28.tgz",
+      "integrity": "sha1-wFTor02d11205jq8dviFFocU1LM="
+    },
+    "@types/firefox": {
+      "version": "0.0.30",
+      "resolved": "https://registry.npmjs.org/@types/firefox/-/firefox-0.0.30.tgz",
+      "integrity": "sha512-Y6Bs036XutwerwekFx4j+M2h78H/GDlNcWbtT+DBlPX5VcpIctGai6RoSJZp7hqABEbUVI3FmA66gmgV4n+Aew=="
+    },
     "@types/fs-capacitor": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@types/fs-capacitor/-/fs-capacitor-2.0.0.tgz",
@@ -4301,6 +4328,11 @@
         }
       }
     },
+    "@types/har-format": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@types/har-format/-/har-format-1.2.5.tgz",
+      "integrity": "sha512-IG8AE1m2pWtPqQ7wXhFhy6Q59bwwnLwO36v5Rit2FrbXCIp8Sk8E2PfUCreyrdo17STwFSKDAkitVuVYbpEHvQ=="
+    },
     "@types/http-assert": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/@types/http-assert/-/http-assert-1.5.1.tgz",
@@ -4413,9 +4445,9 @@
       "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA=="
     },
     "@types/node": {
-      "version": "14.14.10",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.10.tgz",
-      "integrity": "sha512-J32dgx2hw8vXrSbu4ZlVhn1Nm3GbeCFNw2FWL8S5QKucHGY0cyNwjdQdO+KMBZ4wpmC7KhLCiNsdk1RFRIYUQQ=="
+      "version": "14.14.25",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.25.tgz",
+      "integrity": "sha512-EPpXLOVqDvisVxtlbvzfyqSsFeQxltFbluZNRndIb8tr9KiBnYNLzrc1N3pyKUCww2RNrfHDViqDWWE1LCJQtQ=="
     },
     "@types/node-fetch": {
       "version": "2.5.7",
@@ -18006,6 +18038,21 @@
       "integrity": "sha512-PlYwiX8e4bNZrEeBFxbFFsLtm0SMPxJliLTGdNCA0Bq2XkWrAn2ejUd+89vZm+8BnfFB1BclJyCz3iKsm2atNg==",
       "dev": true
     },
+    "webextension-polyfill-ts": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/webextension-polyfill-ts/-/webextension-polyfill-ts-0.24.0.tgz",
+      "integrity": "sha512-JUHpVzu8WeDVFsVeyzi1Hsd7N2ylKXMlQPAfpYGktzflzwFXlvqiA48UnaH5rmv/CTQEHI0T3qfK3wVBW6nbUA==",
+      "requires": {
+        "webextension-polyfill": "^0.7.0"
+      },
+      "dependencies": {
+        "webextension-polyfill": {
+          "version": "0.7.0",
+          "resolved": "https://registry.npmjs.org/webextension-polyfill/-/webextension-polyfill-0.7.0.tgz",
+          "integrity": "sha512-su48BkMLxqzTTvPSE1eWxKToPS2Tv5DLGxKexLEVpwFd6Po6N8hhSLIvG6acPAg7qERoEaDL+Y5HQJeJeml5Aw=="
+        }
+      }
+    },
     "webpack": {
       "version": "4.44.0",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.44.0.tgz",
diff --git a/package.json b/package.json
index 93678d9..15aaaef 100644
--- a/package.json
+++ b/package.json
@@ -21,8 +21,11 @@
   },
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@types/chrome": "0.0.129",
     "@types/core-js": "^2.5.3",
     "@types/es6-promise": "^3.3.0",
+    "@types/firefox": "0.0.30",
+    "@types/node": "^14.14.25",
     "@vue/cli": "^4.5.9",
     "bootstrap": "^4.5.3",
     "bootstrap-icons": "^1.1.0",
@@ -34,7 +37,8 @@
     "lodash": "^4.17.20",
     "vue": "^3.0.0-beta.1",
     "vuex": "^4.0.0-alpha.1",
-    "vuex-webextensions": "^1.3.0"
+    "vuex-webextensions": "^1.3.0",
+    "webextension-polyfill-ts": "^0.24.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.13",
@@ -56,7 +60,7 @@
     "ts-loader": "^8.0.16",
     "vue-cli-plugin-vue-next": "~0.1.4",
     "vue-loader": "^16.0.0",
-    "web-ext-types": "^2.1.0",
+    "web-ext-types": "^2.3.0",
     "webextension-polyfill": "^0.6.0",
     "webpack": "^4.44.0",
     "webpack-chrome-extension-reloader": "^0.8.3",
diff --git a/tsconfig.json b/tsconfig.json
index f73287b..fe68d66 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,15 @@
   "compilerOptions": {
     "outDir": "./ts-out",
     "allowJs": true,
-    "target": "es2018"
+    "target": "es2018",
+    "types": [
+      "chrome",
+      "node"
+    ],
+    "typeRoots": [
+      "node_modules/@types",
+      "node_modules/web-ext-types"
+    ],
   },
-  "include": [ "./src/**/*" ]
+  "include": [ "./src/**/*" ],
 }
\ No newline at end of file

From 0117d4442271ccf21ffa41bb3f3279db7e8d38ff Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Tue, 9 Feb 2021 00:37:54 +0100
Subject: [PATCH 36/68] Move settings to typescript. Add interface for settings
 object

---
 src/common/interfaces/SettingsInterface.ts    | 280 ++++++++++++++++++
 .../{ExtensionConf.js => ExtensionConf.ts}    |   5 +-
 src/ext/lib/{Settings.js => Settings.ts}      |  68 +++--
 src/ext/lib/comms/Comms.js                    |  24 +-
 .../lib/uwui/{FontLoader.js => FontLoader.ts} |   0
 .../video-data/{PageInfo.js => PageInfo.ts}   |  64 ++--
 src/ext/lib/video-data/VideoData.ts           |   2 +-
 .../lib/video-data/enums/RescanReason.enum.ts |   7 +
 src/ext/lib/video-data/enums/RescanReason.js  |   7 -
 src/ext/lib/video-transform/Stretcher.ts      |   8 +-
 src/options/App.vue                           |  10 +-
 11 files changed, 389 insertions(+), 86 deletions(-)
 create mode 100644 src/common/interfaces/SettingsInterface.ts
 rename src/ext/conf/{ExtensionConf.js => ExtensionConf.ts} (99%)
 rename src/ext/lib/{Settings.js => Settings.ts} (93%)
 rename src/ext/lib/uwui/{FontLoader.js => FontLoader.ts} (100%)
 rename src/ext/lib/video-data/{PageInfo.js => PageInfo.ts} (92%)
 create mode 100644 src/ext/lib/video-data/enums/RescanReason.enum.ts
 delete mode 100644 src/ext/lib/video-data/enums/RescanReason.js

diff --git a/src/common/interfaces/SettingsInterface.ts b/src/common/interfaces/SettingsInterface.ts
new file mode 100644
index 0000000..8a06351
--- /dev/null
+++ b/src/common/interfaces/SettingsInterface.ts
@@ -0,0 +1,280 @@
+import { Action } from '../../../node_modules/vuex/types/index'
+import AntiGradientMode from '../enums/AntiGradientMode.enum'
+import AspectRatioType from '../enums/AspectRatioType.enum'
+import CropModePersistence from '../enums/CropModePersistence.enum'
+import ExtensionMode from '../enums/ExtensionMode.enum'
+import StretchType from '../enums/StretchType.enum'
+import VideoAlignmentType from '../enums/VideoAlignmentType.enum'
+
+interface ActionScopeInterface {
+  show: boolean,
+  label?: string,   // example override, takes precedence over default label
+  shortcut?: {
+    key?: string,
+    code?: string,
+    ctrlKey?: boolean,
+    metaKey?: boolean,
+    altKey?: boolean, 
+    shiftKey?: boolean,
+    onKeyUp?: boolean,
+    onKeyDown?: boolean,
+    onMouseMove?: boolean,
+  }[],
+}
+
+interface SettingsInterface {
+  arDetect: {
+    disabledReason: string,     // if automatic aspect ratio has been disabled, show reason
+    allowedMisaligned: number,  // top and bottom letterbox thickness can differ by this much. 
+                                // Any more and we don't adjust ar.
+    allowedArVariance: number,  // amount by which old ar can differ from the new (1 = 100%)
+    timers: {                   // autodetection frequency
+      playing: number,            // while playing
+      paused: number,             // while paused
+      error: number,              // after error
+      minimumTimeout: number,
+      tickrate: number,          // 1 tick every this many milliseconds
+    },
+    autoDisable: {            // settings for automatically disabling the extension
+      maxExecutionTime: number, // if execution time of main autodetect loop exceeds this many milliseconds,
+                              // we disable it.
+      consecutiveTimeoutCount: number,  // we only do it if it happens this many consecutive times
+
+      // FOR FUTURE USE
+      consecutiveArResets: number       // if aspect ratio reverts immediately after AR change is applied, we disable everything
+    },
+    canvasDimensions: {
+      blackframeCanvas: {   // smaller than sample canvas, blackframe canvas is used to recon for black frames
+                            // it's not used to detect aspect ratio by itself, so it can be tiny af
+        width: number,
+        height: number,
+      },
+      sampleCanvas: {   // size of image sample for detecting aspect ratio. Bigger size means more accurate results,
+                            // at the expense of performance
+        width: number,
+        height: number,
+      },
+    },
+
+    // samplingInterval: 10,     // we sample at columns at (width/this) * [ 1 .. this - 1] 
+    blackframe: {
+      sufficientColorVariance: number,  // calculate difference between average intensity and pixel, for every pixel for every color
+                                      // component. Average intensity is normalized to where 0 is black and 1 is biggest value for
+                                      // that component. If sum of differences between normalized average intensity and normalized
+                                      // component varies more than this % between color components, we can afford to use less strict
+                                      // cumulative threshold.
+      cumulativeThresholdLax: number,    
+      cumulativeThresholdStrict: number,// if we add values of all pixels together and get more than this, the frame is bright enough.
+                                 // (note: blackframe is 16x9 px -> 144px total. cumulative threshold can be reached fast)
+      blackPixelsCondition: number, // How much pixels must be black (1 all, 0 none) before we consider frame as black. Takes
+                                 // precedence over cumulative threshold: if blackPixelsCondition is met, the frame is dark
+                                 // regardless of whether cumulative threshold has been reached.
+    },
+    blackbar: {
+      blackLevel: number,         // everything darker than 10/255 across all RGB components is considered black by
+                              // default. blackLevel can decrease if we detect darker black.
+      threshold: number,          // if pixel is darker than the sum of black level and this value, we count it as black
+                              // on 0-255. Needs to be fairly high (8 might not cut it) due to compression
+                              // artifacts in the video itself
+      frameThreshold: number,      // threshold, but when doing blackframe test
+      imageThreshold: number,     // in order to detect pixel as "not black", the pixel must be brighter than
+                              // the sum of black level, threshold and this value.
+      gradientThreshold: number,   // When trying to determine thickness of the black bars, we take 2 values: position of
+                              // the last pixel that's darker than our threshold, and position of the first pixel that's
+                              // brighter than our image threshold. If positions are more than this many pixels apart,
+                              // we assume we aren't looking at letterbox and thus don't correct the aspect ratio.
+      gradientSampleSize: number, // How far do we look to find the gradient
+      maxGradient: number,         // if two neighboring pixels in gradientSampleSize differ by more than this, then we aren't
+                              // looking at a gradient
+      gradientNegativeTreshold: number,
+      gradientMaxSD: number,    // reserved for future use
+      antiGradientMode: AntiGradientMode
+    },
+    variableBlackbarThresholdOptions: {    // In case of poor bitrate videos, jpeg artifacts may cause us issues
+      // FOR FUTURE USE
+      enabled: boolean,                      // allow increasing blackbar threshold
+      disableArDetectOnMax: boolean,         // disable autodetection when threshold goes over max blackbar threshold
+      maxBlackbarThreshold: number,            // max threshold (don't increase past this)
+      thresholdStep: number,                   // when failing to set aspect ratio, increase threshold by this much
+      increaseAfterConsecutiveResets: number   // increase if AR resets this many times in a row
+    },
+    sampling: {
+      staticCols: number,      // we take a column at [0-n]/n-th parts along the width and sample it
+      randomCols: number,      // we add this many randomly selected columns to the static columns
+      staticRows: number,      // forms grid with staticSampleCols. Determined in the same way. For black frame checks
+    },
+    guardLine: {              // all pixels on the guardline need to be black, or else we trigger AR recalculation 
+                              // (if AR fails to be recalculated, we reset AR)
+      enabled: boolean,
+      ignoreEdgeMargin: number, // we ignore anything that pokes over the black line this close to the edge
+                              // (relative to width of the sample)
+      imageTestThreshold: number, // when testing for image, this much pixels must be over blackbarThreshold
+      edgeTolerancePx: number,         // black edge violation is performed this far from reported 'last black pixel'
+      edgeTolerancePercent: null  // unused. same as above, except use % of canvas height instead of pixels
+    },
+    fallbackMode: {
+      enabled: boolean,
+      safetyBorderPx: number,        // determines the thickness of safety border in fallback mode
+      noTriggerZonePx: number        // if we detect edge less than this many pixels thick, we don't correct.
+    },
+    arSwitchLimiter: {          // to be implemented 
+      switches: number,              // we can switch this many times
+        period: number             // per this period
+    },
+    edgeDetection: {
+      sampleWidth: number,        // we take a sample this wide for edge detection
+      detectionThreshold: number,  // sample needs to have this many non-black pixels to be a valid edge
+      confirmationThreshold: number,  // 
+      singleSideConfirmationThreshold: number,    // we need this much edges (out of all samples, not just edges) in order
+                                             // to confirm an edge in case there's no edges on top or bottom (other
+                                            // than logo, of course)
+      logoThreshold: number,     // if edge candidate sits with count greater than this*all_samples, it can't be logo
+                              // or watermark.
+      edgeTolerancePx?: number,          // we check for black edge violation this far from detection point
+      edgeTolerancePercent?: number,  // we check for black edge detection this % of height from detection point. unused
+      middleIgnoredArea: number,      // we ignore this % of canvas height towards edges while detecting aspect ratios
+      minColsForSearch: number,       // if we hit the edge of blackbars for all but this many columns (%-wise), we don't
+                                   // continue with search. It's pointless, because black edge is higher/lower than we
+                                   // are now. (NOTE: keep this less than 1 in case we implement logo detection)
+    },
+    pillarTest: {
+      ignoreThinPillarsPx: number, // ignore pillars that are less than this many pixels thick. 
+      allowMisaligned: number   // left and right edge can vary this much (%)
+    },
+    textLineTest: {
+      nonTextPulse: number,     // if a single continuous pulse has this many non-black pixels, we aren't dealing 
+                              // with text. This value is relative to canvas width (%)
+      pulsesToConfirm: number,    // this is a threshold to confirm we're seeing text.
+      pulsesToConfirmIfHalfBlack: number, // this is the threshold to confirm we're seeing text if longest black pulse
+                                     // is over 50% of the canvas width
+      testRowOffset: number     // we test this % of height from detected edge
+    }
+  },
+  zoom: {
+    minLogZoom: number,
+    maxLogZoom: number,
+    announceDebounce: number     // we wait this long before announcing new zoom
+  },
+  miscSettings: {
+    mousePan: {
+      enabled: boolean
+    },
+    mousePanReverseMouse: boolean,
+    defaultAr?: any
+  },
+  stretch: {
+    conditionalDifferencePercent: number  // black bars less than this wide will trigger stretch
+                                        // if mode is set to '1'. 1.0=100%
+  },
+  resizer: {
+    setStyleString: {
+      maxRetries: number,
+      retryTimeout: number
+    }
+  },
+  pageInfo: {
+    timeouts: {
+      urlCheck: number,
+      rescan: number
+    }
+  },
+  pan?: any,
+  version?: string,
+  preventReload?: boolean,
+  // -----------------------------------------
+  //             ::: ACTIONS :::
+  // -----------------------------------------
+  // Nastavitve za ukaze. Zamenja stare nastavitve za bližnične tipke.
+  // 
+  // Polje 'shortcut' je tabela, če se slučajno lotimo kdaj delati choordov. 
+  actions: {
+    name?: string,    // name displayed in settings
+    label?: string,                     // name displayed in ui (can be overridden in scope/playerUi)
+    cmd?: {
+      action: string,
+      arg: any,
+      customArg?: any,
+      persistent?: boolean, // optional, false by default. If true, change doesn't take effect immediately.
+                         // Instead, this action saves stuff to settings
+    }[],
+    scopes?: {
+      global?: ActionScopeInterface,
+      site?: ActionScopeInterface,
+      page?: ActionScopeInterface
+    },
+    playerUi?: {
+      show: boolean,
+      path?: string,
+    },
+    userAdded?: boolean,
+  }[],
+  whatsNewChecked: boolean,
+  // -----------------------------------------
+  //       ::: SITE CONFIGURATION :::
+  // -----------------------------------------
+  // Nastavitve za posamezno stran
+  // Config for a given page:
+  // 
+  // <hostname> : {
+  //    status: <option>              // should extension work on this site?
+  //    arStatus: <option>            // should we do autodetection on this site?
+  //    
+  //    defaultAr?: <ratio>          // automatically apply this aspect ratio on this side. Use extension defaults if undefined.
+  //    stretch? <stretch mode>       // automatically stretch video on this site in this manner
+  //    videoAlignment? <left|center|right>
+  //
+  //    type: <official|community|user>  // 'official' — blessed by Tam. 
+  //                                     // 'community' — blessed by reddit.
+  //                                     // 'user' — user-defined (not here)
+  //    override: <true|false>           // override user settings for this site on update
+  // } 
+  //  
+  // Veljavne vrednosti za možnosti 
+  // Valid values for options:
+  //
+  //     status, arStatus, statusEmbedded:
+  //    
+  //    * enabled     — always allow, full
+  //    * basic       — allow, but only the basic version without playerData
+  //    * default     — allow if default is to allow, block if default is to block
+  //    * disabled    — never allow
+  // 
+  sites: {
+    [x: string]: {
+      mode?: ExtensionMode,
+      autoar?: ExtensionMode,
+      autoarFallback?: ExtensionMode,
+      stretch?: StretchType,
+      videoAlignment?: VideoAlignmentType,
+      keyboardShortcutsEnabled?: ExtensionMode,
+      type?: string,
+      override?: boolean,
+      arPersistence?: boolean,
+      actions?: any;
+
+      cropModePersistence?: CropModePersistence;
+
+      DOM?: {
+        player?: {
+          manual?: boolean,
+          querySelectors?: string,
+          additionalCss?: string,
+          useRelativeAncestor?: boolean,
+          videoAncestor?: any,
+          playerNodeCss?: string,
+          periodicallyRefreshPlayerElement?: boolean
+        },
+        video?: {
+          manual?: boolean,
+          querySelectors?: string,
+          additionalCss?: string,
+          useRelativeAncestor?: boolean,
+          playerNodeCss?: string
+        }
+      },
+      css?: string;
+    }
+  }
+}
+
+export default SettingsInterface;
\ No newline at end of file
diff --git a/src/ext/conf/ExtensionConf.js b/src/ext/conf/ExtensionConf.ts
similarity index 99%
rename from src/ext/conf/ExtensionConf.js
rename to src/ext/conf/ExtensionConf.ts
index fc1d2ba..0c2186a 100644
--- a/src/ext/conf/ExtensionConf.js
+++ b/src/ext/conf/ExtensionConf.ts
@@ -6,11 +6,12 @@ import ExtensionMode from '../../common/enums/ExtensionMode.enum';
 import AntiGradientMode from '../../common/enums/AntiGradientMode.enum';
 import AspectRatioType from '../../common/enums/AspectRatioType.enum';
 import CropModePersistence from '../../common/enums/CropModePersistence.enum';
+import SettingsInterface from '../../common/interfaces/SettingsInterface';
 
 if(Debug.debug)
   console.log("Loading: ExtensionConf.js");
 
-var ExtensionConf = {
+const ExtensionConf: SettingsInterface = {
   arDetect: {
     disabledReason: "",       // if automatic aspect ratio has been disabled, show reason
     allowedMisaligned: 0.05,  // top and bottom letterbox thickness can differ by this much. 
@@ -373,7 +374,7 @@ var ExtensionConf = {
     label: 'Never persist',
     cmd: [{
       action: 'set-ar-persistence',
-      arg: CropModePersistence.Never,
+      arg: CropModePersistence.Disabled,
     }],
     scopes: {
       site: {
diff --git a/src/ext/lib/Settings.js b/src/ext/lib/Settings.ts
similarity index 93%
rename from src/ext/lib/Settings.js
rename to src/ext/lib/Settings.ts
index 35341bb..762168b 100644
--- a/src/ext/lib/Settings.js
+++ b/src/ext/lib/Settings.ts
@@ -2,18 +2,39 @@ import Debug from '../conf/Debug';
 import currentBrowser from '../conf/BrowserDetect';
 import ExtensionConf from '../conf/ExtensionConf';
 import ExtensionMode from '../../common/enums/ExtensionMode.enum';
-import ObjectCopy from '../lib/ObjectCopy';
+import ObjectCopy from './ObjectCopy';
 import StretchType from '../../common/enums/StretchType.enum';
 import VideoAlignmentType from '../../common/enums/VideoAlignmentType.enum';
 import ExtensionConfPatch from '../conf/ExtConfPatches';
 import CropModePersistence from '../../common/enums/CropModePersistence.enum';
 import BrowserDetect from '../conf/BrowserDetect';
+import Logger from './Logger';
+import SettingsInterface from '../../common/interfaces/SettingsInterface';
 
 if(process.env.CHANNEL !== 'stable'){
   console.info("Loading Settings");
 }
 
+
 class Settings {
+  //#region flags
+  useSync: boolean = false;
+  version: string;
+  //#endregion
+
+  //#region helper classes
+  logger: Logger;
+  //#endregion
+
+  //#region data
+  default: SettingsInterface;  // default settings
+  active: SettingsInterface;   // currently active settings
+  //#endregion
+
+  //#region callbacks
+  onSettingsChanged: any;
+  afterSettingsSaved: any;
+  //#endregion
 
   constructor(options) {
     // Options: activeSettings, updateCallback, logger
@@ -23,14 +44,8 @@ class Settings {
     this.active = options?.activeSettings ?? undefined;
     this.default = ExtensionConf;
     this.default['version'] = this.getExtensionVersion();
-    this.useSync = false;
-    this.version = undefined;
 
-    if (currentBrowser.firefox) {
-      browser.storage.onChanged.addListener((changes, area) => {this.storageChangeListener(changes, area)});
-    } else if (currentBrowser.chrome) {
-      chrome.storage.onChanged.addListener((changes, area) => {this.storageChangeListener(changes, area)});
-    }
+    (BrowserDetect.browserObj as any).storage.onChanged.addListener((changes, area) => {this.storageChangeListener(changes, area)});
   }
 
   storageChangeListener(changes, area) {
@@ -60,14 +75,10 @@ class Settings {
     }
   }
 
-  static getExtensionVersion() {
-    if (currentBrowser.firefox) {
-      return browser.runtime.getManifest().version;
-    } else if (currentBrowser.chrome) {
-      return chrome.runtime.getManifest().version;
-    } 
+  static getExtensionVersion(): string {
+    return (BrowserDetect.browserObj as any).runtime.getManifest().version;
   }
-  getExtensionVersion() {
+  getExtensionVersion(): string {
     return Settings.getExtensionVersion(); 
   }
 
@@ -96,7 +107,10 @@ class Settings {
       // also, the fourth digit can start with a letter. 
       // versions that start with a letter are ranked lower than 
       // versions x.x.x.0
-      if (isNaN(+aa[3]) ^ isNaN(+bb[3])) {
+      if (
+        (isNaN(+aa[3]) && !isNaN(+bb[3]))
+        || (!isNaN(+aa[3]) && isNaN(+bb[3]))
+      ) {
         return isNaN(+aa[3]) ? -1 : 1;
       }
 
@@ -269,14 +283,10 @@ class Settings {
     let ret;
     
     if (currentBrowser.firefox) {
-      ret = await browser.storage.local.get('uwSettings');
-    } else if (currentBrowser.chrome) {
+      ret = await (BrowserDetect.browserObj as any).storage.local.get('uwSettings');
+    } else if (currentBrowser.anyChromium) {
       ret = await new Promise( (resolve, reject) => {
-        chrome.storage.local.get('uwSettings', (res) => resolve(res));
-      });
-    } else if (currentBrowser.edge) {
-      ret = await new Promise( (resolve, reject) => {
-        browser.storage.local.get('uwSettings', (res) => resolve(res));
+        (BrowserDetect.browserObj as any).storage.local.get('uwSettings', (res) => resolve(res));
       });
     }
 
@@ -312,7 +322,7 @@ class Settings {
     }
   }
 
-  async set(extensionConf, options) {
+  async set(extensionConf, options?) {
     if (!options || !options.forcePreserveVersion) {
       extensionConf.version = this.version;
     }
@@ -321,11 +331,7 @@ class Settings {
 
     this.logger?.log('info', 'settings', "[Settings::set] setting new settings:", extensionConf)
 
-    if (BrowserDetect.firefox) {
-      return browser.storage.local.set( {'uwSettings': JSON.stringify(extensionConf)});
-    } else {
-      return chrome.storage.local.set( {'uwSettings': JSON.stringify(extensionConf)});
-    }
+    return (BrowserDetect.browserObj as any).storage.local.set( {'uwSettings': JSON.stringify(extensionConf)});
   }
 
   async setActive(activeSettings) {
@@ -336,7 +342,7 @@ class Settings {
     this.active[prop] = value;
   }
 
-  async save(options) {
+  async save(options?) {
     if (Debug.debug && Debug.storage) {
       console.log("[Settings::save] Saving active settings:", this.active);
     }
@@ -539,7 +545,7 @@ class Settings {
     }
   }
 
-  getDefaultOption(option) {
+  getDefaultOption(option?) {
     const allDefault = {
       mode: ExtensionMode.Default,
       autoar: ExtensionMode.Default,
diff --git a/src/ext/lib/comms/Comms.js b/src/ext/lib/comms/Comms.js
index 982c61d..1c5428b 100644
--- a/src/ext/lib/comms/Comms.js
+++ b/src/ext/lib/comms/Comms.js
@@ -12,24 +12,12 @@ class Comms {
       return browser.runtime.sendMessage(message);
     } else {
       return new Promise((resolve, reject) => {
-        try{
-          if(BrowserDetect.edge){
-            browser.runtime.sendMessage(message, function(response){
-              var r = response; 
-              resolve(r);
-            });
-          } else {
-            chrome.runtime.sendMessage(message, function(response){
-              // Chrome/js shittiness mitigation — remove this line and an empty array will be returned
-              var r = response; 
-              resolve(r);
-              return true;
-            });
-          }
-        }
-        catch(e){
-          reject(e);
-        }
+        chrome.runtime.sendMessage(message, function(response){
+          // Chrome/js shittiness mitigation — remove this line and an empty array will be returned
+          var r = response; 
+          resolve(r);
+          return true;
+        });
       });
     }
   }
diff --git a/src/ext/lib/uwui/FontLoader.js b/src/ext/lib/uwui/FontLoader.ts
similarity index 100%
rename from src/ext/lib/uwui/FontLoader.js
rename to src/ext/lib/uwui/FontLoader.ts
diff --git a/src/ext/lib/video-data/PageInfo.js b/src/ext/lib/video-data/PageInfo.ts
similarity index 92%
rename from src/ext/lib/video-data/PageInfo.js
rename to src/ext/lib/video-data/PageInfo.ts
index 7536fe8..370424f 100644
--- a/src/ext/lib/video-data/PageInfo.js
+++ b/src/ext/lib/video-data/PageInfo.ts
@@ -1,27 +1,55 @@
 import Debug from '../../conf/Debug';
 import VideoData from './VideoData';
-import RescanReason from './enums/RescanReason';
+import RescanReason from './enums/RescanReason.enum';
 import AspectRatioType from '../../../common/enums/AspectRatioType.enum';
 import CropModePersistence from '../../../common/enums/CropModePersistence.enum';
+import Logger from '../Logger';
+import Settings from '../Settings';
+import ExtensionMode from '../../../common/enums/ExtensionMode.enum';
+import CommsClient from '../comms/CommsClient';
 
 if (process.env.CHANNEL !== 'stable'){
   console.info("Loading PageInfo");
 }
 
 class PageInfo {
+  //#region flags
+  readOnly: boolean = false;
+  hasVideos: boolean = false;
+  siteDisabled: boolean = false;
+  //#endregion
+
+  //#region timers and timeouts
+  rescanTimer: any;
+  urlCheckTimer: any;
+  announceZoomTimeout: any;
+  //#endregion
+
+  //#region helper objects
+  logger: Logger;
+  settings: Settings;
+  comms: CommsClient;
+  videos: VideoData[] = [];
+  //#endregion
+
+  //#region misc stuff
+  lastUrl: string;
+  extensionMode: ExtensionMode;
+  defaultCrop: any;
+  currentCrop: any;
+  actionHandlerInitQueue: any[] = [];
+  currentZoomScale: number = 1;
+  
+  actionHandler: any;
+  //#endregion
+
   constructor(comms, settings, logger, extensionMode, readOnly = false){
     this.logger = logger;
-    this.hasVideos = false;
-    this.siteDisabled = false;
-    this.videos = [];
     this.settings = settings;
-    this.actionHandlerInitQueue = [];
 
     this.lastUrl = window.location.href;
     this.extensionMode = extensionMode;
     this.readOnly = readOnly;
-    this.defaultCrop = undefined;
-    this.currentCrop = undefined;
 
     if (comms){ 
       this.comms = comms;
@@ -54,8 +82,6 @@ class PageInfo {
 
     this.rescan(RescanReason.PERIODIC);
     this.scheduleUrlCheck();
-
-    this.currentZoomScale = 1;
   }
 
   async injectCss(cssString) {
@@ -87,7 +113,7 @@ class PageInfo {
     }
     for (var video of this.videos) {
       try {
-        this.comms.unregisterVideo(video.id)
+        (this.comms.unregisterVideo as any)(video.vdid)
         video.destroy();
       } catch (e) {
         this.logger.log('error', ['debug', 'init'], '[PageInfo::destroy] unable to destroy video! Error:', e);
@@ -95,7 +121,7 @@ class PageInfo {
     }
 
     try {
-      playerStyleString = this.settings.active.sites[window.location.hostname].css;
+      const playerStyleString = this.settings.active.sites[window.location.hostname].css;
       if (playerStyleString) {
         this.comms.sendMessage({
           cmd: 'eject-css',
@@ -132,8 +158,8 @@ class PageInfo {
 
   getVideos(host) {
     if (this.settings.active.sites[host]?.DOM?.video?.manual
-        && this.settings.active.sites[host]?.DOM?.video?.querySelector){
-      const videos = document.querySelectorAll(this.settings.active.sites[host].DOM.video.querySelector);
+        && this.settings.active.sites[host]?.DOM?.video?.querySelectors){
+      const videos = document.querySelectorAll(this.settings.active.sites[host].DOM.video.querySelectors);
 
       if (videos.length) {
         return videos;
@@ -245,9 +271,11 @@ class PageInfo {
         // } 
         
         if (this.videos.length > 0) {
-          this.comms.registerVideo({host: window.location.hostname, location: window.location});
+          // this.comms.registerVideo({host: window.location.hostname, location: window.location});
+          this.comms.registerVideo();
         } else {
-          this.comms.unregisterVideo({host: window.location.hostname, location: window.location});
+          // this.comms.unregisterVideo({host: window.location.hostname, location: window.location});
+          this.comms.unregisterVideo();
         }
       }
 
@@ -386,7 +414,7 @@ class PageInfo {
     }
     if (playingOnly) {
       for(var vd of this.videos){
-        if (video.isPlaying()) {
+        if (vd.isPlaying()) {
           vd.startArDetection();
         }
       }
@@ -542,7 +570,7 @@ class PageInfo {
 
   announceZoom(scale) {
     if (this.announceZoomTimeout) {
-      clearTimeout(this.announceZoom);
+      clearTimeout(this.announceZoomTimeout);
     }
     this.currentZoomScale = scale;
     const ths = this;
@@ -551,7 +579,7 @@ class PageInfo {
 
   setManualTick(manualTick) {
     for(var vd of this.videos) {
-      vd.setManualTick();
+      vd.setManualTick(manualTick);
     }
   }
 
diff --git a/src/ext/lib/video-data/VideoData.ts b/src/ext/lib/video-data/VideoData.ts
index 524a799..158981f 100644
--- a/src/ext/lib/video-data/VideoData.ts
+++ b/src/ext/lib/video-data/VideoData.ts
@@ -565,7 +565,7 @@ class VideoData {
     this.resizer.setLastAr(lastAr);
   }
 
-  setAr(ar, lastAr){
+  setAr(ar, lastAr?){
     if (this.invalid) {
       return;
     }
diff --git a/src/ext/lib/video-data/enums/RescanReason.enum.ts b/src/ext/lib/video-data/enums/RescanReason.enum.ts
new file mode 100644
index 0000000..2d6b305
--- /dev/null
+++ b/src/ext/lib/video-data/enums/RescanReason.enum.ts
@@ -0,0 +1,7 @@
+enum RescanReason {
+  PERIODIC = 0,
+  URL_CHANGE = 1,
+  MANUAL = 2
+};
+
+export default RescanReason;
diff --git a/src/ext/lib/video-data/enums/RescanReason.js b/src/ext/lib/video-data/enums/RescanReason.js
deleted file mode 100644
index 03e170b..0000000
--- a/src/ext/lib/video-data/enums/RescanReason.js
+++ /dev/null
@@ -1,7 +0,0 @@
-var RescanReason = Object.freeze({
-  PERIODIC: 0,
-  URL_CHANGE: 1,
-  MANUAL: 2
-});
-
-export default RescanReason;
diff --git a/src/ext/lib/video-transform/Stretcher.ts b/src/ext/lib/video-transform/Stretcher.ts
index 9f826a2..6017b25 100644
--- a/src/ext/lib/video-transform/Stretcher.ts
+++ b/src/ext/lib/video-transform/Stretcher.ts
@@ -68,11 +68,11 @@ class Stretcher {
       actualWidth = newWidth;
     }
 
-    var minW = this.conf.player.dimensions.width * (1 - this.settings.active.StretchType.conditionalDifferencePercent);
-    var maxW = this.conf.player.dimensions.width * (1 + this.settings.active.StretchType.conditionalDifferencePercent);
+    var minW = this.conf.player.dimensions.width * (1 - this.settings.active.stretch.conditionalDifferencePercent);
+    var maxW = this.conf.player.dimensions.width * (1 + this.settings.active.stretch.conditionalDifferencePercent);
 
-    var minH = this.conf.player.dimensions.height * (1 - this.settings.active.StretchType.conditionalDifferencePercent);
-    var maxH = this.conf.player.dimensions.height * (1 + this.settings.active.StretchType.conditionalDifferencePercent);
+    var minH = this.conf.player.dimensions.height * (1 - this.settings.active.stretch.conditionalDifferencePercent);
+    var maxH = this.conf.player.dimensions.height * (1 + this.settings.active.stretch.conditionalDifferencePercent);
 
     if (actualWidth >= minW && actualWidth <= maxW) {
       stretchFactors.xFactor *= this.conf.player.dimensions.width / actualWidth;
diff --git a/src/options/App.vue b/src/options/App.vue
index 48361f6..16c3946 100644
--- a/src/options/App.vue
+++ b/src/options/App.vue
@@ -111,11 +111,11 @@
 <script>
 import Donate from '../common/misc/Donate.vue';
 import SuperAdvancedSettings from './SuperAdvancedSettings.vue';
-import Debug from '../ext/conf/Debug.js';
-import BrowserDetect from '../ext/conf/BrowserDetect.js';
-import ExtensionConf from '../ext/conf/ExtensionConf.js';
-import ObjectCopy from '../ext/lib/ObjectCopy.js';
-import Settings from '../ext/lib/Settings.js';
+import Debug from '../ext/conf/Debug';
+import BrowserDetect from '../ext/conf/BrowserDetect';
+import ExtensionConf from '../ext/conf/ExtensionConf';
+import ObjectCopy from '../ext/lib/ObjectCopy';
+import Settings from '../ext/lib/Settings';
 import GeneralSettings from './GeneralSettings';
 import ControlsSettings from './controls-settings/ControlsSettings';
 import AddEditActionPopup from './controls-settings/AddEditActionPopup';

From a907d0d404639af0520874b18b3e263d7f28f266 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Tue, 9 Feb 2021 00:42:52 +0100
Subject: [PATCH 37/68] Finish moving videoTransform stuff to typescript

---
 .../lib/video-transform/{CssHandler.js => CssHandler.ts}   | 0
 src/ext/lib/video-transform/{Scaler.js => Scaler.ts}       | 7 ++++++-
 2 files changed, 6 insertions(+), 1 deletion(-)
 rename src/ext/lib/video-transform/{CssHandler.js => CssHandler.ts} (100%)
 rename src/ext/lib/video-transform/{Scaler.js => Scaler.ts} (98%)

diff --git a/src/ext/lib/video-transform/CssHandler.js b/src/ext/lib/video-transform/CssHandler.ts
similarity index 100%
rename from src/ext/lib/video-transform/CssHandler.js
rename to src/ext/lib/video-transform/CssHandler.ts
diff --git a/src/ext/lib/video-transform/Scaler.js b/src/ext/lib/video-transform/Scaler.ts
similarity index 98%
rename from src/ext/lib/video-transform/Scaler.js
rename to src/ext/lib/video-transform/Scaler.ts
index 43b24ac..25e0d94 100644
--- a/src/ext/lib/video-transform/Scaler.js
+++ b/src/ext/lib/video-transform/Scaler.ts
@@ -1,6 +1,8 @@
 import Debug from '../../conf/Debug';
 import AspectRatioType from '../../../common/enums/AspectRatioType.enum';
 import BrowserDetect from '../../conf/BrowserDetect';
+import VideoData from '../video-data/VideoData';
+import Logger from '../Logger';
 
 
 // računa velikost videa za približevanje/oddaljevanje
@@ -8,7 +10,10 @@ import BrowserDetect from '../../conf/BrowserDetect';
 
 
 class Scaler {
-  // internal variables
+  //#region helper objects
+  conf: VideoData;
+  logger: Logger;
+  //#endregion
 
   // functions
   constructor(videoData) {

From 2d8bf0c0ee96850fad4e67bd1fd4671a17bbceba Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Tue, 9 Feb 2021 00:52:58 +0100
Subject: [PATCH 38/68] Move some more files to typescript

---
 src/ext/lib/{Logger.js => Logger.ts}         | 63 +++++++++-----------
 src/ext/lib/{ObjectCopy.js => ObjectCopy.ts} |  0
 src/ext/lib/{Util.js => Util.ts}             |  2 +-
 3 files changed, 30 insertions(+), 35 deletions(-)
 rename src/ext/lib/{Logger.js => Logger.ts} (92%)
 rename src/ext/lib/{ObjectCopy.js => ObjectCopy.ts} (100%)
 rename src/ext/lib/{Util.js => Util.ts} (82%)

diff --git a/src/ext/lib/Logger.js b/src/ext/lib/Logger.ts
similarity index 92%
rename from src/ext/lib/Logger.js
rename to src/ext/lib/Logger.ts
index c671c5e..df97bea 100644
--- a/src/ext/lib/Logger.js
+++ b/src/ext/lib/Logger.ts
@@ -1,19 +1,25 @@
-import currentBrowser from '../conf/BrowserDetect';
 import { decycle } from 'json-cyclic';
 import Comms from './comms/Comms';
+import BrowserDetect from '../conf/BrowserDetect';
 
 if (process.env.CHANNEL !== 'stable'){
   console.info('Loading Logger');
 }
 
 class Logger {
-  constructor(options) {
-    this.onLogEndCallbacks = [];
-    this.history = [];
-    this.globalHistory = {};
-    this.isContentScript = false;
-    this.isBackgroundScript = true;
+  temp_disable: boolean = false;
+  onLogEndCallbacks: any[] = [];
+  history: any[] = [];
+  globalHistory: any = {};
+  isContentScript: boolean = false;
+  isBackgroundScript: boolean = true;
+  vuexStore: any;
+  uwInstance: any;
+  conf: any;
+  startTime: number;
+  stopTime: number;
 
+  constructor(options) {
     this.vuexStore = options?.vuexStore;
     this.uwInstance = options?.uwInstance;
   }
@@ -23,20 +29,15 @@ class Logger {
       console.info('Saving logger conf:', conf)
     }
 
-    if (currentBrowser.firefox || currentBrowser.edge) {
-      return browser.storage.local.set( {'uwLogger': JSON.stringify(conf)});
-    } else if (currentBrowser.chrome) {
-      return chrome.storage.local.set( {'uwLogger': JSON.stringify(conf)});
-    }
+    (BrowserDetect.browserObj as any).storage.local.set( {'uwLogger': JSON.stringify(conf)});
   }
 
   static syncConfig(callback) {
-    const br = currentBrowser.firefox ? browser : chrome;
-    br.storage.onChanged.addListener( (changes, area) => {
+    (BrowserDetect.browserObj as any).storage.onChanged.addListener( (changes, area) => {
       if (changes.uwLogger) {
         const newLoggerConf = JSON.parse(changes.uwLogger.newValue)
         if (process.env.CHANNEL === 'dev') {
-          console.info('Logger settings reloaded. New conf:', conf);
+          console.info('Logger settings reloaded. New conf:', newLoggerConf);
         }
         callback(newLoggerConf);
       }
@@ -46,15 +47,11 @@ class Logger {
   static async getConfig() {
     let ret;
 
-    if (currentBrowser.firefox) {
-      ret = await browser.storage.local.get('uwLogger');
-    } else if (currentBrowser.chrome) {
+    if (BrowserDetect.firefox) {
+      ret = await (BrowserDetect.browserObj as any).storage.local.get('uwLogger');
+    } else if (BrowserDetect.anyChromium) {
       ret = await new Promise( (resolve, reject) => {
-        chrome.storage.local.get('uwLogger', (res) => resolve(res));
-      });
-    } else if (currentBrowser.edge) {
-      ret = await new Promise( (resolve, reject) => {
-        browser.storage.local.get('uwLogger', (res) => resolve(res));
+        (BrowserDetect.browserObj as any).storage.local.get('uwLogger', (res) => resolve(res));
       });
     }
 
@@ -101,9 +98,7 @@ class Logger {
     this.temp_disable = false;
     this.stopTime = this.conf.timeout ? performance.now() + (this.conf.timeout * 1000) : undefined;
 
-    const br = currentBrowser.firefox ? browser : chrome;
-
-    br.storage.onChanged.addListener( (changes, area) => {
+    (BrowserDetect.browserObj as any).storage.onChanged.addListener( (changes, area) => {
       if (process.env.CHANNEL === 'dev') {
         if (!changes.uwLogger) {
           // console.info('[Logger::<storage/on change> No new logger settings!');
@@ -131,7 +126,7 @@ class Logger {
   }
   
   clear() {
-    this.log = [];
+    this.history = [];
     this.startTime = performance.now();
     this.stopTime = this.conf.timeout ? performance.now() + (this.conf.timeout * 1000) : undefined;
   }
@@ -142,9 +137,9 @@ class Logger {
     Logger.saveConfig(conf);
   }
 
-  async getSaved() {
-    return Logger.getSaved();    
-  }
+  // async getSaved() {
+  //   return Logger.getSaved();    
+  // }
 
 
   // allow syncing of start times between bg and page scripts.
@@ -174,7 +169,7 @@ class Logger {
   getFileLogJSONString() {
     return {
       site: window && window.location,
-      log: JSON.toString(this.history),
+      log: JSON.stringify(this.history),
     }
   }
 
@@ -213,7 +208,7 @@ class Logger {
   parseStack() {
     const trace = (new Error()).stack;
 
-    const stackInfo = {};
+    const stackInfo: any = {};
     // we turn our stack into array and remove the "file::line" part of the trace,
     // since that is useless because minification/webpack
     stackInfo['stack'] = {trace: trace.split('\n').map(a => a.split('@')[0])};
@@ -336,7 +331,7 @@ class Logger {
     }
   }
 
-  canLogConsole(component, stackInfo) {
+  canLogConsole(component, stackInfo?) {
     if (!this.conf.consoleOptions?.enabled || this.temp_disable) {
       return false;
     }
@@ -437,7 +432,7 @@ class Logger {
       let ts = performance.now();
       let secondMark = ts - 1000;
       let halfSecondMark = ts - 500;
-      let i = this.history.length();
+      let i = this.history.length;
 
       // correct ts _after_ secondMark and halfSecondMark were determined
       if (ts <= this.history[this.history.length - 1]) {
diff --git a/src/ext/lib/ObjectCopy.js b/src/ext/lib/ObjectCopy.ts
similarity index 100%
rename from src/ext/lib/ObjectCopy.js
rename to src/ext/lib/ObjectCopy.ts
diff --git a/src/ext/lib/Util.js b/src/ext/lib/Util.ts
similarity index 82%
rename from src/ext/lib/Util.js
rename to src/ext/lib/Util.ts
index 51b48a3..dc68935 100644
--- a/src/ext/lib/Util.js
+++ b/src/ext/lib/Util.ts
@@ -1,3 +1,3 @@
 export async function sleep(timeout) {
-  return new Promise( (resolve, reject) => setTimeout(() => resolve(), timeout));
+  return new Promise( (resolve, reject) => setTimeout(() => resolve(null), timeout));
 }

From 46360d1b1f65994fe1638bbd3bf5dbbb4f8b020b Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Tue, 9 Feb 2021 00:54:04 +0100
Subject: [PATCH 39/68] remove typo from comment

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

diff --git a/src/ext/lib/ActionHandler.js b/src/ext/lib/ActionHandler.js
index 210c768..dd34644 100644
--- a/src/ext/lib/ActionHandler.js
+++ b/src/ext/lib/ActionHandler.js
@@ -105,7 +105,7 @@ class ActionHandler {
     }
 
     // events should be handled in handleEvent function. We need to do things this 
-    // way, otherwise we can't remove event listenerđ
+    // way, otherwise we can't remove event listener
     // https://stackoverflow.com/a/19507086
     document.addEventListener('keydown', this );
     document.addEventListener('keyup', this );

From 4febd2f6024785e7ee75739881f4125f507450a3 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Wed, 17 Feb 2021 00:20:30 +0100
Subject: [PATCH 40/68] fix

---
 src/ext/lib/uwui/UI.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ext/lib/uwui/UI.js b/src/ext/lib/uwui/UI.js
index 2a1cbc5..5821f3e 100644
--- a/src/ext/lib/uwui/UI.js
+++ b/src/ext/lib/uwui/UI.js
@@ -15,7 +15,7 @@ class UI {
   ) {
     this.interfaceId = interfaceId;
     this.commsConfig = commsConfig;
-    this.storeConfig = storeConfig,
+    this.storeConfig = storeConfig;
     this.uiConfig = uiConfig;
 
     this.init();

From b322ef0db19c8b9b8a78334809d229c808b9863e Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Wed, 17 Feb 2021 00:21:25 +0100
Subject: [PATCH 41/68] Fix for #134

---
 src/options/AutodetectionSettings.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/options/AutodetectionSettings.vue b/src/options/AutodetectionSettings.vue
index 88ad7d3..94915b7 100644
--- a/src/options/AutodetectionSettings.vue
+++ b/src/options/AutodetectionSettings.vue
@@ -185,7 +185,7 @@
         </div>
         <div class="flex flex-input">
           <input type="text"
-                 v-model="settings.active.arDetect.allowedMisaligned"
+                 v-model="settings.active.arDetect.pillarTest.allowMisaligned"
           />
         </div>
       </div>

From 6031e3513338a8b7f3955a1ee9c2833be0b6a4ad Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Wed, 17 Feb 2021 00:51:56 +0100
Subject: [PATCH 42/68] Add new DRM detection. Do it _before_ launching AARD

---
 src/ext/lib/ar-detect/DrmDetecor.js | 48 +++++++++++++++++++++++++++++
 src/ext/lib/video-data/VideoData.js |  8 +++++
 2 files changed, 56 insertions(+)
 create mode 100644 src/ext/lib/ar-detect/DrmDetecor.js

diff --git a/src/ext/lib/ar-detect/DrmDetecor.js b/src/ext/lib/ar-detect/DrmDetecor.js
new file mode 100644
index 0000000..6462387
--- /dev/null
+++ b/src/ext/lib/ar-detect/DrmDetecor.js
@@ -0,0 +1,48 @@
+import BrowserDetect from '../../conf/BrowserDetect';
+
+/**
+ * Checks whether video we're trying to play is protected by DRM. 
+ * @param {*} video video we're trying to check
+ */
+export function hasDrm(video) {
+  /**
+   * DRM DETECTION 101:
+   *
+   * When trying to get an image frame of a DRM-protected video in
+   * firefox, the method canvas.drawImage(video) will throw an exception.
+   * 
+   * This doesn't happen in Chrome. As opposed to Firefox, chrome will
+   * simply draw a transparent black image and not tell anyone that
+   * anything is amiss. However, since the image is (according to my testing
+   * on netflix) completely transparent, this means we can determine whether
+   * the video is DRM-protected by looking at the alpha byte of the image.
+   * 
+   * (Videos don't tend to have an alpha channel, so they're always
+   * completely opaque (i.e. have value of 255))
+   */
+
+  // setup canvas
+  const canvas = document.createElement('canvas');
+  canvas.width = 2;
+  canvas.height = 2;
+  const context = canvas.getContext();
+
+  if (BrowserDetect.firefox) {
+    try {
+      context.drawImage(video, 0, 0, canvas.width, canvas.height);
+      return false;
+    } catch (e) {
+      console.error('Exception occured while trying to draw image. Error:', e);
+      return true;
+    }
+  } else if (BrowserDetect.anyChromium) {
+    // oh btw, there's one exception to the alpha rule.
+    // There is this brief period between the point
+    // when metadata (video dimensions) have loaded and the moment the video starts
+    // playing where ctx.drawImage() will draw a transparent black square regardless
+    // of whether the video is actually DRM-protected or not.
+
+    context.drawImage(video, 0, 0, canvas.width, canvas.height);
+    return this.blackframeContext.getImageData(0,0,1,1).data[3] === 0;
+  }
+}
\ No newline at end of file
diff --git a/src/ext/lib/video-data/VideoData.js b/src/ext/lib/video-data/VideoData.js
index 9454a08..9d63e2c 100644
--- a/src/ext/lib/video-data/VideoData.js
+++ b/src/ext/lib/video-data/VideoData.js
@@ -5,6 +5,7 @@ import ArDetector from '../ar-detect/ArDetector';
 import AspectRatio from '../../../common/enums/aspect-ratio.enum';
 import _ from 'lodash';
 import BrowserDetect from '../../conf/BrowserDetect';
+import { hasDrm } from '../ar-detect/DrmDetecor';
 
 class VideoData {
   
@@ -53,6 +54,8 @@ class VideoData {
     } else if (!this.videoDimensionsLoaded) {
       this.logger.log('info', 'debug', "%c[VideoData::restoreCrop] Recovering from illegal video dimensions. Resetting aspect ratio.", "background: #afd, color: #132");
 
+      // test for 
+
       this.restoreCrop();
       this.videoDimensionsLoaded = true;
     }
@@ -450,6 +453,11 @@ class VideoData {
       // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
       return;
     }
+    if (hasDrm(this.video)) {
+      this.player.showNotification('AARD_DRM');
+      return;
+    }
+
     if (this.arDetector){
       this.arDetector.init();
     }

From ec2cd3d6a000ba5b0478023701e9157c0cbc80c6 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Wed, 17 Feb 2021 01:06:11 +0100
Subject: [PATCH 43/68] Fix DRM detector bugs

---
 src/ext/lib/ar-detect/DrmDetecor.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/ext/lib/ar-detect/DrmDetecor.js b/src/ext/lib/ar-detect/DrmDetecor.js
index 6462387..b264b30 100644
--- a/src/ext/lib/ar-detect/DrmDetecor.js
+++ b/src/ext/lib/ar-detect/DrmDetecor.js
@@ -25,7 +25,7 @@ export function hasDrm(video) {
   const canvas = document.createElement('canvas');
   canvas.width = 2;
   canvas.height = 2;
-  const context = canvas.getContext();
+  const context = canvas.getContext('2d');
 
   if (BrowserDetect.firefox) {
     try {
@@ -43,6 +43,7 @@ export function hasDrm(video) {
     // of whether the video is actually DRM-protected or not.
 
     context.drawImage(video, 0, 0, canvas.width, canvas.height);
-    return this.blackframeContext.getImageData(0,0,1,1).data[3] === 0;
+
+    return context.getImageData(0,0,1,1).data[3] === 0;
   }
 }
\ No newline at end of file

From 6de5ae63554fb602de17369e179f38e6777e1c53 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Thu, 18 Feb 2021 00:13:34 +0100
Subject: [PATCH 44/68] Fix false positive 'this site cant work cos drm' errors
 ... xcept for real

---
 src/ext/lib/ar-detect/ArDetector.js | 52 ++++++++---------------------
 src/ext/lib/ar-detect/DrmDetecor.js |  7 ++++
 src/ext/lib/video-data/VideoData.js | 18 +++++++---
 3 files changed, 34 insertions(+), 43 deletions(-)

diff --git a/src/ext/lib/ar-detect/ArDetector.js b/src/ext/lib/ar-detect/ArDetector.js
index ad8f058..674000a 100644
--- a/src/ext/lib/ar-detect/ArDetector.js
+++ b/src/ext/lib/ar-detect/ArDetector.js
@@ -510,32 +510,6 @@ class ArDetector {
     id = undefined;
   }
 
-  /**
-   * Checks whether video we're trying to play is protected by DRM. 
-   * 
-   * When trying to get an image frame of a DRM-protected video in
-   * firefox, the method canvas.drawImage(video) will throw an exception.
-   * 
-   * This doesn't happen in Chrome. As opposed to Firefox, chrome will
-   * simply draw a transparent black image and not tell anyone that
-   * anything is amiss. However, since the image is (according to my testing
-   * on netflix) completely transparent, this means we can determine whether
-   * the video is DRM-protected by looking at the alpha byte of the image.
-   * 
-   * (Videos don't tend to have an alpha channel, so they're always
-   * completely opaque (i.e. have value of 255))
-   */
-  hasDRM() {
-    // oh btw, there's one exception. There is this brief period between the point
-    // when metadata (video dimensions) have loaded and the moment the video starts
-    // playing where ctx.drawImage() will draw a transparent black square regardless
-    // of whether the video is actually DRM-protected or not.
-    if (! this.conf.hasVideoStartedPlaying()) {
-      return false;
-    }
-    return this.blackframeContext.getImageData(0,0,1,1).data[3] === 0;
-  }
-
   frameCheck(){
     if(! this.video){
       this.logger.log('error', 'debug', `%c[ArDetect::frameCheck] <@${this.arid}>  Video went missing. Destroying current instance of videoData.`);
@@ -557,10 +531,10 @@ class ArDetector {
       this.blackframeContext.drawImage(this.video, 0, 0, this.blackframeCanvas.width, this.blackframeCanvas.height);
 
       // special browsers require special tests
-      if (this.hasDRM()) {
-        this.fallbackMode = false;
-        throw 'VIDEO_DRM_PROTECTED';
-      }
+      // if (this.hasDRM()) {
+      //   this.fallbackMode = false;
+      //   throw 'VIDEO_DRM_PROTECTED';
+      // }
       this.fallbackMode = false;
     } catch (e) {
       this.logger.log('error', 'arDetect', `%c[ArDetect::frameCheck] <@${this.arid}>  %c[ArDetect::frameCheck] can't draw image on canvas. ${this.canDoFallbackMode ? 'Trying canvas.drawWindow instead' : 'Doing nothing as browser doesn\'t support fallback mode.'}`, "color:#000; backgroud:#f51;", e);
@@ -569,17 +543,17 @@ class ArDetector {
       // ratio setting part of this function. For the time being, we're only stopping
       // in case we encounter DRM error in Chrome. Firefox has fallback mode and generates
       // different error, so that goes.
-      if (e === 'VIDEO_DRM_PROTECTED') {
-        // nothing to see here, really, if fallback mode isn't supported by browser
-        if (!this.drmNotificationShown) {
-          this.drmNotificationShown = true;
+      // if (e === 'VIDEO_DRM_PROTECTED') {
+      //   // nothing to see here, really, if fallback mode isn't supported by browser
+      //   if (!this.drmNotificationShown) {
+      //     this.drmNotificationShown = true;
 
-          this.conf.player.showNotification('AARD_DRM');
-          this.conf.resizer.setAr({type: AspectRatio.Reset});
-        } 
+      //     this.conf.player.showNotification('AARD_DRM');
+      //     this.conf.resizer.setAr({type: AspectRatio.Reset});
+      //   } 
 
-        return;
-      }
+      //   return;
+      // }
 
       if (! this.canvasReadyForDrawWindow()) {
         // this means canvas needs to be resized, so we'll just re-run setup with all those new parameters
diff --git a/src/ext/lib/ar-detect/DrmDetecor.js b/src/ext/lib/ar-detect/DrmDetecor.js
index b264b30..b98f977 100644
--- a/src/ext/lib/ar-detect/DrmDetecor.js
+++ b/src/ext/lib/ar-detect/DrmDetecor.js
@@ -5,6 +5,11 @@ import BrowserDetect from '../../conf/BrowserDetect';
  * @param {*} video video we're trying to check
  */
 export function hasDrm(video) {
+  // if video is not playing, we cannot know whether autodetection will work or not
+  if (!video || !(video.currentTime > 0 && !video.paused && !video.ended && video.readyState > 2)) {
+    return undefined;
+  }
+
   /**
    * DRM DETECTION 101:
    *
@@ -44,6 +49,8 @@ export function hasDrm(video) {
 
     context.drawImage(video, 0, 0, canvas.width, canvas.height);
 
+    console.log(context.getImageData(0,0,1,1).data, 'drm result', video.videoTracks)
+
     return context.getImageData(0,0,1,1).data[3] === 0;
   }
 }
\ No newline at end of file
diff --git a/src/ext/lib/video-data/VideoData.js b/src/ext/lib/video-data/VideoData.js
index 9d63e2c..894d9ae 100644
--- a/src/ext/lib/video-data/VideoData.js
+++ b/src/ext/lib/video-data/VideoData.js
@@ -38,9 +38,21 @@ class VideoData {
 
   async onVideoLoaded() {
     if (!this.videoLoaded) {
-      if (!this.video.videoWidth || !this.video.videoHeight) {
+
+      // video.readyState 101:
+      // 0 — no info. Can't play. 
+      // 1 — we have metadata but nothing else
+      // 2 — we have data for current playback position, but not future      <--- meaning current frame, meaning Aard can work here or higher
+      // 3 — we have a lil bit for the future
+      // 4 — we'll survive to the end
+      if (!this.video?.videoWidth || !this.video?.videoHeight || this.video.readyState < 2) {
         return; // onVideoLoaded is a lie in this case
       }
+      // const hasDrmResult = hasDrm(this.video);
+      // if (hasDrmResult === undefined) {
+      //   console.info('video not playing or doesnt exist. doing nothing.');
+      // }
+
       this.logger.log('info', 'init', '%c[VideoData::onVideoLoaded] ——————————— Initiating phase two of videoData setup ———————————', 'color: #0f9');
 
       this.videoLoaded = true;
@@ -54,8 +66,6 @@ class VideoData {
     } else if (!this.videoDimensionsLoaded) {
       this.logger.log('info', 'debug', "%c[VideoData::restoreCrop] Recovering from illegal video dimensions. Resetting aspect ratio.", "background: #afd, color: #132");
 
-      // test for 
-
       this.restoreCrop();
       this.videoDimensionsLoaded = true;
     }
@@ -455,7 +465,7 @@ class VideoData {
     }
     if (hasDrm(this.video)) {
       this.player.showNotification('AARD_DRM');
-      return;
+      // return;
     }
 
     if (this.arDetector){

From 5c6ea49c669ed630def01b34b477e26c28a43a25 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Thu, 18 Feb 2021 00:13:51 +0100
Subject: [PATCH 45/68] Version bump + version notes

---
 CHANGELOG.md                       | 2 ++
 src/manifest.json                  | 2 +-
 src/popup/panels/WhatsNewPanel.vue | 6 ++++++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 38f9247..c716e20 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,8 @@
 ### v4.5.3
 
 * Provides workaround for the fullscreen stretching bug Chrome 88 (or a recent Windows 10 update) introduced for nVidia users using hardware acceleration on Windows 10. In order to mitigate this bug, Ultrawidify needs to keep a 5-10 px wide black border while watching videos in full screen. This bug is also present in Edge.
+* **[4.5.3.1]** Fixed letterbox misalignment binding in settings (#134)
+* **[4.5.3.1]** Fixed false 'autodetection not supported' notifications.
 
 ### v4.5.2
 
diff --git a/src/manifest.json b/src/manifest.json
index d9744e7..a859168 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.5.3",
+  "version": "4.5.3.1",
   "applications": {
     "gecko": {
       "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"
diff --git a/src/popup/panels/WhatsNewPanel.vue b/src/popup/panels/WhatsNewPanel.vue
index 1b744f8..fce5e25 100644
--- a/src/popup/panels/WhatsNewPanel.vue
+++ b/src/popup/panels/WhatsNewPanel.vue
@@ -7,6 +7,12 @@
       <li>
         Provided a workaround for the fullscreen stretching bug Chrome 88 (or a recent Windows 10 update) introduced for nVidia users using hardware acceleration on Windows 10. In order to mitigate this bug, Ultrawidify needs to keep a 5-10 px wide black border while watching videos in full screen. This bug is also present in Edge.
       </li>
+      <li>
+        <b>[4.5.3.1]</b> Fixed binding for letterbox misalignment treshold binding in settings.
+      </li>
+      <li>
+        <b>[4.5.3.1]</b> Removed false positive "this extension can't work due to DRM" notifications. Note that this also gets rid of all such notifications in non-Firefox browsers.
+      </li>
     </ul>
   </div>
 </template>

From 7f77847baaa1ac4ecf195f6a48312adbcb68d835 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Thu, 18 Feb 2021 01:08:12 +0100
Subject: [PATCH 46/68] migrate additional things over from master branch

---
 src/ext/lib/video-data/VideoData.ts | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/ext/lib/video-data/VideoData.ts b/src/ext/lib/video-data/VideoData.ts
index 158981f..40ea0f4 100644
--- a/src/ext/lib/video-data/VideoData.ts
+++ b/src/ext/lib/video-data/VideoData.ts
@@ -9,6 +9,7 @@ import Logger from '../Logger';
 import Settings from '../Settings';
 import PageInfo from './PageInfo';
 import { sleep } from '../../../common/js/utils';
+import { hasDrm } from '../ar-detect/DrmDetecor';
 
 class VideoData {
   //#region flags
@@ -69,7 +70,16 @@ class VideoData {
 
   async onVideoLoaded() {
     if (!this.videoLoaded) {
-      if (!this.video.videoWidth || !this.video.videoHeight) {
+      
+      /**
+       * video.readyState 101:
+       * 0 — no info. Can't play. 
+       * 1 — we have metadata but nothing else
+       * 2 — we have data for current playback position, but not future      <--- meaning current frame, meaning Aard can work here or higher
+       * 3 — we have a lil bit for the future
+       * 4 — we'll survive to the end
+       */ 
+      if (!this.video?.videoWidth || !this.video?.videoHeight || this.video.readyState < 2) {
         return; // onVideoLoaded is a lie in this case
       }
       this.logger.log('info', 'init', '%c[VideoData::onVideoLoaded] ——————————— Initiating phase two of videoData setup ———————————', 'color: #0f9');
@@ -493,6 +503,11 @@ class VideoData {
       // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
       return;
     }
+
+    if (hasDrm(this.video)) {
+      this.player.showNotification('AARD_DRM');
+    }
+
     if (!this.arDetector) {
       this.initArDetection();
     }

From 83b8ce0aaaf57ed9a0354c2f36fcb6bb3b535e06 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Thu, 18 Feb 2021 19:03:32 +0100
Subject: [PATCH 47/68] Fix drm detection, but hopefully for real

---
 src/ext/lib/ar-detect/DrmDetecor.js | 46 +----------------------------
 1 file changed, 1 insertion(+), 45 deletions(-)

diff --git a/src/ext/lib/ar-detect/DrmDetecor.js b/src/ext/lib/ar-detect/DrmDetecor.js
index b98f977..a7a2012 100644
--- a/src/ext/lib/ar-detect/DrmDetecor.js
+++ b/src/ext/lib/ar-detect/DrmDetecor.js
@@ -1,5 +1,3 @@
-import BrowserDetect from '../../conf/BrowserDetect';
-
 /**
  * Checks whether video we're trying to play is protected by DRM. 
  * @param {*} video video we're trying to check
@@ -10,47 +8,5 @@ export function hasDrm(video) {
     return undefined;
   }
 
-  /**
-   * DRM DETECTION 101:
-   *
-   * When trying to get an image frame of a DRM-protected video in
-   * firefox, the method canvas.drawImage(video) will throw an exception.
-   * 
-   * This doesn't happen in Chrome. As opposed to Firefox, chrome will
-   * simply draw a transparent black image and not tell anyone that
-   * anything is amiss. However, since the image is (according to my testing
-   * on netflix) completely transparent, this means we can determine whether
-   * the video is DRM-protected by looking at the alpha byte of the image.
-   * 
-   * (Videos don't tend to have an alpha channel, so they're always
-   * completely opaque (i.e. have value of 255))
-   */
-
-  // setup canvas
-  const canvas = document.createElement('canvas');
-  canvas.width = 2;
-  canvas.height = 2;
-  const context = canvas.getContext('2d');
-
-  if (BrowserDetect.firefox) {
-    try {
-      context.drawImage(video, 0, 0, canvas.width, canvas.height);
-      return false;
-    } catch (e) {
-      console.error('Exception occured while trying to draw image. Error:', e);
-      return true;
-    }
-  } else if (BrowserDetect.anyChromium) {
-    // oh btw, there's one exception to the alpha rule.
-    // There is this brief period between the point
-    // when metadata (video dimensions) have loaded and the moment the video starts
-    // playing where ctx.drawImage() will draw a transparent black square regardless
-    // of whether the video is actually DRM-protected or not.
-
-    context.drawImage(video, 0, 0, canvas.width, canvas.height);
-
-    console.log(context.getImageData(0,0,1,1).data, 'drm result', video.videoTracks)
-
-    return context.getImageData(0,0,1,1).data[3] === 0;
-  }
+  return video.mediaKeys instanceof MediaKeys;
 }
\ No newline at end of file

From 888ffcadedf290b845ed139c95fb85d50c41036d Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Thu, 18 Feb 2021 19:06:23 +0100
Subject: [PATCH 48/68] Version bump & update notes

---
 CHANGELOG.md                       | 2 +-
 src/manifest.json                  | 2 +-
 src/popup/panels/WhatsNewPanel.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c716e20..ba887f7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,7 +20,7 @@
 
 * Provides workaround for the fullscreen stretching bug Chrome 88 (or a recent Windows 10 update) introduced for nVidia users using hardware acceleration on Windows 10. In order to mitigate this bug, Ultrawidify needs to keep a 5-10 px wide black border while watching videos in full screen. This bug is also present in Edge.
 * **[4.5.3.1]** Fixed letterbox misalignment binding in settings (#134)
-* **[4.5.3.1]** Fixed false 'autodetection not supported' notifications.
+* **[4.5.3.2]** Fixed false 'autodetection not supported' notifications.
 
 ### v4.5.2
 
diff --git a/src/manifest.json b/src/manifest.json
index a859168..3294fc1 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.5.3.1",
+  "version": "4.5.3.2",
   "applications": {
     "gecko": {
       "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"
diff --git a/src/popup/panels/WhatsNewPanel.vue b/src/popup/panels/WhatsNewPanel.vue
index fce5e25..39e0fad 100644
--- a/src/popup/panels/WhatsNewPanel.vue
+++ b/src/popup/panels/WhatsNewPanel.vue
@@ -11,7 +11,7 @@
         <b>[4.5.3.1]</b> Fixed binding for letterbox misalignment treshold binding in settings.
       </li>
       <li>
-        <b>[4.5.3.1]</b> Removed false positive "this extension can't work due to DRM" notifications. Note that this also gets rid of all such notifications in non-Firefox browsers.
+        <b>[4.5.3.2]</b> Removed false positive "this extension can't work due to DRM" notifications.
       </li>
     </ul>
   </div>

From a3bd8a8b7e06a4107e8e6c3b48af5bf25e729f1b Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Thu, 18 Feb 2021 22:29:23 +0100
Subject: [PATCH 49/68] convert ArDetector to ts

---
 src/ext/lib/Settings.ts                       |   2 +-
 .../{ArDetector.js => ArDetector.ts}          |  96 +++++----
 .../ar-detect/{GuardLine.js => GuardLine.ts}  | 142 +++++++------
 .../{EdgeDetect.js => EdgeDetect.ts}          | 197 ++++++++++--------
 4 files changed, 249 insertions(+), 188 deletions(-)
 rename src/ext/lib/ar-detect/{ArDetector.js => ArDetector.ts} (94%)
 rename src/ext/lib/ar-detect/{GuardLine.js => GuardLine.ts} (70%)
 rename src/ext/lib/ar-detect/edge-detect/{EdgeDetect.js => EdgeDetect.ts} (91%)

diff --git a/src/ext/lib/Settings.ts b/src/ext/lib/Settings.ts
index 762168b..17710ee 100644
--- a/src/ext/lib/Settings.ts
+++ b/src/ext/lib/Settings.ts
@@ -500,7 +500,7 @@ class Settings {
     return this.canStartExtension(site);
   }
 
-  canStartAutoAr(site) {
+  canStartAutoAr(site?: string) {
     // 'site' argument is only ever used when calling this function recursively for debugging
     if (!site) {
       site = window.location.hostname;
diff --git a/src/ext/lib/ar-detect/ArDetector.js b/src/ext/lib/ar-detect/ArDetector.ts
similarity index 94%
rename from src/ext/lib/ar-detect/ArDetector.js
rename to src/ext/lib/ar-detect/ArDetector.ts
index 6af1368..6e5cae8 100644
--- a/src/ext/lib/ar-detect/ArDetector.js
+++ b/src/ext/lib/ar-detect/ArDetector.ts
@@ -8,10 +8,54 @@ import GuardLine from './GuardLine';
 // import DebugCanvas from './DebugCanvas';
 import VideoAlignmentType from '../../../common/enums/VideoAlignmentType.enum';
 import AspectRatioType from '../../../common/enums/AspectRatioType.enum';
-import {sleep} from '../../lib/Util';
+import {sleep} from '../Util';
 import BrowserDetect from '../../conf/BrowserDetect';
+import Logger from '../Logger';
+import VideoData from '../video-data/VideoData';
+import Settings from '../Settings';
 
 class ArDetector {
+  logger: Logger;
+  conf: VideoData;
+  video: HTMLVideoElement;
+  settings: Settings;
+
+  guardLine: GuardLine;
+  edgeDetector: EdgeDetect;
+
+  setupTimer: any;
+  sampleCols: any[];
+  sampleLines
+
+  canFallback: boolean = true;
+  fallbackMode: boolean = false;
+
+  blackLevel: number;
+
+  arid: string;
+
+  // ar detector starts in this state. running main() sets both to false
+  _paused: boolean;
+  _halted: boolean = true;
+  _exited: boolean = true;
+
+  private manualTickEnabled: boolean;
+  _nextTick: boolean;
+  canDoFallbackMode: boolean = false;
+
+  // helper objects
+  private attachedCanvas: HTMLCanvasElement;
+  canvas: HTMLCanvasElement;
+  private blackframeCanvas: HTMLCanvasElement;
+  private context: CanvasRenderingContext2D;
+  private blackframeContext: CanvasRenderingContext2D;
+  private canvasScaleFactor: number;
+  private detectionTimeoutEventCount: number;
+  canvasImageDataRowLength: number;
+  private noLetterboxCanvasReset: boolean;
+  private detectedAr: any;
+  private canvasDrawWindowHOffset: number;
+  private sampleCols_current: number;
 
   constructor(videoData){
     this.logger = videoData.logger;
@@ -19,34 +63,18 @@ class ArDetector {
     this.video = videoData.video;
     this.settings = videoData.settings;
     
-    this.setupTimer = null;
-
     this.sampleCols = [];
 
-    this.canFallback = true;
-    this.fallbackMode = false;
-
     this.blackLevel = this.settings.active.arDetect.blackbar.blackLevel;
 
     this.arid = (Math.random()*100).toFixed();
 
-    // ar detector starts in this state. running main() sets both to false
-    this._halted = true;
-    this._exited = true;
-
     // we can tick manually, for debugging
-    this._manualTicks = false;
-    this._nextTick = false;
-
-    this.canDoFallbackMode = false; 
-
-    this.drmNotificationShown = false;
-
     this.logger.log('info', 'init', `[ArDetector::ctor] creating new ArDetector. arid: ${this.arid}`);
   }
 
   setManualTick(manualTick) {
-    this._manualTicks = manualTick;
+    this.manualTickEnabled = manualTick;
   }
 
   tick() {
@@ -68,19 +96,19 @@ class ArDetector {
   }
 
   destroy(){
-    this.logger.log('info', 'init', `%c[ArDetect::destroy] <@${this.arid}> Destroying aard.`, _ard_console_stop, e);
+    this.logger.log('info', 'init', `%c[ArDetect::destroy] <@${this.arid}> Destroying aard.`, _ard_console_stop);
     // this.debugCanvas.destroy();
     this.stop();
   }
 
-  setup(cwidth, cheight){
+  setup(cwidth?: number, cheight?: number){
     this.logger.log('info', 'init', `[ArDetect::setup] <@${this.arid}> Starting autodetection setup.`);
     //
     // [-1] check for zero-width and zero-height videos. If we detect this, we kick the proverbial
     //      can some distance down the road. This problem will prolly fix itself soon. We'll also
     //      not do any other setup until this issue is fixed
     //
-    if(this.video.videoWidth === 0 || this.video.videoHeight === 0 ){
+    if (this.video.videoWidth === 0 || this.video.videoHeight === 0 ){
       this.logger.log('warn', 'debug', `[ArDetect::setup] <@${this.arid}> This video has zero width or zero height. Dimensions: ${this.video.videoWidth} × ${this.video.videoHeight}`);
 
       this.scheduleInitRestart();
@@ -173,7 +201,7 @@ class ArDetector {
     //
 
     try {
-      this.blackframeContext.drawWindow(window,0, 0, this.blackframeCanvas.width, this.blackframeCanvas.height, "rgba(0,0,128,1)");
+      (this.blackframeContext as any).drawWindow(window,0, 0, this.blackframeCanvas.width, this.blackframeCanvas.height, "rgba(0,0,128,1)");
       this.canDoFallbackMode = true;
     } catch (e) {
       this.canDoFallbackMode = false;
@@ -292,7 +320,7 @@ class ArDetector {
       // state from 'paused' to 'playing', we don't need to wait for the rest of the longer
       // paused state timeout to finish.
 
-      if ( (!this._manualTicks && this.canTriggerFrameCheck(lastFrameCheckStartTime)) || this._nextTick) {
+      if ( (!this.manualTickEnabled && this.canTriggerFrameCheck(lastFrameCheckStartTime)) || this._nextTick) {
         this._nextTick = false;
 
         lastFrameCheckStartTime = Date.now();
@@ -344,7 +372,7 @@ class ArDetector {
   }
 
 
-  scheduleInitRestart(timeout, force_reset){
+  scheduleInitRestart(timeout?: number, force_reset?: boolean){
     if(! timeout){
       timeout = 100;
     }
@@ -481,7 +509,7 @@ class ArDetector {
       //
       // we can only deny aspect ratio changes if we use automatic mode and if aspect ratio was set from here.
       
-      let arDiff = trueAr - lastAr.ar;
+      let arDiff = trueAr - lastAr.ratio;
       
       if (arDiff < 0)
         arDiff = -arDiff;
@@ -490,7 +518,7 @@ class ArDetector {
       
       // ali je sprememba v mejah dovoljenega? Če da -> fertik
       // is ar variance within acceptable levels? If yes -> we done
-      this.logger.log('info', 'arDetect', `%c[ArDetect::processAr] <@${this.arid}>  New aspect ratio varies from the old one by this much:\n`,"color: #aaf","old Ar", lastAr.ar, "current ar", trueAr, "arDiff (absolute):",arDiff,"ar diff (relative to new ar)", arDiff_percent);
+      this.logger.log('info', 'arDetect', `%c[ArDetect::processAr] <@${this.arid}>  New aspect ratio varies from the old one by this much:\n`,"color: #aaf","old Ar", lastAr.ratio, "current ar", trueAr, "arDiff (absolute):",arDiff,"ar diff (relative to new ar)", arDiff_percent);
 
       if (arDiff < trueAr * this.settings.active.arDetect.allowedArVariance){
         this.logger.log('info', 'arDetect', `%c[ArDetect::processAr] <@${this.arid}>  Aspect ratio change denied — diff %: ${arDiff_percent}`, "background: #740; color: #fa2");
@@ -500,12 +528,12 @@ class ArDetector {
     }
     this.logger.log('info', 'debug', `%c[ArDetect::processAr] <@${this.arid}>  Triggering aspect ratio change. New aspect ratio: ${trueAr}`, _ard_console_change);
     
-    this.conf.resizer.updateAr({type: AspectRatioType.Automatic, ratio: trueAr}, {type: AspectRatioType.Automatic, ratio: trueAr});
+    this.conf.resizer.updateAr({type: AspectRatioType.Automatic, ratio: trueAr});
   }
 
   clearImageData(id) {
-    if (ArrayBuffer.transfer) {
-      ArrayBuffer.transfer(id, 0);
+    if ((ArrayBuffer as any).transfer) {
+      (ArrayBuffer as any).transfer(id, 0);
     }
     id = undefined;
   }
@@ -579,7 +607,7 @@ class ArDetector {
       this.fallbackMode = true;
 
       try {
-        this.context.drawWindow(window, this.canvasDrawWindowHOffset, 0, this.canvas.width, this.canvas.height, "rgba(0,0,128,1)");
+        (this.context as any).drawWindow(window, this.canvasDrawWindowHOffset, 0, this.canvas.width, this.canvas.height, "rgba(0,0,128,1)");
       } catch (e) {
         this.logger.log('error', 'arDetect', `%c[ArDetect::frameCheck] can't draw image on canvas with fallback mode either. This error is prolly only temporary.`, "color:#000; backgroud:#f51;", e);
         return; // it's prolly just a fluke, so we do nothing special here
@@ -680,8 +708,6 @@ class ArDetector {
             this.guardLine.reset();
           }
 
-          triggerTimeout = this.getTimeout(baseTimeout, startTime);
-          this.scheduleFrameCheck(triggerTimeout);
           this.clearImageData(imageData);
           return;
         }
@@ -741,7 +767,7 @@ class ArDetector {
       this.logger.log('error', 'arDetect', `%c[ArDetect::frameCheck] There was a problem setting blackbar. Doing nothing. Error:`, e);
       
       try {
-        this.guardline.reset();
+        this.guardLine.reset();
       } catch (e) {
         // no guardline, no bigge
       }
@@ -780,7 +806,7 @@ class ArDetector {
     let cumulativeValue = 0;
     let blackPixelCount = 0;
     const bfImageData = this.blackframeContext.getImageData(0, 0, cols, rows).data;
-    const blackTreshold = this.blackLevel + this.settings.active.arDetect.blackbar.frameTreshold;
+    const blackTreshold = this.blackLevel + this.settings.active.arDetect.blackbar.frameThreshold;
     
 
     // we do some recon for letterbox and pillarbox. While this can't determine whether letterbox/pillarbox exists
@@ -788,7 +814,7 @@ class ArDetector {
     let rowMax = new Array(rows).fill(0);
     let colMax = new Array(cols).fill(0);
 
-    let r, c;
+    let r: number, c: number;
 
 
     for (let i = 0; i < bfImageData.length; i+= 4) {
diff --git a/src/ext/lib/ar-detect/GuardLine.js b/src/ext/lib/ar-detect/GuardLine.ts
similarity index 70%
rename from src/ext/lib/ar-detect/GuardLine.js
rename to src/ext/lib/ar-detect/GuardLine.ts
index de95cf6..b3bc7dc 100644
--- a/src/ext/lib/ar-detect/GuardLine.js
+++ b/src/ext/lib/ar-detect/GuardLine.ts
@@ -1,13 +1,33 @@
 import Debug from '../../conf/Debug';
+import Settings from '../Settings';
+import ArDetector from './ArDetector';
+
+export type GuardLineBar = {
+  top?: number;
+  bottom?: number;
+}
+
+export type ImageCheckResult = {
+  success: boolean;
+}
 
 class GuardLine {
-  
+  blackbar: GuardLineBar;
+  imageBar: GuardLineBar;
+
+  aard: ArDetector;
+  settings: Settings;
+
+  blackbarThreshold: number;
+  imageThreshold: number;
+
+
   // ardConf — reference to ArDetector that has current GuardLine instance
-  constructor(ardConf){
+  constructor (ardConf){
     this.blackbar = {top: undefined, bottom: undefined};
     this.imageBar = {top: undefined, bottom: undefined};
     
-    this.conf = ardConf;
+    this.aard = ardConf;
     this.settings = ardConf.settings;
   }
 
@@ -33,7 +53,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 ){
+    if (bbTop < 0 || bbBottom >= this.aard.canvas.height ){
       throw {error: "INVALID_SETTINGS_IN_GUARDLINE", bbTop, bbBottom}
     }
 
@@ -51,7 +71,7 @@ class GuardLine {
   check(image, fallbackMode){
     // izračunaj enkrat in shrani na objekt
     // calculate once and save object-instance-wide
-    this.blackbarThreshold = this.conf.blackLevel + this.settings.active.arDetect.blackbar.threshold;
+    this.blackbarThreshold = this.aard.blackLevel + this.settings.active.arDetect.blackbar.threshold;
     this.imageThreshold = this.blackbarThreshold + this.settings.active.arDetect.blackbar.imageThreshold;
 
     // dejansko testiranje
@@ -95,7 +115,7 @@ class GuardLine {
       return { success: true };
     }
 
-    var offset = parseInt(this.conf.canvas.width * this.settings.active.arDetect.guardLine.ignoreEdgeMargin) << 2;
+    var offset = (this.aard.canvas.width * this.settings.active.arDetect.guardLine.ignoreEdgeMargin) << 2;
     
     var offenders = [];
     var offenderCount = -1; // doing it this way means first offender has offenderCount==0. Ez index.
@@ -112,28 +132,28 @@ class GuardLine {
     else{
       // fallback mode is a bit different
       edge_upper = 0;
-      edge_lower = this.conf.canvas.height - 1;
+      edge_lower = this.aard.canvas.height - 1;
     }
     
     var rowStart, rowEnd;
     
     // <<<=======| checking upper row |========>>>
     
-    rowStart = ((edge_upper * this.conf.canvas.width) << 2) + offset;
-    rowEnd = rowStart + ( this.conf.canvas.width << 2 ) - (offset * 2);
+    rowStart = ((edge_upper * this.aard.canvas.width) << 2) + offset;
+    rowEnd = rowStart + ( this.aard.canvas.width << 2 ) - (offset * 2);
     
     if (Debug.debugCanvas.enabled && Debug.debugCanvas.guardLine) {
-      offenderCount = this._gl_debugRowCheck(image, rowStart, rowEnd, offenders, offenderCount);
+      // offenderCount = this._gl_debugRowCheck(image, rowStart, rowEnd, offenders, offenderCount);
     } else {
       offenderCount = this._gl_rowCheck(image, rowStart, rowEnd, offenders, offenderCount);    
     }
     // <<<=======| checking lower row |========>>>
     
-    rowStart = ((edge_lower * this.conf.canvas.width) << 2) + offset;
-    rowEnd = rowStart + ( this.conf.canvas.width << 2 ) - (offset * 2);
+    rowStart = ((edge_lower * this.aard.canvas.width) << 2) + offset;
+    rowEnd = rowStart + ( this.aard.canvas.width << 2 ) - (offset * 2);
     
     if (Debug.debugCanvas.enabled && Debug.debugCanvas.guardLine) {
-      offenderCount = this._gl_debugRowCheck(image, rowStart, rowEnd, offenders, offenderCount);
+      // offenderCount = this._gl_debugRowCheck(image, rowStart, rowEnd, offenders, offenderCount);
     } else {
       offenderCount = this._gl_rowCheck(image, rowStart, rowEnd, offenders, offenderCount);    
     }
@@ -156,11 +176,11 @@ class GuardLine {
     return {success: false, offenders: ret};
   }
 
-  imageCheck(image){  
+  imageCheck(image, fallbackMode?: boolean): ImageCheckResult {  
     if(!this.imageBar.top || !this.imageBar.bottom)
       return { success: false };
         
-    var offset = (this.conf.canvas.width * this.settings.active.arDetect.guardLine.ignoreEdgeMargin) << 2;
+    var offset = (this.aard.canvas.width * this.settings.active.arDetect.guardLine.ignoreEdgeMargin) << 2;
       
     // TODO: implement logo check.
     
@@ -181,35 +201,35 @@ class GuardLine {
     // robu (eden izmed robov je lahko v celoti črn)
     // how many non-black pixels we need to consider this check a success. We only need to detect enough pixels
     // on one edge (one of the edges can be black as long as both aren't)
-    var successThreshold = (this.conf.canvas.width * this.settings.active.arDetect.guardLine.imageTestThreshold);
+    var successThreshold = (this.aard.canvas.width * this.settings.active.arDetect.guardLine.imageTestThreshold);
     var rowStart, rowEnd;
     
     
     // <<<=======| checking upper row |========>>>
     
-    rowStart = ((edge_upper * this.conf.canvas.width) << 2) + offset;
-    rowEnd = rowStart + ( this.conf.canvas.width << 2 ) - (offset * 2);
+    rowStart = ((edge_upper * this.aard.canvas.width) << 2) + offset;
+    rowEnd = rowStart + ( this.aard.canvas.width << 2 ) - (offset * 2);
     
     var res = false;
     
     if(Debug.debugCanvas.enabled && Debug.debugCanvas.guardLine){
-      res = this._ti_debugCheckRow(image, rowStart, rowEnd, successThreshold);
+      // res = this._ti_debugCheckRow(image, rowStart, rowEnd, successThreshold);
     } else {
       res = this._ti_checkRow(image, rowStart, rowEnd,successThreshold);
     }
     
-    if(res)
+    if (res) {
       return {success: true};
-    
+    }
     
     // <<<=======| checking lower row |========>>>
     
-    rowStart = ((edge_lower * this.conf.canvas.width) << 2) + offset;
+    rowStart = ((edge_lower * this.aard.canvas.width) << 2) + offset;
     // rowEnd = rowStart + ( this.conf.canvas.width << 2 ) - (offset * 2);
     
 
     if(Debug.debugCanvas.enabled && Debug.debugCanvas.guardLine){
-      res = this._ti_debugCheckRow(image, rowStart, rowEnd, successThreshold);
+      // res = this._ti_debugCheckRow(image, rowStart, rowEnd, successThreshold);
     } else {
       res = this._ti_checkRow(image, rowStart, rowEnd,successThreshold);
     }
@@ -246,35 +266,35 @@ class GuardLine {
     return offenderCount;
   }
 
-  _gl_debugRowCheck(image, rowStart, rowEnd, offenders, offenderCount){
-    var firstOffender = -1;
-    for(var i = rowStart; i < rowEnd; i+=4){
+  // _gl_debugRowCheck(image, rowStart, rowEnd, offenders, offenderCount){
+  //   var firstOffender = -1;
+  //   for(var i = rowStart; i < rowEnd; i+=4){
       
-      // we track sections that go over what's supposed to be a black line, so we can suggest more 
-      // columns to sample
-      if(image[i] > this.blackbarThreshold || image[i+1] > this.blackbarThreshold || image[i+2] > this.blackbarThreshold){
-        this.conf.debugCanvas.trace(i, DebugCanvasClasses.VIOLATION);      
-        if(firstOffender < 0){
-          firstOffender = (i - rowStart) >> 2;
-          offenderCount++;
-          offenders.push({x: firstOffender, width: 1});
-        }
-        else{
-          offenders[offenderCount].width++
-        }
-      }
-      else{
-        this.conf.debugCanvas.trace(i, DebugCanvasClasses.GUARDLINE_BLACKBAR);              
-        // is that a black pixel again? Let's reset the 'first offender' 
-        firstOffender = -1;
-      }
+  //     // we track sections that go over what's supposed to be a black line, so we can suggest more 
+  //     // columns to sample
+  //     if(image[i] > this.blackbarThreshold || image[i+1] > this.blackbarThreshold || image[i+2] > this.blackbarThreshold){
+  //       this.aard.debugCanvas.trace(i, DebugCanvasClasses.VIOLATION);      
+  //       if(firstOffender < 0){
+  //         firstOffender = (i - rowStart) >> 2;
+  //         offenderCount++;
+  //         offenders.push({x: firstOffender, width: 1});
+  //       }
+  //       else{
+  //         offenders[offenderCount].width++
+  //       }
+  //     }
+  //     else{
+  //       this.aard.debugCanvas.trace(i, DebugCanvasClasses.GUARDLINE_BLACKBAR);              
+  //       // is that a black pixel again? Let's reset the 'first offender' 
+  //       firstOffender = -1;
+  //     }
       
-    }
+  //   }
   
-    return offenderCount;
-  }
+  //   return offenderCount;
+  // }
 
-  _ti_checkRow(image, rowStart, rowEnd, successThreshold) {
+  _ti_checkRow(image, rowStart, rowEnd, successThreshold): boolean {
     for(var i = rowStart; i < rowEnd; i+=4){
       if(image[i] > this.imageThreshold || image[i+1] > this.imageThreshold || image[i+2] > this.imageThreshold){
         if(successThreshold --<= 0){
@@ -286,20 +306,20 @@ class GuardLine {
     return false;
   }
 
-  _ti_debugCheckRow(image, rowStart, rowEnd, successThreshold) {
-    for(var i = rowStart; i < rowEnd; i+=4){
-      if(image[i] > this.imageThreshold || image[i+1] > this.imageThreshold || image[i+2] > this.imageThreshold){
-        this.conf.debugCanvas.trace(i, DebugCanvasClasses.GUARDLINE_IMAGE);
-        if(successThreshold --<= 0){
-          return true;
-        }
-      } else {
-        this.conf.debugCanvas.trace(i, DebugCanvasClasses.WARN);
-      }   
-    }
+  // _ti_debugCheckRow(image, rowStart, rowEnd, successThreshold) {
+  //   for(var i = rowStart; i < rowEnd; i+=4){
+  //     if(image[i] > this.imageThreshold || image[i+1] > this.imageThreshold || image[i+2] > this.imageThreshold){
+  //       this.aard.debugCanvas.trace(i, DebugCanvasClasses.GUARDLINE_IMAGE);
+  //       if(successThreshold --<= 0){
+  //         return true;
+  //       }
+  //     } else {
+  //       this.aard.debugCanvas.trace(i, DebugCanvasClasses.WARN);
+  //     }   
+  //   }
   
-    return false;
-  }
+  //   return false;
+  // }
 }
 
 export default GuardLine;
diff --git a/src/ext/lib/ar-detect/edge-detect/EdgeDetect.js b/src/ext/lib/ar-detect/edge-detect/EdgeDetect.ts
similarity index 91%
rename from src/ext/lib/ar-detect/edge-detect/EdgeDetect.js
rename to src/ext/lib/ar-detect/edge-detect/EdgeDetect.ts
index 421416d..e81cc8f 100644
--- a/src/ext/lib/ar-detect/edge-detect/EdgeDetect.js
+++ b/src/ext/lib/ar-detect/edge-detect/EdgeDetect.ts
@@ -3,12 +3,27 @@ import EdgeStatus from './enums/EdgeStatusEnum';
 import EdgeDetectQuality from './enums/EdgeDetectQualityEnum';
 import EdgeDetectPrimaryDirection from './enums/EdgeDetectPrimaryDirectionEnum';
 import AntiGradientMode from '../../../../common/enums/AntiGradientMode.enum'; 
+import ArDetector from '../ArDetector';
+import Logger from '../../Logger';
+import Settings from '../../Settings';
 
 if (Debug.debug) {
   console.log("Loading EdgeDetect.js");
 }
 
 class EdgeDetect{
+  conf: ArDetector;
+  logger: Logger;
+  settings: Settings;
+
+
+  // helper stuff
+  private sampleWidthBase: number;
+  private halfSample: number;
+  private detectionThreshold: number;
+  private colsThreshold: number;
+  private blackbarThreshold: number;
+  private imageThreshold: number;
 
   constructor(ardConf){
     this.conf = ardConf;
@@ -41,7 +56,7 @@ class EdgeDetect{
         //   edges = fastCandidates; // todo: processing
         // } else {
           edgeCandidates = this.edgeDetect(image, fastCandidates);
-          bars = this.edgePostprocess(edgeCandidates, this.conf.canvas.height);
+          bars = this.edgePostprocess(edgeCandidates);
         // }
       } catch (e) {
         this.logger.log('error', 'arDetect', '%c[EdgeDetect::findBars] find bars failed.', 'background: #f00, color: #000', e);
@@ -259,7 +274,7 @@ class EdgeDetect{
         loopEnd = sampleRow_black + sampleEnd;
 
         if (Debug.debugCanvas.enabled){
-          blackEdgeViolation = this._blackbarTest_dbg(image, sampleRow_black + sampleStart, loopEnd);
+          // blackEdgeViolation = this._blackbarTest_dbg(image, sampleRow_black + sampleStart, loopEnd);
         } else {
           blackEdgeViolation = this._blackbarTest(image, sampleRow_black + sampleStart, loopEnd);
         }
@@ -274,7 +289,7 @@ class EdgeDetect{
         loopEnd = sampleRow_color + sampleEnd;
 
         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 {
           this._imageTest(image, sampleRow_color + sampleStart, loopEnd, sample.black, edgeCandidatesTop);
         }
@@ -302,7 +317,7 @@ class EdgeDetect{
         loopEnd = sampleRow_black + sampleEnd;
         
         if(Debug.debugCanvas.enabled){
-          blackEdgeViolation = this._blackbarTest_dbg(image, sampleRow_black + sampleStart, loopEnd);
+          // blackEdgeViolation = this._blackbarTest_dbg(image, sampleRow_black + sampleStart, loopEnd);
         } else {
           blackEdgeViolation = this._blackbarTest(image, sampleRow_black + sampleStart, loopEnd);
         }
@@ -317,7 +332,7 @@ class EdgeDetect{
         loopEnd = sampleRow_color + sampleEnd;
 
         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 {
           this._imageTest(image, sampleRow_color + sampleStart, loopEnd, sample.black, edgeCandidatesBottom);
         }
@@ -1095,62 +1110,62 @@ class EdgeDetect{
     }
   }
 
-  _columnTest_dbgc(image, top, bottom, colsIn, colsOut, reverseSearchDirection){
-    var tmpI;
-    if(reverseSearchDirection){
-      for(var i = bottom - this.conf.canvasImageDataRowLength; i >= top; i-= this.conf.canvasImageDataRowLength){
-        for(var col of colsIn){
-          tmpI = i + (col << 2);
+  // _columnTest_dbgc(image, top, bottom, colsIn, colsOut, reverseSearchDirection){
+  //   var tmpI;
+  //   if(reverseSearchDirection){
+  //     for(var i = bottom - this.conf.canvasImageDataRowLength; i >= top; i-= this.conf.canvasImageDataRowLength){
+  //       for(var col of colsIn){
+  //         tmpI = i + (col << 2);
           
-          if( image[tmpI]     > this.blackbarThreshold || 
-              image[tmpI + 1] > this.blackbarThreshold ||
-              image[tmpI + 2] > this.blackbarThreshold ){
+  //         if( image[tmpI]     > this.blackbarThreshold || 
+  //             image[tmpI + 1] > this.blackbarThreshold ||
+  //             image[tmpI + 2] > this.blackbarThreshold ){
             
-            var bottom = (i / this.conf.canvasImageDataRowLength) + 1;
-            colsOut.push({
-              col: col,
-              bottom: bottom
-            });
-            colsIn.splice(colsIn.indexOf(col), 1);
-            this.conf.debugCanvas.trace(tmpI,DebugCanvasClasses.EDGEDETECT_CANDIDATE);
-          }
-          else{
-            this.conf.debugCanvas.trace(tmpI, DebugCanvasClasses.EDGEDETECT_ONBLACK);
-          }
-        }
-        if(colsIn.length < this.colsThreshold)
-          break;
-      }
-    } else {
-      for(var i = top; i < bottom; i+= this.conf.canvasImageDataRowLength){
-        for(var col of colsIn){
-          tmpI = i + (col << 2);
+  //           var bottom = (i / this.conf.canvasImageDataRowLength) + 1;
+  //           colsOut.push({
+  //             col: col,
+  //             bottom: bottom
+  //           });
+  //           colsIn.splice(colsIn.indexOf(col), 1);
+  //           this.conf.debugCanvas.trace(tmpI,DebugCanvasClasses.EDGEDETECT_CANDIDATE);
+  //         }
+  //         else{
+  //           this.conf.debugCanvas.trace(tmpI, DebugCanvasClasses.EDGEDETECT_ONBLACK);
+  //         }
+  //       }
+  //       if(colsIn.length < this.colsThreshold)
+  //         break;
+  //     }
+  //   } else {
+  //     for(var i = top; i < bottom; i+= this.conf.canvasImageDataRowLength){
+  //       for(var col of colsIn){
+  //         tmpI = i + (col << 2);
           
-          if( image[tmpI]     > this.blackbarThreshold || 
-              image[tmpI + 1] > this.blackbarThreshold ||
-              image[tmpI + 2] > this.blackbarThreshold ){
+  //         if( image[tmpI]     > this.blackbarThreshold || 
+  //             image[tmpI + 1] > this.blackbarThreshold ||
+  //             image[tmpI + 2] > this.blackbarThreshold ){
           
-            colsOut.push({
-              col: col,
-              top: (i / this.conf.canvasImageDataRowLength) - 1
-            });
-            colsIn.splice(colsIn.indexOf(col), 1);
-            this.conf.debugCanvas.trace(tmpI, DebugCanvasClasses.EDGEDETECT_CANDIDATE);      
-            if(tmpI-1 > 0){
-              this.conf.debugCanvas.trace(tmpI - 1, DebugCanvasClasses.EDGEDETECT_CANDIDATE_SECONDARY);
-            }
-            if(tmpI+1 < image.length){
-              this.conf.debugCanvas.trace(tmpI + 1, DebugCanvasClasses.EDGEDETECT_CANDIDATE_SECONDARY);
-            }
-          } else {
-            this.conf.debugCanvas.trace(tmpI, DebugCanvasClasses.EDGEDETECT_ONBLACK);
-          }
-        }
-        if(colsIn.length < this.colsThreshold)
-          break;
-      }
-    }
-  }
+  //           colsOut.push({
+  //             col: col,
+  //             top: (i / this.conf.canvasImageDataRowLength) - 1
+  //           });
+  //           colsIn.splice(colsIn.indexOf(col), 1);
+  //           this.conf.debugCanvas.trace(tmpI, DebugCanvasClasses.EDGEDETECT_CANDIDATE);      
+  //           if(tmpI-1 > 0){
+  //             this.conf.debugCanvas.trace(tmpI - 1, DebugCanvasClasses.EDGEDETECT_CANDIDATE_SECONDARY);
+  //           }
+  //           if(tmpI+1 < image.length){
+  //             this.conf.debugCanvas.trace(tmpI + 1, DebugCanvasClasses.EDGEDETECT_CANDIDATE_SECONDARY);
+  //           }
+  //         } else {
+  //           this.conf.debugCanvas.trace(tmpI, DebugCanvasClasses.EDGEDETECT_ONBLACK);
+  //         }
+  //       }
+  //       if(colsIn.length < this.colsThreshold)
+  //         break;
+  //     }
+  //   }
+  // }
 
   _blackbarTest(image, start, end){
     for(var i = start; i < end; i += 4){
@@ -1163,20 +1178,20 @@ class EdgeDetect{
     return false; // no violation
   }
 
-  _blackbarTest_dbg(image, start, end){
-    for(var i = start; i < end; i += 4){
-      if( image[i  ] > this.blackbarThreshold ||
-          image[i+1] > this.blackbarThreshold ||
-          image[i+2] > this.blackbarThreshold ){
+  // _blackbarTest_dbg(image, start, end){
+  //   for(var i = start; i < end; i += 4){
+  //     if( image[i  ] > this.blackbarThreshold ||
+  //         image[i+1] > this.blackbarThreshold ||
+  //         image[i+2] > this.blackbarThreshold ){
         
-        this.conf.debugCanvas.trace(i, DebugCanvasClasses.VIOLATION)
-        return true;
-      } else {
-        this.conf.debugCanvas.trace(i, DebugCanvasClasses.EDGEDETECT_BLACKBAR)
-      }
-    }
-    return false; // no violation
-  }
+  //       this.conf.debugCanvas.trace(i, DebugCanvasClasses.VIOLATION)
+  //       return true;
+  //     } else {
+  //       this.conf.debugCanvas.trace(i, DebugCanvasClasses.EDGEDETECT_BLACKBAR)
+  //     }
+  //   }
+  //   return false; // no violation
+  // }
 
   _imageTest(image, start, end, sampleOffset, edgeCandidates){
     var detections = 0;
@@ -1198,28 +1213,28 @@ class EdgeDetect{
     }
   }
 
-  _imageTest_dbg(image, start, end, sampleOffset, edgeCandidates){
-    var detections = 0;
+  // _imageTest_dbg(image, start, end, sampleOffset, edgeCandidates){
+  //   var detections = 0;
 
-    for(var i = start; i < end; i += 4){
-      if( image[i  ] > this.blackbarThreshold ||
-        image[i+1] > this.blackbarThreshold ||
-        image[i+2] > this.blackbarThreshold ){
-        ++detections;
-        this.conf.debugCanvas.trace(i, DebugCanvasClasses.EDGEDETECT_IMAGE);
-      } else {
-        this.conf.debugCanvas.trace(i, DebugCanvasClasses.WARN);
-      }
-    }
-    if(detections >= this.detectionThreshold){
-      if(edgeCandidates[sampleOffset] != undefined)
-        edgeCandidates[sampleOffset].count++;
-      else{
-        edgeCandidates[sampleOffset] = {offset: sampleOffset, count: 1};
-        edgeCandidates.count++;
-      }
-    }
-  }
+  //   for(var i = start; i < end; i += 4){
+  //     if( image[i  ] > this.blackbarThreshold ||
+  //       image[i+1] > this.blackbarThreshold ||
+  //       image[i+2] > this.blackbarThreshold ){
+  //       ++detections;
+  //       this.conf.debugCanvas.trace(i, DebugCanvasClasses.EDGEDETECT_IMAGE);
+  //     } else {
+  //       this.conf.debugCanvas.trace(i, DebugCanvasClasses.WARN);
+  //     }
+  //   }
+  //   if(detections >= this.detectionThreshold){
+  //     if(edgeCandidates[sampleOffset] != undefined)
+  //       edgeCandidates[sampleOffset].count++;
+  //     else{
+  //       edgeCandidates[sampleOffset] = {offset: sampleOffset, count: 1};
+  //       edgeCandidates.count++;
+  //     }
+  //   }
+  // }
 
 }
 

From 8475340999004cc7015d7b7c96f4fae8a931281c Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Thu, 18 Feb 2021 22:35:58 +0100
Subject: [PATCH 50/68] Fix problems in ArDetector and related functions

---
 src/ext/lib/ar-detect/ArDetector.ts           |  4 +++-
 .../lib/ar-detect/edge-detect/EdgeDetect.ts   | 24 +++++++++----------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/ext/lib/ar-detect/ArDetector.ts b/src/ext/lib/ar-detect/ArDetector.ts
index 6e5cae8..47d1671 100644
--- a/src/ext/lib/ar-detect/ArDetector.ts
+++ b/src/ext/lib/ar-detect/ArDetector.ts
@@ -672,7 +672,9 @@ class ArDetector {
     // otherwise we continue. We add blackbar violations to the list of the cols
     // we'll sample and sort them
     if (guardLineOut.blackbarFail) {
-      sampleCols.concat(guardLineOut.offenders).sort((a, b) => a > b);
+      sampleCols.concat(guardLineOut.offenders).sort(
+        (a: number, b: number) => a - b
+      );
     }
   
     // if we're in fallback mode and blackbar test failed, we restore CSS and quit
diff --git a/src/ext/lib/ar-detect/edge-detect/EdgeDetect.ts b/src/ext/lib/ar-detect/edge-detect/EdgeDetect.ts
index e81cc8f..299bb86 100644
--- a/src/ext/lib/ar-detect/edge-detect/EdgeDetect.ts
+++ b/src/ext/lib/ar-detect/edge-detect/EdgeDetect.ts
@@ -43,7 +43,7 @@ class EdgeDetect{
     
   }
 
-  findBars(image, sampleCols, direction = EdgeDetectPrimaryDirection.VERTICAL, quality = EdgeDetectQuality.IMPROVED, guardLineOut, blackFrameAnalysis){
+  findBars(image, sampleCols, direction = EdgeDetectPrimaryDirection.VERTICAL, quality = EdgeDetectQuality.IMPROVED, guardLineOut?, blackFrameAnalysis?){
     let fastCandidates, edgeCandidates, bars;
     if (direction == EdgeDetectPrimaryDirection.VERTICAL) {
       try {
@@ -863,7 +863,7 @@ class EdgeDetect{
     let tmpI;
     let lastTmpI = 0;
     let edgeDetectCount = 0;
-    for(const c in colsOut) {
+    for(const c of colsOut) {
       c.diffs = [];
     }
     if (reverseSearchDirection) {
@@ -1010,7 +1010,7 @@ class EdgeDetect{
         }
       }
     } else {
-      for(var i = top; i < bottom; i+= this.conf.canvasImageDataRowLength){
+      for(let i = top; i < bottom; i+= this.conf.canvasImageDataRowLength){
         for(let c = 0; c < colsIn.length; c++){
           if (colsIn[c].blackFound && colsIn[c].imageFound) {
             // če smo našli obe točki, potem ne pregledujemo več.
@@ -1066,18 +1066,18 @@ class EdgeDetect{
 
   }
 
-  _columnTest(image, top, bottom, colsIn, colsOut, reverseSearchDirection){
-    var tmpI;
+  _columnTest(image, top: number, bottom: number, colsIn, colsOut, reverseSearchDirection){
+    let tmpI;
     if(reverseSearchDirection){
-      for(var i = bottom - this.conf.canvasImageDataRowLength; i >= top; i-= this.conf.canvasImageDataRowLength){
-        for(var col of colsIn){
+      for(let i = bottom - this.conf.canvasImageDataRowLength; i >= top; i-= this.conf.canvasImageDataRowLength){
+        for(const col of colsIn){
           tmpI = i + (col << 2);
           
           if( image[tmpI]     > this.blackbarThreshold || 
               image[tmpI + 1] > this.blackbarThreshold ||
               image[tmpI + 2] > this.blackbarThreshold ){
             
-            var bottom = (i / this.conf.canvasImageDataRowLength) + 1;
+            const bottom = (i / this.conf.canvasImageDataRowLength) + 1;
             colsOut.push({
               col: col,
               bottom: bottom
@@ -1089,8 +1089,8 @@ class EdgeDetect{
           break;
       }
     } else {
-      for(var i = top; i < bottom; i+= this.conf.canvasImageDataRowLength){
-        for(var col of colsIn){
+      for(let i = top; i < bottom; i+= this.conf.canvasImageDataRowLength){
+        for(const col of colsIn){
           tmpI = i + (col << 2);
           
           if( image[tmpI]     > this.blackbarThreshold || 
@@ -1194,9 +1194,9 @@ class EdgeDetect{
   // }
 
   _imageTest(image, start, end, sampleOffset, edgeCandidates){
-    var detections = 0;
+    let detections = 0;
 
-    for (var i = start; i < end; i += 4){
+    for (let i = start; i < end; i += 4){
       if (image[i  ] > this.blackbarThreshold ||
           image[i+1] > this.blackbarThreshold ||
           image[i+2] > this.blackbarThreshold ){

From 075168ed85ba05c5410e07028f66bd8e1a9262b1 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Thu, 18 Feb 2021 22:38:32 +0100
Subject: [PATCH 51/68] Convert all remaining `var`s to `let`s

---
 src/ext/lib/ObjectCopy.ts                     |   8 +-
 src/ext/lib/ar-detect/ArDetector.ts           |  34 +++---
 src/ext/lib/ar-detect/GuardLine.ts            |  57 ++++-----
 .../lib/ar-detect/edge-detect/EdgeDetect.ts   | 114 +++++++++---------
 src/ext/lib/video-data/PageInfo.ts            |  72 +++++------
 src/ext/lib/video-data/PlayerData.ts          |   2 +-
 src/ext/lib/video-transform/CssHandler.ts     |   4 +-
 src/ext/lib/video-transform/Resizer.ts        |  10 +-
 src/ext/lib/video-transform/Scaler.ts         |   4 +-
 src/ext/lib/video-transform/Stretcher.ts      |  20 +--
 10 files changed, 163 insertions(+), 162 deletions(-)

diff --git a/src/ext/lib/ObjectCopy.ts b/src/ext/lib/ObjectCopy.ts
index 2bceccf..9302e65 100644
--- a/src/ext/lib/ObjectCopy.ts
+++ b/src/ext/lib/ObjectCopy.ts
@@ -4,7 +4,7 @@ class ObjectCopy {
   static addNew(current, newValues){
     
     // clone target
-    var out = JSON.parse(JSON.stringify(newValues));
+    let out = JSON.parse(JSON.stringify(newValues));
 
     if(! current) {
       if(Debug.debug) {
@@ -14,7 +14,7 @@ class ObjectCopy {
       return out;
     }
 
-    for(var k in out) {
+    for(let k in out) {
       // if current key exist, replace it with existing value. Take no action otherwise.
       if(current[k]) {
 
@@ -37,7 +37,7 @@ class ObjectCopy {
 
     // add the values that would otherwise be deleted back to our object. (We need that so user-defined
     // sites don't get forgotten)
-    for(var k in current) {
+    for(let k in current) {
       if (! out[k]) {
         out[k] = current[k];
       }
@@ -47,7 +47,7 @@ class ObjectCopy {
   }
 
   static overwrite(current, newValues){
-    for(var k in newValues) {
+    for(let k in newValues) {
       // if current key exist, replace it with existing value. Take no action otherwise.
       if (current[k] !== undefined) {
         // Types and constructors of objects must match. If they don't, we always use the new value.
diff --git a/src/ext/lib/ar-detect/ArDetector.ts b/src/ext/lib/ar-detect/ArDetector.ts
index 47d1671..a68132f 100644
--- a/src/ext/lib/ar-detect/ArDetector.ts
+++ b/src/ext/lib/ar-detect/ArDetector.ts
@@ -161,16 +161,16 @@ class ArDetector {
     // [2] determine places we'll use to sample our main frame
     //
 
-    var ncol = this.settings.active.arDetect.sampling.staticCols;
-    var nrow = this.settings.active.arDetect.sampling.staticRows;
+    let ncol = this.settings.active.arDetect.sampling.staticCols;
+    let nrow = this.settings.active.arDetect.sampling.staticRows;
     
-    var colSpacing = this.canvas.width / ncol;
-    var rowSpacing = (this.canvas.height << 2) / nrow;
+    let colSpacing = this.canvas.width / ncol;
+    let rowSpacing = (this.canvas.height << 2) / nrow;
     
     this.sampleLines = [];
     this.sampleCols = [];
 
-    for(var i = 0; i < ncol; i++){
+    for(let i = 0; i < ncol; i++){
       if(i < ncol - 1)
         this.sampleCols.push(Math.round(colSpacing * i));
       else{
@@ -178,7 +178,7 @@ class ArDetector {
       }
     }
 
-    for(var i = 0; i < nrow; i++){
+    for(let i = 0; i < nrow; i++){
       if(i < ncol - 5)
         this.sampleLines.push(Math.round(rowSpacing * i));
       else{
@@ -381,7 +381,7 @@ class ArDetector {
       clearTimeout(this.setupTimer);
     }
     
-    var ths = this;
+    let ths = this;
     this.setupTimer = setTimeout(function(){
         ths.setupTimer = null;
         try{
@@ -419,7 +419,7 @@ class ArDetector {
   }
 
   getTimeout(baseTimeout, startTime){
-    var execTime = (performance.now() - startTime);
+    let execTime = (performance.now() - startTime);
     
     return baseTimeout;
   }
@@ -475,12 +475,12 @@ class ArDetector {
       // letterbox also needs to be corrected:
       //   letterbox += [video.zoomedHeight] - [video.unzoomedHeight]
 
-      var vbr = this.video.getBoundingClientRect();
+      let vbr = this.video.getBoundingClientRect();
       
       zoomFactor = vbr.height / this.video.clientHeight;
       letterbox += vbr.height - this.video.clientHeight;
 
-      var trueHeight = this.canvas.height * zoomFactor - letterbox;
+      let trueHeight = this.canvas.height * zoomFactor - letterbox;
 
       if(edges.top > 1 && edges.top <= this.settings.active.arDetect.fallbackMode.noTriggerZonePx ){
         this.logger.log('info', 'arDetect', `%c[ArDetect::calculateArFromEdges] <@${this.arid}>  Edge is in the no-trigger zone. Aspect ratio change is not triggered.`)
@@ -549,7 +549,7 @@ class ArDetector {
       this.init();
     }
     
-    var startTime = performance.now();
+    let startTime = performance.now();
     let sampleCols = this.sampleCols.slice(0);
 
     //
@@ -724,7 +724,7 @@ class ArDetector {
     
     // blackSamples -> {res_top, res_bottom}
    
-    var edgePost = this.edgeDetector.findBars(imageData, sampleCols, EdgeDetectPrimaryDirection.VERTICAL, EdgeDetectQuality.IMPROVED, guardLineOut, bfanalysis);
+    let edgePost = this.edgeDetector.findBars(imageData, sampleCols, EdgeDetectPrimaryDirection.VERTICAL, EdgeDetectQuality.IMPROVED, guardLineOut, bfanalysis);
     
     this.logger.log('info', 'arDetect_verbose', `%c[ArDetect::frameCheck] edgeDetector returned this\n`,  "color: #aaf", edgePost);
     
@@ -737,7 +737,7 @@ class ArDetector {
       return;
     }
 
-    var newAr = this.calculateArFromEdges(edgePost);
+    let newAr = this.calculateArFromEdges(edgePost);
       
     this.logger.log('info', 'arDetect_verbose', `%c[ArDetect::frameCheck] Triggering aspect ration change! new ar: ${newAr}`, "color: #aaf");
 
@@ -930,7 +930,7 @@ class ArDetector {
   
     // detect black level. if currentMax comes above blackbar + blackbar threshold, we know we aren't letterboxed
 
-    for (var i = 0; i < sampleCols.length; ++i){
+    for (let i = 0; i < sampleCols.length; ++i){
       colOffset_r = sampleCols[i] << 2;
       colOffset_g = colOffset_r + 1;
       colOffset_b = colOffset_r + 2;
@@ -966,8 +966,8 @@ class ArDetector {
 
 }
 
-var _ard_console_stop = "background: #000; color: #f41";
-var _ard_console_start = "background: #000; color: #00c399";
-var _ard_console_change = "background: #000; color: #ff8";
+let _ard_console_stop = "background: #000; color: #f41";
+let _ard_console_start = "background: #000; color: #00c399";
+let _ard_console_change = "background: #000; color: #ff8";
 
 export default ArDetector;
diff --git a/src/ext/lib/ar-detect/GuardLine.ts b/src/ext/lib/ar-detect/GuardLine.ts
index b3bc7dc..af196a4 100644
--- a/src/ext/lib/ar-detect/GuardLine.ts
+++ b/src/ext/lib/ar-detect/GuardLine.ts
@@ -48,8 +48,8 @@ class GuardLine {
   }
 
   setBlackbar(bbconf){
-    var bbTop = bbconf.top - this.settings.active.arDetect.guardLine.edgeTolerancePx;
-    var bbBottom = bbconf.bottom + this.settings.active.arDetect.guardLine.edgeTolerancePx;
+    let bbTop = bbconf.top - this.settings.active.arDetect.guardLine.edgeTolerancePx;
+    let bbBottom = bbconf.bottom + this.settings.active.arDetect.guardLine.edgeTolerancePx;
 
     // 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
@@ -76,7 +76,7 @@ class GuardLine {
 
     // dejansko testiranje
     // actual checks
-    var guardLineResult = this.guardLineCheck(image, fallbackMode);
+    let guardLineResult = this.guardLineCheck(image, fallbackMode);
 
     // Zaznali smo kršitev črnega dela, zato nam ni treba preveriti, ali je slika
     // prisotna. Vemo namreč, da se je razmerje stranic zmanjšalo.
@@ -91,7 +91,7 @@ class GuardLine {
       }
     }
 
-    var imageCheckResult = this.imageCheck(image, fallbackMode);
+    let imageCheckResult = this.imageCheck(image, fallbackMode);
 
     return {
       blackbarFail: false,
@@ -115,27 +115,28 @@ class GuardLine {
       return { success: true };
     }
 
-    var offset = (this.aard.canvas.width * this.settings.active.arDetect.guardLine.ignoreEdgeMargin) << 2;
+    let offset = (this.aard.canvas.width * this.settings.active.arDetect.guardLine.ignoreEdgeMargin) << 2;
     
-    var offenders = [];
-    var offenderCount = -1; // doing it this way means first offender has offenderCount==0. Ez index.
+    let offenders = [];
+    let offenderCount = -1; // doing it this way means first offender has offenderCount==0. Ez index.
     
     // TODO: implement logo check.
     
     // preglejmo obe vrstici
     // check both rows
-    
+    let edge_lower, edge_upper;
+
     if(! fallbackMode){
-      var edge_upper = this.blackbar.top;
-      var edge_lower = this.blackbar.bottom;
+      edge_upper = this.blackbar.top;
+      edge_lower = this.blackbar.bottom;
     }
-    else{
+    else {
       // fallback mode is a bit different
       edge_upper = 0;
       edge_lower = this.aard.canvas.height - 1;
     }
     
-    var rowStart, rowEnd;
+    let rowStart, rowEnd;
     
     // <<<=======| checking upper row |========>>>
     
@@ -168,8 +169,8 @@ class GuardLine {
       return {success: true};
     }
     
-    var ret = new Array(offenders.length);
-    for(var o in offenders){
+    let ret = new Array(offenders.length);
+    for(let o in offenders){
       ret[o] = offenders[o].x + (offenders[o].width * 0.25);
     }
     
@@ -180,7 +181,7 @@ class GuardLine {
     if(!this.imageBar.top || !this.imageBar.bottom)
       return { success: false };
         
-    var offset = (this.aard.canvas.width * this.settings.active.arDetect.guardLine.ignoreEdgeMargin) << 2;
+    let offset = (this.aard.canvas.width * this.settings.active.arDetect.guardLine.ignoreEdgeMargin) << 2;
       
     // TODO: implement logo check.
     
@@ -189,20 +190,20 @@ class GuardLine {
     // check both rows - by the rules and definitions, we shouldn't go out of bounds here. no need to check, then
     
     //   if(fallbackMode){
-    //     var edge_upper = this.settings.active.arDetect.fallbackMode.noTriggerZonePx;
-    //     var edge_lower = this.conf.canvas.height - this.settings.active.arDetect.fallbackMode.noTriggerZonePx - 1;
+    //     let edge_upper = this.settings.active.arDetect.fallbackMode.noTriggerZonePx;
+    //     let edge_lower = this.conf.canvas.height - this.settings.active.arDetect.fallbackMode.noTriggerZonePx - 1;
     //   }
     //   else{
-        var edge_upper = this.imageBar.top;
-        var edge_lower = this.imageBar.bottom;
+        let edge_upper = this.imageBar.top;
+        let edge_lower = this.imageBar.bottom;
     //   }
     
     // koliko pikslov rabimo zaznati, da je ta funkcija uspe. Tu dovoljujemo tudi, da so vsi piksli na enem
     // robu (eden izmed robov je lahko v celoti črn)
     // how many non-black pixels we need to consider this check a success. We only need to detect enough pixels
     // on one edge (one of the edges can be black as long as both aren't)
-    var successThreshold = (this.aard.canvas.width * this.settings.active.arDetect.guardLine.imageTestThreshold);
-    var rowStart, rowEnd;
+    let successThreshold = (this.aard.canvas.width * this.settings.active.arDetect.guardLine.imageTestThreshold);
+    let rowStart, rowEnd;
     
     
     // <<<=======| checking upper row |========>>>
@@ -210,7 +211,7 @@ class GuardLine {
     rowStart = ((edge_upper * this.aard.canvas.width) << 2) + offset;
     rowEnd = rowStart + ( this.aard.canvas.width << 2 ) - (offset * 2);
     
-    var res = false;
+    let res = false;
     
     if(Debug.debugCanvas.enabled && Debug.debugCanvas.guardLine){
       // res = this._ti_debugCheckRow(image, rowStart, rowEnd, successThreshold);
@@ -242,8 +243,8 @@ class GuardLine {
 
 
   _gl_rowCheck(image, rowStart, rowEnd, offenders, offenderCount){
-    var firstOffender = -1;
-    for(var i = rowStart; i < rowEnd; i+=4){
+    let firstOffender = -1;
+    for(let i = rowStart; i < rowEnd; i+=4){
       
       // we track sections that go over what's supposed to be a black line, so we can suggest more 
       // columns to sample
@@ -267,8 +268,8 @@ class GuardLine {
   }
 
   // _gl_debugRowCheck(image, rowStart, rowEnd, offenders, offenderCount){
-  //   var firstOffender = -1;
-  //   for(var i = rowStart; i < rowEnd; i+=4){
+  //   let firstOffender = -1;
+  //   for(let i = rowStart; i < rowEnd; i+=4){
       
   //     // we track sections that go over what's supposed to be a black line, so we can suggest more 
   //     // columns to sample
@@ -295,7 +296,7 @@ class GuardLine {
   // }
 
   _ti_checkRow(image, rowStart, rowEnd, successThreshold): boolean {
-    for(var i = rowStart; i < rowEnd; i+=4){
+    for(let i = rowStart; i < rowEnd; i+=4){
       if(image[i] > this.imageThreshold || image[i+1] > this.imageThreshold || image[i+2] > this.imageThreshold){
         if(successThreshold --<= 0){
           return true;
@@ -307,7 +308,7 @@ class GuardLine {
   }
 
   // _ti_debugCheckRow(image, rowStart, rowEnd, successThreshold) {
-  //   for(var i = rowStart; i < rowEnd; i+=4){
+  //   for(let i = rowStart; i < rowEnd; i+=4){
   //     if(image[i] > this.imageThreshold || image[i+1] > this.imageThreshold || image[i+2] > this.imageThreshold){
   //       this.aard.debugCanvas.trace(i, DebugCanvasClasses.GUARDLINE_IMAGE);
   //       if(successThreshold --<= 0){
diff --git a/src/ext/lib/ar-detect/edge-detect/EdgeDetect.ts b/src/ext/lib/ar-detect/edge-detect/EdgeDetect.ts
index 299bb86..bc11efa 100644
--- a/src/ext/lib/ar-detect/edge-detect/EdgeDetect.ts
+++ b/src/ext/lib/ar-detect/edge-detect/EdgeDetect.ts
@@ -128,10 +128,10 @@ class EdgeDetect{
 
       this.logger.log('info', 'arDetect', '[EdgeDetect::findCandidates] searching for candidates on ranges', upper_top, '<->', upper_bottom, ';', lower_top, '<->', lower_bottom);
       
-      var upper_top_corrected = upper_top * this.conf.canvasImageDataRowLength;
-      var upper_bottom_corrected = upper_bottom * this.conf.canvasImageDataRowLength;
-      var lower_top_corrected = lower_top * this.conf.canvasImageDataRowLength;
-      var lower_bottom_corrected = lower_bottom * this.conf.canvasImageDataRowLength;
+      let upper_top_corrected = upper_top * this.conf.canvasImageDataRowLength;
+      let upper_bottom_corrected = upper_bottom * this.conf.canvasImageDataRowLength;
+      let lower_top_corrected = lower_top * this.conf.canvasImageDataRowLength;
+      let lower_bottom_corrected = lower_bottom * this.conf.canvasImageDataRowLength;
       
       // if(Debug.debugCanvas.enabled){
         // this._columnTest_dbgc(image, upper_top_corrected, upper_bottom_corrected, cols_a, res_top, false);
@@ -236,20 +236,20 @@ class EdgeDetect{
   }
 
   edgeDetect(image, samples){
-    var edgeCandidatesTop = {count: 0};
-    var edgeCandidatesBottom = {count: 0};
+    let edgeCandidatesTop = {count: 0};
+    let edgeCandidatesBottom = {count: 0};
     
-    var detections;
-    var canvasWidth = this.conf.canvas.width;
-    var canvasHeight = this.conf.canvas.height;
+    let detections;
+    let canvasWidth = this.conf.canvas.width;
+    let canvasHeight = this.conf.canvas.height;
     
-    var sampleStart, sampleEnd, loopEnd;
-    var sampleRow_black, sampleRow_color;
+    let sampleStart, sampleEnd, loopEnd;
+    let sampleRow_black, sampleRow_color;
     
-    var blackEdgeViolation = false;
+    let blackEdgeViolation = false;
     
-    var topEdgeCount = 0;
-    var bottomEdgeCount = 0;
+    let topEdgeCount = 0;
+    let bottomEdgeCount = 0;
       
     try {
       for (const sample of samples.res_top){
@@ -350,11 +350,11 @@ class EdgeDetect{
   }
 
   edgePostprocess(edges){
-    var edgesTop = [];
-    var edgesBottom = [];
-    var alignMargin = this.conf.canvas.height * this.settings.active.arDetect.allowedMisaligned;
+    let edgesTop = [];
+    let edgesBottom = [];
+    let alignMargin = this.conf.canvas.height * this.settings.active.arDetect.allowedMisaligned;
     
-    var missingEdge = edges.edgeCandidatesTopCount == 0 || edges.edgeCandidatesBottomCount == 0;
+    let missingEdge = edges.edgeCandidatesTopCount == 0 || edges.edgeCandidatesBottomCount == 0;
     
     // pretvorimo objekt v tabelo
     // convert objects to array
@@ -363,8 +363,8 @@ class EdgeDetect{
     delete(edges.edgeCandidatesBottom.count);
 
     if( edges.edgeCandidatesTopCount > 0){
-      for(var e in edges.edgeCandidatesTop){
-        var edge = edges.edgeCandidatesTop[e];
+      for(let e in edges.edgeCandidatesTop){
+        let edge = edges.edgeCandidatesTop[e];
         edgesTop.push({
           distance: edge.offset,
           absolute: edge.offset,
@@ -374,8 +374,8 @@ class EdgeDetect{
     }
     
     if( edges.edgeCandidatesBottomCount > 0){
-      for(var e in edges.edgeCandidatesBottom){
-        var edge = edges.edgeCandidatesBottom[e];
+      for(let e in edges.edgeCandidatesBottom){
+        let edge = edges.edgeCandidatesBottom[e];
         edgesBottom.push({
           distance: this.conf.canvas.height - edge.offset,
           absolute: edge.offset,
@@ -403,7 +403,7 @@ class EdgeDetect{
       if( edgesTop[0].distance >= edgesBottom[0].distance - alignMargin &&
           edgesTop[0].distance <= edgesBottom[0].distance + alignMargin ){
         
-        var blackbarWidth = edgesTop[0].distance > edgesBottom[0].distance ? 
+        let blackbarWidth = edgesTop[0].distance > edgesBottom[0].distance ? 
                             edgesTop[0].distance : edgesBottom[0].distance;
         
         if (edgesTop[0].count + edgesBottom[0].count > this.settings.active.arDetect.edgeDetection.singleSideConfirmationThreshold
@@ -430,14 +430,14 @@ class EdgeDetect{
         // manj vzorcev kot navaden rob.
         
         if (edgesTop[0].length > 1){
-          var lowMargin = edgesBottom[0].distance - alignMargin;
-          var highMargin = edgesBottom[0].distance + alignMargin;
+          let lowMargin = edgesBottom[0].distance - alignMargin;
+          let highMargin = edgesBottom[0].distance + alignMargin;
           
-          for (var i = 1; i < edgesTop.length; i++){
+          for (let i = 1; i < edgesTop.length; i++){
             if(edgesTop[i].distance >= lowMargin && edgesTop[i].distance <= highMargin){
               // dobili smo dejanski rob. vrnimo ga
               // we found the actual edge. let's return that.
-              var blackbarWidth = edgesTop[i].distance > edgesBottom[0].distance ? 
+              let blackbarWidth = edgesTop[i].distance > edgesBottom[0].distance ? 
                                   edgesTop[i].distance : edgesBottom[0].distance;
 
               if (edgesTop[i].count + edgesBottom[0].count > this.settings.active.arDetect.edgeDetection.singleSideConfirmationThreshold
@@ -461,14 +461,14 @@ class EdgeDetect{
           edgesBottom[0].count    < this.conf.sampleCols.length * this.settings.active.arDetect.edgeDetection.logoThreshold){
         
         if(edgesBottom[0].length > 1){
-          var lowMargin = edgesTop[0].distance - alignMargin;
-          var highMargin = edgesTop[0].distance + alignMargin;
+          let lowMargin = edgesTop[0].distance - alignMargin;
+          let highMargin = edgesTop[0].distance + alignMargin;
           
-          for(var i = 1; i < edgesBottom.length; i++){
+          for(let i = 1; i < edgesBottom.length; i++){
             if (edgesBottom[i].distance >= lowMargin && edgesTop[i].distance <= highMargin) {
               // dobili smo dejanski rob. vrnimo ga
               // we found the actual edge. let's return that.
-              var blackbarWidth = edgesBottom[i].distance > edgesTop[0].distance ? 
+              let blackbarWidth = edgesBottom[i].distance > edgesTop[0].distance ? 
                                   edgesBottom[i].distance : edgesTop[0].distance;
               
               if (edgesTop[0].count + edgesBottom[i].count > this.settings.active.arDetect.edgeDetection.singleSideConfirmationThreshold
@@ -497,7 +497,7 @@ class EdgeDetect{
       const edgeDetectionThreshold = this.settings.active.arDetect.edgeDetection.singleSideConfirmationThreshold;
       
       if (edges.edgeCandidatesTopCount == 0 && edges.edgeCandidatesBottomCount != 0){
-        for(var edge of edgesBottom){
+        for(let edge of edgesBottom){
           if(edge.count >= edgeDetectionThreshold)
             return {
               status: EdgeStatus.AR_KNOWN, 
@@ -511,7 +511,7 @@ class EdgeDetect{
         }
       }
       if (edges.edgeCandidatesTopCount != 0 && edges.edgeCandidatesBottomCount == 0){
-        for(var edge of edgesTop){
+        for(let edge of edgesTop){
           if(edge.count >= edgeDetectionThreshold)
             return {
               status: EdgeStatus.AR_KNOWN,
@@ -538,22 +538,22 @@ class EdgeDetect{
     // roughly centered, we return true. Otherwise we return false.
     // we also return true if we detect too much black
   
-    var blackbarThreshold, upper, lower;
+    let blackbarThreshold, upper, lower;
     blackbarThreshold = this.conf.blackLevel + this.settings.active.arDetect.blackbar.threshold;
   
   
-    var middleRowStart = (this.conf.canvas.height >> 1) * this.conf.canvas.width;
-    var middleRowEnd = middleRowStart + this.conf.canvas.width - 1;
+    let middleRowStart = (this.conf.canvas.height >> 1) * this.conf.canvas.width;
+    let middleRowEnd = middleRowStart + this.conf.canvas.width - 1;
   
-    var rowStart = middleRowStart << 2;
-    var midpoint = (middleRowStart + (this.conf.canvas.width >> 1)) << 2
-    var rowEnd = middleRowEnd << 2;
+    let rowStart = middleRowStart << 2;
+    let midpoint = (middleRowStart + (this.conf.canvas.width >> 1)) << 2
+    let rowEnd = middleRowEnd << 2;
   
-    var edge_left = -1, edge_right = -1;
+    let edge_left = -1, edge_right = -1;
   
     // preverimo na levi strani
     // let's check for edge on the left side
-    for(var i = rowStart; i < midpoint; i+=4){
+    for(let i = rowStart; i < midpoint; i+=4){
       if(image[i] > blackbarThreshold || image[i+1] > blackbarThreshold || image[i+2] > blackbarThreshold){
         edge_left = (i - rowStart) >> 2;
         break;
@@ -562,7 +562,7 @@ class EdgeDetect{
   
     // preverimo na desni strani
     // check on the right
-    for(var i = rowEnd; i > midpoint; i-= 4){
+    for(let i = rowEnd; i > midpoint; i-= 4){
       if(image[i] > blackbarThreshold || image[i+1] > blackbarThreshold || image[i+2] > blackbarThreshold){
         edge_right =  this.conf.canvas.width - ((i - rowStart) >> 2);
         break;
@@ -581,9 +581,9 @@ class EdgeDetect{
       return false;
     }
   
-    var edgeError = this.settings.active.arDetect.pillarTest.allowMisaligned;
-    var error_low = 1 - edgeError;
-    var error_hi = 1 + edgeError;
+    let edgeError = this.settings.active.arDetect.pillarTest.allowMisaligned;
+    let error_low = 1 - edgeError;
+    let error_hi = 1 + edgeError;
   
     // če sta 'edge_left' in 'edge_right' podobna/v mejah merske napake, potem vrnemo true — lahko da smo našli logo na sredini zaslona
     // if 'edge_left' and 'edge_right' are similar enough to each other, we return true. If we found a logo in a black frame, we could
@@ -869,7 +869,7 @@ class EdgeDetect{
     if (reverseSearchDirection) {
       if (this.settings.active.arDetect.blackbar.antiGradientMode === AntiGradientMode.Disabled) {
         // todo: remove gradient detection code from this branch
-        for(var i = bottom - this.conf.canvasImageDataRowLength; i >= top; i-= this.conf.canvasImageDataRowLength){
+        for(let i = bottom - this.conf.canvasImageDataRowLength; i >= top; i-= this.conf.canvasImageDataRowLength){
           for(let c = 0; c < colsIn.length; c++){
             if (colsIn[c].blackFound && colsIn[c].imageFound) {
               // če smo našli obe točki, potem ne pregledujemo več.
@@ -923,7 +923,7 @@ class EdgeDetect{
         }
       } else {
         // anti-gradient detection
-        for(var i = bottom - this.conf.canvasImageDataRowLength; i >= top; i-= this.conf.canvasImageDataRowLength){
+        for(let i = bottom - this.conf.canvasImageDataRowLength; i >= top; i-= this.conf.canvasImageDataRowLength){
           for(let c = 0; c < colsIn.length; c++){
             if (colsIn[c].blackFound && colsIn[c].imageFound) {
               // če smo našli obe točki, potem ne pregledujemo več.
@@ -1111,17 +1111,17 @@ class EdgeDetect{
   }
 
   // _columnTest_dbgc(image, top, bottom, colsIn, colsOut, reverseSearchDirection){
-  //   var tmpI;
+  //   let tmpI;
   //   if(reverseSearchDirection){
-  //     for(var i = bottom - this.conf.canvasImageDataRowLength; i >= top; i-= this.conf.canvasImageDataRowLength){
-  //       for(var col of colsIn){
+  //     for(let i = bottom - this.conf.canvasImageDataRowLength; i >= top; i-= this.conf.canvasImageDataRowLength){
+  //       for(let col of colsIn){
   //         tmpI = i + (col << 2);
           
   //         if( image[tmpI]     > this.blackbarThreshold || 
   //             image[tmpI + 1] > this.blackbarThreshold ||
   //             image[tmpI + 2] > this.blackbarThreshold ){
             
-  //           var bottom = (i / this.conf.canvasImageDataRowLength) + 1;
+  //           let bottom = (i / this.conf.canvasImageDataRowLength) + 1;
   //           colsOut.push({
   //             col: col,
   //             bottom: bottom
@@ -1137,8 +1137,8 @@ class EdgeDetect{
   //         break;
   //     }
   //   } else {
-  //     for(var i = top; i < bottom; i+= this.conf.canvasImageDataRowLength){
-  //       for(var col of colsIn){
+  //     for(let i = top; i < bottom; i+= this.conf.canvasImageDataRowLength){
+  //       for(let col of colsIn){
   //         tmpI = i + (col << 2);
           
   //         if( image[tmpI]     > this.blackbarThreshold || 
@@ -1168,7 +1168,7 @@ class EdgeDetect{
   // }
 
   _blackbarTest(image, start, end){
-    for(var i = start; i < end; i += 4){
+    for(let i = start; i < end; i += 4){
       if( image[i  ] > this.blackbarThreshold ||
           image[i+1] > this.blackbarThreshold ||
           image[i+2] > this.blackbarThreshold ){
@@ -1179,7 +1179,7 @@ class EdgeDetect{
   }
 
   // _blackbarTest_dbg(image, start, end){
-  //   for(var i = start; i < end; i += 4){
+  //   for(let i = start; i < end; i += 4){
   //     if( image[i  ] > this.blackbarThreshold ||
   //         image[i+1] > this.blackbarThreshold ||
   //         image[i+2] > this.blackbarThreshold ){
@@ -1214,9 +1214,9 @@ class EdgeDetect{
   }
 
   // _imageTest_dbg(image, start, end, sampleOffset, edgeCandidates){
-  //   var detections = 0;
+  //   let detections = 0;
 
-  //   for(var i = start; i < end; i += 4){
+  //   for(let i = start; i < end; i += 4){
   //     if( image[i  ] > this.blackbarThreshold ||
   //       image[i+1] > this.blackbarThreshold ||
   //       image[i+2] > this.blackbarThreshold ){
diff --git a/src/ext/lib/video-data/PageInfo.ts b/src/ext/lib/video-data/PageInfo.ts
index 370424f..03a31af 100644
--- a/src/ext/lib/video-data/PageInfo.ts
+++ b/src/ext/lib/video-data/PageInfo.ts
@@ -111,7 +111,7 @@ class PageInfo {
     if(this.rescanTimer){
       clearTimeout(this.rescanTimer);
     }
-    for (var video of this.videos) {
+    for (let video of this.videos) {
       try {
         (this.comms.unregisterVideo as any)(video.vdid)
         video.destroy();
@@ -134,7 +134,7 @@ class PageInfo {
   }
 
   reset() {
-    for(var video of this.videos) {
+    for(let video of this.videos) {
       video.destroy();
     }
     this.rescan(RescanReason.MANUAL);
@@ -150,7 +150,7 @@ class PageInfo {
 
   setActionHandler(actionHandler) {
     this.actionHandler = actionHandler;
-    for (var item of this.actionHandlerInitQueue) {
+    for (let item of this.actionHandlerInitQueue) {
       this.actionHandler.registerHandleMouse(item);
     }
     this.actionHandlerInitQueue = [];
@@ -176,7 +176,7 @@ class PageInfo {
     const oldVideoCount = this.videos.length;
 
     try{
-      var vids = this.getVideos(window.location.hostname);
+      let vids = this.getVideos(window.location.hostname);
 
       if(!vids || vids.length == 0){
         this.hasVideos = false;
@@ -190,8 +190,8 @@ class PageInfo {
 
       // add new videos
       this.hasVideos = false;
-      var videoExists = false;    
-      var video, v;
+      let videoExists = false;    
+      let video, v;
 
       for (video of vids) {
         // če najdemo samo en video z višino in širino, to pomeni, da imamo na strani veljavne videe
@@ -314,7 +314,7 @@ class PageInfo {
         clearTimeout(this.rescanTimer);
       }
 
-      var ths = this;
+      let ths = this;
       
       this.rescanTimer = setTimeout(function(rescanReason){
         ths.rescanTimer = null;
@@ -332,7 +332,7 @@ class PageInfo {
       clearTimeout(this.urlCheckTimer);
     }
 
-    var ths = this;
+    let ths = this;
         
     this.urlCheckTimer = setTimeout(function(){
       ths.urlCheckTimer = null;
@@ -357,14 +357,14 @@ class PageInfo {
 
   initArDetection(playingOnly){
     if (playingOnly) {
-      for(var vd of this.videos){
+      for(let vd of this.videos){
         if(vd.isPlaying()) {
           vd.initArDetection();
         }
       }
       return;
     } else {
-      for(var vd of this.videos){
+      for(let vd of this.videos){
         vd.initArDetection();
       }
     }
@@ -375,13 +375,13 @@ class PageInfo {
   // these need to be called on tab switch
   pauseProcessing(playingOnly){
     if (playingOnly) {
-      for(var vd of this.videos){
+      for(let vd of this.videos){
         if (vd.isPlaying()) {
           vd.pause();
         }
       }  
     } else {
-      for(var vd of this.videos){
+      for(let vd of this.videos){
         vd.pause();
       }
     }
@@ -389,7 +389,7 @@ class PageInfo {
 
   resumeProcessing(resumeAutoar = false, playingOnly = false){
     if (playingOnly) {
-      for(var vd of this.videos){
+      for(let vd of this.videos){
         if (vd.isPlaying()) {
           vd.resume();
           if(resumeAutoar){
@@ -398,7 +398,7 @@ class PageInfo {
         }
       }
     } else {
-      for(var vd of this.videos){
+      for(let vd of this.videos){
         vd.resume();
         if(resumeAutoar){
           vd.resumeAutoAr();
@@ -413,13 +413,13 @@ class PageInfo {
       this.logger.log('info', 'debug', '[PageInfo::startArDetection()] starting automatic ar detection!')
     }
     if (playingOnly) {
-      for(var vd of this.videos){
+      for(let vd of this.videos){
         if (vd.isPlaying()) {
           vd.startArDetection();
         }
       }
     } else {
-      for(var vd of this.videos){
+      for(let vd of this.videos){
         vd.startArDetection();
       }
     }
@@ -427,13 +427,13 @@ class PageInfo {
 
   stopArDetection(playingOnly){
     if (playingOnly) {
-      for(var vd of this.videos){
+      for(let vd of this.videos){
         if (vd.isPlaying()) { 
           vd.stopArDetection();
         }
       }
     } else {
-      for(var vd of this.videos){
+      for(let vd of this.videos){
         vd.stopArDetection();
       }
     }
@@ -448,7 +448,7 @@ class PageInfo {
       this.logger.log('info', 'debug', '[PageInfo::setAr] aspect ratio is auto');
 
       try {
-        for (var vd of this.videos) {
+        for (let vd of this.videos) {
           if (!playingOnly || vd.isPlaying()) {
             vd.resetLastAr();
           }
@@ -463,13 +463,13 @@ class PageInfo {
 
     // TODO: find a way to only change aspect ratio for one video
     if (ar === AspectRatioType.Reset) {
-      for (var vd of this.videos) {
+      for (let vd of this.videos) {
         if (!playingOnly || vd.isPlaying()) {
           vd.resetAr();
         }
       }
     } else {
-      for (var vd of this.videos) {
+      for (let vd of this.videos) {
         if (!playingOnly || vd.isPlaying()) {
           vd.setAr(ar)
         }
@@ -479,13 +479,13 @@ class PageInfo {
   
   setVideoAlignment(videoAlignment, playingOnly) {
     if (playingOnly) {
-      for(var vd of this.videos) {
+      for(let vd of this.videos) {
         if (vd.isPlaying()) { 
           vd.setVideoAlignment(videoAlignment)
         }
       }
     } else {
-      for(var vd of this.videos) {
+      for(let vd of this.videos) {
         vd.setVideoAlignment(videoAlignment)
       }
     }
@@ -493,13 +493,13 @@ class PageInfo {
 
   setPanMode(mode, playingOnly) {
     if (playingOnly) {
-      for(var vd of this.videos) {
+      for(let vd of this.videos) {
         if (vd.isPlaying()) {
           vd.setPanMode(mode);
         }
       }
     } else {
-      for(var vd of this.videos) {
+      for(let vd of this.videos) {
         vd.setPanMode(mode);
       }
     }
@@ -507,13 +507,13 @@ class PageInfo {
 
   restoreAr(playingOnly) {
     if (playingOnly) {
-      for(var vd of this.videos){
+      for(let vd of this.videos){
         if (vd.isPlaying()) {
           vd.restoreAr();
         }
       }
     } else {
-      for(var vd of this.videos){
+      for(let vd of this.videos){
         vd.restoreAr();
       }
     }
@@ -523,13 +523,13 @@ class PageInfo {
     // TODO: find a way to only change aspect ratio for one video
 
     if (playingOnly) {
-      for(var vd of this.videos){
+      for(let vd of this.videos){
         if (vd.isPlaying()) {
           vd.setStretchMode(stretchMode, fixedStretchRatio)
         }
       }
     } else {
-      for(var vd of this.videos){
+      for(let vd of this.videos){
         vd.setStretchMode(stretchMode, fixedStretchRatio)
       }
     }
@@ -537,20 +537,20 @@ class PageInfo {
 
   setZoom(zoomLevel, no_announce, playingOnly) {
     if (playingOnly) {
-      for(var vd of this.videos) {
+      for(let vd of this.videos) {
         if (vd.isPlaying()) {
           vd.setZoom(zoomLevel, no_announce);
         }
       }
     } else {
-      for(var vd of this.videos) {
+      for(let vd of this.videos) {
         vd.setZoom(zoomLevel, no_announce);
       }
     }
   }
 
   zoomStep(step, playingOnly) {
-    for(var vd of this.videos){
+    for(let vd of this.videos){
       if (!playingOnly || vd.isPlaying()) {
         vd.zoomStep(step);
       }
@@ -558,12 +558,12 @@ class PageInfo {
   }
 
   markPlayer(name, color) { 
-    for (var vd of this.videos) {
+    for (let vd of this.videos) {
       vd.markPlayer(name,color);
     }
   }
   unmarkPlayer() {
-    for (var vd of this.videos) {
+    for (let vd of this.videos) {
       vd.unmarkPlayer();
     }
   }
@@ -578,13 +578,13 @@ class PageInfo {
   }
 
   setManualTick(manualTick) {
-    for(var vd of this.videos) {
+    for(let vd of this.videos) {
       vd.setManualTick(manualTick);
     }
   }
 
   tick() {
-    for(var vd of this.videos) {
+    for(let vd of this.videos) {
       vd.tick();
     }
   }
diff --git a/src/ext/lib/video-data/PlayerData.ts b/src/ext/lib/video-data/PlayerData.ts
index 075c7a7..4c63d8a 100644
--- a/src/ext/lib/video-data/PlayerData.ts
+++ b/src/ext/lib/video-data/PlayerData.ts
@@ -207,7 +207,7 @@ class PlayerData {
       this.destroyOverlay();
     }
 
-    var overlay = document.createElement('div');
+    let overlay = document.createElement('div');
     overlay.style.width = '100%';
     overlay.style.height = '100%';
     overlay.style.position = 'absolute';
diff --git a/src/ext/lib/video-transform/CssHandler.ts b/src/ext/lib/video-transform/CssHandler.ts
index ec04fe1..eb6c693 100644
--- a/src/ext/lib/video-transform/CssHandler.ts
+++ b/src/ext/lib/video-transform/CssHandler.ts
@@ -24,7 +24,7 @@ class CssHandler {
         }
       }
   
-      for (var i in styleArray) {
+      for (let i in styleArray) {
         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
@@ -45,7 +45,7 @@ class CssHandler {
   static buildStyleString(styleArray) {
     let styleString = '';
 
-    for(var i in styleArray) {
+    for(let i in styleArray) {
       if(styleArray[i]) {
         styleString += styleArray[i] + "; ";
       }
diff --git a/src/ext/lib/video-transform/Resizer.ts b/src/ext/lib/video-transform/Resizer.ts
index 5b5fd95..4788437 100644
--- a/src/ext/lib/video-transform/Resizer.ts
+++ b/src/ext/lib/video-transform/Resizer.ts
@@ -104,7 +104,7 @@ class Resizer {
     // Skrbi za "stare" možnosti, kot na primer "na širino zaslona", "na višino zaslona" in "ponastavi". 
     // Približevanje opuščeno.
     // handles "legacy" options, such as 'fit to widht', 'fit to height' and AspectRatioType.Reset. No zoom tho
-    var ratioOut;
+    let ratioOut;
 
     if (!this.conf.video) {
       this.logger.log('info', 'debug', "[Scaler.js::modeToAr] No video??",this.conf.video, "killing videoData");
@@ -126,7 +126,7 @@ class Resizer {
     // IMPORTANT NOTE: lastAr needs to be set after _res_setAr() is called, as _res_setAr() assumes we're
     // setting a static aspect ratio (even if the function is called from here or ArDetect). 
     
-    var fileAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
+    let fileAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
       
     if (ar.type === AspectRatioType.FitWidth){
       ar.ratio = ratioOut > fileAr ? ratioOut : fileAr;
@@ -296,7 +296,7 @@ class Resizer {
 
     this.stretcher.chromeBugMitigation(stretchFactors);
 
-    var translate = this.computeOffsets(stretchFactors);
+    let translate = this.computeOffsets(stretchFactors);
 
 
     console.log("aspect ratio will be set. stretch factors:", stretchFactors, "translate:", translate);
@@ -603,7 +603,7 @@ class Resizer {
         }
       }
   
-      for (var i in styleArray) {
+      for (let i in styleArray) {
         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
@@ -626,7 +626,7 @@ class Resizer {
   buildStyleString(styleArray) {
     let styleString = '';
 
-    for(var i in styleArray) {
+    for(let i in styleArray) {
       if(styleArray[i]) {
         styleString += styleArray[i] + " !important; ";
       }
diff --git a/src/ext/lib/video-transform/Scaler.ts b/src/ext/lib/video-transform/Scaler.ts
index 25e0d94..ecb65cf 100644
--- a/src/ext/lib/video-transform/Scaler.ts
+++ b/src/ext/lib/video-transform/Scaler.ts
@@ -30,7 +30,7 @@ class Scaler {
       return ar.ratio; 
     }
 
-    var ratioOut;
+    let ratioOut;
 
     if (!this.conf.video) {
       this.logger.log('error', 'debug', "[Scaler.js::modeToAr] No video??",this.conf.video, "killing videoData");
@@ -51,7 +51,7 @@ class Scaler {
     // IMPORTANT NOTE: lastAr needs to be set after _res_setAr() is called, as _res_setAr() assumes we're
     // setting a static aspect ratio (even if the function is called from here or ArDetect). 
     
-    var fileAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
+    let fileAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
       
     if (ar.type === AspectRatioType.FitWidth) {
       ratioOut > fileAr ? ratioOut : fileAr
diff --git a/src/ext/lib/video-transform/Stretcher.ts b/src/ext/lib/video-transform/Stretcher.ts
index 6017b25..388b285 100644
--- a/src/ext/lib/video-transform/Stretcher.ts
+++ b/src/ext/lib/video-transform/Stretcher.ts
@@ -47,17 +47,17 @@ class Stretcher {
   }
 
   applyConditionalStretch(stretchFactors, actualAr){
-    var playerAr = this.conf.player.dimensions.width / this.conf.player.dimensions.height;
-    var videoAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
+    let playerAr = this.conf.player.dimensions.width / this.conf.player.dimensions.height;
+    let videoAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
 
     if (! actualAr){
       actualAr = playerAr;
     }
 
-    var newWidth = this.conf.video.offsetWidth * stretchFactors.xFactor;
-    var newHeight = this.conf.video.offsetHeight * stretchFactors.yFactor;
+    let newWidth = this.conf.video.offsetWidth * stretchFactors.xFactor;
+    let newHeight = this.conf.video.offsetHeight * stretchFactors.yFactor;
 
-    var actualWidth, actualHeight;
+    let actualWidth, actualHeight;
 
     // determine the dimensions of the video (sans black bars) after scaling
     if(actualAr < videoAr){
@@ -68,11 +68,11 @@ class Stretcher {
       actualWidth = newWidth;
     }
 
-    var minW = this.conf.player.dimensions.width * (1 - this.settings.active.stretch.conditionalDifferencePercent);
-    var maxW = this.conf.player.dimensions.width * (1 + this.settings.active.stretch.conditionalDifferencePercent);
+    let minW = this.conf.player.dimensions.width * (1 - this.settings.active.stretch.conditionalDifferencePercent);
+    let maxW = this.conf.player.dimensions.width * (1 + this.settings.active.stretch.conditionalDifferencePercent);
 
-    var minH = this.conf.player.dimensions.height * (1 - this.settings.active.stretch.conditionalDifferencePercent);
-    var maxH = this.conf.player.dimensions.height * (1 + this.settings.active.stretch.conditionalDifferencePercent);
+    let minH = this.conf.player.dimensions.height * (1 - this.settings.active.stretch.conditionalDifferencePercent);
+    let maxH = this.conf.player.dimensions.height * (1 + this.settings.active.stretch.conditionalDifferencePercent);
 
     if (actualWidth >= minW && actualWidth <= maxW) {
       stretchFactors.xFactor *= this.conf.player.dimensions.width / actualWidth;
@@ -168,7 +168,7 @@ squeezeFactor:          ${squeezeFactor}`, '\nvideo', this.conf.video);
       actualAr = playerAr;
     }
 
-    var stretchFactors: any = {
+    let stretchFactors: any = {
       xFactor: 1,
       yFactor: 1
     };

From 7e41768aba36af9217a0b5a637b0399c34f11ac8 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 20 Feb 2021 00:09:17 +0100
Subject: [PATCH 52/68] Migrate actionhandler to ts

---
 .../{ActionHandler.js => ActionHandler.ts}    | 35 ++++++++++++++-----
 src/ext/lib/video-data/PageInfo.ts            | 10 +++---
 src/ext/lib/video-data/VideoData.ts           |  2 +-
 3 files changed, 32 insertions(+), 15 deletions(-)
 rename src/ext/lib/{ActionHandler.js => ActionHandler.ts} (92%)

diff --git a/src/ext/lib/ActionHandler.js b/src/ext/lib/ActionHandler.ts
similarity index 92%
rename from src/ext/lib/ActionHandler.js
rename to src/ext/lib/ActionHandler.ts
index dd34644..24a94af 100644
--- a/src/ext/lib/ActionHandler.js
+++ b/src/ext/lib/ActionHandler.ts
@@ -1,20 +1,37 @@
 import Debug from '../conf/Debug';
 import PlayerData from './video-data/PlayerData';
 import ExtensionMode from '../../common/enums/ExtensionMode.enum';
+import Logger from './Logger';
+import PageInfo from './video-data/PageInfo';
+import Settings from './Settings';
+import VideoData from './video-data/VideoData';
 
 if(process.env.CHANNEL !== 'stable'){
   console.info("Loading ActionHandler");
 }
 
 class ActionHandler {
+  logger: Logger;
+  pageInfo: PageInfo;
+  settings: Settings;
+
+
+  inputs: string[] = ['input', 'select', 'button', 'textarea'];
+  keyboardLocalDisabled: boolean = true;
+
+  keyUpActions: any[] = [];
+  keyDownActions: any[] = [];
+  mouseMoveActions: any[] = [];
+  mouseScrollUpActions: any[] = [];
+  mouseScrollDownActions: any[] = [];
+  mouseEnterActions: any[] = [];
+  mouseLeaveActions: any[] = [];
+
 
   constructor(pageInfo) {
     this.logger = pageInfo.logger;
     this.pageInfo = pageInfo;
     this.settings = pageInfo.settings;
-    
-    this.inputs = ['input', 'select', 'button', 'textarea'];
-    this.keyboardLocalDisabled = false;
   }
 
   init() {
@@ -240,7 +257,7 @@ class ActionHandler {
       this.isActionMatchStandard(shortcut, event) || this.isActionMatchKeyCode(shortcut, event);
   }
 
-  execAction(actions, event, videoData) {
+  execAction(actions, event, videoData?: VideoData) {
     this.logger.log('info', 'keyboard', "%c[ActionHandler::execAction] Trying to find and execute action for event. Actions/event: ", "color: #ff0", actions, event);
 
     const isLatin = event.key ? this.isLatin(event.key) : true;
@@ -275,10 +292,10 @@ class ActionHandler {
               this.settings.active.sites[site].stretch = cmd.arg;
             } else if (cmd.action === "set-alignment") {
               this.settings.active.sites[site].videoAlignment = cmd.arg;
-            } else if (cmd.action === "set-ExtensionMode") {
-              this.settings.active.sites[site].status = cmd.arg;
+            } else if (cmd.action === "set-extension-mode") {
+              this.settings.active.sites[site].mode = cmd.arg;
             } else if (cmd.action === "set-autoar-mode") {
-              this.settings.active.sites[site].arStatus = cmd.arg;
+              this.settings.active.sites[site].autoar = cmd.arg;
             } else if (cmd.action === 'set-keyboard') {
               this.settings.active.sites[site].keyboardShortcutsEnabled = cmd.arg;
             } else if (cmd.action === 'set-ar-persistence') {
@@ -323,9 +340,9 @@ class ActionHandler {
     this.execAction(this.keyDownActions, event);
   }
 
-  handleMouseMove(event, videoData) {
+  handleMouseMove(event, videoData?: VideoData) {
     this.logger.log('info', 'keyboard', "[ActionHandler::handleMouseMove] mouse move is being handled.\nevent:", event, "\nvideo data:", videoData);
-    videoData.panHandler(event);
+    videoData?.panHandler(event);
     this.execAction(this.mouseMoveActions, event, videoData)
   }
 
diff --git a/src/ext/lib/video-data/PageInfo.ts b/src/ext/lib/video-data/PageInfo.ts
index 03a31af..c8c3940 100644
--- a/src/ext/lib/video-data/PageInfo.ts
+++ b/src/ext/lib/video-data/PageInfo.ts
@@ -439,7 +439,7 @@ class PageInfo {
     }
   }
 
-  setAr(ar, playingOnly){
+  setAr(ar, playingOnly?: boolean){
     this.logger.log('info', 'debug', '[PageInfo::setAr] aspect ratio:', ar, "playing only?", playingOnly)
 
     if (ar.type !== AspectRatioType.Automatic) {
@@ -491,7 +491,7 @@ class PageInfo {
     }
   }
 
-  setPanMode(mode, playingOnly) {
+  setPanMode(mode, playingOnly?: boolean) {
     if (playingOnly) {
       for(let vd of this.videos) {
         if (vd.isPlaying()) {
@@ -519,7 +519,7 @@ class PageInfo {
     }
   }
 
-  setStretchMode(stretchMode, playingOnly, fixedStretchRatio){
+  setStretchMode(stretchMode, playingOnly?: boolean, fixedStretchRatio?: boolean){
     // TODO: find a way to only change aspect ratio for one video
 
     if (playingOnly) {
@@ -535,7 +535,7 @@ class PageInfo {
     }
   }
 
-  setZoom(zoomLevel, no_announce, playingOnly) {
+  setZoom(zoomLevel, no_announce?: boolean, playingOnly?: boolean) {
     if (playingOnly) {
       for(let vd of this.videos) {
         if (vd.isPlaying()) {
@@ -549,7 +549,7 @@ class PageInfo {
     }
   }
 
-  zoomStep(step, playingOnly) {
+  zoomStep(step, playingOnly?: boolean) {
     for(let vd of this.videos){
       if (!playingOnly || vd.isPlaying()) {
         vd.zoomStep(step);
diff --git a/src/ext/lib/video-data/VideoData.ts b/src/ext/lib/video-data/VideoData.ts
index 40ea0f4..d4fa060 100644
--- a/src/ext/lib/video-data/VideoData.ts
+++ b/src/ext/lib/video-data/VideoData.ts
@@ -606,7 +606,7 @@ class VideoData {
     this.resizer.setLastAr('original');
   }
 
-  panHandler(event, forcePan) {
+  panHandler(event, forcePan?: boolean) {
     if (this.invalid) {
       return;
     }

From d4868020f4eb6a0ed92883fd9e3ed2b40786bb39 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Fri, 5 Mar 2021 23:35:32 +0100
Subject: [PATCH 53/68] DrmDetector can into typescript

---
 src/ext/lib/ar-detect/{DrmDetecor.js => DrmDetecor.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/ext/lib/ar-detect/{DrmDetecor.js => DrmDetecor.ts} (100%)

diff --git a/src/ext/lib/ar-detect/DrmDetecor.js b/src/ext/lib/ar-detect/DrmDetecor.ts
similarity index 100%
rename from src/ext/lib/ar-detect/DrmDetecor.js
rename to src/ext/lib/ar-detect/DrmDetecor.ts

From e5d1addc00979e500a738e740d7224ede97da9b4 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Fri, 5 Mar 2021 23:39:12 +0100
Subject: [PATCH 54/68] ???

---
 src/csui/PlayerUiComponent.vue | 353 +++++++++++----------------------
 1 file changed, 115 insertions(+), 238 deletions(-)

diff --git a/src/csui/PlayerUiComponent.vue b/src/csui/PlayerUiComponent.vue
index 9e8eb02..b2ceade 100644
--- a/src/csui/PlayerUiComponent.vue
+++ b/src/csui/PlayerUiComponent.vue
@@ -1,299 +1,176 @@
 <template>
-  <div v-if="uiVisible" class="uw-hover uv-hover-trigger-region">
-    <div class="flex flex-column flex-center">
-      <div class="text panel">
-        <h1>Your browser is incompatible with this extension on this site</h1>
-        <!-- <p><sup>2020-12-22</sup></p> -->
-        <p>
-          In October 2020, Microsoft Edge received an update that breaks video playback on sites that utilize DRM in certain cases.
-          As a result of this bug, cropped videos will be displayed incorrectly. This issue cannot be fixed by any extension, and
-          <b>using this extension (and its alternatives) on this site may make things worse</b> — even if you only set aspect ratio manually.
-        </p>
-        <p>
-          I have attempted all possible workarounds and none of them work.
-        </p>
-        <p>
-          I would like to ask a couple of favours:
-        </p>
-        <p>
-          <ul>
-            <li>
-              <b>Report this issue to Microsoft.</b>
-              I have already done so, however such issues get noticed quicker if more people report them.
-              <div class="vspc"></div>
-              I have prepared a description of the problem — you can find it below (you may need to scroll).
-            </li>
-            <li>
-              <b>Please notify me when Microsoft fixes this issue.</b>
-              I use windows only sporadically and cannot check whether Edge developers have fixed the issue or not.
-              You can contact me by opening an issue on <a href="https://github.com/tamius-han/ultrawidify/issues" target="_blank">github</a> or
-              sending me <a href="mailto:tamius.han@gmail.com" target="_blank">an email</a>. You can also <a href="https://www.reddit.com/message/compose?to=xternal7" target="_blank">PM me on reddit</a>.
-              <div class="vspc"></div>
-              Please include the following text with your message:
-              <div class="vspc"></div>
-              <i>{{userAgent}}</i>
-              <div class="vspc"></div>
-              You can determine whether the issue is fixed by attempting to watch 21:9 movie on netflix and compare what you see to the screenshots I included at the bottom.
-            </li>
-            <li>
-              <small>
-                <b>Avoid leaving one-star reviews on Chrome Web Store.</b> I don't usually whine about one star 
-                reviews, but Chrome Web Store is for Google Chrome users. As such, I cannot optimize the extension
-                for Edge in my Chrome Web Store submission. Furthermore, people reading reviews in Chrome
-                Web Store are interested in knowing how extension behaves in Google Chrome. The experience you
-                get in Microsoft Edge is irrelevant to them.
-                <div class="vspc"></div>
-                If you wish the best experience, you should install this addon from Edge Addons store (once I make
-                it available on that store again).
-                <div class="vspc"></div>
-                Thanks for being understanding.
-              </small>
-            </li>
-          </ul>
-        </p>
-        <p>
-           <b>Thanks for your help in advance. It's much appreciated.</b>
-        </p>
-        <p>&nbsp;</p>
-        <p>
-          If you're interested in more details about why this happens, you can find more details in <a href="https://stuff.tamius.net/sacred-texts/2020/12/22/ultrawidify-and-edge-2020-edition/" target="_blank">this blogpost</a>.
-        </p>
-        <p>
-          Finished reading? <b><a @click="uiVisible=false">Hide this popup</a></b>.
-        </p>
-        <p>
-          In order to disable this popup forever, open the ultrawidify popup, click on 'site settings' and disable automatic aspect ratio detection for this site.
-          You should probably even disable the extension for this site altogether for the time being.
-        </p>
-        <p>
-          <br/>
-          <br/>
-        </p>
-        <h3>Help by reporting this issue to Microsoft</h3>
-        <p><b>Go to the settings menu</b> <small>(upper right corner of the window, three dots)</small> <b>→ Help and feedback</b> <small>(second option from the bottom)</small> <b>→ Send feedback.</b> (Alternatively, press Alt + Shift + I)</p>
-        <p>Enter this in the first box:</p>
-        <p>
-          <br/>
-          <i>
-            Videos on sites that utilize DRM protection schemes are not being scaled correctly. If a part of a DRM-protected video is being displayed outside the boundaries of the browser window, 
-            Edge will scale the video to only fit the portion of the video tag that is currently being displayed on the screen, rather than filling the entire video tag. This causes videos appear
-            differently than website developers intended at best, and breaking certain websites at worst.
-          </i>
-          <br/>
-        </p>
-        <p>Or something along these lines. Click 'send' when you're done.</p>
-        <p>It's the squeaky wheel that gets the grease: developers tend to prioritize issues that affect more people. The more people report this issue, the more likely it is for developers to notice it.</p>
-      </div>
-      <div class="image-examples panel">
-        <h3>How can one tell when the Edge bug is fixed?</h3>
-        <p>
-          When 21:9 movies on netflix look like this:
-        </p>
-        <p>
-          <img :src="getUrl('res/img/git-ignore/edge-demo-working.jpg')" />
-        </p>
-        <p>
-          And not like this:
-        </p>
-        <p>
-          <img :src="getUrl('res/img/git-ignore/edge-demo.jpg')" />
-        </p>
-        <p>&nbsp;</p>
-        <p>&nbsp;</p>
-        <p>&nbsp;</p>
-        <p>&nbsp;</p>
+  <div class="uw-hover uv-hover-trigger-region">
+    TEST CONTENT
+  </div>
+  <div class="popup-panel">
+    <div class="tab-row flex flex-row">
+      <div class="tab">
+        todo: icon<br/>
+        Video options
       </div>
     </div>
+    <div>sudpo 
+      <!-- Panel section -->
+      <template v-if="settingsInitialized">
+        <VideoSettings
+          :settings="settings"
+        ></VideoSettings>
+        <ResizerDebugPanel :debugData="debugData">
+        </ResizerDebugPanel>
+      </template>
+    </div>
   </div>
 </template>
 
 <script>
+import VideoSettings from './PlayerUiPanels/VideoSettings.vue'
 import { mapState } from 'vuex';
 import Icon from '../common/components/Icon';
+import ResizerDebugPanel from './PlayerUiPanels/ResizerDebugPanelComponent';
 import BrowserDetect from '../ext/conf/BrowserDetect';
+import ExecAction from './ui-libs/ExecAction';
+import Logger from '../ext/lib/Logger';
 import Settings from '../ext/lib/Settings';
-import FontLoader from '../ext/lib/uwui/FontLoader';
 
 export default {
   components: {
     Icon,
+    ResizerDebugPanel, VideoSettings
   },
   data() {
     return {
+      // component properties
+      settings: {},
+      settingsInitialized: false,
+      execAction: new ExecAction(),
+      logger: null,
+
       uiVisible: true,
-      userAgent: window.navigator.userAgent
+      debugData: {
+        resizer: {},
+        player: {},
+      },
+      debugDataPrettified: ''
     };
   },
-  created() {
-    FontLoader.loadFonts();
-  },
   computed: {
+    ...mapState([
+      'showUi',
+      'resizerDebugData',
+      'playerDebugData'
+    ]),
+    windowWidth: () => {
+      return window.innerWidth;
+    },
+    windowHeight: () => {
+      return window.innerHeight;
+    },
   },
   watch: {
     showUi(visible) {
       if (visible !== undefined) {
         this.uiVisible = visible;
       }
+    },
+    resizerDebugData(newData) {
+      this.debugData.resizer = newData;
+      this.debugDataPrettified = JSON.stringify(this.debugData, null, 2);
+    },
+    playerDebugData(newData) {
+      this.debugData.player = newData;
+      this.debugDataPrettified = JSON.stringify(this.debugData, null, 2);
+    }
+  },
+  async created() {
+    try {
+      this.logger = new Logger();
+      await this.logger.init({
+          allowLogging: true,
+      });
+
+      this.settings = new Settings({afterSettingsSaved: this.updateConfig, logger: this.logger});
+      await this.settings.init();
+      this.settingsInitialized = true;
+
+      this.execAction.setSettings(this.settings);
+    } catch (e) {
+      console.error('Failed to initiate ultrawidify player ui.', e);
     }
   },
   methods: {
     getUrl(url) {
       return BrowserDetect.getURL(url);
     },
-    async hidePopupForever() {
-      const settings = new Settings();
-      await settings.init();
-
-      if (!settings.active.mutedNotifications) {
-        settings.active.mutedNotifications = {};
-      }
-      if (!settings.active.mutedNotifications?.browserSpecific) {
-        settings.active.mutedNotifications.browserSpecific = {
-          edge: {
-            brokenDrm: {
-            }
-          }
-        };
-      }
-      settings.active.mutedNotifications.browserSpecific.edge.brokenDrm[window.location.hostname] = true;
-
-      await settings.saveWithoutReload();
-      this.uiVisible = false;
-    }
   }
 }
 </script>
 
-<style lang="scss" src="../res/css/uwui-base.scss"></style>
+<style lang="scss" src="../res/css/uwui-base.scss" scoped></style>
 <style lang="scss" scoped>
 @import '../res/css/uwui-base.scss';
 @import '../res/css/colors.scss';
-// @import '../res/css/font/overpass.css';
-// @import '../res/css/font/overpass-mono.css';
+@import '../res/css/font/overpass.css';
+@import '../res/css/font/overpass-mono.css';
 @import '../res/css/common.scss';
 
 .uw-ultrawidify-container-root {
-
-  * {
-    font-family: 'Overpass', 'Segoe UI';
-    pointer-events: all;
-  }
-
-  pointer-events: auto;
-
-
-  .vspc {
-    height: 0.5em;
-    display: block;
-  }
+  // .relative-wrapper {
+  //   position: relative;
+  //   width: 100%;
+  //   height: 100%;
+  // }
 
   .uw-hover {
     position: absolute;
-    top: 5%;
-    left: 5%;
-    width: 90%;
-    height: 90%;
-    color: #ddd;
-    background-color: rgba(84, 8, 8, 0.786);
+    top: 10%;
+    left: 10%;
+    width: 100px;
+    height: 100px;
+    color: #fff;
+    background-color: #000;
 
-    pointer-events: auto;
-    overflow-y: scroll;
+    z-index: 999999999999999999;
+  }
+  .uw-hover:hover {
+    background-color: #f00;
+  }
 
-    p, h1, h2, h3 {
-      margin: 0.75em;
-      display: block;
-      // display: inline-block;
-    }
+  .popup-panel {
+    position: absolute;
 
-    h1 {
-      color: #fff;
-      text-align: center;
-    }
+    top: 10%;
+    left: 10%;
     
-    h2, h3 {
-      color: #fa6;
-      text-align: center;
-    }
+    z-index: 999999999999999999;
 
-    i {
-      display: block !important;
-      padding: 4px 8px;
-      font-family: 'Overpass Mono', monospace;
-      background-color: rgba(11,11,11,0.75);
-      font-size: 0.8em;
-    }
+    width: 2500px;
+    height: 1200px;
+    max-width: 80%;
+    max-height: 80%;
 
-    b {
-      color: #fff;
-    }
+    pointer-events: all !important;
 
-    a {
-      cursor: pointer;
-    }
+    background-color: rgba(0,0,0,0.69);
+    color: #fff;
 
-    p {
-      font-size: 16px;
-    }
-    h1 {
-      font-size: 36px;
-    }
-
-    sup {
-      vertical-align: super;
-      font-size: smaller;
-    }
-
-    .text {
-      flex-grow: 1;
-      flex-shrink: 0;
-      max-width: 960px;
-      min-width: 420px;
-    }
-
-    .image-examples {
-      flex-grow: auto;
-      flex-shrink: 1;
-      min-width: 720px;
-
-      img {
-        width: 100%;
-      }
-    }
-
-    ul { 
-      list-style-type: disc; 
-      list-style-position: inside; 
-    }
-    ol { 
-      list-style-type: decimal; 
-      list-style-position: inside; 
-    }
-    ul ul, ol ul { 
-      list-style-type: circle; 
-      list-style-position: inside; 
-      margin-left: 15px; 
-    }
-    ol ol, ul ol { 
-      list-style-type: lower-latin; 
-      list-style-position: inside; 
-      margin-left: 15px; 
-    }
-    li {
-      margin-top: 16px;
-      line-height: 16px;
-    }
-  }
-
-  .pad {
-    padding: 16px;
-    height: 100%;
-    width: 100%;
-    // padding-bottom: 10%;
     overflow-y: auto;
+
+    .tab {
+      display: block;
+      height: 42px;
+      font-size: 2.5rem;
+      background: rgb(87, 54, 26);
+    }
+    .tab:hover {
+      background-color: #f00;
+    }
   }
-  .flex-row {
-    justify-content: space-around;
+
+  pre {
+    white-space: pre-wrap;
   }
+
+
 }
 
 

From 357d4829eb6c112f3ce067daf6b5761173227abf Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 6 Mar 2021 01:21:31 +0100
Subject: [PATCH 55/68] Fix logger

---
 src/ext/lib/Logger.ts | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/ext/lib/Logger.ts b/src/ext/lib/Logger.ts
index df97bea..d47aaa9 100644
--- a/src/ext/lib/Logger.ts
+++ b/src/ext/lib/Logger.ts
@@ -1,6 +1,7 @@
 import { decycle } from 'json-cyclic';
 import Comms from './comms/Comms';
 import BrowserDetect from '../conf/BrowserDetect';
+import { browser } from 'webextension-polyfill-ts';
 
 if (process.env.CHANNEL !== 'stable'){
   console.info('Loading Logger');
@@ -29,11 +30,11 @@ class Logger {
       console.info('Saving logger conf:', conf)
     }
 
-    (BrowserDetect.browserObj as any).storage.local.set( {'uwLogger': JSON.stringify(conf)});
+    browser.storage.local.set( {'uwLogger': JSON.stringify(conf)});
   }
 
   static syncConfig(callback) {
-    (BrowserDetect.browserObj as any).storage.onChanged.addListener( (changes, area) => {
+    browser.storage.onChanged.addListener( (changes, area) => {
       if (changes.uwLogger) {
         const newLoggerConf = JSON.parse(changes.uwLogger.newValue)
         if (process.env.CHANNEL === 'dev') {
@@ -47,13 +48,13 @@ class Logger {
   static async getConfig() {
     let ret;
 
-    if (BrowserDetect.firefox) {
-      ret = await (BrowserDetect.browserObj as any).storage.local.get('uwLogger');
-    } else if (BrowserDetect.anyChromium) {
-      ret = await new Promise( (resolve, reject) => {
-        (BrowserDetect.browserObj as any).storage.local.get('uwLogger', (res) => resolve(res));
-      });
-    }
+    // if (BrowserDetect.firefox) {
+      ret = await browser.storage.local.get('uwLogger');
+    // } else if (BrowserDetect.anyChromium) {
+    //   ret = await new Promise( (resolve, reject) => {
+    //     browser.storage.local.get('uwLogger', (res) => resolve(res));
+    //   });
+    // }
 
     if (process.env.CHANNEL === 'dev') {
       try {
@@ -98,7 +99,7 @@ class Logger {
     this.temp_disable = false;
     this.stopTime = this.conf.timeout ? performance.now() + (this.conf.timeout * 1000) : undefined;
 
-    (BrowserDetect.browserObj as any).storage.onChanged.addListener( (changes, area) => {
+    browser.storage.onChanged.addListener( (changes, area) => {
       if (process.env.CHANNEL === 'dev') {
         if (!changes.uwLogger) {
           // console.info('[Logger::<storage/on change> No new logger settings!');

From 08fceafc17892b21285c671abf888c4626e148bb Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 6 Mar 2021 01:22:09 +0100
Subject: [PATCH 56/68] Use browser-polyfill in settings

---
 src/ext/lib/Settings.ts | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/ext/lib/Settings.ts b/src/ext/lib/Settings.ts
index 17710ee..a4a1fe0 100644
--- a/src/ext/lib/Settings.ts
+++ b/src/ext/lib/Settings.ts
@@ -10,6 +10,7 @@ import CropModePersistence from '../../common/enums/CropModePersistence.enum';
 import BrowserDetect from '../conf/BrowserDetect';
 import Logger from './Logger';
 import SettingsInterface from '../../common/interfaces/SettingsInterface';
+import { browser } from 'webextension-polyfill-ts';
 
 if(process.env.CHANNEL !== 'stable'){
   console.info("Loading Settings");
@@ -45,7 +46,7 @@ class Settings {
     this.default = ExtensionConf;
     this.default['version'] = this.getExtensionVersion();
 
-    (BrowserDetect.browserObj as any).storage.onChanged.addListener((changes, area) => {this.storageChangeListener(changes, area)});
+    browser.storage.onChanged.addListener((changes, area) => {this.storageChangeListener(changes, area)});
   }
 
   storageChangeListener(changes, area) {
@@ -76,7 +77,7 @@ class Settings {
   }
 
   static getExtensionVersion(): string {
-    return (BrowserDetect.browserObj as any).runtime.getManifest().version;
+    return browser.runtime.getManifest().version;
   }
   getExtensionVersion(): string {
     return Settings.getExtensionVersion(); 
@@ -282,13 +283,7 @@ class Settings {
   async get() {
     let ret;
     
-    if (currentBrowser.firefox) {
-      ret = await (BrowserDetect.browserObj as any).storage.local.get('uwSettings');
-    } else if (currentBrowser.anyChromium) {
-      ret = await new Promise( (resolve, reject) => {
-        (BrowserDetect.browserObj as any).storage.local.get('uwSettings', (res) => resolve(res));
-      });
-    }
+    ret = await browser.storage.local.get('uwSettings');
 
     this.logger?.log('info', 'settings', 'Got settings:', ret && ret.uwSettings && JSON.parse(ret.uwSettings));
 
@@ -331,7 +326,7 @@ class Settings {
 
     this.logger?.log('info', 'settings', "[Settings::set] setting new settings:", extensionConf)
 
-    return (BrowserDetect.browserObj as any).storage.local.set( {'uwSettings': JSON.stringify(extensionConf)});
+    return browser.storage.local.set( {'uwSettings': JSON.stringify(extensionConf)});
   }
 
   async setActive(activeSettings) {

From 006c9ef975ed57aea8eb37c17e9c22be48f8bc02 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 6 Mar 2021 01:23:58 +0100
Subject: [PATCH 57/68] Move comms to ts (1/3)

---
 src/ext/lib/comms/Comms.js | 31 -------------------------------
 src/ext/lib/comms/Comms.ts | 19 +++++++++++++++++++
 2 files changed, 19 insertions(+), 31 deletions(-)
 delete mode 100644 src/ext/lib/comms/Comms.js
 create mode 100644 src/ext/lib/comms/Comms.ts

diff --git a/src/ext/lib/comms/Comms.js b/src/ext/lib/comms/Comms.js
deleted file mode 100644
index 1c5428b..0000000
--- a/src/ext/lib/comms/Comms.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import Debug from '../../conf/Debug';
-import BrowserDetect from '../../conf/BrowserDetect';
-
-if (process.env.CHANNEL !== 'stable'){
-  console.info("Loading Comms");
-}
-
-class Comms {
-  static async sendMessage(message){
-
-    if(BrowserDetect.firefox){
-      return browser.runtime.sendMessage(message);
-    } else {
-      return new Promise((resolve, reject) => {
-        chrome.runtime.sendMessage(message, function(response){
-          // Chrome/js shittiness mitigation — remove this line and an empty array will be returned
-          var r = response; 
-          resolve(r);
-          return true;
-        });
-      });
-    }
-  }
-
-}
-
-if (process.env.CHANNEL !== 'stable'){
-  console.info("Comms loaded");
-}
-
-export default Comms;
diff --git a/src/ext/lib/comms/Comms.ts b/src/ext/lib/comms/Comms.ts
new file mode 100644
index 0000000..a174d3c
--- /dev/null
+++ b/src/ext/lib/comms/Comms.ts
@@ -0,0 +1,19 @@
+import Debug from '../../conf/Debug';
+import BrowserDetect from '../../conf/BrowserDetect';
+import { browser } from 'webextension-polyfill-ts';
+
+if (process.env.CHANNEL !== 'stable'){
+  console.info("Loading Comms");
+}
+
+class Comms {
+  static async sendMessage(message){
+    browser.runtime.sendMessage(message);
+  }
+}
+
+if (process.env.CHANNEL !== 'stable'){
+  console.info("Comms loaded");
+}
+
+export default Comms;

From c1e0e7b2806489577ec7821cbeee4048963f270d Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 6 Mar 2021 01:27:28 +0100
Subject: [PATCH 58/68] Move comms to ts (2/3 | server)

---
 .../comms/{CommsServer.js => CommsServer.ts}  | 114 +++++++++---------
 1 file changed, 59 insertions(+), 55 deletions(-)
 rename src/ext/lib/comms/{CommsServer.js => CommsServer.ts} (78%)

diff --git a/src/ext/lib/comms/CommsServer.js b/src/ext/lib/comms/CommsServer.ts
similarity index 78%
rename from src/ext/lib/comms/CommsServer.js
rename to src/ext/lib/comms/CommsServer.ts
index b3a6d16..cbda452 100644
--- a/src/ext/lib/comms/CommsServer.js
+++ b/src/ext/lib/comms/CommsServer.ts
@@ -1,21 +1,33 @@
 import Debug from '../../conf/Debug';
 import BrowserDetect from '../../conf/BrowserDetect';
+import Logger from '../Logger';
+import Settings from '../Settings';
+import { browser } from 'webextension-polyfill-ts';
+import ExtensionMode from '../../../common/enums/ExtensionMode.enum';
+
 
 class CommsServer {
+  server: any;
+  logger: Logger;
+  settings: Settings;
+
+
+  // we could have a bit more defined type here, but then
+  // typescript be like {[x: string]; any} dOeSnT hAvE sYmBoL.ItErAToR
+  // and I'm too lazy to handle this properly
+  ports: any = [];
+  popupPort: any;
+
+  commands: {[x: string]: ((a: any, b: any) => void | Promise<void>)[]}
+
   constructor(server) {
     this.server = server;
     this.logger = server.logger;
     this.settings = server.settings;
-    this.ports = [];
     this.popupPort = null;
 
-    if (BrowserDetect.firefox) {
-      browser.runtime.onConnect.addListener(p => this.onConnect(p));
-      browser.runtime.onMessage.addListener((m, sender) => this.processReceivedMessage_nonpersistent(m, sender));
-    } else {
-      chrome.runtime.onConnect.addListener(p => this.onConnect(p));
-      chrome.runtime.onMessage.addListener((m, sender, callback) => this.processReceivedMessage_nonpersistent(m, sender, callback));
-    }
+    browser.runtime.onConnect.addListener(p => this.onConnect(p));
+    browser.runtime.onMessage.addListener((m, sender) => this.processReceivedMessage_nonpersistent(m, sender));
 
     // commands — functions that handle incoming messages
     // functions can have the following arguments, which are, 
@@ -51,14 +63,6 @@ class CommsServer {
       'popup-set-selected-tab': [
         (message) => this.server.setSelectedTab(message.selectedMenu, message.selectedSubitem),
       ],
-      'get-config': [
-        (message, port) => {
-          this.logger.log('info', 'comms', "CommsServer: received get-config. Active settings?", this.settings.active, "\n(settings:", this.settings, ")");
-          port.postMessage(
-            {cmd: "set-config", conf: this.settings.active, site: this.server.currentSite}
-          );
-        },
-      ],
       'has-video': [
         (message, port) => this.server.registerVideo(port.sender),
       ],
@@ -74,28 +78,31 @@ class CommsServer {
       'replace-css': [
         (message, sender) => this.server.replaceCss(message.oldCssString, message.newCssString, sender),
       ],
+      // 'get-config': [
+      //   (message, port) => {
+      //     this.logger.log('info', 'comms', "CommsServer: received get-config. Active settings?", this.settings.active, "\n(settings:", this.settings, ")");
+      //     port.postMessage(
+      //       {cmd: "set-config", conf: this.settings.active, site: this.server.currentSite}
+      //     );
+      //   },
+      // ],
       'get-config': [
-        (message, sender, sendResponse) => {
-          if (BrowserDetect.firefox) {
-            var ret = {extensionConf: JSON.stringify(this.settings.active)};
-            this.logger.log('info', 'comms', "%c[CommsServer.js::processMessage_nonpersistent] Returning this:", "background-color: #11D; color: #aad", ret);
-            Promise.resolve(ret);
-          } else {
-            sendResponse({extensionConf: JSON.stringify(this.settings.active)});
-            return true;
-          }
+        (message, sender) => {
+          var ret = {extensionConf: JSON.stringify(this.settings.active)};
+          this.logger.log('info', 'comms', "%c[CommsServer.js::processMessage_nonpersistent] Returning this:", "background-color: #11D; color: #aad", ret);
+          Promise.resolve(ret);
         }
       ],
       'autoar-enable': [
         () => {
-          this.settings.active.sites['@global'].autoar = "blacklist";
+          this.settings.active.sites['@global'].autoar = ExtensionMode.Enabled;
           this.settings.save();
           this.logger.log('info', 'comms', "[uw-bg] autoar set to enabled (blacklist). evidenz:", this.settings.active);
         }
       ],
       'autoar-disable': [
         (message) => {
-          this.settings.active.sites['@global'].autoar = "disabled";
+          this.settings.active.sites['@global'].autoar = ExtensionMode.Disabled;
           if (message.reason){
             this.settings.active.arDetect.disabledReason = message.reason;
           } else {
@@ -111,7 +118,7 @@ class CommsServer {
       
           // set fairly liberal limit
           var timeout = message.timeout < 4 ? 4 : message.timeout;
-          this.settings.active.arDetect.timer_playing = timeout;
+          this.settings.active.arDetect.timers.playing = timeout;
           this.settings.save();
         }
       ],
@@ -140,7 +147,7 @@ class CommsServer {
   }
 
   async getCurrentTabHostname() {
-    const activeTab = await this._getActiveTab();
+    const activeTab = await this.activeTab;
 
     if (!activeTab || activeTab.length < 1) {
       this.logger.log('warn', 'comms', 'There is no active tab for some reason. activeTab:', activeTab);
@@ -173,34 +180,28 @@ class CommsServer {
     }
   }
 
-  async _getActiveTab() {
-    if (BrowserDetect.firefox) {
-      return await browser.tabs.query({currentWindow: true, active: true});
-    } else {
-      return await new Promise( (resolve, reject) => {
-        chrome.tabs.query({lastFocusedWindow: true, active: true}, function (res) {
-          resolve(res);
-          return true;
-        });
-      });
-    }
+  get activeTab() {
+    return browser.tabs.query({currentWindow: true, active: true});
   }
 
-  // if port is NOT defined, send to all content scripts of a given frame
-  // if port is defined, send just to that particular script of a given frame
-  async sendToFrameContentScripts(message, tab, frame, port) {
+  /**
+   * Sends a message to addon content scripts.
+   * @param message message
+   * @param tab the tab we want to send the message to
+   * @param frame the frame within that tab that we want to send the message to
+   * @param port if defined, message will only be sent to that specific script, otherwise it gets sent to all scripts of a given frame
+   */
+  async sendToFrameContentScripts(message, tab, frame, port?) {
     if (port !== undefined) {
-      // note: 'port' is _not_ shadowed here.
       this.ports[tab][frame][port].postMessage(message);
       return;
     }
-    for (const port in this.ports[tab][frame]) {
-      // note: 'port' is shadowed here!
-      this.ports[tab][frame][port].postMessage(message);
+    for (const framePort in this.ports[tab][frame]) {
+      this.ports[tab][frame][framePort].postMessage(message);
     }
   }
 
-  async sendToFrame(message, tab, frame, port) {
+  async sendToFrame(message, tab, frame, port?) {
     this.logger.log('info', 'comms', `%c[CommsServer::sendToFrame] attempting to send message to tab ${tab}, frame ${frame}`, "background: #dda; color: #11D", message);
 
     if (isNaN(tab)) {
@@ -233,7 +234,7 @@ class CommsServer {
   async sendToActive(message) {
     this.logger.log('info', 'comms', "%c[CommsServer::sendToActive] trying to send a message to active tab. Message:", "background: #dda; color: #11D", message);
 
-    const tabs = await this._getActiveTab();
+    const tabs = await this.activeTab;
 
     this.logger.log('info', 'comms', "[CommsServer::_sendToActive] currently active tab(s)?", tabs);
     for (const frame in this.ports[tabs[0].id]) {
@@ -280,7 +281,10 @@ class CommsServer {
   }
 
 
-  async execCmd(message, portOrSender, sendResponse) {
+  // TODO: sendResponse seems redundant — it used to be a callback for
+  // chrome-based browsers, but browser polyfill doesn't do callback. Just
+  // awaits.
+  async execCmd(message, portOrSender, sendResponse?) {
     this.logger.log(
       'info', 'comms', '[CommsServer.js::execCmd] Received message', message,
       ". Port/sender:", portOrSender, "sendResponse:", sendResponse, "\nThere is ", this.commands[message.cmd]?.length ?? 0,
@@ -289,7 +293,7 @@ class CommsServer {
     if (this.commands[message.cmd]) {
       for (const c of this.commands[message.cmd]) {
         try {
-          await c(message, portOrSender, sendResponse);
+          await c(message, portOrSender);
         } catch (e) {
           this.logger.log('error', 'debug', "[CommsServer.js::execCmd] failed to execute command.", e)
         }
@@ -297,8 +301,8 @@ class CommsServer {
     }
   }
 
-  async handleMessage(message, portOrSender, sendResponse) {
-    await this.execCmd(message, portOrSender, sendResponse);
+  async handleMessage(message, portOrSender) {
+    await this.execCmd(message, portOrSender);
     
     if (message.forwardToSameFramePort) {
       this.sendToFrameContentScripts(message, portOrSender.tab.id, portOrSender.frameId, message.port)
@@ -323,10 +327,10 @@ class CommsServer {
     this.handleMessage(message, port)
   }
 
-  processReceivedMessage_nonpersistent(message, sender, sendResponse){
+  processReceivedMessage_nonpersistent(message, sender){
     this.logger.log('info', 'comms', "%c[CommsServer.js::processMessage_nonpersistent] Received message from background script!", "background-color: #11D; color: #aad", message, sender);
     
-    this.handleMessage(message, sender, sendResponse);
+    this.handleMessage(message, sender);
   }
 
   // chrome shitiness mitigation

From 57ad81a7a43a70b6054431f6c6ebbdcca18bba82 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 6 Mar 2021 02:06:46 +0100
Subject: [PATCH 59/68] Move comms to ts (3/3 | client)

---
 .../comms/{CommsClient.js => CommsClient.ts}  | 60 +++++++++----------
 1 file changed, 27 insertions(+), 33 deletions(-)
 rename src/ext/lib/comms/{CommsClient.js => CommsClient.ts} (74%)

diff --git a/src/ext/lib/comms/CommsClient.js b/src/ext/lib/comms/CommsClient.ts
similarity index 74%
rename from src/ext/lib/comms/CommsClient.js
rename to src/ext/lib/comms/CommsClient.ts
index e6e0c30..61e36a2 100644
--- a/src/ext/lib/comms/CommsClient.js
+++ b/src/ext/lib/comms/CommsClient.ts
@@ -1,19 +1,33 @@
 import Debug from '../../conf/Debug';
 import BrowserDetect from '../../conf/BrowserDetect';
+import Logger from '../Logger';
+import { browser } from 'webextension-polyfill-ts';
+import Settings from '../Settings';
 
 if (process.env.CHANNEL !== 'stable'){
   console.info("Loading CommsClient");
 }
 
 class CommsClient {
+  commsId: string;
+
+  logger: Logger;
+  settings: any;   // sus?
+
+
+  commands: {[x: string]: any[]};
+
+
+
+  _listener: (m: any) => void;
+  port: any;
+
+
   constructor(name, logger, commands) {
+    try {
     this.logger = logger;
 
-    if (BrowserDetect.firefox) {
-      this.port = browser.runtime.connect({name: name});
-    } else if (BrowserDetect.anyChromium) {
-      this.port = chrome.runtime.connect({name: name});
-    }
+    this.port = browser.runtime.connect(null, {name: name});
 
     this.logger.onLogEnd(
       (history) => {
@@ -32,6 +46,9 @@ class CommsClient {
     this.commsId = (Math.random() * 20).toFixed(0);
 
     this.commands = commands;
+    } catch (e) {
+      console.error("CONSTRUCOTR FAILED:", e)
+    }
   }
   
   destroy() {
@@ -60,34 +77,11 @@ class CommsClient {
 
   async sendMessage_nonpersistent(message){
     message = JSON.parse(JSON.stringify(message)); // vue quirk. We should really use vue store instead
-    
-    if(BrowserDetect.firefox){
-      return browser.runtime.sendMessage(message)
-    } else {
-      return new Promise((resolve, reject) => {
-        try{
-          if(BrowserDetect.edge){
-            browser.runtime.sendMessage(message, function(response){
-              var r = response; 
-              resolve(r);
-            });
-          } else {
-            chrome.runtime.sendMessage(message, function(response){
-              // Chrome/js shittiness mitigation — remove this line and an empty array will be returned
-              var r = response; 
-              resolve(r);
-              return true;
-            });
-          }
-        }
-        catch(e){
-          reject(e);
-        }
-        return true;
-      });
-    }
+    return browser.runtime.sendMessage(null, message, null);
   }
 
+
+  // TODO: sus function — does it get any use?
   async requestSettings(){
     this.logger.log('info', 'comms', "%c[CommsClient::requestSettings] sending request for congif!", "background: #11D; color: #aad");
    
@@ -99,12 +93,12 @@ class CommsClient {
       return Promise.resolve(false);
     }
 
-    this.settings.active = JSON.parse(response.extensionConf);
+    this.settings = {active: JSON.parse(response.extensionConf)};
     return Promise.resolve(true);
   }
 
   async sendMessage(message) {
-    await this.sendMessage_nonpersistent(message);
+    return this.sendMessage_nonpersistent(message);
   }
 
   registerVideo(){

From 87310f95cc20b350e5a213ede621a48141eea846 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 6 Mar 2021 02:07:09 +0100
Subject: [PATCH 60/68] remove some logs

---
 src/ext/lib/video-data/VideoData.ts | 1 -
 src/ext/uw-bg.js                    | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/ext/lib/video-data/VideoData.ts b/src/ext/lib/video-data/VideoData.ts
index d4fa060..4de39ca 100644
--- a/src/ext/lib/video-data/VideoData.ts
+++ b/src/ext/lib/video-data/VideoData.ts
@@ -309,7 +309,6 @@ class VideoData {
     if (this.pageInfo.defaultCrop) {
       this.resizer.setAr(this.pageInfo.defaultCrop);
     } else {
-    console.log("RESETTING!")
     this.resizer.reset();
 
       try {
diff --git a/src/ext/uw-bg.js b/src/ext/uw-bg.js
index df74b25..1f5f0de 100644
--- a/src/ext/uw-bg.js
+++ b/src/ext/uw-bg.js
@@ -291,7 +291,6 @@ class UWServer {
       // if video is older than PageInfo's video rescan period (+ 4000ms of grace),
       // we clean it up from videoTabs[tabId].frames array.
       const ageLimit = Date.now() - this.settings.active.pageInfo.timeouts.rescan - 4000;
-      console.log("videoTabs[tabId]:", this.videoTabs[ctab.id])
       try {
         for (const key in this.videoTabs[ctab.id].frames) {
           if (this.videoTabs[ctab.id].frames[key].registerTime < ageLimit) {

From 3eca178df5b08ad6d6b23fa31e5a144ab9f9ba08 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 6 Mar 2021 02:22:56 +0100
Subject: [PATCH 61/68] Add type to ports

---
 src/ext/lib/comms/CommsServer.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/ext/lib/comms/CommsServer.ts b/src/ext/lib/comms/CommsServer.ts
index cbda452..9d5344a 100644
--- a/src/ext/lib/comms/CommsServer.ts
+++ b/src/ext/lib/comms/CommsServer.ts
@@ -12,10 +12,11 @@ class CommsServer {
   settings: Settings;
 
 
-  // we could have a bit more defined type here, but then
-  // typescript be like {[x: string]; any} dOeSnT hAvE sYmBoL.ItErAToR
-  // and I'm too lazy to handle this properly
-  ports: any = [];
+  ports: {
+    [frame: string] : {
+      [port: string]: any
+    }
+  }[] = [];
   popupPort: any;
 
   commands: {[x: string]: ((a: any, b: any) => void | Promise<void>)[]}

From 7714adb843f50c200af2350605f0674231a2995c Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 6 Mar 2021 02:53:58 +0100
Subject: [PATCH 62/68] Fix keyboard shortcuts

---
 src/ext/lib/ActionHandler.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ext/lib/ActionHandler.ts b/src/ext/lib/ActionHandler.ts
index 24a94af..dbc87f7 100644
--- a/src/ext/lib/ActionHandler.ts
+++ b/src/ext/lib/ActionHandler.ts
@@ -17,7 +17,7 @@ class ActionHandler {
 
 
   inputs: string[] = ['input', 'select', 'button', 'textarea'];
-  keyboardLocalDisabled: boolean = true;
+  keyboardLocalDisabled: boolean = false;
 
   keyUpActions: any[] = [];
   keyDownActions: any[] = [];

From db287adaedf2a6c22a4ab01918412604c054a211 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 6 Mar 2021 02:54:22 +0100
Subject: [PATCH 63/68] Remove vestigial code

---
 src/ext/lib/ActionHandler.ts | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/ext/lib/ActionHandler.ts b/src/ext/lib/ActionHandler.ts
index dbc87f7..e2a0e08 100644
--- a/src/ext/lib/ActionHandler.ts
+++ b/src/ext/lib/ActionHandler.ts
@@ -185,7 +185,6 @@ class ActionHandler {
       this.logger.resume(); // undisable
 
       this.logger.log('info', 'keyboard', "[ActionHandler::preventAction] Testing whether we're in a textbox or something. Detailed rundown of conditions:\n" +
-      "is full screen? (yes->allow):", PlayerData.isFullScreen(),
       "\nis tag one of defined inputs? (yes->prevent):", this.inputs.indexOf(activeElement.tagName.toLocaleLowerCase()) !== -1,
       "\nis role = textbox? (yes -> prevent):", activeElement.getAttribute("role") === "textbox",
       "\nis type === 'text'? (yes -> prevent):", activeElement.getAttribute("type") === "text",
@@ -203,12 +202,6 @@ class ActionHandler {
       );
     }
 
-    // lately youtube has allowed you to read and write comments while watching video in
-    // fullscreen mode. We can no longer do this.
-    // if (PlayerData.isFullScreen()) {
-    //   return false;
-    // }
-
     if (this.keyboardLocalDisabled) {
       return true;
     }

From b83be3de7df0a749938559ba8491119b50dbf23e Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 6 Mar 2021 03:34:22 +0100
Subject: [PATCH 64/68] More types for logger

---
 src/ext/lib/Logger.ts | 76 ++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 72 insertions(+), 4 deletions(-)

diff --git a/src/ext/lib/Logger.ts b/src/ext/lib/Logger.ts
index d47aaa9..9c920c6 100644
--- a/src/ext/lib/Logger.ts
+++ b/src/ext/lib/Logger.ts
@@ -7,6 +7,74 @@ if (process.env.CHANNEL !== 'stable'){
   console.info('Loading Logger');
 }
 
+
+export const baseLoggingOptions: LoggerConfig = {
+  isContentScript: true,
+  allowLogging: true,
+  useConfFromStorage: true,
+  fileOptions: {
+    enabled: false
+  },
+  consoleOptions: {
+    "enabled": true,
+    "debug": true,
+    "init": true,
+    "settings": true,
+    "keyboard": true,
+    "mousemove": false,
+    "actionHandler": true,
+    "comms": true,
+    "playerDetect": true,
+    "resizer": true,
+    "scaler": true,
+    "stretcher": true,
+    // "videoRescan": true,
+    // "playerRescan": true,
+    "arDetect": true,
+    "arDetect_verbose": true
+  },
+  allowBlacklistedOrigins: {
+    'periodicPlayerCheck': false,
+    'periodicVideoStyleChangeCheck': false,
+    'handleMouseMove': false
+  }
+};
+
+export interface LoggingOptions {
+  enabled?: boolean;
+  debug?: boolean;
+  init?: boolean;
+  settings?: boolean;
+  keyboard?: boolean;
+  mousemove?: boolean;
+  actionHandler?: boolean;
+  comms?: boolean;
+  playerDetect?: boolean;
+  resizer?: boolean;
+  scaler?: boolean;
+  stretcher?: boolean;
+  videoRescan?: boolean;
+  playerRescan?: boolean;
+  arDetect?: boolean;
+  arDetect_verbose?: boolean;
+}
+
+export interface LoggerBlacklistedOrigins {
+  periodicPlayerCheck?: boolean;
+  periodicVideoStyleChangeCheck?: boolean;
+  handleMouseMove?: boolean;
+}
+
+export interface LoggerConfig {
+  isContentScript?: boolean;
+  isBackgroundScript?: boolean;
+  allowLogging?: boolean;
+  useConfFromStorage?: boolean;
+  fileOptions?: LoggingOptions;
+  consoleOptions?: LoggingOptions;
+  allowBlacklistedOrigins?: LoggerBlacklistedOrigins;
+}
+
 class Logger {
   temp_disable: boolean = false;
   onLogEndCallbacks: any[] = [];
@@ -20,12 +88,12 @@ class Logger {
   startTime: number;
   stopTime: number;
 
-  constructor(options) {
+  constructor(options?: {vuexStore?: any, uwInstance?: any}) {
     this.vuexStore = options?.vuexStore;
     this.uwInstance = options?.uwInstance;
   }
 
-  static saveConfig(conf) {
+  static saveConfig(conf: LoggerConfig) {
     if (process.env.CHANNEL === 'dev') {
       console.info('Saving logger conf:', conf)
     }
@@ -33,7 +101,7 @@ class Logger {
     browser.storage.local.set( {'uwLogger': JSON.stringify(conf)});
   }
 
-  static syncConfig(callback) {
+  static syncConfig(callback: (x) => void) {
     browser.storage.onChanged.addListener( (changes, area) => {
       if (changes.uwLogger) {
         const newLoggerConf = JSON.parse(changes.uwLogger.newValue)
@@ -71,7 +139,7 @@ class Logger {
     }
   }
 
-  async init(conf) {
+  async init(conf: LoggerConfig) {
     // this is the only property that always gets passed via conf
     // and doesn't get ignored even if the rest of the conf gets
     // loaded from browser storage

From a69916636823ecf4102a5529b2f865e6b6e7f227 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 6 Mar 2021 03:34:38 +0100
Subject: [PATCH 65/68] Some arguments need to be optional

---
 src/ext/lib/Settings.ts            | 2 +-
 src/ext/lib/video-data/PageInfo.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ext/lib/Settings.ts b/src/ext/lib/Settings.ts
index a4a1fe0..5ae064f 100644
--- a/src/ext/lib/Settings.ts
+++ b/src/ext/lib/Settings.ts
@@ -390,7 +390,7 @@ class Settings {
     return this.active.actions;
   }
 
-  getExtensionMode(site) {
+  getExtensionMode(site?: string) {
     if (!site) {
       site = window.location.hostname;
 
diff --git a/src/ext/lib/video-data/PageInfo.ts b/src/ext/lib/video-data/PageInfo.ts
index c8c3940..76bd02a 100644
--- a/src/ext/lib/video-data/PageInfo.ts
+++ b/src/ext/lib/video-data/PageInfo.ts
@@ -505,7 +505,7 @@ class PageInfo {
     }
   }
 
-  restoreAr(playingOnly) {
+  restoreAr(playingOnly?: boolean) {
     if (playingOnly) {
       for(let vd of this.videos){
         if (vd.isPlaying()) {

From d215a10486fb227d23689806acf3e983c28d8c79 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 6 Mar 2021 03:35:23 +0100
Subject: [PATCH 66/68] move most of the main content/background script to ts

---
 src/ext/UWContent.ts | 134 ++++++++++++++++++
 src/ext/UWServer.ts  | 307 ++++++++++++++++++++++++++++++++++++++++
 src/ext/uw-bg.js     | 329 +------------------------------------------
 src/ext/uw.js        | 173 +----------------------
 4 files changed, 454 insertions(+), 489 deletions(-)
 create mode 100644 src/ext/UWContent.ts
 create mode 100644 src/ext/UWServer.ts

diff --git a/src/ext/UWContent.ts b/src/ext/UWContent.ts
new file mode 100644
index 0000000..45d91e1
--- /dev/null
+++ b/src/ext/UWContent.ts
@@ -0,0 +1,134 @@
+import Debug from './conf/Debug';
+import ExtensionMode from '../common/enums/ExtensionMode.enum';
+import Settings from './lib/Settings';
+import ActionHandler from './lib/ActionHandler';
+import Comms from './lib/comms/Comms';
+import CommsClient from './lib/comms/CommsClient';
+import PageInfo from './lib/video-data/PageInfo';
+import Logger, { baseLoggingOptions } from './lib/Logger';
+
+export default class UWContent {
+  pageInfo: PageInfo;
+  comms: CommsClient;
+  settings: Settings;
+  actionHandler: ActionHandler;
+  logger: Logger;
+
+  commsHandlers: {
+    [x: string]: ((a: any, b?: any) => void | Promise<void>)[]
+  } = {
+    'get-current-zoom': [() => this.pageInfo.requestCurrentZoom()],
+    'set-ar': [(message) => this.pageInfo.setAr({type: message.arg, ratio: message.customArg}, message.playing)],
+    'set-alignment': [(message) => {
+      this.pageInfo.setVideoAlignment(message.arg, message.playing);
+      this.pageInfo.restoreAr();
+    }],
+    'set-stretch': [(message) => this.pageInfo.setStretchMode(message.arg, message.playing, message.customArg)],
+    'set-keyboard': [(message) => this.pageInfo.setKeyboardShortcutsEnabled(message.arg)],
+    'autoar-start': [(message) => {
+      if (message.enabled !== false) {
+        this.pageInfo.initArDetection(message.playing);
+        this.pageInfo.startArDetection(message.playing);
+      } else {
+        this.pageInfo.stopArDetection(message.playing);
+      }
+    }],
+    'pause-processing': [(message) => this.pageInfo.pauseProcessing(message.playing)],
+    'resume-processing': [(message) => this.pageInfo.resumeProcessing(message.autoArStatus, message.playing)],
+    'set-zoom': [(message) => this.pageInfo.setZoom(message.arg, true, message.playing)],
+    'change-zoom': [(message) => this.pageInfo.zoomStep(message.arg, message.playing)],
+    'mark-player': [(message) => this.pageInfo.markPlayer(message.name, message.color)],
+    'unmark-player': [() => this.pageInfo.unmarkPlayer()],
+    'autoar-set-manual-tick': [(message) => this.pageInfo.setManualTick(message.arg)],
+    'autoar-tick': [() => this.pageInfo.tick()],
+    'set-ar-persistence': [(message) => this.pageInfo.setArPersistence(message.arg)], 
+  }
+
+  constructor(){
+  }
+
+  reloadSettings() {
+    this.logger.log('info', 'debug', 'Things happened in the popup. Will reload extension settings.');
+    this.init();
+  }
+
+  async init(){
+    if (Debug.debug) {
+      console.log("[uw::main] loading configuration ...");
+    }
+  
+    // logger init is the first thing that needs to run
+    try {
+      if (!this.logger) {
+        
+        this.logger = new Logger();
+        await this.logger.init(baseLoggingOptions);
+
+        // show popup if logging to file is enabled
+        if (this.logger.isLoggingAllowed() && this.logger.isLoggingToFile()) {
+          console.info("[uw::init] Logging is allowed! Initalizing vue and UI!");
+
+          // CommsClient is not initiated yet, so we use static comms to send the command
+          Comms.sendMessage({cmd: 'show-logger'});
+        }
+      }
+    } catch (e) {
+      console.error("logger init failed!", e)
+    }
+
+    // init() is re-run any time settings change
+    if (this.comms) {
+      this.comms.destroy();
+    }
+    if (!this.settings) {
+      this.settings = new Settings({
+        onSettingsChanged: () => this.reloadSettings(),
+        logger: this.logger
+      });
+      await this.settings.init();
+    }
+  
+    this.comms = new CommsClient('content-main-port', this.logger, this.commsHandlers);
+
+    // če smo razširitev onemogočili v nastavitvah, ne naredimo ničesar
+    // If extension is soft-disabled, don't do shit
+
+    var extensionMode = this.settings.getExtensionMode();
+
+    this.logger.log('info', 'debug', "[uw::init] Extension mode:" + (extensionMode < 0 ? "disabled" : extensionMode == '1' ? 'basic' : 'full'));
+
+    const isSiteDisabled = extensionMode === ExtensionMode.Disabled
+
+    if (isSiteDisabled) {
+      if (this.settings.getExtensionMode('@global') === ExtensionMode.Disabled) {
+        this.logger.log('info', 'debug', "[uw::init] EXTENSION DISABLED, THEREFORE WONT BE STARTED")
+        return;
+      }
+    }
+  
+    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.");
+  
+      this.logger.log('info', 'debug', "[uw.js::setup] will try to initate ActionHandler.");
+
+      // 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();
+        
+        this.logger.log('info', 'debug', "[uw.js::setup] ActionHandler initiated.");
+      }
+
+    } catch (e) {
+      this.logger.log('error', 'debug', "[uw::init] FAILED TO START EXTENSION. Error:", e);
+    }
+  }
+}
diff --git a/src/ext/UWServer.ts b/src/ext/UWServer.ts
new file mode 100644
index 0000000..3653bb7
--- /dev/null
+++ b/src/ext/UWServer.ts
@@ -0,0 +1,307 @@
+import Debug from './conf/Debug.js';
+import BrowserDetect from './conf/BrowserDetect';
+import CommsServer from './lib/comms/CommsServer';
+import Settings from './lib/Settings';
+import Logger, { baseLoggingOptions } from './lib/Logger';
+
+import { sleep } from '../common/js/utils';
+
+import { browser } from 'webextension-polyfill-ts';
+
+export default class UWServer {
+  settings: Settings;
+  logger: Logger;
+  comms: CommsServer;
+
+  ports: any[] = [];
+  hasVideos: boolean;
+  currentSite: string = '';
+  videoTabs: any;
+  currentTabId: number = 0;
+
+  selectedSubitem: any = {
+    'siteSettings': undefined,
+    'videoSettings': undefined,
+  }
+
+
+  private gcTimeout: any;
+  uiLoggerInitialized: boolean = false;
+
+  constructor() {
+    this.setup();
+  }
+
+  async setup() {
+    // logger is the first thing that goes up
+
+    const loggingOptions = {
+      isBackgroundScript: true,
+      allowLogging: true,
+      useConfFromStorage: true,
+      logAll: true,
+      fileOptions: {
+        enabled: true,
+      },
+      consoleOptions: {
+        enabled: true
+      }
+    };
+    this.logger = new Logger();
+    await this.logger.init(loggingOptions);
+
+    this.settings = new Settings({logger: this.logger});
+    await this.settings.init();
+    this.comms = new CommsServer(this);
+    this.comms.subscribe('show-logger', async () => await this.initUiAndShowLogger());
+    this.comms.subscribe('init-vue', async () => await this.initUi());
+    this.comms.subscribe('uwui-vue-initialized', () => this.uiLoggerInitialized = true);
+    this.comms.subscribe('emit-logs', () => {});  // we don't need to do anything, this gets forwarded to UI content script as is
+
+    browser.tabs.onActivated.addListener((m) => {this.onTabSwitched(m)});  
+  }
+
+  async _promisifyTabsGet(browserObj, tabId){
+    return new Promise( (resolve, reject) => {
+      browserObj.tabs.get(tabId, (tab) => resolve(tab));
+    });
+  }
+
+  async injectCss(css, sender) {
+    try {
+      if (BrowserDetect.firefox || BrowserDetect.edge) {
+        browser.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
+      } else if (BrowserDetect.anyChromium) {
+        chrome.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
+      }
+    } catch (e) {
+      this.logger.log('error','debug', '[UwServer::injectCss] Error while injecting css:', {error: e, css, sender});
+    }
+  }
+  async removeCss(css, sender) {
+    try {
+      browser.tabs.removeCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
+    } catch (e) { 
+      this.logger.log('error','debug', '[UwServer::injectCss] Error while removing css:', {error: e, css, sender});
+    }
+  }
+
+  async replaceCss(oldCss, newCss, sender) {
+    if (oldCss !== newCss) {
+      this.injectCss(newCss, sender);
+      this.removeCss(oldCss, sender);
+    }
+  }
+
+  extractHostname(url){
+    var hostname;
+    
+    if (!url) {
+      return "<no url>";
+    }
+
+    // extract hostname  
+    if (url.indexOf("://") > -1) {    //find & remove protocol (http, ftp, etc.) and get hostname
+      hostname = url.split('/')[2];
+    }
+    else {
+      hostname = url.split('/')[0];
+    }
+    
+    hostname = hostname.split(':')[0];   //find & remove port number
+    hostname = hostname.split('?')[0];   //find & remove "?"
+    
+    return hostname;
+  }
+
+  async onTabSwitched(activeInfo){
+    this.hasVideos = false;
+
+    try {
+      this.currentTabId = activeInfo.tabId;   // just for readability
+
+      let tab;
+      if (BrowserDetect.firefox) {
+        tab = await browser.tabs.get(this.currentTabId);
+      } else if (BrowserDetect.anyChromium) {
+        tab = await this._promisifyTabsGet(chrome, this.currentTabId);
+      }
+
+      this.currentSite = this.extractHostname(tab.url);
+      this.logger.log('info', 'debug', '[UwServer::onTabSwitched] user switched tab. New site:', this.currentSite);
+    } catch(e) {
+      this.logger.log('error', 'debug', '[UwServer::onTabSwitched] there was a problem getting currnet site:', e)
+    }
+
+    this.selectedSubitem = {
+      'siteSettings': undefined,
+      'videoSettings': undefined,
+    }
+    //TODO: change extension icon based on whether there's any videos on current page
+  }
+
+  registerVideo(sender) {
+    this.logger.log('info', 'comms', '[UWServer::registerVideo] Registering video.\nsender:', sender);
+
+    const tabHostname = this.extractHostname(sender.tab.url);
+    const frameHostname = this.extractHostname(sender.url);
+
+    // preveri za osirotele/zastarele vrednosti ter jih po potrebi izbriši
+    // check for orphaned/outdated values and remove them if neccessary
+    if (this.videoTabs[sender.tab.id]?.host != tabHostname) {
+      delete this.videoTabs[sender.tab.id]
+    } else if(this.videoTabs[sender.tab.id]?.frames[sender.frameId]?.host != frameHostname) {
+      delete this.videoTabs[sender.tab.id].frames[sender.frameId];
+    }
+
+    if (this.videoTabs[sender.tab.id]) {
+      this.videoTabs[sender.tab.id].frames[sender.frameId] = {
+        id: sender.frameId,
+        host: frameHostname,
+        url: sender.url,
+        registerTime: Date.now(),
+      }
+    } else {
+      this.videoTabs[sender.tab.id] = {
+        id: sender.tab.id,
+        host: tabHostname,
+        url: sender.tab.url,
+        frames: {}
+      };
+      this.videoTabs[sender.tab.id].frames[sender.frameId] = {
+        id: sender.frameId,
+        host: frameHostname,
+        url: sender.url,
+        registerTime: Date.now(),
+      }
+    }
+
+    this.logger.log('info', 'comms', '[UWServer::registerVideo] Video registered. current videoTabs:', this.videoTabs);
+  }
+
+  unregisterVideo(sender) {
+    this.logger.log('info', 'comms', '[UwServer::unregisterVideo] Unregistering video.\nsender:', sender);
+    if (this.videoTabs[sender.tab.id]) {
+      if ( Object.keys(this.videoTabs[sender.tab.id].frames).length <= 1) {
+        delete this.videoTabs[sender.tab.id]
+      } else {
+        if(this.videoTabs[sender.tab.id].frames[sender.frameId]) {
+          delete this.videoTabs[sender.tab.id].frames[sender.frameId];
+        }
+      }
+    }
+    this.logger.log('info', 'comms', '[UwServer::unregisterVideo] Video has been unregistered. Current videoTabs:', this.videoTabs);
+  }
+
+  setSelectedTab(menu, subitem) {
+    this.logger.log('info', 'comms', '[UwServer::setSelectedTab] saving selected tab for', menu, ':', subitem);
+    this.selectedSubitem[menu] = subitem;
+  }
+
+  async initUi() {
+    try {
+      if (BrowserDetect.firefox) {
+        await browser.tabs.executeScript({
+          file: '/ext/uw-ui.js',
+          allFrames: true,
+        });
+      } else if (BrowserDetect.anyChromium) {
+        await new Promise<void>( resolve => 
+          chrome.tabs.executeScript({
+            file: '/ext/uw-ui.js',
+            allFrames: true,
+          }, () => resolve())
+        );
+      }
+      
+    } catch (e) {
+      this.logger.log('ERROR', 'uwbg', 'UI initialization failed. Reason:', e);
+    }
+  }
+
+  async initUiAndShowLogger() {
+    // this implementation is less than optimal and very hacky, but it should work
+    // just fine for our use case.
+    this.uiLoggerInitialized = false;
+
+    await this.initUi();
+
+    await new Promise<void>( async (resolve, reject) => {
+      // if content script doesn't give us a response within 5 seconds, something is 
+      // obviously wrong and we stop waiting,
+
+      // oh and btw, resolve/reject do not break the loops, so we need to do that 
+      // ourselves:
+      // https://stackoverflow.com/questions/55207256/will-resolve-in-promise-loop-break-loop-iteration
+      let isRejected = false;
+      setTimeout( async () => {isRejected = true; reject()}, 5000);
+
+      // check whether UI has been initiated on the FE. If it was, we resolve the 
+      // promise and off we go
+      while (!isRejected) {
+        if (this.uiLoggerInitialized) {
+          resolve();
+          return;        // remember the bit about resolve() not breaking the loop?
+        }
+        await sleep(100);
+      }
+    })
+  }
+
+  async getCurrentTab() {
+    return (await browser.tabs.query({active: true, currentWindow: true}))[0];
+  }
+
+  async getVideoTab() {
+    // friendly reminder: if current tab doesn't have a video, 
+    // there won't be anything in this.videoTabs[this.currentTabId]
+
+    const ctab = await this.getCurrentTab();
+
+    if (!ctab || !ctab.id) {
+      return {
+        host: 'INVALID SITE',
+        frames: [],
+      }
+    }
+
+    if (this.videoTabs[ctab.id]) {
+      // if video is older than PageInfo's video rescan period (+ 4000ms of grace),
+      // we clean it up from videoTabs[tabId].frames array.
+      const ageLimit = Date.now() - this.settings.active.pageInfo.timeouts.rescan - 4000;
+      try {
+        for (const key in this.videoTabs[ctab.id].frames) {
+          if (this.videoTabs[ctab.id].frames[key].registerTime < ageLimit) {
+            delete this.videoTabs[ctab.id].frames[key];
+          }
+        }
+      } catch (e) {
+        // something went wrong. There's prolly no frames.
+        return {
+          host: this.extractHostname(ctab.url),
+          frames: [],
+          selected: this.selectedSubitem
+        }
+      }
+
+      return {
+        ...this.videoTabs[ctab.id],
+        host: this.extractHostname(ctab.url),
+        selected: this.selectedSubitem 
+      };
+    }
+
+    // return something more or less empty if this tab doesn't have 
+    // a video registered for it
+    return {
+      host: this.extractHostname(ctab.url),
+      frames: [],
+      selected: this.selectedSubitem
+    }
+  }
+
+  // chrome shitiness mitigation 
+  sendUnmarkPlayer(message) {
+    this.comms.sendUnmarkPlayer(message);
+  }
+}
diff --git a/src/ext/uw-bg.js b/src/ext/uw-bg.js
index 1f5f0de..724ab0b 100644
--- a/src/ext/uw-bg.js
+++ b/src/ext/uw-bg.js
@@ -1,18 +1,9 @@
-import Debug from './conf/Debug.js';
-import BrowserDetect from './conf/BrowserDetect';
-import CommsServer from './lib/comms/CommsServer';
-import Settings from './lib/Settings';
-import Logger from './lib/Logger';
+/**
+ * NOTE: we cannot get rid of this js file. I tried for 30 seconds and I couldn't get 
+ * extension to work unless I kept this part of extension out of the ts file.
+ */
 
-import { sleep } from '../common/js/utils';
-
-// we need vue in bg script, so we can get vuex.
-// and we need vuex so popup will be initialized 
-// after the first click without resorting to ugly,
-// dirty hacks
-import Vue from 'vue';
-import Vuex from 'vuex';
-import VuexWebExtensions from 'vuex-webextensions';
+import UWServer from './UWServer';
 
 var BgVars = {
   arIsActive: true,
@@ -20,315 +11,7 @@ var BgVars = {
   currentSite: ""
 }
 
-class UWServer {
-
-  constructor() {
-    this.ports = [];
-    this.arIsActive = true;
-    this.hasVideos = false;
-    this.currentSite = "";
-    this.setup();
-
-    this.videoTabs = {};
-    this.currentTabId = 0;
-    this._gctimeout = undefined;
-
-    this.selectedSubitem = {
-      'siteSettings': undefined,
-      'videoSettings': undefined,
-    }
-
-    this.uiLoggerInitialized = false;
-  }
-
-  async setup() {
-    // logger is the first thing that goes up
-    const loggingOptions = {
-      isBackgroundScript: true,
-      allowLogging: true,
-      useConfFromStorage: true,
-      logAll: true,
-      fileOptions: {
-        enabled: true,
-      },
-      consoleOptions: {
-        enabled: true
-      }
-    };
-    this.logger = new Logger();
-    await this.logger.init(loggingOptions);
-
-    this.settings = new Settings({logger: this.logger});
-    await this.settings.init();
-    this.comms = new CommsServer(this);
-    this.comms.subscribe('show-logger', async () => await this.initUiAndShowLogger());
-    this.comms.subscribe('init-vue', async () => await this.initUi());
-    this.comms.subscribe('uwui-vue-initialized', () => this.uiLoggerInitialized = true);
-    this.comms.subscribe('emit-logs', () => {});  // we don't need to do anything, this gets forwarded to UI content script as is
-
-
-    if(BrowserDetect.firefox) {
-      browser.tabs.onActivated.addListener((m) => {this.onTabSwitched(m)});  
-    } else if (BrowserDetect.anyChromium) {
-      chrome.tabs.onActivated.addListener((m) => {this.onTabSwitched(m)});
-    }
-  }
-
-  async _promisifyTabsGet(browserObj, tabId){
-    return new Promise( (resolve, reject) => {
-      browserObj.tabs.get(tabId, (tab) => resolve(tab));
-    });
-  }
-
-  async injectCss(css, sender) {
-    try {
-      if (BrowserDetect.firefox || BrowserDetect.edge) {
-        browser.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
-      } else if (BrowserDetect.anyChromium) {
-        chrome.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
-      }
-    } catch (e) {
-      this.logger.log('error','debug', '[UwServer::injectCss] Error while injecting css:', {error: e, css, sender});
-    }
-  }
-  async removeCss(css, sender) {
-    try {
-      if (BrowserDetect.firefox || BrowserDetect.edge) {
-        browser.tabs.removeCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
-      } else if (BrowserDetect.anyChromium) {
-        // 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) { 
-      this.logger.log('error','debug', '[UwServer::injectCss] Error while removing css:', {error: e, css, sender});
-    }
-  }
-
-  async replaceCss(oldCss, newCss, sender) {
-    if (oldCss !== newCss) {
-      this.injectCss(newCss, sender);
-      this.removeCss(oldCss, sender);
-    }
-  }
-
-  extractHostname(url){
-    var hostname;
-    
-    if (!url) {
-      return "<no url>";
-    }
-
-    // extract hostname  
-    if (url.indexOf("://") > -1) {    //find & remove protocol (http, ftp, etc.) and get hostname
-      hostname = url.split('/')[2];
-    }
-    else {
-      hostname = url.split('/')[0];
-    }
-    
-    hostname = hostname.split(':')[0];   //find & remove port number
-    hostname = hostname.split('?')[0];   //find & remove "?"
-    
-    return hostname;
-  }
-
-  async onTabSwitched(activeInfo){
-    this.hasVideos = false;
-
-    try {
-      this.currentTabId = activeInfo.tabId;   // just for readability
-
-      let tab;
-      if (BrowserDetect.firefox) {
-        tab = await browser.tabs.get(this.currentTabId);
-      } else if (BrowserDetect.anyChromium) {
-        tab = await this._promisifyTabsGet(chrome, this.currentTabId);
-      }
-
-      this.currentSite = this.extractHostname(tab.url);
-      this.logger.log('info', 'debug', '[UwServer::onTabSwitched] user switched tab. New site:', this.currentSite);
-    } catch(e) {
-      this.logger.log('error', 'debug', '[UwServer::onTabSwitched] there was a problem getting currnet site:', e)
-    }
-
-    this.selectedSubitem = {
-      'siteSettings': undefined,
-      'videoSettings': undefined,
-    }
-    //TODO: change extension icon based on whether there's any videos on current page
-  }
-
-  registerVideo(sender) {
-    this.logger.log('info', 'comms', '[UWServer::registerVideo] Registering video.\nsender:', sender);
-
-    const tabHostname = this.extractHostname(sender.tab.url);
-    const frameHostname = this.extractHostname(sender.url);
-
-    // preveri za osirotele/zastarele vrednosti ter jih po potrebi izbriši
-    // check for orphaned/outdated values and remove them if neccessary
-    if (this.videoTabs[sender.tab.id]?.host != tabHostname) {
-      delete this.videoTabs[sender.tab.id]
-    } else if(this.videoTabs[sender.tab.id]?.frames[sender.frameId]?.host != frameHostname) {
-      delete this.videoTabs[sender.tab.id].frames[sender.frameId];
-    }
-
-    if (this.videoTabs[sender.tab.id]) {
-      this.videoTabs[sender.tab.id].frames[sender.frameId] = {
-        id: sender.frameId,
-        host: frameHostname,
-        url: sender.url,
-        registerTime: Date.now(),
-      }
-    } else {
-      this.videoTabs[sender.tab.id] = {
-        id: sender.tab.id,
-        host: tabHostname,
-        url: sender.tab.url,
-        frames: {}
-      };
-      this.videoTabs[sender.tab.id].frames[sender.frameId] = {
-        id: sender.frameId,
-        host: frameHostname,
-        url: sender.url,
-        registerTime: Date.now(),
-      }
-    }
-
-    this.logger.log('info', 'comms', '[UWServer::registerVideo] Video registered. current videoTabs:', this.videoTabs);
-  }
-
-  unregisterVideo(sender) {
-    this.logger.log('info', 'comms', '[UwServer::unregisterVideo] Unregistering video.\nsender:', sender);
-    if (this.videoTabs[sender.tab.id]) {
-      if ( Object.keys(this.videoTabs[sender.tab.id].frames).length <= 1) {
-        delete this.videoTabs[sender.tab.id]
-      } else {
-        if(this.videoTabs[sender.tab.id].frames[sender.frameId]) {
-          delete this.videoTabs[sender.tab.id].frames[sender.frameId];
-        }
-      }
-    }
-    this.logger.log('info', 'comms', '[UwServer::unregisterVideo] Video has been unregistered. Current videoTabs:', this.videoTabs);
-  }
-
-  setSelectedTab(menu, subitem) {
-    this.logger.log('info', 'comms', '[UwServer::setSelectedTab] saving selected tab for', menu, ':', subitem);
-    this.selectedSubitem[menu] = subitem;
-  }
-
-  async initUi() {
-    try {
-      if (BrowserDetect.firefox) {
-        await browser.tabs.executeScript({
-          file: '/ext/uw-ui.js',
-          allFrames: true,
-        });
-      } else if (BrowserDetect.anyChromium) {
-        await new Promise( resolve => 
-          chrome.tabs.executeScript({
-            file: '/ext/uw-ui.js',
-            allFrames: true,
-          }, () => resolve())
-        );
-      }
-      
-    } catch (e) {
-      this.logger.log('ERROR', 'uwbg', 'UI initialization failed. Reason:', e);
-    }
-  }
-
-  async initUiAndShowLogger() {
-    // this implementation is less than optimal and very hacky, but it should work
-    // just fine for our use case.
-    this.uiLoggerInitialized = false;
-
-    await this.initUi();
-
-    await new Promise( async (resolve, reject) => {
-      // if content script doesn't give us a response within 5 seconds, something is 
-      // obviously wrong and we stop waiting,
-
-      // oh and btw, resolve/reject do not break the loops, so we need to do that 
-      // ourselves:
-      // https://stackoverflow.com/questions/55207256/will-resolve-in-promise-loop-break-loop-iteration
-      let isRejected = false;
-      setTimeout( async () => {isRejected = true; reject()}, 5000);
-
-      // check whether UI has been initiated on the FE. If it was, we resolve the 
-      // promise and off we go
-      while (!isRejected) {
-        if (this.uiLoggerInitialized) {
-          resolve();
-          return;        // remember the bit about resolve() not breaking the loop?
-        }
-        await sleep(100);
-      }
-    })
-  }
-
-  async getCurrentTab() {
-    if (BrowserDetect.firefox) {
-      return (await browser.tabs.query({active: true, currentWindow: true}))[0];
-    } else if (BrowserDetect.anyChromium) {
-      return new Promise((resolve, reject) => chrome.tabs.query({active: true, currentWindow: true}, (x) => resolve(x[0])));
-    }
-  }
-
-  async getVideoTab() {
-    // friendly reminder: if current tab doesn't have a video, 
-    // there won't be anything in this.videoTabs[this.currentTabId]
-
-    const ctab = await this.getCurrentTab();
-
-    if (!ctab || !ctab.id) {
-      return {
-        host: 'INVALID SITE',
-        frames: [],
-      }
-    }
-
-    if (this.videoTabs[ctab.id]) {
-      // if video is older than PageInfo's video rescan period (+ 4000ms of grace),
-      // we clean it up from videoTabs[tabId].frames array.
-      const ageLimit = Date.now() - this.settings.active.pageInfo.timeouts.rescan - 4000;
-      try {
-        for (const key in this.videoTabs[ctab.id].frames) {
-          if (this.videoTabs[ctab.id].frames[key].registerTime < ageLimit) {
-            delete this.videoTabs[ctab.id].frames[key];
-          }
-        }
-      } catch (e) {
-        // something went wrong. There's prolly no frames.
-        return {
-          host: this.extractHostname(ctab.url),
-          frames: [],
-          selected: this.selectedSubitem
-        }
-      }
-
-      return {
-        ...this.videoTabs[ctab.id],
-        host: this.extractHostname(ctab.url),
-        selected: this.selectedSubitem 
-      };
-    }
-
-    // return something more or less empty if this tab doesn't have 
-    // a video registered for it
-    return {
-      host: this.extractHostname(ctab.url),
-      frames: [],
-      selected: this.selectedSubitem
-    }
-  }
-
-  // chrome shitiness mitigation 
-  sendUnmarkPlayer(message) {
-    this.comms.sendUnmarkPlayer(message);
-  }
-}
-
-var server = new UWServer();
+const server = new UWServer();
 
 window.sendUnmarkPlayer = (message) => {
   server.sendUnmarkPlayer(message)
diff --git a/src/ext/uw.js b/src/ext/uw.js
index 351ec0d..70d14af 100644
--- a/src/ext/uw.js
+++ b/src/ext/uw.js
@@ -1,13 +1,10 @@
-import Debug from './conf/Debug';
-import BrowserDetect from './conf/BrowserDetect';
-import ExtensionMode from '../common/enums/ExtensionMode.enum';
-import Settings from './lib/Settings';
-import ActionHandler from './lib/ActionHandler';
-import Comms from './lib/comms/Comms';
-import CommsClient from './lib/comms/CommsClient';
-import PageInfo from './lib/video-data/PageInfo';
-import Logger from './lib/Logger';
+/**
+ * NOTE: we cannot get rid of this js file. I tried for 30 seconds and I couldn't get 
+ * extension to work unless I kept this part of extension out of the ts file.
+ */
 
+import UWContent from './UWContent';
+import BrowserDetect from './conf/BrowserDetect';
 
 if(process.env.CHANNEL !== 'stable'){
   console.warn("\n\n\n\n\n\n           ———    Sᴛλʀᴛɪɴɢ  Uʟᴛʀᴀᴡɪᴅɪꜰʏ    ———\n               <<   ʟᴏᴀᴅɪɴɢ ᴍᴀɪɴ ꜰɪʟᴇ   >>\n\n\n\n");
@@ -27,161 +24,5 @@ if (BrowserDetect.edge) {
   HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
 }
 
-class UW {
-  constructor(){
-    this.pageInfo = undefined;
-    this.comms = undefined;
-    this.settings = undefined;
-    this.actionHandler = undefined;
-    this.logger = undefined;
-    this.uiInitiated = false;
-
-    this.commsHandlers = {
-      'get-current-zoom': [() => this.pageInfo.requestCurrentZoom()],
-      'set-ar': [(message) => this.pageInfo.setAr({type: message.arg, ratio: message.customArg}, message.playing)],
-      'set-alignment': [(message) => {
-        this.pageInfo.setVideoAlignment(message.arg, message.playing);
-        this.pageInfo.restoreAr();
-      }],
-      'set-stretch': [(message) => this.pageInfo.setStretchMode(message.arg, message.playing, message.customArg)],
-      'set-keyboard': [(message) => this.pageInfo.setKeyboardShortcutsEnabled(message.arg)],
-      'autoar-start': [(message) => {
-        if (message.enabled !== false) {
-          this.pageInfo.initArDetection(message.playing);
-          this.pageInfo.startArDetection(message.playing);
-        } else {
-          this.pageInfo.stopArDetection(message.playing);
-        }
-      }],
-      'pause-processing': [(message) => this.pageInfo.pauseProcessing(message.playing)],
-      'resume-processing': [(message) => this.pageInfo.resumeProcessing(message.autoArStatus, message.playing)],
-      'set-zoom': [(message) => this.pageInfo.setZoom(message.arg, true, message.playing)],
-      'change-zoom': [(message) => this.pageInfo.zoomStep(message.arg, message.playing)],
-      'mark-player': [(message) => this.pageInfo.markPlayer(message.name, message.color)],
-      'unmark-player': [() => this.pageInfo.unmarkPlayer()],
-      'autoar-set-manual-tick': [(message) => this.pageInfo.setManualTick(message.arg)],
-      'autoar-tick': [() => this.pageInfo.tick()],
-      'set-ar-persistence': [() => this.pageInfo.setArPersistence(message.arg)], 
-    }
-  }
-
-  reloadSettings() {
-    this.logger.log('info', 'debug', 'Things happened in the popup. Will reload extension settings.');
-    this.init();
-  }
-
-  async init(){
-    if (Debug.debug) {
-      console.log("[uw::main] loading configuration ...");
-    }
-  
-    // logger init is the first thing that needs to run
-    try {
-      if (!this.logger) {
-        const loggingOptions = {
-          isContentScript: true,
-          allowLogging: true,
-          useConfFromStorage: true,
-          fileOptions: {
-            enabled: false
-          },
-          consoleOptions: {
-            "enabled": true,
-            "debug": true,
-            "init": true,
-            "settings": true,
-            "keyboard": true,
-            "mousemove": false,
-            "actionHandler": true,
-            "comms": true,
-            "playerDetect": true,
-            "resizer": true,
-            "scaler": true,
-            "stretcher": true,
-            // "videoRescan": true,
-            // "playerRescan": true,
-            "arDetect": true,
-            "arDetect_verbose": true
-          },
-          allowBlacklistedOrigins: {
-            'periodicPlayerCheck': false,
-            'periodicVideoStyleChangeCheck': false,
-            'handleMouseMove': false
-          }
-        };
-        this.logger = new Logger();
-        await this.logger.init(loggingOptions);
-
-        // show popup if logging to file is enabled
-        if (this.logger.isLoggingAllowed() && this.logger.isLoggingToFile()) {
-          console.info("[uw::init] Logging is allowed! Initalizing vue and UI!");
-
-          // CommsClient is not initiated yet, so we use static comms to send the command
-          Comms.sendMessage({cmd: 'show-logger'});
-        }
-      }
-    } catch (e) {
-      console.error("logger init failed!", e)
-    }
-
-    // init() is re-run any time settings change
-    if (this.comms) {
-      this.comms.destroy();
-    }
-    if (!this.settings) {
-      this.settings = new Settings({
-        onSettingsChanged: () => this.reloadSettings(),
-        logger: this.logger
-      });
-      await this.settings.init();
-    }
-  
-    this.comms = new CommsClient('content-main-port', this.logger, this.commsHandlers);
-
-    // če smo razširitev onemogočili v nastavitvah, ne naredimo ničesar
-    // If extension is soft-disabled, don't do shit
-
-    var extensionMode = this.settings.getExtensionMode();
-
-    this.logger.log('info', 'debug', "[uw::init] Extension mode:" + (extensionMode < 0 ? "disabled" : extensionMode == '1' ? 'basic' : 'full'));
-
-    const isSiteDisabled = extensionMode === ExtensionMode.Disabled
-
-    if (isSiteDisabled) {
-      if (this.settings.getExtensionMode('@global') === ExtensionMode.Disabled) {
-        this.logger.log('info', 'debug', "[uw::init] EXTENSION DISABLED, THEREFORE WONT BE STARTED")
-        return;
-      }
-    }
-  
-    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.");
-  
-      this.logger.log('info', 'debug', "[uw.js::setup] will try to initate ActionHandler.");
-
-      // 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();
-        
-        this.logger.log('info', 'debug', "[uw.js::setup] ActionHandler initiated.");
-      }
-
-    } catch (e) {
-      this.logger.log('error', 'debug', "[uw::init] FAILED TO START EXTENSION. Error:", e);
-    }
-  }
-
- 
-}
-
-var main = new UW();
+const main = new UWContent();
 main.init();

From 4354393f79d75409a6d91aa93cc65e764e1bd30a Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 6 Mar 2021 03:57:10 +0100
Subject: [PATCH 67/68] Do the version bump

---
 CHANGELOG.md      | 6 +++++-
 package-lock.json | 2 +-
 package.json      | 2 +-
 src/manifest.json | 2 +-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ba887f7..058a128 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,12 +8,16 @@
 * Settings page looks ugly af right now. Maybe fix it some time later
 * other bug fixes
 
-## v5.0 (planned major)
+## v6.0 (planned major)
 
  * WebGL autodetection
  * in-player GUI
  * Fix UI logger
 
+## v5.x (next major)
+
+* Migrate main scripts to typescript (vue is currently not included)
+
 ## v4.x (current major)
 
 ### v4.5.3
diff --git a/package-lock.json b/package-lock.json
index 3a96fba..bdab70a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "ultrawidify",
-  "version": "4.5.3",
+  "version": "5.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 15aaaef..adca6de 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ultrawidify",
-  "version": "4.5.3",
+  "version": "5.0.0",
   "description": "Aspect ratio fixer for youtube and other sites, with automatic aspect ratio detection. Supports ultrawide and other ratios.",
   "author": "Tamius Han <tamius.han@gmail.com>",
   "scripts": {
diff --git a/src/manifest.json b/src/manifest.json
index 3294fc1..d75c674 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.5.3.2",
+  "version": "5.0.0",
   "applications": {
     "gecko": {
       "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"

From 6c59c009e54699830f0355901e503ed3bfd50102 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 6 Mar 2021 04:01:47 +0100
Subject: [PATCH 68/68] Move some last remaining enums to typescript

---
 src/ext/lib/ar-detect/ArDetector.ts           |  8 +++----
 .../lib/ar-detect/edge-detect/EdgeDetect.ts   | 22 +++++++++----------
 .../enums/EdgeDetectPrimaryDirectionEnum.js   |  6 -----
 .../enums/EdgeDetectPrimaryDirectionEnum.ts   |  6 +++++
 .../enums/EdgeDetectQualityEnum.js            |  6 -----
 .../enums/EdgeDetectQualityEnum.ts            |  6 +++++
 .../edge-detect/enums/EdgeStatusEnum.js       |  6 -----
 .../edge-detect/enums/EdgeStatusEnum.ts       |  6 +++++
 8 files changed, 33 insertions(+), 33 deletions(-)
 delete mode 100644 src/ext/lib/ar-detect/edge-detect/enums/EdgeDetectPrimaryDirectionEnum.js
 create mode 100644 src/ext/lib/ar-detect/edge-detect/enums/EdgeDetectPrimaryDirectionEnum.ts
 delete mode 100644 src/ext/lib/ar-detect/edge-detect/enums/EdgeDetectQualityEnum.js
 create mode 100644 src/ext/lib/ar-detect/edge-detect/enums/EdgeDetectQualityEnum.ts
 delete mode 100644 src/ext/lib/ar-detect/edge-detect/enums/EdgeStatusEnum.js
 create mode 100644 src/ext/lib/ar-detect/edge-detect/enums/EdgeStatusEnum.ts

diff --git a/src/ext/lib/ar-detect/ArDetector.ts b/src/ext/lib/ar-detect/ArDetector.ts
index a68132f..3a86cd5 100644
--- a/src/ext/lib/ar-detect/ArDetector.ts
+++ b/src/ext/lib/ar-detect/ArDetector.ts
@@ -701,7 +701,7 @@ class ArDetector {
     // that we will cut too much, we rather avoid doing anything at all. There's gonna be a next chance.
     try{
       if(guardLineOut.blackbarFail || guardLineOut.imageFail){
-        if(this.edgeDetector.findBars(imageData, null, EdgeDetectPrimaryDirection.HORIZONTAL).status === 'ar_known'){
+        if(this.edgeDetector.findBars(imageData, null, EdgeDetectPrimaryDirection.Horizontal).status === 'ar_known'){
 
 
           if(guardLineOut.blackbarFail){
@@ -724,14 +724,14 @@ class ArDetector {
     
     // blackSamples -> {res_top, res_bottom}
    
-    let edgePost = this.edgeDetector.findBars(imageData, sampleCols, EdgeDetectPrimaryDirection.VERTICAL, EdgeDetectQuality.IMPROVED, guardLineOut, bfanalysis);
+    let edgePost = this.edgeDetector.findBars(imageData, sampleCols, EdgeDetectPrimaryDirection.Vertical, EdgeDetectQuality.Improved, guardLineOut, bfanalysis);
     
     this.logger.log('info', 'arDetect_verbose', `%c[ArDetect::frameCheck] edgeDetector returned this\n`,  "color: #aaf", edgePost);
     
-    if (edgePost.status !== EdgeStatus.AR_KNOWN){
+    if (edgePost.status !== EdgeStatus.ARKnown){
       // rob ni bil zaznan, zato ne naredimo ničesar.
       // no edge was detected. Let's leave things as they were
-      this.logger.log('info', 'arDetect_verbose', `%c[ArDetect::frameCheck] Edge wasn't detected with findBars`, "color: #fa3", edgePost, "EdgeStatus.AR_KNOWN:", EdgeStatus.AR_KNOWN);
+      this.logger.log('info', 'arDetect_verbose', `%c[ArDetect::frameCheck] Edge wasn't detected with findBars`, "color: #fa3", edgePost, "EdgeStatus.AR_KNOWN:", EdgeStatus.ARKnown);
 
       this.clearImageData(imageData);
       return;
diff --git a/src/ext/lib/ar-detect/edge-detect/EdgeDetect.ts b/src/ext/lib/ar-detect/edge-detect/EdgeDetect.ts
index bc11efa..3d078ca 100644
--- a/src/ext/lib/ar-detect/edge-detect/EdgeDetect.ts
+++ b/src/ext/lib/ar-detect/edge-detect/EdgeDetect.ts
@@ -43,14 +43,14 @@ class EdgeDetect{
     
   }
 
-  findBars(image, sampleCols, direction = EdgeDetectPrimaryDirection.VERTICAL, quality = EdgeDetectQuality.IMPROVED, guardLineOut?, blackFrameAnalysis?){
+  findBars(image, sampleCols, direction = EdgeDetectPrimaryDirection.Vertical, quality = EdgeDetectQuality.Improved, guardLineOut?, blackFrameAnalysis?){
     let fastCandidates, edgeCandidates, bars;
-    if (direction == EdgeDetectPrimaryDirection.VERTICAL) {
+    if (direction == EdgeDetectPrimaryDirection.Vertical) {
       try {
         fastCandidates = this.findCandidates(image, sampleCols, guardLineOut);
         
         if (! this.isValidSample(fastCandidates)) {
-          return {status: EdgeStatus.AR_UNKNOWN};
+          return {status: EdgeStatus.ARUnknown};
         }
         // if(quality == EdgeDetectQuality.FAST){
         //   edges = fastCandidates; // todo: processing
@@ -60,10 +60,10 @@ class EdgeDetect{
         // }
       } catch (e) {
         this.logger.log('error', 'arDetect', '%c[EdgeDetect::findBars] find bars failed.', 'background: #f00, color: #000', e);
-        return {status: EdgeStatus.AR_UNKNOWN}
+        return {status: EdgeStatus.ARUnknown}
       }
     } else {
-      bars = this.pillarTest(image) ? {status: EdgeStatus.AR_KNOWN} : {status: EdgeStatus.AR_UNKNOWN};
+      bars = this.pillarTest(image) ? {status: EdgeStatus.ARKnown} : {status: EdgeStatus.ARUnknown};
     }
 
     return bars;
@@ -409,7 +409,7 @@ class EdgeDetect{
         if (edgesTop[0].count + edgesBottom[0].count > this.settings.active.arDetect.edgeDetection.singleSideConfirmationThreshold
            || ( edgesTop[0].count > this.settings.active.arDetect.edgeDetection.confirmationThreshold && edgesBottom[0].count > this.settings.active.arDetect.edgeDetection.confirmationThreshold) ){
           return {
-            status: EdgeStatus.AR_KNOWN,
+            status: EdgeStatus.ARKnown,
             blackbarWidth: blackbarWidth,
             guardLineTop: edgesTop[0].distance,
             guardLineBottom: edgesBottom[0].absolute,
@@ -443,7 +443,7 @@ class EdgeDetect{
               if (edgesTop[i].count + edgesBottom[0].count > this.settings.active.arDetect.edgeDetection.singleSideConfirmationThreshold
                  || (edgesTop[i].count > this.settings.active.arDetect.edgeDetection.singleSideConfirmationThreshold && edgesBottom[0].count > this.settings.active.arDetect.edgeDetection.confirmationThreshold) ) {
                 return {
-                  status: EdgeStatus.AR_KNOWN,
+                  status: EdgeStatus.ARKnown,
                   blackbarWidth: blackbarWidth,
                   guardLineTop: edgesTop[i].distance,
                   guardLineBottom: edgesBottom[0].absolute,
@@ -474,7 +474,7 @@ class EdgeDetect{
               if (edgesTop[0].count + edgesBottom[i].count > this.settings.active.arDetect.edgeDetection.singleSideConfirmationThreshold
                   || (edgesTop[0].count > this.settings.active.arDetect.edgeDetection.singleSideConfirmationThreshold && edgesBottom[i].count > this.settings.active.arDetect.edgeDetection.confirmationThreshold)) {
                 return {
-                  status: EdgeStatus.AR_KNOWN,
+                  status: EdgeStatus.ARKnown,
                   blackbarWidth: blackbarWidth,
                   guardLineTop: edgesTop[0].distance,
                   guardLineBottom: edgesBottom[i].absolute,
@@ -500,7 +500,7 @@ class EdgeDetect{
         for(let edge of edgesBottom){
           if(edge.count >= edgeDetectionThreshold)
             return {
-              status: EdgeStatus.AR_KNOWN, 
+              status: EdgeStatus.ARKnown, 
               blackbarWidth: edge.distance,
               guardLineTop: null,
               guardLineBottom: edge.bottom,
@@ -514,7 +514,7 @@ class EdgeDetect{
         for(let edge of edgesTop){
           if(edge.count >= edgeDetectionThreshold)
             return {
-              status: EdgeStatus.AR_KNOWN,
+              status: EdgeStatus.ARKnown,
               blackbarWidth: edge.distance,
               guardLineTop: edge.top,
               guardLineBottom: null,
@@ -527,7 +527,7 @@ class EdgeDetect{
     }
     // če pridemo do sem, nam ni uspelo nič. Razmerje stranic ni znano
     // if we reach this bit, we have failed in determining aspect ratio. It remains unknown.
-    return {status: EdgeStatus.AR_UNKNOWN}
+    return {status: EdgeStatus.ARUnknown}
   }
   
   pillarTest(image){
diff --git a/src/ext/lib/ar-detect/edge-detect/enums/EdgeDetectPrimaryDirectionEnum.js b/src/ext/lib/ar-detect/edge-detect/enums/EdgeDetectPrimaryDirectionEnum.js
deleted file mode 100644
index c2b10fa..0000000
--- a/src/ext/lib/ar-detect/edge-detect/enums/EdgeDetectPrimaryDirectionEnum.js
+++ /dev/null
@@ -1,6 +0,0 @@
-var EdgeDetectPrimaryDirection = Object.freeze({
-  VERTICAL: 0,
-  HORIZONTAL: 1
-});
-
-export default EdgeDetectPrimaryDirection;
diff --git a/src/ext/lib/ar-detect/edge-detect/enums/EdgeDetectPrimaryDirectionEnum.ts b/src/ext/lib/ar-detect/edge-detect/enums/EdgeDetectPrimaryDirectionEnum.ts
new file mode 100644
index 0000000..23d2977
--- /dev/null
+++ b/src/ext/lib/ar-detect/edge-detect/enums/EdgeDetectPrimaryDirectionEnum.ts
@@ -0,0 +1,6 @@
+enum EdgeDetectPrimaryDirection {
+  Vertical = 0,
+  Horizontal = 1
+};
+
+export default EdgeDetectPrimaryDirection;
diff --git a/src/ext/lib/ar-detect/edge-detect/enums/EdgeDetectQualityEnum.js b/src/ext/lib/ar-detect/edge-detect/enums/EdgeDetectQualityEnum.js
deleted file mode 100644
index f1247f6..0000000
--- a/src/ext/lib/ar-detect/edge-detect/enums/EdgeDetectQualityEnum.js
+++ /dev/null
@@ -1,6 +0,0 @@
-var EdgeDetectQuality = Object.freeze({
-  FAST: 0,
-  IMPROVED: 1
-});
-
-export default EdgeDetectQuality;
diff --git a/src/ext/lib/ar-detect/edge-detect/enums/EdgeDetectQualityEnum.ts b/src/ext/lib/ar-detect/edge-detect/enums/EdgeDetectQualityEnum.ts
new file mode 100644
index 0000000..4d1882b
--- /dev/null
+++ b/src/ext/lib/ar-detect/edge-detect/enums/EdgeDetectQualityEnum.ts
@@ -0,0 +1,6 @@
+enum EdgeDetectQuality {
+  Fast = 0,
+  Improved = 1
+};
+
+export default EdgeDetectQuality;
diff --git a/src/ext/lib/ar-detect/edge-detect/enums/EdgeStatusEnum.js b/src/ext/lib/ar-detect/edge-detect/enums/EdgeStatusEnum.js
deleted file mode 100644
index 65946cf..0000000
--- a/src/ext/lib/ar-detect/edge-detect/enums/EdgeStatusEnum.js
+++ /dev/null
@@ -1,6 +0,0 @@
-var EdgeStatus = Object.freeze({
-  AR_UNKNOWN: 0,
-  AR_KNOWN: 1,
-});
-
-export default EdgeStatus;
diff --git a/src/ext/lib/ar-detect/edge-detect/enums/EdgeStatusEnum.ts b/src/ext/lib/ar-detect/edge-detect/enums/EdgeStatusEnum.ts
new file mode 100644
index 0000000..5a1b66d
--- /dev/null
+++ b/src/ext/lib/ar-detect/edge-detect/enums/EdgeStatusEnum.ts
@@ -0,0 +1,6 @@
+enum EdgeStatus {
+  ARUnknown = 0,
+  ARKnown = 1,
+};
+
+export default EdgeStatus;