Merge pull request kodadot#10349 from kodadot/fix--ignore-metadata-en…

…dpoint-for-fxart fix: ignore metadata endpoint for fxart
hassnian · May 30, 2024 · d0396c9 · d0396c9
2 parents 8fb40f8 + 766180d
commit d0396c9
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 6 deletions.
diff --git 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
@@ -18,9 +18,10 @@
       </a>
     </NeoTooltip>
     <NeoTooltip :label="$t('newTab')" position="top">
-      <a no-shadow @click="handleNewTab">
+      <a v-if="disableNewTab" no-shadow @click="handleNewTab">
         <NeoIcon icon="arrow-up-right" size="medium" />
       </a>
+      <NeoIcon v-else icon="arrow-up-right" size="medium" class="text-k-grey" />
     </NeoTooltip>
   </div>
 </template>
@@ -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
+})
 </script>
diff --git 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
@@ -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<T extends NFTWithMetadata>(
   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))
   }