starred/audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2026-08-07 12:28:50 +02:00
Code Issues 454 Packages Projects Releases 10 Wiki Activity

Merge pull request #1685 from sir-wilhelm/chapter_duration_player_modal

Browse Source 
Adds a player preference to use chapter duration in the chapters modal view
This commit is contained in:
advplyr
2025-11-16 17:51:11 -06:00
committed by GitHub
parent 16eaccc8e3 3d8843109a
commit a6280805e6
1 changed files with 44 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/modals/ChaptersModal.vue
+44 -13
View File
@@ -1,5 +1,5 @@
<template>
<modals-modal v-model="show" :width="400" height="100%">
<modals-modal v-model="show" :width="400" max-width="95%" height="100%">
<template #outer>
<div v-if="currentChapter" class="absolute top-10 left-4 z-40 pt-1" style="max-width: 80%">
<p class="text-white text-lg truncate">{{ chapters.length }} {{ $strings.LabelChapters }}</p>
@@ -8,19 +8,31 @@
<div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
<div ref="container" class="w-full overflow-x-hidden overflow-y-auto bg-secondary rounded-lg border border-fg/20" style="max-height: 75%" @click.stop>
<div class="sticky top-0 z-10 bg-secondary grid grid-cols-[1fr_auto_auto] gap-2 px-3 py-2 border-b border-fg/10 transition-shadow" :class="{ 'shadow-md': isScrolled }">
<div>
<p class="text-fg-muted text-sm">{{ $strings.LabelChapters }}</p>
</div>
<div class="text-right" style="min-width: 60px">
<p class="text-fg-muted text-sm" style="letter-spacing: -0.5px">{{ $strings.LabelStart }}</p>
</div>
<div class="text-right" style="min-width: 60px">
<p class="text-fg-muted text-sm" style="letter-spacing: -0.5px">{{ $strings.LabelDuration }}</p>
</div>
</div>
<ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
<template v-for="chapter in chapters">
<li :key="chapter.id" :id="`chapter-row-${chapter.id}`" class="text-fg select-none relative py-4 cursor-pointer" :class="currentChapterId === chapter.id ? 'bg-primary bg-opacity-80' : ''" role="option" @click="clickedOption(chapter)">
<div class="relative flex items-center pl-3 pr-20">
<p class="font-normal block truncate text-sm text-fg/80">{{ chapter.title }}</p>
<div class="absolute top-0 right-3 -mt-0.5">
<span class="font-mono text-fg-muted leading-3 text-sm" style="letter-spacing: -0.5px">{{ $secondsToTimestamp(chapter.start / _playbackRate) }}</span>
</div>
<li v-for="chapter in chapters" :key="chapter.id" :id="`chapter-row-${chapter.id}`" class="text-fg select-none relative cursor-pointer" :class="currentChapterId === chapter.id ? 'bg-primary bg-opacity-80' : ''" role="option" @click="clickedOption(chapter)">
<div class="grid grid-cols-[1fr_auto_auto] gap-2 px-3 py-3 items-start">
<p class="font-normal line-clamp-2 text-sm text-fg/80">{{ chapter.title }}</p>
<div class="text-right" style="min-width: 60px">
<span class="font-mono text-fg-muted text-sm" style="letter-spacing: -0.5px">{{ $secondsToTimestamp(chapter.start / _playbackRate) }}</span>
</div>
<div class="text-right" style="min-width: 60px">
<span class="font-mono text-fg-muted text-sm" style="letter-spacing: -0.5px">{{ $secondsToTimestamp(Math.max(0, chapter.end - chapter.start) / _playbackRate) }}</span>
</div>
</div>
<div v-show="chapter.id === currentChapterId" class="w-0.5 h-full absolute top-0 left-0 bg-yellow-400" />
</li>
</template>
<div v-show="chapter.id === currentChapterId" class="w-0.5 h-full absolute top-0 left-0 bg-yellow-400" />
</li>
</ul>
</div>
</div>
@@ -42,7 +54,9 @@ export default {
playbackRate: Number
},
data() {
return {}
return {
isScrolled: false
}
},
watch: {
value(newVal) {
@@ -87,8 +101,25 @@ export default {
container.scrollTo({ top: offsetTop - containerHeight / 2 })
}
}
},
handleScroll() {
const container = this.$refs.container
if (container) {
this.isScrolled = container.scrollTop > 0
}
}
},
mounted() {}
mounted() {
const container = this.$refs.container
if (container) {
container.addEventListener('scroll', this.handleScroll)
}
},
beforeDestroy() {
const container = this.$refs.container
if (container) {
container.removeEventListener('scroll', this.handleScroll)
}
}
}
</script>