Better youtube preview

[simo6529]

Summary by CodeRabbit

• Tests

  • Updated YouTube preview frame test assertions to correctly verify element structure and CSS class placement.

• Refactor

  • Consolidated YouTube preview styling definitions into centralized constants for improved maintainability.

• Bug Fixes

  • Fixed potential control flow issue in social statement icon handling for unmatched edge cases.

[coderabbitai]

📝 Walkthrough

Walkthrough

YouTube preview component refactoring centralizes frame styling classes and adds test identifiers. A test file updates assertions to verify the new media-frame element structure. A separate control flow adjustment adds an explicit return statement in an icon component's default switch case.

Changes

Cohort / File(s)	Summary
YouTube Preview Refactoring components/drops/view/part/dropPartMarkdown/youtubePreview.tsx, __tests__/components/drops/view/part/DropPartMarkdown.test.tsx	Introduces YOUTUBE_MEDIA_FRAME_CLASSES and YOUTUBE_STABLE_FRAME_CLASSES constants, replacing inline class strings. Adds data-testid attributes to media frames. Test assertions updated: stable-frame height classes now negated; media-frame assertions now verify tw-aspect-video class presence.
Icon Control Flow components/user/utils/icons/SocialStatementIcon.tsx	Adds explicit return null after assertUnreachable() in the default switch case to ensure proper JSX.Element return type.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• Stabilize drop media #1908: Modifies the same youtubePreview component and tests, involving YouTube frame class consolidation and test assertion updates for stable/media frame structure.
• manifold and transient links #1937: Modifies SocialStatementIcon.tsx with control flow changes to the switch statement's default case handling.

Suggested reviewers

• GelatoGenesis
• prxt6529
• ragnep

Poem

🐰 Constants hop into place so neat,
YouTube frames find their proper seat,
Tests assert with fresh precision,
Control flows gain decision,
Classes dance to refactor's beat! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Better youtube preview' directly reflects the main changes: refactoring YouTube preview styling with new constants and test improvements.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch better-youtube-preview

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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

[coderabbitai]

🧹 Nitpick comments (1)

components/drops/view/part/dropPartMarkdown/youtubePreview.tsx (1)

446-471: Minor: fallback link inherits tw-bg-black from YOUTUBE_MEDIA_FRAME_CLASSES, which may clash with the intended tw-bg-iron-900/40 on the parent <a>.

The fallback <a> sets tw-bg-iron-900/40, but the inner media-frame div applies tw-bg-black (from YOUTUBE_MEDIA_FRAME_CLASSES), making the card background solid black in the media area. If the intent is a subtler look for the error/empty state, consider overriding with a lighter background (e.g., tw-bg-iron-900). If solid black is deliberate here, no change needed.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@components/drops/view/part/dropPartMarkdown/youtubePreview.tsx` around lines
446 - 471, The inner media frame's class constant YOUTUBE_MEDIA_FRAME_CLASSES
currently includes tw-bg-black which overrides the parent anchor's
tw-bg-iron-900/40; update the JSX in youtubePreview (the fallback <a> block
using href and fallbackMessage) to remove or override tw-bg-black on the media
frame div: either remove the bg utility from YOUTUBE_MEDIA_FRAME_CLASSES or add
a lighter bg utility (e.g., tw-bg-iron-900 or tw-bg-iron-900/40) directly on the
media-frame div to ensure the parent anchor's subtler background is preserved.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@components/drops/view/part/dropPartMarkdown/youtubePreview.tsx`:
- Around line 446-471: The inner media frame's class constant
YOUTUBE_MEDIA_FRAME_CLASSES currently includes tw-bg-black which overrides the
parent anchor's tw-bg-iron-900/40; update the JSX in youtubePreview (the
fallback <a> block using href and fallbackMessage) to remove or override
tw-bg-black on the media frame div: either remove the bg utility from
YOUTUBE_MEDIA_FRAME_CLASSES or add a lighter bg utility (e.g., tw-bg-iron-900 or
tw-bg-iron-900/40) directly on the media-frame div to ensure the parent anchor's
subtler background is preserved.