fix(player): a fullscreen button the browser cannot honour is not shown

Brave on iPadOS switches element fullscreen off, patches requestFullscreen with
a video-only stand-in and fakes fullscreenEnabled, so the Plex fullscreen button
and the YouTube docked bar's did nothing. Support is now read off
Element.prototype and the buttons are left out without it (owner). A stand-in
that returns a boolean no longer throws. A test's bare matchMedia stub no
longer outlives its describe.

frontend/src/components/PlayerModal.dom.test.tsx

@@ -551,8 +551,19 @@ describe("PlayerModal — the side panel on a wide window", () => {
           removeEventListener: () => {},
         }) as unknown as MediaQueryList,
     );
+  // jsdom has no matchMedia to spy on: a bare one is put in for these tests and taken out after, or
+  // every later test's media query would read that bare stub.
+  let added = false;
   beforeEach(() => {
-    window.matchMedia ??= (() => ({})) as unknown as typeof window.matchMedia;
+    if (typeof window.matchMedia === "function") return;
+    window.matchMedia = (() => ({})) as unknown as typeof window.matchMedia;
+    added = true;
+  });
+  afterEach(() => {
+    // The spy goes first: restoring it later would put the bare stub back.
+    vi.restoreAllMocks();
+    if (added) delete (window as { matchMedia?: unknown }).matchMedia;
+    added = false;
   });
 
   it("puts the details beside the video, the description open, and sizes the card for both", async () => {
@@ -657,3 +668,33 @@ describe("PlayerModal — the side panel on a wide window", () => {
     expect(screen.queryByTestId("player-description")).toBeNull();
   });
 });
+
+// Brave on an iPad cannot fullscreen an element (it fakes `fullscreenEnabled`): the docked bar's
+// true-fullscreen button did nothing there. The window-filling view is then the biggest one.
+describe("PlayerModal — the docked bar's fullscreen", () => {
+  const maximised = (api_: boolean) => {
+    if (api_)
+      Object.defineProperty(Element.prototype, "requestFullscreen", {
+        configurable: true,
+        value: () => Promise.resolve(),
+      });
+    vi.spyOn(api, "videoDetail").mockReturnValue(new Promise(() => {}));
+    const A = vid("A", 0);
+    renderModal(
+      <PlayerModal video={A} queue={[A]} startIndex={0} onClose={() => {}} onState={() => {}} />,
+    );
+    fireEvent.click(screen.getByLabelText("player.fullscreen"));
+    return screen.getAllByLabelText("player.fullscreen").length;
+  };
+  afterEach(() => {
+    delete (Element.prototype as { requestFullscreen?: unknown }).requestFullscreen;
+  });
+
+  it("is offered where the browser can fullscreen an element", () => {
+    expect(maximised(true)).toBe(2);
+  });
+
+  it("is left out where it cannot", () => {
+    expect(maximised(false)).toBe(1);
+  });
+});

frontend/src/components/PlayerModal.tsx

@@ -57,7 +57,7 @@ import {
   formatCompact,
   relativeTime,
 } from "../lib/format";
-import { fullscreenElement } from "../lib/fullscreen";
+import { canFullscreenElements, fullscreenElement } from "../lib/fullscreen";
 import { dispatch, isActivationTarget, useKeyScope } from "../lib/keymap";
 import { useBackToClose } from "../lib/history";
 import ChannelNameLink from "./ChannelNameLink";
@@ -813,13 +813,18 @@ export default function PlayerModal({
                   </Button>
                 )}
                 <span className="h-4 w-px bg-white/20" />
-                <IconButton
-                  variant="overlay"
-                  onClick={toggleTrueFullscreen}
-                  label={isFullscreen ? t("player.exitFullscreen") : t("player.fullscreen")}
-                >
-                  {isFullscreen ? <Minimize /> : <Maximize />}
-                </IconButton>
+                {/* Absent where the browser cannot fullscreen an element (Brave on an iPad): there
+                    the window-filling view is the biggest, and YouTube's own button opens the
+                    system player. */}
+                {canFullscreenElements() && (
+                  <IconButton
+                    variant="overlay"
+                    onClick={toggleTrueFullscreen}
+                    label={isFullscreen ? t("player.exitFullscreen") : t("player.fullscreen")}
+                  >
+                    {isFullscreen ? <Minimize /> : <Maximize />}
+                  </IconButton>
+                )}
                 <Button
                   variant="overlay"
                   size="sm"

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

@@ -891,3 +891,33 @@ describe("the page under the player", () => {
     expect([wrap.style.width, wrap.style.height]).toEqual(["80%", "80%"]);
   });
 });
+
+// Brave on an iPad cannot fullscreen an element (it fakes `fullscreenEnabled`), and the button did
+// nothing there. It is shown only where the browser has the API on Element.prototype.
+describe("the fullscreen button", () => {
+  const withApi = (on: boolean) => {
+    if (on)
+      Object.defineProperty(Element.prototype, "requestFullscreen", {
+        configurable: true,
+        value: () => Promise.resolve(),
+      });
+    else delete (Element.prototype as { requestFullscreen?: unknown }).requestFullscreen;
+  };
+  afterEach(() => withApi(false));
+
+  it("is there where the browser can fullscreen an element", async () => {
+    withApi(true);
+    mount({ details: { A: item("A") } });
+    await playingAt("/media/A", 100);
+    expect(screen.queryByLabelText("plex.player.fullscreen")).not.toBeNull();
+  });
+
+  it("is left out where it cannot, whatever fullscreenEnabled claims", async () => {
+    withApi(false);
+    Object.defineProperty(document, "fullscreenEnabled", { configurable: true, value: true });
+    mount({ details: { A: item("A") } });
+    await playingAt("/media/A", 100);
+    expect(screen.queryByLabelText("plex.player.fullscreen")).toBeNull();
+    delete (document as { fullscreenEnabled?: unknown }).fullscreenEnabled;
+  });
+});

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

@@ -21,6 +21,12 @@ import { api, type PlexItemDetail } from "../lib/api";
 import { pushLayer, removeLayer } from "../lib/layerStack";
 
 beforeAll(() => {
+  // A browser that can fullscreen an element, as every desktop one can: the row's last control is
+  // the fullscreen button there (jsdom has no Fullscreen API, so the button would be left out).
+  Object.defineProperty(Element.prototype, "requestFullscreen", {
+    configurable: true,
+    value: () => Promise.resolve(),
+  });
   class Stub {
     observe() {}
     unobserve() {}

frontend/src/components/PlexPlayer.tsx

@@ -70,7 +70,7 @@ import {
   usePlexTracks,
   useWallClock,
 } from "../lib/plexPlayerHooks";
-import { fullscreenElement } from "../lib/fullscreen";
+import { canFullscreenElements, fullscreenElement } from "../lib/fullscreen";
 import {
   dispatch,
   isActivationTarget,
@@ -1632,9 +1632,13 @@ export default function PlexPlayer({ itemId, onClose, queue, fromStart = false }
                 />
               )}
             </div>
-            <Ctrl label={t("plex.player.fullscreen")} onClick={toggleFs} align="end">
-              {fs ? <Minimize className="w-5 h-5" /> : <Maximize className="w-5 h-5" />}
-            </Ctrl>
+            {/* Absent where the browser cannot fullscreen an element (Brave on an iPad): the button
+                did nothing there, and the windowed player already fills the window. */}
+            {canFullscreenElements() && (
+              <Ctrl label={t("plex.player.fullscreen")} onClick={toggleFs} align="end">
+                {fs ? <Minimize className="w-5 h-5" /> : <Maximize className="w-5 h-5" />}
+              </Ctrl>
+            )}
           </div>
         </div>
       </div>