Moved keybinds options to ExtensionConf. Rewrote Keybinds in a bit more OOP way

js/conf/ExtensionConf.js

@@ -107,5 +107,50 @@ var ExtensionConf = {
   },
   colors:{
     //     criticalFail: "background: #fa2; color: #000"
+  },
+  keybinds: {
+    shortcuts: {
+      // automatic
+      "a": {
+        action: "auto-ar",
+      },
+      //#region crop
+      "r": {
+        action: "crop",
+        arg: "reset"
+      },
+      "w": {
+        action: "crop",
+        arg: "fitw"
+      },
+      "e": {
+        action: "crop",
+        arg: "fith"
+      },
+      "s": {
+        action: "crop",
+        arg: 1.78 
+      },
+      "d": {
+        action: "crop",
+        arg: 2.39
+      },
+      "x": {
+        action: "crop",
+        arg: 2.0
+      },
+      //#endregion
+      //#region zoom
+      "z": {
+        action: "zoom",
+        arg: 0.1
+      },
+      "u": {
+        action: "zoom",
+        arg: -0.1
+      }
+      //#endregion
+    },
+    modKeys: ["ctrlKey", "shiftKey", "altKey"]
   }
 }

js/conf/Keybinds.js

@@ -1,150 +1,70 @@
 if(Debug.debug)
   console.log("Loading: Keybinds.js");
 
-var _kbd_ModKeys = ["ctrlKey", "shiftKey", "altKey"];
+class Keybinds {
-var _kbd_keybinds = {};
+  constructor(pageInfo){
+    this.pageInfo = pageInfo;
+  }
 
-var DEFAULT_KEYBINDINGS = {
+  setup(){
-  "w": {
+    var ths = this;
-    action: "fitw"
+    document.addEventListener('keydown',  (event) => ths.handleKeypress(event) );
-  },
-  "e": {
-    action: "fith"
-  },
-  "r": {
-    action: "reset"
-  },
-  "a": {
-    action: "autoar"
-  },
-  "s": {
-    action: "char",
-    targetAr: 1.78 
-  },
-  "d": {
-    action: "char",
-    targetAr: 2.39
-  },
-  "x": {
-    action: "char",
-    targetAr: 2.0
   }
-}
 
-
+  handleKeypress(event) {          // Tukaj ugotovimo, katero tipko smo pritisnili
-var _kbd_process = function (event) {          // Tukaj ugotovimo, katero tipko smo pritisnili
   
-  if(Debug.debug  && Debug.keyboard ){
+    if(Debug.debug  && Debug.keyboard ){
-    console.log("%c[Keybinds::_kbd_process] we pressed a key: ", "color: #ff0", event.key , " | keydown: ", event.keydown, "event:", event);
+      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
-  if( !(PlayerDetect.isFullScreen() || (
-    (document.activeElement.getAttribute("role") != "textbox") &&
-    (document.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 _kbd_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, "_kbd_keybinds:", {kb: _kbd_keybinds} );
-  
-  
-  if(_kbd_keybinds[keypress]){
-    var conf = _kbd_keybinds[keypress];
-    
-    if(Debug.debug && Debug.keyboard)
-      console.log("[Keybinds::_kbd_process] there's an action associated with this keypress. conf:", conf);
-    
-    if(conf.action != "autoar")
-      ArDetect.stop();
-    
-    if(conf.action == "char"){
-      Resizer.setAr(conf.targetAr);
     }
-    else{
+    
-      Resizer.legacyAr(conf.action);
+    // 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
+    if( !(PlayerData.isFullScreen() || (
+      (document.activeElement.getAttribute("role") != "textbox") &&
+      (document.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 ExtensionConf.keybinds.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(ExtensionConf.keybinds.shortcuts[keypress]){
+      var conf = ExtensionConf.keybinds.shortcuts[keypress];
+      
+      if(Debug.debug && Debug.keyboard)
+        console.log("[Keybinds::_kbd_process] there's an action associated with this keypress. conf:", conf);
+      
+      if(conf.action === "crop"){
+        this.pageInfo.stopArDetection();
+        this.pageInfo.setAr(conf.arg);
+      }
+      if(conf.action === "zoom"){
+        this.pageInfo.stopArDetection();
+        this.pageInfo.zoomStep(conf.arg);
+      }
+      if(conf.action === "auto-ar"){
+        this.pageInfo.startArDetection();
+      }
     }
   }
-}
+}
-
-var _kbd_load = async function() {
-  if(Debug.debug)
-    console.log("[Keybinds::_kbd_setup_init] Setting up keybinds");
-  
-  var ret = await StorageManager.getopt_async("keybinds");
-  
-//   var keybinds = ret.keybinds;
-  var keybinds = {};
-  
-  if(Array.isArray(keybinds)){
-    StorageManager.delopt("keybinds");
-    keybinds = DEFAULT_KEYBINDINGS;
-  }
-  
-  if(Debug.debug)
-    console.log("[Keybinds::_kbd_setup_init] loaded keybinds from storage. Do they exist?", keybinds, $.isEmptyObject(keybinds));
-  
-  if( $.isEmptyObject(keybinds) ){
-    keybinds = DEFAULT_KEYBINDINGS;
-    StorageManager.setopt({"keybinds":keybinds});
-    
-    if(Debug.debug)
-      console.log("[Keybinds::_kbd_setup_init] setting keybinds to default", keybinds);
-    
-  }
-  
-  this.keybinds = keybinds;
-  _kbd_keybinds = keybinds; 
-}
-
-var _kbd_setup = async function() {
-  await _kbd_load();
-  
-  document.addEventListener('keydown', _kbd_process);
-}
-
-var _kbd_fetch = async function(){
-  if($.isEmptyObject(_kbd_keybinds)){
-    await _kbd_load();
-  }
-  
-  if(Debug.debug){
-    console.log("[Keybinds::_kbd_fetch] We'll be returning this:", _kbd_keybinds);
-  }
-  
-  return _kbd_keybinds;
-}
-
-
-
-var _kbd_getKeybinds = function(){
-  return _kbd_keybinds;
-}
-
-var Keybinds = {
-  init: _kbd_setup,
-  fetch: _kbd_fetch,
-  mods: _kbd_ModKeys,
-  getKeybinds: _kbd_getKeybinds,
-  keybinds: _kbd_keybinds
-}

js/lib/VideoData.js

@@ -31,11 +31,15 @@ class VideoData {
       this.arDetector.init();
     }
   }
-
+  
   startArDetection() {
     this.arDetector.start();
   }
 
+  stopArDetection() {
+    this.arDetector.stop();
+  }
+
   destroy() {
     this.destroyed = true;
     if(this.arDetector){
@@ -96,4 +100,8 @@ class VideoData {
     this.resizer.setStretchMode(stretchMode);
   }
 
+  zoomStep(step){
+    this.resizer.zoomStep();
+  }
+
 }

js/modules/PageInfo.js

@@ -3,6 +3,8 @@ if(Debug.debug)
 
 class PageInfo {
   constructor(){
+    this.keybinds = new Keybinds(this);
+    this.keybinds.setup();
     this.hasVideos = false;
     this.siteDisabled = false;
     this.videos = [];
@@ -149,7 +151,7 @@ class PageInfo {
   }
 
   initArDetection(){
-    for(var vd in this.videos){
+    for(var vd of this.videos){
       vd.initArDetection();
     }
   }
@@ -172,19 +174,38 @@ class PageInfo {
     }
   }
 
+
+
+  startArDetection(){
+    for(var vd of this.videos){
+      vd.startArDetection();
+    }
+  }
+
+  stopArDetection(){
+    for(var vd of this.videos){
+      vd.stopArDetection();
+    }
+  }
+
   setAr(ar){
     // TODO: find a way to only change aspect ratio for one video
-    for(var vd in this.videos){
+    for(var vd of this.videos){
       vd.setAr(ar)
     }
   }
   
   setStretchMode(sm){
-    for(var vd in this.videos){
+    for(var vd of this.videos){
       vd.setStretchMode(ar)
     }
   }
 
+  setZoom(step){
+    for(var vd of this.videos){
+      vd.zoomStep(step);
+    }
+  }
 }
 
 var RescanReason = {

js/modules/Resizer.js

@@ -161,6 +161,10 @@ class Resizer {
     this.pan = undefined;
   }
 
+  zoomStep(step){
+    this.zoom.zoomStep(step);
+  }
+
   resetZoom(){
     this.zoom.setZoom(1);
     this.restore();

js/modules/Zoom.js

@@ -8,7 +8,7 @@ class Zoom {
   // functions
   constructor(videoData) {
     this.scale = 1;
-    this.scaleStep = 1.2;
+    this.scaleStep = 0.1;
     this.minScale = 0.5;  // not accurate, actually slightly less
     this.maxScale = 8;    // not accurate, actually slightly more
     this.conf = videoData;
@@ -19,15 +19,31 @@ class Zoom {
   }
 
   zoomIn(){
-    if(this.scale >= this.maxScale)
+    this.scale += this.scaleStep;
-      return;
+
-    this.scale *= this.scaleStep;
+    if (this.scale >= this.maxScale) {
+      this.scale = this.maxScale;
+    }
   }
 
   zoomOut(){
-    if(this.scale <= this.minScale)
+    this.scale -= this.scaleStep;
-      return;
+
-    this.scale *= (1/this.scaleStep);
+    if (this.scale <= this.minScale) {
+      this.scale = this.minScale;
+    }
+    
+  }
+
+  zoomStep(amount){
+    this.scale += amount;
+
+    if (this.scale <= this.minScale) {
+      this.scale = this.minScale;
+    }
+    if (this.scale >= this.maxScale) {
+      this.scale = this.maxScale;
+    }
   }
 
   setZoom(scale){

js/uw-bg.js

@@ -24,7 +24,6 @@ async function main(){
     console.log("[uw-bg::main] setting up background script");
   
   await Settings.init();
-  await Keybinds.init();
   Keybinds.keybinds = await Keybinds.fetch();
   
   
@@ -259,4 +258,4 @@ function _uwbg_rcvmsg(message, sender, sendResponse){
 }
 
 
-main();
+// main();

js/uw.js

@@ -19,27 +19,24 @@ async function init(){
     console.log("[uw::main] loading configuration ...");
 
   // load settings
-  var isSlave = true;
+  // var isSlave = true;
-  await Settings.init(isSlave);
+  // await Settings.init(isSlave);
+  await Settings.init();
 
   // za sporočilca poslušamo v vsakem primeru, tudi če je razširitev na spletnem mestu onemogočena
   // we listen for messages in any case, even if extension is disabled on current site. 
-  browser.runtime.onMessage.addListener(receiveMessage);  
+  // browser.runtime.onMessage.addListener(receiveMessage);  
 
-  await SitesConf.init();
+  // await SitesConf.init();
   // če je trenutno mesto onemogočeno, potem zaključimo na tem mestu
   // if current site is disabled, we quit here
   
-  if(! SitesConf.isEnabled(window.location.hostname)){
+  // if(! SitesConf.isEnabled(window.location.hostname)){
-    if(Debug.debug)
+  //   if(Debug.debug)
-      console.log("[uw:main] | site", window.location.hostname, "is blacklisted.");
+  //     console.log("[uw:main] | site", window.location.hostname, "is blacklisted.");
 
-    return;
+  //   return;
-  } 
+  // } 
-
-
-
-  await Keybinds.init();
 
   if(Debug.debug)
     console.log("[uw::main] configuration should be loaded now");
@@ -58,195 +55,110 @@ async function setup(){
   if(Debug.debug){
     console.log("[uw.js::setup] pageInfo initialized. Here's the object:", pageInfo);
   }
-  
+
-  // if(ExtensionConf.arDetect.mode == "blacklist"){
-  //   if(Debug.debug)
-  //     console.log("[uw::main] Aspect ratio detection is enabled (mode=",ExtensionConf.arDetect.mode,"). Starting ArDetect");
-  //   ArDetect.arSetup();
-  // }
-  // else{
-  //   if(Debug.debug)
-  //     console.log("[uw::main] Aspect ratio detection is disabled. Mode:", ExtensionConf.arDetect.mode);
-  // }
-  
-  
-  
 }
 
-
-// tukaj gledamo, ali se je velikost predvajalnika spremenila. Če se je, ponovno prožimo resizer
-// here we check (in the most ghetto way) whether player size has changed. If it has, we retrigger resizer.
-
-// var _video_recheck_counter = 5;
-// var _video_recheck_period = 1;  // on this many retries
-
-// function ghettoOnChange(){
-  
-//   if(_video_recheck_counter++ > _video_recheck_period){
-//     _video_recheck_counter = 0;
-    
-//     if ( GlobalVars.video == null || 
-//          GlobalVars.video == undefined ||
-//          GlobalVars.video.videoWidth == 0 ||
-//          GlobalVars.video.videoHeight == 0 ){
-      
-//       var video = document.getElementsByTagName("video")[0];
-//       if ( video !== undefined &&
-//            video !== null && 
-//            video.videoWidth > 0 &&
-//            video.videoHeight > 0 ){
-//         if(Debug.debug){
-//           console.log("%c[uw::ghettoOnChange] detected video. registering!", "color: #99f, background: #000");
-//           console.log("[uw::ghettoOnChange] just for shits and giggles, let's see what's happened with GlobalVars.playerDimensions:", GlobalVars.playerDimensions)
-//         }
-        
-//         // zaznali smo novo <video> značko. Zaradi tega bomo resetirali GlobalVars.playerDimensions
-//         // a new <video> has been detected. We'll be resetting GlobalVars.playerDimensions
-//         GlobalVars.playerDimensions = PlayerDetect.getPlayerDimensions(video);
-
-//         GlobalVars.video = video;
-//         Comms.sendToBackgroundScript({"cmd":"register-video"});
-//       }
-//     }
-//   }
-  
-//   if(! GlobalVars.video)
-//     return;
-  
-//   if(GlobalVars.playerDimensions == null){
-//     GlobalVars.playerDimensions = PlayerDetect.getPlayerDimensions( GlobalVars.video );
-    
-    
-//     if(GlobalVars.playerDimensions == undefined){
-//       GlobalVars.playerDimensions = null;
-//       return;
-//     }
-//   }
-// }
-
-// function ghettoUrlWatcher(){
-//   if (GlobalVars.lastUrl != window.location.href){
-//     if(Debug.debug){
-//       console.log("[uw::ghettoUrlWatcher] URL has changed. Trying to retrigger autoAr");
-//     }
-    
-//     GlobalVars.video = null;
-//     GlobalVars.lastUrl = window.location.href;
-//     // Resizer.reset();
-//     main();
-//   }
-// }
-
-
-
-
-
-
-
-
 // comms
-function receiveMessage(message, sender, sendResponse) {
+// function receiveMessage(message, sender, sendResponse) {
-  if(Debug.debug)
+//   if(Debug.debug)
-    console.log("[uw::receiveMessage] we received a message.", message);
+//     console.log("[uw::receiveMessage] we received a message.", message);
   
-  if(message.cmd == "has-videos"){
+//   if(message.cmd == "has-videos"){
-    var anyVideos = GlobalVars.video != null;
+//     var anyVideos = GlobalVars.video != null;
     
-    if(Debug.debug)
+//     if(Debug.debug)
-      console.log("[uw::receiveMessage] are there any videos on this page?", anyVideos, GlobalVars.video, this);
+//       console.log("[uw::receiveMessage] are there any videos on this page?", anyVideos, GlobalVars.video, this);
     
-    if(BrowserDetect.usebrowser == "firefox")
+//     if(BrowserDetect.usebrowser == "firefox")
-      return Promise.resolve({response: {"hasVideos": anyVideos }});
+//       return Promise.resolve({response: {"hasVideos": anyVideos }});
 
-    try{
+//     try{
-      sendResponse({response: {"hasVideos":anyVideos}});
+//       sendResponse({response: {"hasVideos":anyVideos}});
-      return true;
+//       return true;
-    }
-    catch(chromeIsShitError){}
-    return;
-  }
-  else if(message.cmd == "get-config"){
-    
-    var config = {};
-    config.videoAlignment = ExtensionConf.miscFullscreenSettings.videoFloat;
-    config.arConf = {};
-    config.arConf.enabled_global = ExtensionConf.arDetect.enabled == "global";
-    
-    
-    var keybinds = Keybinds.getKeybinds();
-    if(Debug.debug)
-      console.log("[uw-bg::_uwbg_rcvmsg] Keybinds.fetch returned this:", keybinds); 
-    
-    config.keyboardShortcuts = keybinds;
-    
-    // predvidevajmo, da je enako. Če je drugače, bomo popravili ko dobimo odgovor
-    // assume current is same as global & change that when you get response from content script
-    config.arConf.enabled_current = ArDetect.isRunning();
-    
-    if(BrowserDetect.usebrowser == "firefox")
-      return Promise.resolve({response: config});
-    
-    try{
-      sendResponse({response: config});
-    }
-    catch(chromeIsShitError){};
-    
-    return true;
-  }
-
-  else if(message.cmd == "force-ar"){
-    if(Debug.debug)
-      console.log("[uw::receiveMessage] we're being commanded to change aspect ratio to", message.newAr);
-    
-    if(message.arType == "legacy"){
-      ArDetect.stop();
-      Resizer.legacyAr(message.newAr);
-    }
-    else{
-      ArDetect.stop();
-      Resizer.setAr(message.newAr);
-    }
-  }
-  else if(message.cmd == "force-video-float"){
-    if(Debug.debug)
-      console.log("[uw::receiveMessage] we're aligning video to", message.newFloat);
-    
-    ExtensionConf.miscFullscreenSettings.videoFloat = message.newFloat;
-    Settings.save(ExtensionConf);
-  }
-  else if(message.cmd == "stop-autoar"){
-    ArDetect.stop();
-  }
-  else if(message.cmd == "update-settings"){
-    if(Debug.debug){
-      console.log("[uw] we got sent new ExtensionConf to abide by:", cmd.newConf);
-    }
-    ExtensionConf = cmd.newConf;
-  }
-//   else if(message.cmd == "enable-autoar"){
-//     if(Debug.debug){
-//       console.log("[uw] enabling autoar.");
 //     }
-//     ExtensionConf.autoAr.mode == "blacklist";
+//     catch(chromeIsShitError){}
+//     return;
+//   }
+//   else if(message.cmd == "get-config"){
+    
+//     var config = {};
+//     config.videoAlignment = ExtensionConf.miscFullscreenSettings.videoFloat;
+//     config.arConf = {};
+//     config.arConf.enabled_global = ExtensionConf.arDetect.enabled == "global";
+    
+    
+//     var keybinds = ExtensionConf.keybinds.shortcuts;
+//     if(Debug.debug)
+//       console.log("[uw-bg::_uwbg_rcvmsg] Keybinds.fetch returned this:", keybinds); 
+    
+//     config.keyboardShortcuts = keybinds;
+    
+//     // predvidevajmo, da je enako. Če je drugače, bomo popravili ko dobimo odgovor
+//     // assume current is same as global & change that when you get response from content script
+//     config.arConf.enabled_current = ArDetect.isRunning();
+    
+//     if(BrowserDetect.usebrowser == "firefox")
+//       return Promise.resolve({response: config});
+    
+//     try{
+//       sendResponse({response: config});
+//     }
+//     catch(chromeIsShitError){};
+    
+//     return true;
+//   }
+
+//   else if(message.cmd == "force-ar"){
+//     if(Debug.debug)
+//       console.log("[uw::receiveMessage] we're being commanded to change aspect ratio to", message.newAr);
+    
+//     if(message.arType == "legacy"){
+//       ArDetect.stop();
+//       Resizer.legacyAr(message.newAr);
+//     }
+//     else{
+//       ArDetect.stop();
+//       Resizer.setAr(message.newAr);
+//     }
+//   }
+//   else if(message.cmd == "force-video-float"){
+//     if(Debug.debug)
+//       console.log("[uw::receiveMessage] we're aligning video to", message.newFloat);
+    
+//     ExtensionConf.miscFullscreenSettings.videoFloat = message.newFloat;
 //     Settings.save(ExtensionConf);
 //   }
-//   else if(message.cmd == "disable-autoar"){
+//   else if(message.cmd == "stop-autoar"){
-//     if(Debug.debug){
+//     ArDetect.stop();
-//       console.log("[uw] disabling autoar.");
-//     }
-//     ExtensionConf.autoAr.mode == "disabled";
-//     Settings.save(ExtensionConf);
 //   }
-  if(message.cmd == "testing"){
+//   else if(message.cmd == "update-settings"){
-    if(Browserdetect.usebrowser = "firefox")
+//     if(Debug.debug){
-      return Promise.resolve({response: "test response hier"});
+//       console.log("[uw] we got sent new ExtensionConf to abide by:", cmd.newConf);
+//     }
+//     ExtensionConf = cmd.newConf;
+//   }
+// //   else if(message.cmd == "enable-autoar"){
+// //     if(Debug.debug){
+// //       console.log("[uw] enabling autoar.");
+// //     }
+// //     ExtensionConf.autoAr.mode == "blacklist";
+// //     Settings.save(ExtensionConf);
+// //   }
+// //   else if(message.cmd == "disable-autoar"){
+// //     if(Debug.debug){
+// //       console.log("[uw] disabling autoar.");
+// //     }
+// //     ExtensionConf.autoAr.mode == "disabled";
+// //     Settings.save(ExtensionConf);
+// //   }
+//   if(message.cmd == "testing"){
+//     if(Browserdetect.usebrowser = "firefox")
+//       return Promise.resolve({response: "test response hier"});
     
-    sendResponse({response: "test response hier"});
+//     sendResponse({response: "test response hier"});
-    return true;
+//     return true;
-  }
+//   }
-}
+// }
 
 
-// $(document).ready(function() {
+init();
-  init();
-// });

manifest.json

@@ -13,7 +13,6 @@
   "content_scripts": [{
     "matches": ["*://*/*"],
     "js": [ 
-    "js/dep/jquery-3.1.1.js",
     "js/dep/chrome/chrome-extension-async.js",
     
     "js/run/GlobalVars.js",
@@ -22,6 +21,7 @@
     "js/lib/Comms.js",
     
     "js/conf/Debug.js",
+    "js/conf/ExtensionConf.js",    
     "js/conf/Settings.js",
     "js/conf/SitesConf.js",
     "js/conf/Status.js",