mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2025-10-27 11:18:14 +01:00
371 lines
14 KiB
Vue
371 lines
14 KiB
Vue
<template>
|
|
<div class="w-full -mt-6">
|
|
<div class="w-full relative mb-1">
|
|
<div class="absolute -top-10 lg:top-0 right-0 lg:right-2 flex items-center h-full">
|
|
<!-- <span class="material-icons text-2xl cursor-pointer" @click="toggleFullscreen(true)">expand_less</span> -->
|
|
|
|
<ui-tooltip direction="top" :text="$strings.LabelVolume">
|
|
<controls-volume-control ref="volumeControl" v-model="volume" @input="setVolume" class="mx-2 hidden sm:block" />
|
|
</ui-tooltip>
|
|
|
|
<ui-tooltip direction="top" :text="$strings.LabelSleepTimer">
|
|
<button :aria-label="$strings.LabelSleepTimer" class="text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showSleepTimer')">
|
|
<span v-if="!sleepTimerSet" class="material-icons text-2xl">snooze</span>
|
|
<div v-else class="flex items-center">
|
|
<span class="material-icons text-lg text-warning">snooze</span>
|
|
<p class="text-xl text-warning font-mono font-semibold text-center px-0.5 pb-0.5" style="min-width: 30px">{{ sleepTimerRemainingString }}</p>
|
|
</div>
|
|
</button>
|
|
</ui-tooltip>
|
|
|
|
<ui-tooltip v-if="!isPodcast" direction="top" :text="$strings.LabelViewBookmarks">
|
|
<button :aria-label="$strings.LabelViewBookmarks" class="text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showBookmarks')">
|
|
<span class="material-icons text-2xl">{{ bookmarks.length ? 'bookmarks' : 'bookmark_border' }}</span>
|
|
</button>
|
|
</ui-tooltip>
|
|
|
|
<ui-tooltip v-if="chapters.length" direction="top" :text="$strings.LabelViewChapters">
|
|
<button :aria-label="$strings.LabelViewChapters" class="text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="showChapters">
|
|
<span class="material-icons text-2xl">format_list_bulleted</span>
|
|
</button>
|
|
</ui-tooltip>
|
|
|
|
<ui-tooltip v-if="playerQueueItems.length" direction="top" :text="$strings.LabelViewQueue">
|
|
<button :aria-label="$strings.LabelViewQueue" class="outline-none text-gray-300 mx-1 lg:mx-2 hover:text-white" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showPlayerQueueItems')">
|
|
<span class="material-icons text-2.5xl sm:text-3xl">playlist_play</span>
|
|
</button>
|
|
</ui-tooltip>
|
|
|
|
<ui-tooltip v-if="chapters.length" direction="top" :text="useChapterTrack ? $strings.LabelUseFullTrack : $strings.LabelUseChapterTrack">
|
|
<button :aria-label="useChapterTrack ? $strings.LabelUseFullTrack : $strings.LabelUseChapterTrack" class="text-gray-300 mx-1 lg:mx-2 hover:text-white" @mousedown.prevent @mouseup.prevent @click.stop="setUseChapterTrack">
|
|
<span class="material-icons text-2xl sm:text-3xl transform transition-transform" :class="useChapterTrack ? 'rotate-180' : ''">timelapse</span>
|
|
</button>
|
|
</ui-tooltip>
|
|
</div>
|
|
|
|
<player-playback-controls :loading="loading" :seek-loading="seekLoading" :playback-rate.sync="playbackRate" :paused="paused" :has-next-chapter="hasNextChapter" @prevChapter="prevChapter" @nextChapter="nextChapter" @jumpForward="jumpForward" @jumpBackward="jumpBackward" @setPlaybackRate="setPlaybackRate" @playPause="playPause" />
|
|
</div>
|
|
|
|
<player-track-bar ref="trackbar" :loading="loading" :chapters="chapters" :duration="duration" :current-chapter="currentChapter" :playback-rate="playbackRate" @seek="seek" />
|
|
|
|
<div class="flex">
|
|
<p ref="currentTimestamp" class="font-mono text-xxs sm:text-sm text-gray-100 pointer-events-auto">00:00:00</p>
|
|
<p class="font-mono text-sm hidden sm:block text-gray-100 pointer-events-auto"> / {{ progressPercent }}%</p>
|
|
<div class="flex-grow" />
|
|
<p class="text-xs sm:text-sm text-gray-300 pt-0.5">
|
|
{{ currentChapterName }} <span v-if="useChapterTrack" class="text-xs text-gray-400"> ({{ $getString('LabelPlayerChapterNumberMarker', [currentChapterIndex + 1, chapters.length]) }})</span>
|
|
</p>
|
|
<div class="flex-grow" />
|
|
<p class="font-mono text-xxs sm:text-sm text-gray-100 pointer-events-auto">{{ timeRemainingPretty }}</p>
|
|
</div>
|
|
|
|
<modals-chapters-modal v-model="showChaptersModal" :current-chapter="currentChapter" :playback-rate="playbackRate" :chapters="chapters" @select="selectChapter" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
loading: Boolean,
|
|
paused: Boolean,
|
|
chapters: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
bookmarks: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
sleepTimerSet: Boolean,
|
|
sleepTimerRemaining: Number,
|
|
isPodcast: Boolean
|
|
},
|
|
data() {
|
|
return {
|
|
volume: 1,
|
|
playbackRate: 1,
|
|
audioEl: null,
|
|
seekLoading: false,
|
|
showChaptersModal: false,
|
|
currentTime: 0,
|
|
duration: 0,
|
|
useChapterTrack: false
|
|
}
|
|
},
|
|
watch: {
|
|
playbackRate() {
|
|
this.updateTimestamp()
|
|
}
|
|
},
|
|
computed: {
|
|
sleepTimerRemainingString() {
|
|
var rounded = Math.round(this.sleepTimerRemaining)
|
|
if (rounded < 90) {
|
|
return `${rounded}s`
|
|
}
|
|
var minutesRounded = Math.round(rounded / 60)
|
|
if (minutesRounded < 90) {
|
|
return `${minutesRounded}m`
|
|
}
|
|
var hoursRounded = Math.round(minutesRounded / 60)
|
|
return `${hoursRounded}h`
|
|
},
|
|
token() {
|
|
return this.$store.getters['user/getToken']
|
|
},
|
|
timeRemaining() {
|
|
if (this.useChapterTrack && this.currentChapter) {
|
|
var currChapTime = this.currentTime - this.currentChapter.start
|
|
return (this.currentChapterDuration - currChapTime) / this.playbackRate
|
|
}
|
|
return (this.duration - this.currentTime) / this.playbackRate
|
|
},
|
|
timeRemainingPretty() {
|
|
if (this.timeRemaining < 0) {
|
|
return this.$secondsToTimestamp(this.timeRemaining * -1)
|
|
}
|
|
return '-' + this.$secondsToTimestamp(this.timeRemaining)
|
|
},
|
|
progressPercent() {
|
|
const duration = this.useChapterTrack ? this.currentChapterDuration : this.duration
|
|
const time = this.useChapterTrack ? Math.max(this.currentTime - this.currentChapterStart) : this.currentTime
|
|
|
|
if (!duration) return 0
|
|
return Math.round((100 * time) / duration)
|
|
},
|
|
currentChapter() {
|
|
return this.chapters.find((chapter) => chapter.start <= this.currentTime && this.currentTime < chapter.end)
|
|
},
|
|
currentChapterName() {
|
|
return this.currentChapter ? this.currentChapter.title : ''
|
|
},
|
|
currentChapterDuration() {
|
|
if (!this.currentChapter) return 0
|
|
return this.currentChapter.end - this.currentChapter.start
|
|
},
|
|
currentChapterStart() {
|
|
if (!this.currentChapter) return 0
|
|
return this.currentChapter.start
|
|
},
|
|
isFullscreen() {
|
|
return this.$store.state.playerIsFullscreen
|
|
},
|
|
currentChapterIndex() {
|
|
if (!this.currentChapter) return 0
|
|
return this.chapters.findIndex((ch) => ch.id === this.currentChapter.id)
|
|
},
|
|
hasNextChapter() {
|
|
if (!this.chapters.length) return false
|
|
return this.currentChapterIndex < this.chapters.length - 1
|
|
},
|
|
playerQueueItems() {
|
|
return this.$store.state.playerQueueItems || []
|
|
}
|
|
},
|
|
methods: {
|
|
toggleFullscreen(isFullscreen) {
|
|
this.$store.commit('setPlayerIsFullscreen', isFullscreen)
|
|
|
|
var videoPlayerEl = document.getElementById('video-player')
|
|
if (videoPlayerEl) {
|
|
if (isFullscreen) {
|
|
videoPlayerEl.style.width = '100vw'
|
|
videoPlayerEl.style.height = '100vh'
|
|
videoPlayerEl.style.top = '0px'
|
|
videoPlayerEl.style.left = '0px'
|
|
} else {
|
|
videoPlayerEl.style.width = '384px'
|
|
videoPlayerEl.style.height = '216px'
|
|
videoPlayerEl.style.top = 'unset'
|
|
videoPlayerEl.style.bottom = '80px'
|
|
videoPlayerEl.style.left = '16px'
|
|
}
|
|
}
|
|
},
|
|
setDuration(duration) {
|
|
this.duration = duration
|
|
},
|
|
setCurrentTime(time) {
|
|
this.currentTime = time
|
|
this.updateTimestamp()
|
|
if (this.$refs.trackbar) this.$refs.trackbar.setCurrentTime(time)
|
|
},
|
|
playPause() {
|
|
this.$emit('playPause')
|
|
},
|
|
jumpBackward() {
|
|
this.$emit('jumpBackward')
|
|
},
|
|
jumpForward() {
|
|
this.$emit('jumpForward')
|
|
},
|
|
increaseVolume() {
|
|
if (this.volume >= 1) return
|
|
this.volume = Math.min(1, this.volume + 0.1)
|
|
this.setVolume(this.volume)
|
|
},
|
|
decreaseVolume() {
|
|
if (this.volume <= 0) return
|
|
this.volume = Math.max(0, this.volume - 0.1)
|
|
this.setVolume(this.volume)
|
|
},
|
|
setVolume(volume) {
|
|
this.$emit('setVolume', volume)
|
|
},
|
|
toggleMute() {
|
|
if (this.$refs.volumeControl && this.$refs.volumeControl.toggleMute) {
|
|
this.$refs.volumeControl.toggleMute()
|
|
}
|
|
},
|
|
increasePlaybackRate() {
|
|
if (this.playbackRate >= 10) return
|
|
this.playbackRate = Number((this.playbackRate + 0.1).toFixed(1))
|
|
this.setPlaybackRate(this.playbackRate)
|
|
},
|
|
decreasePlaybackRate() {
|
|
if (this.playbackRate <= 0.5) return
|
|
this.playbackRate = Number((this.playbackRate - 0.1).toFixed(1))
|
|
this.setPlaybackRate(this.playbackRate)
|
|
},
|
|
setPlaybackRate(playbackRate) {
|
|
this.$emit('setPlaybackRate', playbackRate)
|
|
},
|
|
selectChapter(chapter) {
|
|
this.seek(chapter.start)
|
|
this.showChaptersModal = false
|
|
},
|
|
setUseChapterTrack() {
|
|
this.useChapterTrack = !this.useChapterTrack
|
|
if (this.$refs.trackbar) this.$refs.trackbar.setUseChapterTrack(this.useChapterTrack)
|
|
|
|
this.$store.dispatch('user/updateUserSettings', { useChapterTrack: this.useChapterTrack })
|
|
this.updateTimestamp()
|
|
},
|
|
checkUpdateChapterTrack() {
|
|
// Changing media in player may not have chapters
|
|
if (!this.chapters.length && this.useChapterTrack) {
|
|
this.useChapterTrack = false
|
|
if (this.$refs.trackbar) this.$refs.trackbar.setUseChapterTrack(this.useChapterTrack)
|
|
}
|
|
},
|
|
seek(time) {
|
|
this.$emit('seek', time)
|
|
},
|
|
restart() {
|
|
this.seek(0)
|
|
},
|
|
prevChapter() {
|
|
if (!this.currentChapter || this.currentChapterIndex === 0) {
|
|
return this.restart()
|
|
}
|
|
var timeInCurrentChapter = this.currentTime - this.currentChapter.start
|
|
if (timeInCurrentChapter <= 3 && this.chapters[this.currentChapterIndex - 1]) {
|
|
var prevChapter = this.chapters[this.currentChapterIndex - 1]
|
|
this.seek(prevChapter.start)
|
|
} else {
|
|
this.seek(this.currentChapter.start)
|
|
}
|
|
},
|
|
nextChapter() {
|
|
if (!this.currentChapter || !this.hasNextChapter) return
|
|
var nextChapter = this.chapters[this.currentChapterIndex + 1]
|
|
this.seek(nextChapter.start)
|
|
},
|
|
setStreamReady() {
|
|
if (this.$refs.trackbar) this.$refs.trackbar.setPercentageReady(1)
|
|
},
|
|
setChunksReady(chunks, numSegments) {
|
|
var largestSeg = 0
|
|
for (let i = 0; i < chunks.length; i++) {
|
|
var chunk = chunks[i]
|
|
if (typeof chunk === 'string') {
|
|
var chunkRange = chunk.split('-').map((c) => Number(c))
|
|
if (chunkRange.length < 2) continue
|
|
if (chunkRange[1] > largestSeg) largestSeg = chunkRange[1]
|
|
} else if (chunk > largestSeg) {
|
|
largestSeg = chunk
|
|
}
|
|
}
|
|
var percentageReady = largestSeg / numSegments
|
|
if (this.$refs.trackbar) this.$refs.trackbar.setPercentageReady(percentageReady)
|
|
},
|
|
updateTimestamp() {
|
|
const ts = this.$refs.currentTimestamp
|
|
if (!ts) {
|
|
console.error('No timestamp el')
|
|
return
|
|
}
|
|
const time = this.useChapterTrack ? Math.max(0, this.currentTime - this.currentChapterStart) : this.currentTime
|
|
ts.innerText = this.$secondsToTimestamp(time / this.playbackRate)
|
|
},
|
|
setBufferTime(bufferTime) {
|
|
if (this.$refs.trackbar) this.$refs.trackbar.setBufferTime(bufferTime)
|
|
},
|
|
showChapters() {
|
|
if (!this.chapters.length) return
|
|
this.showChaptersModal = !this.showChaptersModal
|
|
},
|
|
init() {
|
|
this.playbackRate = this.$store.getters['user/getUserSetting']('playbackRate') || 1
|
|
|
|
const _useChapterTrack = this.$store.getters['user/getUserSetting']('useChapterTrack') || false
|
|
this.useChapterTrack = this.chapters.length ? _useChapterTrack : false
|
|
|
|
if (this.$refs.trackbar) this.$refs.trackbar.setUseChapterTrack(this.useChapterTrack)
|
|
this.setPlaybackRate(this.playbackRate)
|
|
},
|
|
settingsUpdated(settings) {
|
|
if (settings.playbackRate && this.playbackRate !== settings.playbackRate) {
|
|
this.setPlaybackRate(settings.playbackRate)
|
|
}
|
|
},
|
|
closePlayer() {
|
|
if (this.isFullscreen) {
|
|
this.toggleFullscreen(false)
|
|
return
|
|
}
|
|
|
|
if (this.loading) return
|
|
this.$emit('close')
|
|
},
|
|
hotkey(action) {
|
|
if (action === this.$hotkeys.AudioPlayer.PLAY_PAUSE) this.playPause()
|
|
else if (action === this.$hotkeys.AudioPlayer.JUMP_FORWARD) this.jumpForward()
|
|
else if (action === this.$hotkeys.AudioPlayer.JUMP_BACKWARD) this.jumpBackward()
|
|
else if (action === this.$hotkeys.AudioPlayer.VOLUME_UP) this.increaseVolume()
|
|
else if (action === this.$hotkeys.AudioPlayer.VOLUME_DOWN) this.decreaseVolume()
|
|
else if (action === this.$hotkeys.AudioPlayer.MUTE_UNMUTE) this.toggleMute()
|
|
else if (action === this.$hotkeys.AudioPlayer.SHOW_CHAPTERS) this.showChapters()
|
|
else if (action === this.$hotkeys.AudioPlayer.INCREASE_PLAYBACK_RATE) this.increasePlaybackRate()
|
|
else if (action === this.$hotkeys.AudioPlayer.DECREASE_PLAYBACK_RATE) this.decreasePlaybackRate()
|
|
else if (action === this.$hotkeys.AudioPlayer.CLOSE) this.closePlayer()
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$eventBus.$on('player-hotkey', this.hotkey)
|
|
this.$eventBus.$on('user-settings', this.settingsUpdated)
|
|
|
|
this.init()
|
|
},
|
|
beforeDestroy() {
|
|
this.$eventBus.$off('player-hotkey', this.hotkey)
|
|
this.$eventBus.$off('user-settings', this.settingsUpdated)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.loadingTrack {
|
|
animation-name: loadingTrack;
|
|
animation-duration: 1s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
@keyframes loadingTrack {
|
|
0% {
|
|
left: -25%;
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
}
|
|
}
|
|
</style> |