Skip to content

Commit

Permalink
✨ Show access method & file format spec (#1721)
Browse files Browse the repository at this point in the history
  • Loading branch information
nwingt authored Aug 15, 2024
1 parent 2b27d5e commit f9c0096
Show file tree
Hide file tree
Showing 11 changed files with 156 additions and 61 deletions.
39 changes: 19 additions & 20 deletions src/components/NFTBook/ItemCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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',
Expand All @@ -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>
Expand All @@ -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
Expand All @@ -231,6 +235,7 @@
</div>
</template>
<script>
import { getContentUrlType } from '~/util/misc';
import { ellipsis } from '~/util/ui';
import nftMixin from '~/mixins/nft';
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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);
},
Expand Down
16 changes: 16 additions & 0 deletions src/components/NFTBook/SpecTable.vue
Original file line number Diff line number Diff line change
@@ -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>
30 changes: 30 additions & 0 deletions src/components/NFTBook/SpecTableItemAccessMethod.vue
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down
21 changes: 21 additions & 0 deletions src/components/NFTBook/SpecTableLabel.vue
Original file line number Diff line number Diff line change
@@ -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>
10 changes: 3 additions & 7 deletions src/components/NFTClaim/OptionList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
<script>
import alertMixin from '~/mixins/alert';
import { getContentUrlType } from '~/util/misc';
import { parseNFTMetadataURL } from '~/util/nft';
import {
getFilenameFromURL,
Expand Down Expand Up @@ -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');
Expand All @@ -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)) {
Expand Down
45 changes: 35 additions & 10 deletions src/components/NFTCollection/ItemCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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',
Expand All @@ -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>
Expand All @@ -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
Expand All @@ -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';
Expand Down Expand Up @@ -213,6 +222,7 @@ export default {
},
},
computed: {
...mapGetters('getIsHideNFTBookDownload'),
creatorDisplayName() {
return (
this.getUserInfoByAddress(this.collectionOwner)?.displayName ||
Expand All @@ -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() {
Expand Down
10 changes: 3 additions & 7 deletions src/components/NFTViewOptionList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@
<script>
import alertMixin from '~/mixins/alert';
import { getContentUrlType } from '~/util/misc';
import { parseNFTMetadataURL } from '~/util/nft';
import {
getFilenameFromURL,
Expand Down Expand Up @@ -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');
Expand All @@ -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)) {
Expand Down
4 changes: 4 additions & 0 deletions src/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading

0 comments on commit f9c0096

Please sign in to comment.