Handle playback rate increment and decrmenet value in UI

This commit is contained in:
Greg Lorenzen 2025-01-25 01:59:24 +00:00
parent 1ea1e60d4b
commit f258782e2e
2 changed files with 18 additions and 11 deletions

View File

@ -33,6 +33,10 @@ export default {
value: { value: {
type: [String, Number], type: [String, Number],
default: 1 default: 1
},
playbackRateIncrementDecrement: {
type: Number,
default: 0.1
} }
}, },
data() { data() {
@ -58,10 +62,10 @@ export default {
return [0.5, 1, 1.2, 1.5, 2] return [0.5, 1, 1.2, 1.5, 2]
}, },
canIncrement() { canIncrement() {
return this.playbackRate + 0.1 <= this.MAX_SPEED return this.playbackRate + this.playbackRateIncrementDecrement <= this.MAX_SPEED
}, },
canDecrement() { canDecrement() {
return this.playbackRate - 0.1 >= this.MIN_SPEED return this.playbackRate - this.playbackRateIncrementDecrement >= this.MIN_SPEED
} }
}, },
methods: { methods: {
@ -73,14 +77,14 @@ export default {
this.$nextTick(() => this.setShowMenu(false)) this.$nextTick(() => this.setShowMenu(false))
}, },
increment() { increment() {
if (this.playbackRate + 0.1 > this.MAX_SPEED) return if (this.playbackRate + this.playbackRateIncrementDecrement > this.MAX_SPEED) return
var newPlaybackRate = this.playbackRate + 0.1 var newPlaybackRate = this.playbackRate + this.playbackRateIncrementDecrement
this.playbackRate = Number(newPlaybackRate.toFixed(1)) this.playbackRate = Number(newPlaybackRate.toFixed(2))
}, },
decrement() { decrement() {
if (this.playbackRate - 0.1 < this.MIN_SPEED) return if (this.playbackRate - this.playbackRateIncrementDecrement < this.MIN_SPEED) return
var newPlaybackRate = this.playbackRate - 0.1 var newPlaybackRate = this.playbackRate - this.playbackRateIncrementDecrement
this.playbackRate = Number(newPlaybackRate.toFixed(1)) this.playbackRate = Number(newPlaybackRate.toFixed(2))
}, },
updateMenuPositions() { updateMenuPositions() {
if (!this.$refs.wrapper) return if (!this.$refs.wrapper) return

View File

@ -2,7 +2,7 @@
<div class="w-full -mt-6"> <div class="w-full -mt-6">
<div class="w-full relative mb-1"> <div class="w-full relative mb-1">
<div class="absolute -top-10 lg:top-0 right-0 lg:right-2 flex items-center h-full"> <div class="absolute -top-10 lg:top-0 right-0 lg:right-2 flex items-center h-full">
<controls-playback-speed-control v-model="playbackRate" @input="setPlaybackRate" @change="playbackRateChanged" class="mx-2 block" /> <controls-playback-speed-control v-model="playbackRate" @input="setPlaybackRate" @change="playbackRateChanged" :playbackRateIncrementDecrement="playbackRateIncrementDecrement" class="mx-2 block" />
<ui-tooltip direction="bottom" :text="$strings.LabelVolume"> <ui-tooltip direction="bottom" :text="$strings.LabelVolume">
<controls-volume-control ref="volumeControl" v-model="volume" @input="setVolume" class="mx-2 hidden sm:block" /> <controls-volume-control ref="volumeControl" v-model="volume" @input="setVolume" class="mx-2 hidden sm:block" />
@ -180,6 +180,9 @@ export default {
useChapterTrack() { useChapterTrack() {
const _useChapterTrack = this.$store.getters['user/getUserSetting']('useChapterTrack') || false const _useChapterTrack = this.$store.getters['user/getUserSetting']('useChapterTrack') || false
return this.chapters.length ? _useChapterTrack : false return this.chapters.length ? _useChapterTrack : false
},
playbackRateIncrementDecrement() {
return this.$store.getters['user/getUserSetting']('playbackRateIncrementDecrement')
} }
}, },
methods: { methods: {
@ -223,12 +226,12 @@ export default {
}, },
increasePlaybackRate() { increasePlaybackRate() {
if (this.playbackRate >= 10) return if (this.playbackRate >= 10) return
this.playbackRate = Number((this.playbackRate + 0.1).toFixed(1)) this.playbackRate = Number((this.playbackRate + this.playbackRateIncrementDecrement || 0.1).toFixed(2))
this.setPlaybackRate(this.playbackRate) this.setPlaybackRate(this.playbackRate)
}, },
decreasePlaybackRate() { decreasePlaybackRate() {
if (this.playbackRate <= 0.5) return if (this.playbackRate <= 0.5) return
this.playbackRate = Number((this.playbackRate - 0.1).toFixed(1)) this.playbackRate = Number((this.playbackRate - this.playbackRateIncrementDecrement || 0.1).toFixed(2))
this.setPlaybackRate(this.playbackRate) this.setPlaybackRate(this.playbackRate)
}, },
playbackRateChanged(playbackRate) { playbackRateChanged(playbackRate) {