mirror of
https://github.com/advplyr/audiobookshelf-app.git
synced 2025-08-04 01:54:33 +02:00
Update:Android local media page to show ebook file
This commit is contained in:
advplyr
parent
b935cb5cf1
commit
cce6e1d0ab
2 changed files with 59 additions and 19 deletions
|
|
@ -15,15 +15,14 @@
|
|||
<p>Scanning...</p>
|
||||
</div>
|
||||
<div v-else class="w-full media-item-container overflow-y-auto">
|
||||
<template v-for="mediaItem in localLibraryItems">
|
||||
<nuxt-link :to="`/localMedia/item/${mediaItem.id}`" :key="mediaItem.id" class="flex my-1">
|
||||
<template v-for="localLibraryItem in localLibraryItems">
|
||||
<nuxt-link :to="`/localMedia/item/${localLibraryItem.id}`" :key="localLibraryItem.id" class="flex my-1">
|
||||
<div class="w-12 h-12 min-w-12 min-h-12 bg-primary">
|
||||
<img v-if="mediaItem.coverPathSrc" :src="mediaItem.coverPathSrc" class="w-full h-full object-contain" />
|
||||
<img v-if="localLibraryItem.coverPathSrc" :src="localLibraryItem.coverPathSrc" class="w-full h-full object-contain" />
|
||||
</div>
|
||||
<div class="flex-grow px-2">
|
||||
<p class="text-sm">{{ mediaItem.media.metadata.title }}</p>
|
||||
<p v-if="mediaItem.mediaType == 'book'" class="text-xs text-gray-300">{{ mediaItem.media.tracks.length }} Track{{ mediaItem.media.tracks.length == 1 ? '' : 's' }}</p>
|
||||
<p v-else-if="mediaItem.mediaType == 'podcast'" class="text-xs text-gray-300">{{ mediaItem.media.episodes.length }} Episode{{ mediaItem.media.episodes.length == 1 ? '' : 's' }}</p>
|
||||
<p class="text-sm">{{ localLibraryItem.media.metadata.title }}</p>
|
||||
<p class="text-xs text-gray-300">{{ getLocalLibraryItemSubText(localLibraryItem) }}</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 flex items-center justify-center">
|
||||
<span class="material-icons text-xl text-gray-300">arrow_right</span>
|
||||
|
|
@ -82,6 +81,21 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
getLocalLibraryItemSubText(localLibraryItem) {
|
||||
if (!localLibraryItem) return ''
|
||||
if (localLibraryItem.mediaType == 'book') {
|
||||
const txts = []
|
||||
if (localLibraryItem.media.ebookFile) {
|
||||
txts.push(`${localLibraryItem.media.ebookFile.ebookFormat} EBook`)
|
||||
}
|
||||
if (localLibraryItem.media.tracks?.length) {
|
||||
txts.push(`${localLibraryItem.media.tracks.length} Tracks`)
|
||||
}
|
||||
return txts.join(' • ')
|
||||
} else {
|
||||
return `${localLibraryItem.media.episodes?.length || 0} Episodes`
|
||||
}
|
||||
},
|
||||
dialogAction(action) {
|
||||
console.log('Dialog action', action)
|
||||
if (action == 'scan') {
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@
|
|||
<div v-if="isScanning" class="w-full text-center p-4">
|
||||
<p>Scanning...</p>
|
||||
</div>
|
||||
<div v-else class="w-full max-w-full media-item-container overflow-y-auto overflow-x-hidden relative" :class="{ 'media-order-changed': orderChanged }">
|
||||
<div v-if="!isPodcast" class="w-full">
|
||||
<div v-else class="w-full max-w-full media-item-container overflow-y-auto overflow-x-hidden relative pb-4" :class="{ 'media-order-changed': orderChanged }">
|
||||
<div v-if="!isPodcast && audioTracksCopy.length" class="w-full py-2">
|
||||
<p class="text-base mb-2">Audio Tracks ({{ audioTracks.length }})</p>
|
||||
|
||||
<draggable v-model="audioTracksCopy" v-bind="dragOptions" handle=".drag-handle" draggable=".item" tag="div" @start="drag = true" @end="drag = false" @update="draggableUpdate" :disabled="isIos">
|
||||
|
|
@ -47,7 +47,8 @@
|
|||
</transition-group>
|
||||
</draggable>
|
||||
</div>
|
||||
<div v-else class="w-full">
|
||||
|
||||
<div v-if="isPodcast" class="w-full py-2">
|
||||
<p class="text-base mb-2">Episodes ({{ episodes.length }})</p>
|
||||
<template v-for="episode in episodes">
|
||||
<div :key="episode.id" class="flex items-center my-1">
|
||||
|
|
@ -68,7 +69,24 @@
|
|||
</template>
|
||||
</div>
|
||||
|
||||
<p v-if="otherFiles.length" class="text-lg mb-2 pt-8">Other Files</p>
|
||||
<div v-if="localFileForEbook" class="w-full py-2">
|
||||
<p class="text-base mb-2">EBook File</p>
|
||||
|
||||
<div class="flex items-center my-1">
|
||||
<div class="w-10 h-12 flex items-center justify-center" style="min-width: 40px">
|
||||
<p class="font-mono font-bold text-sm">{{ ebookFile.ebookFormat }}</p>
|
||||
</div>
|
||||
<div class="flex-grow px-2">
|
||||
<p class="text-xs">{{ localFileForEbook.filename }}</p>
|
||||
</div>
|
||||
<div class="w-24 text-center text-gray-300" style="min-width: 96px">
|
||||
<p class="text-xs">{{ localFileForEbook.mimeType }}</p>
|
||||
<p class="text-sm">{{ $bytesPretty(localFileForEbook.size) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="otherFiles.length" class="text-lg py-2">Other Files</p>
|
||||
<template v-for="file in otherFiles">
|
||||
<div :key="file.id" class="flex items-center my-1">
|
||||
<div class="w-12 h-12 flex items-center justify-center">
|
||||
|
|
@ -78,7 +96,7 @@
|
|||
<div class="flex-grow px-2">
|
||||
<p class="text-sm">{{ file.filename }}</p>
|
||||
</div>
|
||||
<div class="w-20 text-center text-gray-300">
|
||||
<div class="w-24 text-center text-gray-300" style="min-width: 96px">
|
||||
<p class="text-xs">{{ file.mimeType }}</p>
|
||||
<p class="text-sm">{{ $bytesPretty(file.size) }}</p>
|
||||
</div>
|
||||
|
|
@ -145,10 +163,10 @@ export default {
|
|||
return this.$platform === 'ios'
|
||||
},
|
||||
basePath() {
|
||||
return this.localLibraryItem ? this.localLibraryItem.basePath : null
|
||||
return this.localLibraryItem?.basePath
|
||||
},
|
||||
localFiles() {
|
||||
return this.localLibraryItem ? this.localLibraryItem.localFiles : []
|
||||
return this.localLibraryItem?.localFiles || []
|
||||
},
|
||||
otherFiles() {
|
||||
if (!this.localFiles.filter) {
|
||||
|
|
@ -156,29 +174,37 @@ export default {
|
|||
return []
|
||||
}
|
||||
return this.localFiles.filter((lf) => {
|
||||
if (this.localFileForEbook?.id === lf.id) return false
|
||||
return !this.audioTracks.find((at) => at.localFileId == lf.id)
|
||||
})
|
||||
},
|
||||
folderName() {
|
||||
return this.folder ? this.folder.name : null
|
||||
return this.folder?.name
|
||||
},
|
||||
mediaType() {
|
||||
return this.localLibraryItem ? this.localLibraryItem.mediaType : null
|
||||
return this.localLibraryItem?.mediaType
|
||||
},
|
||||
isPodcast() {
|
||||
return this.mediaType == 'podcast'
|
||||
},
|
||||
libraryItemId() {
|
||||
return this.localLibraryItem ? this.localLibraryItem.libraryItemId : null
|
||||
return this.localLibraryItem?.libraryItemId
|
||||
},
|
||||
liServerAddress() {
|
||||
return this.localLibraryItem ? this.localLibraryItem.serverAddress : null
|
||||
return this.localLibraryItem?.serverAddress
|
||||
},
|
||||
media() {
|
||||
return this.localLibraryItem ? this.localLibraryItem.media : null
|
||||
return this.localLibraryItem?.media
|
||||
},
|
||||
mediaMetadata() {
|
||||
return this.media ? this.media.metadata || {} : {}
|
||||
return this.media?.metadata || {}
|
||||
},
|
||||
ebookFile() {
|
||||
return this.media?.ebookFile
|
||||
},
|
||||
localFileForEbook() {
|
||||
if (!this.ebookFile) return null
|
||||
return this.localFiles.find((lf) => lf.id == this.ebookFile.localFileId)
|
||||
},
|
||||
episodes() {
|
||||
return this.media.episodes || []
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue