61 lines
1.9 KiB
Vue
61 lines
1.9 KiB
Vue
<template>
|
|
<v-layout row justify-center>
|
|
<v-dialog
|
|
v-model="dialog"
|
|
persistent
|
|
width="350"
|
|
>
|
|
<v-card style="width: 350px">
|
|
<v-card-title class="headline">{{ $t("settings") }}</v-card-title>
|
|
<v-card-text>
|
|
<v-switch
|
|
v-model="darkTheme"
|
|
color="blue"
|
|
:label="$t('darkTheme')"
|
|
></v-switch>
|
|
<div class="mb-7 text-caption">{{ $t("playbackRate") }}</div>
|
|
<v-slider
|
|
v-model="playbackRate"
|
|
color="blue"
|
|
label="color"
|
|
min="0.5"
|
|
max="2"
|
|
step="0.5"
|
|
show-ticks="always"
|
|
thumb-label="always"
|
|
tick-size="4"
|
|
></v-slider>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="primary" flat @click="dialog = false">Ok</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</v-layout>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
dialog: false,
|
|
darkTheme: false,
|
|
playbackRate: 1
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
dialog (val) {
|
|
if (val) {
|
|
this.darkTheme = this.$store.getters.darkTheme;
|
|
this.playbackRate = this.$store.getters.playbackRate;
|
|
}
|
|
},
|
|
|
|
darkTheme (val) { this.$store.commit("setDarkTheme", val); },
|
|
playbackRate (val) { this.$store.commit("setPlaybackRate", val); }
|
|
}
|
|
}
|
|
</script>
|