Made keyboard shortcuts work again, changed videoFloat -> videoAlignment for consistency, roughly completed ActionList.js

src/ext/conf/ActionList.js

@@ -51,7 +51,7 @@ var ActionList = {
       page: true,
     }
   },
-  'align': {
+  'set-alignment': {
     name: 'Set video alignment',
     args: [{
       name: 'Left',
@@ -68,7 +68,101 @@ var ActionList = {
       scopes: {
         site: true,
       }
-    }]
+    }],
+    scopes: {
+      global: true,
+      site: true,
+      page: true,
+    }
+  },
+  'pan': {
+    name: 'Pan',
+    args: [{
+      name: '',
+      arg: 'toggle'
+    }],
+    scopes: {
+      page: true,
+    }
+  },
+  'toggle-pan': {
+    name: 'Toggle panning mode',
+    args: [{
+      name: 'Toggle',
+      arg: 'toggle',
+    },{
+      name: 'Enable',
+      arg: 'enable',
+    },{
+      name: 'Disable',
+      arg: 'disable'
+    }],
+    scopes: {
+      page: true
+    }
+  },
+  'set-zoom': {
+    name: 'Zoom',
+    args: [{
+      name: 'Zoom level increase/decrease',
+      customArg: true,
+      hintHTML: '<small>Positive values zoom in, negative values zoom out. Increases/decreases are logarithmic: value of \'1\' will double the zoom, value of \'-1\' will halve it.</small>'
+    }],
+    scopes: {
+      page: true,
+    }
+  },
+  'set-extension-mode': {
+    name: 'Set extension mode',
+    args: [{
+      name: 'Enable',
+      arg: 'blacklist',
+    },{
+      name: 'On whitelisted only',
+      arg: 'whitelist',
+      scopes: {
+        global: true,
+      }
+    },{
+      name: 'Default',
+      arg: 'default',
+      scopes: {
+        page: true,
+      }
+    },{
+      name: 'Disable',
+      arg: 'disabled'
+    }],
+    scopes: {
+      global: true,
+      site: true,
+    }
+  },
+  'set-autoar-mode': {
+    name: 'Set automatic aspect ratio detection mode',
+    args: [{
+      name: 'Enable',
+      arg: 'blacklist',
+    },{
+      name: 'On whitelisted only',
+      arg: 'whitelist',
+      scopes: {
+        global: true,
+      }
+    },{
+      name: 'Default',
+      arg: 'default',
+      scopes: {
+        page: true,
+      }
+    },{
+      name: 'Disable',
+      arg: 'disabled'
+    }],
+    scopes: {
+      global: true,
+      site: true,
+    }
   }
 };
 

src/ext/conf/ExtensionConf.js

@@ -106,7 +106,7 @@ var ExtensionConf = {
     announceDebounce: 200     // we wait this long before announcing new zoom
   },
   miscSettings: {
-    videoFloat: "center",
+    videoAlignment: "center",
     mousePan: {
       enabled: false
     },

src/ext/lib/ActionHandler.js

@@ -1,5 +1,6 @@
 import Debug from '../conf/Debug';
-import PlayerData from './video-data/PlayerData'
+import PlayerData from './video-data/PlayerData';
+import Comms from './comms/Comms';
 
 class ActionHandler {
 
@@ -36,31 +37,69 @@ class ActionHandler {
       actions = this.settings.active.actions;
     }
 
+    console.log("----ACTIONS----", actions)
+
     for (var action of actions) {
-      if(! action.shortcut) {
+      console.log("----ACTION:", action);
+      if (!action.scopes) {
         continue;
       }
-      var shortcut = action.shortcut[0];
+      for (var scope in action.scopes) {
-      if (shortcut.onKeyDown) {
+        console.log("----ACTION - scope:", action.scopes[scope]);
-        this.keyDownActions.push(action);
+        if (! action.scopes[scope].shortcut) {
-      }
+          continue;
-      if (shortcut.onKeyUp) {
+        }
-        this.keyUpActions.push(action);
+
-      }
+        var shortcut = action.scopes[scope].shortcut[0];
-      if (shortcut.onScrollUp) {
+        if (shortcut.onKeyDown) {
-        this.mouseScrollUpActions.push(action);
+          this.keyDownActions.push({
-      }
+            shortcut: shortcut,
-      if (shortcut.onScrollDown) {
+            cmd: action.cmd,
-        this.mouseScrollDownActions.push(action);
+            scope: scope,
-      }
+          });
-      if (shortcut.onMouseEnter) {
+        }
-        this.mouseEnterActions.push(action);
+        if (shortcut.onKeyUp) {
-      }
+          this.keyUpActions.push({
-      if (shortcut.onMouseLeave) {
+            shortcut: shortcut,
-        this.mouseLeaveActions.push(action);
+            cmd: action.cmd,
-      }
+            scope: scope,
-      if (shortcut.onMouseMove) {
+          });
-        this.mouseMoveActions.push(action);
+        }
+        if (shortcut.onScrollUp) {
+          this.mouseScrollUpActions.push({
+            shortcut: shortcut,
+            cmd: action.cmd,
+            scope: scope,
+          });
+        }
+        if (shortcut.onScrollDown) {
+          this.mouseScrollDownActions.push({
+            shortcut: shortcut,
+            cmd: action.cmd,
+            scope: scope,
+          });
+        }
+        if (shortcut.onMouseEnter) {
+          this.mouseEnterActions.push({
+            shortcut: shortcut,
+            cmd: action.cmd,
+            scope: scope,
+          });
+        }
+        if (shortcut.onMouseLeave) {
+          this.mouseLeaveActions.push({
+            shortcut: shortcut,
+            cmd: action.cmd,
+            scope: scope,
+          });
+        }
+        if (shortcut.onMouseMove) {
+          this.mouseMoveActions.push({
+            shortcut: shortcut,
+            cmd: action.cmd,
+            scope: scope,
+          });
+        }
       }
     }
 
@@ -131,34 +170,54 @@ class ActionHandler {
            shortcut.shiftKey === event.shiftKey
   }
 
-  execAction(actions, event, shortcutIndex, videoData) {
+  execAction(actions, event, videoData) {
     if(Debug.debug  && Debug.keyboard ){
       console.log("%c[ActionHandler::execAction] Trying to find and execute action for event. Actions/event: ", "color: #ff0", actions, event);
     }
 
-    if (!shortcutIndex) {
-      shortcutIndex = 0;
-    }
-
     for (var action of actions) {
-      if (this.isActionMatch(action.shortcut[shortcutIndex], event)) {
+      if (this.isActionMatch(action.shortcut, event)) {
         if(Debug.debug  && Debug.keyboard ){
           console.log("%c[ActionHandler::execAction] found an action associated with keypress/event: ", "color: #ff0", action);
         }
 
         for (var cmd of action.cmd) {
-          if (cmd.action === "set-ar") {
+          if (action.scope === 'page') {
-            this.pageInfo.setAr(cmd.arg);
+            if (cmd.action === "set-ar") {
-          } else if (cmd.action === "set-zoom") {
+              this.pageInfo.setAr(cmd.arg);
-            this.pageInfo.zoomStep(cmd.arg);
+            } else if (cmd.action === "set-zoom") {
-          } else if (cmd.action === "set-stretch") {
+              this.pageInfo.zoomStep(cmd.arg);
-            this.pageInfo.setStretchMode(cmd.arg);
+            } else if (cmd.action === "set-stretch") {
-          } else if (cmd.action === "toggle-pan") {
+              this.pageInfo.setStretchMode(cmd.arg);
-            this.pageInfo.setPanMode(cmd.arg)
+            } else if (cmd.action === "toggle-pan") {
-          } else if (cmd.action === "pan") {
+              this.pageInfo.setPanMode(cmd.arg)
-            if (videoData) {
+            } else if (cmd.action === "pan") {
-              videoData.panHandler(event, true);
+              if (videoData) {
+                videoData.panHandler(event, true);
+              }
             }
+          } else if (action.scope === 'site') {
+            if (cmd.action === "set-stretch") {
+              this.settings.active.sites[window.location.host].stretch = cmd.arg;
+            } else if (cmd.action === "set-alignment") {
+              this.settings.active.sites[window.location.host].videoAlignment = cmd.arg;
+            } else if (cmd.action === "set-extension-mode") {
+              this.settings.active.sites[window.location.host].status = cmd.arg;
+            } else if (cmd.action === "set-autoar-mode") {
+              this.settings.active.sites[window.location.host].arStatus = cmd.arg;
+            }
+            this.settings.save();
+          } else if (action.scope === 'global') {
+            if (cmd.action === "set-stretch") {
+              this.settings.active.stretch.initialMode = cmd.arg;
+            } else if (cmd.action === "set-alignment") {
+              this.settings.active.miscSettings.videoAlignment = cmd.arg;
+            } else if (cmd.action === "set-extension-mode") {
+              this.settings.active.extensionMode = cmd.arg;
+            } else if (cmd.action === "set-autoar-mode") {
+              this.settings.active.arDetect.mode.arStatus = cmd.arg;
+            }
+            this.settings.save();
           }
         }
 
@@ -170,7 +229,7 @@ class ActionHandler {
 
   handleKeyup(event) {
     if(Debug.debug  && Debug.keyboard ){
-      console.log("%c[ActionHandler::handleKeyup] we pressed a key: ", "color: #ff0", event.key , " | keydown: ", event.keyup, "event:", event);
+      console.log("%c[ActionHandler::handleKeyup] we pressed a key: ", "color: #ff0", event.key , " | keyup: ", event.keyup, "event:", event);
     }
 
     if (this.preventAction()) {
@@ -180,7 +239,7 @@ class ActionHandler {
       return;
     }
 
-    this.execAction(this.keyUpActions, event, 0);
+    this.execAction(this.keyUpActions, event);
   }
 
   handleKeydown(event) {
@@ -195,7 +254,7 @@ class ActionHandler {
       return;
     }
 
-    this.execAction(this.keyDownActions, event, 0);
+    this.execAction(this.keyDownActions, event);
   }
 
   handleMouseMove(event, videoData) {
@@ -203,7 +262,7 @@ class ActionHandler {
       console.log("[ActionHandler::handleMouseMove] mouse move is being handled.\nevent:", event, "\nvideo data:", videoData);
     }
     videoData.panHandler(event);
-    this.execAction(this.mouseMoveActions, event, undefined, videoData)
+    this.execAction(this.mouseMoveActions, event, videoData)
   }
 
 }

src/ext/lib/KeyboardShortcutParser.js

@@ -1,23 +0,0 @@
-class KeyboardShortcutParser {
-  static parseShortcut(keypress) {
-    var shortcutCombo = '';
-  
-    if (keypress.ctrlKey) {
-      shortcutCombo += 'Ctrl + ';
-    }
-    if (keypress.shiftKey) {
-      shortcutCombo += 'Shift + ';
-    }
-    if (keypress.metaKey) {
-      shortcutCombo += 'Meta + ';
-    }
-    if (keypress.altKey) {
-      shortcutCombo += 'Alt + ';
-    }
-    shortcutCombo += keypress.key.toUpperCase();
-  
-    return shortcutCombo;
-  }
-}
-
-export default KeyboardShortcutParser;

src/ext/lib/Settings.js

@@ -376,7 +376,7 @@ class Settings {
     if (site.videoAlignment) {
       return site.videoAlignment;
     }
-    return this.active.miscSettings.videoFloat;
+    return this.active.miscSettings.videoAlignment;
   }
 }
 

src/ext/lib/ar-detect/ArDetector.js

@@ -494,9 +494,9 @@ class ArDetector {
           var newCanvasWidth = window.innerHeight * (this.video.videoWidth / this.video.videoHeight);
           var newCanvasHeight = window.innerHeight;
           
-          if (this.conf.resizer.videoFloat === "center") {
+          if (this.conf.resizer.videoAlignment === "center") {
             this.canvasDrawWindowHOffset = Math.round((window.innerWidth - newCanvasWidth) * 0.5);
-          } else if (this.conf.resizer.videoFloat == "left") {
+          } else if (this.conf.resizer.videoAlignment == "left") {
             this.canvasDrawWindowHOffset = 0;
           } else {
             this.canvasDrawWindowHOffset = window.innerWidth - newCanvasWidth;

src/ext/lib/comms/CommsClient.js

@@ -67,7 +67,7 @@ class CommsClient {
     if (message.cmd === "set-ar") {
       this.pageInfo.setAr(message.arg, message.playing);
     } else if (message.cmd === 'set-alignment') {
-      this.pageInfo.setVideoFloat(message.arg, message.playing);
+      this.pageInfo.setvideoAlignment(message.arg, message.playing);
       this.pageInfo.restoreAr();
     } else if (message.cmd === "set-stretch") {
       this.pageInfo.setStretchMode(message.arg, message.playing);
@@ -143,9 +143,14 @@ class CommsClient {
     if (Debug.debug && Debug.comms) {
       console.log(`[CommsClient::registerVideo] <${this.commsId}>`, "Registering video for current page.");
     }
-    if (this.pageInfo.videos.length) { 
+    if (this.pageInfo) {
-      this.port.postMessage({cmd: "has-video"});
+      if (this.pageInfo.videos.length) { 
+        this.port.postMessage({cmd: "has-video"});
+      }
+    } else {
+      // this.port.postMessage({cmd: "has-video"});
     }
+    
   }
 
   unregisterVideo(){

src/ext/lib/comms/CommsServer.js

@@ -166,9 +166,6 @@ class CommsServer {
       this.sendToFrame(message, message.targetFrame);
     } else if (message.cmd === 'set-ar') {
       this.sendToFrame(message, message.targetFrame);
-    } else if (message.cmd === 'set-custom-ar') {
-      this.settings.active.keyboard.shortcuts.q.arg = message.arg;
-      this.settings.save();
     } else if (message.cmd === 'set-alignment') {
       this.sendToFrame(message, message.targetFrame);
     } else if (message.cmd === 'autoar-start') {

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

@@ -343,16 +343,16 @@ class PageInfo {
     }
   }
   
-  setVideoFloat(videoFloat, playingOnly) {
+  setvideoAlignment(videoAlignment, playingOnly) {
     if (playingOnly) {
       for(var vd of this.videos) {
         if (vd.isPlaying()) { 
-          vd.setVideoFloat(videoFloat)
+          vd.setvideoAlignment(videoAlignment)
         }
       }
     } else {
       for(var vd of this.videos) {
-        vd.setVideoFloat(videoFloat)
+        vd.setvideoAlignment(videoAlignment)
       }
     }
   }

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

@@ -170,8 +170,8 @@ class VideoData {
     this.resizer.setPanMode(mode);
   }
 
-  setVideoFloat(videoFloat) {
+  setvideoAlignment(videoAlignment) {
-    this.resizer.setVideoFloat(videoFloat);
+    this.resizer.setvideoAlignment(videoAlignment);
   }
 
   restoreAr(){

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

@@ -37,7 +37,7 @@ class Resizer {
 
     
     this.lastAr = this.settings.getDefaultAr();                 // this is the aspect ratio we start with
-    this.videoFloat = this.settings.getDefaultVideoAlignment(); // this is initial video alignment
+    this.videoAlignment = this.settings.getDefaultVideoAlignment(); // this is initial video alignment
     this.destroyed = false;
 
     this.resizerId = (Math.random(99)*100).toFixed(0);
@@ -166,7 +166,7 @@ class Resizer {
         return;
       }
       // dont allow weird floats
-      this.videoFloat = 'center';
+      this.videoAlignment = 'center';
 
       const player = this.conf.player.element;
 
@@ -202,8 +202,8 @@ class Resizer {
     this.restore();
   }
 
-  setVideoFloat(videoFloat) {
+  setvideoAlignment(videoAlignment) {
-    this.videoFloat = videoFloat;
+    this.videoAlignment = videoAlignment;
     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.videoFloat);
+      console.log("[Resizer::_res_computeOffsets] <rid:"+this.resizerId+"> video will be aligned to ", this.settings.active.miscSettings.videoAlignment);
     }
 
     const wdiff = this.conf.player.dimensions.width - this.conf.video.offsetWidth;
@@ -345,10 +345,10 @@ class Resizer {
       translate.x += wdiffAfterZoom * this.pan.relativeOffsetX * this.zoom.scale;
       translate.y += hdiffAfterZoom * this.pan.relativeOffsetY * this.zoom.scale;
     } else {
-      if (this.videoFloat == "left") {
+      if (this.videoAlignment == "left") {
         translate.x += wdiffAfterZoom * 0.5;
       }
-      else if (this.videoFloat == "right") {
+      else if (this.videoAlignment == "right") {
         translate.x -= wdiffAfterZoom * 0.5;
       }
     }

src/options/general-settings.vue

@@ -57,16 +57,16 @@
     </div>
     <div class="flex flex-row button-box">
       <Button label="Left" 
-              :selected="settings.active.miscSettings.videoFloat === 'left'"
+              :selected="settings.active.miscSettings.videoAlignment === 'left'"
-              @click.native="setDefaultVideoFloat('left')"> 
+              @click.native="setDefaultvideoAlignment('left')"> 
       </Button>
       <Button label="Center"
-              :selected="settings.active.miscSettings.videoFloat === 'center'"
+              :selected="settings.active.miscSettings.videoAlignment === 'center'"
-              @click.native="setDefaultVideoFloat('center')">
+              @click.native="setDefaultvideoAlignment('center')">
       </Button>
       <Button label="Right"
-              :selected="settings.active.miscSettings.videoFloat === 'right'"
+              :selected="settings.active.miscSettings.videoAlignment === 'right'"
-              @click.native="setDefaultVideoFloat('right')">
+              @click.native="setDefaultvideoAlignment('right')">
       </Button>
     </div>
 
@@ -146,8 +146,8 @@ export default {
       this.settings.active.extensionMode = mode;
       this.settings.save();
     },
-    setDefaultVideoFloat(mode) {
+    setDefaultvideoAlignment(mode) {
-      this.settings.active.videoFloat = mode;
+      this.settings.active.videoAlignment = mode;
       this.settings.save();
     },
     setDefaultStretchingMode(mode) {

src/res/popup/js/popup.js

@@ -322,7 +322,7 @@ function configureGlobalTab() {
   processButtonsForPopupCategory(GlobalPanel.elements.alignmentSettings, alignButtons);
 
   selectButton('set-stretch', settings.active.stretch.initialMode, GlobalPanel.elements.stretchSettings.buttons);
-  selectButton('set-alignment', settings.active.miscSettings.videoFloat, GlobalPanel.elements.alignmentSettings.buttons);
+  selectButton('set-alignment', settings.active.miscSettings.videoAlignment, GlobalPanel.elements.alignmentSettings.buttons);
 
   selectButton('set-extension-mode', settings.active.extensionMode, GlobalPanel.elements.extensionSettings.buttons);
   selectButton('set-extension-mode', settings.active.arDetect.mode, GlobalPanel.elements.autoarSettings.buttons);