groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-12-10 05:49:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add MediaProgress fields

Browse source 
Add Table of Contents
This commit is contained in:
Vincent Schmandt 2023-03-22 11:16:01 +01:00
parent 6c618d7760
commit 5078818295
No known key found for this signature in database
GPG key ID: FA5B5F9C571C0669
3 changed files with 114 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

58
client/components/readers/Reader.vue
View file

@ -1,24 +1,52 @@
<template>
<div v-if="show" class="w-screen h-screen fixed top-0 left-0 z-60 bg-primary text-white">
<div class="absolute top-4 left-4 z-20">
<span v-if="hasToC && !tocOpen" ref="tocButton" class="material-icons cursor-pointer text-2xl"
@click="toggleToC">menu</span>
</div>
<div class="absolute top-4 left-1/2 transform -translate-x-1/2">
<h1 class="text-2xl mb-1" style="line-height: 1.15; font-weight: 100;">
<span style="font-weight: 600">{{ abTitle }}</span>
<span v-if="abAuthor" style="display: inline"> – </span>
<span v-if="abAuthor">{{ abAuthor }}</span>
</h1>
</div>
<div class="absolute top-4 right-4 z-20">
<span class="material-icons cursor-pointer text-4xl" @click="close">close</span>
<span v-if="hasSettings" class="material-icons cursor-pointer text-2xl" @click="openSettings">settings</span>
<span class="material-icons cursor-pointer text-2xl" @click="close">close</span>
</div>
<div class="absolute top-4 left-4">
<h1 class="text-2xl mb-1">{{ abTitle }}</h1>
<p v-if="abAuthor">by {{ abAuthor }}</p>
<component v-if="componentName" ref="readerComponent" :is="componentName" :url="ebookUrl"
:library-item="selectedLibraryItem" />
<div ref="tocContainer" class="w-full h-full fixed inset-0 invisible ">
<div @click="toggleToC" ref="tocOverlay"
class="w-full h-full duration-500 ease-out transition-all inset-0 absolute bg-gray-900 opacity-0"></div>
<div @click="toggleToC" class="w-96 h-full absolute left-0" style="background: #232323">
<div style="padding: 10px;">
<ul>
<li v-for="chapter in chapters" :key="chapter.id">
<a :href="chapter.href" @click.prevent="$refs.readerComponent.goToChapter(chapter.href)">{{ chapter.label
}}</a>
</li>
</ul>
</div>
</div>
</div>
<component v-if="componentName" ref="readerComponent" :is="componentName" :url="ebookUrl" :library-item="selectedLibraryItem" />
<div class="absolute bottom-2 left-2">{{ ebookType }}</div>
</div>
</template>
<script>
export default {
data() {
return {}
return {
chapters: [],
tocOpen: false
}
},
watch: {
show(newVal) {
@ -43,6 +71,12 @@ export default {
else if (this.ebookType === 'comic') return 'readers-comic-reader'
return null
},
hasToC() {
return this.isEpub
},
hasSettings() {
return false
},
abTitle() {
return this.mediaMetadata.title
},
@ -110,6 +144,14 @@ export default {
}
},
methods: {
toggleToC() {
this.tocOpen = !this.tocOpen;
this.chapters = this.$refs.readerComponent.chapters;
this.$refs.tocContainer.classList.toggle('invisible')
this.$refs.tocOverlay.classList.toggle('opacity-0')
this.$refs.tocOverlay.classList.toggle('opacity-50')
},
openSettings() { },
hotkey(action) {
console.log('Reader hotkey', action)
if (!this.$refs.readerComponent) return