feat: add preset system and microphone input for screen recording #102
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ations - Add preset types and interfaces (Preset, PresetSettings, PresetStore) - Create electron IPC handlers for preset CRUD operations - Implement file-based storage in userData/presets.json - Add usePresets React hook for state management - Create PresetSelector component with dropdown UI - Create SavePresetModal for naming new presets - Integrate into SettingsPanel and VideoEditor - Support setting default preset that auto-applies on video load - Include duplicate, rename, delete, and reset to defaults actions
- Device enumeration with audioinput filtering - devicechange event listener for auto-refresh - Audio stream management via getUserMedia - AudioContext + AnalyserNode for level metering - RMS-based audio level (0-100 scale) at ~60fps - Permission state tracking (granted/denied/prompt/unknown) - Proper cleanup on unmount using refs
- localStorage-based persistence layer - get/set/clear API with partial updates - Graceful handling of unavailable/corrupted storage - 16 TDD tests passing
- Device list with radio selection - Real-time audio level meter (color-coded) - Mute toggle checkbox - Persists settings via audioSettings store - Glassmorphism styling matching HUD bar - Permission denied/error state display
- Accept optional audioStream via options parameter - Combine video and audio tracks into single MediaStream - Only stop video tracks on cleanup (audio managed externally) - Graceful handling of null/undefined audio stream - Backward compatible - video-only recording still works
- Add useMicrophone hook to get audio stream - Pass audioStream to useScreenRecorder for combined recording - Position MicrophoneSelector between source selector and record button - Disable mic selector during active recording
- Listen for 'ended' event on audio tracks - Set error state when microphone disconnects - Cleanup and refresh device list on disconnection - Provides better UX feedback for hardware changes
- Increase HUD overlay window height from 100px to 350px to accommodate popover - Position HUD bar at bottom of window using items-end - Convert MicrophoneSelector to controlled component (single hook instance) - Fix dual useMicrophone hook issue causing state desync between components
- Create AudioExtractor class to decode audio from video using Web Audio API - Add AudioEncoder initialization with Opus codec in VideoExporter - Initialize VideoMuxer with hasAudio flag when audio is detected - Process audio in 20ms chunks synchronized with video export - Handle trim regions for audio via mapEffectiveToSourceTime - Clean up audio resources (encoder, extractor) on export completion
- Add configurable recording settings: sample rate (44.1/48kHz), channels (mono/stereo), noise suppression, echo cancellation, auto gain control - Add audio bitrate selector for export (128/192/256/320 kbps) - Extend AudioSettings store with new fields and persistence - Add Advanced Settings UI section in MicrophoneSelector popover - Add Audio Quality selector in SettingsPanel (MP4 export only) - Apply audio constraints to getUserMedia via useMicrophone hook - Default to audiophile-friendly settings (48kHz, stereo, 192kbps)
…ipping The HUD window's fixed 350px height was causing Select dropdowns to be clipped when opening inside the popover. Converted to a centered modal dialog which renders via portal outside the HUD bounds, allowing all UI elements to display properly.
… sync - Create MicrophoneSettingsPage as standalone child window for mic settings - Add setWindowOpenHandler in HUD to spawn mic settings child window - Simplify MicrophoneSelector to just open the settings window - Add localStorage polling in LaunchWindow to detect settings changes - Add constraint change detection in useMicrophone to re-apply settings - Settings now persist and sync between HUD and settings window
LaunchWindow now initializes microphone based on localStorage settings. Previously, each window had independent useMicrophone hook states - settings were saved but HUD never called enable()/selectDevice() to restore them. Added useEffect that watches audioSettings and restores mic state when: - Settings indicate mic should be enabled but hook shows disabled - Triggers on mount and when settings change (via polling) This ensures mic stays enabled after closing the settings window.
handleClose now explicitly saves ALL current settings to localStorage before closing, with a small delay to ensure the write completes. This prevents race conditions where window closes before save finishes.
CRITICAL-1: Added cancellation flag to constraint change effect to prevent race conditions when settings change rapidly. New streams are properly cleaned up if the effect is cancelled before completion. CRITICAL-2: Added beforeunload handler to MicrophoneSettingsPage to ensure all settings are saved when window is closed via OS controls (X button, Alt+F4, etc.). The useMicrophone hook's cleanup effect handles stream cleanup on component unmount.
- Define SubtitleRegion data model with word-level timestamps - Outline AssemblyAI integration architecture - Specify UI components and user flow - Estimate 7-day implementation timeline
…ntegration - Add subtitle track row to timeline editor with vertical scroll support - Implement SubtitleGenerateDialog for AI-powered subtitle generation - Add SubtitleOverlay and SubtitleSettingsPanel components - Integrate Deepgram transcription service via Electron IPC - Add subtitle rendering support for video/GIF export - Fix timeline vertical scroll by changing overflow-hidden to overflow-y-auto
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR introduces two major features to enhance the screen recording experience:
Motivation
Preset System
Currently, users must manually reconfigure padding, shadow, rounded corners, background, and other styling settings every time they open a new video. This is repetitive and time-consuming. The preset system allows users to save their preferred styles and apply them instantly.
Microphone Input
Users often need to add voice narration to their screen recordings for tutorials, demos, or explanations. This feature adds native microphone support with device selection, real-time level meters, and seamless audio merging into the final video export.
Type of Change
Related Issue(s)
N/A (Feature development from design docs)
Features Overview
🎨 Preset System
Settings included in presets:
🎤 Microphone Input
Error Handling:
Screenshots / Video
Preset System UI:
Microphone UI:
Testing
Prerequisites
Test Preset System
Test Microphone Input
Test Cross-window Sync
Technical Details
New Files (12 files)
src/components/video-editor/PresetSelector.tsxsrc/components/video-editor/SavePresetModal.tsxsrc/hooks/usePresets.tselectron/ipc/presets.tssrc/hooks/useMicrophone.tssrc/hooks/useMicrophone.test.tssrc/components/launch/MicrophoneSelector.tsxsrc/components/launch/MicrophoneSettingsPage.tsxsrc/stores/audioSettings.tssrc/stores/audioSettings.test.tssrc/lib/exporter/audioExtractor.tsdocs/plans/*.mdModified Files (8 files)
electron/preload.tselectron/ipc/handlers.tselectron/windows.tselectron/electron-env.d.tssrc/hooks/useScreenRecorder.tssrc/components/launch/LaunchWindow.tsxsrc/components/video-editor/SettingsPanel.tsxsrc/components/video-editor/VideoEditor.tsxsrc/lib/exporter/videoExporter.tsCommits Summary (19 commits)
Checklist