Buttons and keyboard shortcuts functional

js/conf/ExtensionConf.js

@@ -328,7 +328,7 @@ var ExtensionConf = {
     label: '18:9'
   },{
     cmd: [{
-      action: 'zoom',
+      action: 'set-zoom',
       arg: 0.1
     }],
     shortcut: [{
@@ -345,7 +345,7 @@ var ExtensionConf = {
     label: 'Zoom',
   },{
     cmd: [{
-      action: 'zoom',
+      action: 'set-zoom',
       arg: -0.1
     }],
     shortcut: [{
@@ -380,7 +380,7 @@ var ExtensionConf = {
   },{
     cmd: [{
       action: 'pan',
-      arg: 1,
+      arg: 'toggle',
     }],
     shortcut: [{
       ctrlKey: false,
@@ -400,8 +400,8 @@ var ExtensionConf = {
   //
   {
     cmd: [{
-      action: 'stretch',
+      action: 'set-stretch',
-      arg: 0,
+      arg: 'NO_STRETCH',
     }],
     popup: true,
     popup_site: true,
@@ -410,8 +410,8 @@ var ExtensionConf = {
     label: 'Normal',
   },{
     cmd: [{
-      action: 'stretch',
+      action: 'set-stretch',
-      arg: 1,
+      arg: 'BASIC',
     }],
     popup: true,
     popup_site: true,
@@ -420,8 +420,8 @@ var ExtensionConf = {
     label: 'Basic'
   },{
     cmd: [{
-      action: 'stretch',
+      action: 'set-stretch',
-      arg: 2,
+      arg: 'HYBRID',
     }],
     popup: true,
     popup_site: true,
@@ -430,8 +430,8 @@ var ExtensionConf = {
     label: 'Hybrid'
   },{
     cmd: [{
-      action: 'stretch',
+      action: 'set-stretch',
-      arg: 3,
+      arg: 'CONDITIONAL',
     }],
     popup: true,
     popup_site: true,
@@ -444,7 +444,7 @@ var ExtensionConf = {
   //
   {
     cmd: [{
-      action: 'align',
+      action: 'set-alignment',
       arg: 'left'
     }],
     popup: true,
@@ -454,7 +454,7 @@ var ExtensionConf = {
     label: 'Left',
   },{
     cmd: [{
-      action: 'align',
+      action: 'set-alignment',
       arg: 'center'
     }],
     popup: true,
@@ -464,7 +464,7 @@ var ExtensionConf = {
     label: 'Center',
   },{
     cmd: [{
-      action: 'align',
+      action: 'set-alignment',
       arg: 'right'
     }],
     popup: true,

js/conf/Keybinds.js

@@ -1,85 +0,0 @@
-if(Debug.debug)
-  console.log("Loading: Keybinds.js");
-
-class Keybinds {
-  constructor(pageInfo){
-    this.pageInfo = pageInfo;
-    this.settings = pageInfo.settings;
-    this.inputs = ['input','select','button','textarea'];
-  }
-
-  setup(){
-    var ths = this;
-    document.addEventListener('keydown',  (event) => ths.handleKeypress(event) );
-    document.addEventListener('keyup', (event) => ths.handleKeypress(event,true) );
-  }
-
-  handleKeypress(event, isKeyUp) {          // Tukaj ugotovimo, katero tipko smo pritisnili
-  
-    if(Debug.debug  && Debug.keyboard ){
-      console.log("%c[Keybinds::_kbd_process] we pressed a key: ", "color: #ff0", event.key , " | keydown: ", event.keydown, "event:", event);
-    }
-    
-    // Tipke upoštevamo samo, če smo v celozaslonskem načinu oz. če ne pišemo komentarja
-    // v nasprotnem primeru ne naredimo nič.
-    // We only take actions if we're in full screen or not writing a comment
-    var activeElement = document.activeElement;
-
-    if( (! PlayerData.isFullScreen()) && (
-      (this.inputs.indexOf(activeElement.tagName.toLocaleLowerCase()) !== -1) ||
-      (activeElement.getAttribute("role") === "textbox") ||
-      (activeElement.getAttribute("type") === "text")
-    )){
-      if(Debug.debug && Debug.keyboard)
-        console.log("[Keybinds::_kbd_process] We're writing a comment or something. Doing nothing");
-      return;
-    }
-    
-    
-    // building modifiers list:
-    var modlist = "";
-    for(var mod of this.settings.active.keyboard.modKeys){
-      if(event[mod])
-        modlist += (mod + "_")
-    }
-      
-    if(Debug.debug  && Debug.keyboard ){
-      if(modlist)
-        console.log("[Keybinds::_kbd_process] there's been modifier keys. Modlist:", modlist);
-    }
-    
-    var keypress = modlist + event.key.toLowerCase();
-    
-    if(Debug.debug  && Debug.keyboard )
-      console.log("[Keybinds::_kbd_process] our full keypress is this", keypress );
-    
-    
-    if(this.settings.active.keyboard.shortcuts[keypress]){
-      var conf = this.settings.active.keyboard.shortcuts[keypress];
-
-      if (isKeyUp) {
-        if (conf.keyup) {
-          conf = conf.keyup;
-        } else {
-          return;
-        }
-      }
-      
-      if(Debug.debug && Debug.keyboard) {
-        console.log("[Keybinds::_kbd_process] there's an action associated with this keypress. conf:", conf, "conf.arg:", conf.arg);
-      }
-
-      if (conf.action === "crop"){
-        this.pageInfo.stopArDetection();
-        this.pageInfo.setAr(conf.arg);
-      } else if (conf.action === "zoom"){
-        this.pageInfo.stopArDetection();
-        this.pageInfo.zoomStep(conf.arg);
-      } else if (conf.action === "auto-ar"){
-        this.pageInfo.startArDetection();
-      } else if (conf.action === "pan") {
-        this.pageInfo.setPanMode(conf.arg);
-      }
-    }
-  }
-}

js/lib/Comms.js

@@ -68,10 +68,10 @@ class CommsClient {
     if (message.cmd === "set-ar") {
       this.pageInfo.setAr(message.arg);
     } else if (message.cmd === 'set-alignment') {
-      this.pageInfo.setVideoFloat(message.mode);
+      this.pageInfo.setVideoFloat(message.arg);
       this.pageInfo.restoreAr();
     } else if (message.cmd === "set-stretch") {
-      this.pageInfo.setStretchMode(StretchMode[message.mode]);
+      this.pageInfo.setStretchMode(StretchMode[message.arg]);
     } else if (message.cmd === "autoar-start") {
       if (message.enabled !== false) {
         this.pageInfo.initArDetection();

js/lib/VideoData.js

@@ -47,6 +47,9 @@ class VideoData {
   }
   
   startArDetection() {
+    if (Debug.debug) {
+      console.log("[VideoData::startArDetection] starting AR detection")
+    }
     if(this.destroyed) {
       throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
     }
@@ -141,6 +144,10 @@ class VideoData {
     this.resizer.reset();
   }
 
+  resetLastAr() {
+    this.resizer.setLastAr('original');
+  }
+
   panHandler(event) {
     if(this.destroyed) {
       throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};

js/modules/ActionHandler.js

@@ -12,6 +12,10 @@ class ActionHandler {
   }
 
   init() {
+    if (Debug.debug) {
+      console.log("[ActionHandler::init] starting init");
+    }
+
     this.keyUpActions = [];
     this.keyDownActions = [];
     this.mouseMoveActions = [];
@@ -34,6 +38,9 @@ class ActionHandler {
     }
 
     for (var action of actions) {
+      if(! action.shortcut) {
+        continue;
+      }
       var shortcut = action.shortcut[0];
       if (shortcut.onKeyDown) {
         this.keyDownActions.push(action);
@@ -60,6 +67,11 @@ class ActionHandler {
 
     document.addEventListener('keydown',  (event) => ths.handleKeydown(event) );
     document.addEventListener('keyup', (event) => ths.handleKeyup(event) );
+
+
+    if (Debug.debug) {
+      console.log("[ActionHandler::init] initialization complete");
+    }
   }
 
   preventAction() {
@@ -123,11 +135,11 @@ class ActionHandler {
         }
 
         for (var cmd of action.cmd) {
-          if (cmd.action === "crop") {
+          if (cmd.action === "set-ar") {
             this.pageInfo.setAr(cmd.arg);
-          } else if (cmd.action === "zoom") {
+          } else if (cmd.action === "set-zoom") {
             this.pageInfo.zoomStep(cmd.arg);
-          } else if (cmd.action === "stretch") {
+          } else if (cmd.action === "set-stretch") {
             this.pageInfo.setStretchMode(cmd.arg);
           } else if (cmd.action === "toggle-pan") {
             this.pageInfo.setPanMode(cmd.arg)
@@ -148,6 +160,9 @@ class ActionHandler {
     }
 
     if (this.preventAction()) {
+      if (Debug.debug && Debug.keyboard) {
+        console.log("[ActionHandler::handleKeyup] we are in a text box or something. Doing nothing.");
+      }
       return;
     }
 
@@ -160,6 +175,9 @@ class ActionHandler {
     }
 
     if (this.preventAction()) {
+      if (Debug.debug && Debug.keyboard) {
+        console.log("[ActionHandler::handleKeydown] we are in a text box or something. Doing nothing.");
+      }
       return;
     }
 

js/modules/PageInfo.js

@@ -223,6 +223,9 @@ class PageInfo {
 
 
   startArDetection(){
+    if (Debug.debug) {
+      console.log('[PageInfo::startArDetection()] starting automatic ar detection!')
+    }
     for(var vd of this.videos){
       vd.startArDetection();
     }
@@ -235,12 +238,26 @@ class PageInfo {
   }
 
   setAr(ar){
-    if(ar !== 'auto') {
+    if (Debug.debug) {
+      console.log('[PageInfo::setAr] aspect ratio:', ar)
+    }
+
+
+    if (ar !== 'auto') {
       this.stopArDetection();
     } else {
-      for (var vd of this.videos) {
+      if (Debug.debug) {
-        vd.resetLastAr();
+        console.log('[PageInfo::setAr] aspect ratio is auto');
       }
+
+      try {
+        for (var vd of this.videos) {
+          vd.resetLastAr();
+        }
+      } catch (e) {
+        console.log("???", e);
+      }
+      this.initArDetection();
       this.startArDetection();
       return;
     }

js/modules/Zoom.js

@@ -55,8 +55,8 @@ class Zoom {
     }
   }
 
-  applyZoom(videoDimensions){
+  applyZoom(stretchFactors){
-    videoDimensions.xFactor *= this.scale;
+    stretchFactors.xFactor *= this.scale;
-    videoDimensions.yFactor *= this.scale;
+    stretchFactors.yFactor *= this.scale;
   }
 }

res/popup/js/popup.js

@@ -311,8 +311,8 @@ function configureVideoTab(site) {
   const popupButtons = settings.getActionsForSite(site).filter(action => action.popup === true); 
 
   const cropButtons = popupButtons.filter(action => action.cmd.length === 1 && action.cmd[0].action === 'set-ar');
-  const stretchButtons = popupButtons.filter(action => action.cmd.length === 1 && action.cmd[0].action === 'stretch');
+  const stretchButtons = popupButtons.filter(action => action.cmd.length === 1 && action.cmd[0].action === 'set-stretch');
-  const alignButtons = popupButtons.filter(action => action.cmd.length === 1 && action.cmd[0].action === 'align');
+  const alignButtons = popupButtons.filter(action => action.cmd.length === 1 && action.cmd[0].action === 'set-alignment');
 
   processButtonsForPopupCategory(VideoPanel.elements.cropSettings, cropButtons);
   processButtonsForPopupCategory(VideoPanel.elements.stretchSettings, stretchButtons);
@@ -555,53 +555,7 @@ document.addEventListener("click", (e) => {
         command.enabled = true;
         return command;
       }
-      if(e.target.classList.contains("_ar_reset")){
+ 
-        command.cmd = "set-ar";
-        command.ratio = "reset";
-        return command;
-      }
-      if(e.target.classList.contains("_ar_fitw")){
-        command.cmd = "set-ar";
-        command.ratio = "fitw";
-        return command;
-      }
-      if(e.target.classList.contains("_ar_fitw")){
-        command.cmd = "set-ar";
-        command.ratio = "fith";
-        return command;
-      }
-      if(e.target.classList.contains("_ar_219")){
-        command.cmd = "set-ar";
-        command.ratio = 2.39;
-        return command;
-      }
-      if(e.target.classList.contains("_ar_189")){
-        command.cmd = "set-ar";
-        command.ratio = 2.0;
-        return command;
-      }
-      if(e.target.classList.contains("_ar_169")){
-        command.cmd = "set-ar";
-        command.ratio = 1.78;
-        return command;
-      }
-      if(e.target.classList.contains("_ar_1610")){
-        command.cmd = "set-ar";
-        command.ratio = 1.6;
-        return command;
-      }
-      if(e.target.classList.contains("_ar_custom")){
-        ratio = getCustomAspectRatio();
-        command.cmd = "set-ar";
-        command.ratio = ratio;
-        return ratio !== false ? command : null;
-      }
-      if(e.target.classList.contains("_ar_save_custom_ar")){
-        ratio = getCustomAspectRatio();
-        command.cmd = "set-custom-ar";
-        command.ratio = ratio;
-        return ratio !== false ? command : null; // this validates input
-      }
     }
     if(e.target.classList.contains("_stretch")){
       // stretch, global
@@ -636,20 +590,7 @@ document.addEventListener("click", (e) => {
         return;
       }
 
-      if(e.target.classList.contains("_ar_stretch_none")) {
+
-        command.cmd = "set-stretch";
-        command.mode = "NO_STRETCH";
-      } else if(e.target.classList.contains("_ar_stretch_basic")) {
-        command.cmd = "set-stretch";
-        command.mode = "BASIC";
-      } else if(e.target.classList.contains("_ar_stretch_hybrid")) {
-        command.cmd = "set-stretch";
-        command.mode = "HYBRID";
-      } else if(e.target.classList.contains("_ar_stretch_conditional")) {
-        command.cmd = "set-stretch";
-        command.mode = "CONDITIONAL";
-      }
-      return command;
     }
     if(e.target.classList.contains("_autoAr")){
       if(e.target.classList.contains("_ar_global_options")){

res/settings/settings.js

@@ -40,80 +40,6 @@ function clearPage(){
 
 
 
-async function loadKeybinds(){
-  // load showShortcuts
-  var keybinds = await Keybinds.fetch();
-
-  for(var key in keybinds){
-    if(Debug.debug)
-      console.log("[settings.js::loadKeybinds] we're looking at this key:", key, "it splits like this:", key.toLowerCase().split("_"));
-    
-    var keypressArr = key.split("_");
-    var opts = keybinds[key];
-    
-    var query = "_kbd_" + opts.action + "_";
-    if(opts.action == "char"){
-      if(opts.targetAr == 2.39)
-        query += ("219_");
-      else if(opts.targetAr == 2.0)
-        query += ("189_");
-      else if(opts.targetAr == 1.78)
-        query += ("169_");
-    }
-    
-    var q2;
-    for(var modKey of Keybinds.mods){
-      q2 = "#" + query + modKey;
-      document.querySelector(q2).checked = keypressArr.indexOf(modKey) != -1;
-    }
-    q2 = "#" + query + "lettr";
-    document.querySelector(q2).value = keypressArr[keypressArr.length - 1].toLowerCase();
-  }
-}
-
-async function saveKeybinds(){
-   
-  var actions = [ "autoar", "fitw", "fith", "reset", "char_219", "char_189", "char_169" ];
-  
-  var savedShortcuts = {};
-  
-  for(var action of actions){
-    var queryBase = "#_kbd_" + action;
-    var letter = document.querySelector(queryBase + "_lettr").value.trim();
-    
-    if(letter === "" || letter === undefined)
-      continue; // we don't make a shortcut for this action
-    
-    var shortcutKeypress = "";
-    
-    for(mod of Keybinds.mods)
-      if(document.querySelector(queryBase + "_" + mod).checked)
-        shortcutKeypress += (mod + "_");
-    
-    shortcutKeypress += letter;
-      
-    savedShortcuts[shortcutKeypress] = {};
-    
-    if(action.startsWith("char_")){
-      savedShortcuts[shortcutKeypress].action = "char";
-      
-      if(action == "char_219")
-        savedShortcuts[shortcutKeypress].targetAr = 2.39;
-      else if(action == "char_189")
-        savedShortcuts[shortcutKeypress].targetAr = 2.0;
-      else if(action == "char_169")
-        savedShortcuts[shortcutKeypress].targetAr = 1.78;
-    }
-    else{
-      savedShortcuts[shortcutKeypress].action = action;
-    }
-  }
-  
-  // out with the old
-  await StorageManager.delopt("keybinds");
-  //in with the new
-  StorageManager.setopt({"keybinds":savedShortcuts});
-}
 
 
 // page init