feat: center transport controls and add spacebar play/pause
Changes: - Transport controls now centered in footer with flexbox justify-center - Added spacebar keyboard shortcut for play/pause toggle - Spacebar only works when not typing in input/textarea fields - Prevents default spacebar behavior (page scroll) when playing/pausing 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -96,6 +96,20 @@ export function AudioEditor() {
|
|||||||
setZoom(1);
|
setZoom(1);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Keyboard shortcuts
|
||||||
|
React.useEffect(() => {
|
||||||
|
const handleKeyDown = (e: KeyboardEvent) => {
|
||||||
|
// Spacebar for play/pause - only if not typing in an input
|
||||||
|
if (e.code === 'Space' && !(e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)) {
|
||||||
|
e.preventDefault();
|
||||||
|
togglePlayPause();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('keydown', handleKeyDown);
|
||||||
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||||
|
}, [togglePlayPause]);
|
||||||
|
|
||||||
// Find selected track
|
// Find selected track
|
||||||
const selectedTrack = tracks.find((t) => t.id === selectedTrackId);
|
const selectedTrack = tracks.find((t) => t.id === selectedTrackId);
|
||||||
|
|
||||||
@@ -260,7 +274,7 @@ export function AudioEditor() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Multi-Track Playback Controls */}
|
{/* Multi-Track Playback Controls */}
|
||||||
<div className="border-t border-border bg-card p-3">
|
<div className="border-t border-border bg-card p-3 flex justify-center">
|
||||||
<PlaybackControls
|
<PlaybackControls
|
||||||
isPlaying={isPlaying}
|
isPlaying={isPlaying}
|
||||||
isPaused={!isPlaying}
|
isPaused={!isPlaying}
|
||||||
|
|||||||
Reference in New Issue
Block a user