Recording controls footer
Bottom row of the tray record popover — the final visible step before the first recording starts. Auto-zoom + countdown pills on the left, prominent red Start recording button on the right with the keyboard shortcut hint inside.
States
| State | Story |
|---|---|
| Ready | recording-footer-ready |
| Disabled (no source selected) | recording-footer-disabled |
| Loading (start dispatched) | recording-footer-loading |
| Permission blocked | recording-footer-permission-blocked |
| Compact (no zoom / no countdown) | recording-footer-compact |
API
#![allow(unused)] fn main() { use ui_storybook::components::{ RecordingControlsFooter, RecordingControlsView, StartRecordingState, }; use ui_storybook::fixtures::recorder::sample_recording_controls; view! { <RecordingControlsFooter view=sample_recording_controls(StartRecordingState::Ready) // optional callbacks; stories leave them unset. /> } }
Composition
flowchart LR
Footer[RecordingControlsFooter]
Footer --> Zoom[AutoZoomSelect · SelectPill]
Footer --> Countdown[CountdownSelect · SelectPill]
Footer --> Start[StartRecordingButton]
Start --> Glyph[● / ◌ / ⚠ ]
Start --> Label["Start recording"]
Start --> Shortcut[ShortcutBadgeGroup · ⌘ ⇧ 2]
StartRecordingState::Disabled and Loading render the button
non-interactive. PermissionBlocked keeps the button active —
clicking it should open the permission prompt — and renders as the
amber variant so it reads as a warning rather than a primary CTA.