Playlist and collections cleanup

client/components/modals/collections/AddCreateModal.vue

@@ -112,23 +112,21 @@ export default {
   },
   methods: {
     loadCollections() {
-      if (!this.collections.length) {
-        this.processing = true
-        this.$axios
-          .$get(`/api/libraries/${this.currentLibraryId}/collections`)
-          .then((data) => {
-            if (data.results) {
-              this.$store.commit('libraries/setCollections', data.results || [])
-            }
-          })
-          .catch((error) => {
-            console.error('Failed to get collections', error)
-            this.$toast.error('Failed to load collections')
-          })
-          .finally(() => {
-            this.processing = false
-          })
-      }
+      this.processing = true
+      this.$axios
+        .$get(`/api/libraries/${this.currentLibraryId}/collections`)
+        .then((data) => {
+          if (data.results) {
+            this.$store.commit('libraries/setCollections', data.results || [])
+          }
+        })
+        .catch((error) => {
+          console.error('Failed to get collections', error)
+          this.$toast.error('Failed to load collections')
+        })
+        .finally(() => {
+          this.processing = false
+        })
     },
     removeFromCollection(collection) {
       if (!this.selectedLibraryItemId && !this.selectedBookIds.length) return
@@ -231,19 +229,3 @@ export default {
   mounted() {}
 }
 </script>
-
-<style>
-.list-complete-item {
-  transition: all 0.8s ease;
-}
-
-.list-complete-enter-from,
-.list-complete-leave-to {
-  opacity: 0;
-  transform: translateY(30px);
-}
-
-.list-complete-leave-active {
-  position: absolute;
-}
-</style>

client/components/modals/playlists/AddCreateModal.vue

@@ -15,7 +15,7 @@
         <div class="w-full overflow-y-auto overflow-x-hidden max-h-96">
           <transition-group name="list-complete" tag="div">
             <template v-for="playlist in sortedPlaylists">
-              <modals-playlists-user-playlist-item :key="playlist.id" :playlist="playlist" :book-cover-aspect-ratio="bookCoverAspectRatio" class="list-complete-item" @add="addToPlaylist" @remove="removeFromPlaylist" @close="show = false" />
+              <modals-playlists-user-playlist-item :key="playlist.id" :playlist="playlist" class="list-complete-item" @add="addToPlaylist" @remove="removeFromPlaylist" @close="show = false" />
             </template>
           </transition-group>
         </div>
@@ -77,9 +77,6 @@ export default {
     playlists() {
       return this.$store.state.libraries.userPlaylists || []
     },
-    bookCoverAspectRatio() {
-      return this.$store.getters['libraries/getBookCoverAspectRatio']
-    },
     sortedPlaylists() {
       return this.playlists
         .map((playlist) => {
@@ -110,21 +107,19 @@ export default {
       return playlist.items.some((i) => i.libraryItemId === item.libraryItem.id)
     },
     loadPlaylists() {
-      if (!this.playlists.length) {
-        this.processing = true
-        this.$axios
-          .$get(`/api/libraries/${this.currentLibraryId}/playlists`)
-          .then((data) => {
-            this.$store.commit('libraries/setUserPlaylists', data.results || [])
-          })
-          .catch((error) => {
-            console.error('Failed to get playlists', error)
-            this.$toast.error('Failed to load user playlists')
-          })
-          .finally(() => {
-            this.processing = false
-          })
-      }
+      this.processing = true
+      this.$axios
+        .$get(`/api/libraries/${this.currentLibraryId}/playlists`)
+        .then((data) => {
+          this.$store.commit('libraries/setUserPlaylists', data.results || [])
+        })
+        .catch((error) => {
+          console.error('Failed to get playlists', error)
+          this.$toast.error('Failed to load user playlists')
+        })
+        .finally(() => {
+          this.processing = false
+        })
     },
     removeFromPlaylist(playlist) {
       if (!this.selectedPlaylistItems.length) return
@@ -194,19 +189,3 @@ export default {
   mounted() {}
 }
 </script>
-
-<style>
-.list-complete-item {
-  transition: all 0.8s ease;
-}
-
-.list-complete-enter-from,
-.list-complete-leave-to {
-  opacity: 0;
-  transform: translateY(30px);
-}
-
-.list-complete-leave-active {
-  position: absolute;
-}
-</style>

client/components/modals/playlists/EditModal.vue

@@ -9,7 +9,7 @@
       <form @submit.prevent="submitForm">
         <div class="flex">
           <div>
-            <covers-playlist-cover :items="items" :width="200" :height="100 * bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+            <covers-playlist-cover :items="items" :width="200" :height="200" />
           </div>
           <div class="flex-grow px-4">
             <ui-text-input-with-label v-model="newPlaylistName" :label="$strings.LabelName" class="mb-2" />
@@ -55,9 +55,6 @@ export default {
         this.$store.commit('globals/setShowEditPlaylistModal', val)
       }
     },
-    bookCoverAspectRatio() {
-      return this.$store.getters['libraries/getBookCoverAspectRatio']
-    },
     playlist() {
       return this.$store.state.globals.selectedPlaylist || {}
     },

client/components/modals/playlists/UserPlaylistItem.vue

@@ -1,8 +1,8 @@
 <template>
   <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-playlist-cover :items="items" :width="80" :height="40 * bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+    <div class="w-16 max-w-16 text-center">
+      <covers-playlist-cover :items="items" :width="64" :height="64" />
     </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>
@@ -20,8 +20,7 @@ export default {
     playlist: {
       type: Object,
       default: () => {}
-    },
-    bookCoverAspectRatio: Number
+    }
   },
   data() {
     return {