<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}?library=${libraryItem.libraryId}`" 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.$elapsedPretty(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() { this.$emit('edit', this.item) }, 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 }) .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) => { if (!updatedPlaylist.items.length) { console.log(`All items removed so playlist was removed`, updatedPlaylist) this.$toast.success(this.$strings.ToastPlaylistRemoveSuccess) } else { console.log(`Item removed from playlist`, updatedPlaylist) this.$toast.success('Item removed from playlist') } }) .catch((error) => { console.error('Failed to remove item from playlist', error) this.$toast.error('Failed to remove item from playlist') }) .finally(() => { this.processingRemove = false }) } }, mounted() {} } </script>