Fix #611: Documented keyboard shortcuts, list is now available by pressing "h" or in the footer

front/src/components/ShortcutsModal.vue

@@ -0,0 +1,95 @@
+<template>
+  <modal @update:show="$emit('update:show', $event)" :show="show">
+    <header class="header">
+      <translate>Keyboard shortcuts</translate>
+    </header>
+    <section class="scrolling content">
+      <table
+        class="ui compact collapsing basic fixed single line table"
+        v-for="section in sections"
+        :key="section.title">
+      <caption>{{ section.title }}</caption>
+      <tbody>
+        <tr v-for="shortcut in section.shortcuts" :key="shortcut.summary">
+          <td>{{ shortcut.summary }}</td>
+          <td><span class="ui label">{{ shortcut.key }}</span></td>
+        </tr>
+      </tbody>
+      </table>
+    </section>
+    <footer class="actions">
+      <div class="ui cancel button"><translate>Close</translate></div>
+    </footer>
+  </modal>
+</template>
+
+<script>
+import Modal from '@/components/semantic/Modal'
+
+export default {
+  props: ['show'],
+  components: {
+    Modal,
+  },
+  computed: {
+    sections () {
+      return [
+        {
+          title: this.$gettext('General shortcuts'),
+          shortcuts: [
+            {
+              key: 'h',
+              summary: this.$gettext('Show available keyboard shortcuts')
+            }
+          ]
+        },
+        // space.prevent.exact="togglePlay"
+        // ctrl.left.prevent.exact="previous"
+        // ctrl.right.prevent.exact="next"
+        // ctrl.down.prevent.exact="$store.commit('player/incrementVolume', -0.1)"
+        // ctrl.up.prevent.exact="$store.commit('player/incrementVolume', 0.1)"
+        // l.prevent.exact="$store.commit('player/toggleLooping')"
+        // s.prevent.exact="shuffle"
+
+        {
+          title: this.$gettext('Audio player shortcuts'),
+          shortcuts: [
+            {
+              key: 'space',
+              summary: this.$gettext('Pause/play the current track')
+            },
+            {
+              key: 'ctrl left',
+              summary: this.$gettext('Play previous track')
+            },
+            {
+              key: 'ctrl right',
+              summary: this.$gettext('Play next track')
+            },
+            {
+              key: 'ctrl up',
+              summary: this.$gettext('Increase volume')
+            },
+            {
+              key: 'ctrl down',
+              summary: this.$gettext('Decrease volume')
+            },
+            {
+              key: 'l',
+              summary: this.$gettext('Toggle queue looping')
+            },
+            {
+              key: 's',
+              summary: this.$gettext('Shuffle queue')
+            },
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>