From bc3cc0cafdb0d1b470853dee1816d60c0dba7ae9 Mon Sep 17 00:00:00 2001
From: William Chong <me@williamchong.cloud>
Date: Wed, 11 Dec 2024 00:03:36 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=91=BD=EF=B8=8F=20Support=20iscn=20author?=
 =?UTF-8?q?=20as=20object?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NFTBook/ItemCard.vue       | 10 +++++-----
 src/components/NFTBook/ItemCardV2.vue     |  6 +++---
 src/components/NFTPage/PreviewCard.vue    |  6 +++---
 src/components/NFTPage/Recommendation.vue |  2 +-
 src/mixins/nft.js                         | 12 ++++++++++--
 src/pages/nft/claim/index.vue             |  4 ++--
 src/pages/nft/class/_classId/_nftId.vue   |  6 +++---
 src/pages/nft/class/_classId/index.vue    | 14 +++++++-------
 src/pages/nft/gift/index.vue              |  4 ++--
 9 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/components/NFTBook/ItemCard.vue b/src/components/NFTBook/ItemCard.vue
index bee2d641f..82d836cc0 100644
--- a/src/components/NFTBook/ItemCard.vue
+++ b/src/components/NFTBook/ItemCard.vue
@@ -36,7 +36,7 @@
       <Label
         class="text-medium-gray mt-[6px] mb-[12px]"
         preset="p6"
-        :text="(iscnWorkAuthor || creatorDisplayName) | ellipsis"
+        :text="(iscnWorkAuthorName || creatorDisplayName) | ellipsis"
       />
       <Label
         v-if="nftBookAvailablePriceLabel"
@@ -154,7 +154,7 @@
           </p>
           <NFTBookSpecTable class="mt-[12px]">
             <li
-              v-if="iscnWorkAuthor"
+              v-if="iscnWorkAuthorName"
               class="flex flex-col justify-center min-w-0"
             >
               <NuxtLink
@@ -162,14 +162,14 @@
                 :to="
                   localeLocation({
                     name: 'store',
-                    query: { q: iscnWorkAuthor },
+                    query: { q: iscnWorkAuthorName },
                   })
                 "
               >
                 <NFTBookSpecTableLabel :text="$t('identity_type_author')" />
                 <NFTBookSpecTableValue
                   class="group-hover:underline"
-                  :text="iscnWorkAuthor"
+                  :text="iscnWorkAuthorName"
                   :preset="preset"
                 />
               </NuxtLink>
@@ -210,7 +210,7 @@
                     <NFTBookSpecTableLabel
                       :text="
                         $t(
-                          iscnWorkAuthor
+                          iscnWorkAuthorName
                             ? iscnWorkPublisher
                               ? 'identity_type_distributor'
                               : 'identity_type_publisher'
diff --git a/src/components/NFTBook/ItemCardV2.vue b/src/components/NFTBook/ItemCardV2.vue
index 54967778b..da45c4161 100644
--- a/src/components/NFTBook/ItemCardV2.vue
+++ b/src/components/NFTBook/ItemCardV2.vue
@@ -29,18 +29,18 @@
 
     <div class="text-[#8B8B8B] text-[0.875rem] laptop:text-[1rem]">
       <NuxtLink
-        v-if="iscnWorkAuthor"
+        v-if="iscnWorkAuthorName"
         :to="
           localeLocation({
             name: 'store',
             query: {
-              q: iscnWorkAuthor,
+              q: iscnWorkAuthorName,
               ll_medium: linkMedium,
             },
           })
         "
       >
-        {{ iscnWorkAuthor | ellipsis }}
+        {{ iscnWorkAuthorName | ellipsis }}
       </NuxtLink>
       <NuxtLink
         v-else
diff --git a/src/components/NFTPage/PreviewCard.vue b/src/components/NFTPage/PreviewCard.vue
index a5a558202..7db89541a 100644
--- a/src/components/NFTPage/PreviewCard.vue
+++ b/src/components/NFTPage/PreviewCard.vue
@@ -76,14 +76,14 @@
         </NuxtLink>
 
         <div
-          v-if="iscnWorkAuthor"
+          v-if="iscnWorkAuthorName"
           class="my-[1rem] flex flex-col items-center text-center min-w-0 w-full"
         >
           <span class="text-like-cyan-gray text-10">{{
             $t('identity_type_author')
           }}</span>
           <span class="w-full truncate text-dark-gray">{{
-            iscnWorkAuthor
+            iscnWorkAuthorName
           }}</span>
         </div>
       </div>
@@ -199,7 +199,7 @@ export default {
       type: String,
       default: undefined,
     },
-    iscnWorkAuthor: {
+    iscnWorkAuthorName: {
       type: String,
       default: undefined,
     },
diff --git a/src/components/NFTPage/Recommendation.vue b/src/components/NFTPage/Recommendation.vue
index 8804f21c5..804c57695 100644
--- a/src/components/NFTPage/Recommendation.vue
+++ b/src/components/NFTPage/Recommendation.vue
@@ -152,7 +152,7 @@ export default {
       if (this.type === NFT_TYPE.COLLECTION) {
         return true;
       }
-      return !!this.iscnWorkAuthor;
+      return !!this.iscnWorkAuthorName;
     },
     defaultFeaturedWNFT() {
       return DEFAULT_RECOMMENDATIONS_LIST.WNFT.map(nft => ({
diff --git a/src/mixins/nft.js b/src/mixins/nft.js
index f498b1cbc..e7c77223a 100644
--- a/src/mixins/nft.js
+++ b/src/mixins/nft.js
@@ -179,7 +179,13 @@ export default {
       );
     },
     iscnWorkAuthor() {
-      return this.iscnData?.contentMetadata?.author?.trim();
+      return this.iscnData?.contentMetadata?.author;
+    },
+    iscnWorkAuthorName() {
+      if (typeof this.iscnWorkAuthor === 'string') {
+        return this.iscnWorkAuthor.trim();
+      }
+      return this.iscnWorkAuthor?.name?.trim();
     },
     iscnWorkPublisher() {
       return this.iscnData?.contentMetadata?.publisher?.trim();
@@ -679,7 +685,9 @@ export default {
     },
     nftSignImageAuthor() {
       const customAuthor = NFT_BOOK_WITH_SIGN_IMAGE_SET.get(this.classId);
-      return customAuthor || this.iscnWorkAuthor || this.creatorDisplayNameFull;
+      return (
+        customAuthor || this.iscnWorkAuthorName || this.creatorDisplayNameFull
+      );
     },
   },
   watch: {
diff --git a/src/pages/nft/claim/index.vue b/src/pages/nft/claim/index.vue
index 7d48a6ef9..ffe47464f 100644
--- a/src/pages/nft/claim/index.vue
+++ b/src/pages/nft/claim/index.vue
@@ -85,14 +85,14 @@
                 'gap-[12px]',
               ]"
             >
-              <div v-if="iscnWorkAuthor" class="flex flex-col w-full">
+              <div v-if="iscnWorkAuthorName" class="flex flex-col w-full">
                 <Label
                   preset="h6"
                   :text="$t('nft_claim_NFT_author')"
                   class=" text-medium-gray font-[500]"
                 />
                 <p class="text-[16px] font-[500] w-full break-words">
-                  {{ iscnWorkAuthor }}
+                  {{ iscnWorkAuthorName }}
                 </p>
               </div>
               <div v-if="iscnWorkPublisher" class="flex flex-col w-full">
diff --git a/src/pages/nft/class/_classId/_nftId.vue b/src/pages/nft/class/_classId/_nftId.vue
index ac64c00f7..f8e1ada05 100644
--- a/src/pages/nft/class/_classId/_nftId.vue
+++ b/src/pages/nft/class/_classId/_nftId.vue
@@ -166,7 +166,7 @@
                 :avatar-size="40"
                 :is-avatar-outlined="isCreatorCivicLiker"
                 :iscn-owner="iscnOwner"
-                :iscn-work-author="iscnWorkAuthor"
+                :iscn-work-author-name="iscnWorkAuthorName"
                 :iscn-url="iscnURL"
                 :display-name="creatorDisplayNameFull"
                 :class-id="classId"
@@ -422,8 +422,8 @@ export default {
   head() {
     let title =
       this.nftName || this.NFTName || this.$t('nft_details_page_title');
-    if (this.iscnWorkAuthor) {
-      title += ` - ${this.iscnWorkAuthor}`;
+    if (this.iscnWorkAuthorName) {
+      title += ` - ${this.iscnWorkAuthorName}`;
     }
     if (this.nftIsNFTBook) {
       title += ` - ${this.$t('nft_details_page_title_book')}`;
diff --git a/src/pages/nft/class/_classId/index.vue b/src/pages/nft/class/_classId/index.vue
index 4787bfee0..5bf1cb2e5 100644
--- a/src/pages/nft/class/_classId/index.vue
+++ b/src/pages/nft/class/_classId/index.vue
@@ -266,7 +266,7 @@
                 :is-avatar-outlined="isCreatorCivicLiker"
                 :is-nft-book="nftIsNFTBook"
                 :iscn-owner="iscnOwner"
-                :iscn-work-author="iscnWorkAuthor"
+                :iscn-work-author-name="iscnWorkAuthorName"
                 :iscn-url="iscnURL"
                 :display-name="creatorDisplayNameFull"
                 :class-id="classId"
@@ -540,8 +540,8 @@ export default {
   },
   head() {
     let title = this.NFTName || this.$t('nft_details_page_title');
-    if (this.iscnWorkAuthor) {
-      title += ` - ${this.iscnWorkAuthor}`;
+    if (this.iscnWorkAuthorName) {
+      title += ` - ${this.iscnWorkAuthorName}`;
     }
     if (this.nftIsNFTBook) {
       title += ` - ${this.$t('nft_details_page_title_book')}`;
@@ -813,8 +813,8 @@ export default {
           let titleWithEdition =
             this.NFTName || this.$t('nft_details_page_title');
           titleWithEdition += ` - ${e.name}`;
-          if (this.iscnWorkAuthor) {
-            titleWithEdition += ` - ${this.iscnWorkAuthor}`;
+          if (this.iscnWorkAuthorName) {
+            titleWithEdition += ` - ${this.iscnWorkAuthorName}`;
           }
           titleWithEdition += ` - ${this.$t('nft_details_page_title_book')}`;
           meta.find(m => m.hid === 'og:title').content = titleWithEdition;
@@ -826,11 +826,11 @@ export default {
             content: this.iscnData?.contentMetadata?.isbn,
           });
         }
-        if (this.iscnWorkAuthor) {
+        if (this.iscnWorkAuthorName) {
           meta.push({
             hid: 'product:custom_label_1',
             property: 'product:custom_label_1',
-            content: this.iscnWorkAuthor,
+            content: this.iscnWorkAuthorName,
           });
         }
         if (this.iscnData?.contentMetadata?.inLanguage) {
diff --git a/src/pages/nft/gift/index.vue b/src/pages/nft/gift/index.vue
index f79363fb8..cd1dd5086 100644
--- a/src/pages/nft/gift/index.vue
+++ b/src/pages/nft/gift/index.vue
@@ -9,13 +9,13 @@
             <NFTBookCoverWithFrame :src="productImageUrl" />
             <Label class="text-[28px] font-600" :text="productTitle" />
             <div class="grid grid-cols-2">
-              <div v-if="iscnWorkAuthor" class="flex flex-col">
+              <div v-if="iscnWorkAuthorName" class="flex flex-col">
                 <Label
                   preset="h6"
                   :text="$t('nft_claim_NFT_author')"
                   class=" text-medium-gray"
                 />
-                <Label preset="h5" :text="iscnWorkAuthor" />
+                <Label preset="h5" :text="iscnWorkAuthorName" />
               </div>
               <div v-if="iscnWorkPublisher" class="flex flex-col w-full">
                 <Label