fix(plex): the player holds the page still and covers it whole; the row drops the countdown

On an iPad a drag on the video scrolled the page behind the player, and in Brave
dvh did not follow the toolbar, so a strip of the page showed under it. The
page is now locked without overscroll on a black root while the player is open,
and the player is sized from its fixed box. The time row keeps the position,
the length and the end clock; the countdown is gone (owner).

frontend/src/components/PlexPlayer.controls.dom.test.tsx

@@ -857,3 +857,37 @@ describe("the seek bar (C3)", () => {
     expect(head?.className).toContain("[@media(hover:none)]:opacity-100");
   });
 });
+
+describe("the time in the row", () => {
+  it("reads the position and the length, and the clock it ends at — no countdown", async () => {
+    mount({ details: { A: item("A") } });
+    await playingAt("/media/A", 100);
+    const row = screen.getByText(/1:40 \/ 50:00/).closest("div")!;
+    expect(row.textContent).not.toMatch(/-\s*48:20/);
+    expect(row.textContent).toMatch(/\(.+\)/);
+  });
+});
+
+// On an iPad a drag on the video moved the page behind it, and the strip it moved showed the page's
+// own background under the player.
+describe("the page under the player", () => {
+  it("is locked, without overscroll, on black, while the player is open — and given back after", async () => {
+    const root = document.documentElement.style;
+    mount({ details: { A: item("A") } });
+    await playingAt("/media/A", 100);
+    expect(document.body.style.overflow).toBe("hidden");
+    expect(root.overscrollBehavior).toBe("none");
+    expect(root.backgroundColor).toBe("black");
+    cleanup();
+    expect(document.body.style.overflow).toBe("");
+    expect(root.overscrollBehavior).toBe("");
+    expect(root.backgroundColor).toBe("");
+  });
+
+  it("is covered by a player sized from its fixed box, not from dvh", async () => {
+    mount({ details: { A: item("A") } });
+    await playingAt("/media/A", 100);
+    const wrap = video().closest<HTMLElement>("[class*='fixed']")!;
+    expect([wrap.style.width, wrap.style.height]).toEqual(["80%", "80%"]);
+  });
+});