dioxus-audio 0.1.1

Audio recording, playback, analysis, and UI components for Dioxus
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

use dioxus::prelude::*;
use dioxus_icons::lucide::{Mic, Pause, Play, Square, X};

use crate::recorder::{AudioRecorder, RecorderStatus};

#[component]
pub fn RecorderControls(
    recorder: AudioRecorder,
    #[props(default)] on_cancelled: Option<EventHandler<()>>,
) -> Element {
    let status = recorder.status()();
    let state_name = recorder_state_name(&status);
    let paused = matches!(status, RecorderStatus::Paused);
    let has_completed = recorder.completed().read().is_some();

    rsx! {
        div {
            class: "dioxus-audio dioxus-audio__recorder-controls",
            "data-state": state_name,
            match status {
                RecorderStatus::Idle | RecorderStatus::Failed(_) => rsx! {
                    button {
                        class: "dioxus-audio__record-action dioxus-audio__record-action--record",
                        r#type: "button",
                        aria_label: if has_completed { "Clear completed recording before starting" } else { "Start recording" },
                        disabled: has_completed,
                        onclick: move |_| { let _ = recorder.start(); },
                        Mic { size: 24 }
                    }
                },
                RecorderStatus::RequestingPermission => rsx! {
                    button {
                        class: "dioxus-audio__record-action",
                        r#type: "button",
                        aria_label: "Cancel microphone request",
                        onclick: move |_| {
                            if recorder.cancel().is_ok()
                                && let Some(on_cancelled) = on_cancelled
                            {
                                on_cancelled.call(());
                            }
                        },
                        X { size: 20 }
                    }
                },
                RecorderStatus::Recording | RecorderStatus::Paused => rsx! {
                    button {
                        class: "dioxus-audio__record-action",
                        r#type: "button",
                        aria_label: "Cancel recording",
                        onclick: move |_| {
                            if recorder.cancel().is_ok()
                                && let Some(on_cancelled) = on_cancelled
                            {
                                on_cancelled.call(());
                            }
                        },
                        X { size: 20 }
                    }
                    button {
                        class: "dioxus-audio__record-action",
                        r#type: "button",
                        aria_label: if paused { "Resume" } else { "Pause" },
                        onclick: move |_| {
                            if paused {
                                let _ = recorder.resume();
                            } else {
                                let _ = recorder.pause();
                            }
                        },
                        if paused {
                            Play { size: 20 }
                        } else {
                            Pause { size: 20 }
                        }
                    }
                    button {
                        class: "dioxus-audio__record-action dioxus-audio__record-action--stop",
                        r#type: "button",
                        aria_label: "Stop recording",
                        onclick: move |_| { let _ = recorder.stop(); },
                        Square { size: 22 }
                    }
                },
                RecorderStatus::Stopping => rsx! {
                    button {
                        class: "dioxus-audio__record-action dioxus-audio__record-action--stop",
                        r#type: "button",
                        aria_label: "Finishing recording",
                        disabled: true,
                        Square { size: 22 }
                    }
                },
            }
        }
    }
}

fn recorder_state_name(status: &RecorderStatus) -> &'static str {
    match status {
        RecorderStatus::Idle => "idle",
        RecorderStatus::RequestingPermission => "requesting",
        RecorderStatus::Recording => "recording",
        RecorderStatus::Paused => "paused",
        RecorderStatus::Stopping => "stopping",
        RecorderStatus::Failed(_) => "error",
    }
}