mirror of
https://github.com/advplyr/audiobookshelf-app.git
synced 2025-07-09 13:34:44 +02:00
415 lines
No EOL
16 KiB
Vue
415 lines
No EOL
16 KiB
Vue
<template>
|
|
<div class="w-full h-full px-3 py-4 overflow-y-auto">
|
|
<div class="flex">
|
|
<div class="w-32">
|
|
<div class="relative">
|
|
<covers-book-cover :library-item="libraryItem" :width="128" :book-cover-aspect-ratio="bookCoverAspectRatio" />
|
|
<div v-if="!isPodcast" class="absolute bottom-0 left-0 h-1.5 shadow-sm z-10" :class="userIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: 128 * progressPercent + 'px' }"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow px-3">
|
|
<h1 class="text-lg">{{ title }}</h1>
|
|
<!-- <h3 v-if="series" class="font-book text-gray-300 text-lg leading-7">{{ seriesText }}</h3> -->
|
|
<p class="text-sm text-gray-400">by {{ author }}</p>
|
|
<p v-if="numTracks" class="text-gray-300 text-sm my-1">
|
|
{{ $elapsedPretty(duration) }}
|
|
<span v-if="!isLocal" class="px-4">{{ $bytesPretty(size) }}</span>
|
|
</p>
|
|
<p v-if="numTracks" class="text-gray-300 text-sm my-1">{{ numTracks }} Tracks</p>
|
|
|
|
<div v-if="!isPodcast && progressPercent > 0" class="px-4 py-2 bg-primary text-sm font-semibold rounded-md text-gray-200 mt-4 relative" :class="resettingProgress ? 'opacity-25' : ''">
|
|
<p class="leading-6">Your Progress: {{ Math.round(progressPercent * 100) }}%</p>
|
|
<p v-if="progressPercent < 1" class="text-gray-400 text-xs">{{ $elapsedPretty(userTimeRemaining) }} remaining</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">
|
|
<span class="material-icons text-sm">close</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="isLocal" class="flex mt-4">
|
|
<ui-btn color="success" :disabled="isPlaying" class="flex items-center justify-center flex-grow mr-2" :padding-x="4" @click="playClick">
|
|
<span v-show="!isPlaying" class="material-icons">play_arrow</span>
|
|
<span class="px-1 text-sm">{{ isPlaying ? 'Playing' : 'Play' }}</span>
|
|
</ui-btn>
|
|
<ui-btn v-if="showRead && isConnected" color="info" class="flex items-center justify-center mr-2" :class="showPlay ? '' : 'flex-grow'" :padding-x="2" @click="readBook">
|
|
<span class="material-icons">auto_stories</span>
|
|
<span v-if="!showPlay" class="px-2 text-base">Read {{ ebookFormat }}</span>
|
|
</ui-btn>
|
|
<ui-read-icon-btn v-if="!isPodcast" :disabled="isProcessingReadUpdate" :is-read="userIsFinished" class="flex items-center justify-center" @click="toggleFinished" />
|
|
</div>
|
|
<div v-else-if="(user && (showPlay || showRead)) || hasLocal" class="flex mt-4">
|
|
<ui-btn v-if="showPlay" color="success" :disabled="isPlaying" class="flex items-center justify-center flex-grow mr-2" :padding-x="4" @click="playClick">
|
|
<span v-show="!isPlaying" class="material-icons">play_arrow</span>
|
|
<span class="px-1 text-sm">{{ isPlaying ? (isStreaming ? 'Streaming' : 'Playing') : hasLocal ? 'Play' : 'Stream' }}</span>
|
|
</ui-btn>
|
|
<ui-btn v-if="showRead && user" color="info" class="flex items-center justify-center mr-2" :class="showPlay ? '' : 'flex-grow'" :padding-x="2" @click="readBook">
|
|
<span class="material-icons">auto_stories</span>
|
|
<span v-if="!showPlay" class="px-2 text-base">Read {{ ebookFormat }}</span>
|
|
</ui-btn>
|
|
<ui-btn v-if="user && showPlay && !isIos && !hasLocal" :color="downloadItem ? 'warning' : 'primary'" class="flex items-center justify-center mr-2" :padding-x="2" @click="downloadClick">
|
|
<span class="material-icons" :class="downloadItem ? 'animate-pulse' : ''">{{ downloadItem ? 'downloading' : 'download' }}</span>
|
|
</ui-btn>
|
|
<ui-read-icon-btn v-if="!isPodcast" :disabled="isProcessingReadUpdate" :is-read="userIsFinished" class="flex items-center justify-center" @click="toggleFinished" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="downloadItem" class="py-3">
|
|
<p class="text-center text-lg">Downloading! ({{ Math.round(downloadItem.itemProgress * 100) }}%)</p>
|
|
</div>
|
|
|
|
<div class="w-full py-4">
|
|
<p class="text-sm">{{ description }}</p>
|
|
</div>
|
|
|
|
<tables-podcast-episodes-table v-if="isPodcast" :library-item-id="libraryItemId" :local-library-item-id="localLibraryItemId" :episodes="episodes" :local-episodes="localLibraryItemEpisodes" :is-local="isLocal" />
|
|
|
|
<modals-select-local-folder-modal v-model="showSelectLocalFolder" :media-type="mediaType" @select="selectedLocalFolder" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Dialog } from '@capacitor/dialog'
|
|
import { AbsFileSystem, AbsDownloader } from '@/plugins/capacitor'
|
|
|
|
export default {
|
|
async asyncData({ store, params, redirect, app }) {
|
|
var libraryItemId = params.id
|
|
var libraryItem = null
|
|
console.log(libraryItemId)
|
|
if (libraryItemId.startsWith('local')) {
|
|
libraryItem = await app.$db.getLocalLibraryItem(libraryItemId)
|
|
console.log('Got lli', libraryItem)
|
|
} else if (store.state.user.serverConnectionConfig) {
|
|
libraryItem = await app.$axios.$get(`/api/items/${libraryItemId}?expanded=1`).catch((error) => {
|
|
console.error('Failed', error)
|
|
return false
|
|
})
|
|
// Check if
|
|
if (libraryItem) {
|
|
var localLibraryItem = await app.$db.getLocalLibraryItemByLLId(libraryItemId)
|
|
if (localLibraryItem) {
|
|
console.log('Library item has local library item also', localLibraryItem.id)
|
|
libraryItem.localLibraryItem = localLibraryItem
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!libraryItem) {
|
|
console.error('No item...', params.id)
|
|
return redirect('/')
|
|
}
|
|
return {
|
|
libraryItem
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
resettingProgress: false,
|
|
isProcessingReadUpdate: false,
|
|
showSelectLocalFolder: false
|
|
}
|
|
},
|
|
computed: {
|
|
isIos() {
|
|
return this.$platform === 'ios'
|
|
},
|
|
isLocal() {
|
|
return this.libraryItem.isLocal
|
|
},
|
|
hasLocal() {
|
|
// Server library item has matching local library item
|
|
return this.isLocal || this.libraryItem.localLibraryItem
|
|
},
|
|
localLibraryItem() {
|
|
if (this.isLocal) return this.libraryItem
|
|
return this.libraryItem.localLibraryItem || null
|
|
},
|
|
localLibraryItemId() {
|
|
return this.localLibraryItem ? this.localLibraryItem.id : null
|
|
},
|
|
localLibraryItemEpisodes() {
|
|
if (!this.isPodcast || !this.localLibraryItem) return []
|
|
var podcastMedia = this.localLibraryItem.media
|
|
return podcastMedia ? podcastMedia.episodes || [] : []
|
|
},
|
|
isConnected() {
|
|
return this.$store.state.socketConnected
|
|
},
|
|
bookCoverAspectRatio() {
|
|
return this.$store.getters['getBookCoverAspectRatio']
|
|
},
|
|
libraryItemId() {
|
|
return this.libraryItem.id
|
|
},
|
|
mediaType() {
|
|
return this.libraryItem.mediaType
|
|
},
|
|
isPodcast() {
|
|
return this.mediaType == 'podcast'
|
|
},
|
|
media() {
|
|
return this.libraryItem.media || {}
|
|
},
|
|
mediaMetadata() {
|
|
return this.media.metadata || {}
|
|
},
|
|
title() {
|
|
return this.mediaMetadata.title
|
|
},
|
|
author() {
|
|
if (this.isPodcast) return this.mediaMetadata.author
|
|
return this.mediaMetadata.authorName
|
|
},
|
|
description() {
|
|
return this.mediaMetadata.description || ''
|
|
},
|
|
series() {
|
|
return this.mediaMetadata.series || []
|
|
},
|
|
duration() {
|
|
return this.media.duration
|
|
},
|
|
size() {
|
|
return this.media.size
|
|
},
|
|
user() {
|
|
return this.$store.state.user.user
|
|
},
|
|
userToken() {
|
|
return this.$store.getters['user/getToken']
|
|
},
|
|
userItemProgress() {
|
|
if (this.isLocal) return this.$store.getters['globals/getLocalMediaProgressById'](this.libraryItemId)
|
|
return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId)
|
|
},
|
|
userIsFinished() {
|
|
return this.userItemProgress ? !!this.userItemProgress.isFinished : false
|
|
},
|
|
userTimeRemaining() {
|
|
if (!this.userItemProgress) return 0
|
|
var duration = this.userItemProgress.duration || this.duration
|
|
return duration - this.userItemProgress.currentTime
|
|
},
|
|
progressPercent() {
|
|
return this.userItemProgress ? Math.max(Math.min(1, this.userItemProgress.progress), 0) : 0
|
|
},
|
|
userProgressStartedAt() {
|
|
return this.userItemProgress ? this.userItemProgress.startedAt : 0
|
|
},
|
|
userProgressFinishedAt() {
|
|
return this.userItemProgress ? this.userItemProgress.finishedAt : 0
|
|
},
|
|
isStreaming() {
|
|
return this.isPlaying && !this.$store.state.playerIsLocal
|
|
},
|
|
isPlaying() {
|
|
return this.$store.getters['getIsItemStreaming'](this.libraryItemId)
|
|
},
|
|
numTracks() {
|
|
if (!this.media.tracks) return 0
|
|
return this.media.tracks.length || 0
|
|
},
|
|
isMissing() {
|
|
return this.libraryItem.isMissing
|
|
},
|
|
isIncomplete() {
|
|
return this.libraryItem.isIncomplete
|
|
},
|
|
showPlay() {
|
|
return !this.isMissing && !this.isIncomplete && this.numTracks
|
|
},
|
|
showRead() {
|
|
return this.ebookFile && this.ebookFormat !== 'pdf'
|
|
},
|
|
ebookFile() {
|
|
return this.media.ebookFile
|
|
},
|
|
ebookFormat() {
|
|
if (!this.ebookFile) return null
|
|
return this.ebookFile.ebookFormat
|
|
},
|
|
hasStoragePermission() {
|
|
return this.$store.state.hasStoragePermission
|
|
},
|
|
downloadItem() {
|
|
return this.$store.getters['globals/getDownloadItem'](this.libraryItemId)
|
|
},
|
|
episodes() {
|
|
return this.media.episodes || []
|
|
}
|
|
},
|
|
methods: {
|
|
readBook() {
|
|
this.$store.commit('openReader', this.libraryItem)
|
|
},
|
|
playClick() {
|
|
// Todo: Allow playing local or streaming
|
|
if (this.hasLocal) return this.$eventBus.$emit('play-item', { libraryItemId: this.localLibraryItem.id })
|
|
this.$eventBus.$emit('play-item', { libraryItemId: this.libraryItemId })
|
|
},
|
|
async clearProgressClick() {
|
|
const { value } = await Dialog.confirm({
|
|
title: 'Confirm',
|
|
message: 'Are you sure you want to reset your progress?'
|
|
})
|
|
if (value) {
|
|
this.resettingProgress = true
|
|
if (this.isLocal) {
|
|
// TODO: If connected to server also sync with server
|
|
await this.$db.removeLocalMediaProgress(this.libraryItemId)
|
|
this.$store.commit('globals/removeLocalMediaProgress', this.libraryItemId)
|
|
} else {
|
|
var progressId = this.userItemProgress.id
|
|
await this.$axios
|
|
.$delete(`/api/me/progress/${this.libraryItemId}`)
|
|
.then(() => {
|
|
console.log('Progress reset complete')
|
|
this.$toast.success(`Your progress was reset`)
|
|
this.$store.commit('user/removeMediaProgress', progressId)
|
|
})
|
|
.catch((error) => {
|
|
console.error('Progress reset failed', error)
|
|
})
|
|
}
|
|
|
|
this.resettingProgress = false
|
|
}
|
|
},
|
|
itemUpdated(libraryItem) {
|
|
if (libraryItem.id === this.libraryItemId) {
|
|
console.log('Item Updated')
|
|
this.libraryItem = libraryItem
|
|
}
|
|
},
|
|
async selectFolder() {
|
|
// Select and save the local folder for media type
|
|
var folderObj = await AbsFileSystem.selectFolder({ mediaType: this.mediaType })
|
|
if (folderObj.error) {
|
|
return this.$toast.error(`Error: ${folderObj.error || 'Unknown Error'}`)
|
|
}
|
|
return folderObj
|
|
},
|
|
selectedLocalFolder(localFolder) {
|
|
this.showSelectLocalFolder = false
|
|
this.download(localFolder)
|
|
},
|
|
downloadClick() {
|
|
if (this.downloadItem) {
|
|
return
|
|
}
|
|
this.download()
|
|
},
|
|
async download(selectedLocalFolder = null) {
|
|
if (!this.numTracks) {
|
|
return
|
|
}
|
|
|
|
// Get the local folder to download to
|
|
var localFolder = selectedLocalFolder
|
|
if (!localFolder) {
|
|
var localFolders = (await this.$db.getLocalFolders()) || []
|
|
console.log('Local folders loaded', localFolders.length)
|
|
var foldersWithMediaType = localFolders.filter((lf) => {
|
|
console.log('Checking local folder', lf.mediaType)
|
|
return lf.mediaType == this.mediaType
|
|
})
|
|
console.log('Folders with media type', this.mediaType, foldersWithMediaType.length)
|
|
if (!foldersWithMediaType.length) {
|
|
// No local folders or no local folders with this media type
|
|
localFolder = await this.selectFolder()
|
|
} else if (foldersWithMediaType.length == 1) {
|
|
console.log('Only 1 local folder with this media type - auto select it')
|
|
localFolder = foldersWithMediaType[0]
|
|
} else {
|
|
console.log('Multiple folders with media type')
|
|
this.showSelectLocalFolder = true
|
|
return
|
|
}
|
|
if (!localFolder) {
|
|
return this.$toast.error('Invalid download folder')
|
|
}
|
|
}
|
|
|
|
console.log('Local folder', JSON.stringify(localFolder))
|
|
|
|
var startDownloadMessage = `Start download for "${this.title}" with ${this.numTracks} audio track${this.numTracks == 1 ? '' : 's'} to folder ${localFolder.name}?`
|
|
const { value } = await Dialog.confirm({
|
|
title: 'Confirm',
|
|
message: startDownloadMessage
|
|
})
|
|
if (value) {
|
|
this.startDownload(localFolder)
|
|
}
|
|
},
|
|
async startDownload(localFolder) {
|
|
console.log('Starting download to local folder', localFolder.name)
|
|
var downloadRes = await AbsDownloader.downloadLibraryItem({ libraryItemId: this.libraryItemId, localFolderId: localFolder.id })
|
|
if (downloadRes && downloadRes.error) {
|
|
var errorMsg = downloadRes.error || 'Unknown error'
|
|
console.error('Download error', errorMsg)
|
|
this.$toast.error(errorMsg)
|
|
}
|
|
},
|
|
newLocalLibraryItem(item) {
|
|
if (item.libraryItemId == this.libraryItemId) {
|
|
console.log('New local library item', item.id)
|
|
this.$set(this.libraryItem, 'localLibraryItem', item)
|
|
}
|
|
},
|
|
async toggleFinished() {
|
|
this.isProcessingReadUpdate = true
|
|
if (this.isLocal) {
|
|
var isFinished = !this.userIsFinished
|
|
var localMediaProgressId = this.localLibraryItemId
|
|
console.log('toggleFinished local media progress id', localMediaProgressId, isFinished)
|
|
var payload = await this.$db.updateLocalMediaProgressFinished({ localMediaProgressId, isFinished })
|
|
console.log('toggleFinished payload', JSON.stringify(payload))
|
|
if (!payload || payload.error) {
|
|
var errorMsg = payload ? payload.error : 'Unknown error'
|
|
this.$toast.error(errorMsg)
|
|
} else {
|
|
var localMediaProgress = payload.localMediaProgress
|
|
console.log('toggleFinished localMediaProgress', JSON.stringify(localMediaProgress))
|
|
if (localMediaProgress) {
|
|
this.$store.commit('globals/updateLocalMediaProgress', localMediaProgress)
|
|
}
|
|
|
|
var lmp = this.$store.getters['globals/getLocalMediaProgressById'](this.libraryItemId)
|
|
console.log('toggleFinished Check LMP', this.libraryItemId, JSON.stringify(lmp))
|
|
|
|
var serverUpdated = payload.server
|
|
if (serverUpdated) {
|
|
this.$toast.success(`Local & Server Item marked as ${isFinished ? 'Finished' : 'Not Finished'}`)
|
|
} else {
|
|
this.$toast.success(`Local Item marked as ${isFinished ? 'Finished' : 'Not Finished'}`)
|
|
}
|
|
}
|
|
this.isProcessingReadUpdate = false
|
|
} else {
|
|
var updatePayload = {
|
|
isFinished: !this.userIsFinished
|
|
}
|
|
this.$axios
|
|
.$patch(`/api/me/progress/${this.libraryItemId}`, updatePayload)
|
|
.then(() => {
|
|
this.isProcessingReadUpdate = false
|
|
this.$toast.success(`Item marked as ${updatePayload.isFinished ? 'Finished' : 'Not Finished'}`)
|
|
})
|
|
.catch((error) => {
|
|
console.error('Failed', error)
|
|
this.isProcessingReadUpdate = false
|
|
this.$toast.error(`Failed to mark as ${updatePayload.isFinished ? 'Finished' : 'Not Finished'}`)
|
|
})
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$eventBus.$on('new-local-library-item', this.newLocalLibraryItem)
|
|
// this.$server.socket.on('item_updated', this.itemUpdated)
|
|
},
|
|
beforeDestroy() {
|
|
this.$eventBus.$off('new-local-library-item', this.newLocalLibraryItem)
|
|
// this.$server.socket.off('item_updated', this.itemUpdated)
|
|
}
|
|
}
|
|
</script> |