[WIP] Add 3-2-1 countdown before recording starts

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Original prompt

Add 3-2-1 Countdown Before Recording Starts

Problem

When users press the Record button, capture starts immediately with no pre-roll countdown. This can lead to accidental recording of setup actions.

Solution

Implement a visible 3-2-1 countdown that displays after pressing Record. The actual recording should only begin when the countdown reaches zero. Users should be able to cancel the countdown by pressing Record again.

Implementation Details

1. Update useScreenRecorder Hook (src/hooks/useScreenRecorder.ts)

• Add state for countdown tracking: countdownSeconds and isCountingDown
• Create startCountdown() function that:
  • Displays countdown from 3 to 0 (1 second per count)
  • Calls startRecording() after countdown completes
  • Can be cancelled by toggling recording again
• Modify toggleRecording() to call startCountdown() instead of startRecording() directly
• Ensure pause/resume/stop/restart work correctly with countdown

2. Update LaunchWindow Component (src/components/launch/LaunchWindow.tsx)

• Create countdown overlay UI that displays:
  • Large centered countdown numbers (3, 2, 1)
  • Semi-transparent dark overlay background
  • Red pulsing/animated text effect
  • Smooth fade in/out transitions
• Display countdown only when isCountingDown is true
• Position overlay above existing UI elements
• Show countdown over the record button area

3. Features

• Users see 3, 2, 1 countdown after pressing Record
• Recording starts automatically when countdown reaches 0
• Pressing Record during countdown cancels it
• Elapsed time/timer works correctly after countdown
• All existing recording controls (pause, stop, restart, cancel) work as expected
• Countdown UI is visually distinct and easy to see

Testing Checklist

• Press Record → countdown displays
• Countdown counts from 3 to 0
• Recording starts after countdown completes
• Press Record during countdown → countdown cancels
• Pause/Resume/Stop work correctly
• Restart recording works correctly
• Visual feedback is smooth and clear

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: @siddharthvaddem/openscreensiddharthvaddem/pull/427

review this PR

Assistant: I'll review this PR for you. Let me fetch the details about the pull request.

Assistant: ## PR Review: Audio Hooks & Music Timeline Support

Status: Open | Author: imAaryash | Created: 3 days ago | 8 commits | 70 files changed (+3,022, -324)

Overview

This PR adds comprehensive audio functionality to the OpenScreen video editor:

• Click-to-preview for music and hook tracks from the audio library
• Hook sound effects as timeline clips with drag/resize/reposition support
• Multiple overlapping hooks on the same timeline
• Timeline row visibility settings to hide/show tracks (Speed, Hooks, Music, etc.)
• UI improvements with playing indicators and better card readability
• Upstream sync fixes for integration compatibility

Key Changes

• Electron IPC: Added openAudioFilePicker() handler with support for .mp3, .wav, .m4a, .aac, .ogg, .flac, .webm
• Audio Library: 30+ pre-built hook sounds and music tracks embedded in public/audio/
• Timeline Editor: New Hook row with timeline clip management
• Project Persistence: Serialization for audio regions, volumes, and hook assignments
• Export: Background music and hook audio included in final exports
• i18n: Localization support for EN, ES, FR, KO, TR, ZH-CN

---

🔴 Critical Issues

1. Missing webcamSizePreset in Project Snapshot

File: src/components/video-editor/VideoEditor.tsx (lines 346-403)
Severity: 🟠 Major

The currentProjectSnapshot memo excludes webcamSizePreset, breaking unsaved-change detection for webcam size edits.

Fix: Add webcamSizePreset to the createProjectSnapshot object alongside other project fields.

---

2. Multiple Hook Events Dropped in Single Frame

File: src/lib/exporter/audioEncoder.ts (lines 481-490)
Severity: 🟠 Major

The hook event trigger uses events.some(...) which only fires once per frame, dropping additional events that land simultaneously.

Current:

const events = hookEventTimes[hook] ?? [];
if (events.some((timeMs) => crossed(timeMs))) {
  playHookSound(hook);
}

Should be: Iterate all events and call playHookSound() for each crossing.

---

3. Import Organization Linting Failure

File: src/components/video-editor/SettingsPanel.tsx (lines 1-18)
Severity: 🟡 Minor

Biome linting flagged import ordering. Run: npx biome check --write src/components/video-editor/SettingsPanel.tsx

---

🟡 Important Concerns

4. Hardcoded English UI Strings (i18n Gaps)

Multiple hardcoded strings bypass localization:

• electron/ipc/handlers.ts (line 768): Dialog title "Select audio" and filter names
• **`src/compo...

This pull request was created from Copilot chat.