mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2025-01-22 00:07:52 +01:00
Update:Create playlist items table
This commit is contained in:
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 => {
|
||||
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",
|
||||
"HeaderPermissions": "Permissions",
|
||||
"HeaderPlayerQueue": "Player Queue",
|
||||
"HeaderPlaylistItems": "Playlist Items",
|
||||
"HeaderPodcastsToAdd": "Podcasts to Add",
|
||||
"HeaderPreviewCover": "Preview Cover",
|
||||
"HeaderRemoveEpisode": "Remove Episode",
|
||||
|
Loading…
Reference in New Issue
Block a user