427 lines
16 KiB
TypeScript
427 lines
16 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, Pause, Play, Scissors, Loader2 } 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) — a compact timecode for the trim readout.
|
||
|
|
function tc(s: number): string {
|
||
|
|
if (!isFinite(s) || s < 0) s = 0;
|
||
|
|
const m = Math.floor(s / 60);
|
||
|
|
const sec = s - m * 60;
|
||
|
|
return `${m}:${sec.toFixed(1).padStart(4, "0")}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
type Frac = { x: number; y: number; w: number; h: number }; // crop as 0..1 fractions of the frame
|
||
|
|
|
||
|
|
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";
|
||
|
|
|
||
|
|
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 srcDur = job.asset?.duration_s ?? 0;
|
||
|
|
const [duration, setDuration] = useState(srcDur);
|
||
|
|
const [current, setCurrent] = useState(0);
|
||
|
|
const [playing, setPlaying] = useState(false);
|
||
|
|
|
||
|
|
const [start, setStart] = useState(0);
|
||
|
|
const [end, setEnd] = useState(srcDur);
|
||
|
|
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 [split, setSplit] = useState(1);
|
||
|
|
const [name, setName] = useState("");
|
||
|
|
|
||
|
|
const fileUrl = useMemo(() => api.downloadFileUrl(job.id), [job.id]);
|
||
|
|
const sb = useQuery({
|
||
|
|
queryKey: ["storyboard", job.id],
|
||
|
|
queryFn: () => api.downloadStoryboard(job.id),
|
||
|
|
staleTime: Infinity,
|
||
|
|
retry: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
// Keep end pinned to the real duration until the user narrows it.
|
||
|
|
const onLoaded = () => {
|
||
|
|
const v = videoRef.current;
|
||
|
|
if (!v) return;
|
||
|
|
const d = v.duration && isFinite(v.duration) ? v.duration : srcDur;
|
||
|
|
setDuration(d);
|
||
|
|
setEnd((e) => (e <= 0 || e > d ? d : e));
|
||
|
|
};
|
||
|
|
|
||
|
|
// Pause at the out-point when previewing the selection.
|
||
|
|
const onTimeUpdate = () => {
|
||
|
|
const v = videoRef.current;
|
||
|
|
if (!v) return;
|
||
|
|
setCurrent(v.currentTime);
|
||
|
|
if (playing && v.currentTime >= end) {
|
||
|
|
v.pause();
|
||
|
|
v.currentTime = end;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
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;
|
||
|
|
if (v.paused) {
|
||
|
|
if (v.currentTime < start || v.currentTime >= end) v.currentTime = start;
|
||
|
|
v.play();
|
||
|
|
} else {
|
||
|
|
v.pause();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// --- timeline drag (in/out handles + scrub) ---
|
||
|
|
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]
|
||
|
|
);
|
||
|
|
|
||
|
|
const [drag, setDrag] = useState<null | "start" | "end" | "seek">(null);
|
||
|
|
const onTrackDown = (e: React.PointerEvent, which: "start" | "end" | "seek") => {
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
(e.target as Element).setPointerCapture?.(e.pointerId);
|
||
|
|
setDrag(which);
|
||
|
|
if (which === "seek") seek(timeAt(e.clientX));
|
||
|
|
};
|
||
|
|
useEffect(() => {
|
||
|
|
if (!drag) return;
|
||
|
|
const move = (e: PointerEvent) => {
|
||
|
|
const tt = timeAt(e.clientX);
|
||
|
|
if (drag === "start") setStart(Math.min(tt, end - 0.1));
|
||
|
|
else if (drag === "end") setEnd(Math.max(tt, start + 0.1));
|
||
|
|
else {
|
||
|
|
setCurrent(tt);
|
||
|
|
seek(tt);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const up = () => setDrag(null);
|
||
|
|
window.addEventListener("pointermove", move);
|
||
|
|
window.addEventListener("pointerup", up);
|
||
|
|
return () => {
|
||
|
|
window.removeEventListener("pointermove", move);
|
||
|
|
window.removeEventListener("pointerup", up);
|
||
|
|
};
|
||
|
|
}, [drag, timeAt, start, end]);
|
||
|
|
|
||
|
|
// --- crop drag (move body + resize corner), all in 0..1 frame fractions ---
|
||
|
|
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);
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// --- create ---
|
||
|
|
const pct = (v: number) => `${(duration ? (v / duration) * 100 : 0).toFixed(3)}%`;
|
||
|
|
const selDur = Math.max(0, end - start);
|
||
|
|
const reencode = cropOn || 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;
|
||
|
|
// Force even dimensions — libx264 requires them.
|
||
|
|
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 n = Math.max(1, Math.min(20, Math.round(split)));
|
||
|
|
const cp = cropPx();
|
||
|
|
const seg = selDur / n;
|
||
|
|
const base = name.trim();
|
||
|
|
for (let i = 0; i < n; i++) {
|
||
|
|
const s = start + seg * i;
|
||
|
|
const e = i === n - 1 ? end : s + seg;
|
||
|
|
const spec: EditSpec = { trim: { start_s: +s.toFixed(3), end_s: +e.toFixed(3) } };
|
||
|
|
if (cp) spec.crop = cp;
|
||
|
|
else spec.accurate = accurate;
|
||
|
|
const dn = n > 1 ? `${base || defaultName} (${i + 1}/${n})` : base || undefined;
|
||
|
|
await api.enqueueEdit({ source_job_id: job.id, edit_spec: spec, display_name: dn });
|
||
|
|
}
|
||
|
|
return n;
|
||
|
|
},
|
||
|
|
onSuccess: (n) => {
|
||
|
|
qc.invalidateQueries({ queryKey: ["downloads"] });
|
||
|
|
qc.invalidateQueries({ queryKey: ["download-usage"] });
|
||
|
|
notify({ level: "success", message: t("editor.created", { count: n }) });
|
||
|
|
onClose();
|
||
|
|
},
|
||
|
|
onError: () => notify({ level: "error", message: t("editor.failed") }),
|
||
|
|
});
|
||
|
|
|
||
|
|
const defaultName = job.display_name || job.asset?.title || "";
|
||
|
|
const valid = selDur >= 0.1 && (cropOn || start > 0 || end < duration - 0.01 || split > 1);
|
||
|
|
|
||
|
|
// filmstrip cell backgrounds via percentage sprite positioning (no pixel math needed).
|
||
|
|
const strip = sb.data?.available ? sb.data : null;
|
||
|
|
|
||
|
|
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-[46vh] mx-auto block"
|
||
|
|
playsInline
|
||
|
|
/>
|
||
|
|
{cropOn && (
|
||
|
|
<div ref={overlayRef} className="absolute inset-0">
|
||
|
|
{/* the box's 9999px boxShadow dims everything outside the crop rectangle */}
|
||
|
|
<div
|
||
|
|
className="absolute border-2 border-accent cursor-move bg-transparent"
|
||
|
|
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={() => setStart(Math.min(current, end - 0.1))} className={clsx(btn, "bg-surface hover:bg-card")}>
|
||
|
|
{t("editor.setIn")}
|
||
|
|
</button>
|
||
|
|
<button onClick={() => setEnd(Math.max(current, start + 0.1))} className={clsx(btn, "bg-surface hover:bg-card")}>
|
||
|
|
{t("editor.setOut")}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* timeline: filmstrip + selection + handles + playhead */}
|
||
|
|
<div
|
||
|
|
ref={trackRef}
|
||
|
|
className="relative h-12 rounded-lg overflow-hidden bg-surface border border-border cursor-pointer"
|
||
|
|
onPointerDown={(e) => onTrackDown(e, "seek")}
|
||
|
|
>
|
||
|
|
{strip && (
|
||
|
|
<div className="absolute inset-0 flex">
|
||
|
|
{Array.from({ length: strip.count ?? 0 }).map((_, i) => {
|
||
|
|
const cols = strip.cols ?? 12;
|
||
|
|
const rows = strip.rows ?? 1;
|
||
|
|
const col = i % cols;
|
||
|
|
const row = Math.floor(i / cols);
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key={i}
|
||
|
|
className="h-full flex-1"
|
||
|
|
style={{
|
||
|
|
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}%`,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{/* dim outside selection */}
|
||
|
|
<div className="absolute inset-y-0 left-0 bg-black/60" style={{ width: pct(start) }} />
|
||
|
|
<div className="absolute inset-y-0 right-0 bg-black/60" style={{ left: pct(end) }} />
|
||
|
|
{/* selection border */}
|
||
|
|
<div
|
||
|
|
className="absolute inset-y-0 border-x-2 border-accent pointer-events-none"
|
||
|
|
style={{ left: pct(start), right: `calc(100% - ${pct(end)})` }}
|
||
|
|
/>
|
||
|
|
{/* handles */}
|
||
|
|
<div
|
||
|
|
className="absolute inset-y-0 -ml-1.5 w-3 cursor-ew-resize flex items-center justify-center"
|
||
|
|
style={{ left: pct(start) }}
|
||
|
|
onPointerDown={(e) => onTrackDown(e, "start")}
|
||
|
|
>
|
||
|
|
<div className="w-1 h-6 rounded bg-accent" />
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
className="absolute inset-y-0 -ml-1.5 w-3 cursor-ew-resize flex items-center justify-center"
|
||
|
|
style={{ left: pct(end) }}
|
||
|
|
onPointerDown={(e) => onTrackDown(e, "end")}
|
||
|
|
>
|
||
|
|
<div className="w-1 h-6 rounded bg-accent" />
|
||
|
|
</div>
|
||
|
|
{/* playhead */}
|
||
|
|
<div className="absolute inset-y-0 w-0.5 bg-white/80 pointer-events-none" style={{ left: pct(current) }} />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex items-center justify-between text-xs text-muted">
|
||
|
|
<span>{t("editor.in")}: {tc(start)}</span>
|
||
|
|
<span className="text-fg font-medium">{t("editor.selected")}: {tc(selDur)}</span>
|
||
|
|
<span>{t("editor.out")}: {tc(end)}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* options */}
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<label className="flex items-center gap-2 px-3 py-2 rounded-lg border border-border text-sm">
|
||
|
|
<Scissors className="w-4 h-4 text-muted shrink-0" />
|
||
|
|
<span className="text-muted">{t("editor.split")}</span>
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
min={1}
|
||
|
|
max={20}
|
||
|
|
value={split}
|
||
|
|
onChange={(e) => setSplit(Math.max(1, Math.min(20, Number(e.target.value) || 1)))}
|
||
|
|
className="w-16 rounded-md bg-surface border border-border px-2 py-1 text-sm"
|
||
|
|
/>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* cut precision (only meaningful for a trim-only edit; a crop always re-encodes) */}
|
||
|
|
{!cropOn ? (
|
||
|
|
<div className="flex gap-2 text-sm">
|
||
|
|
{(["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"
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<div className={clsx("font-medium", on ? "text-accent" : "text-fg")}>{t(`editor.${m}.label`)}</div>
|
||
|
|
<div className="text-xs text-muted mt-0.5">{t(`editor.${m}.hint`)}</div>
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<p className="text-xs text-muted">{t("editor.cropReencode")}</p>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<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" />}
|
||
|
|
{split > 1 ? t("editor.createN", { count: Math.round(split) }) : t("editor.create")}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Modal>
|
||
|
|
);
|
||
|
|
}
|