Tap to load gating for html media

[ragnep]

Summary by CodeRabbit

• New Features

  • Interactive media on touch devices now shows a gated "Tap to load" overlay with an interactive icon and enables interactive content on demand.
  • Device-aware gating applied across artwork and drop previews to avoid auto-loading interactive media.

• Style

  • Adjusted spacing and padding around media/artwork displays.
  • Removed a secondary icon from an artwork card for a cleaner media presentation.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Add touch-device gating and a user-activated overlay for interactive HTML media across multiple components, introduce an InteractiveIcon component, update overlay markup/styling, adjust padding in NowMintingSection, and remove an icon usage in BoostedDropCardHome.

Changes

Cohort / File(s)	Summary
Device gating for interactive HTML media components/home/next-mint-leading/LeadingCard.tsx, components/home/now-minting/NowMintingArtwork.tsx	Add touch detection (useDeviceInfo), compute shouldGate for HTML media, introduce interactiveEnabled state and gating flow that renders a "Tap to load" overlay before loading interactive media; adjust mount/animation timing.
Drop list media overlay components/drops/view/item/content/media/DropListItemContentMedia.tsx	Replace inner clickable div with a full-area <button> overlay (aria-label="Load interactive media"), remove keyboard Enter/Space handler, add InteractiveIcon and "Tap to load" label, and update overlay styling/positioning.
Interactive icon component components/drops/media/InteractiveIcon.tsx	New default-exported InteractiveIcon React component rendering an accessible SVG icon; accepts optional className.
Layout / spacing tweak components/home/now-minting/NowMintingSection.tsx	Change padding classes from uniform padding to explicit horizontal/top padding and adjust bottom padding at medium breakpoint.
Icon removal in boosted card components/home/boosted/BoostedDropCardHome.tsx	Remove Square2StackIcon import and its usage within the media-present branch.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Component
    participant DeviceDetection
    participant UI

    User->>Component: Open page / media item
    Component->>DeviceDetection: Query touch capability (useDeviceInfo)
    DeviceDetection-->>Component: Return hasTouch (true/false)
    alt Touch device && media type is HTML
        Component->>UI: Render gated overlay button ("Tap to load")
        UI-->>User: Show semi-transparent overlay with InteractiveIcon
        User->>UI: Tap overlay button
        UI->>Component: Set interactiveEnabled = true
        Component->>UI: Render interactive HTML media
        UI-->>User: Interactive media displayed
    else Non-touch device or non-HTML media
        Component->>UI: Render media directly
        UI-->>User: Media displayed immediately
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• 6529-Collections/6529seize-frontend#1756: Overlaps with changes to components/home/boosted/BoostedDropCardHome.tsx (icon usage).

Suggested reviewers

• simo6529

Poem

🐰 A tap wakes a canvas, shy and bright,
An icon nudges, "Load me when it's right."
I hop and I cheer as interactivity blooms,
A gentle overlay clears the room.
Tap once — and colors chase away the gloom.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Tap to load gating for html media' clearly and concisely summarizes the main change across all modified files: implementing a gating mechanism for interactive HTML media that requires user interaction.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@components/home/next-mint-leading/LeadingCard.tsx`:
- Around line 104-111: The preview image prop is being passed to MediaDisplay
for non‑touch (shouldGate === false) even when the media is HTML, causing the
iframe to never render; update the previewImageUrl expression so that when
media.mime_type indicates HTML (e.g., equals or startsWith "text/html") you pass
undefined (suppress the preview) in the non‑gated path; locate the MediaDisplay
usage in LeadingCard.tsx and change the previewImageUrl assignment to check
media.mime_type for HTML before returning previewImageUrlFallback.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@components/home/next-mint-leading/LeadingCard.tsx`:
- Around line 29-46: The HTML iframe is being rendered on the server because
useDeviceInfo returns hasTouchScreen=false in SSR; to prevent preloading you
should gate HTML until the component hydrates: add a local "hydrated" state
(useState(false)) and set it to true in a useEffect that runs on mount, compute
shouldGate as hydrated && hasTouchScreen && isHtml, and control
interactiveEnabled via setInteractiveEnabled(!shouldGate). Initialize
interactiveEnabled conservatively for SSR (e.g., !isHtml) so HTML is not
interactive server-side, and update it inside the existing useEffect (watching
drop.id, hydrated, hasTouchScreen, isHtml) to enable interaction post-hydration
when appropriate; reference LeadingCard, useDeviceInfo, shouldGate,
interactiveEnabled, setInteractiveEnabled.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud