Function TranscriptPanel

apps/desktop/src/routes/editor/TranscriptPage.tsx:62–535

()

] as const;

export function TranscriptPanel() {
	const {
		editorState,
		setEditorState,
		project,
		setProject,
		editorInstance,
		meta,
		totalDuration,
		previewResolutionBase,
	} = useEditorContext();

	const recordingSegments = () => editorInstance.recordings.segments;

	const [textSizeIndex, setTextSizeIndex] = makePersisted(createSignal(1), {
		name: "editorTranscriptTextSize",
	});
	const [exportingFormat, setExportingFormat] =
		createSignal<CaptionExportFormat | null>(null);

	const exportableCues = createMemo(() =>
		createCaptionExportCues(
			project.captions?.segments ?? [],
			project.timeline?.segments ?? [],
			recordingSegments(),
		),
	);

	const allWords = createMemo((): FlatWord[] => {
		const segments = project.captions?.segments ?? [];
		const result: FlatWord[] = [];
		for (let segIdx = 0; segIdx < segments.length; segIdx++) {
			const seg = segments[segIdx];
			const words = seg.words ?? [];
			for (let wordIdx = 0; wordIdx < words.length; wordIdx++) {
				const w = words[wordIdx];
				result.push({
					text: w.text,
					start: w.start,
					end: w.end,
					segmentIndex: segIdx,
					wordIndex: wordIdx,
				});
			}
		}
		return result;
	});

	const segmentGroups = createMemo((): TranscriptSegmentGroup[] => {
		const flatWords = allWords();
		return (project.captions?.segments ?? []).map((_segment, segmentIndex) => ({
			segmentIndex,
			words: flatWords.filter((word) => word.segmentIndex === segmentIndex),
		}));
	});

	const updateWordText = (flatIndex: number, rawText: string) => {
		const target = allWords()[flatIndex];