Html mobile preview 2503

[simo6529]

Summary by CodeRabbit

• New Features

  • Enhanced HTML media content support in drops with improved styling and responsive layout for iframe containers.
  • Added preview image support for HTML media on touch devices for better user experience.

• Tests

  • Expanded test coverage for HTML media rendering and iframe container class forwarding.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3a2f6011-0bf1-4bbd-9005-f7a03dddfb52

📥 Commits

Reviewing files that changed from the base of the PR and between df0ad63 and 989ed4e.

📒 Files selected for processing (5)

• __tests__/components/drops/view/item/content/media/DropListItemContentMedia.test.tsx
• __tests__/components/drops/view/item/content/media/MediaDisplay.test.tsx
• components/drops/view/item/content/media/DropListItemContentMedia.tsx
• components/drops/view/item/content/media/MediaDisplay.tsx
• components/home/now-minting/LatestDropNextMintSection.tsx

---

📝 Walkthrough

Walkthrough

This change adds HTML media iframe container styling and preview image support. Components now accept htmlIframeContainerClassName and htmlPreviewImageUrl props that are forwarded through the media rendering pipeline, enabling improved HTML media display control and preview handling.

Changes

Cohort / File(s)	Summary
HTML Media Props Threading components/drops/view/item/content/media/DropListItemContentMedia.tsx, components/drops/view/item/content/media/MediaDisplay.tsx	Added optional props for HTML iframe container styling and preview images. DropListItemContentMedia accepts htmlIframeContainerClassName and htmlPreviewImageUrl, forwarding them to MediaDisplay. MediaDisplay threads iframeContainerClassName down to SandboxedExternalIframe.
Consumer Integration components/home/now-minting/LatestDropNextMintSection.tsx	Computes preview image URL from drop metadata for HTML media on touch devices, then passes htmlIframeContainerClassName="tw-w-full" and derived htmlPreviewImageUrl to DropListItemContentMedia.
Test Coverage __tests__/components/drops/view/item/content/media/DropListItemContentMedia.test.tsx, __tests__/components/drops/view/item/content/media/MediaDisplay.test.tsx	Added test cases verifying HTML media props (data-src, data-preview-image-url, data-iframe-container-class-name) are correctly forwarded through the component tree and applied to the iframe element.

Sequence Diagram

sequenceDiagram
    participant LS as LatestDropNextMintSection
    participant DLI as DropListItemContentMedia
    participant MD as MediaDisplay
    participant SEI as SandboxedExternalIframe

    LS->>LS: Detect HTML media & touch device
    LS->>LS: Compute htmlPreviewImageUrl
    LS->>DLI: Pass htmlIframeContainerClassName<br/>& htmlPreviewImageUrl
    DLI->>DLI: Receive HTML props
    DLI->>MD: Forward props to MediaDisplay<br/>(iframeContainerClassName)
    MD->>MD: Route to HTML media path
    MD->>SEI: Pass containerClassName<br/>for iframe styling
    SEI->>SEI: Apply container class<br/>to iframe element

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Restore static preview-image fallback for html #2166: Modifies MediaDisplay's HTML rendering with preview image and container props, directly related to this PR's prop threading changes.
• Homepage interactive winner #2138: Updates HTML-media rendering path in MediaDisplay and DropListItemContentMedia with new HTML-related props.
• Tap to load gating for html media #1759: Changes HTML media rendering in DropListItemContentMedia, affecting the same component modified here with new prop additions.

Suggested reviewers

• ragnep
• prxt6529

---

🐰 A rabbit's ode to HTML frames:

Through component trees the props now flow,
With iframe classes all aglow,
Preview images guide the eye,
While HTML media reaches the sky! ✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title 'Html mobile preview 2503' is vague and does not clearly convey what the pull request accomplishes; it lacks specificity about the actual changes being made.	Use a more descriptive title that clearly explains the main change, such as 'Add HTML iframe container class and preview image support for mobile drops' or 'Support HTML preview images and iframe styling on mobile devices'.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch html-mobile-preview-2503

---

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.}

[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