groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-07-12 04:11:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add jump forwards and jump backwards settings to PlayerSettingsModal

Browse source
This commit is contained in:
Greg Lorenzen 2024-07-06 22:42:23 +00:00
parent 8ac41099b9
commit fa89ed9d87
1 changed files with 32 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

38
client/components/modals/PlayerSettingsModal.vue
View file

@ -1,11 +1,17 @@
<template> <template>
<modals-modal v-model="show" name="player-settings" :width="500" :height="'unset'"> <modals-modal v-model="show" name="player-settings" :width="500" :height="'unset'">
<div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden p-4" style="max-height: 80vh"> <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden p-4" style="max-height: 80vh; min-height: 40vh">
<h3 class="text-xl font-semibold mb-4">Player Settings</h3> <h3 class="text-xl font-semibold mb-8">Player Settings</h3>
<div class="flex items-center"> <div class="flex items-center mb-4">
<ui-toggle-switch v-model="useChapterTrack" @input="setUseChapterTrack" /> <ui-toggle-switch v-model="useChapterTrack" @input="setUseChapterTrack" />
<div class="pl-4"><span>Use Chapter Track</span></div> <div class="pl-4"><span>Use Chapter Track</span></div>
</div> </div>
<div class="flex items-center mb-4">
<ui-dropdown v-model="jumpForwardAmount" :label="$strings.LabelJumpForwardAmount" :value="jumpForwardAmount" :items="jumpValues" @input="setJumpForwardAmount" />
</div>
<div class="flex items-center">
<ui-dropdown v-model="jumpBackwardAmount" :label="$strings.LabelJumpBackwardAmount" :value="jumpBackwardAmount" :items="jumpValues" @input="setJumpBackwardAmount" />
</div>
</div> </div>
</modals-modal> </modals-modal>
</template> </template>
@ -17,7 +23,17 @@ export default {
}, },
data() { data() {
return { return {
useChapterTrack: false useChapterTrack: false,
jumpValues: [
{ text: '10 seconds', value: 10 },
{ text: '15 seconds', value: 15 },
{ text: '30 seconds', value: 30 },
{ text: '1 minute', value: 60 },
{ text: '2 minutes', value: 120 },
{ text: '5 minutes', value: 300 }
],
jumpForwardAmount: 10,
jumpBackwardAmount: 10
} }
}, },
computed: { computed: {
@ -31,12 +47,22 @@ export default {
} }
}, },
methods: { methods: {
setUseChapterTrack(val) { setUseChapterTrack() {
this.$store.dispatch('user/updateUserSettings', { useChapterTrack: this.useChapterTrack }) this.$store.dispatch('user/updateUserSettings', { useChapterTrack: this.useChapterTrack })
},
setJumpForwardAmount(val) {
this.jumpForwardAmount = val
this.$store.dispatch('user/updateUserSettings', { jumpForwardAmount: val })
},
setJumpBackwardAmount(val) {
this.jumpBackwardAmount = val
this.$store.dispatch('user/updateUserSettings', { jumpBackwardAmount: val })
} }
}, },
mounted() { mounted() {
this.useChapterTrack = this.$store.state.user.settings.useChapterTrack this.useChapterTrack = this.$store.getters['user/getUserSetting']('useChapterTrack')
this.jumpForwardAmount = this.$store.getters['user/getUserSetting']('jumpForwardAmount')
this.jumpBackwardAmount = this.$store.getters['user/getUserSetting']('jumpBackwardAmount')
} }
} }
</script> </script>