euv-example 0.26.10

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

use super::*;

/// 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 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: UseEuvCamera = UseEuvCamera::use_camera_state();
    state.cleanup(None);
    html! {
        div {
            class: c_page_container()
            euv_header {
                icon: "📷"
                title: "Camera"
                subtitle: "Open the device camera to scan QR codes. When a valid URL is detected, the app navigates to it automatically."
            }
            euv_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_button_controls()
                    if { state.get_camera_open().get() } {
                        euv_button {
                            variant: EuvButtonVariant::Primary
                            label: "Close"
                            onclick: state.on_close(None)
                        }
                        euv_button {
                            variant: EuvButtonVariant::Primary
                            label: "Switch"
                            onclick: state.on_switch(None)
                        }
                    } else if { state.get_camera_loading().get() } {
                        euv_button {
                            variant: EuvButtonVariant::Primary
                            label: "Opening..."
                            disabled: state.camera_loading
                        }
                    } else {
                        euv_button {
                            variant: EuvButtonVariant::Primary
                            label: "Open"
                            onclick: state.on_open(None)
                        }
                    }
                }
                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()
                        }
                    }
                }
            }
        }
    }
}