ui_storybook/stories/
recorder_display.rs

1//! Display-source-card stories (M-UI.7 / AUT-127).
2
3use leptos::prelude::*;
4
5use crate::components::recorder::{DisplayPreviewFrame, DisplaySourceCard};
6use crate::fixtures::devices::{
7    sample_display_source, sample_display_source_small, sample_display_source_wide,
8};
9
10use super::{Story, StoryViewport, render};
11
12/// All display-source-card stories.
13#[must_use]
14pub fn stories() -> Vec<Story> {
15    vec![
16        Story {
17            id: "display-source-built-in-retina",
18            category: "Recorder",
19            title: "Display source — Built-in Retina (selected)",
20            viewport: StoryViewport::Fixed {
21                width: 400,
22                height: 320,
23            },
24            render: render_built_in,
25        },
26        Story {
27            id: "display-source-selected",
28            category: "Recorder",
29            title: "Display source — selected outline + open chevron",
30            viewport: StoryViewport::Fixed {
31                width: 400,
32                height: 320,
33            },
34            render: render_selected,
35        },
36        Story {
37            id: "display-source-unavailable",
38            category: "Recorder",
39            title: "Display source — unavailable (permissions)",
40            viewport: StoryViewport::Fixed {
41                width: 400,
42                height: 360,
43            },
44            render: render_unavailable,
45        },
46        Story {
47            id: "display-preview-wide",
48            category: "Recorder",
49            title: "Display preview — 21:9 ultrawide",
50            viewport: StoryViewport::Fixed {
51                width: 420,
52                height: 240,
53            },
54            render: render_preview_wide,
55        },
56        Story {
57            id: "display-preview-small",
58            category: "Recorder",
59            title: "Display preview — 16:10 single window",
60            viewport: StoryViewport::Fixed {
61                width: 280,
62                height: 220,
63            },
64            render: render_preview_small,
65        },
66    ]
67}
68
69fn render_built_in() -> String {
70    render(view! { <DisplaySourceCard view=sample_display_source(true) /> })
71}
72
73fn render_selected() -> String {
74    render(view! { <DisplaySourceCard view=sample_display_source(true) open=true /> })
75}
76
77fn render_unavailable() -> String {
78    render(view! { <DisplaySourceCard view=sample_display_source(false) unavailable=true /> })
79}
80
81fn render_preview_wide() -> String {
82    let view = sample_display_source_wide();
83    render(view! {
84        <div style="padding:8px;width:400px">
85            <DisplayPreviewFrame view=view.preview />
86        </div>
87    })
88}
89
90fn render_preview_small() -> String {
91    let view = sample_display_source_small();
92    render(view! {
93        <div style="padding:8px;width:260px">
94            <DisplayPreviewFrame view=view.preview />
95        </div>
96    })
97}
ui_storybook/stories/recorder_display.rs

ui_storybook/stories/
recorder_display.rs
