fix: Sometimes Audio resources are shown as images

[hassnian]

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

Context

use nft resource's animation url if animation url is not present for the first resource

test : https://deploy-preview-7517--nuxt-kodadot.netlify.app/ksm/gallery/14968743-3629a3ff458d113e25-MUSIC-MOOD-00000068

• Closes Sometimes Audio resources are shown as images  #7499

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

• Fill up your DOT address: Payout

Community participation

• Are you at KodaDot Discord?

Screenshot 📸

• My fix has changed something on UI;

Copilot Summary

🤖 Generated by Copilot at ca87612

Enhanced the gallery item component to display animations for NFTs. Used the useGalleryItem hook to get the animation URL from the NFT metadata.

🤖 Generated by Copilot at ca87612

Sing, O Muse, of the skillful coder who improved the gallery
Of NFTs, those wondrous works of art that shine like stars
He used the index parameter, a clever tool, to find the first
And from the nftEntity.meta.animation_url he drew the motion of the image

[kodabot]

WARNING @hassnian PR for issue #7499 which isn't assigned to you. Please be warned that this PR may get rejected if there's another assignee for issue #7499

[netlify]

✅ Deploy Preview for nuxt-kodadot ready!

Name	Link
🔨 Latest commit	cbb5eb5
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt-kodadot/deploys/6523dbc316cddd000875e258
😎 Deploy Preview	https://deploy-preview-7517--nuxt-kodadot.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 contains modifications to the useGalleryItem function in components/gallery/useGalleryItem.ts file. The changes are mainly adjustments on how resources are handled. Now, each resource's animation URL is fetched from the resource's metadata. If the animation URL is not found and it is the first resource, it falls back to using the animation URL from the parent NFT entity metadata. This equates to an enhancement in resource management, minimizing possible null or undefined issues related to the animationUrl field. Minor changes in object destructuring have also been implemented, and the animationUrl is now sanitized before being used.

[prury]

nice find @hassnian , does it load there for you? the song

[hassnian]

yep , icons are fixed here #7436

CleanShot.2023-10-06.at.09.53.55.mp4

[prury]

yep , icons are fixed here #7436
CleanShot.2023-10-06.at.09.53.55.mp4

hmm, on chrome it loads and plays the song
but on firefox (loading icon never disappears):

ok, let's see if 7436 fixes it

[vikiival]

Is the build failing?

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
No Duplication information

[yangwao]

builds

[yangwao]

pay 20 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $20 @ 3.82 USD/DOT ~ 5.236 $DOT
🧗 13QUj3pZyFNfYj4AM336hRdyLQbevj5H3sR4PKmLEXLdwZhh
🔗 0x57ea967f480f3bc71592cf31e85977d66149f3c4f5304f8866649262f06408d3

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