Newer
Older
Eliot Berriot
committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
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>