fix: Move Download button

kodadot · Jan 21, 2025 · f2b09a5 · f2b09a5
1 parent e68e906
commit f2b09a5
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 56 deletions.
diff --git a/components/gallery/GalleryItemButton/GalleryItemButton.vue b/components/gallery/GalleryItemButton/GalleryItemButton.vue
@@ -6,9 +6,6 @@
 
     <GalleryItemMoreActionBtn
       :nft="nft"
-      :image-url="nftMetadata?.image"
-      :image-data="imageData"
-      :mime-type="nftMimeType"
       :abi="abi"
       data-testid="gallery-item-more-button"
     />
@@ -20,9 +17,8 @@ import GalleryItemMoreActionBtn from './GalleryItemMoreActionBtn.vue'
 import { extractTwitterIdFromDescription } from '@/utils/parse'
 
 const { $i18n } = useNuxtApp()
-const imageData = ref()
 
-const { getNft: nft, getNftMetadata: nftMetadata, getNftMimeType: nftMimeType, getAbi: abi } = storeToRefs(useNftStore())
+const { getNft: nft, getAbi: abi } = storeToRefs(useNftStore())
 
 const customSharingContent = computed(() => {
   const twitterId = nft.value?.meta?.description
@@ -31,8 +27,6 @@ const customSharingContent = computed(() => {
 
   return twitterId ? $i18n.t('sharing.nftWithArtist', [twitterId]) : ''
 })
-
-onKodahashRenderCompleted(({ payload }) => imageData.value = payload.image)
 </script>
 
 <style scoped lang="scss">

diff --git a/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue b/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue
@@ -68,15 +68,12 @@ import { NeoButton, NeoDropdown, NeoDropdownItem } from '@kodadot1/brick'
 import { Interaction } from '@kodadot1/minimark/v1'
 import { useQuery } from '@tanstack/vue-query'
 import GalleryItemEditNftButton from './GalleryItemEditNftButton.vue'
-import { downloadImage } from '@/utils/download'
-import { sanitizeIpfsUrl, toOriginalContentUrl } from '@/utils/ipfs'
-import { isMobileDevice } from '@/utils/extension'
 import { hasOperationsDisabled } from '@/utils/prefix'
 import { refreshOdaTokenMetadata } from '@/services/oda'
 import type { NFT } from '@/types'
 import type { Abi } from '@/composables/transaction/types'
 
-const { $i18n, $consola } = useNuxtApp()
+const { $i18n } = useNuxtApp()
 const { toast } = useToast()
 const { isCurrentAccount } = useAuth()
 const { transaction, isLoading, status } = useTransaction()
@@ -87,9 +84,6 @@ const route = useRoute()
 
 const props = defineProps<{
   nft?: NFT
-  mimeType?: string
-  imageUrl?: string
-  imageData?: string
   abi?: Abi | null
 }>()
 
@@ -122,47 +116,6 @@ const signingModalTitle = computed(() => {
   )
 })
 
-const isDownloadEnabled = computed(() => {
-  const mimeType = props.mimeType
-  return ((
-    (mimeType?.includes('image') || mimeType?.includes('text/html'))
-    && props.imageUrl) || props.imageData
-  )
-})
-
-const downloadMedia = async () => {
-  let imageUrl = sanitizeIpfsUrl(props.imageUrl)
-
-  if (!imageUrl) {
-    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.nft?.collection?.name}_${props.nft?.name}`)
-  }
-  catch (error) {
-    $consola.warn('[ERR] unable to fetch image')
-    toast($i18n.t('toast.downloadError'))
-  }
-}
-
 const burn = () => {
   openUserCartModal('burn')
 }

diff --git a/components/gallery/GalleryItemToolBar.vue b/components/gallery/GalleryItemToolBar.vue
@@ -53,6 +53,21 @@
         class="text-k-grey"
       />
     </NeoTooltip>
+    <NeoTooltip
+      v-if="isDownloadEnabled"
+      :label="$t('moreActions.download')"
+      position="top"
+    >
+      <a
+        no-shadow
+        @click="downloadMedia"
+      >
+        <NeoIcon
+          icon="arrow-down-to-line"
+          size="medium"
+        />
+      </a>
+    </NeoTooltip>
   </div>
 </template>
 
@@ -65,6 +80,9 @@ import {
   resolveMedia,
   MediaType,
 } from '@/utils/gallery/media'
+import { downloadImage } from '@/utils/download'
+import { sanitizeIpfsUrl, toOriginalContentUrl } from '@/utils/ipfs'
+import { isMobileDevice } from '@/utils/extension'
 
 type ReloadElement =
   | HTMLIFrameElement
@@ -78,9 +96,12 @@ const props = defineProps<{
   containerId: string
 }>()
 
-const { getNft: nft, getNftImage: nftImage, getNftMimeType: nftMimeType, getNftAnimation: nftAnimation, getNftAnimationMimeType: nftAnimationMimeType } = storeToRefs(useNftStore())
+const { getNft: nft, getNftImage: nftImage, getNftMetadata: nftMetadata, getNftMimeType: nftMimeType, getNftAnimation: nftAnimation, getNftAnimationMimeType: nftAnimationMimeType } = storeToRefs(useNftStore())
 
 const isLoading = ref(false)
+const { toast } = useToast()
+const { $i18n, $consola } = useNuxtApp()
+const imageData = ref()
 
 const image = computed(() => {
   if (!nftImage.value) {
@@ -90,6 +111,49 @@ const image = computed(() => {
   return nftImage.value
 })
 
+const nftImageUrl = computed(() => nftMetadata.value?.image)
+
+const isDownloadEnabled = computed(() => {
+  const mimeType = nftMimeType.value
+  return ((
+    (mimeType?.includes('image') || mimeType?.includes('text/html'))
+    && nftImageUrl.value) || imageData.value
+  )
+})
+
+const downloadMedia = async () => {
+  let imageUrl = sanitizeIpfsUrl(nftImageUrl.value)
+
+  if (!imageUrl) {
+    return
+  }
+
+  if (imageData.value) {
+    const blob = await $fetch<Blob>(imageData.value)
+    imageUrl = URL.createObjectURL(blob)
+  }
+  else if (nftMimeType.value?.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, `${nft.value?.collection?.name}_${nft.value?.name}`)
+  }
+  catch (error) {
+    $consola.warn('[ERR] unable to fetch image')
+    toast($i18n.t('toast.downloadError'))
+  }
+}
+
 const mediaAndImageType = computed(() => {
   const animationMediaType = resolveMedia(nftAnimationMimeType.value)
   const imageMediaType = resolveMedia(nftMimeType.value)
@@ -160,4 +224,6 @@ const disableNewTab = computed(() => {
 
   return nftImage.value && nftMimeType.value
 })
+
+onKodahashRenderCompleted(({ payload }) => imageData.value = payload.image)
 </script>