Leaderboard image optimizations - Media type Badge#1751
Conversation
Signed-off-by: prxt6529 <prxt@6529.io>
Signed-off-by: prxt6529 <prxt@6529.io>
Signed-off-by: prxt6529 <prxt@6529.io>
📝 WalkthroughWalkthroughAdds a centralized submission media-type system and helper re-exports; introduces MediaTypeBadge UI and a controlled tooltip hook; bumps default image scale to AUTOx1080; centralizes file-upload MIME lists and validation; wires badges into multiple UI components and expands several component props. Changes
Sequence Diagram(s)sequenceDiagram
participant Client
participant MediaBadge as MediaTypeBadge
participant Helper as getMediaTypeInfo
participant TooltipHook as useControlledTooltip
participant DOM
Client->>MediaBadge: render(mimeType, dropId, size)
MediaBadge->>Helper: getMediaTypeInfo(mimeType)
Helper-->>MediaBadge: category, label, styles
MediaBadge->>TooltipHook: initialize triggerProps & isOpen
Client->>MediaBadge: user hover / focus / key
MediaBadge->>TooltipHook: triggerProps handlers (onMouseEnter/onKeyDown)
TooltipHook-->>MediaBadge: setIsOpen(true)
MediaBadge->>DOM: render Tooltip bound to tooltipId
DOM->>TooltipHook: scroll event
TooltipHook-->>MediaBadge: setIsOpen(false)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
components/waves/memes/file-upload/utils/fileValidation.ts (1)
31-45: Include GLTF in the user-facing error message.At Line 44,
.gltfuploads are allowed but the message only mentions GLB. This can confuse users who select GLTF files.🔧 Suggested fix
- error: `File type not supported. Please upload PNG, JPG, GIF, video, or GLB files.`, + error: `File type not supported. Please upload PNG, JPG, GIF, video, or GLB/GLTF files.`,components/waves/leaderboard/gallery/WaveLeaderboardGalleryItem.tsx (1)
152-160: Unsafe non-null assertions mixed with optional chaining.Lines 154 and 156 use
!after optional chaining (drop.parts[0]?.media[0]!), which is inconsistent and potentially unsafe. Ifparts[0]exists butmedia[0]is undefined, the code will throw.🐛 Proposed fix with proper null handling
- <MediaDisplay - media_mime_type={ - drop.parts[0]?.media[0]!.mime_type || "image/jpeg" - } - media_url={drop.parts[0]?.media[0]!.url!} + <MediaDisplay + media_mime_type={ + drop.parts[0]?.media[0]?.mime_type ?? "image/jpeg" + } + media_url={drop.parts[0]?.media[0]?.url ?? ""}Alternatively, extract the media access earlier and guard:
const primaryMedia = drop.parts[0]?.media[0]; // Then use primaryMedia?.mime_type and primaryMedia?.url with proper fallbacks
🧹 Nitpick comments (1)
constants/submission-media.constants.ts (1)
36-37: Consider derivingSUBMISSION_FILE_INPUT_ACCEPTfromSUBMISSION_MEDIA_TYPES.The accept string is hardcoded and duplicates information already in
SUBMISSION_MEDIA_TYPES. If you add a new media type to the array, this string won't update automatically.♻️ Suggested refactor
-export const SUBMISSION_FILE_INPUT_ACCEPT = - "image/png,image/jpeg,image/jpg,image/gif,video/mp4,video/quicktime,.mov,model/gltf-binary,model/gltf+json,application/octet-stream,.glb,.gltf"; +const FILE_EXTENSIONS = [".mov", ".glb", ".gltf"]; +export const SUBMISSION_FILE_INPUT_ACCEPT = [ + ...SUBMISSION_MEDIA_MIME_TYPES, + "application/octet-stream", + ...FILE_EXTENSIONS, +].join(",");
prxt6529
changed the title
Signed-off-by: prxt6529 <prxt@6529.io>
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@components/home/next-mint-leading/NextMintCard.tsx`:
- Around line 84-96: The title Link inside the flex row (in NextMintCard.tsx,
adjacent to MediaTypeBadge) can overflow because flex children need min-w-0 to
allow line-clamp; update the flex container/Link so the clamped title can shrink
by adding the CSS utility class min-w-0 (and optionally flex-1) to the element
that wraps or is the Link (the element with className "tw-m-0 ...
group-hover:tw-text-white/80") so long titles respect line-clamp and don’t
overflow.
♻️ Duplicate comments (1)
components/home/next-mint-leading/LeadingCard.tsx (1)
88-100: Same flex-row line-clamp concern as NextMintCard.
🧹 Nitpick comments (2)
components/waves/memes/MemesArtSubmissionFile.tsx (1)
40-48: Update component documentation to reflect supported file types.The file input now accepts additional formats via
SUBMISSION_FILE_INPUT_ACCEPT(GIF images and 3D models like GLTF/GLB), but the JSDoc comment on line 44 still states only "images (PNG, JPG) and videos".Consider updating the documentation to accurately reflect all supported formats.
📝 Suggested documentation update
/** * Memes Art Submission File Component * * Handles uploading, previewing, and validating artwork files for meme submissions. - * Supports images (PNG, JPG) and videos with browser compatibility detection. + * Supports images (PNG, JPG, GIF), videos (MP4, MOV), and 3D models (GLTF, GLB) + * with browser compatibility detection. * * This version uses Blob URLs (createObjectURL) to preview any newly selected file, * which satisfies a CSP requiring 'blob:' rather than 'data:' for media. */Also applies to: 306-306
components/memes/drops/MemesLeaderboardDrop.tsx (1)
3-3: Guard the badge when there’s no media.Currently the badge renders even if
artworkMediais undefined, which can show a type indicator alongside a card with no media. Consider rendering only when media exists (as in WaveSmallLeaderboardItemContent).♻️ Suggested tweak
- <div className="tw-flex tw-items-center tw-gap-2"> - <MediaTypeBadge - mimeType={artworkMedia?.mime_type} - dropId={drop.id} - size="sm" - /> - <MemesLeaderboardDropHeader title={title} /> - </div> + <div className="tw-flex tw-items-center tw-gap-2"> + {artworkMedia && ( + <MediaTypeBadge + mimeType={artworkMedia.mime_type} + dropId={drop.id} + size="sm" + /> + )} + <MemesLeaderboardDropHeader title={title} /> + </div>Also applies to: 102-109
Signed-off-by: prxt6529 <prxt@6529.io>
Signed-off-by: prxt6529 <prxt@6529.io>
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@components/drops/media/MediaTypeBadge.tsx`:
- Around line 45-77: The badge never opens because the Tooltip is controlled by
isOpen/setIsOpen but the badge div lacks interaction handlers and keyboard
accessibility; update the badge root (the div using data-tooltip-id/
data-tooltip-content and classes like SIZE_CLASSES[size] and
ICON_SIZE_CLASSES[size]) to add tabIndex={0}, aria-label={mediaInfo.label},
onMouseEnter={() => setIsOpen(true)}, onMouseLeave={() => setIsOpen(false)},
onFocus={() => setIsOpen(true)}, onBlur={() => setIsOpen(false)} and an
onKeyDown handler that opens the tooltip on Enter/Space and closes on Escape
using setIsOpen; keep using tooltipId and useTooltipCloseOnScroll as-is so
scrolling still closes the tooltip.
Signed-off-by: prxt6529 <prxt@6529.io>
Signed-off-by: prxt6529 <prxt@6529.io>
Signed-off-by: prxt6529 <prxt@6529.io>
|
2 participants
Summary by CodeRabbit
New Features
Improvements
✏️ Tip: You can customize this high-level summary in your review settings.