mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2025-01-03 00:06:46 +01:00
Update toc menu and media progress display
This commit is contained in:
advplyr
parent
4d29ebd647
commit
3138865d69
@ -325,8 +325,13 @@ export default {
|
||||
if (this.episodeProgress) return this.episodeProgress
|
||||
return this.store.getters['user/getUserMediaProgress'](this.libraryItemId)
|
||||
},
|
||||
useEBookProgress() {
|
||||
if (!this.userProgress || this.userProgress.progress) return false
|
||||
return this.userProgress.ebookProgress > 0
|
||||
},
|
||||
userProgressPercent() {
|
||||
return this.userProgress ? Math.max(this.userProgress.progress || 0, this.userProgress.ebookProgress || 0) : 0
|
||||
if (this.useEBookProgress) return Math.max(Math.min(1, this.userProgress.ebookProgress), 0)
|
||||
return this.userProgress ? Math.max(Math.min(1, this.userProgress.progress), 0) || 0 : 0
|
||||
},
|
||||
itemIsFinished() {
|
||||
return this.userProgress ? !!this.userProgress.isFinished : false
|
||||
|
||||
@ -2,24 +2,20 @@
|
||||
<div class="h-full w-full">
|
||||
<div class="h-full flex items-center">
|
||||
<div style="width: 100px; max-width: 100px" class="h-full flex items-center overflow-x-hidden justify-center">
|
||||
<span v-if="hasPrev"
|
||||
class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl"
|
||||
@mousedown.prevent @click="prev">chevron_left</span>
|
||||
<span v-if="hasPrev" class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl" @mousedown.prevent @click="prev">chevron_left</span>
|
||||
</div>
|
||||
<div id="frame" class="w-full" style="height: 80%">
|
||||
<div id="viewer" class="shadow-md"></div>
|
||||
<div id="viewer"></div>
|
||||
</div>
|
||||
<div style="width: 100px; max-width: 100px" class="h-full flex items-center justify-center overflow-x-hidden">
|
||||
<span v-if="hasNext"
|
||||
class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl"
|
||||
@mousedown.prevent @click="next">chevron_right</span>
|
||||
<span v-if="hasNext" class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl" @mousedown.prevent @click="next">chevron_right</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ePub from "epubjs";
|
||||
import ePub from 'epubjs'
|
||||
|
||||
/**
|
||||
* @typedef {object} EpubReader
|
||||
@ -31,7 +27,7 @@ export default {
|
||||
url: String,
|
||||
libraryItem: {
|
||||
type: Object,
|
||||
default: () => { }
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -39,32 +35,48 @@ export default {
|
||||
/** @type {ePub.Book} */
|
||||
book: null,
|
||||
/** @type {ePub.Rendition} */
|
||||
rendition: null,
|
||||
};
|
||||
rendition: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
/** @returns {string} */
|
||||
libraryItemId() { return this.libraryItem?.id },
|
||||
hasPrev() { return !this.rendition?.location?.atStart },
|
||||
hasNext() { return !this.rendition?.location?.atEnd },
|
||||
libraryItemId() {
|
||||
return this.libraryItem?.id
|
||||
},
|
||||
hasPrev() {
|
||||
return !this.rendition?.location?.atStart
|
||||
},
|
||||
hasNext() {
|
||||
return !this.rendition?.location?.atEnd
|
||||
},
|
||||
/** @returns {Array<ePub.NavItem>} */
|
||||
chapters() { return this.book ? this.book.navigation.toc : [] },
|
||||
chapters() {
|
||||
return this.book ? this.book.navigation.toc : []
|
||||
},
|
||||
userMediaProgress() {
|
||||
if (!this.libraryItemId) return
|
||||
return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId)
|
||||
},
|
||||
localStorageLocationsKey() { return `ebookLocations-${this.libraryItemId}` },
|
||||
localStorageLocationsKey() {
|
||||
return `ebookLocations-${this.libraryItemId}`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
prev() { return this.rendition?.prev() },
|
||||
next() { return this.rendition?.next() },
|
||||
goToChapter(href) { return this.rendition?.display(href) },
|
||||
prev() {
|
||||
return this.rendition?.prev()
|
||||
},
|
||||
next() {
|
||||
return this.rendition?.next()
|
||||
},
|
||||
goToChapter(href) {
|
||||
return this.rendition?.display(href)
|
||||
},
|
||||
keyUp(e) {
|
||||
const rtl = this.book.package.metadata.direction === 'rtl'
|
||||
if ((e.keyCode || e.which) == 37) {
|
||||
return rtl ? this.next() : this.prev();
|
||||
return rtl ? this.next() : this.prev()
|
||||
} else if ((e.keyCode || e.which) == 39) {
|
||||
return rtl ? this.prev() : this.next();
|
||||
return rtl ? this.prev() : this.next()
|
||||
}
|
||||
},
|
||||
/**
|
||||
@ -79,68 +91,68 @@ export default {
|
||||
},
|
||||
/** @param {string} locationString */
|
||||
saveLocations(locationString) {
|
||||
localStorage.setItem(this.localStorageLocationsKey, locationString);
|
||||
localStorage.setItem(this.localStorageLocationsKey, locationString)
|
||||
},
|
||||
hasSavedLocations() {
|
||||
return localStorage.getItem(this.localStorageLocationsKey) !== null;
|
||||
return localStorage.getItem(this.localStorageLocationsKey) !== null
|
||||
},
|
||||
loadLocations() {
|
||||
return localStorage.getItem(this.localStorageLocationsKey);
|
||||
return localStorage.getItem(this.localStorageLocationsKey)
|
||||
},
|
||||
/** @param {string} location - CFI of the new location */
|
||||
relocated(location) {
|
||||
if (location.end.percentage) {
|
||||
this.updateProgress({
|
||||
ebookLocation: location.start.cfi,
|
||||
ebookProgress: location.end.percentage,
|
||||
});
|
||||
ebookProgress: location.end.percentage
|
||||
})
|
||||
} else {
|
||||
this.updateProgress({
|
||||
ebookLocation: location.start.cfi,
|
||||
});
|
||||
ebookLocation: location.start.cfi
|
||||
})
|
||||
}
|
||||
},
|
||||
initEpub() {
|
||||
/** @type {EpubReader} */
|
||||
var reader = this;
|
||||
var reader = this
|
||||
|
||||
/** @type {ePub.Book} */
|
||||
reader.book = new ePub(reader.url, {
|
||||
width: window.innerWidth - 200,
|
||||
height: window.innerHeight - 50,
|
||||
});
|
||||
height: window.innerHeight - 50
|
||||
})
|
||||
|
||||
/** @type {ePub.Rendition} */
|
||||
reader.rendition = reader.book.renderTo("viewer", {
|
||||
reader.rendition = reader.book.renderTo('viewer', {
|
||||
width: window.innerWidth - 200,
|
||||
height: window.innerHeight * 0.8
|
||||
});
|
||||
})
|
||||
|
||||
// load saved progress
|
||||
reader.rendition.display(this.userMediaProgress?.ebookLocation || reader.book.locations.start);
|
||||
reader.rendition.display(this.userMediaProgress?.ebookLocation || reader.book.locations.start)
|
||||
|
||||
// load style
|
||||
reader.rendition.themes.default({ "*": { "color": "#fff!important" } });
|
||||
reader.rendition.themes.default({ '*': { color: '#fff!important' } })
|
||||
|
||||
reader.book.ready.then(() => {
|
||||
// set up event listeners
|
||||
reader.rendition.on('relocated', reader.relocated);
|
||||
reader.rendition.on('relocated', reader.relocated)
|
||||
reader.rendition.on('keydown', reader.keyUp)
|
||||
document.addEventListener('keydown', reader.keyUp, false);
|
||||
document.addEventListener('keydown', reader.keyUp, false)
|
||||
|
||||
// load ebook cfi locations
|
||||
if (this.hasSavedLocations()) {
|
||||
reader.book.locations.load(this.loadLocations());
|
||||
reader.book.locations.load(this.loadLocations())
|
||||
} else {
|
||||
reader.book.locations.generate().then(() => {
|
||||
this.saveLocations(reader.book.locations.save());
|
||||
});
|
||||
this.saveLocations(reader.book.locations.save())
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initEpub();
|
||||
},
|
||||
};
|
||||
this.initEpub()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
<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>
|
||||
<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;">
|
||||
<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>
|
||||
@ -19,24 +17,22 @@
|
||||
<span class="material-icons cursor-pointer text-2xl" @click="close">close</span>
|
||||
</div>
|
||||
|
||||
<component v-if="componentName" ref="readerComponent" :is="componentName" :url="ebookUrl"
|
||||
:library-item="selectedLibraryItem" />
|
||||
<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;">
|
||||
<!-- TOC side nav -->
|
||||
<div v-if="tocOpen" class="w-full h-full fixed inset-0 bg-black/20 z-20" @click.stop.prevent="toggleToC"></div>
|
||||
<div v-if="hasToC" class="w-72 h-full max-h-full absolute top-0 left-0 bg-bg shadow-xl transition-transform z-30" :class="tocOpen ? 'translate-x-0' : '-translate-x-72'" @click.stop.prevent="toggleToC">
|
||||
<div class="p-4 h-full overflow-hidden">
|
||||
<p class="text-lg font-semibold mb-2">Table of Contents</p>
|
||||
<div class="tocContent">
|
||||
<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 v-for="chapter in chapters" :key="chapter.id" class="py-1">
|
||||
<a :href="chapter.href" @click.prevent="$refs.readerComponent.goToChapter(chapter.href)">{{ chapter.label }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -145,13 +141,10 @@ 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')
|
||||
this.tocOpen = !this.tocOpen
|
||||
this.chapters = this.$refs.readerComponent.chapters
|
||||
},
|
||||
openSettings() { },
|
||||
openSettings() {},
|
||||
hotkey(action) {
|
||||
console.log('Reader hotkey', action)
|
||||
if (!this.$refs.readerComponent) return
|
||||
@ -192,4 +185,8 @@ export default {
|
||||
.ebook-viewer {
|
||||
height: calc(100% - 96px);
|
||||
}
|
||||
.tocContent {
|
||||
height: calc(100% - 36px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
@ -156,7 +156,7 @@
|
||||
<div v-if="!isPodcast && progressPercent > 0" class="px-4 py-2 mt-4 bg-primary text-sm font-semibold rounded-md text-gray-100 relative max-w-max mx-auto md:mx-0" :class="resettingProgress ? 'opacity-25' : ''">
|
||||
<p v-if="progressPercent < 1" class="leading-6">{{ $strings.LabelYourProgress }}: {{ Math.round(progressPercent * 100) }}%</p>
|
||||
<p v-else class="text-xs">{{ $strings.LabelFinished }} {{ $formatDate(userProgressFinishedAt, dateFormat) }}</p>
|
||||
<p v-if="progressPercent < 1" class="text-gray-200 text-xs">{{ $getString('LabelTimeRemaining', [$elapsedPretty(userTimeRemaining)]) }}</p>
|
||||
<p v-if="progressPercent < 1 && !useEBookProgress" class="text-gray-200 text-xs">{{ $getString('LabelTimeRemaining', [$elapsedPretty(userTimeRemaining)]) }}</p>
|
||||
<p class="text-gray-400 text-xs pt-1">{{ $strings.LabelStarted }} {{ $formatDate(userProgressStartedAt, dateFormat) }}</p>
|
||||
|
||||
<div v-if="!resettingProgress" class="absolute -top-1.5 -right-1.5 p-1 w-5 h-5 rounded-full bg-bg hover:bg-error border border-primary flex items-center justify-center cursor-pointer" @click.stop="clearProgressClick">
|
||||
@ -471,8 +471,13 @@ export default {
|
||||
const duration = this.userMediaProgress.duration || this.duration
|
||||
return duration - this.userMediaProgress.currentTime
|
||||
},
|
||||
useEBookProgress() {
|
||||
if (!this.userMediaProgress || this.userMediaProgress.progress) return false
|
||||
return this.userMediaProgress.ebookProgress > 0
|
||||
},
|
||||
progressPercent() {
|
||||
return this.userMediaProgress ? Math.max(Math.min(1, Math.max(this.userMediaProgress.progress || 0, this.userMediaProgress.ebookProgress || 0)), 0) : 0
|
||||
if (this.useEBookProgress) return Math.max(Math.min(1, this.userMediaProgress.ebookProgress), 0)
|
||||
return this.userMediaProgress ? Math.max(Math.min(1, this.userMediaProgress.progress), 0) : 0
|
||||
},
|
||||
userProgressStartedAt() {
|
||||
return this.userMediaProgress ? this.userMediaProgress.startedAt : 0
|
||||
|
||||
Loading…
Reference in New Issue
Block a user