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

This commit is contained in:
advplyr 2022-06-04 10:19:31 -05:00
parent 1f1b2fe85a
commit ad12e6a19d

View file

@ -15,13 +15,31 @@
<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">
Narrated By
<template v-for="(narrator, index) in narrators"
><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>
<!-- Show an indicator for local library items whether they are linked to a server item and if that server item is connected --> <!-- Show an indicator for local library items whether they are linked to a server item and if that server item is connected -->
<p v-if="isLocal && serverLibraryItemId" style="font-size: 10px" class="text-success py-1 uppercase tracking-widest">connected</p> <p v-if="isLocal && serverLibraryItemId" style="font-size: 10px" class="text-success py-1 uppercase tracking-widest">connected</p>
<p v-else-if="isLocal && libraryItem.serverAddress" style="font-size: 10px" class="text-gray-400 py-1">{{ libraryItem.serverAddress }}</p> <p v-else-if="isLocal && libraryItem.serverAddress" style="font-size: 10px" class="text-gray-400 py-1">{{ libraryItem.serverAddress }}</p>
@ -41,7 +59,6 @@
<p>{{ numChapters }} Chapter{{ numChapters > 1 ? 's' : '' }}</p> <p>{{ numChapters }} Chapter{{ numChapters > 1 ? 's' : '' }}</p>
</div> </div>
</div> </div>
</div>
<div> <div>
<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' : ''"> <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' : ''">
@ -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