diff --git a/front/src/components/ShortcutsModal.vue b/front/src/components/ShortcutsModal.vue index 6ccd161fe01ffc5bd12d0e60024f1268c391aebd..080390bfea6bb888827288511704476aec942dda 100644 --- a/front/src/components/ShortcutsModal.vue +++ b/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') }, { diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue index 9ac17cf0897499af1d59abb4157481318b16b650..1f6223e1bd80deb76f031c50923e700568c75b8a 100644 --- a/front/src/components/audio/Player.vue +++ b/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" diff --git a/front/src/components/audio/SearchBar.vue b/front/src/components/audio/SearchBar.vue index 28b11b040d19dec5832cd5eb44971fd0e3a9b764..998a668eccd3c0506d0bd0eb42478c6237b23c00 100644 --- a/front/src/components/audio/SearchBar.vue +++ b/front/src/components/audio/SearchBar.vue @@ -1,19 +1,26 @@ <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>