Merge pull request #6599 from kodadot/fix/invalid-mime-type

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-media-wrapper"
+ :src="imageSrc || ''"
+ :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/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">
@@ -134,6 +138,7 @@
 </template>
 
 <script setup lang="ts">
+import { obtainMimeType } from '@kodadot1/minipfs'
 import {
  MediaItem,
  NeoTabItem,
@@ -143,7 +148,7 @@ 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'
 
@@ -218,6 +223,7 @@ const propertiesTabDisabled = computed(() => {
 
 const metadataMimeType = ref('application/json')
 const metadataURL = ref('')
+const animationMediaMimeType = ref('')
 
 watchEffect(async () => {
  if (nft.value?.metadata) {
@@ -230,5 +236,13 @@ watchEffect(async () => {
  response.headers.get('content-type') || 'application/json'
  metadataURL.value = sanitizeMetadata
  }
+
+ if (nftAnimation.value) {
+ animationMediaMimeType.value = await obtainMimeType(nftAnimation.value)
+ }
 })
+
+const openLink = (link) => {
+ window.open(toCloudflareIpfsUrl(link), '_blank')
+}
 </script>

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 === 'ahk' || prefix === 'ahp') {
  return getProcessMetadata(nft)
  }
+
  if (nft.meta && nft.meta.image) {
  return getGeneralMetadata(nft)
  }

locales/en.json

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

package.json

@@ -68,6 +68,7 @@
  "@google/model-viewer": "^1.12.1",
  "@kodadot1/brick": "workspace:*",
  "@kodadot1/minimark": "^0.1.10",
+ "@kodadot1/minipfs": "0.4.0-rc.0",
  "@kodadot1/static": "workspace:*",
  "@kodadot1/sub-api": "^0.1.2",
  "@nuxtjs/apollo": "^4.0.1-rc.5",

styles/components/_carousel.scss

@@ -11,7 +11,8 @@
  &:hover {
  border-color: theme('border-color');
  .carousel-media {
- opacity: theme('card-hover-opacity');}
+ opacity: theme('card-hover-opacity');
+ }
  }
  }
  }
@@ -34,6 +35,11 @@
  display: block;
  }
  }
+
+ &-wrapper {
+ box-shadow: none !important;
+ border: none !important;
+ }
  }
 
  .carousel-info {

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}`
+}