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] 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() {