mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-08-17 00:01:16 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add:Author, narrator and series links on item page #186

Browse source
This commit is contained in:
advplyr 2022-06-04 10:19:31 -05:00
parent 1f1b2fe85a
commit ad12e6a19d
1 changed files with 57 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

86
pages/item/_id.vue
View file

@ -15,31 +15,48 @@
<span class="material-icons text-xl">more_vert</span> <span class="material-icons text-xl">more_vert</span>
</button> </button>
</div> </div>
<h3 v-if="seriesName" class="text-gray-300 text-sm leading-6">{{ seriesName }}</h3> <p v-if="seriesList && seriesList.length" class="text-sm text-gray-300 py-0.5">
<p class="text-sm text-gray-400 py-px">By {{ author }}</p> <template v-for="(series, index) in seriesList"
<p v-if="narratorName" class="text-xs text-gray-400 py-px truncate">Narrated By {{ narratorName }}</p> ><nuxt-link :key="series.id" :to="`/bookshelf/series/${series.id}`">{{ series.text }}</nuxt-link
><span :key="`${series.id}-comma`" v-if="index < seriesList.length - 1">,&nbsp;</span></template
>
</p>
<p v-if="podcastAuthor" class="text-sm text-gray-400 py-0.5">By {{ author }}</p>
<p v-else-if="bookAuthors && bookAuthors.length" class="text-sm text-gray-400 py-0.5">
By
<template v-for="(author, index) in bookAuthors"
><nuxt-link :key="author.id" :to="`/bookshelf/library?filter=authors.${$encode(author.id)}`">{{ author.name }}</nuxt-link
><span :key="`${author.id}-comma`" v-if="index < bookAuthors.length - 1">,&nbsp;</span></template
>
</p>
</div> </div>
</div> </div>
<div> <p v-if="narrators && narrators.length" class="text-sm text-gray-400 py-0.5">
<!-- Show an indicator for local library items whether they are linked to a server item and if that server item is connected --> Narrated By
<p v-if="isLocal && serverLibraryItemId" style="font-size: 10px" class="text-success py-1 uppercase tracking-widest">connected</p> <template v-for="(narrator, index) in narrators"
<p v-else-if="isLocal && libraryItem.serverAddress" style="font-size: 10px" class="text-gray-400 py-1">{{ libraryItem.serverAddress }}</p> ><nuxt-link :key="narrator" :to="`/bookshelf/library?filter=narrators.${$encode(narrator)}`">{{ narrator }}</nuxt-link
><span :key="`${narrator}-comma`" v-if="index < narrators.length - 1">,&nbsp;</span></template
>
</p>
<div v-if="numTracks" class="flex text-gray-100 text-xs my-2 -mx-0.5"> <!-- Show an indicator for local library items whether they are linked to a server item and if that server item is connected -->
<div class="bg-primary bg-opacity-80 px-3 py-0.5 rounded-full mx-0.5"> <p v-if="isLocal && serverLibraryItemId" style="font-size: 10px" class="text-success py-1 uppercase tracking-widest">connected</p>
<p>{{ $elapsedPretty(duration) }}</p> <p v-else-if="isLocal && libraryItem.serverAddress" style="font-size: 10px" class="text-gray-400 py-1">{{ libraryItem.serverAddress }}</p>
</div>
<!-- TODO: Local books dont save the size --> <div v-if="numTracks" class="flex text-gray-100 text-xs my-2 -mx-0.5">
<div v-if="size" class="bg-primary bg-opacity-80 px-3 py-0.5 rounded-full mx-0.5"> <div class="bg-primary bg-opacity-80 px-3 py-0.5 rounded-full mx-0.5">
<p>{{ $bytesPretty(size) }}</p> <p>{{ $elapsedPretty(duration) }}</p>
</div> </div>
<div class="bg-primary bg-opacity-80 px-3 py-0.5 rounded-full mx-0.5"> <!-- TODO: Local books dont save the size -->
<p>{{ numTracks }} Track{{ numTracks > 1 ? 's' : '' }}</p> <div v-if="size" class="bg-primary bg-opacity-80 px-3 py-0.5 rounded-full mx-0.5">
</div> <p>{{ $bytesPretty(size) }}</p>
<div v-if="numChapters" class="bg-primary bg-opacity-80 px-3 py-0.5 rounded-full mx-0.5"> </div>
<p>{{ numChapters }} Chapter{{ numChapters > 1 ? 's' : '' }}</p> <div class="bg-primary bg-opacity-80 px-3 py-0.5 rounded-full mx-0.5">
</div> <p>{{ numTracks }} Track{{ numTracks > 1 ? 's' : '' }}</p>
</div>
<div v-if="numChapters" class="bg-primary bg-opacity-80 px-3 py-0.5 rounded-full mx-0.5">
<p>{{ numChapters }} Chapter{{ numChapters > 1 ? 's' : '' }}</p>
</div> </div>
</div> </div>
@ -198,13 +215,17 @@ export default {
title() { title() {
return this.mediaMetadata.title return this.mediaMetadata.title
}, },
author() { podcastAuthor() {
if (this.isPodcast) return this.mediaMetadata.author if (!this.isPodcast) return null
return this.mediaMetadata.authorName return this.mediaMetadata.author || ''
}, },
narratorName() { bookAuthors() {
if (this.isPodcast) return null if (this.isPodcast) return null
return this.mediaMetadata.narratorName return this.mediaMetadata.authors || []
},
narrators() {
if (this.isPodcast) return null
return this.mediaMetadata.narrators || []
}, },
description() { description() {
return this.mediaMetadata.description || '' return this.mediaMetadata.description || ''
@ -212,9 +233,16 @@ export default {
series() { series() {
return this.mediaMetadata.series || [] return this.mediaMetadata.series || []
}, },
seriesName() { seriesList() {
// For books only on toJSONExpanded if (this.isPodcast) return null
return this.mediaMetadata.seriesName || '' return this.series.map((se) => {
var text = se.name
if (se.sequence) text += ` #${se.sequence}`
return {
...se,
text
}
})
}, },
duration() { duration() {
return this.media.duration return this.media.duration