feat(details): click poster open lightbox fullscreen#3047
Conversation
Add PosterLightbox component (portal + backdrop + Esc + body scroll lock). Wire to MovieDetails and TvDetails poster: clic ouvre l'image en grand (TMDB original size). - src/components/Common/PosterLightbox/index.tsx (nouveau) - src/components/MovieDetails/index.tsx - src/components/TvDetails/index.tsx
Remplace div onClick + role=dialog par: - container role=dialog sans handler - button absolute inset-0 = backdrop cliquable (cursor-zoom-out) - image wrapper pointer-events-none Vire les 4 erreurs jsx-a11y/click-events-have-key-events et no-noninteractive-element-interactions sans changer le comportement.
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds a poster lightbox feature that lets users click the poster on movie and TV detail pages to view a larger version in a modal overlay.
Changes:
- Introduces a new shared
PosterLightboxcomponent rendered via a React portal with keyboard (Escape) and click-to-close support. - Wires the lightbox into
MovieDetailsandTvDetails, converting the poster<div>into a<button>trigger. - Adds body scroll locking and a transition while the lightbox is open.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| src/components/Common/PosterLightbox/index.tsx | New lightbox component with portal, transition, and close affordances. |
| src/components/MovieDetails/index.tsx | Renders the lightbox and turns the poster container into a clickable button. |
| src/components/TvDetails/index.tsx | Same integration as MovieDetails for the TV page. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| aria-label={alt || 'Poster preview'} | ||
| > | ||
| <button | ||
| type="button" | ||
| className="absolute inset-0 z-0 cursor-zoom-out bg-black/90 focus:outline-none" | ||
| onClick={onClose} | ||
| aria-label="Close poster preview" | ||
| /> | ||
| <button | ||
| type="button" | ||
| className="absolute right-4 top-4 z-20 rounded-full bg-gray-800/80 p-2 text-white hover:bg-gray-700/80 focus:outline-none focus:ring-2 focus:ring-white" | ||
| onClick={onClose} | ||
| aria-label="Close poster preview" | ||
| > |
There was a problem hiding this comment.
Do I need to make the aria-label react-intl or could I keep it this way since the other one and the repo are also hardcoded?
📝 WalkthroughWalkthroughThis PR introduces a poster lightbox modal component that displays full-size poster images in an overlay portal. The new ChangesPoster Lightbox Modal
Sequence DiagramsequenceDiagram
participant DetailPage as MovieDetails/<br/>TvDetails
participant LightboxComp as PosterLightbox
participant Portal as Document Portal
participant User
User->>DetailPage: clicks expand poster button
DetailPage->>DetailPage: setState showPosterLightbox true
DetailPage->>LightboxComp: render with show=true
LightboxComp->>LightboxComp: lock body scroll
LightboxComp->>Portal: createPortal overlay
Portal->>User: display poster in modal
User->>LightboxComp: click close button / background /<br/>press Escape
LightboxComp->>DetailPage: call onClose()
DetailPage->>DetailPage: setState showPosterLightbox false
DetailPage->>LightboxComp: render with show=false
LightboxComp->>LightboxComp: unlock body scroll
Portal->>User: close overlay
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Warning Review ran into problems🔥 ProblemsGit: Failed to clone repository. Please run the 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 |
Gauvino
changed the title
Description
Small QoL addition: clicking the poster on
/movie/[id]or/tv/[id]opens it fullscreen instead of doing nothing. I was browsing details pages on a 4K monitor and the 600x900 poster felt cramped, wanted a quick way to see the artwork properly.It's a new
PosterLightboxcomponent (React portal + black backdrop + Esc-to-close + body scroll lock) that pulls the TMDBoriginalsize image. Wired intoMovieDetailsandTvDetails— the poster<div>becomes a<button>that opens the lightbox.No new deps. No API or DB changes. Behavior elsewhere untouched (TitleCards in grids still navigate to the details page like before).
Not linked to a specific issue — scratching my own itch, happy to drop it if it's out of scope.
How Has This Been Tested?
docker buildfromDockerfile, node 22.22.2-alpine) on a Proxmox CT — opened a handful of movie and TV pages, clicked posters, tested Esc, X button, and click-outside-image to closenext build(which runs ESLint) andtsc(server + client) both green on the final commitprettier --checkclean on the three touched files<button>sojsx-a11yrules pass without role hacks; image wrapper ispointer-events-noneso clicks pass through to the backdrop buttonSlideOver,ButtonWithDropdown, pagination nav, etc.)Tested on Chrome and on the phone work's like expected.
Screenshots / Logs (if applicable)
Checklist:
pnpm buildpnpm i18n:extract— no new stringsSummary by CodeRabbit