Skip to main content

ui_storybook/stories/
recorder.rs

1//! Recorder stories — `RecordingToolbar`. UI-06..13 expand this list with
2//! capture-mode tabs, device pickers, overlay options, recording footer,
3//! and the tray popover composition.
4
5use leptos::prelude::*;
6
7use crate::components::recorder::{CaptureModeTabs, RecordingState, RecordingToolbar};
8use crate::fixtures::recorder::CaptureMode;
9
10use super::{Story, StoryViewport, render};
11
12/// All recorder-surface stories, in display order.
13#[must_use]
14pub fn stories() -> Vec<Story> {
15    vec![
16        Story {
17            id: "capture-mode-screen",
18            category: "Recorder",
19            title: "Capture mode — Screen",
20            viewport: StoryViewport::Auto,
21            render: render_capture_screen,
22        },
23        Story {
24            id: "capture-mode-window",
25            category: "Recorder",
26            title: "Capture mode — Window",
27            viewport: StoryViewport::Auto,
28            render: render_capture_window,
29        },
30        Story {
31            id: "capture-mode-area",
32            category: "Recorder",
33            title: "Capture mode — Area",
34            viewport: StoryViewport::Auto,
35            render: render_capture_area,
36        },
37        Story {
38            id: "capture-mode-disabled-area",
39            category: "Recorder",
40            title: "Capture mode — Area disabled (permissions)",
41            viewport: StoryViewport::Auto,
42            render: render_capture_disabled_area,
43        },
44        Story {
45            id: "recording-toolbar-idle",
46            category: "Recorder",
47            title: "Recording toolbar — idle (ready)",
48            viewport: StoryViewport::Auto,
49            render: render_recording_idle,
50        },
51        Story {
52            id: "recording-toolbar-recording",
53            category: "Recorder",
54            title: "Recording toolbar — recording",
55            viewport: StoryViewport::Auto,
56            render: render_recording_recording,
57        },
58        Story {
59            id: "recording-toolbar-paused",
60            category: "Recorder",
61            title: "Recording toolbar — paused",
62            viewport: StoryViewport::Auto,
63            render: render_recording_paused,
64        },
65    ]
66}
67
68fn render_recording_idle() -> String {
69    render(view! {
70        <RecordingToolbar
71            state=RecordingState::Idle
72            elapsed_seconds=0.0
73            source="Built-in Display"
74        />
75    })
76}
77
78fn render_recording_recording() -> String {
79    render(view! {
80        <RecordingToolbar
81            state=RecordingState::Recording
82            elapsed_seconds=137.0
83            source="Built-in Display"
84        />
85    })
86}
87
88fn render_recording_paused() -> String {
89    render(view! {
90        <RecordingToolbar
91            state=RecordingState::Paused
92            elapsed_seconds=137.0
93            source="Built-in Display"
94        />
95    })
96}
97
98fn render_capture_screen() -> String {
99    render(view! {
100        <div style="padding:14px">
101            <CaptureModeTabs selected=CaptureMode::Screen />
102        </div>
103    })
104}
105
106fn render_capture_window() -> String {
107    render(view! {
108        <div style="padding:14px">
109            <CaptureModeTabs selected=CaptureMode::Window />
110        </div>
111    })
112}
113
114fn render_capture_area() -> String {
115    render(view! {
116        <div style="padding:14px">
117            <CaptureModeTabs selected=CaptureMode::Area />
118        </div>
119    })
120}
121
122fn render_capture_disabled_area() -> String {
123    render(view! {
124        <div style="padding:14px">
125            <CaptureModeTabs selected=CaptureMode::Screen disabled_modes=vec![CaptureMode::Area] />
126        </div>
127    })
128}