✨ Show access method & file format spec (#1721)

likecoin · Aug 15, 2024 · f9c0096 · f9c0096
1 parent 2b27d5e
commit f9c0096
Show file tree

Hide file tree

Showing 11 changed files with 156 additions and 61 deletions.
diff --git a/src/components/NFTBook/ItemCard.vue b/src/components/NFTBook/ItemCard.vue
@@ -134,22 +134,20 @@
           <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>
             </li>
             <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
@@ -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
@@ -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 → .../NFTBook/SpecTableItemAvailableFormat.vue b/src/components/NFTBook/TypeTags.vue → .../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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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",