diff options
Diffstat (limited to 'apps/web/src/timeline')
| -rw-r--r-- | apps/web/src/timeline/components/timeline-toolbar.tsx | 26 |
1 files changed, 26 insertions, 0 deletions
diff --git a/apps/web/src/timeline/components/timeline-toolbar.tsx b/apps/web/src/timeline/components/timeline-toolbar.tsx index 6208ef27..47906931 100644 --- a/apps/web/src/timeline/components/timeline-toolbar.tsx +++ b/apps/web/src/timeline/components/timeline-toolbar.tsx @@ -43,12 +43,17 @@ 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"; export function TimelineToolbar({ zoomLevel, @@ -95,6 +100,10 @@ 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; @@ -203,6 +212,23 @@ function ToolbarLeftSection() { /> <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> + )} + + <ToolbarButton icon={<HugeiconsIcon icon={Delete02Icon} />} tooltip="Delete element" onClick={({ event }) => |