Mirrors/audiobookshelf
Mirrors/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-02-01 00:18:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update chapters modal truncate long chapter titles and show chapter duration

Browse Source
This commit is contained in:
advplyr 2022-06-23 17:36:55 -05:00
parent 48431b1c35
commit f4ee215ad8
1 changed files with 7 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,14 @@
<template> <template>
<modals-modal v-model="show" name="chapters" :width="500" :height="'unset'"> <modals-modal v-model="show" name="chapters" :width="600" :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"> <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, index) in chapters"> <template v-for="chap 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)"> <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 }} <p class="truncate" style="max-width: 400px">
{{ chap.title }}
</p>
<span class="font-mono text-xs text-gray-400 pl-2">{{ $elapsedPrettyExtended(chap.end - chap.start) }}</span>
<span class="flex-grow" /> <span class="flex-grow" />
<span class="font-mono text-sm text-gray-300">{{ $secondsToTimestamp(chap.start) }} ({{$secondsToTimestamp(timeToNextChapter(index, chapters))}})</span> <span class="font-mono text-sm text-gray-300">{{ $secondsToTimestamp(chap.start) }}</span>
<div v-show="chap.id === currentChapterId" class="w-0.5 h-full absolute top-0 left-0 bg-yellow-400" /> <div v-show="chap.id === currentChapterId" class="w-0.5 h-full absolute top-0 left-0 bg-yellow-400" />
</div> </div>
@ -55,12 +58,6 @@ export default {
clickChapter(chap) { clickChapter(chap) {
this.$emit('select', 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() { scrollToChapter() {
if (!this.currentChapterId) return if (!this.currentChapterId) return