mirror/advplyr.audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-08-01 16:54:59 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Add:Support volumes with decimal #196, Change:Time remaining adjusted for current playback rate, Change:Series bookshelf shows shelf label with series name, Fix:Search bookshelf UI, Add:Show current chapter under audio track, Change: Highlight colors for chapters modal

Browse source
This commit is contained in:
advplyr 2021-11-26 15:46:07 -06:00
parent 24d2e09724
commit ad8670aeb4
12 changed files with 101 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

23
client/components/AudioPlayer.vue
View file

@ -1,12 +1,12 @@
<template>
<div class="w-full -mt-4">
<div class="w-full relative mb-2">
<div class="absolute top-0 left-0 w-full h-full bg-red flex items-end pointer-events-none">
<div class="w-full -mt-6">
<div class="w-full relative mb-1">
<!-- <div class="absolute top-0 left-0 w-full h-full bg-red flex items-end pointer-events-none">
<p ref="currentTimestamp" class="font-mono text-sm text-gray-100 pointer-events-auto">00:00:00</p>
<p class="font-mono text-sm text-gray-100 pointer-events-auto">&nbsp;/&nbsp;{{ progressPercent }}%</p>
<div class="flex-grow" />
<p class="font-mono text-sm text-gray-100 pointer-events-auto">{{ timeRemainingPretty }}</p>
</div>
</div> -->
<div v-if="chapters.length" class="hidden md:flex absolute right-20 top-0 bottom-0 h-full items-end">
<div class="cursor-pointer text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="showChapters">
@ -59,7 +59,7 @@
</div>
<div ref="track" class="w-full h-2 relative overflow-hidden">
<template v-for="(tick, index) in chapterTicks">
<div :key="index" :style="{ left: tick.left + 'px' }" class="absolute top-0 w-px bg-white bg-opacity-50 h-1 pointer-events-none" />
<div :key="index" :style="{ left: tick.left + 'px' }" class="absolute top-0 w-px bg-white bg-opacity-30 h-1 pointer-events-none" />
</template>
</div>
@ -73,6 +73,14 @@
</div>
</div>
</div>
<div class="flex">
<p ref="currentTimestamp" class="font-mono text-sm text-gray-100 pointer-events-auto">00:00:00</p>
<p class="font-mono text-sm text-gray-100 pointer-events-auto">&nbsp;/&nbsp;{{ progressPercent }}%</p>
<div class="flex-grow" />
<p class="text-sm text-gray-300 pt-0.5">{{ currentChapterName }}</p>
<div class="flex-grow" />
<p class="font-mono text-sm text-gray-100 pointer-events-auto">{{ timeRemainingPretty }}</p>
</div>
<audio ref="audio" @progress="progress" @timeupdate="timeupdate" @loadedmetadata="audioLoadedMetadata" @loadeddata="audioLoadedData" @play="audioPlayed" @pause="audioPaused" @error="audioError" @ended="audioEnded" @stalled="audioStalled" @suspend="audioSuspended" />
@ -131,7 +139,7 @@ export default {
},
timeRemaining() {
if (!this.audioEl) return 0
return this.totalDuration - this.currentTime
return (this.totalDuration - this.currentTime) / this.playbackRate
},
timeRemainingPretty() {
if (this.timeRemaining < 0) {
@ -156,6 +164,9 @@ export default {
currentChapter() {
return this.chapters.find((chapter) => chapter.start <= this.currentTime && this.currentTime < chapter.end)
},
currentChapterName() {
return this.currentChapter ? this.currentChapter.title : ''
},
showExperimentalFeatures() {
return this.$store.state.showExperimentalFeatures
}