mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2025-06-01 20:54:16 -04:00
Update:Create playlist items table
This commit is contained in:
advplyr
parent
7e171576e0
commit
623a706555
109
client/components/tables/PlaylistItemsTable.vue
Normal file
109
client/components/tables/PlaylistItemsTable.vue
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
<template>
|
||||||
|
<div class="w-full bg-primary bg-opacity-40">
|
||||||
|
<div class="w-full h-14 flex items-center px-4 md:px-6 py-2 bg-primary">
|
||||||
|
<p class="pr-4">{{ $strings.HeaderPlaylistItems }}</p>
|
||||||
|
|
||||||
|
<div class="w-6 h-6 md:w-7 md:h-7 bg-white bg-opacity-10 rounded-full flex items-center justify-center">
|
||||||
|
<span class="text-xs md:text-sm font-mono leading-none">{{ items.length }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow" />
|
||||||
|
<p v-if="totalDuration" class="text-sm text-gray-200">{{ totalDurationPretty }}</p>
|
||||||
|
</div>
|
||||||
|
<draggable v-model="itemsCopy" v-bind="dragOptions" class="list-group" handle=".drag-handle" draggable=".item" tag="div" @start="drag = true" @end="drag = false" @update="draggableUpdate">
|
||||||
|
<transition-group type="transition" :name="!drag ? 'playlist-item' : null">
|
||||||
|
<template v-for="(item, index) in itemsCopy">
|
||||||
|
<tables-playlist-item-table-row :key="index" :is-dragging="drag" :item="item" :playlist-id="playlistId" :book-cover-aspect-ratio="bookCoverAspectRatio" class="item" :class="drag ? '' : 'playlist-item-item'" />
|
||||||
|
</template>
|
||||||
|
</transition-group>
|
||||||
|
</draggable>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import draggable from 'vuedraggable'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
draggable
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
playlistId: String,
|
||||||
|
items: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
drag: false,
|
||||||
|
dragOptions: {
|
||||||
|
animation: 200,
|
||||||
|
group: 'description',
|
||||||
|
ghostClass: 'ghost'
|
||||||
|
},
|
||||||
|
itemsCopy: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
books: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
bookCoverAspectRatio() {
|
||||||
|
return this.$store.getters['libraries/getBookCoverAspectRatio']
|
||||||
|
},
|
||||||
|
totalDuration() {
|
||||||
|
var _total = 0
|
||||||
|
this.items.forEach((item) => {
|
||||||
|
if (item.episode) _total += item.episode.duration
|
||||||
|
else _total += item.libraryItem.media.duration
|
||||||
|
})
|
||||||
|
return _total
|
||||||
|
},
|
||||||
|
totalDurationPretty() {
|
||||||
|
return this.$elapsedPrettyExtended(this.totalDuration)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
draggableUpdate() {
|
||||||
|
var playlistUpdate = {
|
||||||
|
items: this.itemsCopy.map((i) => ({ libraryItemId: i.libraryItemId, episodeId: i.episodeId }))
|
||||||
|
}
|
||||||
|
this.$axios
|
||||||
|
.$patch(`/api/playlists/${this.playlistId}`, playlistUpdate)
|
||||||
|
.then((playlist) => {
|
||||||
|
console.log('Playlist updated', playlist)
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error('Failed to update playlist', error)
|
||||||
|
this.$toast.error('Failed to save playlist items order')
|
||||||
|
})
|
||||||
|
},
|
||||||
|
init() {
|
||||||
|
this.itemsCopy = this.items.map((i) => ({ ...i }))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.playlist-item-item {
|
||||||
|
transition: all 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playlist-item-enter-from,
|
||||||
|
.playlist-item-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(30px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.playlist-item-leave-active {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
231
client/components/tables/playlist/ItemTableRow.vue
Normal file
231
client/components/tables/playlist/ItemTableRow.vue
Normal file
@ -0,0 +1,231 @@
|
|||||||
|
<template>
|
||||||
|
<div class="w-full px-1 md:px-2 py-2 overflow-hidden relative" @mouseover="mouseover" @mouseleave="mouseleave" :class="isHovering ? 'bg-white bg-opacity-5' : ''">
|
||||||
|
<div v-if="item" class="flex h-16 md:h-20">
|
||||||
|
<div class="w-10 min-w-10 md:w-16 md:max-w-16 h-full">
|
||||||
|
<div class="flex h-full items-center justify-center">
|
||||||
|
<span class="material-icons drag-handle text-lg md:text-xl">menu</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="h-full relative flex items-center" :style="{ width: coverWidth + 'px', minWidth: coverWidth + 'px', maxWidth: coverWidth + 'px' }">
|
||||||
|
<covers-book-cover :library-item="libraryItem" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
|
||||||
|
<div class="absolute top-0 left-0 bg-black bg-opacity-50 flex items-center justify-center h-full w-full z-10" v-show="isHovering && showPlayBtn">
|
||||||
|
<div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-opacity-40 cursor-pointer" @click="playClick">
|
||||||
|
<span class="material-icons text-2xl">play_arrow</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow overflow-hidden max-w-48 md:max-w-md h-full flex items-center px-2 md:px-3">
|
||||||
|
<div>
|
||||||
|
<div class="truncate max-w-48 md:max-w-md">
|
||||||
|
<nuxt-link :to="`/item/${libraryItem.id}`" class="truncate hover:underline text-sm md:text-base">{{ itemTitle }}</nuxt-link>
|
||||||
|
</div>
|
||||||
|
<div class="truncate max-w-48 md:max-w-md text-xs md:text-sm text-gray-300">
|
||||||
|
<template v-for="(author, index) in bookAuthors">
|
||||||
|
<nuxt-link :key="author.id" :to="`/author/${author.id}`" class="truncate hover:underline">{{ author.name }}</nuxt-link
|
||||||
|
><span :key="author.id + '-comma'" v-if="index < bookAuthors.length - 1">, </span>
|
||||||
|
</template>
|
||||||
|
<nuxt-link v-if="episode" :to="`/item/${libraryItem.id}`" class="truncate hover:underline">{{ mediaMetadata.title }}</nuxt-link>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs md:text-sm text-gray-400">{{ itemDuration }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-40 absolute top-0 -right-24 h-full transform transition-transform" :class="!isHovering ? 'translate-x-0' : translateDistance">
|
||||||
|
<div class="flex h-full items-center">
|
||||||
|
<ui-tooltip :text="userIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="top">
|
||||||
|
<ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
|
||||||
|
</ui-tooltip>
|
||||||
|
<div v-if="userCanUpdate" class="mx-1" :class="isHovering ? '' : 'ml-6'">
|
||||||
|
<ui-icon-btn icon="edit" borderless @click="clickEdit" />
|
||||||
|
</div>
|
||||||
|
<div v-if="userCanDelete" class="mx-1">
|
||||||
|
<ui-icon-btn icon="close" borderless @click="removeClick" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
playlistId: String,
|
||||||
|
item: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {}
|
||||||
|
},
|
||||||
|
isDragging: Boolean,
|
||||||
|
bookCoverAspectRatio: Number
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isProcessingReadUpdate: false,
|
||||||
|
processingRemove: false,
|
||||||
|
isHovering: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
isDragging: {
|
||||||
|
handler(newVal) {
|
||||||
|
if (newVal) {
|
||||||
|
this.isHovering = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
translateDistance() {
|
||||||
|
if (!this.userCanUpdate && !this.userCanDelete) return 'translate-x-0'
|
||||||
|
else if (!this.userCanUpdate || !this.userCanDelete) return '-translate-x-12'
|
||||||
|
return '-translate-x-24'
|
||||||
|
},
|
||||||
|
libraryItem() {
|
||||||
|
return this.item.libraryItem || {}
|
||||||
|
},
|
||||||
|
episode() {
|
||||||
|
return this.item.episode
|
||||||
|
},
|
||||||
|
episodeId() {
|
||||||
|
return this.episode ? this.episode.id : null
|
||||||
|
},
|
||||||
|
media() {
|
||||||
|
return this.libraryItem.media || {}
|
||||||
|
},
|
||||||
|
mediaMetadata() {
|
||||||
|
return this.media.metadata || {}
|
||||||
|
},
|
||||||
|
tracks() {
|
||||||
|
if (this.episode) return []
|
||||||
|
return this.media.tracks || []
|
||||||
|
},
|
||||||
|
itemTitle() {
|
||||||
|
if (this.episode) return this.episode.title
|
||||||
|
return this.mediaMetadata.title || ''
|
||||||
|
},
|
||||||
|
bookAuthors() {
|
||||||
|
if (this.episode) return []
|
||||||
|
return this.mediaMetadata.authors || []
|
||||||
|
},
|
||||||
|
itemDuration() {
|
||||||
|
if (this.episode) return this.episode.duration
|
||||||
|
return this.$elapsedPretty(this.media.duration)
|
||||||
|
},
|
||||||
|
isMissing() {
|
||||||
|
return this.libraryItem.isMissing
|
||||||
|
},
|
||||||
|
isInvalid() {
|
||||||
|
return this.libraryItem.isInvalid
|
||||||
|
},
|
||||||
|
isStreaming() {
|
||||||
|
return this.$store.getters['getIsMediaStreaming'](this.libraryItem.id, this.episodeId)
|
||||||
|
},
|
||||||
|
showPlayBtn() {
|
||||||
|
return !this.isMissing && !this.isInvalid && !this.isStreaming && (this.tracks.length || this.episode)
|
||||||
|
},
|
||||||
|
itemProgress() {
|
||||||
|
return this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, this.episodeId)
|
||||||
|
},
|
||||||
|
userIsFinished() {
|
||||||
|
return this.itemProgress ? !!this.itemProgress.isFinished : false
|
||||||
|
},
|
||||||
|
coverSize() {
|
||||||
|
return this.$store.state.globals.isMobile ? 30 : 50
|
||||||
|
},
|
||||||
|
coverWidth() {
|
||||||
|
if (this.bookCoverAspectRatio === 1) return this.coverSize * 1.6
|
||||||
|
return this.coverSize
|
||||||
|
},
|
||||||
|
userCanUpdate() {
|
||||||
|
return this.$store.getters['user/getUserCanUpdate']
|
||||||
|
},
|
||||||
|
userCanDelete() {
|
||||||
|
return this.$store.getters['user/getUserCanDelete']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
mouseover() {
|
||||||
|
if (this.isDragging) return
|
||||||
|
this.isHovering = true
|
||||||
|
},
|
||||||
|
mouseleave() {
|
||||||
|
this.isHovering = false
|
||||||
|
},
|
||||||
|
playClick() {
|
||||||
|
let queueItem = null
|
||||||
|
if (this.episode) {
|
||||||
|
queueItem = {
|
||||||
|
libraryItemId: this.libraryItem.id,
|
||||||
|
libraryId: this.libraryItem.libraryId,
|
||||||
|
episodeId: this.episodeId,
|
||||||
|
title: this.itemTitle,
|
||||||
|
subtitle: this.mediaMetadata.title,
|
||||||
|
caption: '',
|
||||||
|
duration: this.media.duration || null,
|
||||||
|
coverPath: this.media.coverPath || null
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
queueItem = {
|
||||||
|
libraryItemId: this.libraryItem.id,
|
||||||
|
libraryId: this.libraryItem.libraryId,
|
||||||
|
episodeId: null,
|
||||||
|
title: this.itemTitle,
|
||||||
|
subtitle: this.bookAuthors.map((au) => au.name).join(', '),
|
||||||
|
caption: '',
|
||||||
|
duration: this.media.duration || null,
|
||||||
|
coverPath: this.media.coverPath || null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$eventBus.$emit('play-item', {
|
||||||
|
libraryItemId: this.libraryItem.id,
|
||||||
|
episodeId: this.episodeId,
|
||||||
|
queueItems: [queueItem]
|
||||||
|
})
|
||||||
|
},
|
||||||
|
clickEdit() {
|
||||||
|
// todo: edit
|
||||||
|
},
|
||||||
|
toggleFinished() {
|
||||||
|
var updatePayload = {
|
||||||
|
isFinished: !this.userIsFinished
|
||||||
|
}
|
||||||
|
this.isProcessingReadUpdate = true
|
||||||
|
|
||||||
|
let routepath = `/api/me/progress/${this.libraryItem.id}`
|
||||||
|
if (this.episodeId) routepath += `/${this.episodeId}`
|
||||||
|
|
||||||
|
this.$axios
|
||||||
|
.$patch(routepath, updatePayload)
|
||||||
|
.then(() => {
|
||||||
|
this.isProcessingReadUpdate = false
|
||||||
|
this.$toast.success(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedSuccess : this.$strings.ToastItemMarkedAsNotFinishedSuccess)
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error('Failed', error)
|
||||||
|
this.isProcessingReadUpdate = false
|
||||||
|
this.$toast.error(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedFailed : this.$strings.ToastItemMarkedAsNotFinishedFailed)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
removeClick() {
|
||||||
|
this.processingRemove = true
|
||||||
|
|
||||||
|
let routepath = `/api/playlists/${this.playlistId}/item/${this.libraryItem.id}`
|
||||||
|
if (this.episodeId) routepath += `/${this.episodeId}`
|
||||||
|
|
||||||
|
this.$axios
|
||||||
|
.$delete(routepath)
|
||||||
|
.then((updatedPlaylist) => {
|
||||||
|
console.log(`Item removed from playlist`, updatedPlaylist)
|
||||||
|
this.$toast.success('Item removed from playlist')
|
||||||
|
this.processingRemove = false
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error('Failed to remove item from playlist', error)
|
||||||
|
this.$toast.error('Failed to remove item from playlist')
|
||||||
|
this.processingRemove = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
185
client/pages/playlist/_id.vue
Normal file
185
client/pages/playlist/_id.vue
Normal file
@ -0,0 +1,185 @@
|
|||||||
|
<template>
|
||||||
|
<div id="page-wrapper" class="bg-bg page overflow-hidden" :class="streamLibraryItem ? 'streaming' : ''">
|
||||||
|
<div class="w-full h-full overflow-y-auto px-2 py-6 md:p-8">
|
||||||
|
<div class="flex flex-col sm:flex-row max-w-6xl mx-auto">
|
||||||
|
<div class="w-full flex justify-center md:block sm:w-32 md:w-52" style="min-width: 240px">
|
||||||
|
<div class="relative" style="height: fit-content">
|
||||||
|
<covers-playlist-cover :items="playlistItems" :width="240" :height="120 * bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow px-2 py-6 md:py-0 md:px-10">
|
||||||
|
<div class="flex items-end flex-row flex-wrap md:flex-nowrap">
|
||||||
|
<h1 class="text-2xl md:text-3xl font-sans w-full md:w-fit mb-4 md:mb-0">
|
||||||
|
{{ playlistName }}
|
||||||
|
</h1>
|
||||||
|
<div class="flex-grow" />
|
||||||
|
|
||||||
|
<ui-btn v-if="showPlayButton" :disabled="streaming" color="success" :padding-x="4" small class="flex items-center h-9 mr-2" @click="clickPlay">
|
||||||
|
<span v-show="!streaming" class="material-icons text-2xl -ml-2 pr-1 text-white">play_arrow</span>
|
||||||
|
{{ streaming ? $strings.ButtonPlaying : $strings.ButtonPlay }}
|
||||||
|
</ui-btn>
|
||||||
|
|
||||||
|
<ui-icon-btn v-if="userCanUpdate" icon="edit" class="mx-0.5" @click="editClick" />
|
||||||
|
|
||||||
|
<ui-icon-btn v-if="userCanDelete" icon="delete" class="mx-0.5" @click="removeClick" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="my-8 max-w-2xl">
|
||||||
|
<p class="text-base text-gray-100">{{ description }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<tables-playlist-items-table :items="playlistItems" :playlist-id="playlistId" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-show="processingRemove" class="absolute top-0 left-0 w-full h-full z-10 bg-black bg-opacity-40 flex items-center justify-center">
|
||||||
|
<ui-loading-indicator />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
async asyncData({ store, params, app, redirect, route }) {
|
||||||
|
if (!store.state.user.user) {
|
||||||
|
return redirect(`/login?redirect=${route.path}`)
|
||||||
|
}
|
||||||
|
var playlist = await app.$axios.$get(`/api/playlists/${params.id}`).catch((error) => {
|
||||||
|
console.error('Failed', error)
|
||||||
|
return false
|
||||||
|
})
|
||||||
|
if (!playlist) {
|
||||||
|
return redirect('/')
|
||||||
|
}
|
||||||
|
|
||||||
|
store.commit('libraries/addUpdateUserPlaylist', playlist)
|
||||||
|
return {
|
||||||
|
playlistId: playlist.id
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
processingRemove: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
bookCoverAspectRatio() {
|
||||||
|
return this.$store.getters['libraries/getBookCoverAspectRatio']
|
||||||
|
},
|
||||||
|
streamLibraryItem() {
|
||||||
|
return this.$store.state.streamLibraryItem
|
||||||
|
},
|
||||||
|
playlistItems() {
|
||||||
|
return this.playlist.items || []
|
||||||
|
},
|
||||||
|
playlistName() {
|
||||||
|
return this.playlist.name || ''
|
||||||
|
},
|
||||||
|
description() {
|
||||||
|
return this.playlist.description || ''
|
||||||
|
},
|
||||||
|
playlist() {
|
||||||
|
return this.$store.getters['libraries/getPlaylist'](this.playlistId) || {}
|
||||||
|
},
|
||||||
|
playableItems() {
|
||||||
|
return this.playlistItems.filter((item) => {
|
||||||
|
const libraryItem = item.libraryItem
|
||||||
|
if (libraryItem.isMissing || libraryItem.isInvalid) return false
|
||||||
|
if (item.episode) return item.episode.audioFile
|
||||||
|
return libraryItem.media.tracks.length
|
||||||
|
})
|
||||||
|
},
|
||||||
|
streaming() {
|
||||||
|
return !!this.playableItems.find((i) => this.$store.getters['getIsMediaStreaming'](i.libraryItemId, i.episodeId))
|
||||||
|
},
|
||||||
|
showPlayButton() {
|
||||||
|
return this.playableItems.length
|
||||||
|
},
|
||||||
|
userCanUpdate() {
|
||||||
|
return this.$store.getters['user/getUserCanUpdate']
|
||||||
|
},
|
||||||
|
userCanDelete() {
|
||||||
|
return this.$store.getters['user/getUserCanDelete']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
editClick() {
|
||||||
|
this.$store.commit('globals/setEditPlaylist', this.playlist)
|
||||||
|
},
|
||||||
|
removeClick() {
|
||||||
|
if (confirm(`Are you sure you want to remove playlist "${this.playlistName}"?`)) {
|
||||||
|
this.processingRemove = true
|
||||||
|
var playlistName = this.playlistName
|
||||||
|
this.$axios
|
||||||
|
.$delete(`/api/playlists/${this.playlist.id}`)
|
||||||
|
.then(() => {
|
||||||
|
this.processingRemove = false
|
||||||
|
this.$toast.success(`Playlist "${playlistName}" Removed`)
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error('Failed to remove playlist', error)
|
||||||
|
this.processingRemove = false
|
||||||
|
this.$toast.error(`Failed to remove playlist`)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
clickPlay() {
|
||||||
|
const queueItems = []
|
||||||
|
|
||||||
|
// Playlist queue will start at the first unfinished item
|
||||||
|
// if all items are finished then entire playlist is queued
|
||||||
|
const itemsWithProgress = this.playableItems.map((item) => {
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
progress: this.$store.getters['user/getUserMediaProgress'](item.libraryItemId, item.episodeId)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const hasUnfinishedItems = itemsWithProgress.some((i) => !i.progress || !i.progress.isFinished)
|
||||||
|
if (!hasUnfinishedItems) {
|
||||||
|
console.warn('All items in playlist are finished - starting at first item')
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < itemsWithProgress.length; i++) {
|
||||||
|
const playlistItem = itemsWithProgress[i]
|
||||||
|
if (!hasUnfinishedItems || !playlistItem.progress || !playlistItem.progress.isFinished) {
|
||||||
|
const libraryItem = playlistItem.libraryItem
|
||||||
|
if (playlistItem.episode) {
|
||||||
|
queueItems.push({
|
||||||
|
libraryItemId: libraryItem.id,
|
||||||
|
libraryId: libraryItem.libraryId,
|
||||||
|
episodeId: playlistItem.episode.id,
|
||||||
|
title: playlistItem.episode.title,
|
||||||
|
subtitle: libraryItem.media.metadata.title,
|
||||||
|
caption: '',
|
||||||
|
duration: playlistItem.episode.duration || null,
|
||||||
|
coverPath: libraryItem.media.coverPath || null
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
queueItems.push({
|
||||||
|
libraryItemId: libraryItem.id,
|
||||||
|
libraryId: libraryItem.libraryId,
|
||||||
|
episodeId: null,
|
||||||
|
title: libraryItem.media.metadata.title,
|
||||||
|
subtitle: libraryItem.media.metadata.authors.map((au) => au.name).join(', '),
|
||||||
|
caption: '',
|
||||||
|
duration: libraryItem.media.duration || null,
|
||||||
|
coverPath: libraryItem.media.coverPath || null
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (queueItems.length >= 0) {
|
||||||
|
this.$eventBus.$emit('play-item', {
|
||||||
|
libraryItemId: queueItems[0].libraryItemId,
|
||||||
|
episodeId: queueItems[0].episodeId,
|
||||||
|
queueItems
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
beforeDestroy() {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -60,6 +60,9 @@ export const getters = {
|
|||||||
},
|
},
|
||||||
getCollection: state => id => {
|
getCollection: state => id => {
|
||||||
return state.collections.find(c => c.id === id)
|
return state.collections.find(c => c.id === id)
|
||||||
|
},
|
||||||
|
getPlaylist: state => id => {
|
||||||
|
return state.userPlaylists.find(p => p.id === id)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -112,6 +112,7 @@
|
|||||||
"HeaderOtherFiles": "Other Files",
|
"HeaderOtherFiles": "Other Files",
|
||||||
"HeaderPermissions": "Permissions",
|
"HeaderPermissions": "Permissions",
|
||||||
"HeaderPlayerQueue": "Player Queue",
|
"HeaderPlayerQueue": "Player Queue",
|
||||||
|
"HeaderPlaylistItems": "Playlist Items",
|
||||||
"HeaderPodcastsToAdd": "Podcasts to Add",
|
"HeaderPodcastsToAdd": "Podcasts to Add",
|
||||||
"HeaderPreviewCover": "Preview Cover",
|
"HeaderPreviewCover": "Preview Cover",
|
||||||
"HeaderRemoveEpisode": "Remove Episode",
|
"HeaderRemoveEpisode": "Remove Episode",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user