diff --git a/client/components/AudioPlayer.vue b/client/components/AudioPlayer.vue index 9317c9b4..f505344b 100644 --- a/client/components/AudioPlayer.vue +++ b/client/components/AudioPlayer.vue @@ -12,9 +12,6 @@
format_list_bulleted
-
- format_list_bulleted -
@@ -56,6 +53,11 @@
+
+ +
@@ -68,7 +70,7 @@
@@ -100,7 +102,8 @@ export default { totalDuration: 0, seekedTime: 0, seekLoading: false, - showChaptersModal: false + showChaptersModal: false, + currentTime: 0 } }, computed: { @@ -109,6 +112,18 @@ export default { }, totalDurationPretty() { return this.$secondsToTimestamp(this.totalDuration) + }, + chapterTicks() { + return this.chapters.map((chap) => { + var perc = chap.start / this.totalDuration + return { + title: chap.title, + left: perc * this.trackWidth + } + }) + }, + currentChapter() { + return this.chapters.find((chapter) => chapter.start <= this.currentTime && this.currentTime < chapter.end) } }, methods: { @@ -175,7 +190,13 @@ export default { this.$refs.hoverTimestamp.style.left = offsetX - width / 2 + 'px' } if (this.$refs.hoverTimestampText) { - this.$refs.hoverTimestampText.innerText = this.$secondsToTimestamp(time) + var hoverText = this.$secondsToTimestamp(time) + + var chapter = this.chapters.find((chapter) => chapter.start <= time && time < chapter.end) + if (chapter && chapter.title) { + hoverText += ` - ${chapter.title}` + } + this.$refs.hoverTimestampText.innerText = hoverText } if (this.$refs.trackCursor) { this.$refs.trackCursor.style.opacity = 1 @@ -289,7 +310,6 @@ export default { end: end + offset }) } - return ranges }, getLastBufferedTime() { @@ -334,6 +354,8 @@ export default { this.updateTimestamp() + this.currentTime = this.audioEl.currentTime + var perc = this.audioEl.currentTime / this.audioEl.duration var ptWidth = Math.round(perc * this.trackWidth) if (this.playedTrackWidth === ptWidth) { diff --git a/client/components/app/BookShelf.vue b/client/components/app/BookShelf.vue index 6cd7fdad..a1fa55e7 100644 --- a/client/components/app/BookShelf.vue +++ b/client/components/app/BookShelf.vue @@ -10,8 +10,11 @@
-

Your Audiobookshelf is empty!

- Scan your Audiobooks +

Your Audiobookshelf is empty!

+
+ Configure Scanner + Scan Audiobooks +