<template> <modal @update:show="$emit('update:show', $event)" :show="show"> <header class="header"> <translate translate-context="*/*/*/Noun">Keyboard shortcuts</translate> </header> <section class="scrolling content"> <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="*/*/Button.Label/Verb">Close</translate></div> </footer> </modal> </template> <script> import Modal from '@/components/semantic/Modal' export default { props: ['show'], components: { Modal, }, computed: { general () { return [ { title: this.$pgettext('Popup/Keyboard shortcuts/Title', 'General shortcuts'), shortcuts: [ { 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.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: [ { key: 'space', summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Pause/play the current track') }, { 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 + shift + right', summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Play next track') }, { key: 'shift + up', summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Increase volume') }, { 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') }, { 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') }, ] } ] } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>