diff --git a/components/gallery/GalleryItem.vue b/components/gallery/GalleryItem.vue index b25b23b3ad..ac81e2fa7e 100644 --- a/components/gallery/GalleryItem.vue +++ b/components/gallery/GalleryItem.vue @@ -49,7 +49,7 @@ class="gallery-item-media relative" :src="getMediaSrc(image)" :animation-src="nftAnimation" - :mime-type="nftAnimationMimeType || nftMimeType" + :mime-type="(nftAnimation && nftAnimationMimeType) || nftMimeType" :title="nftMetadata?.name" :is-fullscreen="isFullscreen" is-detail diff --git a/components/gallery/GalleryItemToolBar.vue b/components/gallery/GalleryItemToolBar.vue index 2198ef3757..f3c6112cfe 100644 --- a/components/gallery/GalleryItemToolBar.vue +++ b/components/gallery/GalleryItemToolBar.vue @@ -18,9 +18,10 @@ - + + @@ -118,4 +119,12 @@ const handleNewTab = () => { window.open(nftAnimation.value || image.value, '_blank') } } + +const disableNewTab = computed(() => { + if (nftAnimation.value && nftAnimationMimeType.value) { + return true + } + + return nftImage.value && nftMimeType.value +}) diff --git a/components/gallery/useGalleryItem.ts b/components/gallery/useGalleryItem.ts index 20c2d939ef..68d2b8ea20 100644 --- a/components/gallery/useGalleryItem.ts +++ b/components/gallery/useGalleryItem.ts @@ -6,6 +6,7 @@ import { getCloudflareMp4 } from '@/services/imageWorker' import type { NFT } from '@/components/rmrk/service/scheme' import type { NFTWithMetadata } from '@/composables/useNft' import type { Ref } from 'vue' +import { getMimeType } from '@/utils/gallery/media' interface NFTData { nftEntity?: NFTWithMetadata @@ -99,11 +100,18 @@ export const useGalleryItem = (nftId?: string): GalleryItem => { nftMetadata.value = metadata nftResources.value = resources - nftImage.value = sanitizeIpfsUrl(metadata.image) || '' - nftMimeType.value = metadata.imageMimeType || metadata.type || '' nftAnimation.value = sanitizeIpfsUrl(metadata.animationUrl || metadata.animation_url) || '' - nftAnimationMimeType.value = metadata.animationUrlMimeType || '' + nftAnimationMimeType.value = + metadata.animationUrlMimeType || + (await getMimeType(nftAnimation.value)) || + '' + nftImage.value = sanitizeIpfsUrl(metadata.image) || '' + nftMimeType.value = + metadata.imageMimeType || + metadata.type || + (await getMimeType(nftImage.value)) || + '' // use cf-video & replace the video thumbnail if ( diff --git a/composables/useNft.ts b/composables/useNft.ts index e9aa336a45..a8df6fd400 100644 --- a/composables/useNft.ts +++ b/composables/useNft.ts @@ -6,6 +6,7 @@ import { getMimeType, isAudio as isAudioMimeType } from '@/utils/gallery/media' import unionBy from 'lodash/unionBy' import type { Ref } from 'vue' import { getMetadata } from '@/services/imageWorker' +import { DYNAMIC_METADATA } from '@/services/fxart' export type NftResources = { id: string @@ -197,7 +198,10 @@ export async function getNftMetadata( prefix: string, unify = false, ) { - if (unify) { + const checkMetadata = (nft.metadata || nft.meta?.id)?.includes( + DYNAMIC_METADATA, + ) + if (unify && !checkMetadata) { return await getMetadata(sanitizeIpfsUrl(nft.metadata || nft.meta.id)) }