Update playlist cover to square of 4 items

client/components/app/LazyBookshelf.vue

@@ -167,7 +167,7 @@ export default {
       return coverSize
     },
     bookHeight() {
-      if (this.isCoverSquareAspectRatio) return this.bookWidth
+      if (this.isCoverSquareAspectRatio || this.entityName === 'playlists') return this.bookWidth
       return this.bookWidth * 1.6
     },
     shelfPadding() {
@@ -178,7 +178,7 @@ export default {
       return this.shelfPadding * 2
     },
     entityWidth() {
-      if (this.entityName === 'series' || this.entityName === 'collections' || this.entityName === 'playlists') {
+      if (this.entityName === 'series' || this.entityName === 'collections') {
         if (this.bookWidth * 2 > this.bookshelfWidth - this.shelfPadding) return this.bookWidth * 1.6
         return this.bookWidth * 2
       }

client/components/covers/PlaylistCover.vue

@@ -6,11 +6,12 @@
       </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 v-else-if="items.length" class="flex flex-wrap 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 v-for="li in libraryItemCovers" :key="li.id" :library-item="li" :width="width / 2" :book-cover-aspect-ratio="1" />
 
-      <covers-book-cover :library-item="items[0].libraryItem" :width="width / 2" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+      <!-- <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" />
+      <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" />
@@ -47,6 +48,19 @@ export default {
     },
     fullCoverUrl() {
       return null
+    },
+    libraryItemCovers() {
+      if (!this.items.length) return []
+      if (this.items.length === 1) return [this.items[0].libraryItem]
+
+      const covers = []
+      for (let i = 0; i < 4; i++) {
+        let index = i % this.items.length
+        if (this.items.length === 2 && i >= 2) index = (i + 1) % 2 // for playlists with 2 items show covers in checker pattern
+
+        covers.push(this.items[index].libraryItem)
+      }
+      return covers
     }
   },
   methods: {

client/pages/playlist/_id.vue

@@ -2,9 +2,9 @@
   <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="w-full flex justify-center md:block sm:w-32 md:w-52" style="min-width: 200px">
           <div class="relative" style="height: fit-content">
-            <covers-playlist-cover :items="playlistItems" :width="240" :height="120 * bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+            <covers-playlist-cover :items="playlistItems" :width="200" :height="200 * bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
           </div>
         </div>
         <div class="flex-grow px-2 py-6 md:py-0 md:px-10">