From 53d2720a44bbff78b1fced32c7215a461986a839 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Thu, 31 Oct 2024 10:58:45 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Fix=20&=20improve=20book=20cover?=
 =?UTF-8?q?=20placeholder?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NFTBook/Cover.vue          | 27 ++++++++++++++++++-----
 src/components/NFTBook/ItemCard.vue       |  2 +-
 src/components/NFTCollection/ItemCard.vue | 10 ++++++++-
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/components/NFTBook/Cover.vue b/src/components/NFTBook/Cover.vue
index 7b206230b..db213be0d 100644
--- a/src/components/NFTBook/Cover.vue
+++ b/src/components/NFTBook/Cover.vue
@@ -1,6 +1,21 @@
 <template>
   <div :class="wrapperClasses">
+    <svg
+      v-if="!isLoaded || isError"
+      class="w-full h-full"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 210 297"
+      :style="`color: ${placeholderColor}`"
+    >
+      <rect width="210" height="297" fill="currentColor" opacity="0.2" />
+      <path
+        d="M127.14,154.19l-6.1-.03c-.75,0-1.18-.43-1.18-1.19l.05-14.05c-.03-.3.19-.56.48-.59.04,0,.07,0,.11,0h1.02c.3-.03.56.19.59.48,0,.04,0,.07,0,.11l-.05,12.74c-.03.29.18.56.47.59.04,0,.08,0,.12,0l4.49.02c.3-.03.56.18.59.48,0,.04,0,.08,0,.12v.73c.03.3-.19.56-.48.59-.04,0-.07,0-.11,0M140.25,154.24h-.7c-.17,0-.33-.09-.42-.24-.05-.13-.19-.19-.31-.15-.02,0-.05.02-.07.04-.71.41-1.52.63-2.34.61-2.66,0-4.43-2.06-4.42-4.37s1.79-4.35,4.45-4.34c.69,0,1.36.15,1.99.44.21.11.38-.05.38-.32,0-1.21-.85-2.45-2.36-2.46-.78,0-1.55.18-2.23.55-.35.19-.56.05-.75-.27l-.35-.63c-.14-.3-.01-.66.29-.8,0,0,0,0,0,0,.93-.52,1.98-.78,3.04-.77,2.66,0,4.43,2.06,4.42,4.37l-.03,7.75c.03.29-.18.56-.48.59-.04,0-.08,0-.12,0M136.43,147.69c-1.51,0-2.37,1.23-2.37,2.44s.85,2.45,2.36,2.46,2.37-1.23,2.37-2.44-.85-2.45-2.36-2.46M154.73,154.29h-.89c-.3.03-.56-.19-.59-.48,0-.04,0-.07,0-.11l.03-7.75c0-1.21-.85-2.45-2.36-2.46s-2.37,1.23-2.38,2.44l-.03,7.75c.03.3-.19.56-.48.59-.04,0-.07,0-.11,0h-.89c-.3.03-.56-.18-.59-.48,0-.04,0-.08,0-.12l.04-11.24c-.03-.3.19-.56.48-.59.04,0,.08,0,.11,0h.7c.18,0,.34.09.43.24.05.13.19.19.31.14.02,0,.04-.02.06-.03.71-.42,1.52-.63,2.34-.61,2.66.01,4.43,2.06,4.42,4.37l-.03,7.75c.03.3-.19.56-.48.59-.04,0-.08,0-.11,0M168.54,154.35h-.7c-.17,0-.33-.09-.42-.24-.05-.13-.19-.19-.31-.15-.02,0-.05.02-.07.04-.71.42-1.52.63-2.34.61-2.66-.01-4.43-2.06-4.42-4.37l.02-4.25c0-2.3,1.79-4.35,4.45-4.34.67.02,1.32.17,1.93.44.24.11.43-.03.43-.24v-2.74c-.03-.3.19-.56.48-.59.04,0,.08,0,.11,0h.89c.3-.03.56.18.59.48,0,.04,0,.08,0,.11l-.06,14.66c.03.29-.19.56-.48.58-.04,0-.08,0-.11,0ZM167.09,146.01c0-1.21-.85-2.45-2.36-2.46s-2.37,1.23-2.37,2.44l-.02,4.25c0,1.21.85,2.45,2.36,2.46s2.37-1.23,2.37-2.44l.02-4.25ZM50.03,150.85l-5.6-.02c-.17.02-.32-.11-.34-.27,0-.02,0-.04,0-.06l.05-11.78c.04-.34-.21-.64-.54-.68-.04,0-.08,0-.13,0h-1.93c-.34-.04-.64.2-.68.54,0,.04,0,.09,0,.13l-.05,13.82c0,.86.48,1.35,1.34,1.35l7.86.03c.34.04.64-.2.68-.54,0-.04,0-.09,0-.13v-1.7c.04-.34-.2-.64-.54-.68-.04,0-.09,0-.13,0M59.29,144.22h-2.17c-.33-.03-.63.21-.66.55,0,.04,0,.08,0,.12l-.02,4.25v4.1c-.04.33.19.63.52.67.04,0,.09,0,.13,0h2.17c.33.03.63-.21.66-.55,0-.04,0-.08,0-.12v-3.52s.01-.58.01-.58l.02-4.26c.04-.33-.19-.63-.52-.67-.04,0-.09,0-.13,0M57.21,142.04c.18-.11.15-.3.14-.45-.09-.75-.81-3.92-1.03-4.58-.11-.33-.31-.42-.55-.36-.32.06-.73.27-1.39.66s-1.03.66-1.23.91c-.17.18-.15.47.03.64,0,0,.02.02.03.02.47.5,2.93,2.64,3.54,3.07.12.09.28.21.46.09h0ZM59.14,137.85c.19.1.34-.02.46-.11,1.2-1.01,2.33-2.09,3.4-3.23.22-.26.19-.48.03-.66-.21-.24-.6-.5-1.27-.86s-1.09-.55-1.41-.59c-.24-.04-.44.05-.54.39-.19.66-.77,3.87-.83,4.61-.01.15-.03.34.16.44h0ZM76.94,154h-1.93c-.34.03-.64-.21-.67-.55,0-.04,0-.09,0-.13v-2.85c-.03-1.23-1.06-2.21-2.3-2.18-1.18.03-2.14.98-2.18,2.16v2.85c.03.34-.21.64-.55.67-.04,0-.09,0-.13,0h-1.93c-.34.03-.64-.21-.67-.55,0-.04,0-.08,0-.12l.06-14.19c-.03-.34.21-.64.55-.67.04,0,.09,0,.13,0h1.93c.34-.03.64.21.67.55,0,.04,0,.08,0,.12l-.03,6.02c0,.25.2.46.46.46.01,0,.02,0,.03,0,.27,0,.64-.24.86-.58l2.61-3.82c.31-.43.58-.64,1.01-.64h2.24c.49,0,.73.4.46.83l-2.93,3.94c-.15.24-.18.46.18.64,1.72.84,2.81,2.6,2.8,4.51v2.85c.02.34-.22.64-.56.67-.04,0-.09,0-.13,0M87.85,140.28c-3.14-.01-5.23,2.24-5.23,4.82l-.03,4.3c0,2.58,2.07,4.85,5.2,4.86,2.85.01,3.95-1.33,4.51-2.45.1-.2.18-.63-.17-.87l-1.36-.91c-.32-.21-.67-.18-.87.14-.55.93-1.2,1.33-2.09,1.33-1.14.02-2.08-.88-2.11-2.02,0-.02,0-.05,0-.07v-.52c-.02-.16.1-.3.26-.32.02,0,.04,0,.06,0l5.74.02c.81,0,1.28-.46,1.28-1.27v-2.17c.01-2.58-2.07-4.85-5.18-4.86ZM89.95,145.65c.02.16-.1.3-.26.32-.02,0-.04,0-.06,0h-3.59c-.16,0-.3-.11-.32-.27,0-.02,0-.04,0-.06v-.52c0-1.17.96-2.11,2.12-2.11,1.17,0,2.11.96,2.11,2.12h0v.52ZM108.67,143.5c-.59-1.43-2.14-3.02-4.91-3.03-.12,0-.02,0-.14.01h0c-.8-.02-1.59.16-2.3.53-.1.04-.19.09-.28.14s-.23.03-.35-.14c-.12-.17-.31-.27-.52-.26h-1.13c-.32-.04-.61.2-.64.51,0,.04,0,.08,0,.12l-.02,3.93v4.17s-.04,3.93-.04,3.93c-.03.32.2.61.52.64.04,0,.07,0,.11,0h1.79c.44,0,.69-.23.69-.63v-3.93s.04-4.18.04-4.18c0-1.15,1.05-2.09,2.28-2.09,1.37,0,2.02.69,2.62,1.71.19.34.59.35.93.15l1.19-.73c.37-.23.28-.67.19-.87"
+        fill="currentColor"
+        fill-rule="evenodd"
+      />
+    </svg>
     <img
+      v-if="!isError"
       ref="img"
       :class="coverClass"
       :src="resizedSrc"
@@ -11,7 +26,6 @@
 
     <!-- Book highlight effect -->
     <div
-      v-show="isLoaded"
       class="absolute inset-0 pointer-events-none"
       style="background: linear-gradient(90deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 2.31%), linear-gradient(180deg, rgba(136, 136, 136, 0.00) 98.62%, rgba(136, 136, 136, 0.12) 98.95%, rgba(39, 37, 34, 0.15) 99.43%, rgba(0, 0, 0, 0.06) 100%), linear-gradient(90deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.00) 17.98%);"
     />
@@ -21,7 +35,7 @@
 <script>
 import { getImageResizeAPI } from '~/util/api';
 
-const coverPlaceholderSrc = require('~/assets/images/nft/primitive-nft.jpg');
+const PLACEHOLDER_COLORS = ['#37B7C3', '#58A399', '#A8CD9F', '#36BA98'];
 
 export default {
   props: {
@@ -47,6 +61,10 @@ export default {
       isPortrait: true,
       isError: false,
       isLoaded: false,
+      placeholderColor:
+        PLACEHOLDER_COLORS[
+          Math.floor(Math.random() * PLACEHOLDER_COLORS.length)
+        ],
     };
   },
   computed: {
@@ -58,6 +76,7 @@ export default {
         'relative',
         'rounded-[4px]',
         'overflow-hidden',
+        'bg-gray-e6',
         this.isPortrait ? 'h-full' : 'w-full',
         {
           '[box-shadow:-8px_42px_64px_0px_rgba(0,_0,_0,_0.12)]': this.isLoaded,
@@ -78,9 +97,7 @@ export default {
       ];
     },
     resizedSrc() {
-      return this.isError
-        ? coverPlaceholderSrc
-        : getImageResizeAPI(this.src, { width: this.resize });
+      return getImageResizeAPI(this.src, { width: this.resize });
     },
   },
   watch: {
diff --git a/src/components/NFTBook/ItemCard.vue b/src/components/NFTBook/ItemCard.vue
index fbcbbea33..9c1d76e7c 100644
--- a/src/components/NFTBook/ItemCard.vue
+++ b/src/components/NFTBook/ItemCard.vue
@@ -92,7 +92,7 @@
             @show.once="fetchInfo"
           />
         </client-only>
-        <div class="flex flex-col items-center shrink-0">
+        <div class="flex flex-col items-center shrink-0 w-full max-w-[200px]">
           <NFTCover
             v-if="videoSrc"
             :class="['mt-[-48px]', coverClasses]"
diff --git a/src/components/NFTCollection/ItemCard.vue b/src/components/NFTCollection/ItemCard.vue
index fdf9eaff8..1856f0f0d 100644
--- a/src/components/NFTCollection/ItemCard.vue
+++ b/src/components/NFTCollection/ItemCard.vue
@@ -42,8 +42,9 @@
             @show.once="fetchInfo"
           />
         </client-only>
-        <div class="flex flex-col items-center shrink-0">
+        <div class="flex flex-col items-center shrink-0 w-full max-w-[200px]">
           <NFTCover
+            v-if="videoSrc"
             :class="['mt-[-48px]', coverClasses]"
             :is-nft-book="true"
             :src="imageSrc || collectionImageUrl"
@@ -53,6 +54,13 @@
             :is-collection="true"
             :alt="collectionName"
           />
+          <NFTBookCover
+            v-else
+            :class="['mt-[-48px]', coverClasses]"
+            :src="imageSrc || collectionImageUrl"
+            :alt="collectionName"
+            :resize="200"
+          />
           <Label
             class="mt-[24px] !text-[12px] text-medium-gray"
             :text="$t('nft_collection_num_of_books', { num: classIds.length })"