562 lines
20 KiB
TypeScript
562 lines
20 KiB
TypeScript
"use client";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { captionFont } from "@/lib/video-canvas/smart-edit/fonts";
|
|
import { loadCaptionFont } from "./CaptionFonts";
|
|
import { usePreviewGain } from "./usePreviewGain";
|
|
import {
|
|
editableCaptions,
|
|
defaultCaptionStyle,
|
|
type CaptionStyle,
|
|
planTimeline,
|
|
SECOND,
|
|
type EditPlan,
|
|
defaultVideoTransform,
|
|
type VideoTransform,
|
|
type TimelineCaption,
|
|
} from "@/lib/video-canvas/smart-edit/contract";
|
|
export function EditPreview({
|
|
plan,
|
|
time,
|
|
playing,
|
|
onTime,
|
|
onPlaying,
|
|
onError,
|
|
fit = false,
|
|
cover = false,
|
|
externalClock = false,
|
|
selectedClipId,
|
|
selectedCaptionId,
|
|
onSelectClip,
|
|
onSelectCaption,
|
|
onTransform,
|
|
onCaptionPosition,
|
|
}: {
|
|
fit?: boolean;
|
|
cover?: boolean;
|
|
externalClock?: boolean;
|
|
selectedClipId?: string;
|
|
selectedCaptionId?: string;
|
|
onSelectClip?: (id: string) => void;
|
|
onSelectCaption?: (id: string) => void;
|
|
onTransform?: (id: string, value: VideoTransform) => void;
|
|
onCaptionPosition?: (id: string, value: { x: number; y: number }) => void;
|
|
plan: EditPlan;
|
|
time: number;
|
|
playing: boolean;
|
|
onTime: (t: number) => void;
|
|
onPlaying: (v: boolean) => void;
|
|
onError: (s: string) => void;
|
|
}) {
|
|
const videos = useRef(new Map<string, HTMLVideoElement>()),
|
|
music = useRef<HTMLAudioElement | null>(null),
|
|
audios = useRef(new Map<string, HTMLAudioElement>()),
|
|
latest = useRef({ time, plan, onTime, onPlaying });
|
|
latest.current = { time, plan, onTime, onPlaying };
|
|
const fontIds = [
|
|
...new Set(
|
|
editableCaptions(plan)
|
|
.map((c) => c.style?.fontFamily)
|
|
.filter(Boolean),
|
|
),
|
|
].join(",");
|
|
useEffect(() => {
|
|
let canceled = false;
|
|
void Promise.all(
|
|
[
|
|
...new Set([...fontIds.split(",").filter(Boolean), ...(fontIds ? ["source-han"] : [])]),
|
|
].map(loadCaptionFont),
|
|
).catch(() => {
|
|
if (!canceled) onError("字幕字体加载失败，请检查网络后重试");
|
|
});
|
|
return () => {
|
|
canceled = true;
|
|
};
|
|
}, [fontIds]);
|
|
const audioGain = usePreviewGain(plan, onError);
|
|
const frameRef = useRef<HTMLDivElement>(null);
|
|
const [frameSize, setFrameSize] = useState({ width: 0, height: 0 });
|
|
useEffect(() => {
|
|
const el = frameRef.current;
|
|
if (!el) return;
|
|
const observer = new ResizeObserver(([entry]) =>
|
|
setFrameSize({ width: entry.contentRect.width, height: entry.contentRect.height }),
|
|
);
|
|
observer.observe(el);
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
const timeline = planTimeline(plan),
|
|
visibleTime = Math.min(time * SECOND, timeline.duration - 1),
|
|
current = timeline.clips.filter(
|
|
(c) => visibleTime >= c.renderStart && visibleTime < c.renderEnd,
|
|
),
|
|
subs = plan.subtitles
|
|
? editableCaptions(plan).filter((s) => time * SECOND >= s.start && time * SECOND < s.end)
|
|
: [];
|
|
useEffect(() => {
|
|
if (!playing || externalClock) return;
|
|
let frame = 0,
|
|
last = 0;
|
|
const tick = (now: number) => {
|
|
const state = latest.current;
|
|
if (last) {
|
|
const next = Math.min(
|
|
planTimeline(state.plan).duration / SECOND,
|
|
state.time + (now - last) / 1000,
|
|
);
|
|
state.onTime(next);
|
|
if (next >= planTimeline(state.plan).duration / SECOND) {
|
|
state.onPlaying(false);
|
|
return;
|
|
}
|
|
}
|
|
last = now;
|
|
frame = requestAnimationFrame(tick);
|
|
};
|
|
const hide = () => {
|
|
if (document.hidden) latest.current.onPlaying(false);
|
|
};
|
|
frame = requestAnimationFrame(tick);
|
|
document.addEventListener("visibilitychange", hide);
|
|
return () => {
|
|
cancelAnimationFrame(frame);
|
|
document.removeEventListener("visibilitychange", hide);
|
|
};
|
|
}, [playing, externalClock]);
|
|
useEffect(() => {
|
|
audioGain.retain([...videos.current.values(), ...audios.current.values()]);
|
|
for (const clip of timeline.clips) {
|
|
const video = videos.current.get(clip.id);
|
|
if (!video) continue;
|
|
const active = current.some((c) => c.id === clip.id);
|
|
if (!active) {
|
|
video.pause();
|
|
continue;
|
|
}
|
|
const target = Math.max(
|
|
clip.sourceIn / SECOND,
|
|
Math.min(
|
|
clip.sourceOut / SECOND - 1 / 30,
|
|
clip.sourceIn / SECOND + (time - clip.start / SECOND) * clip.speed,
|
|
),
|
|
);
|
|
const held = time * SECOND < clip.start || time * SECOND >= clip.end;
|
|
if (Number.isFinite(target) && Math.abs(video.currentTime - target) > 0.1)
|
|
video.currentTime = target;
|
|
video.playbackRate = clip.speed;
|
|
const index = timeline.clips.findIndex((c) => c.id === clip.id),
|
|
next = timeline.clips[index + 1];
|
|
let gain = 1;
|
|
if (clip.overlap && time * SECOND < clip.transitionStart + clip.overlap)
|
|
gain = (time * SECOND - clip.transitionStart) / clip.overlap;
|
|
if (next?.overlap && time * SECOND > next.transitionStart)
|
|
gain = Math.min(
|
|
gain,
|
|
(next.transitionStart + next.overlap - time * SECOND) / next.overlap,
|
|
);
|
|
const source = plan.assets.find((a) => a.id === clip.assetId)!.url;
|
|
if (!audioGain.ready(source)) {
|
|
video.pause();
|
|
if (playing) {
|
|
audioGain.retry();
|
|
onPlaying(false);
|
|
onError("正在准备音量预览素材，请稍后点击播放");
|
|
}
|
|
continue;
|
|
}
|
|
audioGain.volume(
|
|
video,
|
|
clip.audioDetached || clip.muted || held ? 0 : clip.gain * gain,
|
|
playing,
|
|
);
|
|
if (playing && !held)
|
|
void video.play().catch((error) => {
|
|
if (error?.name === "AbortError") return;
|
|
onPlaying(false);
|
|
onError("预览播放失败，请检查素材链接或点击播放重试");
|
|
});
|
|
else video.pause();
|
|
}
|
|
for (const clip of timeline.audioClips) {
|
|
const audio = audios.current.get(clip.id);
|
|
if (!audio) continue;
|
|
const relative = time - clip.start / SECOND;
|
|
if (relative < 0 || time * SECOND >= clip.end) {
|
|
audio.pause();
|
|
continue;
|
|
}
|
|
const target = clip.sourceIn / SECOND + relative * clip.speed;
|
|
if (Math.abs(audio.currentTime - target) > 0.1) audio.currentTime = target;
|
|
audio.playbackRate = clip.speed;
|
|
const length = clip.duration / SECOND,
|
|
fadeIn = Math.min(clip.fadeIn, length),
|
|
fadeOut = Math.min(clip.fadeOut, length);
|
|
const gain =
|
|
Math.min(
|
|
1,
|
|
fadeIn
|
|
? (clip.fadeInStart || 0) + ((1 - (clip.fadeInStart || 0)) * relative) / fadeIn
|
|
: 1,
|
|
) *
|
|
Math.min(
|
|
1,
|
|
fadeOut
|
|
? (clip.fadeOutEnd || 0) +
|
|
((1 - (clip.fadeOutEnd || 0)) * (length - relative)) / fadeOut
|
|
: 1,
|
|
);
|
|
const source = plan.assets.find((a) => a.id === clip.assetId)!.url;
|
|
if (!audioGain.ready(source)) {
|
|
audio.pause();
|
|
if (playing) {
|
|
audioGain.retry();
|
|
onPlaying(false);
|
|
onError("正在准备音量预览素材，请稍后点击播放");
|
|
}
|
|
continue;
|
|
}
|
|
audioGain.volume(audio, clip.muted ? 0 : clip.gain * gain, playing);
|
|
if (playing)
|
|
void audio.play().catch((error) => {
|
|
if (error?.name === "AbortError") return;
|
|
onPlaying(false);
|
|
onError("独立音轨无法播放");
|
|
});
|
|
else audio.pause();
|
|
}
|
|
const audio = music.current;
|
|
if (audio && plan.music) {
|
|
const target = time + plan.music.start / SECOND;
|
|
if (Number.isFinite(audio.duration) && target >= audio.duration) {
|
|
audio.pause();
|
|
return;
|
|
}
|
|
if (Math.abs(audio.currentTime - target) > 0.15) audio.currentTime = target;
|
|
audio.volume = Math.min(1, plan.music.gain);
|
|
if (playing)
|
|
void audio.play().catch((error) => {
|
|
if (error?.name === "AbortError") return;
|
|
onPlaying(false);
|
|
onError("背景音乐无法播放");
|
|
});
|
|
else audio.pause();
|
|
}
|
|
}, [time, playing, plan]);
|
|
const [ratioWidth, ratioHeight] = plan.ratio.split(":").map(Number);
|
|
const ratio = ratioWidth / ratioHeight;
|
|
const height = Math.min(frameSize.height || 720, (frameSize.width || 1280) / ratio);
|
|
const incomingClip = current.find(
|
|
(c) => c.overlap && visibleTime < c.transitionStart + c.overlap,
|
|
);
|
|
const progress = incomingClip
|
|
? (visibleTime - incomingClip.transitionStart) / incomingClip.overlap
|
|
: 1;
|
|
const [gesture, setGesture] = useState<{
|
|
clipId?: string;
|
|
captionId?: string;
|
|
transform?: VideoTransform;
|
|
x?: number;
|
|
y?: number;
|
|
}>();
|
|
const gestureCleanup = useRef<() => void>();
|
|
useEffect(() => () => gestureCleanup.current?.(), []);
|
|
const moveTransform = (e: React.PointerEvent, id: string, corner?: [number, number]) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
onPlaying(false);
|
|
onSelectClip?.(id);
|
|
const c = plan.clips.find((c) => c.id === id)!,
|
|
a = plan.assets.find((a) => a.id === c.assetId)!,
|
|
original = c.transform || defaultVideoTransform;
|
|
const frameWidth = height * ratio,
|
|
baseWidth = Math.min(frameWidth, (height * a.width) / a.height),
|
|
baseHeight = (baseWidth * a.height) / a.width,
|
|
startX = e.clientX,
|
|
startY = e.clientY;
|
|
let value = original;
|
|
const clamp = (v: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, v));
|
|
const move = (ev: PointerEvent) => {
|
|
const dx = ev.clientX - startX,
|
|
dy = ev.clientY - startY;
|
|
if (corner) {
|
|
const nextScale = clamp(
|
|
original.scale + ((dx * corner[0]) / baseWidth + (dy * corner[1]) / baseHeight) / 2,
|
|
0.1,
|
|
3,
|
|
),
|
|
delta = nextScale - original.scale;
|
|
value = {
|
|
scale: nextScale,
|
|
x: clamp(original.x + (delta * baseWidth * corner[0]) / 2 / frameWidth, -1, 1),
|
|
y: clamp(original.y + (delta * baseHeight * corner[1]) / 2 / height, -1, 1),
|
|
};
|
|
} else
|
|
value = {
|
|
...original,
|
|
x: clamp(original.x + dx / frameWidth, -1, 1),
|
|
y: clamp(original.y + dy / height, -1, 1),
|
|
};
|
|
setGesture({ clipId: id, transform: value });
|
|
};
|
|
const cleanup = () => {
|
|
window.removeEventListener("pointermove", move);
|
|
window.removeEventListener("pointerup", end);
|
|
window.removeEventListener("pointercancel", cancel);
|
|
gestureCleanup.current = undefined;
|
|
};
|
|
const end = () => {
|
|
cleanup();
|
|
setGesture(undefined);
|
|
onTransform?.(id, value);
|
|
},
|
|
cancel = () => {
|
|
cleanup();
|
|
setGesture(undefined);
|
|
};
|
|
gestureCleanup.current?.();
|
|
gestureCleanup.current = cleanup;
|
|
window.addEventListener("pointermove", move);
|
|
window.addEventListener("pointerup", end);
|
|
window.addEventListener("pointercancel", cancel);
|
|
};
|
|
const moveCaption = (e: React.PointerEvent, id: string, style: CaptionStyle) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
onPlaying(false);
|
|
onSelectCaption?.(id);
|
|
const startX = e.clientX,
|
|
startY = e.clientY;
|
|
let value = { x: style.x ?? 0.5, y: style.y ?? 0.95 };
|
|
const move = (ev: PointerEvent) => {
|
|
value = {
|
|
x: Math.max(
|
|
0,
|
|
Math.min(1, (style.x ?? 0.5) + (ev.clientX - startX) / (height * ratio)),
|
|
),
|
|
y: Math.max(0, Math.min(1, (style.y ?? 0.95) + (ev.clientY - startY) / height)),
|
|
};
|
|
setGesture({ captionId: id, ...value });
|
|
};
|
|
const cleanup = () => {
|
|
window.removeEventListener("pointermove", move);
|
|
window.removeEventListener("pointerup", end);
|
|
window.removeEventListener("pointercancel", cancel);
|
|
gestureCleanup.current = undefined;
|
|
};
|
|
const end = () => {
|
|
cleanup();
|
|
setGesture(undefined);
|
|
onCaptionPosition?.(id, value);
|
|
},
|
|
cancel = () => {
|
|
cleanup();
|
|
setGesture(undefined);
|
|
};
|
|
gestureCleanup.current?.();
|
|
gestureCleanup.current = cleanup;
|
|
window.addEventListener("pointermove", move);
|
|
window.addEventListener("pointerup", end);
|
|
window.addEventListener("pointercancel", cancel);
|
|
};
|
|
const selectedClip = current.find((c) => c.id === selectedClipId);
|
|
const selectedAsset = selectedClip && plan.assets.find((a) => a.id === selectedClip.assetId);
|
|
const selectedTransform =
|
|
gesture && gesture.clipId === selectedClipId
|
|
? gesture.transform
|
|
: selectedClip?.transform || defaultVideoTransform;
|
|
return (
|
|
<div
|
|
ref={frameRef}
|
|
className={
|
|
fit
|
|
? "relative h-full w-full overflow-hidden"
|
|
: "relative mx-auto w-full max-w-4xl overflow-hidden bg-black"
|
|
}
|
|
style={fit ? undefined : { aspectRatio: plan.ratio.replace(":", "/") }}
|
|
aria-label="剪辑实时预览"
|
|
>
|
|
<div
|
|
style={
|
|
fit && !cover
|
|
? {
|
|
position: "absolute",
|
|
width: height * ratio,
|
|
height,
|
|
left: "50%",
|
|
top: "50%",
|
|
transform: "translate(-50%,-50%)",
|
|
overflow: "hidden",
|
|
background: "black",
|
|
}
|
|
: { position: "absolute", inset: 0 }
|
|
}
|
|
>
|
|
{timeline.clips.map((clip) => {
|
|
const asset = plan.assets.find((a) => a.id === clip.assetId)!;
|
|
const active = current.some((c) => c.id === clip.id),
|
|
incoming = clip.overlap && visibleTime < clip.transitionStart + clip.overlap;
|
|
return (
|
|
<video
|
|
key={`${clip.id}:${audioGain.source(asset.url)}`}
|
|
ref={(element) => {
|
|
if (element) videos.current.set(clip.id, element);
|
|
else videos.current.delete(clip.id);
|
|
}}
|
|
src={audioGain.source(asset.url)}
|
|
muted={clip.audioDetached || clip.muted || clip.gain === 0}
|
|
playsInline
|
|
preload="metadata"
|
|
className={`absolute inset-0 h-full w-full ${cover ? "object-cover" : "object-contain"}`}
|
|
style={{
|
|
visibility: active ? "visible" : "hidden",
|
|
transform: (() => {
|
|
const t =
|
|
gesture?.clipId === clip.id
|
|
? gesture.transform!
|
|
: clip.transform || defaultVideoTransform;
|
|
return `translate(${t.x * 100}%,${t.y * 100}%) scale(${t.scale})`;
|
|
})(),
|
|
opacity: incoming
|
|
? clip.transitionType === "fade"
|
|
? progress
|
|
: progress < 0.5
|
|
? 0
|
|
: 1
|
|
: 1,
|
|
}}
|
|
onLoadedMetadata={(e) => {
|
|
const target =
|
|
clip.sourceIn / SECOND +
|
|
(Math.max(0, visibleTime - clip.start) / SECOND) * clip.speed;
|
|
e.currentTarget.currentTime = Math.min(clip.sourceOut / SECOND - 0.001, target);
|
|
}}
|
|
onError={() => {
|
|
onPlaying(false);
|
|
onError(`${asset.name} 预览加载失败`);
|
|
}}
|
|
/>
|
|
);
|
|
})}
|
|
{timeline.audioClips.map((c) => (
|
|
<audio
|
|
key={`${c.id}:${audioGain.source(plan.assets.find((a) => a.id === c.assetId)!.url)}`}
|
|
ref={(el) => {
|
|
if (el) audios.current.set(c.id, el);
|
|
else audios.current.delete(c.id);
|
|
}}
|
|
src={audioGain.source(plan.assets.find((a) => a.id === c.assetId)!.url)}
|
|
preload="metadata"
|
|
/>
|
|
))}
|
|
{plan.music ? <audio ref={music} src={plan.music.url} preload="metadata" /> : null}
|
|
{incomingClip && incomingClip.transitionType !== "fade" && (
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
inset: 0,
|
|
pointerEvents: "none",
|
|
background: incomingClip.transitionType === "fadeblack" ? "black" : "white",
|
|
opacity: 1 - Math.abs(2 * progress - 1),
|
|
}}
|
|
/>
|
|
)}
|
|
{selectedClip && selectedAsset && selectedTransform && onTransform && (
|
|
<div
|
|
aria-label="调整画面位置"
|
|
onClick={(e) => e.stopPropagation()}
|
|
onPointerDown={(e) => moveTransform(e, selectedClip.id)}
|
|
style={{
|
|
position: "absolute",
|
|
left: `${(selectedTransform.x + 0.5) * 100}%`,
|
|
top: `${(selectedTransform.y + 0.5) * 100}%`,
|
|
width:
|
|
Math.min(
|
|
height * ratio,
|
|
(height * selectedAsset.width) / selectedAsset.height,
|
|
) * selectedTransform.scale,
|
|
height:
|
|
Math.min(
|
|
height,
|
|
(height * ratio * selectedAsset.height) / selectedAsset.width,
|
|
) * selectedTransform.scale,
|
|
transform: "translate(-50%,-50%)",
|
|
border: "2px solid #87c9ff",
|
|
cursor: "move",
|
|
zIndex: 3,
|
|
}}
|
|
>
|
|
{(
|
|
[
|
|
[-1, -1],
|
|
[1, -1],
|
|
[1, 1],
|
|
[-1, 1],
|
|
] as [number, number][]
|
|
).map(([x, y]) => (
|
|
<button
|
|
key={`${x}:${y}`}
|
|
type="button"
|
|
aria-label="调整视频尺寸"
|
|
onPointerDown={(e) => moveTransform(e, selectedClip.id, [x, y])}
|
|
style={{
|
|
position: "absolute",
|
|
width: 12,
|
|
height: 12,
|
|
left: x < 0 ? 0 : "100%",
|
|
top: y < 0 ? 0 : "100%",
|
|
transform: "translate(-50%,-50%)",
|
|
border: "1px solid white",
|
|
background: "#87c9ff",
|
|
borderRadius: 2,
|
|
cursor: x === y ? "nwse-resize" : "nesw-resize",
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
<div className="pointer-events-none absolute inset-0 text-center" style={{ zIndex: 4 }}>
|
|
{subs.map((s, i) => {
|
|
const style = (s as { style?: CaptionStyle }).style || defaultCaptionStyle;
|
|
return (
|
|
<div
|
|
key={i}
|
|
onClick={(e) => e.stopPropagation()}
|
|
onPointerDown={(e) => {
|
|
if (onCaptionPosition && "id" in s) moveCaption(e, s.id as string, style);
|
|
}}
|
|
style={{
|
|
position: "absolute",
|
|
left: `${((gesture && gesture.captionId === (s as TimelineCaption).id ? gesture.x : style.x) ?? 0.5) * 100}%`,
|
|
bottom: `${(1 - ((gesture && gesture.captionId === (s as TimelineCaption).id ? gesture.y : style.y) ?? 0.95)) * 100}%`,
|
|
transform: "translateX(-50%)",
|
|
maxWidth: "95%",
|
|
pointerEvents: onCaptionPosition ? "auto" : "none",
|
|
cursor: onCaptionPosition ? "move" : undefined,
|
|
outline:
|
|
selectedCaptionId === (s as TimelineCaption).id
|
|
? "1px solid #87c9ff"
|
|
: undefined,
|
|
fontFamily: `"${captionFont(style.fontFamily)?.family || "Noto Sans CJK SC"}", "Source Han Sans SC", sans-serif`,
|
|
whiteSpace: "pre-wrap",
|
|
fontSize: (style.fontSize * height) / (style.referenceHeight || 720),
|
|
letterSpacing: (style.spacing * height) / (style.referenceHeight || 720),
|
|
color: style.color,
|
|
opacity: style.opacity,
|
|
WebkitTextStroke: `${((style.outlineWidth * height) / (style.referenceHeight || 720)) * 2}px ${style.outlineColor}${Math.round(
|
|
(style.outlineOpacity ?? 1) * 255,
|
|
)
|
|
.toString(16)
|
|
.padStart(2, "0")}`,
|
|
paintOrder: "stroke fill",
|
|
lineHeight: 1.2,
|
|
}}
|
|
>
|
|
{s.text}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|