Update:Playlist cover & json expanded

client/components/covers/PlaylistCover.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="relative rounded-sm overflow-hidden" :style="{ width: width + 'px', height: height + 'px' }">
+    <div v-if="hasOwnCover" class="w-full h-full relative rounded-sm">
+      <div v-if="showCoverBg" class="bg-primary absolute top-0 left-0 w-full h-full">
+        <div class="w-full h-full z-0" ref="coverBg" />
+      </div>
+      <img ref="cover" :src="fullCoverUrl" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0" :class="showCoverBg ? 'object-contain' : 'object-cover'" />
+    </div>
+    <div v-else-if="items.length" class="flex justify-center h-full relative bg-primary bg-opacity-95 rounded-sm">
+      <div class="absolute top-0 left-0 w-full h-full bg-gray-400 bg-opacity-5" />
+
+      <covers-book-cover :library-item="items[0].libraryItem" :width="width / 2" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+      <covers-book-cover v-if="items.length > 1" :library-item="items[1].libraryItem" :width="width / 2" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+    </div>
+    <div v-else class="relative w-full h-full flex items-center justify-center p-2 bg-primary rounded-sm">
+      <div class="absolute top-0 left-0 w-full h-full bg-gray-400 bg-opacity-5" />
+
+      <p class="font-book text-white text-opacity-60 text-center" :style="{ fontSize: Math.min(1, sizeMultiplier) + 'rem' }">Empty Playlist</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    width: Number,
+    height: Number,
+    bookCoverAspectRatio: Number
+  },
+  data() {
+    return {
+      imageFailed: false,
+      showCoverBg: false
+    }
+  },
+  computed: {
+    sizeMultiplier() {
+      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
+      return this.width / 240
+    },
+    hasOwnCover() {
+      return false
+    },
+    fullCoverUrl() {
+      return null
+    }
+  },
+  methods: {
+    imageError() {},
+    imageLoaded() {}
+  },
+  mounted() {}
+}
+</script>

client/components/modals/playlists/AddCreateModal.vue

@@ -83,9 +83,7 @@ export default {
     sortedPlaylists() {
       return this.playlists
         .map((playlist) => {
-          const includesItem = !this.selectedPlaylistItems.some((item) => {
-            return !this.checkIsItemInPlaylist(playlist, item)
-          })
+          const includesItem = !this.selectedPlaylistItems.some((item) => !this.checkIsItemInPlaylist(playlist, item))
 
           return {
             isItemIncluded: includesItem,
@@ -137,7 +135,7 @@ export default {
         .$post(`/api/playlists/${playlist.id}/batch/remove`, { items: itemObjects })
         .then((updatedPlaylist) => {
           console.log(`Items removed from playlist`, updatedPlaylist)
-          this.$toast.success('Playlist item(s) added')
+          this.$toast.success('Playlist item(s) removed')
           this.processing = false
         })
         .catch((error) => {

client/components/modals/playlists/UserPlaylistItem.vue

@@ -2,7 +2,7 @@
   <div class="flex items-center px-4 py-2 justify-start relative hover:bg-bg" @mouseover="mouseover" @mouseleave="mouseleave">
     <div v-if="isItemIncluded" class="absolute top-0 left-0 h-full w-1 bg-success z-10" />
     <div class="w-20 max-w-20 text-center">
-      <!-- <covers-collection-cover :book-items="books" :width="80" :height="40 * bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" /> -->
+      <covers-playlist-cover :items="items" :width="80" :height="40 * bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
     </div>
     <div class="flex-grow overflow-hidden px-2">
       <nuxt-link :to="`/playlist/${playlist.id}`" class="pl-2 pr-2 truncate hover:underline cursor-pointer" @click.native="clickNuxtLink">{{ playlist.name }}</nuxt-link>

client/layouts/default.vue

@@ -306,6 +306,23 @@ export default {
       }
       this.$store.commit('libraries/removeCollection', collection)
     },
+    playlistAdded(playlist) {
+      if (playlist.userId !== this.user.id) return
+      this.$store.commit('user/addUpdatePlaylist', playlist)
+    },
+    playlistUpdated(playlist) {
+      if (playlist.userId !== this.user.id) return
+      this.$store.commit('user/addUpdatePlaylist', playlist)
+    },
+    playlistRemoved(playlist) {
+      if (playlist.userId !== this.user.id) return
+      if (this.$route.name.startsWith('playlist')) {
+        if (this.$route.params.id === playlist.id) {
+          this.$router.replace(`/library/${this.$store.state.libraries.currentLibraryId}/bookshelf/playlists`)
+        }
+      }
+      this.$store.commit('user/removePlaylist', playlist)
+    },
     rssFeedOpen(data) {
       this.$store.commit('feeds/addFeed', data)
     },
@@ -382,11 +399,16 @@ export default {
       this.socket.on('user_stream_update', this.userStreamUpdate)
       this.socket.on('user_item_progress_updated', this.userMediaProgressUpdate)
 
-      // User Collection Listeners
+      // Collection Listeners
       this.socket.on('collection_added', this.collectionAdded)
       this.socket.on('collection_updated', this.collectionUpdated)
       this.socket.on('collection_removed', this.collectionRemoved)
 
+      // User Playlist Listeners
+      this.socket.on('playlist_added', this.playlistAdded)
+      this.socket.on('playlist_updated', this.playlistUpdated)
+      this.socket.on('playlist_removed', this.playlistRemoved)
+
       // Scan Listeners
       this.socket.on('scan_start', this.scanStart)
       this.socket.on('scan_complete', this.scanComplete)

server/controllers/PlaylistController.js

@@ -145,7 +145,7 @@ class PlaylistController {
         return res.status(400).send('Item does not have libraryItemId')
       }
       if (playlist.containsItem(item)) {
-        playlist.removeItem(item)
+        playlist.removeItem(item.libraryItemId, item.episodeId)
         hasUpdated = true
       }
     }

server/objects/Playlist.js

@@ -57,11 +57,16 @@ class Playlist {
           return null
         }
 
-        const episodeJson = episode.toJSONExpanded()
-        episodeJson.libraryItem = libraryItem.toJSONMinified()
-        return episodeJson
+        return {
+          ...item,
+          episode: episode.toJSONExpanded(),
+          libraryItem: libraryItem.toJSONMinified()
+        }
       } else {
-        return libraryItem.toJSONExpanded()
+        return {
+          ...item,
+          libraryItem: libraryItem.toJSONExpanded()
+        }
       }
     }).filter(i => i)
     return json
@@ -105,7 +110,7 @@ class Playlist {
 
   removeItem(libraryItemId, episodeId = null) {
     if (episodeId) this.items = this.items.filter(i => i.libraryItemId !== libraryItemId || i.episodeId !== episodeId)
-    else this.items = this.items.filter(i => i !== i.libraryItemId !== libraryItemId)
+    else this.items = this.items.filter(i => i.libraryItemId !== libraryItemId)
     this.lastUpdate = Date.now()
   }