diff --git a/frontend/src/components/PlexPlayer.tsx b/frontend/src/components/PlexPlayer.tsx index 94523bc8..621202ec 100644 --- a/frontend/src/components/PlexPlayer.tsx +++ b/frontend/src/components/PlexPlayer.tsx @@ -957,18 +957,24 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) { onMouseMove={wake} onClick={wake} onWheel={onWheel} - // Everything in the player is 25% larger for lean-back / HTPC legibility. Laid out at 80vw×80vh - // and scaled ×1.25 from the top-left so it fills the viewport exactly (no overflow, controls stay - // on-screen). We use `transform: scale` rather than `zoom` deliberately: under `zoom`, event - // clientX stays in CSS pixels while getBoundingClientRect returns zoomed pixels, so the seek/ - // volume/hover math (clientX − rect.left)/rect.width breaks; with `transform` both are in the same - // viewport space, so that ratio stays correct. Skip buttons ride this too → +25% like everything. + // Windowed (pseudo-fullscreen): everything is 25% larger for lean-back / HTPC legibility. Laid + // out at 80vw×80vh and scaled ×1.25 from the top-left so it fills the viewport exactly (no + // overflow, controls stay on-screen). We use `transform: scale` rather than `zoom` deliberately: + // under `zoom`, event clientX stays in CSS pixels while getBoundingClientRect returns zoomed + // pixels, so the seek/volume/hover math (clientX − rect.left)/rect.width breaks; with `transform` + // both are in the same viewport space, so that ratio stays correct. Skip buttons ride this too. + // + // In NATIVE fullscreen we must NOT carry the ×1.25 transform: with the element at 80vw×80vh, the + // scaled layer is composited letterboxed and the video never grows past its windowed size (the UA + // does NOT force this fixed, explicitly-sized element to fill). So in `fs` we size the wrapper to + // the full screen (100vw×100vh) with NO transform — the flex box then centres the video and its + // `max-h-full`/`max-w-full` aspect-fit fills the available height. The % seek-bar left and the + // clientX/rect math stay correct under the identity transform. style={{ cursor: uiVisible ? "default" : "none", - width: "80vw", - height: "80vh", - transform: "scale(1.25)", - transformOrigin: "top left", + ...(fs + ? { width: "100vw", height: "100vh" } + : { width: "80vw", height: "80vh", transform: "scale(1.25)", transformOrigin: "top left" }), }} > {/* Per-user subtitle appearance (font size / colour / background). ::cue is global, but this @@ -979,7 +985,10 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) { )}}`}