mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2026-07-14 13:21:39 +00:00
Add PlayerSettingsModal component
Includes a toggle switch for enabling/disabling the chapter track feature.
This commit is contained in:
parent
58b2557404
commit
46fa36e1fc
1 changed files with 42 additions and 0 deletions
42
client/components/modals/PlayerSettingsModal.vue
Normal file
42
client/components/modals/PlayerSettingsModal.vue
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
<template>
|
||||||
|
<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">
|
||||||
|
<h3 class="text-xl font-semibold mb-4">Player Settings</h3>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<ui-toggle-switch v-model="useChapterTrack" @input="setUseChapterTrack" />
|
||||||
|
<div class="pl-4"><span>Use Chapter Track</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</modals-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
value: Boolean
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
useChapterTrack: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
show: {
|
||||||
|
get() {
|
||||||
|
return this.value
|
||||||
|
},
|
||||||
|
set(val) {
|
||||||
|
this.$emit('input', val)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setUseChapterTrack(val) {
|
||||||
|
this.$store.dispatch('user/updateUserSettings', { useChapterTrack: this.useChapterTrack })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.useChapterTrack = this.$store.state.user.settings.useChapterTrack
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue