Skip to content

feat: Keyboard Shortcuts, Audio Mixing & Timeline Markers#156

Merged
theunavailableguy merged 15 commits into
masterfrom
feat/keyboard-shortcuts-audio-mixing
Jul 12, 2026
Merged

feat: Keyboard Shortcuts, Audio Mixing & Timeline Markers#156
theunavailableguy merged 15 commits into
masterfrom
feat/keyboard-shortcuts-audio-mixing

Conversation

@AIEraDev

Copy link
Copy Markdown
Owner

🎹 Keyboard Shortcuts & Undo/Redo UX

Features

  • ✅ Customizable keyboard shortcut system with persistence
  • ✅ Shortcut registry with search, rebinding, and conflict detection
  • ✅ Dynamic shortcut lookup from centralized store
  • ✅ Settings UI with Shortcuts tab
  • ✅ Styled Undo/Redo buttons with action-specific tooltips

Files Changed

  • CommandJournal.ts - Expose undoLabel/redoLabel in history state
  • shortcutStore.ts - Shortcut registry with persistence
  • useKeyboardShortcuts.ts - Dynamic shortcut lookup
  • KeyboardShortcutsSettings.tsx - Settings UI component
  • SettingsModal.tsx - Added Shortcuts tab
  • TopBar.tsx - Styled Undo/Redo buttons with tooltips

🎚️ Audio Mixing & Volume Envelopes

Features

  • ✅ Volume control with visual envelope editor
  • ✅ Fade-in/fade-out handles with drag support
  • ✅ Real-time audio mixing in timeline
  • ✅ Full project save/load persistence

Files Changed

  • index.ts - Added fadeIn/fadeOut to Clip interface
  • serialization.ts - Snake_case mapping for Rust backend
  • AudioEnvelopeEditor.tsx - Visual envelope overlay component
  • Clip.tsx - Integrated AudioEnvelopeEditor with equality checks

📍 Timeline Markers

Features

  • ✅ Interactive timeline markers with drag-to-reposition
  • ✅ Color customization (Purple, Blue, Green, Yellow, Red)
  • ✅ Edit popover with name, color, position, and delete
  • ✅ Keyboard shortcut (m) for marker creation at playhead
  • ✅ Full persistence across project sessions

Files Changed

  • index.ts - TimelineMarker interface
  • timelineStore.ts - Marker CRUD actions
  • projectStore.ts - Marker persistence
  • shortcutStore.ts - Add marker shortcut
  • useKeyboardShortcuts.ts - Handle marker creation
  • TimelineRuler.tsx - Interactive marker UI

✅ Verification

  • All 47 tests passing
  • TypeScript compilation successful
  • Build verification completed

AIEraDev added 15 commits July 12, 2026 20:42
- Implement centralized shortcut registry with persistence
- Support per-action key rebinding with conflict detection
- Use zustand persist middleware with smart merge for future updates
- Add formatBinding() helper for cross-platform key display
- Create KeyboardShortcutsSettings component with search and category grouping
- Implement capture-mode key rebinding with conflict detection
- Add per-shortcut reset and global reset all functionality
- Display shortcuts as styled keyboard chips with live capture
- Create AudioEnvelopeEditor component with SVG envelope visualization
- Add draggable fade-in/fade-out handles at clip edges
- Implement vertical volume drag with double-click reset to 100%
- Show dynamic tooltips during drag operations
- Commit changes to history for undo/redo support
- Add undoLabel and redoLabel to CommandJournalState interface
- Populate labels from command history in getState()
- Enable UI to display context-specific undo/redo action names
- Add optional fadeIn and fadeOut (in seconds) to Clip interface
- Support audio envelope fade curves in timeline model
- Enable audio mixing with fade transitions
- Add fade_in and fade_out to RustClip interface
- Map camelCase fadeIn/fadeOut to snake_case for Rust backend
- Enable full project save/load support for audio envelopes
- Replace hardcoded key checks with getMatchingAction() from shortcutStore
- Enable user-customizable keyboard bindings
- Maintain all existing shortcut behaviors and actions
- Add marker creation shortcut (m key)
- Initialize markers array in timeline state
- Implement addMarker, removeMarker, updateMarker actions
- Enable marker creation, editing, and deletion in timeline
- Serialize/deserialize markers during save/load operations
- Include markers in auto-save cycle
- Ensure markers persist across project sessions
- Add 'add-marker' action with default 'm' key binding
- Enable keyboard-driven marker insertion at playhead
…tomization

- Add markers via double-click on ruler
- Render colored diamond flags at marker positions
- Enable smooth horizontal dragging to reposition markers
- Implement edit popover with name, color picker, position, and delete
- Support 5 color options: Purple, Blue, Green, Yellow, Red
- Add clypra_next_releases.md to .gitignore
- Add custom_gpu_rendering_plan.md to .gitignore
- Add AudioEnvelopeEditor as overlay for audio/video clips
- Import and render audio envelope controls
- Update arePropsEqual to check volume, fadeIn, fadeOut changes
- Enable real-time audio mixing in timeline
- Import KeyboardShortcutsSettings component
- Add Keyboard icon to lucide imports
- Add 'shortcuts' to Tab type and TABS array
- Render KeyboardShortcutsSettings in modal content
…tips

- Import Undo2 and Redo2 icons from lucide-react
- Add undo and redo functions from useHistoryStore
- Replace text counter with icon buttons
- Display action-specific tooltips using undoLabel/redoLabel
- Show buttons only when actions are available
@theunavailableguy theunavailableguy merged commit daefd2b into master Jul 12, 2026
1 of 2 checks passed
@theunavailableguy theunavailableguy deleted the feat/keyboard-shortcuts-audio-mixing branch July 12, 2026 20:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants