Added search and seeking shortcuts

front/src/components/ShortcutsModal.vue

@@ -40,12 +40,22 @@ export default {
             {
               key: 'h',
               summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Show available keyboard shortcuts')
-            }
+            },
+            {
+              key: 'shift f',
+              summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Focus searchbar')
+            },
+            {
+              key: 'esc',
+              summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Unfocus searchbar')
+            },
           ]
         },
         // space.prevent.exact="togglePlay"
         // ctrl.left.prevent.exact="previous"
         // ctrl.right.prevent.exact="next"
+        // right.prevent.exact="$store.dispatch('player/updateProgress', (currentTime + 1))"
+        // left.prevent.exact="$store.dispatch('player/updateProgress', (currentTime - 1))"
         // ctrl.down.prevent.exact="$store.commit('player/incrementVolume', -0.1)"
         // ctrl.up.prevent.exact="$store.commit('player/incrementVolume', 0.1)"
         // m.prevent.exact="toggleMute"
@@ -62,19 +72,27 @@ export default {
               summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Pause/play the current track')
             },
             {
-              key: 'ctrl left',
+              key: 'shift left',
               summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Play previous track')
             },
             {
-              key: 'ctrl right',
+              key: 'shift right',
               summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Play next track')
             },
             {
-              key: 'ctrl up',
+              key: 'left',
+              summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek backwards')
+            },
+            {
+              key: 'right',
+              summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek forwards')
+            },
+            {
+              key: 'shift up',
               summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Increase volume')
             },
             {
-              key: 'ctrl down',
+              key: 'shift down',
               summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Decrease volume')
             },
             {

front/src/components/audio/Player.vue

@@ -206,10 +206,12 @@
       </div>
       <GlobalEvents
         @keydown.space.prevent.exact="togglePlay"
-        @keydown.ctrl.left.prevent.exact="previous"
-        @keydown.ctrl.right.prevent.exact="next"
-        @keydown.ctrl.down.prevent.exact="$store.commit('player/incrementVolume', -0.1)"
-        @keydown.ctrl.up.prevent.exact="$store.commit('player/incrementVolume', 0.1)"
+        @keydown.shift.left.prevent.exact="previous"
+        @keydown.shift.right.prevent.exact="next"
+        @keydown.shift.down.prevent.exact="$store.commit('player/incrementVolume', -0.1)"
+        @keydown.shift.up.prevent.exact="$store.commit('player/incrementVolume', 0.1)"
+        @keydown.right.prevent.exact="$store.dispatch('player/updateProgress', (currentTime + 1))"
+        @keydown.left.prevent.exact="$store.dispatch('player/updateProgress', (currentTime - 1))"
         @keydown.m.prevent.exact="toggleMute"
         @keydown.l.prevent.exact="$store.commit('player/toggleLooping')"
         @keydown.s.prevent.exact="shuffle"

front/src/components/audio/SearchBar.vue

 <template>
   <div class="ui fluid category search">
     <slot></slot><div class="ui icon input">
-      <input class="prompt" name="search" :placeholder="labels.placeholder" type="text">
+      <input class="prompt" ref="search" name="search" :placeholder="labels.placeholder" type="text" @keydown.esc="$event.target.blur()">
       <i class="search icon"></i>
     </div>
     <div class="results"></div>
     <slot name="after"></slot>
+    <GlobalEvents
+      @keydown.shift.f.prevent.exact="focusSearch"
+    />
   </div>
 </template>
 
 <script>
 import jQuery from 'jquery'
 import router from '@/router'
+import GlobalEvents from "@/components/utils/global-events"
 
 export default {
+  components: {
+  GlobalEvents,
+  },
   computed: {
     labels () {
       return {
@@ -104,6 +111,11 @@ export default {
         url: this.$store.getters['instance/absoluteUrl']('api/v1/search?query={query}')
       }
     })
+  },
+  methods: {
+    focusSearch () {
+      this.$refs.search.focus()
+    },
   }
 }
 </script>