peter
a0e9912886
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.
115 lines
3.0 KiB
TypeScript
115 lines
3.0 KiB
TypeScript
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>
|
|
);
|
|
}
|