feat: show gif icon #11545
feat: show gif icon #11545
Conversation
Deploying koda-art-prod with
|
| Latest commit: |
b3d7d45
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://8c0e86e9.kodaart-production.pages.dev |
| Branch Preview URL: | https://feat--show-gif-icon.kodaart-production.pages.dev |
WalkthroughThis update modifies the Changes
Suggested reviewers
Poem
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for koda-canary ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
preschian
requested review from
vikiival and
hassnian
and removed request for
a team
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
components/base/MediaItem.vue (2)
197-208: Consider adding a watcher for rawSrc changes.Currently, the MIME type is only fetched on component mount. If the
rawSrcprop changes after the component is mounted, the icon won't update.onMounted(async () => { if (props.animationSrc && !props.mimeType) { type.value = await getMimeType(props.animationSrc) } else if (props.rawSrc) { const mimeType = await fetchMimeType(props.rawSrc) const icon = { 'image/gif': 'i-mdi:file-gif-box', } iconType.value = icon[mimeType.mime_type] || 'i-mdi:file-image-box' } }) +// Add a watcher to update the icon if rawSrc changes after mounting +watch(() => props.rawSrc, async (newSrc) => { + if (newSrc) { + try { + const mimeType = await fetchMimeType(newSrc) + const icon = { + 'image/gif': 'i-mdi:file-gif-box', + } + iconType.value = icon[mimeType.mime_type] || 'i-mdi:file-image-box' + } catch (error) { + console.error('Failed to get MIME type for updated raw source:', error) + } + } +}, { immediate: false })
197-208: Extract icon mapping to a constant.The icon mapping for MIME types could be extracted to a constant outside the component or function for better maintainability, especially if more icons are added in the future.
+const MIME_TYPE_ICONS = { + 'image/gif': 'i-mdi:file-gif-box', +} onMounted(async () => { if (props.animationSrc && !props.mimeType) { type.value = await getMimeType(props.animationSrc) } else if (props.rawSrc) { const mimeType = await fetchMimeType(props.rawSrc) - const icon = { - 'image/gif': 'i-mdi:file-gif-box', - } - iconType.value = icon[mimeType.mime_type] || 'i-mdi:file-image-box' + iconType.value = MIME_TYPE_ICONS[mimeType.mime_type] || 'i-mdi:file-image-box' } })
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
components/base/MediaItem.vue(5 hunks)components/shared/nftCard/NftCard.vue(1 hunks)utils/fetch.ts(0 hunks)
💤 Files with no reviewable changes (1)
- utils/fetch.ts
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Cloudflare Pages: koda-art-prod
🔇 Additional comments (5)
components/base/MediaItem.vue (4)
48-48: Good implementation of dynamic icon binding.The icon name is now dynamically bound to the reactive
iconTypereference, allowing for different icons based on the media type.
85-85: Good addition of the rawSrc prop.Adding the
rawSrcprop allows the component to work with the original, unsanitized URL for MIME type detection, while still using the sanitized URL for display purposes.Also applies to: 112-113
133-133: Good default icon choice.The default icon 'i-mdi:file-image-box' is appropriate for general image files when specific MIME type detection isn't available or applicable.
80-80:✅ Verification successful
Verify the correct import path for fetchMimeType.
The service import path has changed to
@/services/oda. Make sure this is the correct location and that the function signature matches what you're expecting in the component.
🏁 Script executed:
#!/bin/bash # Check if the fetchMimeType function exists in the specified path rg -A 5 "export.*fetchMimeType" services/odaLength of output: 99
Let’s locate where
fetchMimeTypeis actually defined in the repo:
🏁 Script executed:
#!/bin/bash # Search for all occurrences and definitions of fetchMimeType rg "fetchMimeType" -n .Length of output: 639
fetchMimeType import path and signature validated
The
fetchMimeTypefunction is exported fromsrc/services/oda.tsat line 69 and matches the signaturefetchMimeType(uri: string). All imports (inMediaItem.vueanduseGalleryItem.ts) correctly reference@/services/oda, and the usage with a string argument (props.rawSrc) is valid. No changes required.components/shared/nftCard/NftCard.vue (1)
30-30: Good implementation passing raw source to MediaItem.Passing the raw NFT image URL to the MediaItem component enables proper MIME type detection, particularly for GIF images, while still using the sanitized URL for display purposes.
Thank you for your contribution to the Koda - Generative Art Marketplace.
👇 __ Let's make a quick check before the contribution.
PR Type
Context
Summary by CodeRabbit