extern/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2024-10-05 17:52:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

add support for showing chapter duration in chapters modal

Browse Source
This commit is contained in:
jmt-gh 2022-06-22 18:58:57 -07:00
parent ce961f90ba
commit 48431b1c35
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/components/modals/ChaptersModal.vue
View File

@ -1,11 +1,11 @@
<template>
<modals-modal v-model="show" name="chapters" :width="500" :height="'unset'">
<div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
<template v-for="chap in chapters">
<template v-for="(chap, index) in chapters">
<div :key="chap.id" :id="`chapter-row-${chap.id}`" class="flex items-center px-6 py-3 justify-start cursor-pointer hover:bg-bg relative" :class="chap.id === currentChapterId ? 'bg-yellow-400 bg-opacity-10' : chap.end <= currentChapterStart ? 'bg-success bg-opacity-5' : 'bg-opacity-20'" @click="clickChapter(chap)">
{{ chap.title }}
<span class="flex-grow" />
<span class="font-mono text-sm text-gray-300">{{ $secondsToTimestamp(chap.start) }}</span>
<span class="font-mono text-sm text-gray-300">{{ $secondsToTimestamp(chap.start) }} ({{$secondsToTimestamp(timeToNextChapter(index, chapters))}})</span>
<div v-show="chap.id === currentChapterId" class="w-0.5 h-full absolute top-0 left-0 bg-yellow-400" />
</div>
@ -55,6 +55,12 @@ export default {
clickChapter(chap) {
this.$emit('select', chap)
},
timeToNextChapter(index,chapters) {
if (index + 1 == chapters.length) {
return chapters[index].end - chapters[index].start
}
return chapters[index+1].start - chapters[index].start
},
scrollToChapter() {
if (!this.currentChapterId) return