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