(Probably) fixed key shortcuts not working issue, started preparations for settings screen and rebindable keys

README.md

@@ -96,3 +96,9 @@ Keybind `a` just doesn't work at all, so no 16:10.
 
 * The aspect ratio thingy is now also in GUI
 * Fixed code for forcing aspect ratio. At least I think it's fixed now.
+
+###v0.9.9.1
+
+* Keybinds `a` and `w` now work. 
+* Some changes under the bonnet, mostly regarding the way keypresses are handled.
+* 'Settings' page is ~15% done.

js/uw.js

@@ -7,7 +7,7 @@ var zoomStep = 0.05;
 var whatdo_persistence = true;
 var last_whatdo = "reset";
 
-var debugmsg = true;
+var debugmsg = false;
 
 var ctlbar_classnames = ["ytp-chrome-controls"];
 var serviceArray = [".video-stream" ]; //Youtube 
@@ -44,41 +44,146 @@ $("<style>")
     }\
     .show{\
       display: block;\
-    }")
+    }\
+    .uw-ext-settings-bg{\
+      display: none;\
+      position: absolute !important;\
+      width: 100% !important;\
+      height: 100% !important;\
+      z-index: 1000 !important;\
+      \
+      background-color: rgba(0,0,0,0.69) !important;\
+      color: #fff !important; \
+      font-family: 'Oxygen' !important;\
+      text-align: center;\
+      \
+    }\
+    .uw-ext-settings-content{\
+      display: inline-block;\
+      min-width: 75%;\
+      max-width: 90%;\
+      text-align: left;\
+      padding: 2em !important;\
+      font-size: 1.4em;\
+      font-family: 'Oxygen' !important;\
+    }\
+    .uw_top{\
+      z-index: 1337;\
+    }\
+    .uw-h1{\
+      font-size: 4em !important;\
+      color: #f46007 !important;\
+      font-family: 'Oxygen' !important;\
+    }\
+    .uw_settings_tab{\
+      font-size: 1.4em !important;\
+      padding-left: 1em;\
+      color: #ddd !important;\
+    }\
+    .uw_settings_tab:hover{\
+      font-size: 1.6em;\
+      padding-left: 1.6em;\
+      color: #ffdb6e !important;\
+    }\
+    \
+    ")
   .appendTo("head");
-    
+
+var DEFAULT_KEYBINDINGS = [
+  { action: "fit-width",
+    key: 'w',
+    modifiers: []
+  },
+  {
+    action: "fit-height", 
+    key: 'e',
+    modifiers: []
+  },
+  {
+    action: "reset",
+    key: 'r',
+    modifiers: []
+  },
+  {
+    action: "zoom",
+    key: "z",
+    modifiers: []
+  },
+  {
+    action: "unzoom",
+    key: "u",
+    modifiers: []
+  },
+  {
+    action: "char",
+    targetAR: (21/9),
+    key: "d",
+    modifiers: []
+  },
+  {
+    action: "char",
+    targetAR: (16/9),
+    key: "s",
+    modifiers: []
+  },
+  {
+    action: "char",
+    targetAR: (16/10),
+    key: "x",
+    modifiers: []
+  },
+  {
+    action: "char",
+    targetAR: (4/3),
+    key: "a",
+    modifiers: []
+  }
+];
+
 $(document).ready(function() {
   if(debugmsg)
     console.log("==========================================================================================");
   
-  $(document).keypress(function (event) {          // Tukaj ugotovimo, katero tipko smo pritisnili
+  $(document).keydown(function (event) {          // Tukaj ugotovimo, katero tipko smo pritisnili
-    switch (event.key){
+    
-      case 'w':
+    // Tipke upoštevamo samo, če smo v celozaslonskem načinu oz. če ne pišemo komentarja
-        changeCSS("fit","fitw");
+    // v nasprotnem primeru ne naredimo nič.
-        break;
+    // We only take actions if we're in full screen or not writing a comment
-      case 'e':
+    if( !(inFullScreen || (
-        changeCSS("fit","fith");
+         (document.activeElement.getAttribute("role") != "textbox") &&
-        break;
+         (document.activeElement.getAttribute("type") != "text")
-      case 'r':
+    ))){
-        changeCSS("reset","reset");
+      if(debugmsg)
-        break;
+        console.log("We're writing a comment or something. Doing nothing");
-      case 'z':
+      return;
-        changeCSS("fit","zoom");
+    }
-        break;
+    
-      case 'u':
+    console.log("we pressed a key: ", event.key , " | keydown: ", event.keydown);
-        changeCSS("fit","unzoom");
+    
-        break;
+    for(var i = 0; i < DEFAULT_KEYBINDINGS.length; i++){
-      case 'd':
+      if(event.key == DEFAULT_KEYBINDINGS[i].key){
-        changeCSS("char", (21/9));
+        console.log("Key matches!");
-        break;
+        //Tipka se ujema. Preverimo še modifierje:
-      case 's':
+        //Key matches. Let's check if modifiers match, too:
-        changeCSS("char", (16/9));
+        var mods = true;
-        break;
+        for(var j = 0; j < DEFAULT_KEYBINDINGS[i].modifiers.length; j++){
-      case 'a':
+          if(DEFAULT_KEYBINDINGS[i].modifiers[j] == "ctrl")
-        changeCSS("char", (16/10));
+            mods &= event.ctrlKey ;
-        break;
+          else if(DEFAULT_KEYBINDINGS[i].modifiers[j] == "alt")
-      case 'x':
+            mods &= event.altKey ;
-        changeCSS("char", (4/3));
+          else if(DEFAULT_KEYBINDINGS[i].modifiers[j] == "shift")
+            mods &= event.shiftKey ;
+        }
+        console.log("we pressed a key: ", event.key , " | mods match?", mods, "keybinding: ", DEFAULT_KEYBINDINGS[i]);
+        if(mods){
+          if(DEFAULT_KEYBINDINGS[i].action == "char"){
+            changeCSS("char", DEFAULT_KEYBINDINGS[i].targetAR);
+            return;
+          }
+          changeCSS("anything goes", DEFAULT_KEYBINDINGS[i].action);
+          return;
+        }
+      }
     }
   });
   
@@ -145,7 +250,7 @@ function addCtlButtons(provider_id){
     var smenu_ar_options = [];
 
     buttons[5].appendChild(settings_menu);
-    settings_menu.appendChild(smenu_settings);
+//     settings_menu.appendChild(smenu_settings);  //TODO: uncomment that to re-enable settings screen. This line should only be disabled for builds and commits until the settings screen is finalized
     settings_menu.appendChild(smenu_ar);
     settings_menu.appendChild(smenu_reset);
     
@@ -183,6 +288,8 @@ function addCtlButtons(provider_id){
     smenu_ar.innerHTML = "Force aspect ratio";
     smenu_ar.appendChild(smenu_ar_menu);
     
+    smenu_settings.innerHTML = "Settings";
+    
     smenu_ar_options[0].innerHTML = "4:3";
     smenu_ar_options[1].innerHTML = "16:10";    
     smenu_ar_options[2].innerHTML = "16:9";
@@ -204,6 +311,42 @@ function addCtlButtons(provider_id){
     smenu_ar_options[2].onclick = function() { changeCSS("char", (16/9 )) };
     smenu_ar_options[3].onclick = function() { changeCSS("char", (21/9 )) };
     
+    console.log(smenu_settings);
+    smenu_settings.onclick = function() { showSettings() };
+    
+    
+    
+    //BEGIN SETTINGS WINDOW
+    var e_player;
+    
+    if(inIframe())
+      e_player = document.getElementById("player");
+    else
+      e_player = document.getElementById("movie_player");
+      
+      
+    var menu_panel = document.createElement('div');
+    menu_panel.id = "uw_settings_panel";
+    menu_panel.className = "uw-ext-settings-bg";
+
+    var settings_content = document.createElement('div');
+    settings_content.className = "uw-ext-settings-content";
+    settings_content.innerHTML = "<h1 class='uw_top uw-h1'>SETTINGS</h1>\
+    <div class='uw_top uw_settings_tabbar'>\
+      <div class='uw_top uw_settings_tab'>Shortcuts</div>\
+      <!---<div class='uw_top uw_settings_tab'>Customize UI</div>--->\
+      <div class='uw_top uw_settings_tab'>About</div>\
+      <div class='uw_top uw_settings_tab' id='uw_close_settings_view'>Close settings</div>\
+    </div>"
+    
+    
+    
+    
+    e_player.appendChild(menu_panel);
+    menu_panel.appendChild(settings_content);
+    
+    document.getElementById('uw_close_settings_view').onclick = function() { hideSettings() };
+    //END SETTINGS WINDOW
   }
 
   
@@ -212,6 +355,13 @@ function addCtlButtons(provider_id){
     console.log("uw::addCtlButtons | buttons added");
 }
 
+function showSettings(){
+  document.getElementById("uw_settings_panel").style.display = "block";
+}
+function hideSettings(){
+  document.getElementById("uw_settings_panel").style.display = "none";
+}
+
 // Ta funkcija se proži, ko vstopimo ali izstopimo iz celozaslonskega načina
 // This function gets triggered by full screen state change
 function onFullScreenChange(){
@@ -480,7 +630,7 @@ function changeCSS_nofs(what_do, video, player){
   
   var ar = video.width/video.height;
   
-  if(what_do == "fitw"){
+  if(what_do == "fitw" || what_do == "fit-width"){
     // Ker bi bilo lepo, da atribut 'top' spremenimo hkrati z width in height, moramo najprej naračunati,
     // za kakšen faktor se poviša višina. To potrebujemo, da se pravilno izračuna offset.
     // 
@@ -502,7 +652,7 @@ function changeCSS_nofs(what_do, video, player){
     left = 0;            // Ker zavzamemo vso širino | cos we take up all the width
   }
   
-  if(what_do == "fith"){
+  if(what_do == "fith" || what_do == "fit-height"){
     h = player.height;
     w = player.height / video.height * video.width;
     
@@ -552,9 +702,11 @@ function changeCSS_nofs(what_do, video, player){
     left = (player.width - w) / 2;
     
     if (h > player.height * 4){
-      console.log("But this video is ... I mean, it's fucking huge. This is bigger than some rooms, this is bigger than some people's flats!");
+      if(debugmsg){
-      // Insert obligatory omnishambles & coffee machine quote here
+        console.log("But this video is ... I mean, it's fucking huge. This is bigger than some rooms, this is bigger than some people's flats!");
-      console.log("(No really, mate, you took this way too far already. Can't let you do that, Dave.)");
+        // Insert obligatory omnishambles & coffee machine quote here
+        console.log("(No really, mate, you took this way too far already. Can't let you do that, Dave.)");
+      }
       return;
     }
   }
@@ -569,8 +721,10 @@ function changeCSS_nofs(what_do, video, player){
     left = (player.width - w) / 2;
     
     if (h < player.height * 0.25){
-      console.log("don't you think this is small enough already? You don't need to resize the video all the way down to the size smaller than your penis.");
+      if(debugmsg){
-      console.log("(if you're a woman, substitute 'penis' with whatever the female equivalent is.)");
+        console.log("don't you think this is small enough already? You don't need to resize the video all the way down to the size smaller than your penis.");
+        console.log("(if you're a woman, substitute 'penis' with whatever the female equivalent is.)");
+      }
       return;
     }
   }

manifest.json

@@ -2,7 +2,7 @@
   
   "manifest_version": 2,
   "name": "Ultrawidify-git",
-  "version": "0.9.9",
+  "version": "0.9.9.1",
   
   "icons": {
     "32":"icons/uw-32.png",
@@ -15,7 +15,7 @@
   "content_scripts": [
   {
     "matches": ["*://*.youtube.com/*", "*://youtube.com/*", "*://youtu.be/*"],
-    "js": [ "js/jquery.js", "js/uw.js" ],
+    "js": [ "js/jquery-3.1.1.js", "js/uw.js" ],
     "all_frames": true
   }
   ],
@@ -31,10 +31,5 @@
     "img/ytplayer-icons/fith.png",
     "img/ytplayer-icons/reset.png",
     "img/ytplayer-icons/settings.png"
-  ],
+  ]
-  "applications": {
-    "gecko": {
-      "update_url": "https://tamius.net/ultrawidify/updates/updates.json"
-    }
-  }
 }