#5231 audio type fic

[prachi00]

Thank you for your contribution to the KodaDot NFT gallery.

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

PR Type

• Bugfix
• Feature
• Refactoring

Context

• Closes Music cards fix #5231
• Requires deployment <>

Before submitting pull request, please make sure:

• My contribution builds clean without any errors or warnings
• I've merged recent default branch -- main and I've no conflicts
• I've tried to respect high code quality standards
• I've didn't break any original functionality
• I've posted a screenshot of demonstrated change in this PR

Optional

• I've tested it at </bsx/collection>
• I've tested PR on mobile
• I've written unit tests 🧪
• I've found edge cases

Had issue bounty label?

• Fill up your KSM address:
  Payout

Community participation

• Are you at KodaDot Discord?

Screenshot 📸

• My fix has changed something on UI; a screenshot is best to understand changes for others.

[kodabot]

SUCCESS @prachi00 PR for issue #5231 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-nuxt ready!

Name	Link
🔨 Latest commit	80d2462
🔍 Latest deploy log	https://app.netlify.com/sites/koda-nuxt/deploys/641470f25af1880008b8f0db
😎 Deploy Preview	https://deploy-preview-5262--koda-nuxt.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 settings.

[prachi00]

@roiLeoI would put Waveform at top & maybe remove player (or just show time)

about this, shouldnt this be done in #5228 ?

[roiLeo]

shouldn't we show the thumbnail instead of player?
ping @exezbcz

[vikiival]

Looks ok to me.

Need one check from @exezbcz

[exezbcz]

maybe it should maintain the aspect ratio

otherwise the cards oki

@roiLeo you mean on the nft card or on the detail? I think it makes sense for the nft cards and then player in the detail

• for this issue I only wanted a quick fix - till I make the design - for the cards so they don't look too off
• it will be handled in issue that @prachi00 mentioned Better Visual integration for music files #5228

can you please direct me somewhere for what are the options with media player styling?

[roiLeo]

@roiLeo you mean on the nft card or on the detail? I think it makes sense for the nft cards and then player in the detail

nft card => thumbnail (+waveform+time?)
details => waveform and player

can you please direct me somewhere for what are the options with media player styling?

• current audio-visual (demo)
• or we can extend with something else

[exezbcz]

@roiLeo Yes, I agree. When I make the other issue, I'll take that in mind.

[prachi00]

@exezbcz the aspect ratio thing, which nft is it? I see it like this on my 14 inch mac

[exezbcz]

@prachi00 try resizing screen size - than compare it to the normal nft gallery

• I think it does not matter for now since we will change it soon

[daiagi]

as @exezbcz already mentioned there is the issue of screen resizing
can it be fixed in this PR?

[vikiival]

can it be fixed in this PR?

Yes please

[vikiival]

Already raised

[prachi00]

as @exezbcz already mentioned there is the issue of screen resizing can it be fixed in this PR?

for now I fixed height at 60% instead of 100% , cannot think of a better solution

[vikiival]

for now I fixed height at 60%

Code in f077d8a says 70 % 👀

[vikiival]

Looks good for me.

If @roiLeo can use his magic css skills to review ❤️

[yangwao]

let's say it's ok

gallery item detail

I think better make it consistent at gallery item strip? Could be made in another issue if so

[exezbcz]

@yangwao yes, the objective was to make that appear the same as other nft cards (content in square) - which on landing page does, so I think we can move on.

[vikiival]

pay 20 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $20 @ 35.53 USD/KSM ~ 0.563 $KSM
🧗 EzGc4s9PgCPx1YnF3fqzhLzVHpHMTL4LWPScwpDrR8JKgSU
🔗 0xdd64d2785492c4d4e90eb06744d0cfc52721778e21d09718dcdc620caa353737

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

[roiLeo]

let it roll 🎢 , next:
nft card => thumbnail
details => bottom player / top waveform

'till new design

[codeclimate]

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

View more on Code Climate.