爱笑的毛毛虫andzhaoyue
62b9c420dd
* fix(ci): 后端测试 - 修复 responses 流式测试数据与 Grok 生图测试 SSRF 放行 * feat(canvas): 新增视频节点字幕体系与多轨时间线编辑（关联 #187） --------- Co-authored-by: zhaoyue <zhaoyue@rongshantech.com>
39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
import type { CSSProperties } from "react";
|
|
|
|
import type { SubtitleHighlight, SubtitleStyle } from "@/types/timeline";
|
|
import { SubtitleHighlightedText } from "./canvas-subtitle-text";
|
|
|
|
type CanvasSubtitleOverlayProps = {
|
|
text: string;
|
|
highlight?: SubtitleHighlight;
|
|
style: SubtitleStyle;
|
|
};
|
|
|
|
const POSITION_STYLE: Record<SubtitleStyle["position"], CSSProperties> = {
|
|
top: { top: "6%" },
|
|
center: { top: "50%", transform: "translateY(-50%)" },
|
|
bottom: { bottom: "8%" },
|
|
};
|
|
|
|
/**
|
|
* 画布视频节点上的实时字幕叠加层：按字幕样式定位到视频画面内。
|
|
* 纯展示层（pointer-events-none），不拦截画布拖拽与播放器控件。
|
|
*/
|
|
export function CanvasSubtitleOverlay({ text, highlight, style }: CanvasSubtitleOverlayProps) {
|
|
return (
|
|
<div className="pointer-events-none absolute inset-x-0 z-10 flex justify-center" style={{ ...POSITION_STYLE[style.position], paddingLeft: "4%", paddingRight: "4%" }}>
|
|
<span
|
|
className="max-w-full whitespace-pre-wrap text-center"
|
|
style={{
|
|
fontSize: style.fontSize,
|
|
lineHeight: 1.4,
|
|
color: style.color,
|
|
textShadow: "0 1px 3px rgba(0, 0, 0, 0.9)",
|
|
}}
|
|
>
|
|
<SubtitleHighlightedText text={text} highlight={highlight} style={style} />
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|