fix: 3D NFT Thumbnail Preview

kodadot · Aug 25, 2023 · ee3f53c · ee3f53c
1 parent 9b85a3c
commit ee3f53c
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 60 deletions.
diff --git a/components/base/types.ts b/components/base/types.ts
@@ -41,3 +41,11 @@ export interface CarouselNFT extends ItemResources {
   collectionName?: string
   chain?: Prefix
 }
+
+export interface BaseNFTMeta {
+  id: string
+  image?: string
+  animationUrl?: string
+  name?: string
+  description?: string
+}
diff --git a/components/carousel/CarouselTypeRelated.vue b/components/carousel/CarouselTypeRelated.vue
@@ -1,9 +1,10 @@
 <template>
-  <CarouselIndex :title="`${$t('nft.related')}`" :nfts="nfts" />
+  <CarouselIndex :title="`${$t('nft.related')}`" :nfts="formatNFT(nfts)" />
 </template>
 
 <script lang="ts" setup>
 import { useCarouselRelated } from './utils/useCarousel'
+import { formatNFT } from '@/utils/carousel'
 
 const props = defineProps<{
   collectionId: string

diff --git a/components/shared/gallery/GalleryItemCardList.vue b/components/shared/gallery/GalleryItemCardList.vue
diff --git a/components/shared/gallery/NftCard.vue b/components/shared/gallery/NftCard.vue
diff --git a/composables/useNft.ts b/composables/useNft.ts
@@ -1,5 +1,6 @@
 import type { NFT, NFTMetadata } from '@/components/rmrk/service/scheme'
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
+import type { BaseNFTMeta } from '@/components/base/types'
 import { processSingleMetadata } from '@/utils/cachingStrategy'
 import { getMimeType } from '@/utils/gallery/media'
 import unionBy from 'lodash/unionBy'
@@ -22,15 +23,15 @@ export type ItemResources = {
 }
 
 export type NFTWithMetadata = NFT &
-  NFTMetadata & { meta: NFTMetadata } & ItemResources
+  NFTMetadata & { meta: BaseNFTMeta } & ItemResources
 
 function getGeneralMetadata(nft: NFTWithMetadata) {
   return {
     ...nft,
     name: nft.name || nft.meta.name || nft.id,
     description: nft.description || nft.meta.description || '',
     image: sanitizeIpfsUrl(nft.meta.image),
-    animation_url: sanitizeIpfsUrl(nft.meta.animation_url || ''),
+    animationUrl: sanitizeIpfsUrl(nft.meta.animation_url || ''),
     type: nft.meta.type || '',
   }
 }
@@ -53,7 +54,7 @@ async function getProcessMetadata(nft: NFTWithMetadata) {
     nft.metadata
   )) as NFTWithMetadata
   const image = sanitizeIpfsUrl(metadata.image || metadata.mediaUri || '')
-  const animation_url = sanitizeIpfsUrl(metadata.animation_url || '')
+  const animationUrl = sanitizeIpfsUrl(metadata.animation_url || '')
   const getAttributes = () => {
     const hasMetadataAttributes =
       metadata.attributes && metadata.attributes.length > 0
@@ -73,7 +74,7 @@ async function getProcessMetadata(nft: NFTWithMetadata) {
     name: nft.name || metadata.name || nft.id,
     description: nft.description || metadata.description || '',
     image,
-    animation_url,
+    animationUrl,
     type: metadata.type || '',
     attributes: getAttributes(),
   }