Function CaptionOverlay

apps/desktop/src/routes/editor/CaptionOverlay.tsx:43–316

(props: CaptionOverlayProps)

}

export function CaptionOverlay(props: CaptionOverlayProps) {
	const { project, setProject, editorState, setEditorState, projectHistory } =
		useEditorContext();
	const [measuredSize, setMeasuredSize] = createSignal({ width: 1, height: 1 });
	let hiddenMeasureRef: HTMLDivElement | undefined;

	const currentAbsoluteTime = () =>
		editorState.previewTime ?? editorState.playbackTime ?? 0;

	const settings = createMemo(() => ({
		...defaultCaptionSettings,
		...project.captions?.settings,
	}));

	const activeCaption = createMemo(() => {
		if (!settings().enabled) return null;
		const time = currentAbsoluteTime();
		const segments = project.timeline?.captionSegments ?? [];
		const index = segments.findIndex(
			(segment) => time >= segment.start && time < segment.end,
		);
		if (index < 0) return null;
		const segment = segments[index];
		if (!segment) return null;
		return { index, segment };
	});

	const text = createMemo(() => activeCaption()?.segment.text ?? "");

	const scaledFontSize = createMemo(() =>
		Math.max(settings().size * (props.size.height / 1080), 1),
	);

	const margin = createMemo(() => props.size.width * 0.05);
	const availableWidth = createMemo(() =>
		Math.max(props.size.width - margin() * 2, scaledFontSize()),
	);
	const fitScale = createMemo(() => {
		const padding = scaledFontSize() * 0.5;
		const measuredWidth = measuredSize().width + padding * 2;
		return measuredWidth > availableWidth()
			? Math.min(Math.max(availableWidth() / measuredWidth, 0.35), 1)
			: 1;
	});
	const effectiveFontSize = createMemo(() => scaledFontSize() * fitScale());

	createEffect(
		on(
			() =>
				[
					text(),
					scaledFontSize(),
					availableWidth(),
					settings().font,
					settings().fontWeight,
					fitScale(),
				] as const,
			() => {