feat: add transitions, track mixing, and voiceover controls

1 files changed, 2 insertions, 25 deletions

diff --git a/apps/web/src/timeline/components/timeline-toolbar.tsx b/apps/web/src/timeline/components/timeline-toolbar.tsx
index 47906931..ba9a99fa 100644
--- a/apps/web/src/timeline/components/timeline-toolbar.tsx
+++ b/apps/web/src/timeline/components/timeline-toolbar.tsx
@@ -43,17 +43,13 @@ import {
 	Layers01Icon,
 	Chart03Icon,
 	Unlink02Icon,
-	MicIcon,
-	StopIcon,
 } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { OcRippleIcon } from "@/components/icons";
 import { GraphEditorPopover } from "./graph-editor/popover";
 import { PopoverTrigger } from "@/components/ui/popover";
 import { useGraphEditorController } from "./graph-editor/use-controller";
-import { formatElapsedSeconds } from "@/voiceover/recorder";
-import { useRecordingElapsedSeconds } from "@/voiceover/use-recording-elapsed";
-import { useVoiceOverStore } from "@/voiceover/voiceover-store";
+import { VoiceOverRecorderPopover } from "@/voiceover/voiceover-popover";
 
 export function TimelineToolbar({
 	zoomLevel,
@@ -100,10 +96,6 @@ function ToolbarLeftSection() {
 	const isCurrentlyBookmarked = useEditor((e) =>
 		e.scenes.isBookmarked({ time: e.playback.getCurrentTime() }),
 	);
-	const isRecordingVoiceOver = useVoiceOverStore(
-		(state) => state.status === "recording",
-	);
-	const voiceOverElapsedSeconds = useRecordingElapsedSeconds();
 	const canFreezeFrame = useEditor((e) => {
 		const time = e.playback.getCurrentTime();
 		const { overlay, main } = e.scenes.getActiveScene().tracks;
@@ -211,22 +203,7 @@ function ToolbarLeftSection() {
 					onClick={({ event }) => handleAction({ action: "freeze-frame", event })}
 				/>
 
-				<ToolbarButton
-					icon={
-						<HugeiconsIcon icon={isRecordingVoiceOver ? StopIcon : MicIcon} />
-					}
-					tooltip={
-						isRecordingVoiceOver ? "Stop voice-over" : "Record voice-over"
-					}
-					isActive={isRecordingVoiceOver}
-					onClick={({ event }) => handleAction({ action: "voice-over", event })}
-				/>
-
-				{isRecordingVoiceOver && (
-					<span className="text-destructive min-w-9 text-center text-xs tabular-nums">
-						{formatElapsedSeconds({ seconds: voiceOverElapsedSeconds })}
-					</span>
-				)}
+				<VoiceOverRecorderPopover />
 
 				<ToolbarButton
 					icon={<HugeiconsIcon icon={Delete02Icon} />}