feat(details): click poster open lightbox fullscreen#3047
Conversation
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?
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
📝 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. 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
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.
Gauvino
force-pushed
the
feature/poster-lightbox
branch
from
aa20544 to
ac8e845
Compare
|
Any possibility to get this into the next release or 3.5.0 ? |
There was a problem hiding this comment.
To be honest I'm not sure to get what is the added value in this PR.
You literally can just right click on the image, choose the "open image in new tab" menu and see it fullscreen in another tab??
We aim to keep Seerr as simple as possible, and avoid adding unnecessary features whenever it is possible. IMO it includes this one.
I can understand, i will close it |
|
Thank you for your contribution anyway 🙂 |
Have a good day ! |
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