Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Recording status button

Linear: AUT-133

Compact pill that replaces the red Start button after capture begins. Used in the system tray and any other small surface that needs the live recording status without the full footer.

States

StateStory
Countdown 3srecording-status-countdown-3
Countdown 1srecording-status-countdown-1
Recordingrecording-status-recording
Pausedrecording-status-paused
Stoppingrecording-status-stopping
Errorrecording-status-error

API

#![allow(unused)]
fn main() {
use ui_storybook::components::recorder::{
    RecordingStatusButton, CompactRecordingState,
};

view! {
    <RecordingStatusButton
        state=CompactRecordingState::Recording {
            elapsed_label: "00:42".into(),
        }
        shortcuts=vec!["⌘".into(), "⇧".into(), "2".into()]
    />
}
}

No timers inside the component

elapsed_label and seconds_remaining come from the parent each frame. The component has no set_interval, no Effect, no clock of its own — which is what keeps it SSR-stable and deterministic in snapshots. app-ui owns the timer that ticks both values.

Composition

stateDiagram-v2
    [*] --> Countdown
    Countdown --> Recording: countdown reaches 0
    Recording --> Paused: pause
    Paused --> Recording: resume
    Recording --> Stopping: stop
    Paused --> Stopping: stop
    Stopping --> Stopped: encoder done
    Recording --> Error: capture failure
    Paused --> Error: capture failure