mirror/advplyr.audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-07-24 21:04:33 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

Moving settings to be user specific, adding playbackRate setting, update playbackRate picker to go up to 3x

Browse source
This commit is contained in:
advplyr 2021-08-23 18:31:04 -05:00
parent 40502aab1e
commit 7ef977b783
22 changed files with 247 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

37
client/components/controls/PlaybackSpeedControl.vue
View file

@ -8,12 +8,24 @@
<div class="arrow-down" />
</div>
<div class="w-full h-full no-scroll flex">
<template v-for="(rate, index) in rates">
<div :key="rate" class="flex items-center justify-center border-black-300 w-11 hover:bg-black hover:bg-opacity-10 cursor-pointer" :class="index < rates.length - 1 ? 'border-r' : ''" style="min-width: 44px; max-width: 44px" @click="set(rate)">
<p class="text-xs text-center font-mono">{{ rate.toFixed(1) }}<span class="text-sm">⨯</span></p>
<div class="w-full h-full no-scroll flex px-7 relative overflow-hidden">
<div class="absolute left-0 top-0 h-full w-7 border-r border-black-300 bg-black-300 rounded-l-lg flex items-center justify-center cursor-pointer" :class="rateIndex === 0 ? 'bg-black-400 text-gray-400' : 'hover:bg-black-200'" @mousedown.prevent @mouseup.prevent @click="leftArrowClick">
<span class="material-icons" style="font-size: 1.2rem">chevron_left</span>
</div>
<div class="overflow-hidden relative" style="width: 220px">
<div class="flex items-center h-full absolute top-0 left-0 transition-transform duration-100" :style="{ transform: `translateX(${xPos}px)` }">
<template v-for="rate in rates">
<div :key="rate" class="h-full border-black-300 w-11 cursor-pointer border-r" :class="value === rate ? 'bg-black-100' : 'hover:bg-black hover:bg-opacity-10'" style="min-width: 44px; max-width: 44px" @click="set(rate)">
<div class="w-full h-full flex justify-center items-center">
<p class="text-xs text-center font-mono">{{ rate }}<span class="text-sm">⨯</span></p>
</div>
</div>
</template>
</div>
</template>
</div>
<div class="absolute top-0 right-0 h-full w-7 bg-black-300 rounded-r-lg flex items-center justify-center cursor-pointer" :class="rateIndex === rates.length - numVisible ? 'bg-black-400 text-gray-400' : 'hover:bg-black-200'" @mousedown.prevent @mouseup.prevent @click="rightArrowClick">
<span class="material-icons" style="font-size: 1.2rem">chevron_right</span>
</div>
</div>
</div>
</div>
@ -29,7 +41,9 @@ export default {
},
data() {
return {
showMenu: false
showMenu: false,
rateIndex: 1,
numVisible: 5
}
},
computed: {
@ -42,7 +56,10 @@ export default {
}
},
rates() {
return [0.5, 0.8, 1.0, 1.3, 1.5, 2.0]
return [0.25, 0.5, 0.8, 1, 1.3, 1.5, 2, 2.5, 3]
},
xPos() {
return -1 * this.rateIndex * 44
}
},
methods: {
@ -55,6 +72,12 @@ export default {
this.playbackRate = newPlaybackRate
if (hasChanged) this.$emit('change', newPlaybackRate)
this.showMenu = false
},
leftArrowClick() {
this.rateIndex = Math.max(0, this.rateIndex - 4)
},
rightArrowClick() {
this.rateIndex = Math.min(this.rates.length - this.numVisible, this.rateIndex + 4)
}
},
mounted() {}