mirror of
https://github.com/advplyr/audiobookshelf-app.git
synced 2025-06-29 08:20:18 +02:00
Add chapters & tracks table. Clamp description to 4 lines. Move size to more info modal
This commit is contained in:
advplyr
parent
fb4e7e6b55
commit
d9b0b8c33d
5 changed files with 255 additions and 57 deletions
|
|
@ -122,4 +122,11 @@ Bookshelf Label
|
|||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.line-clamp-4 {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 4;
|
||||
}
|
||||
|
|
@ -8,7 +8,10 @@
|
|||
|
||||
<div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
|
||||
<div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20 p-2" style="max-height: 75%" @click.stop>
|
||||
<p class="mb-1">{{ mediaMetadata.title }}</p>
|
||||
<p class="mb-2">{{ mediaMetadata.title }}</p>
|
||||
|
||||
<div v-if="size" class="text-sm mb-2">Size: {{ $bytesPretty(size) }}</div>
|
||||
|
||||
<p class="mb-1 text-xs text-gray-200">ID: {{ _libraryItem.id }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -44,6 +47,9 @@ export default {
|
|||
},
|
||||
mediaMetadata() {
|
||||
return this.media.metadata || {}
|
||||
},
|
||||
size() {
|
||||
return this.media.size
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
|
|
|
|||
97
components/tables/ChaptersTable.vue
Normal file
97
components/tables/ChaptersTable.vue
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
<template>
|
||||
<div class="w-full my-4">
|
||||
<div class="w-full bg-primary px-4 py-2 flex items-center" :class="expanded ? 'rounded-t-md' : 'rounded-md'" @click.stop="clickBar">
|
||||
<p class="pr-2">Chapters</p>
|
||||
<div class="h-6 w-6 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
|
||||
<span class="text-xs font-mono">{{ chapters.length }}</span>
|
||||
</div>
|
||||
<div class="flex-grow" />
|
||||
<div class="h-10 w-10 rounded-full flex justify-center items-center duration-500" :class="expanded ? 'transform rotate-180' : ''">
|
||||
<span class="material-icons text-3xl">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<transition name="slide">
|
||||
<table class="text-xs tracksTable" v-show="expanded">
|
||||
<tr>
|
||||
<th class="text-left">Title</th>
|
||||
<th class="text-center w-16">Start</th>
|
||||
</tr>
|
||||
<tr v-for="chapter in chapters" :key="chapter.id">
|
||||
<td>
|
||||
{{ chapter.title }}
|
||||
</td>
|
||||
<td class="font-mono text-center underline w-16" @click.stop="goToTimestamp(chapter.start)">
|
||||
{{ $secondsToTimestamp(chapter.start) }}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
libraryItem: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
expanded: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
libraryItemId() {
|
||||
return this.libraryItem.id
|
||||
},
|
||||
media() {
|
||||
return this.libraryItem ? this.libraryItem.media || {} : {}
|
||||
},
|
||||
metadata() {
|
||||
return this.media.metadata || {}
|
||||
},
|
||||
chapters() {
|
||||
return this.media.chapters || []
|
||||
},
|
||||
userCanUpdate() {
|
||||
return this.$store.getters['user/getUserCanUpdate']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickBar() {
|
||||
this.expanded = !this.expanded
|
||||
},
|
||||
goToTimestamp(time) {
|
||||
this.$emit('playAtTimestamp', time)
|
||||
}
|
||||
},
|
||||
mounted() {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tracksTable {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
border: 1px solid #474747;
|
||||
}
|
||||
|
||||
.tracksTable tr:nth-child(even) {
|
||||
background-color: #2e2e2e;
|
||||
}
|
||||
|
||||
.tracksTable tr {
|
||||
background-color: #373838;
|
||||
}
|
||||
|
||||
.tracksTable td {
|
||||
padding: 8px 8px;
|
||||
}
|
||||
|
||||
.tracksTable th {
|
||||
padding: 4px 8px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
85
components/tables/TracksTable.vue
Normal file
85
components/tables/TracksTable.vue
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<div class="w-full my-4">
|
||||
<div class="w-full bg-primary px-4 py-2 flex items-center" :class="showTracks ? 'rounded-t-md' : 'rounded-md'" @click.stop="clickBar">
|
||||
<p class="pr-2">{{ title }}</p>
|
||||
<div class="h-6 w-6 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
|
||||
<span class="text-xs font-mono">{{ tracks.length }}</span>
|
||||
</div>
|
||||
<div class="flex-grow" />
|
||||
<div class="h-10 w-10 rounded-full flex justify-center items-center duration-500" :class="showTracks ? 'transform rotate-180' : ''">
|
||||
<span class="material-icons text-3xl">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<transition name="slide">
|
||||
<div class="w-full" v-show="showTracks">
|
||||
<table class="text-xs tracksTable">
|
||||
<tr>
|
||||
<th class="text-left">Filename</th>
|
||||
<th class="text-center w-16">Duration</th>
|
||||
</tr>
|
||||
<template v-for="track in tracks">
|
||||
<tr :key="track.index">
|
||||
<td>{{ track.metadata.filename }}</td>
|
||||
<td class="font-mono text-center w-16">
|
||||
{{ $secondsToTimestamp(track.duration) }}
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</table>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: 'Audio Tracks'
|
||||
},
|
||||
tracks: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
libraryItemId: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showTracks: false
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
clickBar() {
|
||||
this.showTracks = !this.showTracks
|
||||
}
|
||||
},
|
||||
mounted() {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tracksTable {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
border: 1px solid #474747;
|
||||
}
|
||||
|
||||
.tracksTable tr:nth-child(even) {
|
||||
background-color: #2e2e2e;
|
||||
}
|
||||
|
||||
.tracksTable tr {
|
||||
background-color: #373838;
|
||||
}
|
||||
|
||||
.tracksTable td {
|
||||
padding: 8px 8px;
|
||||
}
|
||||
|
||||
.tracksTable th {
|
||||
padding: 4px 8px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,7 +6,6 @@
|
|||
</div>
|
||||
|
||||
<div class="z-10 relative">
|
||||
|
||||
<!-- cover -->
|
||||
<div class="w-full flex justify-center relative mb-4">
|
||||
<div style="width: 0; transform: translateX(-50vw); overflow: visible">
|
||||
|
|
@ -78,8 +77,7 @@
|
|||
|
||||
<!-- metadata -->
|
||||
<div id="metadata" class="grid gap-2 my-2" style="">
|
||||
|
||||
<div v-if="podcastAuthor || (bookAuthors && bookAuthors.length)" class="text-white text-opacity-60 uppercase text-sm">{{ bookAuthors.length === 1 ? 'Author' : 'Authors' }}</div>
|
||||
<div v-if="podcastAuthor || (bookAuthors && bookAuthors.length)" class="text-white text-opacity-60 uppercase text-sm">Author</div>
|
||||
<div v-if="podcastAuthor" class="text-sm">{{ podcastAuthor }}</div>
|
||||
<div v-else-if="bookAuthors && bookAuthors.length" class="text-sm">
|
||||
<template v-for="(author, index) in bookAuthors">
|
||||
|
|
@ -99,48 +97,43 @@
|
|||
<div v-if="numTracks" class="text-white text-opacity-60 uppercase text-sm">Duration</div>
|
||||
<div v-if="numTracks" class="text-sm">{{ $elapsedPretty(duration) }}</div>
|
||||
|
||||
<!-- hidden by default -->
|
||||
|
||||
<div v-if="allMetadata && narrators && narrators.length" class="text-white text-opacity-60 uppercase text-sm">{{ narrators.length === 1 ? 'Narrator' : 'Narrators' }}</div>
|
||||
<div v-if="allMetadata && narrators && narrators.length" class="truncate text-sm">
|
||||
<div v-if="narrators && narrators.length" class="text-white text-opacity-60 uppercase text-sm">{{ narrators.length === 1 ? 'Narrator' : 'Narrators' }}</div>
|
||||
<div v-if="narrators && narrators.length" class="truncate text-sm">
|
||||
<template v-for="(narrator, index) in narrators">
|
||||
<nuxt-link :key="narrator" :to="`/bookshelf/library?filter=narrators.${$encode(narrator)}`" class="underline">{{ narrator }}</nuxt-link
|
||||
><span :key="index" v-if="index < narrators.length - 1">, </span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div v-if="allMetadata && genres.length" class="text-white text-opacity-60 uppercase text-sm">{{ genres.length === 1 ? 'Genre' : 'Genres' }}</div>
|
||||
<div v-if="allMetadata && genres.length" class="truncate text-sm">
|
||||
<div v-if="genres.length" class="text-white text-opacity-60 uppercase text-sm">{{ genres.length === 1 ? 'Genre' : 'Genres' }}</div>
|
||||
<div v-if="genres.length" class="truncate text-sm">
|
||||
<template v-for="(genre, index) in genres">
|
||||
<nuxt-link :key="genre" :to="`/bookshelf/library?filter=genres.${$encode(genre)}`" class="underline">{{ genre }}</nuxt-link
|
||||
><span :key="index" v-if="index < genres.length - 1">, </span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div v-if="allMetadata && publishedYear" class="text-white text-opacity-60 uppercase text-sm">Published</div>
|
||||
<div v-if="allMetadata && publishedYear" class="text-sm">{{ publishedYear }}</div>
|
||||
|
||||
<div v-if="allMetadata && numTracks && size" class="text-white text-opacity-60 uppercase text-sm">Size</div>
|
||||
<div v-if="allMetadata && numTracks && size" class="text-sm">{{ $bytesPretty(size) }}</div>
|
||||
|
||||
<div v-if="allMetadata && numTracks" class="text-white text-opacity-60 uppercase text-sm">Tracks</div>
|
||||
<div v-if="allMetadata && numTracks" class="text-sm">{{ numTracks }} {{ numTracks == 1 ? 'track' : 'tracks' }}</div>
|
||||
|
||||
<div v-if="allMetadata && numTracks && numChapters" class="text-white text-opacity-60 uppercase text-sm">Chapters</div>
|
||||
<div v-if="allMetadata && numTracks && numChapters" class="text-sm">{{ numChapters }} {{ numChapters == 1 ? 'chapter' : 'chapters' }}</div>
|
||||
|
||||
<div v-if="!isPodcast && windowWidth < 500" class="col-span-full text-center text-white text-opacity-60 text-sm" @click="toggleMetadata()">
|
||||
{{ allMetadata ? 'less' : 'more' }}
|
||||
<span class="material-icons align-middle">{{ allMetadata ? 'expand_less' : 'expand_more' }}</span>
|
||||
</div>
|
||||
<div v-if="publishedYear" class="text-white text-opacity-60 uppercase text-sm">Published</div>
|
||||
<div v-if="publishedYear" class="text-sm">{{ publishedYear }}</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full py-2">
|
||||
<p class="text-sm text-justify whitespace-pre-line" style="hyphens: auto;">{{ description }}</p>
|
||||
<p ref="description" class="text-sm text-justify whitespace-pre-line font-light" :class="{ 'line-clamp-4': !showFullDescription }" style="hyphens: auto">{{ description }}</p>
|
||||
|
||||
<div class="text-white text-sm py-2" @click="showFullDescription = !showFullDescription">
|
||||
{{ showFullDescription ? 'Read less' : 'Read more' }}
|
||||
<span class="material-icons align-middle text-base -mt-px">{{ showFullDescription ? 'expand_less' : 'expand_more' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- tables -->
|
||||
<tables-podcast-episodes-table v-if="isPodcast" :library-item="libraryItem" :local-library-item-id="localLibraryItemId" :episodes="episodes" :local-episodes="localLibraryItemEpisodes" :is-local="isLocal" />
|
||||
|
||||
<tables-chapters-table v-if="numChapters" :library-item="libraryItem" @playAtTimestamp="playAtTimestamp" />
|
||||
|
||||
<tables-tracks-table v-if="numTracks" :tracks="tracks" :library-item-id="libraryItemId" />
|
||||
|
||||
<!-- modals -->
|
||||
<modals-select-local-folder-modal v-model="showSelectLocalFolder" :media-type="mediaType" @select="selectedLocalFolder" />
|
||||
|
||||
<modals-dialog v-model="showMoreMenu" :items="moreMenuItems" @action="moreMenuAction" />
|
||||
|
|
@ -198,13 +191,11 @@ export default {
|
|||
coverRgb: 'rgb(55, 56, 56)',
|
||||
coverBgIsLight: false,
|
||||
windowWidth: 0,
|
||||
hideMetadata: true
|
||||
descriptionClamped: false,
|
||||
showFullDescription: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
allMetadata() {
|
||||
return this.isPodcast || this.windowWidth >= 500 || !this.hideMetadata
|
||||
},
|
||||
isIos() {
|
||||
return this.$platform === 'ios'
|
||||
},
|
||||
|
|
@ -301,9 +292,6 @@ export default {
|
|||
duration() {
|
||||
return this.media.duration
|
||||
},
|
||||
size() {
|
||||
return this.media.size
|
||||
},
|
||||
user() {
|
||||
return this.$store.state.user.user
|
||||
},
|
||||
|
|
@ -336,9 +324,11 @@ export default {
|
|||
if (this.localLibraryItemId && this.$store.getters['getIsItemStreaming'](this.localLibraryItemId)) return true
|
||||
return this.$store.getters['getIsItemStreaming'](this.libraryItemId)
|
||||
},
|
||||
tracks() {
|
||||
return this.media.tracks || []
|
||||
},
|
||||
numTracks() {
|
||||
if (!this.media.tracks) return 0
|
||||
return this.media.tracks.length || 0
|
||||
return this.tracks.length || 0
|
||||
},
|
||||
numChapters() {
|
||||
if (!this.media.chapters) return 0
|
||||
|
|
@ -484,8 +474,10 @@ export default {
|
|||
readBook() {
|
||||
this.$store.commit('openReader', this.libraryItem)
|
||||
},
|
||||
async playClick() {
|
||||
let episodeId = null
|
||||
playAtTimestamp(seconds) {
|
||||
this.playClick(seconds)
|
||||
},
|
||||
async playClick(startTime = null) {
|
||||
await this.$hapticsImpact()
|
||||
|
||||
if (this.isPodcast) {
|
||||
|
|
@ -505,7 +497,7 @@ export default {
|
|||
|
||||
if (!episode) episode = this.episodes[0]
|
||||
|
||||
episodeId = episode.id
|
||||
const episodeId = episode.id
|
||||
|
||||
let localEpisode = null
|
||||
if (this.hasLocal && !this.isLocal) {
|
||||
|
|
@ -518,26 +510,33 @@ export default {
|
|||
if (serverEpisodeId && this.serverLibraryItemId && this.isCasting) {
|
||||
// If casting and connected to server for local library item then send server library item id
|
||||
this.$eventBus.$emit('play-item', { libraryItemId: this.serverLibraryItemId, episodeId: serverEpisodeId })
|
||||
return
|
||||
}
|
||||
if (localEpisode) {
|
||||
} else if (localEpisode) {
|
||||
this.$eventBus.$emit('play-item', { libraryItemId: this.localLibraryItem.id, episodeId: localEpisode.id, serverLibraryItemId: this.serverLibraryItemId, serverEpisodeId })
|
||||
return
|
||||
} else {
|
||||
this.$eventBus.$emit('play-item', { libraryItemId: this.libraryItemId, episodeId })
|
||||
}
|
||||
} else {
|
||||
// Audiobook
|
||||
if (this.hasLocal && this.serverLibraryItemId && this.isCasting) {
|
||||
// If casting and connected to server for local library item then send server library item id
|
||||
this.$eventBus.$emit('play-item', { libraryItemId: this.serverLibraryItemId })
|
||||
return
|
||||
}
|
||||
if (this.hasLocal) {
|
||||
this.$eventBus.$emit('play-item', { libraryItemId: this.localLibraryItem.id, serverLibraryItemId: this.serverLibraryItemId })
|
||||
return
|
||||
}
|
||||
}
|
||||
let libraryItemId = this.libraryItemId
|
||||
|
||||
this.$eventBus.$emit('play-item', { libraryItemId: this.libraryItemId, episodeId })
|
||||
// When casting use server library item
|
||||
if (this.hasLocal && this.serverLibraryItemId && this.isCasting) {
|
||||
libraryItemId = this.serverLibraryItemId
|
||||
} else if (this.hasLocal) {
|
||||
libraryItemId = this.localLibraryItem.id
|
||||
}
|
||||
|
||||
// If start time and is not already streaming then ask for confirmation
|
||||
if (startTime !== null && startTime !== undefined && !this.$store.getters['getIsMediaStreaming'](libraryItemId, null)) {
|
||||
const { value } = await Dialog.confirm({
|
||||
title: 'Confirm',
|
||||
message: `Start playback for "${this.title}" at ${this.$secondsToTimestamp(startTime)}?`
|
||||
})
|
||||
if (!value) return
|
||||
}
|
||||
|
||||
this.$eventBus.$emit('play-item', { libraryItemId, serverLibraryItemId: this.serverLibraryItemId, startTime })
|
||||
}
|
||||
},
|
||||
async clearProgressClick() {
|
||||
await this.$hapticsImpact()
|
||||
|
|
@ -573,6 +572,7 @@ export default {
|
|||
if (libraryItem.id === this.libraryItemId) {
|
||||
console.log('Item Updated')
|
||||
this.libraryItem = libraryItem
|
||||
this.checkDescriptionClamped()
|
||||
}
|
||||
},
|
||||
async selectFolder() {
|
||||
|
|
@ -721,11 +721,13 @@ export default {
|
|||
this.$router.replace('/bookshelf')
|
||||
}
|
||||
},
|
||||
checkDescriptionClamped() {
|
||||
if (!this.$refs.description || this.showFullDescription) return
|
||||
this.descriptionClamped = this.$refs.description.scrollHeight > this.$refs.description.clientHeight
|
||||
},
|
||||
windowResized() {
|
||||
this.windowWidth = window.innerWidth
|
||||
},
|
||||
toggleMetadata() {
|
||||
this.hideMetadata = !this.hideMetadata
|
||||
this.checkDescriptionClamped()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -734,6 +736,7 @@ export default {
|
|||
this.$eventBus.$on('library-changed', this.libraryChanged)
|
||||
this.$eventBus.$on('new-local-library-item', this.newLocalLibraryItem)
|
||||
this.$socket.$on('item_updated', this.itemUpdated)
|
||||
this.checkDescriptionClamped()
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.windowResized)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue