Popups sorta work

src/ext/lib/Settings.js

@@ -3,6 +3,8 @@ import currentBrowser from '../conf/BrowserDetect';
 import ExtensionConf from '../conf/ExtensionConf';
 import ExtensionMode from '../../common/enums/extension-mode.enum';
 import ObjectCopy from '../lib/ObjectCopy';
+import Stretch from '../../common/enums/stretch.enum';
+import VideoAlignment from '../../common/enums/video-alignment.enum';
 
 class Settings {
 
@@ -13,14 +15,6 @@ class Settings {
     this.version = undefined;
     this.updateCallback = updateCallback;
 
-
-    console.log("chrome object:", chrome)
-    console.log("browser.storage", browser.storage)
-    console.log("browser object:", browser)
-    console.log("window.browser", window.browser)
-    console.log("ExtensionConf", ExtensionConf)
-
-
     const ths = this;
 
     if(currentBrowser.firefox) {
@@ -353,6 +347,22 @@ class Settings {
     }
   }
 
+  getDefaultOption(option) {
+    const allDefault = {
+      mode: ExtensionMode.Default,
+      autoar: ExtensionMode.Default,
+      autoarFallback: ExtensionMode.Default,
+      stretch: Stretch.Default,
+      videoAlignment: VideoAlignment.Default,
+    };
+
+    if (!option || allDefault[option] === undefined) {
+      return allDefault;
+    }
+    
+    return allDefault[option];
+  }
+
   getDefaultAr(site) {
     site = this.getSiteSettings(site);
 

src/popup/App.vue

@@ -74,6 +74,15 @@
 
       <!-- PANELS/CONTENT -->
       <div id="tab-content" class="flex-grow" style="max-width: 480px !important;">
+        <b>This is some debug stuff. Please remove before release.</b> Site: {{site.host}}<br/>
+        <small>NOTE: in case you're using nightly builds, this extension could be completely broken.
+        It's also possible that everything is getting logged excessively, which may result in 
+        degraded performance. If settings don't persist, check whether Debug.flushStorageSettings is set to true.</small>
+        <ShortcutButton class="button" 
+                    @click.native="settings.setDefaultSettings()"
+                    label="Wipe settings"
+         /> 
+    
         <VideoPanel v-if="settings && settings.active && selectedTab === 'video'"
                     class=""
                     :settings="settings"
@@ -118,7 +127,7 @@ export default {
     }
   },
   async created() {
-    this.settings.init();
+    await this.settings.init();
     this.port.onMessage.addListener( (m,p) => this.processReceivedMessage(m,p));
     this.execAction.setSettings(this.settings);
 

src/popup/js/ExecAction.js

@@ -1,13 +1,17 @@
 import Comms from '../../ext/lib/comms/Comms';
 
 class ExecAction {
-  constructor(settings) {
+  constructor(settings, site) {
     this.settings = settings;
+    this.site = site;
   }
 
   setSettings(settings) {
     this.settings = settings;
   }
+  setSite(site) {
+    this.site = site;
+  }
 
   exec(action, scope, frame) {
     for (var cmd of action.cmd) {
@@ -21,14 +25,24 @@ class ExecAction {
         }
         Comms.sendMessage(message);
       } else if (scope === 'site') {
+
+        let site = this.site;
+        if (!this.site) {
+          site = window.location.host;
+        }
+
+        if (!this.settings.active.sites[site]) {
+          this.settings.active.sites[site] = this.settings.getDefaultOption();
+        }
+
         if (cmd.action === "set-stretch") {
-          this.settings.active.sites[window.location.host].stretch = cmd.arg;
+          this.settings.active.sites[site].stretch = cmd.arg;
         } else if (cmd.action === "set-alignment") {
-          this.settings.active.sites[window.location.host].videoAlignment = cmd.arg;
+          this.settings.active.sites[site].videoAlignment = cmd.arg;
         } else if (cmd.action === "set-extension-mode") {
-          this.settings.active.sites[window.location.host].status = cmd.arg;
+          this.settings.active.sites[site].mode = cmd.arg;
         } else if (cmd.action === "set-autoar-mode") {
-          this.settings.active.sites[window.location.host].arStatus = cmd.arg;
+          this.settings.active.sites[site].autoar = cmd.arg;
         }
         this.settings.save();
       } else if (scope === 'global') {
@@ -37,9 +51,9 @@ class ExecAction {
         } else if (cmd.action === "set-alignment") {
           this.settings.active.sites['@global'].videoAlignment = cmd.arg;
         } else if (cmd.action === "set-extension-mode") {
-          this.settings.active.sites['@global'] = cmd.arg;
+          this.settings.active.sites['@global'].mode = cmd.arg;
         } else if (cmd.action === "set-autoar-mode") {
-          this.settings.active.sites['@global'].autoar.arStatus = cmd.arg;
+          this.settings.active.sites['@global'].autoar = cmd.arg;
         }
         this.settings.save();
       }

src/popup/panels/DefaultSettingsPanel.vue

@@ -1,16 +1,15 @@
 <template>
   <div class="w100 flex flex-column">
-    <div v-if="true"
+    <div v-if="settings && 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="button"
-                          :class="{'setting-selected': getDefault('set-extension-mode') === action.cmd[0].arg}"
+                          :class="{'setting-selected': getCurrent('mode') === action.cmd[0].arg }"
                           :label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[scope].label : action.label"
                           :shortcut="parseShortcut(action)"
                           @click.native="execAction(action)"
@@ -30,7 +29,7 @@
         <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}"
+                          :class="{'setting-selected': getCurrent('autoar') === action.cmd[0].arg}"
                           :label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[scope].label : action.label"
                           :shortcut="parseShortcut(action)"
                           @click.native="execAction(action)"
@@ -47,7 +46,7 @@
         <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}"
+                          :class="{'setting-selected': getCurrent('stretch') === action.cmd[0].arg}"
                           :label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[scope].label : action.label"
                           :shortcut="parseShortcut(action)"
                           @click.native="execAction(action)"
@@ -63,7 +62,7 @@
         <template v-for="action of settings.active.actions">
           <ShortcutButton v-if="action.scopes[scope] && action.scopes[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}"
+                          :class="{'setting-selected': getCurrent('videoAlignment') === action.cmd[0].arg}"
                           :label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[scope].label : action.label"
                           :shortcut="parseShortcut(action)"
                           @click.native="execAction(action)"
@@ -100,12 +99,13 @@ export default {
     return {
     }
   },
-  props: [
+  props: {
-    'settings',
+    settings: Object,
-    'scope',
+    scope: String,
-  ],
+    site: String,
+  },
   created() {
-    this.exec = new ExecAction(this.settings);
+    this.exec = new ExecAction(this.settings, this.site);
   },
   components: {
     ShortcutButton,
@@ -115,12 +115,43 @@ export default {
       return this.settings.active.actions.filter(x => x.scopes[this.scope] && x.scopes[this.scope].show);
     }
   },
+  watch: {
+    settings: {
+      deep: true,
+      handler: function(val) {
+        this.$forceUpdate();
+        this.exec.setSettings(val);
+      }
+    },
+    site: function(val){
+      this.exec.setSite(val);
+    }
+  },
   methods: {
     execAction(action) {
       this.exec.exec(action, this.scope);
     },
-    getDefault(action) {
+    getCurrent(option) {
+      if (!this.settings) {
+        return undefined;
+      }
 
+      let site;
+      if (this.scope === 'global') {
+        site = '@global'
+        this.site = site;
+      } else {
+        if (!this.site) {
+          return '';
+        }
+        site = this.site;
+      }
+      // console.log("SETTINGS FOR SITE", site, "option", option, JSON.parse(JSON.stringify(this.settings.active.sites)))
+      if (this.settings.active.sites[site]) {
+        return this.settings.active.sites[site][option];
+      } else {
+        return this.settings.getDefaultOption(option);
+      }
     },
     parseShortcut(action) {
       if (! action.scopes[this.scope].shortcut) {
@@ -133,5 +164,10 @@ export default {
 </script>
 
 <style>
-
+.button-selected {
+  background-color: "#fff"
+}
+.setting-selected {
+  background-color: #ffa;
+}
 </style>