Enumification, reorg of ExtensionConf

src/common/components/action-alt.vue

@@ -107,7 +107,7 @@
 </template>
 
 <script>
-import StretchMode from '../enums/stretch-mode';
+import StretchMode from '../enums/stretch.enum';
 import KeyboardShortcutParser from '../js/KeyboardShortcutParser';
 
 

src/common/components/action-row.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script>
-import StretchMode from '../enums/stretch-mode';
+import StretchMode from '../enums/stretch.enum';
 import KeyboardShortcutParser from '../js/KeyboardShortcutParser'
 
 export default {

src/common/enums/extension-mode.enum.js

@@ -2,8 +2,9 @@ var ExtensionMode = Object.freeze({
   AutoDisabled: -2,
   Disabled: -1,
   Default: 0,
-  Basic: 1,
+  Whitelist: 1,
-  Full: 2
+  Basic: 2,
+  Enabled: 3,
 });
 
 export default ExtensionMode;

src/common/enums/stretch-mode.js

@@ -1,8 +0,0 @@
-var StretchMode = Object.freeze({
-  NO_STRETCH: 0,
-  BASIC: 1,
-  HYBRID: 2,
-  CONDITIONAL: 3
-});
-
-export default StretchMode;

src/common/enums/stretch.enum.js

@@ -0,0 +1,9 @@
+var Stretch = Object.freeze({
+  NoStretch: 0,
+  Basic: 1,
+  Hybrid: 2,
+  Conditional: 3,
+  Default: -1
+});
+
+export default Stretch;

src/common/enums/video-alignment.enum.js

@@ -0,0 +1,8 @@
+var VideoAlignment = Object.freeze({
+  Left: 0,
+  Center: 1,
+  Right: 2,
+  Default: -1
+});
+
+export default VideoAlignment;

src/ext/conf/ActionList.js

@@ -1,3 +1,7 @@
+import VideoAlignment from '../../common/enums/video-alignment.enum';
+import Stretch from '../../common/enums/stretch.enum';
+import ExtensionMode from '../../common/enums/extension-mode.enum';
+
 var ActionList = {
   'set-ar': {
     name: 'Set aspect ratio',
@@ -24,22 +28,22 @@ var ActionList = {
       page: true,
     }
   },
-  'stretch': {
+  'set-stretch': {
     name: 'Set stretch',
     args: [{
       name: 'Normal',
-      arg: 0
+      arg: Stretch.NoStretch
     },{
       name: 'Basic',
-      arg: 1,
+      arg: Stretch.Basic,
     },{
       name: 'Hybrid',
-      arg: 2,
+      arg: Stretch.Hybrid,
     },{
       name: 'Thin borders',
-      arg: 3,
+      arg: Stretch.Conditional,
     },{
-      name: 'Default',
+      name: Stretch.Default,
       arg: -1,
       scopes: {
         site: true
@@ -55,16 +59,16 @@ var ActionList = {
     name: 'Set video alignment',
     args: [{
       name: 'Left',
-      arg: 'left',
+      arg: VideoAlignment.Left,
     },{
       name: 'Center',
-      arg: 'center',
+      arg: VideoAlignment.Center,
     },{
       name: 'Right',
-      arg: 'right'
+      arg: VideoAlignment.Right
     },{
       name: 'Default',
-      arg: 'default',
+      arg: VideoAlignment.Default,
       scopes: {
         site: true,
       }
@@ -127,22 +131,22 @@ var ActionList = {
     name: 'Set extension mode',
     args: [{
       name: 'Enable',
-      arg: 'blacklist',
+      arg: ExtensionMode.Enabled,
     },{
       name: 'On whitelisted only',
-      arg: 'whitelist',
+      arg: ExtensionMode.Whitelist,
       scopes: {
         global: true,
       }
     },{
       name: 'Default',
-      arg: 'default',
+      arg: ExtensionMode.Default,
       scopes: {
         page: true,
       }
     },{
       name: 'Disable',
-      arg: 'disabled'
+      arg: ExtensionMode.Default
     }],
     scopes: {
       global: true,
@@ -153,22 +157,22 @@ var ActionList = {
     name: 'Set automatic aspect ratio detection mode',
     args: [{
       name: 'Enable',
-      arg: 'blacklist',
+      arg: ExtensionMode.Enabled,
     },{
       name: 'On whitelisted only',
-      arg: 'whitelist',
+      arg: ExtensionMode.Whitelist,
       scopes: {
         global: true,
       }
     },{
       name: 'Default',
-      arg: 'default',
+      arg: ExtensionMode.Default,
       scopes: {
         page: true,
       }
     },{
       name: 'Disable',
-      arg: 'disabled'
+      arg: ExtensionMode.Disabled
     }],
     scopes: {
       global: true,

src/ext/conf/ExtensionConf.js

@@ -1,20 +1,14 @@
 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';
 
 if(Debug.debug)
   console.log("Loading: ExtensionConf.js");
 
 var ExtensionConf = {
-  basicExtensionMode: "blacklist",
-  extensionMode: "blacklist", // how should this extension work? 
-                              //       'blacklist' - work everywhere except blacklist
-                              //       'whitelist' - only work on whitelisted sites
-                              //       'disabled'  - work nowhere
   arDetect: {
-    mode: "blacklist",        // how should autodetection work?
-                              //       'blacklist' - work by default, problem sites need to be blocked
-                              //       'whitelist' - only work if site has been specifically approved
-                              //       'disabled'  - don't work at all 
     disabledReason: "",       // if automatic aspect ratio has been disabled, show reason
     allowedMisaligned: 0.05,  // top and bottom letterbox thickness can differ by this much. 
                               // Any more and we don't adjust ar.
@@ -60,7 +54,6 @@ var ExtensionConf = {
       edgeTolerancePercent: null  // unused. same as above, except use % of canvas height instead of pixels
     },
     fallbackMode: {
-      enabled: true,
       safetyBorderPx: 5,        // determines the thickness of safety border in fallback mode
       noTriggerZonePx: 8        // if we detect edge less than this many pixels thick, we don't correct.
     },
@@ -106,15 +99,12 @@ var ExtensionConf = {
     announceDebounce: 200     // we wait this long before announcing new zoom
   },
   miscSettings: {
-    videoAlignment: "center",
     mousePan: {
       enabled: false
     },
     mousePanReverseMouse: false,
-    defaultAr: "original",
   },
   stretch: {
-    initialMode: 0,                     // 0 - no stretch, 1 - basic, 2 - hybrid, 3 - conditional
     conditionalDifferencePercent: 0.05  // black bars less than this wide will trigger stretch
                                         // if mode is set to '1'. 1.0=100%
   },
@@ -130,11 +120,6 @@ var ExtensionConf = {
       rescan: 1500
     }
   },
-  colors:{
-    //     criticalFail: "background: #fa2; color: #000"
-  },
-  keyboard: {
-  },
   // -----------------------------------------
   //             ::: ACTIONS :::
   // -----------------------------------------
@@ -427,7 +412,7 @@ var ExtensionConf = {
     label: 'Don\'t stretch',
     cmd: [{
       action: 'set-stretch',
-      arg: 0,
+      arg: Stretch.NoStretch,
     }],
     scopes: {
       global: {
@@ -452,7 +437,7 @@ var ExtensionConf = {
     label: 'Basic stretch',
     cmd: [{
       action: 'set-stretch',
-      arg: 1,
+      arg: Stretch.Basic,
     }],
     scopes: {
       global: {
@@ -477,7 +462,7 @@ var ExtensionConf = {
     label: 'Hybrid stretch',
     cmd: [{
       action: 'set-stretch',
-      arg: 2,
+      arg: Stretch.Hybrid,
     }],
     scopes: {
       global: {
@@ -502,7 +487,7 @@ var ExtensionConf = {
     label: 'Thin borders only',
     cmd: [{
       action: 'set-stretch',
-      arg: 3,
+      arg: Stretch.Conditional,
     }],
     scopes: {
       global: {
@@ -527,7 +512,7 @@ var ExtensionConf = {
     label: 'Default',
     cmd: [{
       action: 'set-stretch',
-      arg: -1,
+      arg: Stretch.Default,
     }],
     scopes: {
       site: {
@@ -543,7 +528,7 @@ var ExtensionConf = {
     label: 'Left',
     cmd: [{
       action: 'set-alignment',
-      arg: 'left'
+      arg: VideoAlignment.Left,
     }],
     scopes: {
       global: {
@@ -565,7 +550,7 @@ var ExtensionConf = {
     label: 'Center',
     cmd: [{
       action: 'set-alignment',
-      arg: 'center'
+      arg: VideoAlignment.Center,
     }],
     scopes: {
       global: {
@@ -587,7 +572,7 @@ var ExtensionConf = {
     label: 'Right',
     cmd: [{
       action: 'set-alignment',
-      arg: 'right'
+      arg: VideoAlignment.Right
     }],
     scopes: {
       global: {
@@ -609,7 +594,7 @@ var ExtensionConf = {
     label: 'Default',
     cmd: [{
       action: 'set-alignment',
-      arg: 'default'
+      arg: VideoAlignment.Default
     }],
     scopes: {
       site: {
@@ -626,7 +611,7 @@ var ExtensionConf = {
     label: 'Enable',
     cmd: [{
       action: 'set-extension-mode',
-      arg: 'blacklist',
+      arg: ExtensionMode.Enabled,
       persistent: true,
     }],
     scopes: {
@@ -642,7 +627,7 @@ var ExtensionConf = {
     label: 'On whitelist only',
     cmd: [{
       action: 'set-extension-mode',
-      arg: 'whitelist',
+      arg: ExtensionMode.Whitelist,
       persistent: true,
     }],
     scopes: {
@@ -655,7 +640,7 @@ var ExtensionConf = {
     label: 'Default',
     cmd: [{
       action: 'set-extension-mode',
-      arg: 'default',
+      arg: ExtensionMode.Default,
       persistent: true,
     }],
     scopes: {
@@ -668,7 +653,7 @@ var ExtensionConf = {
     label: 'Disable',
     cmd: [{
       action: 'set-extension-mode',
-      arg: 'disabled',
+      arg: ExtensionMode.Disabled,
       persistent: true,
     }],
     scopes: {
@@ -684,7 +669,7 @@ var ExtensionConf = {
     label: 'Enabled',
     cmd: [{
       action: 'set-autoar-mode',
-      arg: 'blacklist',
+      arg: ExtensionMode.Enabled,
       persistent: true,
     }],
     scopes: {
@@ -700,7 +685,7 @@ var ExtensionConf = {
     label: 'On whitelist only',
     cmd: [{
       action: 'set-autoar-mode',
-      arg: 'whitelist',
+      arg: ExtensionMode.Whitelist,
       persistent: true,
     }],
     scopes: {
@@ -713,7 +698,7 @@ var ExtensionConf = {
     label: 'Default',
     cmd: [{
       action: 'set-autoar-mode',
-      arg: 'default',
+      arg: ExtensionMode.Default,
       persistent: true,
     }],
     scopes: {
@@ -726,7 +711,7 @@ var ExtensionConf = {
     label: 'Disable',
     cmd: [{
       action: 'set-autoar-mode',
-      arg: 'disabled',
+      arg: ExtensionMode.Disabled,
       persistent: true,
     }],
     scopes: {
@@ -770,18 +755,36 @@ var ExtensionConf = {
   //    * disabled    — never allow
   // 
   sites: {
+    "@global": {                        // global defaults. Possible options will state site-only options in order
+                                        // to avoid writing this multiple times. Tags:
+                                        //      #g — only available in @global
+                                        //      #s   — only available for specific site
+      mode: ExtensionMode.Enabled,      //  How should extension work:
+                                        //       'enabled'   - work everywhere except blacklist
+                                        //       'whitelist' - only work on whitelisted sites (#g)
+                                        //       'disabled'  - work nowhere
+                                        //       'basic'     - (Possible future use)
+                                        //       'default'   - follow global rules (#s)
+      autoar: ExtensionMode.Enabled,    //  Should we try to automatically detect aspect ratio? 
+                                        //  Options: 'enabled', 'whitelist' (#g), 'default' (#s), 'disabled'
+      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
+
+    },
     "www.youtube.com" : {
-      status: "enabled",                // should extension work on this site?
+      mode: ExtensionMode.Enabled,
-      arStatus: "default",              // should we enable autodetection
+      autoar: ExtensionMode.Enabled,
-      statusEmbedded: "enabled",        // should extension work for this site when embedded on other sites?
+      autoarFallback: ExtensionMode.Enabled,
       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.
     },
     "www.netflix.com" : {
-      status: "enabled",
+      mode: ExtensionMode.Enabled,
-      arStatus: currentBrowser.firefox ? "default" : "disabled",
+      autoar: currentBrowser.firefox ? ExtensionMode.Enabled : ExtensionMode.Disabled,     
-      statusEmbedded: "enabled",
       override: false,
       type: 'official'
     },

src/ext/lib/ActionHandler.js

@@ -210,13 +210,13 @@ class ActionHandler {
             this.settings.save();
           } else if (action.scope === 'global') {
             if (cmd.action === "set-stretch") {
-              this.settings.active.stretch.initialMode = cmd.arg;
+              this.settings.active.site['@global'].stretch = cmd.arg;
             } else if (cmd.action === "set-alignment") {
-              this.settings.active.miscSettings.videoAlignment = cmd.arg;
+              this.settings.active.site['@global'].videoAlignment = cmd.arg;
             } else if (cmd.action === "set-extension-mode") {
-              this.settings.active.extensionMode = cmd.arg;
+              this.settings.active.sites['@global'] = cmd.arg;
             } else if (cmd.action === "set-autoar-mode") {
-              this.settings.active.arDetect.mode.arStatus = cmd.arg;
+              this.settings.active.site['@global'].autoar.arStatus = cmd.arg;
             }
             this.settings.save();
           }

src/ext/lib/Settings.js

@@ -237,20 +237,20 @@ class Settings {
     try {
       // if site-specific settings don't exist for the site, we use default mode:
       if (! this.active.sites[site]) {
-        if (this.active.extensionMode === "blacklist") {
+        if (this.active.sites['@global'] === "blacklist") {
-          return ExtensionMode.Full;
+          return ExtensionMode.Enabled;
         } else {
           return this.active.basicExtensionMode === "blacklist" ? ExtensionMode.Basic : ExtensionMode.Disabled;
         }
       }
 
       if (this.active.sites[site].status === 'enabled') {
-        return ExtensionMode.Full;
+        return ExtensionMode.Enabled;
       } else if (this.active.sites[site].status === 'basic') {
         return ExtensionMode.Basic;
       } else if (this.active.sites[site].status === 'default') {
-        if (this.active.extensionMode === "blacklist") {
+        if (this.active.sites['@global'] === "blacklist") {
-          return ExtensionMode.Full;
+          return ExtensionMode.Enabled;
         } else {
           return this.active.basicExtensionMode === "blacklist" ? ExtensionMode.Basic : ExtensionMode.Disabled;
         }
@@ -289,12 +289,12 @@ class Settings {
     try{
     // if site is not defined, we use default mode:
     if (! this.active.sites[site]) {
-      return this.active.extensionMode === "blacklist";
+      return this.active.sites['@global'] === "blacklist";
     }
 
-    if(this.active.extensionMode === "blacklist") {
+    if(this.active.sites['@global'] === "blacklist") {
       return this.active.sites[site].status !== "disabled";
-    } else if (this.active.extensionMode === "whitelist") {
+    } else if (this.active.sites['@global'] === "whitelist") {
       return this.active.sites[site].status === "enabled";
     } else {
       return false;
@@ -308,7 +308,7 @@ class Settings {
   }
 
   extensionEnabled(){
-    return this.active.extensionMode !== 'disabled'
+    return this.active.sites['@global'] !== 'disabled'
   }
 
   extensionEnabledForSite(site) {
@@ -334,19 +334,19 @@ class Settings {
 
       console.log("[Settings::canStartAutoAr] ----------------\nCAN WE START THIS EXTENSION ON SITE", site,
                   "?\n\nsettings.active.sites[site]=", this.active.sites[site],
-                  "\nExtension mode?", this.active.arDetect.mode,
+                  "\nExtension mode?", this.active.site['@global'].autoar,
                   "\nCan extension be started?", csar
                  );
     }
 
     // if site is not defined, we use default mode:    
     if (! this.active.sites[site]) {
-      return this.active.arDetect.mode === "blacklist";
+      return this.active.site['@global'].autoar === "blacklist";
     }
 
-    if (this.active.arDetect.mode === "blacklist") {
+    if (this.active.site['@global'].autoar === "blacklist") {
       return this.active.sites[site].arStatus !== "disabled";
-    } else if (this.active.arDetect.mode === "whitelist") {
+    } else if (this.active.site['@global'].autoar === "whitelist") {
       return this.active.sites[site].arStatus === "enabled";
     } else {
       return false;
@@ -368,7 +368,7 @@ class Settings {
     if (site.stretch) {
       return site.stretch;
     }
-    return this.active.stretch.initialMode;
+    return this.active.site['@global'].stretch;
   }
 
   getDefaultVideoAlignment(site) {
@@ -377,7 +377,7 @@ class Settings {
     if (site.videoAlignment) {
       return site.videoAlignment;
     }
-    return this.active.miscSettings.videoAlignment;
+    return this.active.site['@global'].videoAlignment;
   }
 }
 

src/ext/lib/comms/CommsServer.js

@@ -225,14 +225,14 @@ class CommsServer {
       }
       Promise.resolve(ret);
     } else if (message.cmd === "autoar-enable") {
-      this.settings.active.arDetect.mode = "blacklist";
+      this.settings.active.site['@global'].autoar = "blacklist";
       this.settings.save();
       this.sendToAll({cmd: "reload-settings", sender: "uwbg"})
       if(Debug.debug){
         console.log("[uw-bg] autoar set to enabled (blacklist). evidenz:", this.settings.active);
       }
     } else if (message.cmd === "autoar-disable") {
-      this.settings.active.arDetect.mode = "disabled";
+      this.settings.active.site['@global'].autoar = "disabled";
       if(message.reason){
         this.settings.active.arDetect.disabledReason = message.reason;
       } else {
@@ -268,14 +268,14 @@ class CommsServer {
       sendResponse({extensionConf: JSON.stringify(this.settings.active), site: this.getCurrentTabHostname()});
       // return true;
     } else if (message.cmd === "autoar-enable") {
-      this.settings.active.arDetect.mode = "blacklist";
+      this.settings.active.site['@global'].autoar = "blacklist";
       this.settings.save();
       this.sendToAll({cmd: "reload-settings", sender: "uwbg"})
       if(Debug.debug){
         console.log("[uw-bg] autoar set to enabled (blacklist). evidenz:", this.settings.active);
       }
     } else if (message.cmd === "autoar-disable") {
-      this.settings.active.arDetect.mode = "disabled";
+      this.settings.active.site['@global'].autoar = "disabled";
       if(message.reason){
         this.settings.active.arDetect.disabledReason = message.reason;
       } else {

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

@@ -41,7 +41,7 @@ class PlayerData {
     this.dimensions = undefined;
     this.overlayNode = undefined;
 
-    if (this.extensionMode === ExtensionMode.Full) {
+    if (this.extensionMode === ExtensionMode.Enabled) {
       this.getPlayerDimensions();
     }
     this.startChangeDetection();
@@ -213,7 +213,7 @@ class PlayerData {
   }
 
   ghettoWatcher(){
-    if (this.extensionMode === ExtensionMode.Full) {
+    if (this.extensionMode === ExtensionMode.Enabled) {
       this.ghettoWatcherFull();
       this.scheduleGhettoWatcher();
     } else if (this.extensionMode === ExtensionMode.Basic) {

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

@@ -4,7 +4,7 @@ import Stretcher from './Stretcher';
 import Zoom from './Zoom';
 import PlayerData from '../video-data/PlayerData';
 import ExtensionMode from '../../../common/enums/extension-mode';
-import StretchMode from '../../../common/enums/stretch-mode';
+import StretchMode from '../../../common/enums/stretch.enum';
 
 if(Debug.debug)
   console.log("Loading: Resizer.js");
@@ -88,7 +88,7 @@ class Resizer {
       }
     }
 
-    if (this.extensionMode !== ExtensionMode.Full && !PlayerData.isFullScreen() && ar !== 'reset') {
+    if (this.extensionMode !== ExtensionMode.Enabled && !PlayerData.isFullScreen() && ar !== '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; 
@@ -99,21 +99,21 @@ class Resizer {
       this.videoData.destroy();
     }
 
-    if (this.extensionMode !== ExtensionMode.Full || PlayerData.isFullScreen()) {
+    if (this.extensionMode !== ExtensionMode.Enabled || PlayerData.isFullScreen()) {
       this.startCssWatcher();
     }
     this.cssWatcherIncreasedFrequencyCounter = 20;
 
     // // pause AR on basic stretch, unpause when using other mdoes
     // fir sine reason unpause doesn't unpause. investigate that later
-    // if (this.stretcher.mode === StretchMode.BASIC) {
+    // if (this.stretcher.mode === StretchMode.Basic) {
     //   this.conf.arDetector.pause();
     // } else {
     //   this.conf.arDetector.unpause();
     // }
 
     // do stretch thingy
-    if (this.stretcher.mode === StretchMode.NO_STRETCH || this.stretcher.mode === StretchMode.CONDITIONAL){
+    if (this.stretcher.mode === StretchMode.NoStretch || this.stretcher.mode === StretchMode.Conditional){
       var stretchFactors = this.scaler.calculateCrop(ar);
 
       if(! stretchFactors || stretchFactors.error){
@@ -125,12 +125,12 @@ class Resizer {
         }
         return;
       }
-      if(this.stretcher.mode === StretchMode.CONDITIONAL){
+      if(this.stretcher.mode === StretchMode.Conditional){
          this.stretcher.applyConditionalStretch(stretchFactors, ar);
       }
-    } else if (this.stretcher.mode === StretchMode.HYBRID) {
+    } else if (this.stretcher.mode === StretchMode.Hybrid) {
       var stretchFactors = this.stretcher.calculateStretch(ar);
-    } else if (this.stretcher.mode === StretchMode.BASIC) {
+    } else if (this.stretcher.mode === StretchMode.Basic) {
       var stretchFactors = this.stretcher.calculateBasicStretch();
     }
 
@@ -225,7 +225,7 @@ class Resizer {
   }
   
   scheduleCssWatcher(timeout, force_reset) {
-    if (this.destroyed || (this.extensionMode !== ExtensionMode.Full && !PlayerData.isFullScreen())) {
+    if (this.destroyed || (this.extensionMode !== ExtensionMode.Enabled && !PlayerData.isFullScreen())) {
       return;
     }
 
@@ -275,7 +275,7 @@ class Resizer {
   }
 
   reset(){
-    this.setStretchMode(StretchMode.NO_STRETCH);
+    this.setStretchMode(StretchMode.NoStretch);
     this.zoom.setZoom(1);
     this.resetPan();
     this.setAr('reset');
@@ -313,7 +313,7 @@ class Resizer {
   }
 
   resetStretch(){
-    this.stretcher.mode = StretchMode.NO_STRETCH;
+    this.stretcher.mode = StretchMode.NoStretch;
     this.restore();
   }
 
@@ -323,7 +323,7 @@ class Resizer {
   computeOffsets(stretchFactors){
 
     if (Debug.debug) {
-      console.log("[Resizer::_res_computeOffsets] <rid:"+this.resizerId+"> video will be aligned to ", this.settings.active.miscSettings.videoAlignment);
+      console.log("[Resizer::_res_computeOffsets] <rid:"+this.resizerId+"> video will be aligned to ", this.settings.active.site['@global'].videoAlignment);
     }
 
     const wdiff = this.conf.player.dimensions.width - this.conf.video.offsetWidth;

src/options/controls-settings/add-edit-action-popup.vue

@@ -99,7 +99,7 @@
 </template>
 
 <script>
-import StretchMode from '../../common/enums/stretch-mode';
+import StretchMode from '../../common/enums/stretch.enum';
 import KeyboardShortcutParser from '../../common/js/KeyboardShortcutParser';
 import CommandChain from './command-builder/command-chain';
 import CommandAddEdit from './command-builder/command-add-edit';

src/options/controls-settings/command-builder/command-add-edit.vue

@@ -78,7 +78,7 @@
 
 <script>
 import ActionList from '../../../ext/conf/ActionList';
-import StretchMode from '../../../common/enums/stretch-mode';
+import StretchMode from '../../../common/enums/stretch.enum';
 
 export default {
   data () {

src/options/controls-settings/controls-settings.vue

@@ -81,7 +81,7 @@
 
 <script>
 import Button from '../../common/components/button';
-import StretchMode from '../../common/enums/stretch-mode';
+import StretchMode from '../../common/enums/stretch.enum';
 import ActionAlt from '../../common/components/action-alt';
 
 export default {

src/options/general-settings.vue

@@ -5,18 +5,18 @@
     </div>
     <div class="flex flex-row button-box">
       <Button label="Always"
-              :selected="settings.active.extensionMode === 'blacklist'"
+              :selected="settings.active.sites['@global'] === ExtensionMode.Enabled"
-              @click.native="setDefaultExtensionMode('blacklist')"
+              @click.native="setDefaultExtensionMode(ExtensionMode.Enabled)"
       > 
       </Button>
       <Button label="On whitelisted sites"
-              :selected="settings.active.extensionMode === 'whitelist'"
+              :selected="settings.active.sites['@global'] === ExtensionMode.Whitelist"
-              @click.native="setDefaultExtensionMode('whitelist')"
+              @click.native="setDefaultExtensionMode(ExtensionMode.Whitelist)"
       >
       </Button>
       <Button label="Never"
-              :selected="settings.active.extensionMode === 'disabled'"
+              :selected="settings.active.sites['@global'] === ExtensionMode.Disabled"
-              @click.native="setDefaultExtensionMode('disabled')"
+              @click.native="setDefaultExtensionMode(ExtensionMode.Disabled)"
       >
       </Button>
     </div>
@@ -31,15 +31,15 @@
     </div>
     <div class="flex flex-row button-box">
       <Button label="Always" 
-              :selected="settings.active.arDetect.mode === 'blacklist'"
+              :selected="settings.active.site['@global'].autoar === ExtensionMode.Enabled"
-              @click.native="setDefaultAutodetectionMode('blacklist')"> 
+              @click.native="setDefaultAutodetectionMode(ExtensionMode.Enabled)"> 
       </Button>
       <Button label="On whitelisted sites"
-              :selected="settings.active.arDetect.mode === 'whitelist'"
+              :selected="settings.active.site['@global'].autoar === ExtensionMode.Whitelist"
-              @click.native="setDefaultAutodetectionMode('whitelist')">
+              @click.native="setDefaultAutodetectionMode(ExtensionMode.Whitelist)">
       </Button>
       <Button label="Never"
-              :selected="settings.active.arDetect.mode === 'disabled'"
+              :selected="settings.active.site['@global'].autoar === ExtensionMode.Disabled"
               @click.native="setDefaultAutodetectionMode('never')">
       </Button>
     </div>
@@ -57,16 +57,16 @@
     </div>
     <div class="flex flex-row button-box">
       <Button label="Left" 
-              :selected="settings.active.miscSettings.videoAlignment === 'left'"
+              :selected="settings.active.site['@global'].videoAlignment === VideoAlignment.Left"
-              @click.native="setDefaultvideoAlignment('left')"> 
+              @click.native="setDefaultvideoAlignment(VideoAlignment.Left)"> 
       </Button>
       <Button label="Center"
-              :selected="settings.active.miscSettings.videoAlignment === 'center'"
+              :selected="settings.active.site['@global'].videoAlignment === VideoAlignment.Center"
-              @click.native="setDefaultvideoAlignment('center')">
+              @click.native="setDefaultvideoAlignment(VideoAlignment.Center)">
       </Button>
       <Button label="Right"
-              :selected="settings.active.miscSettings.videoAlignment === 'right'"
+              :selected="settings.active.site['@global'].videoAlignment === VideoAlignment.Right"
-              @click.native="setDefaultvideoAlignment('right')">
+              @click.native="setDefaultvideoAlignment(VideoAlignment.Right)">
       </Button>
     </div>
 
@@ -75,20 +75,20 @@
     </div>
     <div class="flex flex-row button-box">
       <Button label="Don't stretch"
-              :selected="settings.active.stretch.initialMode === StretchMode.NO_STRETCH"
+              :selected="settings.active.site['@global'].stretch === StretchMode.NoStretch"
-              @click.native="setDefaultStretchingMode(StretchMode.NO_STRETCH)"> 
+              @click.native="setDefaultStretchingMode(StretchMode.NoStretch)"> 
       </Button>
       <Button label="Basic stretch"
-              :selected="settings.active.stretch.initialMode === StretchMode.BASIC"
+              :selected="settings.active.site['@global'].stretch === StretchMode.Basic"
-              @click.native="setDefaultStretchingMode(StretchMode.BASIC)">
+              @click.native="setDefaultStretchingMode(StretchMode.Basic)">
       </Button>
       <Button label="Hybrid stretch"
-              :selected="settings.active.stretch.initialMode === StretchMode.HYBRID"
+              :selected="settings.active.site['@global'].stretch === StretchMode.Hybrid"
-              @click.native="setDefaultStretchingMode(StretchMode.HYBRID)">
+              @click.native="setDefaultStretchingMode(StretchMode.Hybrid)">
       </Button>
       <Button label="Thin borders only"
-              :selected="settings.active.stretch.initialMode === StretchMode.CONDITIONAL"
+              :selected="settings.active.site['@global'].stretch === StretchMode.Conditional"
-              @click.native="setDefaultStretchingMode(StretchMode.CONDITIONAL)"
+              @click.native="setDefaultStretchingMode(StretchMode.Conditional)"
       >
       </Button>
     </div>
@@ -120,7 +120,9 @@
 
 <script>
 import Button from '../common/components/button';
-import StretchMode from '../common/enums/stretch-mode';
+import StretchMode from '../common/enums/stretch.enum';
+import ExtensionMode from '../common/enums/extension-mode.enum';
+import VideoAlignment from '../common/enums/video-alignment.enum';
 
 export default {
   components: {
@@ -129,6 +131,8 @@ export default {
   data () {
     return {
       StretchMode: StretchMode,
+      ExtensionMode: ExtensionMode,
+      VideoAlignment: VideoAlignment,
       stretchThreshold: 0,
     }
   },
@@ -139,11 +143,11 @@ export default {
   },
   methods: {
     setDefaultAutodetectionMode(mode) {
-      this.settings.active.arDetect.mode = mode;
+      this.settings.active.site['@global'].autoar = mode;
       this.settings.save();
     },
     setDefaultExtensionMode(mode) {
-      this.settings.active.extensionMode = mode;
+      this.settings.active.sites['@global'] = mode;
       this.settings.save();
     },
     setDefaultvideoAlignment(mode) {
@@ -151,7 +155,7 @@ export default {
       this.settings.save();
     },
     setDefaultStretchingMode(mode) {
-      this.settings.active.stretch.initialMode = mode;
+      this.settings.active.site['@global'].stretch = mode;
       this.settings.save();
     },
     updateStretchTreshold(newTreshold) {

src/popup/App.vue

@@ -281,19 +281,6 @@ html, body {
   font-variant: normal;
 }
 
-.left-side {
-  display: inline-block;
-  width: 39%;
-  float: left;
-  font-size: 1.6em;
-}
-
-.right-side {
-  display: inline-block;
-  width: 60%;
-  float: right;
-}
-
 .menu-item {
   padding-left: 15px;
   padding-top: 5px;

src/popup/js/ExecAction.js

@@ -33,13 +33,13 @@ class ExecAction {
         this.settings.save();
       } else if (scope === 'global') {
         if (cmd.action === "set-stretch") {
-          this.settings.active.stretch.initialMode = cmd.arg;
+          this.settings.active.site['@global'].stretch = cmd.arg;
         } else if (cmd.action === "set-alignment") {
-          this.settings.active.miscSettings.videoAlignment = cmd.arg;
+          this.settings.active.site['@global'].videoAlignment = cmd.arg;
         } else if (cmd.action === "set-extension-mode") {
-          this.settings.active.extensionMode = cmd.arg;
+          this.settings.active.sites['@global'] = cmd.arg;
         } else if (cmd.action === "set-autoar-mode") {
-          this.settings.active.arDetect.mode.arStatus = cmd.arg;
+          this.settings.active.site['@global'].autoar.arStatus = cmd.arg;
         }
         this.settings.save();
       }

src/popup/panels/SitePanel.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="w100 flex flex-column">
+    <div v-if="true"
+         class="w100"
+    >
+
+      <!-- ENABLE EXTENSION -->
+      <div class="label">Enable extension {{scope === 'site' ? 'for this site' : ''}}:</div>
+      <div class="flex flex-row flex-wrap">
+        <template v-for="action of siteActions">
+          <ShortcutButton v-if="action.cmd.length === 1 && action.cmd[0].action === 'set-extension-mode'"
+                          class="flex button"
+                          :class="{'setting-selected': getDefault('set-extension-mode') === action.cmd[0].arg}"
+                          :label="(action.scopes[this.scope] && action.scopes[this.scope].label) ? action.scopes[this.scope].label : action.label"
+                          :shortcut="parseShortcut(action)"
+                          @click.native="execAction(action)"
+          >
+          </ShortcutButton>
+        </template>
+      </div>
+    </div>
+
+    <!-- ENABLE AUTODETECTION -->
+    <div v-if="true"
+         class="w100"
+    >
+      <div class="label">Enable autodetection {{scope === 'site' ? 'for this site' : ''}}:</div>
+      <div class="warning"><small>Note: some sites implement restrictions that make autodetection a fair bit less reliable in Firefox and outright impossible in anything else.</small></div>
+      <div class="flex flex-row flex-wrap">
+        <template v-for="action of siteActions">
+          <ShortcutButton v-if="action.cmd.length === 1 && action.cmd[0].action === 'set-autoar-mode'"
+                          class="flex button"
+                          :class="{'setting-selected': getDefault('set-autoar-mode') === action.cmd[0].arg}"
+                          :label="(action.scopes[this.scope] && action.scopes[this.scope].label) ? action.scopes[this.scope].label : action.label"
+                          :shortcut="parseShortcut(action)"
+                          @click.native="execAction(action)"
+          >
+          </ShortcutButton>
+        </template>
+      </div>
+    </div>
+
+    <!-- DEFAULT SETTINGS -->
+    <div v-if="true">
+      <div class="label">Default stretching mode:</div>
+      <div class="flex flex-row flex-wrap">
+        <template v-for="action of siteActions">
+          <ShortcutButton v-if="action.cmd.length === 1 && action.cmd[0].action === 'set-stretch'"
+                          class="flex b3 button"
+                          :class="{'setting-selected': getDefault('set-stretch') === action.cmd[0].arg}"
+                          :label="(action.scopes[this.scope] && action.scopes[this.scope].label) ? action.scopes[this.scope].label : action.label"
+                          :shortcut="parseShortcut(action)"
+                          @click.native="execAction(action)"
+          >
+          </ShortcutButton>
+        </template>
+      </div>
+    </div>
+
+    <div v-if="true">
+      <div class="label">Video alignment:</div>
+      <div class="flex flex-row flex-wrap">
+        <template v-for="action of settings.active.actions">
+          <ShortcutButton v-if="action.scopes[this.scope] && action.scopes[this.scope].show && action.cmd.length === 1 && action.cmd[0].action === 'set-alignment'"
+                          class="flex b3 button"
+                          :class="{'setting-selected': getDefault('set-alignment') === action.cmd[0].arg}"
+                          :label="(action.scopes[this.scope] && action.scopes[this.scope].label) ? action.scopes[this.scope].label : action.label"
+                          :shortcut="parseShortcut(action)"
+                          @click.native="execAction(action)"
+                          >
+          </ShortcutButton>
+        </template>
+      </div>
+    </div>
+
+    <div v-if="true">
+      <div class="label">Multi-command actions:</div>
+      <div class="flex flex-row flex-wrap">
+        <template v-for="action of settings.active.actions">
+          <ShortcutButton v-if="action.scopes[this.scope] && action.scopes[this.scope].show && action.cmd.length > 1"
+                          class="flex b3 button"
+                          :label="(action.scopes[this.scope] && action.scopes[this.scope].label) ? action.scopes[this.scope].label : action.label"
+                          :shortcut="parseShortcut(action)"
+                          @click.native="execAction(action)"
+                          >
+          </ShortcutButton>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ExecAction from '../js/ExecAction'
+import KeyboardShortcutParser from '../../common/js/KeyboardShortcutParser'
+import ShortcutButton from '../../common/components/shortcut-button'
+
+export default {
+  data() {
+    return {
+    }
+  },
+  props: [
+    'settings',
+    'frame',
+    'scope',
+  ],
+  created() {
+    this.exec = new ExecAction(this.settings);
+  },
+  components: {
+    ShortcutButton,
+  },
+  computed: {
+    siteActions: function() {
+      return this.settings.active.actions.filter(x => x.scopes[this.scope] && x.scopes[this.scope].show);
+    }
+  },
+  methods: {
+    execAction(action) {
+      this.exec.exec(action, this.scope, this.frame);
+    },
+    getDefault(action) {
+
+    },
+    parseShortcut(action) {
+      if (! action.scopes[this.scope].shortcut) {
+        return '';
+      }
+      return KeyboardShortcutParser.parseShortcut(action.scopes[this.scope].shortcut[0]);
+    },
+  }
+}
+</script>
+
+<style>
+
+</style>

src/res/popup/js/popup.js

@@ -321,11 +321,11 @@ function configureGlobalTab() {
   processButtonsForPopupCategory(GlobalPanel.elements.stretchSettings, stretchButtons);
   processButtonsForPopupCategory(GlobalPanel.elements.alignmentSettings, alignButtons);
 
-  selectButton('set-stretch', settings.active.stretch.initialMode, GlobalPanel.elements.stretchSettings.buttons);
+  selectButton('set-stretch', settings.active.site['@global'].stretch, GlobalPanel.elements.stretchSettings.buttons);
-  selectButton('set-alignment', settings.active.miscSettings.videoAlignment, GlobalPanel.elements.alignmentSettings.buttons);
+  selectButton('set-alignment', settings.active.site['@global'].videoAlignment, GlobalPanel.elements.alignmentSettings.buttons);
 
-  selectButton('set-extension-mode', settings.active.extensionMode, GlobalPanel.elements.extensionSettings.buttons);
+  selectButton('set-extension-mode', settings.active.sites['@global'], GlobalPanel.elements.extensionSettings.buttons);
-  selectButton('set-extension-mode', settings.active.arDetect.mode, GlobalPanel.elements.autoarSettings.buttons);
+  selectButton('set-extension-mode', settings.active.site['@global'].autoar, GlobalPanel.elements.autoarSettings.buttons);
 }
 
 function configureSitesTab(site) {