Feat: add keymap file to define keyboard shortcuts #58

htdocs/index.html

@@ -941,7 +941,8 @@
       </div>
     </div>
   </div>
-
+  
+  <script src="/js/keymap.min.js"></script>
   <script src="/js/bootstrap-native-v4.min.js"></script>
   <script src="/js/mympd.min.js"></script>
  </body>

htdocs/js/keymap.js

@@ -0,0 +1,25 @@
+var keymap = {
+  "shiftKey": {
+    "83": {"cmd": "MPD_API_QUEUE_SHUFFLE", "options": []}, // S
+    "67": {"cmd": "MPD_API_QUEUE_CROP", "options": []} // C
+  },
+  "key": {
+    "37": {"cmd": "clickPrev", "options": []}, // cursor left
+    "39": {"cmd": "clickNext", "options": []}, // cursor right
+    "32": {"cmd": "clickPlay", "options": []}, // space
+    "83": {"cmd": "clickStop", "options": []}, // s
+    "173": {"cmd": "chVolume", "options": [-5]}, // +
+    "171": {"cmd": "chVolume", "options": [5]}, // - 
+    "67": {"cmd": "MPD_API_QUEUE_CLEAR", "options": []}, // c
+    "85": {"cmd": "updateDB", "options": []}, // u
+    "82": {"cmd": "rescanDB", "options": []}, // r
+    "80": {"cmd": "updateSmartPlaylists", "options": []}, // p
+    "65": {"cmd": "showAddToPlaylist", "options": ["stream"]}, // a
+    "84": {"cmd": "openModal", "options": ["modalSettings"]}, // t
+    "89": {"cmd": "openModal", "options": ["modalAbout"]}, // y
+    "49": {"cmd": "appGoto", "options": ["Playback"]}, // 1
+    "50": {"cmd": "appGoto", "options": ["Queue"]}, // 2
+    "51": {"cmd": "appGoto", "options": ["Browse"]}, // 3
+    "52": {"cmd": "appGoto", "options": ["Search"]} // 4
+  }
+}

htdocs/js/mympd.js

@@ -85,6 +85,7 @@ domCache.btnVoteDown = document.getElementById('btnVoteDown');
 
 var modalConnectionError = new Modal(document.getElementById('modalConnectionError'), { backdrop: 'static', keyboard: false});
 var modalSettings = new Modal(document.getElementById('modalSettings'));
+var modalAbout = new Modal(document.getElementById('modalAbout'));
 var modalSavequeue = new Modal(document.getElementById('modalSaveQueue'));
 var modalSongDetails = new Modal(document.getElementById('modalSongDetails'));
 var modalAddToPlaylist = new Modal(document.getElementById('modalAddToPlaylist'));
@@ -607,59 +608,24 @@ function appInit() {
         sendAPI({"cmd": "MPD_API_PLAYER_STATE"}, parseState);
     }, false);
     
+    
     document.addEventListener('keydown', function(event) {
         if (event.target.tagName == 'INPUT' || event.target.tagName == 'SELECT')
             return;
         if (event.ctrlKey || event.altKey)
             return;
-        if (event.shiftKey) {
-            switch (event.which) {
-                case 83: //S
-                    sendAPI({"cmd": "MPD_API_QUEUE_SHUFFLE"});
-                    break;
-                case 67: //C
-                    sendAPI({"cmd": "MPD_API_QUEUE_CROP"});
-                    break;
-                default:
-                    return;
-            }
-        }
-        else {
-            switch (event.which) {
-                case 37: //left
-                    clickPrev();
-                    break;
-                case 39: //right
-                    clickNext();
-                    break;
-                case 32: //space
-                    clickPlay();
-                    break;
-                case 83: //s
-                    clickStop();
-                    break;
-                case 173: //-
-                    chVolume(-5);
-                    break;
-                case 171: //+
-                    chVolume(5);
-                    break;
-                case 67: //c
-                    sendAPI({"cmd": "MPD_API_QUEUE_CLEAR"});
-                    break;
-                case 85: //u
-                    updateDB();
-                    break;
-                case 82: //r
-                    rescanDB();
-                    break;
-                case 80: //p
-                    updateSmartPlaylists();
-                    break;
-                default:
-                    return;
-            }
-        }
+        var cmd;
+        if (event.shiftKey)
+            cmd = keymap.shiftKey[event.which];
+        else
+            cmd = keymap.key[event.which];
+        
+        if (cmd && typeof window[cmd.cmd] === 'function') {
+            if (cmd.cmd == 'sendAPI')
+                sendAPI(... cmd.options); 
+            else
+                window[cmd.cmd](... cmd.options);                    
+        }        
         event.preventDefault();
     }, false);
     
@@ -2851,6 +2817,10 @@ function gotoTagList() {
     appGoto(app.current.app, app.current.tab, app.current.view, '0/-/');
 }
 
+function openModal(modal) {
+    window[modal].show();
+}
+
 function chVolume(increment) {
     var newValue = parseInt(domCache.volumeBar.value) + increment;
     if (newValue < 0) 

htdocs/sw.js

@@ -7,6 +7,7 @@ var urlsToCache = [
     '/js/bootstrap-native-v4.min.js',
     '/js/mympd.min.js',
     '/js/player.min.js',
+    '/js/keymap.min.js',
     '/assets/appicon-167.png',
     '/assets/appicon-192.png',
     '/assets/appicon-512.png',