admin
96 lines
3.3 KiB
TypeScript
96 lines
3.3 KiB
TypeScript
"use client";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { ChevronDown } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export interface VariantOption {
|
|
/** Stable identifier (typically the absolute partIdx). */
|
|
id: number;
|
|
/** Short label shown in the chip and menu, e.g. `original`, `fixed`, `1080p`. */
|
|
label: string;
|
|
/** Full filename, shown muted in the menu for disambiguation. */
|
|
filename: string;
|
|
}
|
|
|
|
/**
|
|
* Compact dropdown that picks between alternate encodes of one part.
|
|
* Renders nothing when there's only one option — caller can still
|
|
* mount it unconditionally.
|
|
*/
|
|
export function VariantPicker({
|
|
options,
|
|
selectedId,
|
|
onChange,
|
|
}: {
|
|
options: VariantOption[];
|
|
selectedId: number;
|
|
onChange: (id: number) => void;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const onDocDown = (e: MouseEvent) => {
|
|
if (!ref.current) return;
|
|
if (!ref.current.contains(e.target as Node)) setOpen(false);
|
|
};
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") setOpen(false);
|
|
};
|
|
document.addEventListener("mousedown", onDocDown);
|
|
document.addEventListener("keydown", onKey);
|
|
return () => {
|
|
document.removeEventListener("mousedown", onDocDown);
|
|
document.removeEventListener("keydown", onKey);
|
|
};
|
|
}, [open]);
|
|
|
|
if (options.length <= 1) return null;
|
|
const selected = options.find((o) => o.id === selectedId) ?? options[0]!;
|
|
|
|
return (
|
|
<div ref={ref} className="relative shrink-0">
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen((v) => !v)}
|
|
title={`Switch encode (${options.length} available)`}
|
|
className={cn(
|
|
"inline-flex items-center gap-1 text-xs font-mono px-2.5 py-1 rounded-md border cursor-pointer",
|
|
"border-[var(--color-glass-border)] bg-[var(--color-glass)] hover:bg-[var(--color-glass-strong)] text-[var(--color-fg)]",
|
|
open && "bg-[var(--color-glass-strong)]",
|
|
)}
|
|
>
|
|
<ChevronDown className={cn("w-3 h-3 transition-transform", open && "rotate-180")} />
|
|
<span className="truncate max-w-[140px]">{selected.label}</span>
|
|
</button>
|
|
{open && (
|
|
<div
|
|
role="menu"
|
|
className="absolute right-0 bottom-full mb-1 z-30 min-w-[260px] max-w-[420px] rounded-lg border border-[var(--color-glass-border-strong)] bg-[var(--color-bg-1)] shadow-2xl p-1"
|
|
>
|
|
{options.map((o) => (
|
|
<button
|
|
key={o.id}
|
|
type="button"
|
|
role="menuitem"
|
|
onClick={() => { onChange(o.id); setOpen(false); }}
|
|
className={cn(
|
|
"w-full flex items-center gap-2 text-left text-xs px-2 py-1.5 rounded-md cursor-pointer",
|
|
o.id === selectedId
|
|
? "bg-[var(--color-cyan)]/15 text-[var(--color-cyan)]"
|
|
: "hover:bg-[var(--color-glass)] text-[var(--color-fg)]",
|
|
)}
|
|
>
|
|
<span className="font-mono shrink-0">{o.label}</span>
|
|
<span className="font-mono text-[10px] text-[var(--color-fg-dim)] truncate min-w-0">
|
|
{o.filename}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|