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>
|
||
);
|
||
}
|