refactor(plex): extract PlexPlayer leaf hooks (clock/fullscreen/chrome)

S4a-2 of the PlexPlayer decomposition. Move three self-contained,
byte-equivalent behaviours into lib/plexPlayerHooks.ts: useWallClock
(15s top-bar clock), useFullscreen (wrapper fs toggle + reactive flag),
and useControlsVisibility (auto-hiding control bar + wake). The ref
mirrors the hooks read (barAutoHide/menuOpen/video-paused) stay in the
component and are passed in, so the timer sees fresh state. No behaviour
change; verified by self-E2E (real HLS playback: clock renders, controls
auto-hide after 3s while playing, wake restores + stays while paused).

frontend/src/lib/plexPlayerHooks.ts

@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useRef, useState, type RefObject } from "react";
+import {
+  exitFullscreen,
+  fullscreenElement,
+  onFullscreenChange,
+  requestFullscreen,
+} from "./fullscreen";
+
+// A live wall clock for the top bar, re-rendered every 15s (minute resolution is enough for the
+// HH:MM display, and a coarse tick keeps the whole player from re-rendering each second).
+export function useWallClock(): Date {
+  const [now, setNow] = useState(() => new Date());
+  useEffect(() => {
+    const iv = window.setInterval(() => setNow(new Date()), 15000);
+    return () => window.clearInterval(iv);
+  }, []);
+  return now;
+}
+
+// Fullscreen toggle for `el` (the player wrapper) + a reactive `fs` flag.
+// Via lib/fullscreen, not the raw API: WebKit (Safari/iPadOS) ships only the prefixed spelling, so
+// reading `document.fullscreenElement` alone made this player believe it is never fullscreen — the
+// button did nothing, `fs` never flipped, and Escape read "not fullscreen" as permission to close the
+// whole player instead of just leaving fullscreen.
+export function useFullscreen(wrapRef: RefObject<HTMLElement | null>): {
+  fs: boolean;
+  toggleFs: () => void;
+} {
+  const [fs, setFs] = useState(false);
+  const toggleFs = useCallback(() => {
+    const el = wrapRef.current;
+    if (!el) return;
+    if (fullscreenElement()) exitFullscreen();
+    else requestFullscreen(el);
+  }, [wrapRef]);
+  useEffect(() => onFullscreenChange(() => setFs(!!fullscreenElement())), []);
+  return { fs, toggleFs };
+}
+
+// Auto-hiding control bar: `uiVisible` drives the chrome opacity; `wake` reveals it and (re)arms the
+// 3s hide timer. Reads the caller's live refs so the timer callback sees fresh state without a
+// closure rebuild: barAutoHide (per-user "never auto-hide" setting), whether a menu is open (keep the
+// bar up so it can't vanish mid-choice), and the <video> paused state (a paused video keeps the bar).
+export function useControlsVisibility(opts: {
+  barAutoHideRef: RefObject<boolean>;
+  menuOpenRef: RefObject<boolean>;
+  videoRef: RefObject<HTMLVideoElement | null>;
+}): { uiVisible: boolean; wake: () => void } {
+  const { barAutoHideRef, menuOpenRef, videoRef } = opts;
+  const [uiVisible, setUiVisible] = useState(true);
+  const hideTimer = useRef<number | null>(null);
+  const wake = useCallback(() => {
+    setUiVisible(true);
+    if (hideTimer.current) window.clearTimeout(hideTimer.current);
+    if (!barAutoHideRef.current) return; // per-user setting: never auto-hide the control bar
+    hideTimer.current = window.setTimeout(() => {
+      // Keep the controls up while the audio/subtitle menu is open, else it would vanish mid-choice.
+      if (!videoRef.current?.paused && !menuOpenRef.current) setUiVisible(false);
+    }, 3000);
+  }, [barAutoHideRef, menuOpenRef, videoRef]);
+  return { uiVisible, wake };
+}