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 card + library grid

Linear: AUT-135

The library's card primitive and the grid that lays cards out under a filter + sort + layout toolbar. Card lifecycle covers Ready, Processing (with percent overlay), and Failed.

Card states

StateStory
Readyrecording-card-ready
Processingrecording-card-processing
Missing thumbnailrecording-card-empty-thumbnail

Grid states

StateStory
Defaultlibrary-grid-default
Emptylibrary-grid-empty
List modelibrary-grid-list-mode

API

#![allow(unused)]
fn main() {
use ui_storybook::components::library::{
    LibraryGrid, RecordingCard, RecordingCardState,
};
use ui_storybook::fixtures::library::{sample_library_grid, sample_recording_cards};

view! { <LibraryGrid view=sample_library_grid() /> }
}

ThumbnailView is a CSS gradient

Card thumbnails are CSS background: values, not real video frames. That keeps the SSR snapshot deterministic across machines and avoids dragging the renderer into the library surface. App-side state will swap the gradient for a real url(file://...) once the encoder writes a poster frame.