fix: adjust imageSrc on carousel component

[preschian]

Thank you for your contribution to the KodaDot - One Stop Shop for Polkadot NFTs.

👇 __ Let's make a quick check before the contribution.

PR Type

• Bugfix
• Feature
• Refactoring

Needs QA check

• @kodadot/qa-guild please review

Context

• Closes Unknown media on landing  #5498
• Closes VIdeo doesn't work on Statemine #6597

Did your issue had any of the "$" label on it?

• My DOT address: Payout

Screenshot 📸

1. fetch the original mime type in the carousel component

2. add mediaUri to fetch metadata

3. add "Animated Media" to the item description section and link to the public gateway to see original content

[kodabot]

SUCCESS @preschian PR for issue #5498 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime!

[kodabot]

SUCCESS @preschian PR for issue #6597 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime!

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	3437765
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/64d4928ba692b60008ed74f3
😎 Deploy Preview	https://deploy-preview-6599--koda-canary.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[reviewpad]

AI-Generated Summary: This pull request introduces a series of changes across several components as well as libraries in the project. The changes can be summarised as:

• [PATCH 1/3] The 'mime-type' element was removed from several components, such as CarouselMedia.vue, WalletAssetNfts.vue, GalleryItem.vue, GalleryItemDescription.vue, GalleryItemPreviewer.vue, MediaItem.vue, and NeoNftCard.vue. Several components were replaced with the MediaItem component from the project's library.
• [PATCH 2/3] makes an amendment to the 'getProcessMetadata' function in the 'useNft.ts' file. It changes the 'image' variable to use both 'metadata.image' or 'metadata.mediaUri'.
• [PATCH 3/3] introduces the new animated media feature, it also adds the use of the Cloudflare IPFS gateway for the application. This patch updates the GalleryItemDescription component, adds new translations, and adds a function 'toCloudflareIpfsUrl' to the 'ipfs.ts' utility function. It also handles fetching and setting the mime type for animation media.

In summary, these changes focus on the removal of 'mime-type' props from components, adding new features related to media and the use of the Cloudflare IPFS gateway.

[vikiival]

Hope this would work

[yangwao]

pay 50 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $50 @ 5.05 USD/DOT ~ 9.901 $DOT
🧗 1xjvRADwdJcnmUCLWerEHR4iGCT5EBTm4D4fzLLg4LcAC9p
🔗 0x25dc29064185aeb416a4d824e5161039f489cd182228ca184161166dbb1b8480

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues

[prury]

so many questions:
so, the animation is still not going to be played, correct? we will just show the static image of the animation like we were doing before
shouldn't the Invarch access pass also have the animated media in the details?
why we treat a PNG as animated media?

apart from my questions, both the graffiti kid and the invarch access pass are showing properly on the explorer, although i could not reproduce yangwao problem with the evrloot nfts (nft name: Old rope).

[preschian]

so many questions:
so, the animation is still not going to be played, correct? we will just show the static image of the animation like we were doing before
shouldn't the Invarch access pass also have the animated media in the details?
why we treat a PNG as animated media?

yes, this is for explanation #6638

[prury]

so many questions:
so, the animation is still not going to be played, correct? we will just show the static image of the animation like we were doing before
shouldn't the Invarch access pass also have the animated media in the details?
why we treat a PNG as animated media?

yes, this is for explanation #6638

wonderful, ty @preschian

can you check? https://deploy-preview-6599--koda-canary.netlify.app/ksm/gallery/15635794-54bbd380dc3baaa27b-EVRLOOT-ADVANCED_FISHINGROD-2

[preschian]

can you check? deploy-preview-6599--koda-canary.netlify.app/ksm/gallery/15635794-54bbd380dc3baaa27b-EVRLOOT-ADVANCED_FISHINGROD-2

oohh I will check

I though that one is related to #5530 and #6051

[codeclimate]

Code Climate has analyzed commit 3437765 and detected 0 issues on this pull request.

View more on Code Climate.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[preschian]

can you check? deploy-preview-6599--koda-canary.netlify.app/ksm/gallery/15635794-54bbd380dc3baaa27b-EVRLOOT-ADVANCED_FISHINGROD-2

I can only fix the "More from this collection" section

for this specific nft seems like from the indexer side. on rmrk2 at least need some resources. this nft meta.image and resources was empty

[prury]

can you check? deploy-preview-6599--koda-canary.netlify.app/ksm/gallery/15635794-54bbd380dc3baaa27b-EVRLOOT-ADVANCED_FISHINGROD-2

I can only fix the "More from this collection" section

for this specific nft seems like from the indexer side. on rmrk2 at least need some resources. this nft meta.image and resources was empty

its a rabbit hole! well, thanks for going trough this journey @preschian