add video settings placeholder to the UI

src/common/mixins/ComputeActionsMixin.js

@@ -1,7 +1,7 @@
 export default {
   computed: {
     scopeActions: function() {
-      return this.settings.active.actions.filter(x => {
+      return this.settings?.active.actions?.filter(x => {
         if (! x.scopes) {
           console.error('This action does not have a scope.', x);
           return false;

src/csui/PlayerUiComponent.vue

@@ -2,24 +2,49 @@
   <div class="uw-hover uv-hover-trigger-region">
     TEST CONTENT
   </div>
-  <div class="uw-debug-info">
+  <div class="popup-panel">
-    <ResizerDebugPanel :debugData="debugData">
+    <div class="tab-row flex flex-row">
-    </ResizerDebugPanel>
+      <div class="tab">
+        todo: icon<br/>
+        Video options
+      </div>
+    </div>
+    <div>
+      <!-- Panel section -->
+      <template v-if="settingsInitialized">
+        <VideoSettings
+          :settings="settings"
+        ></VideoSettings>
+        <ResizerDebugPanel :debugData="debugData">
+        </ResizerDebugPanel>
+      </template>
+    </div>
   </div>
 </template>
 
 <script>
+import VideoSettings from './PlayerUiPanels/VideoSettings.vue'
 import { mapState } from 'vuex';
 import Icon from '../common/components/Icon';
 import ResizerDebugPanel from './PlayerUiPanels/ResizerDebugPanelComponent';
+import BrowserDetect from '../ext/conf/BrowserDetect';
+import ExecAction from './ui-libs/ExecAction';
+import Logger from '../ext/lib/Logger';
+import Settings from '../ext/lib/Settings';
 
 export default {
   components: {
     Icon,
-    ResizerDebugPanel
+    ResizerDebugPanel, VideoSettings
   },
   data() {
     return {
+      // component properties
+      settings: {},
+      settingsInitialized: false,
+      execAction: new ExecAction(),
+      logger: null,
+
       uiVisible: true,
       debugData: {
         resizer: {},
@@ -56,9 +81,24 @@ export default {
       this.debugDataPrettified = JSON.stringify(this.debugData, null, 2);
     }
   },
-  created() {
+  async created() {
-    console.log("created!");
+    try {
-    console.log("store:", this.$store, this);
+      this.logger = new Logger();
+      await this.logger.init({
+          allowLogging: true,
+      });
+
+      this.settings = new Settings({afterSettingsSaved: this.updateConfig, logger: this.logger});
+      await this.settings.init();
+      this.settingsInitialized = true;
+
+      this.execAction.setSettings(this.settings);
+
+      console.log("created!");
+      console.log("store:", this.$store, this);
+    } catch (e) {
+      console.error('Failed to initiate ultrawidify player ui.', e);
+    }
   },
   methods: {
     getUrl(url) {
@@ -98,7 +138,7 @@ export default {
     background-color: #f00;
   }
 
-  .uw-debug-info {
+  .popup-panel {
     position: absolute;
 
     top: 10%;
@@ -116,12 +156,24 @@ export default {
     background-color: rgba(0,0,0,0.69);
     color: #fff;
 
-    overflow-y: scroll;
+    overflow-y: auto;
+
+    .tab {
+      display: block;
+      height: 42px;
+      font-size: 2.5rem;
+      background: rgb(87, 54, 26);
+    }
+    .tab:hover {
+      background-color: #f00;
+    }
   }
 
   pre {
     white-space: pre-wrap;
   }
+
+
 }
 
 

src/csui/PlayerUiPanels/VideoSettings.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="" style="padding-bottom: 20px">
+    sample text<br/><br/>
+    <br/>
+    <h1>Crop video:</h1>
+
+  </div>
+</template>
+
+<script>
+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 ExecAction from '../ui-libs/ExecAction';
+import BrowserDetect from '../../ext/conf/BrowserDetect';
+
+export default {
+  data() {
+    return {
+      scope: 'page',
+      CropModePersistence: CropModePersistence,
+    }
+  },
+  mixins: [
+    // ComputeActionsMixin
+  ],
+  props: [
+    'settings',
+    'frame',
+    'zoom',
+    'cropModePersistence',
+  ],
+  created() {
+    // this.exec = new ExecAction(this.settings);
+  },
+  components: {
+    // ShortcutButton,
+  },
+  computed: {
+    // logarithmicZoom: function(){
+    //   return Math.log2(this.zoom);
+    // }
+  },
+  methods: {
+    async openOptionsPage() {
+      BrowserDetect.runtime.openOptionsPage();
+    },
+    execAction(action) {
+      // this.exec.exec(action, 'page', this.frame);
+    },
+    parseShortcut(action) {
+      // if (! action.scopes.page.shortcut) {
+      //   return '';
+      // }
+      // return KeyboardShortcutParser.parseShortcut(action.scopes.page.shortcut[0]);
+    },
+    resetZoom() {
+      this.zoom = 1;
+    },
+    changeZoom(nz) {
+      nz = Math.pow(2, nz);
+      this.$emit('zoom-change', nz); 
+      // this.exec.exec(
+      //   {cmd: [{action: 'set-zoom', arg: nz}]},
+      //   'page',
+      //   this.frame
+      // );
+    }
+  }
+}
+</script>
+
+<style>
+.b3 {
+  width: 9rem;
+  padding-left: 0.33rem;
+  padding-right: 0.33rem;
+}
+.input-slider {
+  width: 480px;
+}
+.warning-lite {
+  padding-right: 16px;
+  padding-bottom: 16px;
+  padding-top: 8px;
+}
+
+</style>

src/csui/ui-libs/ExecAction.js

@@ -0,0 +1,81 @@
+import Comms from '../../ext/lib/comms/Comms';
+
+class ExecAction {
+  constructor(settings, site) {
+    this.settings = settings;
+    this.site = site;
+  }
+
+  setSettings(settings) {
+    this.settings = settings;
+  }
+  setSite(site) {
+    this.site = site;
+  }
+
+  async exec(action, scope, frame) {
+    for (var cmd of action.cmd) {
+      if (scope === 'page') {
+        const message = {
+          forwardToContentScript: true,
+          targetFrame: frame,
+          frame: frame,
+          cmd: cmd.action,
+          arg: cmd.arg,
+          customArg: cmd.customArg
+        }
+        Comms.sendMessage(message);
+      } else {
+
+        // set-ar-persistence sends stuff to content scripts as well (!)
+        // it's important to do that BEFORE the save step
+        if (cmd.action === 'set-ar-persistence') {
+          // even when setting global defaults, we only send message to the current tab in
+          // order to avoid problems related to 
+          const message = {
+            forwardToActive: true,
+            targetFrame: frame,
+            frame: frame,
+            cmd: cmd.action,
+            arg: cmd.arg,
+          }
+          // this hopefully delays settings.save() until current crops are saved on the site
+          // and thus avoid any fucky-wuckies
+          await Comms.sendMessage(message);
+        }
+
+        let site = this.site;
+        if (scope === 'global') {
+          site = '@global';
+        } else if (!this.site) {
+          site = window.location.hostname;
+        }
+
+        if (scope === 'site' && !this.settings.active.sites[site]) {
+          this.settings.active.sites[site] = this.settings.getDefaultOption();
+        }
+
+        if (cmd.action === "set-stretch") {
+          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") {
+          this.settings.active.sites[site].mode = cmd.arg;
+        } else if (cmd.action === "set-autoar-mode") {
+          this.settings.active.sites[site].autoar = cmd.arg;
+        } else if (cmd.action === 'set-keyboard') {
+          this.settings.active.sites[site].keyboardShortcutsEnabled = cmd.arg;
+        } else if (cmd.action === 'set-ar-persistence') {
+          this.settings.active.sites[site]['cropModePersistence'] = cmd.arg;
+          this.settings.saveWithoutReload();
+        }
+
+        if (cmd.action !== 'set-ar-persistence') {
+          this.settings.save();
+        }
+      }
+    }
+  }
+}
+
+export default ExecAction;