fix: adjust imageSrc on carousel component

components/carousel/module/CarouselMedia.vue

@@ -5,23 +5,17 @@
     <nuxt-link
       :to="urlOf({ id: item.id, url, chain: item.chain })"
       rel="nofollow">
-      <PreviewMediaResolver
-        v-if="item.animationUrl"
-        :src="item.animationUrl"
-        :poster="imageSrc || ''"
-        :metadata="item.metadata" />
-      <BasicImage
-        v-else
-        :src="imageSrc"
-        :alt="item.name"
-        custom-class="carousel__image-wrapper" />
+      <MediaItem
+        class="carousel__image-wrapper"
+        :src="item.image || ''"
+        :animation-src="item.animationUrl || ''"
+        :title="item.name" />
     </nuxt-link>
   </div>
 </template>
 
 <script lang="ts" setup>
-import PreviewMediaResolver from '@/components/media/PreviewMediaResolver.vue'
-import BasicImage from '@/components/shared/view/BasicImage.vue'
+import { MediaItem } from '@kodadot1/brick'
 
 import type { CarouselNFT } from '@/components/base/types'
 import type { NFTWithMetadata } from '@/composables/useNft'

components/common/ConnectWallet/WalletAssetNfts.vue

@@ -7,9 +7,7 @@
         v-for="nft in nfts.slice(0, 3)"
         :key="nft.id"
         :href="`/${urlPrefix}/gallery/${nft.id}`">
-        <MediaItem
-          :src="sanitizeIpfsUrl(nft.meta.image)"
-          :mime-type="nft.type" />
+        <MediaItem :src="sanitizeIpfsUrl(nft.meta.image)" />
       </a>
     </div>
   </div>

components/gallery/GalleryItem.vue

@@ -35,7 +35,6 @@
                 <MediaItem
                   :key="resource.src"
                   :src="resource.src"
-                  :mime-type="resource.mimeType"
                   :animation-src="resource.animation"
                   is-detail />
               </NeoCarouselItem>
@@ -52,7 +51,6 @@
             class="gallery-item-media"
             :src="nftImage"
             :animation-src="nftAnimation"
-            :mime-type="nftMimeType"
             :title="nftMetadata?.name"
             is-detail
             :is-lewd="galleryDescriptionRef?.isLewd"

components/gallery/GalleryItemDescription.vue

@@ -84,16 +84,21 @@
         <p>{{ nft?.royalty }}%</p>
       </div>
       <hr class="my-2" />
-      <div class="is-flex is-justify-content-space-between">
+      <div v-if="nftImage" class="is-flex is-justify-content-space-between">
         <p>{{ $t('tabs.tabDetails.media') }}</p>
-        <a
-          :href="nftAnimation || nftImage"
-          target="_blank"
-          rel="nofollow noopener noreferrer"
-          class="has-text-link"
-          data-cy="media-link"
-          >{{ nftMimeType }}</a
-        >
+        <div @click="openLink(nftImage)">
+          <a class="has-text-link" data-cy="media-link">
+            {{ nftMimeType }}
+          </a>
+        </div>
+      </div>
+      <div v-if="nftAnimation" class="is-flex is-justify-content-space-between">
+        <p>{{ $t('tabs.tabDetails.animatedMedia') }}</p>
+        <div @click="openLink(nftAnimation)">
+          <a class="has-text-link">
+            {{ animationMediaMimeType }}
+          </a>
+        </div>
       </div>
       <div class="is-flex is-justify-content-space-between">
         <p>{{ $t('tabs.tabDetails.metadata') }}</p>
@@ -121,7 +126,6 @@
             class="gallery-parent-item"
             :src="parent?.nftImage.value"
             :animation-src="parent?.nftAnimation.value"
-            :mime-type="parent?.nftMimeType.value"
             :title="parent?.nftMetadata?.value?.name"
             is-detail />
           <p class="gallery-parent-item__name">
@@ -143,12 +147,12 @@ import {
   NeoTooltip,
 } from '@kodadot1/brick'
 import Identity from '@/components/identity/IdentityIndex.vue'
-import { sanitizeIpfsUrl } from '@/utils/ipfs'
+import { sanitizeIpfsUrl, toCloudflareIpfsUrl } from '@/utils/ipfs'
 
 import { GalleryItem, useGalleryItem } from './useGalleryItem'
 
 import { MediaType } from '@/components/rmrk/types'
-import { resolveMedia } from '@/utils/gallery/media'
+import { getMimeType, resolveMedia } from '@/utils/gallery/media'
 
 import { replaceSingularCollectionUrlByText } from '@/utils/url'
 
@@ -218,10 +222,11 @@ const propertiesTabDisabled = computed(() => {
 
 const metadataMimeType = ref('application/json')
 const metadataURL = ref('')
+const animationMediaMimeType = ref('')
 
 watchEffect(async () => {
   if (nft.value?.metadata) {
-    const sanitizeMetadata = sanitizeIpfsUrl(nft.value?.metadata)
+    const sanitizeMetadata = sanitizeIpfsUrl(nft.value?.metadata, 'cloudflare')
     const response = await fetch(sanitizeMetadata, {
       method: 'HEAD',
     })
@@ -230,5 +235,13 @@ watchEffect(async () => {
       response.headers.get('content-type') || 'application/json'
     metadataURL.value = sanitizeMetadata
   }
+
+  if (nftAnimation.value) {
+    animationMediaMimeType.value = await getMimeType(nftAnimation.value)
+  }
 })
+
+const openLink = (link) => {
+  window.open(toCloudflareIpfsUrl(link), '_blank')
+}
 </script>

components/gallery/GalleryItemPreviewer.vue

@@ -18,7 +18,6 @@
         :src="itemSrc"
         :placeholder="placeholder"
         :animation-src="nftAnimation"
-        :mime-type="nftMimeType"
         :title="nft?.name || nft?.id"
         original />
     </div>
@@ -38,7 +37,6 @@ const props = defineProps<{
 }>()
 
 const nft = computed(() => props.galleryItem.nft.value)
-const nftMimeType = computed(() => props.galleryItem.nftMimeType.value)
 const nftAnimation = computed(() => props.galleryItem.nftAnimation.value)
 
 const emit = defineEmits(['input'])

composables/useNft.ts

@@ -47,7 +47,7 @@ async function getProcessMetadata(nft: NFTWithMetadata) {
   const metadata = (await processSingleMetadata(
     nft.metadata
   )) as NFTWithMetadata
-  const image = sanitizeIpfsUrl(metadata.image || '')
+  const image = sanitizeIpfsUrl(metadata.image || metadata.mediaUri || '')
   const animation_url = sanitizeIpfsUrl(metadata.animation_url || '')
   const getAttributes = () => {
     const hasMetadataAttributes =
@@ -79,6 +79,7 @@ export function getNftMetadata(nft: NFTWithMetadata, prefix: string) {
   if (prefix === 'stmn') {
     return getProcessMetadata(nft)
   }
+
   if (nft.meta && nft.meta.image) {
     return getGeneralMetadata(nft)
   }

libs/ui/src/components/MediaItem/MediaItem.vue

@@ -45,10 +45,6 @@ export default {
       type: String,
       default: '',
     },
-    mimeType: {
-      type: String,
-      default: '',
-    },
     title: {
       type: String,
       default: 'KodaDot NFT',
@@ -93,7 +89,7 @@ export default {
   },
   computed: {
     resolveComponent() {
-      const type = this.mimeType || this.defaultMimeType
+      const type = this.defaultMimeType
       return this.components[resolveMedia(type) + SUFFIX]
     },
     properSrc() {
@@ -110,7 +106,7 @@ export default {
   },
   methods: {
     async updateComponent() {
-      if (this.animationSrc && !this.mimeType) {
+      if (this.animationSrc) {
         this.defaultMimeType = await getMimeType(this.animationSrc)
       }
     },

libs/ui/src/components/NeoNftCard/NeoNftCard.vue

@@ -15,7 +15,6 @@
           class="nft-media"
           :src="nft.image"
           :animation-src="nft.animationUrl"
-          :mime-type="nft.mimeType"
           :placeholder="placeholder"
           :title="nft?.name" />
         <div

locales/en.json

@@ -1049,6 +1049,7 @@
       "tokenStandard": "Token Standard",
       "royalties": "Royalties",
       "media": "Media",
+      "animatedMedia": "Animated Media",
       "metadata": "Metadata"
     },
     "tabActivity": {

utils/ipfs.ts

@@ -178,3 +178,8 @@ export type EntityWithMeta = {
   metadata: string
   meta?: NFTMetadata
 }
+
+export function toCloudflareIpfsUrl(baseurl) {
+  const url = new URL(baseurl)
+  return `https://cloudflare-ipfs.com/${url.pathname}`
+}