Skip to content
Snippets Groups Projects
Commit f4365f68 authored by Ciarán Ainsworth's avatar Ciarán Ainsworth
Browse files

Resolve "Add new keyboard shortcuts"

parent dc26da88
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
changes/changelog.d/866.enhancement 0 → 100644
+ 1
− 0
View file @ f4365f68
New keyboard shortcuts added for enhanced control over audio player (#866)
\ No newline at end of file
front/src/components/ShortcutsModal.vue
+ 87
− 22
View file @ f4365f68
......@@ -4,18 +4,36 @@
<translate translate-context="*/*/*/Noun">Keyboard shortcuts</translate>
</header>
<section class="scrolling content">
<table
class="ui compact collapsing basic 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>
<div class="ui stackable two column grid">
<div class="column">
<table
class="ui compact basic table"
v-for="section in player"
: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>
</div>
<div class="column">
<table
class="ui compact basic table"
v-for="section in general"
: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>
</div>
</div>
</section>
<footer class="actions">
<div class="ui cancel button"><translate translate-context="Popup/Keyboard shortcuts/Button.Label/Verb">Close</translate></div>
......@@ -32,7 +50,7 @@ export default {
Modal,
},
computed: {
sections () {
general () {
return [
{
title: this.$pgettext('Popup/Keyboard shortcuts/Title', 'General shortcuts'),
......@@ -40,17 +58,36 @@ 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"
// ctrl.down.prevent.exact="$store.commit('player/incrementVolume', -0.1)"
// ctrl.up.prevent.exact="$store.commit('player/incrementVolume', 0.1)"
// ctrl.shift.left.prevent.exact="previous"
// ctrl.shift.right.prevent.exact="next"
// shift.down.prevent.exact="$store.commit('player/incrementVolume', -0.1)"
// shift.up.prevent.exact="$store.commit('player/incrementVolume', 0.1)"
// right.prevent.exact="seek (5)"
// left.prevent.exact="seek (-5)"
// shift.right.prevent.exact="seek (30)"
// shift.left.prevent.exact="seek (-30)"
// m.prevent.exact="toggleMute"
// l.prevent.exact="$store.commit('player/toggleLooping')"
// s.prevent.exact="shuffle"
// f.prevent.exact="$store.dispatch('favorites/toggle', currentTrack.id)"
// q.prevent.exact="clean"
player () {
return [
{
title: this.$pgettext('Popup/Keyboard shortcuts/Title', 'Audio player shortcuts'),
shortcuts: [
......@@ -59,21 +96,41 @@ export default {
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Pause/play the current track')
},
{
key: 'ctrl left',
key: 'left',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek backwards 5s')
},
{
key: 'right',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek forwards 5s')
},
{
key: 'shift + left',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek backwards 30s')
},
{
key: 'shift + right',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Seek forwards 30s')
},
{
key: 'ctrl + shift + left',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Play previous track')
},
{
key: 'ctrl right',
key: 'ctrl + shift + right',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Play next track')
},
{
key: 'ctrl up',
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')
},
{
key: 'm',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Toggle mute')
},
{
key: 'l',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Toggle queue looping')
......@@ -82,6 +139,14 @@ export default {
key: 's',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Shuffle queue')
},
{
key: 'q',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Clear queue')
},
{
key: 'f',
summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Toggle favorite')
},
]
}
]
......
front/src/components/audio/Player.vue
+ 27
− 4
View file @ f4365f68
......@@ -206,12 +206,19 @@
</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.ctrl.shift.left.prevent.exact="previous"
@keydown.ctrl.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="seek (5)"
@keydown.left.prevent.exact="seek (-5)"
@keydown.shift.right.prevent.exact="seek (30)"
@keydown.shift.left.prevent.exact="seek (-30)"
@keydown.m.prevent.exact="toggleMute"
@keydown.l.prevent.exact="$store.commit('player/toggleLooping')"
@keydown.s.prevent.exact="shuffle"
@keydown.f.prevent.exact="$store.dispatch('favorites/toggle', currentTrack.id)"
@keydown.q.prevent.exact="clean"
/>
</div>
</section>
......@@ -294,6 +301,7 @@ export default {
mute: "player/mute",
unmute: "player/unmute",
clean: "queue/clean",
toggleMute: "player/toggleMute",
}),
async getTrackData (trackData) {
let data = null
......@@ -489,6 +497,21 @@ export default {
}
}
},
seek (step) {
if (step > 0) {
// seek right
if (this.currentTime + step < this.duration) {
this.$store.dispatch('player/updateProgress', (this.currentTime + step))
} else {
this.next() // parenthesis where missing here
}
}
else {
// seek left
let position = Math.max(this.currentTime + step, 0)
this.$store.dispatch('player/updateProgress', position)
}
},
observeProgress: function (enable) {
let self = this
if (enable) {
......
front/src/components/audio/SearchBar.vue
+ 13
− 1
View file @ f4365f68
<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>
......
front/src/store/player.js
+ 9
− 0
View file @ f4365f68
......@@ -109,6 +109,15 @@ export default {
}, 3000)
}
},
toggleMute({commit, state}) {
if (state.volume > 0) {
commit('tempVolume', state.volume)
commit('volume', 0)
}
else {
commit('volume', state.tempVolume)
}
},
trackListened ({commit, rootState}, track) {
if (!rootState.auth.authenticated) {
return
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment