euv-example 0.5.41

An example application demonstrating the euv UI framework with reactive signals, custom components, and WebAssembly.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

use crate::*;

/// A camera page component that opens the device camera with QR code
/// scanning on user action. When a QR code containing a valid HTTP or
/// HTTPS URL is detected, the app navigates to that URL.
///
/// For same-origin URLs the hash fragment is extracted and an internal
/// route navigation is performed; for external URLs a full page
/// navigation occurs via `location.href`.
///
/// Renders a page header, a card with a video preview area, camera
/// control buttons (open/close and switch), and a QR code scan result
/// display area.
///
/// # Returns
///
/// - `VirtualNode` - The camera page virtual DOM tree.
#[component]
pub(crate) fn page_camera(node: VirtualNode<PageCameraProps>) -> VirtualNode {
    let _page_camera_props: PageCameraProps = node.try_get_props().unwrap_or_default();
    let state: UseCamera = use_camera();
    camera_cleanup(state);
    html! {
        div {
            class: c_page_container()
            page_header {
                title: "Camera"
                subtitle: "Open the camera to scan QR codes. Navigates on valid URL detection."
            }
            my_card {
                title: "Camera Preview"
                p {
                    class: c_demo_text()
                    "Open the camera to start scanning QR codes. When a valid URL is detected, you will be redirected immediately."
                }
                div {
                    class: c_camera_video_container()
                    video {
                        id: CAMERA_VIDEO_ID
                        class: if { state.get_camera_open().get() } { c_camera_video_active() } else { c_camera_video_hidden() }
                        autoplay: CAMERA_VIDEO_AUTOPLAY
                        playsinline: CAMERA_VIDEO_PLAYSINLINE
                    }
                    if { state.get_camera_loading().get() } {
                        div {
                            class: c_camera_video_placeholder()
                            div {
                                class: c_camera_placeholder_content()
                                div {
                                    class: c_spinner()
                                }
                                p {
                                    class: c_camera_placeholder_text()
                                    "Opening camera..."
                                }
                            }
                        }
                    } else if { !state.get_camera_open().get() } {
                        div {
                            class: c_camera_video_placeholder()
                            div {
                                class: c_camera_placeholder_content()
                                span {
                                    class: c_camera_placeholder_icon()
                                    CAMERA_PLACEHOLDER_ICON
                                }
                                p {
                                    class: c_camera_placeholder_text()
                                    "Camera preview will appear here"
                                }
                            }
                        }
                    }
                }
                if { !state.get_error_message().get().is_empty() } {
                    div {
                        class: c_camera_error_box()
                        state.get_error_message().get()
                    }
                }
                div {
                    class: c_camera_controls()
                    if { state.get_camera_open().get() } {
                        button {
                            class: c_primary_button()
                            onclick: move |_event: Event| {
                                stop_qr_scan(state);
                                close_camera(CAMERA_VIDEO_SELECTOR);
                                state.get_camera_open().set(false);
                                state.get_scan_result().set(String::new());
                            }
                            "Close Camera"
                        }
                        button {
                            class: c_primary_button()
                            onclick: move |_event: Event| {
                                switch_camera(state);
                            }
                            if { matches!(state.get_facing().get(), CameraFacing::User) } { CAMERA_SWITCH_TO_REAR_LABEL } else { CAMERA_SWITCH_TO_FRONT_LABEL }
                        }
                    } else if { state.get_camera_loading().get() } {
                        button {
                            class: c_primary_button_disabled()
                            disabled: true
                            "Opening..."
                        }
                    } else {
                        button {
                            class: c_primary_button()
                            onclick: move |_event: Event| {
                                open_camera_and_scan(state);
                            }
                            "Open Camera"
                        }
                    }
                }
                if { !state.get_scan_result().get().is_empty() } {
                    div {
                        class: c_camera_scan_result_box()
                        div {
                            class: c_camera_scan_result_label()
                            "QR Code Result:"
                        }
                        div {
                            class: c_camera_scan_result_value()
                            state.get_scan_result().get()
                        }
                    }
                }
            }
        }
    }
}