From f9c0096db129e3accc1104c86f8fa95fbe91c328 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Thu, 15 Aug 2024 11:09:02 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Show=20access=20method=20&=20file?=
 =?UTF-8?q?=20format=20spec=20(#1721)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NFTBook/ItemCard.vue           | 39 ++++++++--------
 src/components/NFTBook/SpecTable.vue          | 16 +++++++
 .../NFTBook/SpecTableItemAccessMethod.vue     | 30 +++++++++++++
 ...s.vue => SpecTableItemAvailableFormat.vue} | 32 +++++++------
 src/components/NFTBook/SpecTableLabel.vue     | 21 +++++++++
 src/components/NFTClaim/OptionList.vue        | 10 ++---
 src/components/NFTCollection/ItemCard.vue     | 45 ++++++++++++++-----
 src/components/NFTViewOptionList.vue          | 10 ++---
 src/locales/en.json                           |  4 ++
 src/locales/zh-Hant.json                      |  4 ++
 src/util/misc.js                              |  6 +++
 11 files changed, 156 insertions(+), 61 deletions(-)
 create mode 100644 src/components/NFTBook/SpecTable.vue
 create mode 100644 src/components/NFTBook/SpecTableItemAccessMethod.vue
 rename src/components/NFTBook/{TypeTags.vue => SpecTableItemAvailableFormat.vue} (59%)
 create mode 100644 src/components/NFTBook/SpecTableLabel.vue

diff --git a/src/components/NFTBook/ItemCard.vue b/src/components/NFTBook/ItemCard.vue
index 8dc2910c6..59fb9783d 100644
--- a/src/components/NFTBook/ItemCard.vue
+++ b/src/components/NFTBook/ItemCard.vue
@@ -134,14 +134,12 @@
           <p :class="['text-14', 'whitespace-pre-line', descriptionStyle]">
             {{ bookDescriptionTrimmed }}
           </p>
-          <ul class="flex flex-wrap mt-[12px] gap-[1.5rem] w-full">
+          <NFTBookSpecTable class="mt-[12px]">
             <li
               v-if="iscnWorkAuthor"
-              class="flex flex-col justify-center min-w-0 ml-[8px]"
+              class="flex flex-col justify-center min-w-0"
             >
-              <span class="text-like-cyan-gray text-10">{{
-                $t('identity_type_author')
-              }}</span>
+              <NFTBookSpecTableLabel :text="$t('identity_type_author')" />
               <span :class="['font-[600]', displayNameStyle]">{{
                 iscnWorkAuthor
               }}</span>
@@ -149,7 +147,7 @@
             <client-only>
               <li>
                 <NuxtLink
-                  class="flex items-center text-like-green group my-[8px]"
+                  class="flex items-center text-like-green group"
                   :to="
                     iscnOwner
                       ? localeLocation({
@@ -169,16 +167,15 @@
                     :is-lazy-loaded="true"
                   />
                   <div class="flex flex-col justify-start ml-[8px] min-w-0">
-                    <span
-                      class="text-like-cyan-gray text-10 group-hover:underline"
-                      >{{
+                    <NFTBookSpecTableLabel
+                      :text="
                         $t(
                           iscnWorkAuthor
                             ? 'identity_type_publisher'
                             : 'identity_type_creator'
                         )
-                      }}</span
-                    >
+                      "
+                    />
                     <span
                       :class="[
                         'group-hover:underline',
@@ -192,7 +189,15 @@
                 </NuxtLink>
               </li>
             </client-only>
-          </ul>
+          </NFTBookSpecTable>
+          <NFTBookSpecTable class="mt-[12px]">
+            <NFTBookSpecTableItemAvailableFormat
+              :content-types="contentTypes"
+            />
+            <NFTBookSpecTableItemAccessMethod
+              :is-downloadable="!nftIsDownloadHidden"
+            />
+          </NFTBookSpecTable>
           <div class="flex flex-col items-center w-full laptop:hidden">
             <slot name="column-edition-select" />
           </div>
@@ -211,7 +216,6 @@
       v-if="!isCompactPreset"
       class="flex justify-between px-[8px] sm:px-[24px] mt-[20px]"
     >
-      <NFTBookTypeTags :content-types="contentTypes" />
       <template v-if="!isDetailsPreset">
         <div v-if="nftBookAvailablePriceLabel">
           <Label
@@ -231,6 +235,7 @@
   </div>
 </template>
 <script>
+import { getContentUrlType } from '~/util/misc';
 import { ellipsis } from '~/util/ui';
 
 import nftMixin from '~/mixins/nft';
@@ -329,9 +334,8 @@ export default {
     contentTypes() {
       const types = [];
       this.iscnContentUrls.forEach(url => {
-        types.push(this.getContentUrlType(url));
+        types.push(getContentUrlType(url));
       });
-      types.push('nft');
       return [...new Set(types.filter(type => type !== 'unknown'))];
     },
     isLinkComponent() {
@@ -422,11 +426,6 @@ export default {
     async fetchInfo() {
       await this.lazyFetchNFTClassAggregatedData();
     },
-    getContentUrlType(url) {
-      if (url.includes('epub')) return 'epub';
-      if (url.includes('pdf')) return 'pdf';
-      return 'unknown';
-    },
     onClickAvatar() {
       this.$emit('click-avatar', this.iscnOwner);
     },
diff --git a/src/components/NFTBook/SpecTable.vue b/src/components/NFTBook/SpecTable.vue
new file mode 100644
index 000000000..448e96e4b
--- /dev/null
+++ b/src/components/NFTBook/SpecTable.vue
@@ -0,0 +1,16 @@
+<template>
+  <component :is="tag" class="flex flex-wrap gap-[1.5rem] w-full">
+    <slot />
+  </component>
+</template>
+
+<script>
+export default {
+  props: {
+    tag: {
+      type: String,
+      default: 'ul',
+    },
+  },
+};
+</script>
diff --git a/src/components/NFTBook/SpecTableItemAccessMethod.vue b/src/components/NFTBook/SpecTableItemAccessMethod.vue
new file mode 100644
index 000000000..1792bfeb8
--- /dev/null
+++ b/src/components/NFTBook/SpecTableItemAccessMethod.vue
@@ -0,0 +1,30 @@
+<template>
+  <component :is="tag">
+    <NFTBookSpecTableLabel
+      :text="$t('nft_details_page_label_access_methods')"
+    />
+    <div class="font-[600]">{{ label }}</div>
+  </component>
+</template>
+
+<script>
+export default {
+  props: {
+    tag: {
+      type: String,
+      default: 'li',
+    },
+    isDownloadable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    label() {
+      return this.isDownloadable
+        ? this.$t('nft_details_page_label_access_methods_downloadable')
+        : this.$t('nft_details_page_label_access_methods_web_only');
+    },
+  },
+};
+</script>
diff --git a/src/components/NFTBook/TypeTags.vue b/src/components/NFTBook/SpecTableItemAvailableFormat.vue
similarity index 59%
rename from src/components/NFTBook/TypeTags.vue
rename to src/components/NFTBook/SpecTableItemAvailableFormat.vue
index d090c65ed..a2115b1d8 100644
--- a/src/components/NFTBook/TypeTags.vue
+++ b/src/components/NFTBook/SpecTableItemAvailableFormat.vue
@@ -1,30 +1,28 @@
 <template>
-  <ul class="flex gap-[4px] sm:gap-[8px]">
-    <li
-      v-for="(type, index) in contentTypes"
-      :key="type"
-      class="flex gap-[4px] sm:gap-[8px] items-center"
-    >
-      <div
-        class="py-[6px] px-[12px] sm:px-[24px] bg-shade-gray rounded-[16px] text-10"
-      >
-        {{ getContentType(type) }}
-      </div>
-      <IconAdd
-        v-if="index !== contentTypes.length - 1"
-        class="text-medium-gray"
-      />
-    </li>
-  </ul>
+  <component :is="tag">
+    <NFTBookSpecTableLabel :text="$t('nft_details_page_label_content_types')" />
+    <div class="font-[600]">{{ label }}</div>
+  </component>
 </template>
 <script>
 export default {
   props: {
+    tag: {
+      type: String,
+      default: 'li',
+    },
     contentTypes: {
       type: Array,
       default: () => [],
     },
   },
+  computed: {
+    label() {
+      return this.contentTypes
+        .map(type => this.getContentType(type))
+        .join(' + ');
+    },
+  },
   methods: {
     getContentType(type) {
       switch (type) {
diff --git a/src/components/NFTBook/SpecTableLabel.vue b/src/components/NFTBook/SpecTableLabel.vue
new file mode 100644
index 000000000..810b69db8
--- /dev/null
+++ b/src/components/NFTBook/SpecTableLabel.vue
@@ -0,0 +1,21 @@
+<template>
+  <component :is="tag" class="text-like-cyan-gray text-10">
+    <template v-if="text">{{ text }}</template
+    ><slot v-else />
+  </component>
+</template>
+
+<script>
+export default {
+  props: {
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    text: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
diff --git a/src/components/NFTClaim/OptionList.vue b/src/components/NFTClaim/OptionList.vue
index ce5da9961..542711336 100644
--- a/src/components/NFTClaim/OptionList.vue
+++ b/src/components/NFTClaim/OptionList.vue
@@ -47,6 +47,7 @@
 <script>
 import alertMixin from '~/mixins/alert';
 
+import { getContentUrlType } from '~/util/misc';
 import { parseNFTMetadataURL } from '~/util/nft';
 import {
   getFilenameFromURL,
@@ -100,13 +101,8 @@ export default {
   },
   methods: {
     parseNFTMetadataURL,
-    getContentUrlType(url) {
-      if (url?.includes('epub')) return 'epub';
-      if (url?.includes('pdf')) return 'pdf';
-      return 'unknown';
-    },
     getContentUrlButtonText(url) {
-      const type = this.getContentUrlType(url);
+      const type = getContentUrlType(url);
       switch (type) {
         case 'epub':
           return this.$t('nft_details_page_button_view_epub');
@@ -119,7 +115,7 @@ export default {
     getFilenameFromURL,
     getDownloadFilenameFromURL,
     handleClickViewContentURL(e, contentUrl, index) {
-      const type = this.getContentUrlType(contentUrl);
+      const type = getContentUrlType(contentUrl);
       const url = parseNFTMetadataURL(contentUrl);
       this.$emit('view-content-url', e, url, type);
       if (['pdf', 'epub'].includes(type)) {
diff --git a/src/components/NFTCollection/ItemCard.vue b/src/components/NFTCollection/ItemCard.vue
index bfca84be4..9f515f14d 100644
--- a/src/components/NFTCollection/ItemCard.vue
+++ b/src/components/NFTCollection/ItemCard.vue
@@ -81,11 +81,11 @@
           />
           <Label preset="h4" :class="titleStyle" :text="collectionName" />
           <Markdown :md-string="collectionDescription" />
-          <ul class="flex flex-wrap mt-[12px] gap-[1.5rem] w-full">
+          <NFTBookSpecTable class="mt-[12px]">
             <client-only>
               <li>
                 <NuxtLink
-                  class="flex items-center text-like-green group my-[8px]"
+                  class="flex items-center text-like-green group"
                   :to="
                     collectionOwner
                       ? localeLocation({
@@ -105,10 +105,9 @@
                     :is-lazy-loaded="true"
                   />
                   <div class="flex flex-col justify-start ml-[8px] min-w-0">
-                    <span
-                      class="text-like-cyan-gray text-10 group-hover:underline"
-                      >{{ $t('identity_type_distributor') }}</span
-                    >
+                    <NFTBookSpecTableLabel
+                      :text="$t('identity_type_distributor')"
+                    />
                     <span
                       :class="[
                         'group-hover:underline',
@@ -122,7 +121,15 @@
                 </NuxtLink>
               </li>
             </client-only>
-          </ul>
+          </NFTBookSpecTable>
+          <NFTBookSpecTable class="mt-[12px]">
+            <NFTBookSpecTableItemAvailableFormat
+              :content-types="contentTypes"
+            />
+            <NFTBookSpecTableItemAccessMethod
+              :is-downloadable="isDownloadable"
+            />
+          </NFTBookSpecTable>
           <div class="flex flex-col items-center w-full laptop:hidden">
             <slot name="column-edition-select" />
           </div>
@@ -141,7 +148,6 @@
       v-if="!isCompactPreset"
       class="flex justify-between px-[8px] sm:px-[24px] mt-[20px]"
     >
-      <NFTBookTypeTags :content-types="contentTypes" />
       <template v-if="!isDetailsPreset">
         <div v-if="collectionAvailablePriceLabel">
           <Label
@@ -161,6 +167,9 @@
   </div>
 </template>
 <script>
+import { mapGetters } from 'vuex';
+
+import { getContentUrlType } from '~/util/misc';
 import { ellipsis } from '~/util/ui';
 
 import collectionMixin from '~/mixins/nft-collection';
@@ -213,6 +222,7 @@ export default {
     },
   },
   computed: {
+    ...mapGetters('getIsHideNFTBookDownload'),
     creatorDisplayName() {
       return (
         this.getUserInfoByAddress(this.collectionOwner)?.displayName ||
@@ -235,10 +245,25 @@ export default {
         1000 * 60 * 60 * 24 * 30
       );
     },
+    isDownloadable() {
+      return this.classIds.every(
+        classId => !this.getIsHideNFTBookDownload(classId)
+      );
+    },
     contentTypes() {
+      const contentURLs = this.classIds
+        .map(classId => {
+          const { parent } = this.getNFTClassMetadataById(classId) || {};
+          const iscnId = parent?.iscnIdPrefix || parent?.iscn_id_prefix;
+          const data = this.getISCNMetadataById(iscnId);
+          if (!data || data instanceof Promise) return undefined;
+          return data.contentMetadata?.sameAs || [];
+        })
+        .flat();
       const types = [];
-      types.push('nft');
-      types.push('collection');
+      contentURLs.forEach(url => {
+        types.push(getContentUrlType(url));
+      });
       return [...new Set(types.filter(type => type !== 'unknown'))];
     },
     isLinkComponent() {
diff --git a/src/components/NFTViewOptionList.vue b/src/components/NFTViewOptionList.vue
index 5ec20afa8..cea515888 100644
--- a/src/components/NFTViewOptionList.vue
+++ b/src/components/NFTViewOptionList.vue
@@ -79,6 +79,7 @@
 <script>
 import alertMixin from '~/mixins/alert';
 
+import { getContentUrlType } from '~/util/misc';
 import { parseNFTMetadataURL } from '~/util/nft';
 import {
   getFilenameFromURL,
@@ -137,13 +138,8 @@ export default {
   },
   methods: {
     parseNFTMetadataURL,
-    getContentUrlType(url) {
-      if (url?.includes('epub')) return 'epub';
-      if (url?.includes('pdf')) return 'pdf';
-      return undefined;
-    },
     getContentUrlButtonText(url) {
-      const type = this.getContentUrlType(url);
+      const type = getContentUrlType(url);
       switch (type) {
         case 'epub':
           return this.$t('nft_details_page_button_view_epub');
@@ -159,7 +155,7 @@ export default {
       this.$emit('view-content');
     },
     handleClickViewContentURL(e, contentUrl, index) {
-      const type = this.getContentUrlType(contentUrl);
+      const type = getContentUrlType(contentUrl);
       const url = parseNFTMetadataURL(contentUrl);
       this.$emit('view-content-url', e, url, type);
       if (['pdf', 'epub'].includes(type)) {
diff --git a/src/locales/en.json b/src/locales/en.json
index b894a61df..064a9d9d5 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -643,8 +643,12 @@
   "nft_details_page_errormessage_memo_limit": "Message must be within 256 characters",
   "nft_details_page_errormessage_transfer_invalid": "You have entered an invalid wallet address. Please try again.",
   "nft_details_page_errormessage_transfer_self": "You cannot send Writing NFT to yourself.",
+  "nft_details_page_label_access_methods": "Access Method",
+  "nft_details_page_label_access_methods_downloadable": "Read online / Download",
+  "nft_details_page_label_access_methods_web_only": "Read Online",
   "nft_details_page_label_ar_view_in_mobile": "Experience your NFT live",
   "nft_details_page_label_class_page": "View all events from this content",
+  "nft_details_page_label_content_types": "FIle Types",
   "nft_details_page_label_loading": "Loading",
   "nft_details_page_label_memo": "Enter transfer message",
   "nft_details_page_label_nft_id": "NFT ID",
diff --git a/src/locales/zh-Hant.json b/src/locales/zh-Hant.json
index bdc973401..a03899ef2 100644
--- a/src/locales/zh-Hant.json
+++ b/src/locales/zh-Hant.json
@@ -643,8 +643,12 @@
   "nft_details_page_errormessage_memo_limit": "字數超過 256 位元。",
   "nft_details_page_errormessage_transfer_invalid": "你輸入了錯誤的錢包地址，請重試。",
   "nft_details_page_errormessage_transfer_self": "不能發送給自己",
+  "nft_details_page_label_access_methods": "閱讀方式",
+  "nft_details_page_label_access_methods_downloadable": "站內閱讀 / 檔案下載",
+  "nft_details_page_label_access_methods_web_only": "站內閱讀",
   "nft_details_page_label_ar_view_in_mobile": "將你的 NFT 帶到現實",
   "nft_details_page_label_class_page": "檢視此系列的其他事件",
+  "nft_details_page_label_content_types": "檔案類型",
   "nft_details_page_label_loading": "進行中，請稍候⋯⋯",
   "nft_details_page_label_memo": "附加留言",
   "nft_details_page_label_nft_id": "NFT ID",
diff --git a/src/util/misc.js b/src/util/misc.js
index c3532211f..a2b989c49 100644
--- a/src/util/misc.js
+++ b/src/util/misc.js
@@ -63,4 +63,10 @@ export function escapeHtml(text = '') {
     .replace(/"/g, '&quot;');
 }
 
+export function getContentUrlType(url) {
+  if (url?.includes('epub')) return 'epub';
+  if (url?.includes('pdf')) return 'pdf';
+  return undefined;
+}
+
 export default sleep;