refactor(plex): extract PlexPlayer pure helpers + control primitives

S4a-1 of the PlexPlayer decomposition. Move the module-level pure helpers (prefs types/defaults, track-language resolution, subtitle shadow CSS, wall-clock formatting, HLS_SUB_LAG, fmt) to lib/plexPlayerPrefs.ts and the presentational building blocks (Ctrl/Slider/Toggle/PanelHead) to plexPlayerControls.tsx. No hooks or behaviour touched; PlexPlayer.tsx 1889->1661.
2026-08-12 00:06:21 +02:00
parent dd2118a547
commit a0e9912886
3 changed files with 254 additions and 240 deletions
@@ -0,0 +1,114 @@
+import { type ReactNode } from "react";
+import { RotateCcw } from "lucide-react";
+
+// --- settings-panel building blocks ------------------------------------------------------------
+export function PanelHead({ children }: { children: ReactNode }) {
+  return (
+    <div className="px-1 pt-2 pb-1 text-2xs uppercase tracking-wide text-white/50">{children}</div>
+  );
+}
+export function Slider({
+  label,
+  value,
+  min,
+  max,
+  step,
+  suffix,
+  onChange,
+  onReset,
+}: {
+  label: string;
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  suffix?: string;
+  onChange: (v: number) => void;
+  onReset?: () => void;
+}) {
+  return (
+    <div className="px-1 py-1">
+      <div className="mb-1 flex items-center justify-between text-[0.75rem] text-white/80">
+        <span>{label}</span>
+        <span className="flex items-center gap-1.5">
+          <span className="tabular-nums text-white/60">
+            {Number.isInteger(value) ? value : value.toFixed(1)}
+            {suffix ?? ""}
+          </span>
+          {onReset && (
+            <button onClick={onReset} className="text-white/40 hover:text-white" aria-label="reset">
+              <RotateCcw className="h-3 w-3" />
+            </button>
+          )}
+        </span>
+      </div>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+        className="w-full accent-accent"
+      />
+    </div>
+  );
+}
+export function Toggle({
+  label,
+  checked,
+  onChange,
+}: {
+  label: string;
+  checked: boolean;
+  onChange: (v: boolean) => void;
+}) {
+  return (
+    <label className="flex cursor-pointer items-center justify-between px-1 py-1.5">
+      <span className="text-[0.75rem] text-white/80">{label}</span>
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        className="h-4 w-4 accent-accent"
+      />
+    </label>
+  );
+}
+
+// A control button with a tooltip that opens ABOVE it (so it never clips off the bottom of the
+// viewport, unlike a native title tooltip on the bottom control bar).
+export function Ctrl({
+  label,
+  onClick,
+  disabled,
+  align = "center",
+  children,
+}: {
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+  // Tooltip horizontal anchor: "start"/"end" for edge buttons so it doesn't clip off the viewport.
+  align?: "start" | "center" | "end";
+  children: ReactNode;
+}) {
+  const pos =
+    align === "start" ? "left-0" : align === "end" ? "right-0" : "left-1/2 -translate-x-1/2";
+  return (
+    <div className="relative flex group/ctrl">
+      <button
+        onClick={onClick}
+        disabled={disabled}
+        aria-label={label}
+        className="p-1 hover:text-accent disabled:opacity-30"
+      >
+        {children}
+      </button>
+      <span
+        className={`pointer-events-none absolute bottom-full ${pos} mb-2 whitespace-nowrap rounded-sm bg-black/90 px-2 py-1 text-2xs text-white opacity-0 transition group-hover/ctrl:opacity-100`}
+      >
+        {label}
+      </span>
+    </div>
+  );
+}