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:
@@ -1,4 +1,5 @@
|
||||
import { lazy, Suspense, useEffect, useLayoutEffect, useRef, useState, type CSSProperties } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useInfiniteQuery, useQuery, useQueryClient, type InfiniteData } from "@tanstack/react-query";
|
||||
import {
|
||||
@@ -226,8 +227,10 @@ export default function PlexBrowse({
|
||||
}
|
||||
|
||||
if (sub.view.kind === "player") {
|
||||
// The fallback is portaled for the same reason the player itself is: it is a fixed
|
||||
// full-viewport overlay, and this tree renders inside the page scroller.
|
||||
return (
|
||||
<Suspense fallback={<div className="fixed inset-0 z-50 bg-black" />}>
|
||||
<Suspense fallback={createPortal(<div className="fixed inset-0 z-50 bg-black" />, document.body)}>
|
||||
<PlexPlayer itemId={sub.view.id} queue={sub.view.queue} onClose={sub.back} />
|
||||
</Suspense>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user