Merge pull request #10907 from hassnian/main

fix: bad quality genart Image downloading & NFT with gif not animating

components/gallery/GalleryItemButton/GalleryItemButton.vue

@@ -5,7 +5,8 @@
     </div>
 
     <GalleryItemMoreActionBtn
-      :ipfs-image="nftMetadata?.image"
+      :image-url="nftMetadata?.image"
+      :image-data="imageData"
       :mime-type="nftMimeType"
       :name="nft?.name"
       :nft-sn="nft?.sn"
@@ -26,7 +27,9 @@ import { extractTwitterIdFromDescription } from '@/utils/parse'
 const props = defineProps<{
   galleryItem: GalleryItem
 }>()
+
 const { $i18n } = useNuxtApp()
+const imageData = ref()
 const nft = computed(() => props.galleryItem.nft.value)
 const nftMimeType = computed(() => props.galleryItem.nftMimeType.value)
 const nftMetadata = computed(() => props.galleryItem.nftMetadata.value)
@@ -38,6 +41,8 @@ const customSharingContent = computed(() => {
 
   return twitterId ? $i18n.t('sharing.nftWithArtist', [twitterId]) : ''
 })
+
+onKodahashRenderCompleted(({ payload }) => imageData.value = payload.image)
 </script>
 
 <style scoped lang="scss">

components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue

@@ -68,9 +68,10 @@ const props = defineProps<{
   nftSn?: string
   collectionId?: string
   collectionName?: string
-  ipfsImage?: string
+  imageUrl?: string
   currentOwner?: string
   price?: string
+  imageData?: string
 }>()
 
 const action = ref('')
@@ -85,34 +86,42 @@ const signingModalTitle = computed(() => {
 
 const isDownloadEnabled = computed(() => {
   const mimeType = props.mimeType
-  return (
+  return ((
     (mimeType?.includes('image') || mimeType?.includes('text/html'))
-    && props.ipfsImage
+    && props.imageUrl) || props.imageData
   )
 })
 
-const downloadMedia = () => {
-  const ipfsImage = props.ipfsImage
+const downloadMedia = async () => {
+  let imageUrl = sanitizeIpfsUrl(props.imageUrl)
+
+  if (!imageUrl) {
+    return
+  }
 
-  if (ipfsImage) {
-    const originalUrl = props.mimeType?.includes('image')
-      ? toOriginalContentUrl(ipfsImage)
-      : sanitizeIpfsUrl(ipfsImage)
-    if (isMobileDevice) {
-      toast($i18n.t('toast.downloadOnMobile'))
-      setTimeout(() => {
-        window.open(originalUrl, '_blank')
-      }, 2000)
-      return
-    }
-    try {
-      downloadImage(originalUrl, `${props.collectionName}_${props.name}`)
-    }
-    catch (error) {
-      $consola.warn('[ERR] unable to fetch image')
-      toast($i18n.t('toast.downloadError'))
-      return
-    }
+  if (props.imageData) {
+    const blob = await $fetch<Blob>(props.imageData)
+    imageUrl = URL.createObjectURL(blob)
+  }
+  else if (props.mimeType?.includes('image')) {
+    imageUrl = toOriginalContentUrl(imageUrl)
+  }
+
+  if (isMobileDevice) {
+    toast($i18n.t('toast.downloadOnMobile'))
+    setTimeout(() => {
+      window.open(imageUrl, '_blank')
+    }, 2000)
+    return
+  }
+
+  try {
+    toast($i18n.t('toast.downloadImage'))
+    downloadImage(imageUrl, `${props.collectionName}_${props.name}`)
+  }
+  catch (error) {
+    $consola.warn('[ERR] unable to fetch image')
+    toast($i18n.t('toast.downloadError'))
   }
 }
 

locales/en.json

@@ -1249,6 +1249,7 @@
   "toast": {
     "urlCopy": "URL copied to clipboard ✓",
     "paymentLinkCopy": "Payment link copied to clipboard",
+    "downloadImage": "Downloading image",
     "downloadError": "Unable to download image",
     "unsupportedOperation": "Unsupported action",
     "uploadFileSizeLimit": "The uploaded file exceeds the {0}MB size limit.",

utils/kodahash.ts

@@ -0,0 +1,22 @@
+import { useEventListener } from '@vueuse/core'
+
+type KodaHashEventType = 'kodahash/render/completed'
+
+type KodasHashEvent = {
+  type: KodaHashEventType
+  payload: {
+    hash: string
+    image: string
+    type: string
+    search: string
+    attributes: unknown[]
+  }
+}
+
+export const onKodahashRenderCompleted = (callback: (event: KodasHashEvent) => void) => {
+  useEventListener(window, 'message', (e: MessageEvent<KodasHashEvent>) => {
+    if (e.data?.type === 'kodahash/render/completed' && e.data.payload) {
+      callback(e.data)
+    }
+  })
+}