Feat: added keyboard shurtcuts help

Fix: use event.code instead of deprecated event.which
Feat: blur inputs on Esc
Feat: / focuses search fields

dist/htdocs/js/bootstrap-native-v4.js

@@ -836,7 +836,6 @@
           //end patch
           set[i].tagName === 'A' && newSet[push](set[i]);
         }
-        console.log(newSet);
         return newSet;
       })(),
   
@@ -891,6 +890,8 @@
             idx = isSameElement ? 0 
                               : key === 38 ? (idx>1?idx-1:0)
                               : key === 40 ? (idx<menuItems[length]-1?idx+1:idx) : idx;
+            if ( idx == 0 || idx == menuItems[length]-1)
+              break;
           } while ( !menuItems[idx].offsetHeight )
           //end patch
           menuItems[idx] && setFocus(menuItems[idx]);

htdocs/css/mympd.css

@@ -312,3 +312,12 @@ caption {
 #menu-dbupdate {
   padding-left:1rem;
 }
+
+div.key {
+  border: 1px solid #bbb;
+  background-color: #eee;
+  border-radius: 2px;
+  width: 20px;
+  heigth: 20px;
+  text-align: center;
+}

htdocs/index.html

@@ -942,6 +942,31 @@
     </div>
   </div>
 
+  <div class="modal fade" id="modalHelp" tabindex="-1">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title"><span class="material-icons title-icon">keyboard</span> Keyboard Shortcuts</h5>
+          <button type="button" class="close" data-dismiss="modal">&times;</button>          
+        </div>
+        <div class="modal-body">
+          <div class="table-responsive-md">
+            <table class="table table-sm">
+              <thead>
+                <tr><th>Key</th><th>Action</th></tr>
+              </thead>
+              <tbody id="tbodyShortcuts">
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        </div>
+      </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>

htdocs/js/keymap.js

@@ -1,30 +1,28 @@
 var keymap = {
-  "shiftKey": {
+    "ArrowLeft": {"cmd": "clickPrev", "options": [], "action": "Previous Song", "key": "keyboard_arrow_left"},
-    "83": {"cmd": "MPD_API_QUEUE_SHUFFLE", "options": []}, // S
+    "ArrowRight": {"cmd": "clickNext", "options": [], "action": "Next Song", "key": "keyboard_arrow_right"},
-    "67": {"cmd": "MPD_API_QUEUE_CROP", "options": []} // C
+    " ": {"cmd": "clickPlay", "options": [], "action": "Toggle Play / Pause", "key": "space_bar"},
-  },
+    "s": {"cmd": "clickStop", "options": [], "action": "Stop Playing"},
-  "key": {
+    "-": {"cmd": "chVolume", "options": [-5], "action": "Volume Down"},
-    "37": {"cmd": "clickPrev", "options": []}, // cursor left
+    "+": {"cmd": "chVolume", "options": [5], "action": "Volume Up"},
-    "39": {"cmd": "clickNext", "options": []}, // cursor right
+    "c": {"cmd": "MPD_API_QUEUE_CLEAR", "options": [], "action": "Clear Queue"},
-    "32": {"cmd": "clickPlay", "options": []}, // space
+    "u": {"cmd": "updateDB", "options": [], "action": "Update Database"},
-    "83": {"cmd": "clickStop", "options": []}, // s
+    "r": {"cmd": "rescanDB", "options": [], "action": "Rescan Database"},
-    "173": {"cmd": "chVolume", "options": [-5]}, // +
+    "l": {"cmd": "openLocalPlayer", "options": [], "action": "Open Local Player"},
-    "171": {"cmd": "chVolume", "options": [5]}, // - 
+    "p": {"cmd": "updateSmartPlaylists", "options": [], "action": "Update Smart Playlists"},
-    "67": {"cmd": "MPD_API_QUEUE_CLEAR", "options": []}, // c
+    "a": {"cmd": "showAddToPlaylist", "options": ["stream"], "action": "Add Stream"},
-    "85": {"cmd": "updateDB", "options": []}, // u
+    "t": {"cmd": "openModal", "options": ["modalSettings"], "action": "Open Settings"},
-    "82": {"cmd": "rescanDB", "options": []}, // r
+    "y": {"cmd": "openModal", "options": ["modalAbout"], "action": "Open About"},
-    "76": {"cmd": "openLocalPlayer", "options": []}, // l
+    "1": {"cmd": "appGoto", "options": ["Playback"], "action": "Goto Playback"},
-    "80": {"cmd": "updateSmartPlaylists", "options": []}, // p
+    "2": {"cmd": "appGoto", "options": ["Queue"], "action": "Goto Queue"},
-    "65": {"cmd": "showAddToPlaylist", "options": ["stream"]}, // a
+    "3": {"cmd": "appGoto", "options": ["Browse","Database"], "action": "Goto Browse Database"},
-    "84": {"cmd": "openModal", "options": ["modalSettings"]}, // t
+    "4": {"cmd": "appGoto", "options": ["Browse","Playlists"], "action": "Goto Browse Playlists"},
-    "89": {"cmd": "openModal", "options": ["modalAbout"]}, // y
+    "5": {"cmd": "appGoto", "options": ["Browse","Filesystem"], "action": "Goto Browse Filesystem"},
-    "49": {"cmd": "appGoto", "options": ["Playback"]}, // 1
+    "6": {"cmd": "appGoto", "options": ["Search"], "action": "Goto Search"},
-    "50": {"cmd": "appGoto", "options": ["Queue"]}, // 2
+    "m": {"cmd": "openDropdown", "options": ["dropdownMainMenu"], "action": "Open Main Menu"},
-    "51": {"cmd": "appGoto", "options": ["Browse","Database"]}, // 3
+    "v": {"cmd": "openDropdown", "options": ["dropdownVolumeMenu"], "action": "Open Volume Menu"},
-    "52": {"cmd": "appGoto", "options": ["Browse","Playlists"]}, // 4
+    "S": {"cmd": "MPD_API_QUEUE_SHUFFLE", "options": [], "action": "Shuffle Queue"},
-    "53": {"cmd": "appGoto", "options": ["Browse","Filesystem"]}, // 5
+    "C": {"cmd": "MPD_API_QUEUE_CROP", "options": [], "action": "Crop Queue"},
-    "54": {"cmd": "appGoto", "options": ["Search"]}, // 6
+    "?": {"cmd": "openModal", "options": ["modalHelp"], "action": "Open Help"},
-    "77": {"cmd": "openDropdown", "options": ["dropdownMainMenu"]}, // m
+    "/": {"cmd": "focusSearch", "options": [], "action": "Focus Search"}
-    "86": {"cmd": "openDropdown", "options": ["dropdownVolumeMenu"]}, // v
-  }
 }

htdocs/js/mympd.js

@@ -93,6 +93,7 @@ var modalRenamePlaylist = new Modal(document.getElementById('modalRenamePlaylist
 var modalUpdateDB = new Modal(document.getElementById('modalUpdateDB'));
 var modalSaveSmartPlaylist = new Modal(document.getElementById('modalSaveSmartPlaylist'));
 var modalDeletePlaylist = new Modal(document.getElementById('modalDeletePlaylist'));
+var modalHelp = new Modal(document.getElementById('modalHelp'));
 
 var dropdownMainMenu;// = new Dropdown(document.getElementById('mainMenu'));
 var dropdownVolumeMenu = new Dropdown(document.getElementById('volumeMenu'));
@@ -329,16 +330,6 @@ function appInit() {
             icon.innerText = 'keyboard_arrow_right';        
     }, false);
     
-/*    document.addEventListener('keyup', function(event) {
-        if (event.which != 13)
-            return;
-        if (event.target.nodeName == 'A') {
-            event.stopPropagation();
-            event.preventDefault();
-            event.target.click();
-        }
-    }, false);
-*/
     document.getElementById('volumeMenu').parentNode.addEventListener('show.bs.dropdown', function () {
         sendAPI({"cmd": "MPD_API_PLAYER_OUTPUT_LIST"}, parseOutputs);
     });    
@@ -354,6 +345,15 @@ function appInit() {
             document.getElementById('addToPlaylistPlaylist').focus();
     });
 
+    document.getElementById('modalHelp').addEventListener('show.bs.modal', function () {
+        var trs = '';
+        for (var key in keymap) {
+            trs += '<tr><td><div class="key' + (keymap[key].key && keymap[key].key.length > 1 ? ' material-icons material-icons-small' : '') + 
+                   '">' + (keymap[key].key != undefined ? keymap[key].key : key ) + '</div></td><td>' + keymap[key].action + '</td></tr>';
+        }
+        document.getElementById('tbodyShortcuts').innerHTML = trs;
+    });
+
     document.getElementById('modalUpdateDB').addEventListener('hidden.bs.modal', function () {
         document.getElementById('updateDBprogress').classList.remove('updateDBprogressAnimate');
     });
@@ -552,6 +552,9 @@ function appInit() {
     }, false);
 
     document.getElementById('searchqueuestr').addEventListener('keyup', function(event) {
+        if (event.key == 'Escape')
+            this.blur();
+        else
             appGoto(app.current.app, app.current.tab, app.current.view, '0/' + app.current.filter + '/' + this.value);
     }, false);
 
@@ -605,6 +608,9 @@ function appInit() {
     }, false);
 
     document.getElementById('searchstr').addEventListener('keyup', function(event) {
+        if (event.key == 'Escape')
+            this.blur();
+        else
             appGoto('Search', undefined, undefined, '0/' + app.current.filter + '/' + this.value);
     }, false);
 
@@ -632,16 +638,10 @@ function appInit() {
     
     
     document.addEventListener('keydown', function(event) {
-        if (event.target.tagName == 'INPUT' || event.target.tagName == 'SELECT')
+        if (event.target.tagName == 'INPUT' || event.target.tagName == 'SELECT' ||
+            event.ctrlKey || event.altKey)
             return;
-        if (event.ctrlKey || event.altKey)
+        var cmd = keymap[event.key];
-            return;
-        var cmd;
-        if (event.shiftKey)
-            cmd = keymap.shiftKey[event.which];
-        else
-            cmd = keymap.key[event.which];
-        
         if (cmd && typeof window[cmd.cmd] === 'function') {
             event.preventDefault();
             event.stopPropagation();
@@ -2852,6 +2852,15 @@ function openDropdown(dropdown) {
     window[dropdown].toggle();
 }
 
+function focusSearch() {
+    if (app.current.app == 'Queue')
+        document.getElementById('searchqueuestr').focus();
+    else if (app.current.app == 'Search')
+        document.getElementById('searchstr').focus();
+    else
+        appGoto('Search');
+}
+
 function chVolume(increment) {
     var newValue = parseInt(domCache.volumeBar.value) + increment;
     if (newValue < 0)