Merge pull request #6956 from Jarsen136/issue-6953

kodadot · Aug 26, 2023 · 912c6c2 · 912c6c2
2 parents 4d9ae64 + 965f5e1
commit 912c6c2
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 15 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/module/CarouselMedia.vue b/components/carousel/module/CarouselMedia.vue
@@ -6,11 +6,10 @@
       :to="urlOf({ id: item.id, url, chain: item.chain })"
       :aria-label="`slide ${index + 1} of ${length}`"
       rel="nofollow">
-      <!-- :animation-src removed until this is fixed:
-      https://github.com/kodadot/nft-gallery/issues/6237 -->
       <MediaItem
         class="carousel-media-wrapper"
         :src="imageSrc || ''"
+        :animation-src="item.animationUrl || ''"
         :title="item.name" />
     </nuxt-link>
   </div>

diff --git a/components/gallery/useGalleryItem.ts b/components/gallery/useGalleryItem.ts
@@ -24,8 +24,8 @@ const whichMimeType = async (data) => {
   if (data?.type) {
     return data?.type
   }
-  if (data?.animation_url) {
-    return await getMimeType(sanitizeIpfsUrl(data.animation_url))
+  if (data?.animationUrl) {
+    return await getMimeType(sanitizeIpfsUrl(data.animationUrl))
   }
   if (data?.image || data?.mediaUri) {
     return await getMimeType(sanitizeIpfsUrl(data?.image || data?.mediaUri))
@@ -36,7 +36,7 @@ const whichMimeType = async (data) => {
 
 const whichAsset = (data) => {
   return {
-    animation_url: sanitizeIpfsUrl(data.animation_url || ''),
+    animation_url: sanitizeIpfsUrl(data.animationUrl || ''),
     image: sanitizeIpfsUrl(data.image || data.mediaUri || '', 'image'),
   }
 }

diff --git a/components/shared/gallery/GalleryItemCardList.vue b/components/shared/gallery/GalleryItemCardList.vue
@@ -11,17 +11,14 @@
 
 <script lang="ts" setup>
 import { RmrkType } from '@/components/rmrk/service/scheme'
-
 import {
   INFINITE_SCROLL_CONTAINER_ID,
   INFINITE_SCROLL_ITEM_CLASS_NAME,
 } from '@/utils/mixins/infiniteScrollMixin'
 import { formatNFT } from '@/utils/carousel'
 import NftCard from '@/components/shared/gallery/NftCard.vue'
 import { usePreferencesStore } from '@/stores/preferences'
-
 defineProps<{ items: RmrkType[] }>()
-
 const preferencesStore = usePreferencesStore()
 const classLayout = computed(() => preferencesStore.getLayoutClass)
 </script>
diff --git a/components/shared/gallery/NftCard.vue b/components/shared/gallery/NftCard.vue
@@ -13,15 +13,12 @@
 import { NeoNftCard, NftCardVariant } from '@kodadot1/brick'
 import type { NFT } from '@/components/rmrk/service/scheme'
 import type { CarouselNFT } from '@/components/base/types'
-
 const { urlPrefix } = usePrefix()
 const { placeholder } = useTheme()
-
 const props = defineProps<{
   nft: NFT | CarouselNFT
   variant?: NftCardVariant
 }>()
-
 const showPrice = computed((): boolean => {
   return Number(props.nft?.price) > 0
 })

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(),
   }