12e610659e
The hover-scrub thumbnail was centered on the cursor with a fixed -translate-x-1/2, so near the filmstrip's right (or left) edge it overflowed the modal and triggered a horizontal scrollbar. Now its left edge is clamped to [0, trackW - popoverW] so it shifts inward at the edges and stays fully within the viewport. Verified at both edges in a real browser.
571 lines
23 KiB
TypeScript
571 lines
23 KiB
TypeScript
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { Crop, Eye, EyeOff, Pause, Play, Scissors, SplitSquareHorizontal, Loader2, X } from "lucide-react";
|
|
import clsx from "clsx";
|
|
import Modal from "./Modal";
|
|
import { notify } from "../lib/notifications";
|
|
import { api, type DownloadJob, type EditSpec } from "../lib/api";
|
|
|
|
// mm:ss.d timecode <-> seconds.
|
|
function tc(s: number): string {
|
|
if (!isFinite(s) || s < 0) s = 0;
|
|
const m = Math.floor(s / 60);
|
|
return `${m}:${(s - m * 60).toFixed(1).padStart(4, "0")}`;
|
|
}
|
|
function parseTc(v: string): number | null {
|
|
v = v.trim();
|
|
if (!v) return null;
|
|
if (v.includes(":")) {
|
|
const [m, s] = v.split(":");
|
|
const mm = Number(m), ss = Number(s);
|
|
if (!isFinite(mm) || !isFinite(ss)) return null;
|
|
return mm * 60 + ss;
|
|
}
|
|
const n = Number(v);
|
|
return isFinite(n) ? n : null;
|
|
}
|
|
|
|
type Seg = { id: number; start: number; end: number; keep: boolean };
|
|
type Frac = { x: number; y: number; w: number; h: number };
|
|
type Drag = { type: "seek" } | { type: "boundary"; bi: number };
|
|
|
|
const btn = "px-3 py-1.5 rounded-lg text-sm font-medium transition disabled:opacity-50";
|
|
const inputCls =
|
|
"w-full rounded-lg bg-surface border border-border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent/40";
|
|
const numCls =
|
|
"w-24 rounded-md bg-surface border border-border px-2 py-1 text-sm tabular-nums focus:outline-none focus:ring-2 focus:ring-accent/40";
|
|
const MIN_SEG = 0.1;
|
|
|
|
export default function VideoEditor({ job, onClose }: { job: DownloadJob; onClose: () => void }) {
|
|
const { t } = useTranslation();
|
|
const qc = useQueryClient();
|
|
const videoRef = useRef<HTMLVideoElement>(null);
|
|
const trackRef = useRef<HTMLDivElement>(null);
|
|
const sid = useRef(1);
|
|
const nid = () => sid.current++;
|
|
|
|
const srcDur = job.asset?.duration_s ?? 0;
|
|
const [duration, setDuration] = useState(srcDur);
|
|
const [current, setCurrent] = useState(0);
|
|
const [playing, setPlaying] = useState(false);
|
|
const [trackW, setTrackW] = useState(0);
|
|
|
|
// The cut-list: contiguous segments covering [0, duration]. Starts as the whole video, kept.
|
|
const [segments, setSegments] = useState<Seg[]>([{ id: 0, start: 0, end: srcDur, keep: true }]);
|
|
const [selId, setSelId] = useState(0);
|
|
const [output, setOutput] = useState<"separate" | "join">("separate");
|
|
const [cropOn, setCropOn] = useState(false);
|
|
const [crop, setCrop] = useState<Frac>({ x: 0.1, y: 0.1, w: 0.8, h: 0.8 });
|
|
const [accurate, setAccurate] = useState(true);
|
|
const [name, setName] = useState("");
|
|
|
|
const fileUrl = useMemo(() => api.downloadFileUrl(job.id), [job.id]);
|
|
const aspect =
|
|
(job.asset?.width && job.asset?.height ? job.asset.width / job.asset.height : 0) || 16 / 9;
|
|
const sb = useQuery({
|
|
queryKey: ["storyboard", job.id],
|
|
queryFn: () => api.downloadStoryboard(job.id),
|
|
staleTime: Infinity,
|
|
retry: false,
|
|
});
|
|
const strip = sb.data?.available ? sb.data : null;
|
|
const defaultName = job.display_name || job.asset?.title || "";
|
|
|
|
// Measure the track for aspect-correct filmstrip tiling.
|
|
useEffect(() => {
|
|
const el = trackRef.current;
|
|
if (!el || typeof ResizeObserver === "undefined") return;
|
|
const ro = new ResizeObserver(() => setTrackW(el.clientWidth));
|
|
ro.observe(el);
|
|
setTrackW(el.clientWidth);
|
|
return () => ro.disconnect();
|
|
}, []);
|
|
|
|
const onLoaded = () => {
|
|
const v = videoRef.current;
|
|
if (!v) return;
|
|
const d = v.duration && isFinite(v.duration) ? v.duration : srcDur;
|
|
setDuration(d);
|
|
setSegments((s) => (s.length === 1 && s[0].end <= 0 ? [{ id: 0, start: 0, end: d, keep: true }] : s));
|
|
};
|
|
const onTimeUpdate = () => {
|
|
const v = videoRef.current;
|
|
if (v) setCurrent(v.currentTime);
|
|
};
|
|
const seek = (s: number) => {
|
|
const v = videoRef.current;
|
|
if (v) v.currentTime = Math.max(0, Math.min(duration, s));
|
|
};
|
|
const playPause = () => {
|
|
const v = videoRef.current;
|
|
if (!v) return;
|
|
v.paused ? v.play() : v.pause();
|
|
};
|
|
|
|
// --- cut-list mutations ---
|
|
const boundaries = useMemo(() => segments.slice(0, -1).map((s) => s.end), [segments]);
|
|
const splitAtPlayhead = () => {
|
|
const time = current;
|
|
setSegments((segs) => {
|
|
const i = segs.findIndex((s) => time > s.start + MIN_SEG && time < s.end - MIN_SEG);
|
|
if (i < 0) return segs;
|
|
const s = segs[i];
|
|
const b: Seg = { id: nid(), start: time, end: s.end, keep: s.keep };
|
|
const next = [...segs.slice(0, i), { ...s, end: time }, b, ...segs.slice(i + 1)];
|
|
return next;
|
|
});
|
|
};
|
|
const moveBoundary = (bi: number, time: number) =>
|
|
setSegments((segs) => {
|
|
if (bi < 0 || bi >= segs.length - 1) return segs;
|
|
const lo = segs[bi].start + MIN_SEG;
|
|
const hi = segs[bi + 1].end - MIN_SEG;
|
|
const tt = Math.max(lo, Math.min(hi, time));
|
|
const copy = [...segs];
|
|
copy[bi] = { ...copy[bi], end: tt };
|
|
copy[bi + 1] = { ...copy[bi + 1], start: tt };
|
|
return copy;
|
|
});
|
|
const deleteBoundary = (bi: number) =>
|
|
setSegments((segs) => {
|
|
if (segs.length < 2) return segs;
|
|
const merged = { ...segs[bi], end: segs[bi + 1].end };
|
|
return [...segs.slice(0, bi), merged, ...segs.slice(bi + 2)];
|
|
});
|
|
const toggleKeep = (id: number) =>
|
|
setSegments((segs) => segs.map((s) => (s.id === id ? { ...s, keep: !s.keep } : s)));
|
|
|
|
// --- timeline drag (seek / boundary) + hover preview ---
|
|
const [drag, setDrag] = useState<Drag | null>(null);
|
|
const [hoverX, setHoverX] = useState<number | null>(null);
|
|
const timeAt = useCallback(
|
|
(clientX: number) => {
|
|
const el = trackRef.current;
|
|
if (!el) return 0;
|
|
const r = el.getBoundingClientRect();
|
|
return Math.max(0, Math.min(1, (clientX - r.left) / r.width)) * duration;
|
|
},
|
|
[duration]
|
|
);
|
|
useEffect(() => {
|
|
if (!drag) return;
|
|
const move = (e: PointerEvent) => {
|
|
const tt = timeAt(e.clientX);
|
|
if (drag.type === "seek") {
|
|
setCurrent(tt);
|
|
seek(tt);
|
|
} else moveBoundary(drag.bi, tt);
|
|
};
|
|
const up = () => setDrag(null);
|
|
window.addEventListener("pointermove", move);
|
|
window.addEventListener("pointerup", up);
|
|
return () => {
|
|
window.removeEventListener("pointermove", move);
|
|
window.removeEventListener("pointerup", up);
|
|
};
|
|
}, [drag, timeAt]);
|
|
|
|
// --- crop drag ---
|
|
const overlayRef = useRef<HTMLDivElement>(null);
|
|
const cropDrag = useRef<null | { mode: "move" | "resize"; px: number; py: number; orig: Frac }>(null);
|
|
const onCropDown = (e: React.PointerEvent, mode: "move" | "resize") => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
(e.target as Element).setPointerCapture?.(e.pointerId);
|
|
cropDrag.current = { mode, px: e.clientX, py: e.clientY, orig: { ...crop } };
|
|
};
|
|
useEffect(() => {
|
|
const move = (e: PointerEvent) => {
|
|
const d = cropDrag.current;
|
|
const el = overlayRef.current;
|
|
if (!d || !el) return;
|
|
const r = el.getBoundingClientRect();
|
|
const dx = (e.clientX - d.px) / r.width;
|
|
const dy = (e.clientY - d.py) / r.height;
|
|
if (d.mode === "move")
|
|
setCrop({
|
|
...d.orig,
|
|
x: Math.max(0, Math.min(1 - d.orig.w, d.orig.x + dx)),
|
|
y: Math.max(0, Math.min(1 - d.orig.h, d.orig.y + dy)),
|
|
});
|
|
else
|
|
setCrop({
|
|
...d.orig,
|
|
w: Math.max(0.05, Math.min(1 - d.orig.x, d.orig.w + dx)),
|
|
h: Math.max(0.05, Math.min(1 - d.orig.y, d.orig.h + dy)),
|
|
});
|
|
};
|
|
const up = () => (cropDrag.current = null);
|
|
window.addEventListener("pointermove", move);
|
|
window.addEventListener("pointerup", up);
|
|
return () => {
|
|
window.removeEventListener("pointermove", move);
|
|
window.removeEventListener("pointerup", up);
|
|
};
|
|
}, []);
|
|
|
|
// --- filmstrip tile helpers (percentage sprite positioning; aspect-correct cells) ---
|
|
const pct = (v: number) => `${(duration ? (v / duration) * 100 : 0).toFixed(3)}%`;
|
|
const tileStyle = (idx: number): React.CSSProperties => {
|
|
const cols = strip?.cols ?? 12;
|
|
const rows = strip?.rows ?? 1;
|
|
const i = Math.max(0, Math.min((strip?.count ?? 1) - 1, idx));
|
|
const col = i % cols;
|
|
const row = Math.floor(i / cols);
|
|
return {
|
|
backgroundImage: `url(${api.storyboardImageUrl(job.id)})`,
|
|
backgroundSize: `${cols * 100}% ${rows * 100}%`,
|
|
backgroundPosition: `${cols > 1 ? (col / (cols - 1)) * 100 : 0}% ${rows > 1 ? (row / (rows - 1)) * 100 : 0}%`,
|
|
};
|
|
};
|
|
const stripCells = strip && trackW ? Math.max(1, Math.floor(trackW / (44 * aspect))) : 0;
|
|
const hoverTime = hoverX != null ? timeAt(hoverX) : null;
|
|
// Clamp the hover-scrub popover inside the track so it never overflows the modal (which would
|
|
// add a horizontal scrollbar): center it on the cursor, but keep both edges within [0, trackW].
|
|
const HOVER_W = 148;
|
|
const hoverLeft =
|
|
hoverX != null
|
|
? Math.max(
|
|
0,
|
|
Math.min(
|
|
Math.max(0, (trackW || HOVER_W) - HOVER_W),
|
|
hoverX - (trackRef.current?.getBoundingClientRect().left ?? 0) - HOVER_W / 2
|
|
)
|
|
)
|
|
: 0;
|
|
|
|
// --- create ---
|
|
const kept = segments.filter((s) => s.keep);
|
|
const keptDur = kept.reduce((a, s) => a + (s.end - s.start), 0);
|
|
const isFullSingle =
|
|
segments.length === 1 && kept.length === 1 && kept[0].start <= 0.01 && kept[0].end >= duration - 0.01;
|
|
const valid = kept.length >= 1 && keptDur >= MIN_SEG && (cropOn || !isFullSingle);
|
|
const willJoin = output === "join" && kept.length > 1;
|
|
const reencode = cropOn || (willJoin ? accurate : accurate);
|
|
|
|
const cropPx = (): { x: number; y: number; w: number; h: number } | undefined => {
|
|
const v = videoRef.current;
|
|
const vw = v?.videoWidth || job.asset?.width || 0;
|
|
const vh = v?.videoHeight || job.asset?.height || 0;
|
|
if (!cropOn || !vw || !vh) return undefined;
|
|
const even = (n: number) => Math.max(2, Math.round(n / 2) * 2);
|
|
return { x: even(crop.x * vw), y: even(crop.y * vh), w: even(crop.w * vw), h: even(crop.h * vh) };
|
|
};
|
|
|
|
const create = useMutation({
|
|
mutationFn: async () => {
|
|
const cp = cropPx();
|
|
const base = name.trim() || defaultName;
|
|
if (willJoin) {
|
|
const spec: EditSpec = {
|
|
segments: kept.map((s) => ({ start_s: +s.start.toFixed(3), end_s: +s.end.toFixed(3) })),
|
|
accurate,
|
|
};
|
|
if (cp) spec.crop = cp;
|
|
await api.enqueueEdit({ source_job_id: job.id, edit_spec: spec, display_name: name.trim() || undefined });
|
|
return { files: 1 };
|
|
}
|
|
const N = kept.length;
|
|
for (let i = 0; i < N; i++) {
|
|
const s = kept[i];
|
|
const spec: EditSpec = { trim: { start_s: +s.start.toFixed(3), end_s: +s.end.toFixed(3) } };
|
|
if (cp) spec.crop = cp;
|
|
else spec.accurate = accurate;
|
|
const dn = N > 1 ? `${base} (${i + 1}/${N})` : name.trim() || undefined;
|
|
await api.enqueueEdit({ source_job_id: job.id, edit_spec: spec, display_name: dn });
|
|
}
|
|
return { files: N };
|
|
},
|
|
onSuccess: ({ files }) => {
|
|
qc.invalidateQueries({ queryKey: ["downloads"] });
|
|
qc.invalidateQueries({ queryKey: ["download-usage"] });
|
|
notify({ level: "success", message: t("editor.created", { count: files }) });
|
|
onClose();
|
|
},
|
|
onError: () => notify({ level: "error", message: t("editor.failed") }),
|
|
});
|
|
|
|
const sel = segments.find((s) => s.id === selId) ?? segments[0];
|
|
const selIdx = segments.findIndex((s) => s.id === sel?.id);
|
|
|
|
return (
|
|
<Modal title={t("editor.title", { name: defaultName })} onClose={onClose} maxWidth="max-w-3xl">
|
|
<div className="space-y-3">
|
|
{/* video + crop overlay */}
|
|
<div className="relative bg-black rounded-lg overflow-hidden select-none">
|
|
<video
|
|
ref={videoRef}
|
|
src={fileUrl}
|
|
onLoadedMetadata={onLoaded}
|
|
onTimeUpdate={onTimeUpdate}
|
|
onPlay={() => setPlaying(true)}
|
|
onPause={() => setPlaying(false)}
|
|
className="w-full max-h-[42vh] mx-auto block"
|
|
playsInline
|
|
/>
|
|
{cropOn && (
|
|
<div ref={overlayRef} className="absolute inset-0">
|
|
<div
|
|
className="absolute border-2 border-accent cursor-move"
|
|
style={{
|
|
left: `${crop.x * 100}%`,
|
|
top: `${crop.y * 100}%`,
|
|
width: `${crop.w * 100}%`,
|
|
height: `${crop.h * 100}%`,
|
|
boxShadow: "0 0 0 9999px rgba(0,0,0,0.5)",
|
|
}}
|
|
onPointerDown={(e) => onCropDown(e, "move")}
|
|
>
|
|
<div
|
|
className="absolute -right-1.5 -bottom-1.5 w-4 h-4 rounded-sm bg-accent cursor-nwse-resize"
|
|
onPointerDown={(e) => onCropDown(e, "resize")}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* transport */}
|
|
<div className="flex items-center gap-3">
|
|
<button onClick={playPause} className="p-2 rounded-lg bg-surface hover:bg-card transition" title={t("editor.playPause")}>
|
|
{playing ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
|
|
</button>
|
|
<div className="text-xs text-muted tabular-nums">{tc(current)} / {tc(duration)}</div>
|
|
<div className="flex-1" />
|
|
<button onClick={splitAtPlayhead} className={clsx(btn, "bg-surface hover:bg-card inline-flex items-center gap-1.5")}>
|
|
<SplitSquareHorizontal className="w-4 h-4" /> {t("editor.splitHere")}
|
|
</button>
|
|
</div>
|
|
|
|
{/* timeline: filmstrip + segments (keep/drop tint) + markers + playhead + hover preview */}
|
|
<div className="relative">
|
|
<div
|
|
ref={trackRef}
|
|
className="relative h-14 rounded-lg overflow-hidden bg-surface border border-border cursor-pointer"
|
|
onPointerDown={(e) => {
|
|
setDrag({ type: "seek" });
|
|
seek(timeAt(e.clientX));
|
|
}}
|
|
onPointerMove={(e) => setHoverX(e.clientX)}
|
|
onPointerLeave={() => setHoverX(null)}
|
|
>
|
|
{/* aspect-correct filmstrip */}
|
|
{stripCells > 0 && (
|
|
<div className="absolute inset-0 flex pointer-events-none">
|
|
{Array.from({ length: stripCells }).map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="h-full flex-1"
|
|
style={tileStyle(Math.round(((i + 0.5) / stripCells) * ((strip!.count ?? 1) - 1)))}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
{/* segment tint: dropped = dimmed + hatched */}
|
|
{segments.map((s, i) => (
|
|
<div
|
|
key={s.id}
|
|
className={clsx(
|
|
"absolute inset-y-0 border-r border-black/40 last:border-r-0",
|
|
s.keep ? "bg-accent/10" : "bg-black/60",
|
|
s.id === selId && "ring-2 ring-inset ring-white/70"
|
|
)}
|
|
style={{
|
|
left: pct(s.start),
|
|
width: pct(s.end - s.start),
|
|
...(s.keep
|
|
? {}
|
|
: {
|
|
backgroundImage:
|
|
"repeating-linear-gradient(45deg, rgba(0,0,0,0.55) 0 6px, rgba(0,0,0,0.25) 6px 12px)",
|
|
}),
|
|
}}
|
|
onPointerDown={() => setSelId(s.id)}
|
|
title={s.keep ? t("editor.keptSeg") : t("editor.droppedSeg")}
|
|
>
|
|
{/* keep/drop toggle */}
|
|
<button
|
|
onPointerDown={(e) => {
|
|
e.stopPropagation();
|
|
toggleKeep(s.id);
|
|
}}
|
|
className={clsx(
|
|
"absolute top-1 left-1 p-0.5 rounded bg-black/50 backdrop-blur-sm",
|
|
s.keep ? "text-accent" : "text-muted"
|
|
)}
|
|
title={s.keep ? t("editor.drop") : t("editor.keep")}
|
|
>
|
|
{s.keep ? <Eye className="w-3.5 h-3.5" /> : <EyeOff className="w-3.5 h-3.5" />}
|
|
</button>
|
|
</div>
|
|
))}
|
|
{/* draggable boundary markers */}
|
|
{boundaries.map((b, bi) => (
|
|
<div key={bi} className="absolute inset-y-0 -ml-1.5 w-3 flex items-center justify-center z-10" style={{ left: pct(b) }}>
|
|
<div
|
|
className="w-1 h-full bg-white/90 cursor-ew-resize rounded"
|
|
onPointerDown={(e) => {
|
|
e.stopPropagation();
|
|
setDrag({ type: "boundary", bi });
|
|
}}
|
|
/>
|
|
<button
|
|
onPointerDown={(e) => {
|
|
e.stopPropagation();
|
|
deleteBoundary(bi);
|
|
}}
|
|
className="absolute -top-0 -right-2 p-0.5 rounded-full bg-black/70 text-muted hover:text-red-400"
|
|
title={t("editor.removeCut")}
|
|
>
|
|
<X className="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
{/* playhead */}
|
|
<div className="absolute inset-y-0 w-0.5 bg-white pointer-events-none z-20" style={{ left: pct(current) }} />
|
|
</div>
|
|
|
|
{/* hover-scrub thumbnail */}
|
|
{strip && hoverTime != null && (
|
|
<div
|
|
className="absolute bottom-full mb-2 pointer-events-none z-30 rounded-md overflow-hidden border border-border shadow-xl bg-black"
|
|
style={{ left: hoverLeft, width: HOVER_W }}
|
|
>
|
|
<div style={{ width: HOVER_W, height: HOVER_W / aspect, ...tileStyle(Math.floor(hoverTime / (strip.interval_s || 1))) }} />
|
|
<div className="text-[10px] text-center text-muted py-0.5 tabular-nums">{tc(hoverTime)}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* selected-segment editor */}
|
|
{sel && (
|
|
<div className="flex flex-wrap items-center gap-2 text-sm rounded-lg bg-card/40 px-3 py-2">
|
|
<span className="font-medium">{t("editor.segment", { n: selIdx + 1 })}</span>
|
|
<button
|
|
onClick={() => toggleKeep(sel.id)}
|
|
className={clsx(
|
|
"inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium",
|
|
sel.keep ? "bg-accent/15 text-accent" : "bg-surface text-muted"
|
|
)}
|
|
>
|
|
{sel.keep ? <Eye className="w-3.5 h-3.5" /> : <EyeOff className="w-3.5 h-3.5" />}
|
|
{sel.keep ? t("editor.kept") : t("editor.dropped")}
|
|
</button>
|
|
<div className="flex-1" />
|
|
<label className="flex items-center gap-1 text-muted">
|
|
{t("editor.in")}
|
|
<input
|
|
defaultValue={tc(sel.start)}
|
|
key={`s-${sel.id}-${sel.start}`}
|
|
disabled={selIdx === 0}
|
|
onBlur={(e) => {
|
|
const v = parseTc(e.target.value);
|
|
if (v != null && selIdx > 0) moveBoundary(selIdx - 1, v);
|
|
}}
|
|
className={numCls}
|
|
/>
|
|
</label>
|
|
<label className="flex items-center gap-1 text-muted">
|
|
{t("editor.out")}
|
|
<input
|
|
defaultValue={tc(sel.end)}
|
|
key={`e-${sel.id}-${sel.end}`}
|
|
disabled={selIdx === segments.length - 1}
|
|
onBlur={(e) => {
|
|
const v = parseTc(e.target.value);
|
|
if (v != null && selIdx < segments.length - 1) moveBoundary(selIdx, v);
|
|
}}
|
|
className={numCls}
|
|
/>
|
|
</label>
|
|
<span className="text-xs text-muted tabular-nums w-16 text-right">{tc(sel.end - sel.start)}</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* output mode + summary */}
|
|
<div className="flex flex-wrap items-center gap-2 text-sm">
|
|
<span className="text-muted">{t("editor.output.label")}:</span>
|
|
{(["separate", "join"] as const).map((m) => (
|
|
<button
|
|
key={m}
|
|
onClick={() => setOutput(m)}
|
|
disabled={m === "join" && kept.length < 2}
|
|
className={clsx(
|
|
"px-3 py-1.5 rounded-lg border transition disabled:opacity-40",
|
|
output === m ? "border-accent bg-accent/10 text-accent" : "border-border text-muted hover:text-fg"
|
|
)}
|
|
>
|
|
{t(`editor.output.${m}`)}
|
|
</button>
|
|
))}
|
|
<div className="flex-1" />
|
|
<span className="text-xs text-muted">
|
|
{t("editor.keptSummary", { n: kept.length, dur: tc(keptDur) })}
|
|
</span>
|
|
</div>
|
|
|
|
{/* crop + precision */}
|
|
<div className="grid sm:grid-cols-2 gap-3">
|
|
<button
|
|
onClick={() => setCropOn((v) => !v)}
|
|
className={clsx(
|
|
"flex items-center gap-2 px-3 py-2 rounded-lg border text-sm transition",
|
|
cropOn ? "border-accent text-accent bg-accent/10" : "border-border text-muted hover:text-fg"
|
|
)}
|
|
>
|
|
<Crop className="w-4 h-4" /> {cropOn ? t("editor.cropOn") : t("editor.cropOff")}
|
|
</button>
|
|
{!cropOn ? (
|
|
<div className="flex gap-2">
|
|
{(["accurate", "fast"] as const).map((m) => {
|
|
const on = (m === "accurate") === accurate;
|
|
return (
|
|
<button
|
|
key={m}
|
|
onClick={() => setAccurate(m === "accurate")}
|
|
className={clsx(
|
|
"flex-1 px-3 py-2 rounded-lg border text-left transition",
|
|
on ? "border-accent bg-accent/10" : "border-border hover:border-muted"
|
|
)}
|
|
title={t(`editor.${m}.hint`)}
|
|
>
|
|
<div className={clsx("text-sm font-medium", on ? "text-accent" : "text-fg")}>{t(`editor.${m}.label`)}</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center px-3 text-xs text-muted">{t("editor.cropReencode")}</div>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">{t("editor.nameLabel")}</label>
|
|
<input value={name} onChange={(e) => setName(e.target.value)} placeholder={defaultName} className={inputCls} />
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between pt-1">
|
|
<span className="text-xs text-muted">{reencode ? t("editor.willReencode") : t("editor.willCopy")}</span>
|
|
<div className="flex gap-2">
|
|
<button onClick={onClose} className={clsx(btn, "text-muted hover:text-fg hover:bg-surface")}>
|
|
{t("common.cancel")}
|
|
</button>
|
|
<button
|
|
onClick={() => create.mutate()}
|
|
disabled={!valid || create.isPending}
|
|
className={clsx(btn, "bg-accent text-accent-fg hover:opacity-90 inline-flex items-center gap-1.5")}
|
|
>
|
|
{create.isPending ? <Loader2 className="w-4 h-4 animate-spin" /> : <Scissors className="w-4 h-4" />}
|
|
{willJoin
|
|
? t("editor.createJoin")
|
|
: kept.length > 1
|
|
? t("editor.createN", { count: kept.length })
|
|
: t("editor.create")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|