fix(plex): portal the full-screen player out of the page scroller
The player is `fixed left-0 top-0 z-50` but rendered from inside the page scroller, so it only ever covered the viewport because that scroller happened not to be a stacking context. Giving it the edge-fade made it one, and the mask scoped the player's z-50 inside it: the rail, the side panel and the header painted straight over the player, and its edges faded. Measured both ways, then fixed where every other full-screen overlay here already sits — <body>. Same for the Suspense fallback that stands in while the player chunk loads, and for the floating draft save bar on the Configuration page. Swept the rest: every other `fixed` element is either App-level or already portaled.
This commit is contained in:
@@ -9,6 +9,7 @@ import {
|
||||
type ReactNode,
|
||||
type WheelEvent as ReactWheelEvent,
|
||||
} from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import Hls from "hls.js";
|
||||
@@ -944,7 +945,12 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
|
||||
// While scrubbing the head follows the finger (preview); otherwise it tracks playback.
|
||||
const headPct = scrub != null && duration > 0 ? (scrub / duration) * 100 : pct;
|
||||
|
||||
return (
|
||||
// Portaled to <body>, like every other full-screen overlay here (Modal, PlayerModal, ChatDock,
|
||||
// BackToTop). A fixed, full-viewport player must not be painted inside the page scroller: the
|
||||
// moment that scroller gets a mask/filter/transform/contain it becomes a stacking context, and
|
||||
// this z-50 is then scoped inside it — the rail, the side panel and the header paint straight
|
||||
// over the player. That is exactly what the scroller's edge-fade did before this moved out.
|
||||
return createPortal(
|
||||
<div
|
||||
ref={wrapRef}
|
||||
className="fixed left-0 top-0 z-50 bg-black flex items-center justify-center select-none"
|
||||
@@ -1619,7 +1625,8 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user