UI fixes, re-implemented zoom

src/ext/conf/ActionList.js

@@ -101,7 +101,7 @@ var ActionList = {
       page: true
     }
   },
-  'set-zoom': {
+  'change-zoom': {
     name: 'Zoom',
     args: [{
       name: 'Zoom level increase/decrease',
@@ -112,6 +112,17 @@ var ActionList = {
       page: true,
     }
   },
+  'set-zoom': {
+    name: 'Set zoom level',
+    args: [{
+      name: 'Zoom level increase/decrease',
+      customArg: true,
+      hintHTML: '<small>Examples: 0.5 sets zoom to 50%, 1 sets zoom to 100%, 2 sets zoom to 200%. Don\'t use negative values unless you want to experience Australian youtube.</small>'
+    }],
+    scopes: {
+      page: true,
+    }
+  },
   'set-extension-mode': {
     name: 'Set extension mode',
     args: [{

src/ext/conf/ExtensionConf.js

@@ -329,7 +329,7 @@ var ExtensionConf = {
     name: 'Zoom in',
     label: 'Zoom',
     cmd: [{
-      action: 'set-zoom',
+      action: 'change-zoom',
       arg: 0.1
     }],
     scopes: {
@@ -353,7 +353,7 @@ var ExtensionConf = {
     name: 'Zoom out',
     label: 'Unzoom',
     cmd: [{
-      action: 'set-zoom',
+      action: 'change-zoom',
       arg: -0.1
     }],
     scopes: {

src/ext/lib/ActionHandler.js

@@ -184,8 +184,10 @@ class ActionHandler {
           if (action.scope === 'page') {
             if (cmd.action === "set-ar") {
               this.pageInfo.setAr(cmd.arg);
-            } else if (cmd.action === "set-zoom") {
+            } else if (cmd.action === "change-zoom") {
               this.pageInfo.zoomStep(cmd.arg);
+            } else if (cmd.action === "set-zoom") {
+              this.pageInfo.setZoom(cmd.arg);
             } else if (cmd.action === "set-stretch") {
               this.pageInfo.setStretchMode(cmd.arg);
             } else if (cmd.action === "toggle-pan") {

src/ext/lib/comms/CommsClient.js

@@ -84,7 +84,9 @@ class CommsClient {
       // todo: autoArStatus
       this.pageInfo.resumeProcessing(message.autoArStatus, message.playing);
     } else if (message.cmd === 'set-zoom') {
-      this.pageInfo.setZoom(message.zoom, true, message.playing);
+      this.pageInfo.setZoom(message.arg, true, message.playing);
+    } else if (message.cmd === 'change-zoom') {
+      this.pageInfo.zoomStep(message.arg, message.playing);
     } else if (message.cmd === 'mark-player') {
       this.pageInfo.markPlayer(message.name, message.color);
     } else if (message.cmd === 'unmark-player') {

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

@@ -39,10 +39,14 @@ class Zoom {
   }
 
   setZoom(scale, no_announce){
+    if (Debug.debug) {
+      console.log("[Zoom::setZoom] Setting zoom to", scale, "!");
+    }
+
     // NOTE: SCALE IS NOT LOGARITHMIC
-    if(scale < Math.pow(this.minScale)) {
+    if(scale < Math.pow(2, this.minScale)) {
       scale = this.minScale;
-    } else if (scale > Math.pow(this.maxScale)) {
+    } else if (scale > Math.pow(2, this.maxScale)) {
       scale = this.maxScale;
     }
 
@@ -55,8 +59,16 @@ class Zoom {
   }
 
   applyZoom(stretchFactors){
+    if (Debug.debug) {
+      console.log("[Zoom::setZoom] Applying zoom. Stretch factors pre:", stretchFactors, " —> scale:", this.scale);
+    }
+
     stretchFactors.xFactor *= this.scale;
     stretchFactors.yFactor *= this.scale;
+
+    if (Debug.debug) {
+      console.log("[Zoom::setZoom] Applying zoom. Stretch factors post:", stretchFactors);
+    }
   }
 }
 

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

@@ -43,6 +43,7 @@
       </div>
       <template v-for="(action, index) of settings.active.actions">
         <ActionAlt v-if="action.cmd.length === 1 && (
+                            action.cmd[0].action === 'change-zoom' ||
                             action.cmd[0].action === 'set-zoom' ||
                             action.cmd[0].action === 'set-pan' || 
                             action.cmd[0].action === 'pan' ||
@@ -59,6 +60,7 @@
       </div>
       <template v-for="(action, index) of settings.active.actions">
         <ActionAlt v-if="action.cmd.length > 1 || (
+                            action.cmd[0].action !== 'change-zoom' &&
                             action.cmd[0].action !== 'set-zoom' &&
                             action.cmd[0].action !== 'set-pan' &&
                             action.cmd[0].action !== 'pan' &&

src/popup/App.vue

@@ -6,14 +6,70 @@
 
      <!-- TABS/SIDEBAR -->
     <div id="tablist" class="left-side">
+      <div class="menu-item"
+           :class="{'selected-tab': selectedTab === 'extension'}"
+           @click="selectTab('extension')"
+      >
+        <div class="">
+          Extension settings
+        </div>
+        <div class="">
+        </div>
+      </div>
+      <div class="menu-item"
+           :class="{'selected-tab': selectedTab === 'site'}"
+           @click="selectTab('site')"
+      >
+        <div class="">
+          Site settings
+        </div>
+        <div class="">
+        </div>
+      </div>
+      <div class="menu-item"
+           :class="{'selected-tab': selectedTab === 'video'}"
+           @click="selectTab('video')"
+      >
+        <div class="">
+          Video settings
+        </div>
+        <div class="">
+        </div>
+        <div class="">
+          <div v-for="frame of activeFrames">
+          </div>
+        </div>
+      </div>
+      <div class="menu-item"
+           :class="{'selected-tab': selectedTab === 'about'}"
+           @click="selectTab('about')"
+      >
+       <div class="">
+          About
+        </div>
+        <div class="">
+        </div>
+      </div>
+      <div class="menu-item"
+           :class="{'selected-tab': selectedTab === 'beggathon'}"
+           @click="selectTab('beggathon')"
+      >
+        <div class="">
+          Donate
+        </div>
+        <div class="">
+        </div>
+      </div>
     </div>
 
      <!-- PANELS/CONTENT -->
     <div id="tab-content" class="right-side">
-      <VideoPanel v-if="settings && settings.active && true"
+      <VideoPanel v-if="settings && settings.active && selectedTab === 'video'"
                   class=""
                   :settings="settings"
                   :frame="selectedFrame"
+                  :zoom="currentZoom"
+                  @zoom-change="updateZoom($event)"
       >
       </VideoPanel>
     </div>
@@ -21,6 +77,9 @@
 </template>
 
 <script>
+import Debug from '../ext/conf/Debug';
+import BrowserDetect from '../ext/conf/BrowserDetect';
+import Comms from '../ext/lib/comms/Comms';
 import VideoPanel from './panels/VideoPanel';
 import Settings from '../ext/lib/Settings';
 
@@ -30,21 +89,162 @@ export default {
       selectedTab: 'video',
       selectedFrame: '__all',
       settings: {},
+      activeFrames: [],
+      port: BrowserDetect.firefox ? browser.runtime.connect({name: 'popup-port'}) : chrome.runtime.connect({name: 'popup-port'}),
+      comms: new Comms(),
+      frameStore: {},
+      frameStoreCount: 0,
+      site: null,
+      currentZoom: 1,
     }
   },
   async created() {
-    const ns = new Settings();
+    const ns = new Settings(undefined, () => this.updateConfig());
     await ns.init();
     this.settings = ns;
+    this.port.onMessage.addListener( (m,p) => this.processReceivedMessage(m,p));
   },
   components: {
     VideoPanel,
+  },
+  methods: {
+    selectTab(tab) {
+      this.selectedTab = tab;
+    },
+    selectFrame(frame) {
+      this.selectedFrame = frame;
+    },
+    processReceivedMessage(message, port) {
+      if (Debug.debug) {
+        console.log("[popup.js] received message", message);
+      }
+
+      if(message.cmd === 'set-current-site'){
+        if (this.site) {
+          if (!site.host) {
+            // dunno why this fix is needed, but sometimes it is
+            this.site.host = site.tabHostname;
+          }
+        }
+        if (!this.site || this.site.host !== message.site.host) {
+          this.port.postMessage({cmd: 'get-current-zoom'});
+        }
+        this.site = message.site;
+        // loadConfig(site.host);
+        // loadFrames(site);
+      } else if (message.cmd === 'set-current-zoom') {
+        setCurrentZoom(message.zoom);
+      }
+    },
+    getRandomColor() {
+      return `rgb(${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)})`;
+    },
+    setCurrentZoom(nz) {
+      this.currentZoom = nz;
+    },
+    updateZoom(nz){
+      this.currentZoom = nz;
+    }
   }
 }
 </script>
 
+<style src="../res/css/font/overpass.css"></style>
+<style src="../res/css/font/overpass-mono.css"></style>
+<style src="../res/css/flex.css"></style>
+<style src="../res/css/common.scss"></style>
+
 <style lang="scss" scoped>
-p {
+html, body {
-  font-size: 20px;
+  width: 780px !important;
+  max-width: 800px !important;
+  padding: 0px;
+  margin: 0px;
+}
+
+.header {
+  background-color: #7f1416;
+  color: #fff;
+  margin: 0px;
+  margin-top: 0px;
+  padding-top: 8px;
+  padding-left: 15px;
+  padding-bottom: 1px;
+  font-size: 2.7em;
+}
+
+.menu-item-inline-desc{
+  font-size: 0.60em;
+  font-weight: 300;
+  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;
+  padding-bottom: 5px;
+  font-variant: small-caps;
+  border-left: transparent 5px solid;
+}
+
+.suboption {
+  display: block;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-top: 5px;
+  padding-bottom: 20px;
+  min-height: 250px;
+}
+
+
+#no-videos-display {
+  height: 100%;
+  padding-top: 50px;
+/*       text-align: center; */
+}
+
+.tabitem-container {
+  padding-top: 0.5em;
+}
+
+.selected-tab {
+  background-color: initial;
+  border-left: #f18810 5px solid;
+}
+
+.tabitem {
+  font-variant: normal;
+  font-size: 0.69em;
+  margin-left: 1em;
+  border-left: transparent 3px solid;
+  padding-left: 12px;
+  margin-left: -10px;
+}
+
+.tabitem-selected {
+  color: #fff !important;
+  background-color: initial;
+  border-left: #f0c089 3px solid !important;
+}
+.tabitem-selected::before {
+  padding-right: 0.5em;
+}
+
+.tabitem-iframe::after {
+  content: "</>";
+  padding-left: 0.33em;
 }
 </style>

src/popup/panels/VideoPanel.vue

@@ -2,10 +2,10 @@
   <div>
     <div v-if="true">
       <div class="label">Cropping mode:</div>
-      <div class="flex flex-row">
+      <div class="flex flex-row flex-wrap">
         <template v-for="action of settings.active.actions">
           <ShortcutButton v-if="action.scopes.page && action.scopes.page.show && action.cmd.length === 1 && action.cmd[0].action === 'set-ar'"
-                          class=""
+                          class="flex b3 button"
                           :label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
                           :shortcut="parseShortcut(action)"
                           @click.native="execAction(action)"
@@ -25,10 +25,14 @@
         <input id="_input_zoom_slider" class="w100"
                 type="range"
                 step="any"
+                min="-1"
+                max="4"
+                :value="logarithmicZoom"
+                @input="changeZoom($event.target.value)"
                 />
         <div style="overflow: auto">
           <div class="inline-block float-left medium-small x-pad-1em">
-            Zoom: <span id="_label_zoom_level">100</span>%
+            Zoom: {{(zoom * 100).toFixed()}}%
           </div>
           <div class="inline-block float-right medium-small">
             <a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
@@ -46,10 +50,10 @@
 
     <div v-if="true">
       <div class="label">Stretching mode:</div>
-      <div class="flex flex-row">
+      <div class="flex flex-row flex-wrap">
         <template v-for="action of settings.active.actions">
           <ShortcutButton v-if="action.scopes.page && action.scopes.page.show && action.cmd.length === 1 && action.cmd[0].action === 'set-stretch'"
-                          class=""
+                          class="flex b3 button"
                           :label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
                           :shortcut="parseShortcut(action)"
                           @click.native="execAction(action)"
@@ -61,10 +65,10 @@
 
     <div v-if="true">
       <div class="label">Video alignment:</div>
-      <div class="flex flex-row">
+      <div class="flex flex-row flex-wrap">
         <template v-for="action of settings.active.actions">
           <ShortcutButton v-if="action.scopes.page && action.scopes.page.show && action.cmd.length === 1 && action.cmd[0].action === 'set-alignment'"
-                          class=""
+                          class="flex b3 button"
                           :label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
                           :shortcut="parseShortcut(action)"
                           @click.native="execAction(action)"
@@ -76,10 +80,10 @@
 
     <div v-if="true">
       <div class="label">Multi-command actions:</div>
-      <div class="flex flex-row">
+      <div class="flex flex-row flex-wrap">
         <template v-for="action of settings.active.actions">
           <ShortcutButton v-if="action.scopes.page && action.scopes.page.show && action.cmd.length > 1"
-                          class=""
+                          class="flex b3 button"
                           :label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
                           :shortcut="parseShortcut(action)"
                           @click.native="execAction(action)"
@@ -99,11 +103,13 @@ import ShortcutButton from '../../common/components/shortcut-button'
 
 export default {
   data() {
-    return { }
+    return {
+    }
   },
   props: [
     'settings',
-    'frame'
+    'frame',
+    'zoom'
   ],
   created() {
     this.exec = new ExecAction(this.settings);
@@ -111,6 +117,11 @@ export default {
   components: {
     ShortcutButton,
   },
+  computed: {
+    logarithmicZoom: function(){
+      return Math.log2(this.zoom);
+    }
+  },
   methods: {
     execAction(action) { 
       this.exec.exec(action, 'page', this.frame);
@@ -122,12 +133,25 @@ export default {
       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;
+}
 </style>

src/res/css/common.scss

@@ -214,10 +214,10 @@ small {
 
 .button {
   /* display: inline-block; */
-  padding-top: 8px;
+  // padding-top: 8px;
-  padding-bottom: 3px;
+  // padding-bottom: 3px;
-  padding-left: 20px;
+  // padding-left: 20px;
-  padding-right: 20px;
+  // padding-right: 20px;
   border: 1px solid #444;
   margin-top: 3px;
   margin-bottom: 3px;

src/res/css/flex.css

@@ -16,4 +16,8 @@
 
 .flex-grow {
   flex-grow: 1;
-}
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}

src/res/popup/js/popup.js

@@ -28,7 +28,7 @@ var site = undefined;
 // aside from hostname, this can have two additional values:
 //   __playing — commands get sent to all frames with videos of status 'playing'
 //   __all     — commands get sent to all frames
-var selectedFrame = '__playing';
+var selectedFrame = '__all';
 
 var port = browser.runtime.connect({name: 'popup-port'});
 port.onMessage.addListener( (m,p) => processReceivedMessage(m,p));