97 lines
4.1 KiB
Markdown
97 lines
4.1 KiB
Markdown
---
|
|
phase: 05-live-show-execution
|
|
plan: 03
|
|
subsystem: ui
|
|
tags: [keyboard-shortcuts, vanilla-js, undo-redo, audio, websocket]
|
|
|
|
# Dependency graph
|
|
requires:
|
|
- phase: 05-01
|
|
provides: "Cue scheduler backend for play/pause/seek server messages"
|
|
- phase: 05-02
|
|
provides: "Preview strips for seek-clear pattern"
|
|
provides:
|
|
- "wireKeyboard() — all 7 keyboard bindings (Space, ArrowLeft, ArrowRight, Ctrl+Z, Ctrl+Shift+Z, Ctrl+Y, Ctrl+S)"
|
|
- "Mouse-free operation of all primary actions per UI-03 requirement"
|
|
affects: []
|
|
|
|
# Tech tracking
|
|
tech-stack:
|
|
added: []
|
|
patterns:
|
|
- "Keyboard guard pattern: check activeElement tagName before acting (input/select/textarea bypass)"
|
|
- "Space-on-button guard: explicit check for tag === 'button' to prevent double-toggle"
|
|
- "Ctrl+S round-trip save: GET current show state → POST to /api/shows (manual trigger)"
|
|
- "Arrow seek with strip clear: same clear pattern as mouseup seek from Plan 02"
|
|
|
|
key-files:
|
|
created: []
|
|
modified:
|
|
- lightsync/frontend/app.js
|
|
|
|
key-decisions:
|
|
- "e.preventDefault() called first in every branch — suppresses Space scroll, Arrow scroll, Ctrl+S browser dialog before any logic"
|
|
- "Space explicitly guarded on button elements to avoid double-toggle with button click handler"
|
|
- "Ctrl+S uses GET-then-POST round-trip (reads current server state, not just timeline) — consistent with existing save pattern"
|
|
|
|
patterns-established:
|
|
- "wireKeyboard() placed after wireAudio() in init section — both audio wiring functions called together at startup"
|
|
- "Arrow seek clears preview strips inline — same pattern as mouseup seek handler"
|
|
|
|
requirements-completed: [UI-03]
|
|
|
|
# Metrics
|
|
duration: 10min
|
|
completed: 2026-04-07
|
|
---
|
|
|
|
# Phase 05 Plan 03: Keyboard Shortcuts Summary
|
|
|
|
**wireKeyboard() function wired with all 7 keyboard bindings (Space play/pause, Arrow seek, Ctrl+Z/Y undo/redo, Ctrl+S save) — all primary operations accessible without mouse**
|
|
|
|
## Performance
|
|
|
|
- **Duration:** ~10 min
|
|
- **Completed:** 2026-04-07
|
|
- **Tasks:** 1
|
|
- **Files modified:** 1
|
|
|
|
## Accomplishments
|
|
|
|
- Added `wireKeyboard()` function to `lightsync/frontend/app.js` (72 lines inserted)
|
|
- Space toggles audio play/pause and sends `{ type: 'play' }` or `{ type: 'pause' }` to server via WebSocket
|
|
- ArrowLeft seeks back 5 seconds, ArrowRight seeks forward 5 seconds — both send `{ type: 'seek', position }` to server and clear all preview strips
|
|
- Ctrl+Z calls `timeline?.history.undo()` via optional chaining (safe when timeline not yet initialized)
|
|
- Ctrl+Shift+Z and Ctrl+Y both call `timeline?.history.redo()`
|
|
- Ctrl+S prevents browser Save dialog via `e.preventDefault()`, then fetches current show and POSTs it back to `/api/shows`
|
|
- All shortcuts are suppressed when `document.activeElement` is an `input`, `select`, or `textarea`
|
|
- Space is additionally suppressed when focused element is a `button` to prevent double-toggle with click handler
|
|
- `wireKeyboard()` called at init after `wireAudio()`
|
|
|
|
## Task Commits
|
|
|
|
1. **Task 1: Add wireKeyboard() function and call it at init** - `3562652` (feat)
|
|
|
|
## Files Created/Modified
|
|
|
|
- `lightsync/frontend/app.js` — Added wireKeyboard() function (72 lines) and wireKeyboard() init call
|
|
|
|
## Decisions Made
|
|
|
|
- `e.preventDefault()` is called at the start of every key branch to guarantee browser defaults are suppressed before any application logic runs
|
|
- Space on `<button>` elements is explicitly skipped to prevent the double-toggle issue (keyboard Space activates focused buttons naturally; without the guard, Space would trigger both the button click and the wireKeyboard toggle)
|
|
- Ctrl+S uses a GET-then-POST round-trip rather than saving the in-memory timeline state directly — this ensures the server's current show state is preserved (consistent with existing auto-save pattern in commands.js)
|
|
|
|
## Deviations from Plan
|
|
|
|
None — plan executed exactly as written. All acceptance criteria met on first implementation pass.
|
|
|
|
## Known Stubs
|
|
|
|
None — all keyboard actions wire to real audio element methods, real WebSocket messages, and real undo/redo history calls.
|
|
|
|
---
|
|
|
|
*Phase: 05-live-show-execution*
|
|
*Completed: 2026-04-07*
|