fix: polish mobile lightbox swipe playback

[Simplereally]

Summary

• expand mobile lightbox swipe detection to the full surface and restore desktop whitespace click-to-close behavior
• hide native video controls during swipe-driven mobile playback so videos autoplay cleanly without the gray overlay flash
• suppress transient source-swap video errors so the lightbox no longer flashes failed-to-load text while the next video is loading

Testing

• /home/josh/.bun/bin/bun run test components/images/image-lightbox.test.tsx components/studio/layout/studio-shell.test.tsx hooks/use-media-player.test.ts components/ui/media-player.test.tsx
• /home/josh/.bun/bin/bun x eslint components/images/image-lightbox.tsx components/images/image-lightbox.test.tsx components/studio/layout/studio-shell.tsx hooks/use-media-player.ts hooks/use-media-player.test.ts components/ui/media-player.tsx components/ui/media-player.test.tsx
• /home/josh/.bun/bin/bun x tsc --noEmit

Summary by CodeRabbit

Release Notes

• New Features

  • Lightbox now closes when clicking on empty space
  • Added swipe gesture support for navigating lightbox gallery
  • Video controls can be toggled on mobile during swipe navigation

• Bug Fixes

  • Improved video error handling to distinguish between transient and persistent playback errors

• Tests

  • Added UI interaction tests for lightbox surface clicks and swipe gestures
  • Enhanced video error handling test coverage

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
bloomstudio	Ignored	Preview	Mar 10, 2026 10:07pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 023d1017-c4f6-4c47-9d54-df106d2acd8a

📥 Commits

Reviewing files that changed from the base of the PR and between 08d95e8 and 7ea8107.

📒 Files selected for processing (5)

• components/images/image-lightbox.test.tsx
• components/images/image-lightbox.tsx
• components/studio/layout/studio-shell.tsx
• hooks/use-media-player.test.ts
• hooks/use-media-player.ts

---

📝 Walkthrough

Walkthrough

This change extends video control management in lightbox galleries and implements delayed error handling for video playback. The MediaPlayer component now accepts an optional controls parameter, the ImageLightbox supports hideVideoControls to suppress native controls during mobile swipe navigation, and the media player hook introduces a 450ms grace period to distinguish transient from persistent video errors.

Changes

Cohort / File(s)	Summary
Lightbox Component & Tests components/images/image-lightbox.tsx, components/images/image-lightbox.test.tsx	Added hideVideoControls property to mediaNavigation config. Introduced unified lightbox surface wrapper with click handler to close on surface clicks and conditionally apply swipe-region props. Updated video rendering to use computed showMobileSwipeVideoControls. Added comprehensive UI interaction tests for surface clicks, swipe gestures, video controls visibility, and edge-case navigation scenarios.
MediaPlayer Component components/ui/media-player	Extended to accept optional controls parameter (defaults to true). Renders video element with both data-controls and controls attributes bound to this parameter, enabling control visibility management from parent components.
Studio Shell Configuration components/studio/layout/studio-shell.tsx	Set hideVideoControls: true in lightboxMediaNavigation for mobile gallery navigation, enabling the lightbox to suppress native video controls during swipe interactions.
Media Player Hook & Tests hooks/use-media-player.ts, hooks/use-media-player.test.ts	Implemented delayed error handling with 450ms grace period to distinguish transient video errors during source swaps from persistent errors. Updated handleError signature to accept optional event parameter. Added error timeout management with clearErrorTimeout utility. Added comprehensive test cases validating transient error suppression and persistent error surfacing after grace period.

Estimated Code Review Effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• fix: add mobile swipe navigation to history lightbox #40: Modifies the same ImageLightbox swipe-navigation surface and lightbox tests—both PRs adjust mediaNavigation-driven swipe handlers and test scaffolding for lightbox gallery interactions.
• feat: convex optimizations, mobile studio ui #22: Modifies components/images/image-lightbox.tsx outer-surface click and pointer handling for lightbox close behavior, directly overlapping with these surface interaction changes.

Poem

🐰 With videos that play so smooth and fine,
We hide the controls in swipes divine,
A grace period waits, so patient and true,
Transient errors fade, persistent ones too—
Hoppy hops through clickable surfaces new! 🎬

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/lightbox-swipe-polish

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
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.}