Update README with docker dev workflow

.gitignore

@@ -1,3 +1,8 @@
 /target
 dist/
 server_hash.txt
+.aider*
+**.pem
+proxy/bundle
+config.toml
+proxy/config.toml

Cargo.toml

@@ -1,6 +1,6 @@
 [workspace]
 resolver = "2"
-members = [ "common","gui", "proxy"]
+members = ["common", "gui", "proxy"]
 
 [workspace.dependencies]
 serde = { version = "1.0.214", features = ["derive"] }
@@ -11,6 +11,16 @@ mumble-web2-common = { path = "common" }
 version = "0.5.0"
 package = "mumble-protocol-2x"
 default-features = false
-features = [
-  "asynchronous-codec",
-]
+features = ["asynchronous-codec"]
+
+[profile]
+
+[profile.wasm-dev]
+inherits = "dev"
+opt-level = 1
+
+[profile.server-dev]
+inherits = "dev"
+
+[profile.android-dev]
+inherits = "dev"

README.md

@@ -1,24 +1,31 @@
 # GUI Development
 
 ## Running Desktop
-1. `cargo install dioxus-cli --version 0.6.0-alpha.4`
-2. `dx build -p mumble-web2-gui --platform desktop`
+
+1. `cargo install dioxus-cli --version 0.6.3`
+2. `dx run -p mumble-web2-gui --platform desktop --release`
 
 ## Running Web
-1. `cargo install dioxus-cli --version 0.6.0-alpha.4`
-2. `cargo install cargo install wtransport --example gencert`
-3. in the proxy directory:
-   1. `cp config.toml.example config.toml`
-   2. run `gencert` and copy the certificate hash into config.toml
-   3. `cargo run -p mumble-web2-proxy` in the background
 
-## with `dx serve`
-4. in the gui directory
-   1. `export 'MUMBLE_WEB2_GUI_CONFIG={"cert_hash": <CERTIFICATE HASH HERE>, "proxy_url": "https://localhost:4433"}'`
-   2. `dx serve -p mumble-web2-gui --platform web`
-5. connect to `localhost:8080` (most common)
+1. `cargo install dioxus-cli --version 0.6.3`
+2. `dx build -p mumble-web2-gui --platform web --release`
+3. `cp config.toml.example config.toml`
+4. `cargo run -p mumble-web2-proxy` in the background
+5. connect to `localhost:8080`
 
-## with `mumble-web2-proxy` only
-4. in the gui directory:
-   1. `dx build -p mumble-web2-gui --platform web`
-5. connect to `localhost:4434` (most common)
+## Running Web (with `dx serve`)
+
+1. `cargo install dioxus-cli --version 0.6.3`
+2. `cp config.toml.example config.toml`
+3. `cargo run -p mumble-web2-proxy` in the background
+4. `cargo install cargo install wtransport --example gencert`
+5. `export 'MUMBLE_WEB2_GUI_CONFIG={"cert_hash": <CERTIFICATE HASH HERE>, "proxy_url": "https://localhost:4433"}'`
+6. `dx serve -p mumble-web2-gui --platform web`
+7. connect to `localhost:8080`
+
+## Running the dev stack with a docker based proxy
+
+1. cd docker && sudo docker compose up -d
+2. MUMBLE_WEB2_GUI_CONFIG_URL="<https://localhost:64444/config>" dx serve -p mumble-web2-gui --platform web
+3. connect to <https://localhost:64444>
+4. fill in the proxy url as <https://127.0.0.1:4433/proxy> (this should autofill but is currently broken)

config.toml.example

@@ -0,0 +1,8 @@
+https_listen_address = "127.0.0.1:4433"
+http_listen_address = "127.0.0.1:8080"
+mumble_server_url = "[SERVER_URL_HERE]"
+gui_path = "target/dx/mumble-web2-gui/release/web/public"
+
+[gui]
+force_proxy = true
+proxy_url = "https://127.0.0.1:4433/proxy"

docker/Caddyfile

@@ -0,0 +1,10 @@
+localhost:64444 {
+    tls internal
+
+    # Proxy /config path to mumble-web2-proxy
+    reverse_proxy /config http://127.0.0.1:4400
+
+    # Proxy root path to dx-serve
+    reverse_proxy http://127.0.0.1:8080
+
+}

docker/dioxus.Dockerfile

@@ -0,0 +1,22 @@
+FROM rust:1-bookworm AS base
+
+# Install cargo-binstall for faster CLI installation
+#RUN curl -L --proto '=https' --tlsv1.2 -sSf https://raw.githubusercontent.com/cargo-bins/cargo-binstall/main/install-from-binstall-release.sh | bash
+
+RUN apt-get update && apt-get install -y screen
+
+# Install dioxus-cli version 0.6.3 specifically
+RUN cargo install dioxus-cli --version 0.6.3
+
+# Set working directory
+WORKDIR /app
+
+# Add wasm32 target for web development
+RUN rustup target add wasm32-unknown-unknown
+
+# Set environment variables
+ENV PATH="/root/.cargo/bin:$PATH"
+
+# Default command (can be overridden in docker-compose)
+CMD ["dx", "--help"]
+

docker/docker-compose.yaml

@@ -0,0 +1,60 @@
+services:
+  caddy:
+    image: caddy:latest
+    ports:
+      - "64444:64444/tcp"
+      - "64444:64444/udp"
+    volumes:
+      - ./Caddyfile:/etc/caddy/Caddyfile
+      #- caddy_data:/data
+      #- caddy_config:/config
+    depends_on:
+      #- dx-serve
+      - mumble-web2-proxy
+    network_mode: host
+
+  #dx-serve:
+  #  build:
+  #    dockerfile: ./dioxus.Dockerfile
+  #  working_dir: /app
+  #  volumes:
+  #    - ..:/app
+  #  environment:
+  #    - MUMBLE_WEB2_GUI_CONFIG_URL=https://localhost:64444/config
+  #  stdin_open: true
+  #  tty: true
+  #  command: >
+  #    bash -c "
+  #    screen -dmS serve bash -c 'dx serve -p mumble-web2-gui --platform web' &&
+  #    tail -f /dev/null
+  #    "
+  #  networks:
+  #    - app-network
+
+  mumble-web2-proxy:
+    image: rust:latest
+    working_dir: /app
+    volumes:
+      - ..:/app
+      - ./proxy-config.toml:/app/config.toml
+    ports:
+      - "4433:4433/tcp"
+      - "4433:4433/udp"
+    command: ["cargo", "run", "-p", "mumble-web2-proxy"]
+    network_mode: host
+
+  mumble-server:
+    image: mumblevoip/mumble-server:latest
+    ports:
+      - "64738:64738/tcp"
+      - "64738:64738/udp"
+    environment:
+      - MUMBLE_CONFIG_WELCOMETEXT=Welcome to the Mumble server
+    network_mode: host
+#volumes:
+#  caddy_data:
+#  caddy_config:
+#
+#networks:
+#  app-network:
+#    driver: bridge

docker/proxy-config.toml

@@ -0,0 +1,12 @@
+https_listen_address = "127.0.0.1:4433"
+http_listen_address = "127.0.0.1:4400"
+#cert_path = "./cert.pem"
+#key_path = "./key.pem"
+#mumble_server_url = "voip.ohea.xyz:64738"
+mumble_server_url = "127.0.0.1:64738"
+#gui_path = "./target/dx/mumble-web2-gui/release/web/public"
+gui_path = "./target/dx/mumble-web2-gui/debug/web/public"
+
+[gui]
+force_proxy = true
+proxy_url = "https://127.0.0.1:4433/proxy"

gui/Cargo.toml

@@ -6,7 +6,7 @@ edition = "2021"
 [dependencies]
 # Web Dependencies
 # ================
-dioxus-web = { version = "0.6.0-alpha.4", optional = true }
+dioxus-web = { version = "0.6.3", optional = true }
 wasm-bindgen = { version = "0.2.92", optional = true }
 wasm-bindgen-futures = { version = "0.4.42", optional = true }
 wasm-streams = { version = "0.4.0", optional = true }
@@ -53,20 +53,22 @@ web-sys = { version = "0.3.72", features = [
   "AudioDataCopyToOptions",
   "AudioSampleFormat",
   "Storage",
-], optional = true}
+], optional = true }
 gloo-timers = { version = "0.3.0", features = ["futures"], optional = true }
 tracing-web = { version = "0.1.3", optional = true }
 
 # Desktop Dependecies
 # ===================
-dioxus-desktop = { version = "0.6.0-alpha.4", optional = true}
+dioxus-desktop = { version = "0.6.3", optional = true }
 tokio = { version = "1.41.1", features = ["net", "rt"], optional = true }
 tokio-rustls = { version = "0.26.0", optional = true }
-
+opus = { version = "0.3.0", optional = true }
+cpal = { version = "0.15.3", optional = true }
+dasp_ring_buffer = { version = "0.11.0", optional = true }
 
 # Base Dependencies
 # ================
-dioxus = { version = "0.6.0-alpha.4" }
+dioxus = { version = "0.6.3" }
 once_cell = "1.19.0"
 asynchronous-codec = { workspace = true }
 futures = "0.3.30"
@@ -80,12 +82,21 @@ ordermap = "0.5.3"
 html-purifier = "0.3.0"
 markdown = "0.3.0"
 futures-channel = "0.3.30"
-sir = { git = "https://gitlab.com/samsartor/sir", features = ["dioxus"] } # dioxus 0.6
+sir = { git = "https://gitlab.com/samsartor/sir", features = [
+  "dioxus",
+] } # dioxus 0.6
 mumble-web2-common = { workspace = true }
 serde = { workspace = true }
 tracing-subscriber = { version = "0.3.18", features = ["ansi"] }
 tracing = "0.1.40"
 color-eyre = "0.6.3"
+crossbeam-queue = "0.3.11"
+lol_html = "2.2.0"
+rfd = "0.15.2"
+base64 = "0.22"
+mime_guess = "2.0.5"
+async_cell = "0.2.3"
+reqwest = { version = "0.12.22", features = ["json"] }
 
 [features]
 web = [
@@ -100,4 +111,12 @@ web = [
   "gloo-timers",
   "tracing-web",
 ]
-desktop = ["dioxus/desktop", "tokio", "tokio-rustls", "tracing-subscriber/env-filter"]
+desktop = [
+  "dioxus/desktop",
+  "tokio",
+  "tokio-rustls",
+  "tracing-subscriber/env-filter",
+  "opus",
+  "cpal",
+  "dasp_ring_buffer",
+]

gui/Dioxus.toml

@@ -11,7 +11,6 @@ asset_dir = "public"
 [web.app]
 # HTML title tag content
 title = "Mumble Web 2"
-base_path = "gui"
 
 [web.watcher]
 # when watcher trigger, regenerate the `index.html`

gui/src/app.rs

@@ -1,9 +1,13 @@
 #![allow(non_snake_case)]
 
+use base64::{display::Base64Display, prelude::BASE64_URL_SAFE};
 use dioxus::prelude::*;
+use mime_guess::Mime;
+use mumble_web2_common::GuiConfig;
 use ordermap::OrderSet;
 use sir::{css, global_css};
 use std::collections::HashMap;
+use tracing::error;
 
 use crate::{imp, CONFIG};
 
@@ -27,6 +31,12 @@ pub enum Command {
         markdown: String,
         channels: Vec<ChannelId>,
     },
+    SendFile {
+        bytes: Vec<u8>,
+        name: String,
+        mime: Option<Mime>,
+        channels: Vec<ChannelId>,
+    },
     SetMute {
         mute: bool,
     },
@@ -125,7 +135,7 @@ impl UserIcon {
 }
 
 #[component]
-pub fn UserPill(name: String, icon: UserIcon) -> Element {
+pub fn UserPill(name: String, icon: UserIcon, isself: bool) -> Element {
     let pill = css!(
         "
         border-radius: 100px;
@@ -139,16 +149,22 @@ pub fn UserPill(name: String, icon: UserIcon) -> Element {
     "
     );
 
+    let pill_self = css!(
+        "
+        font-weight: bolder;
+        "
+    );
+
     let color = match icon {
-        UserIcon::Normal => "var(--accent-a)",
-        UserIcon::Muted => "var(--accent-b)",
-        UserIcon::Deafened => "var(--accent-c)",
-        UserIcon::None => "var(--accent-a)",
+        UserIcon::Normal => "var(--accent-normal)",
+        UserIcon::Muted => "var(--accent-muted)",
+        UserIcon::Deafened => "var(--accent-deafened)",
+        UserIcon::None => "var(--accent-normal)",
     };
 
     rsx!(
         div {
-            class: "{pill}",
+            class: match isself { true => format!("{pill} {pill_self}"), false => format!("{pill}") },
             style: "background-color: {color}",
             { icon.url().map(|url| rsx!(img { src: url })) }
             "\u{00A0}{name}\u{00A0}"
@@ -163,10 +179,12 @@ pub fn User(id: UserId) -> Element {
         Some(state) => rsx!(UserPill {
             name: state.name.clone(),
             icon: state.icon(),
+            isself: server.session.unwrap() == id,
         }),
         None => rsx!(UserPill {
             name: format!("unknown user ({id})"),
             icon: UserIcon::None,
+            isself: false,
         }),
     }
 }
@@ -212,9 +230,9 @@ pub fn Channel(id: ChannelId) -> Element {
             summary {
                 span {
                     role: "button",
-                    prevent_default: "onclick",
                     ondoubleclick: move |evt| {
                         evt.stop_propagation();
+                        evt.prevent_default();
                         net.send(EnterChannel { channel: id, user })
                     },
                     "{state.name}"
@@ -235,12 +253,41 @@ pub fn Channel(id: ChannelId) -> Element {
     )
 }
 
+pub fn pick_and_send_file(net: &Coroutine<Command>) {
+    let channels = if let Some(user) = STATE.server.read().this_user() {
+        vec![user.channel]
+    } else {
+        return;
+    };
+    let dialog = rfd::AsyncFileDialog::new().pick_file();
+    let sender = net.tx();
+    spawn(async move {
+        let Some(handle) = dialog.await else { return };
+        let name = handle.file_name();
+        let bytes = handle.read().await;
+        let mime = mime_guess::from_path(&name).first();
+        let _ = sender.unbounded_send(SendFile {
+            bytes,
+            name,
+            mime,
+            channels,
+        });
+    });
+}
+
 #[component]
 pub fn ChatView() -> Element {
     let net: Coroutine<Command> = use_coroutine_handle();
     let server = STATE.server.read();
     let mut draft = use_signal(|| "".to_string());
 
+    let chat_panel = css!(
+        "
+        display: flex;
+        flex-direction: column;
+    "
+    );
+
     let chat_history = css!(
         "
         overflow-y: auto;
@@ -258,18 +305,44 @@ pub fn ChatView() -> Element {
     "
     );
 
+    let chat_box_wrapper = css!(
+        "
+        padding: 16px;
+        border-top: solid var(--line-color) var(--line-width);
+    "
+    );
+
     let chat_box = css!(
         "
         display: flex;
         flex-direction: row;
-        padding: 16px;
-        gap: 8px;
-        border-top: solid var(--line-color) var(--line-width);
+        gap: 16px;
+
+        background-color: var(--light-bg-color);
+
+        padding-top: 16px;
+        padding-bottom: 16px;
+
+        padding-left: 8px;
+        padding-right: 16px;
+
+        border-radius: 8px;
 
         input {
+            color: white;
+            background-color: var(--light-bg-color);
+
+            font-size: larger;
+
             flex-grow: 1;
-            padding: 8px;
+
+            border: none;
         }
+
+        input:focus {
+            outline: none;
+        }
+
     "
     );
 
@@ -284,37 +357,349 @@ pub fn ChatView() -> Element {
 
     rsx!(
         div {
-            class: "{chat_history}",
-            for chat in server.chat.iter() {
-                div {
-                    class: "{chat_message}",
-                    if let Some(sender) = chat.sender.and_then(|u| server.users.get(&u)) {
-                        UserPill {
-                            name: sender.name.clone(),
-                            icon: UserIcon::None,
+            class: "{chat_panel}",
+            div {
+                class: "{chat_history}",
+                for chat in server.chat.iter() {
+                    div {
+                        class: "{chat_message}",
+                        if let Some(sender) = chat.sender.and_then(|u| server.users.get(&u)) {
+                            UserPill {
+                                name: sender.name.clone(),
+                                icon: UserIcon::None,
+                                isself: false,
+                            }
+                        }
+                        span {
+                            dangerous_inner_html: "{chat.dangerous_html}",
                         }
                     }
-                    span {
-                        dangerous_inner_html: "{chat.dangerous_html}",
+                }
+            }
+            div {
+                class: "{chat_box_wrapper}",
+                div {
+                    class: "{chat_box}",
+                    input {
+                        placeholder: "say something",
+                        value: "{draft.read()}",
+                        oninput: move |evt| draft.set(evt.value().clone()),
+                        onkeypress: move |evt: Event<KeyboardData>| {
+                            if evt.code() == Code::Enter && evt.modifiers().is_empty() {
+                                do_send();
+                            }
+                        }
                     }
+                    div {
+                        span {
+                            onclick: move |_| pick_and_send_file(&net),
+                            class: "material-symbols-outlined",
+                            style: "color: rgba(255, 255, 255, 0.5); font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48; vertical-align: middle; font-size: 35px; user-select: none;",
+                            "attach_file",
+                        }
+                    }
+                    div {
+                        span {
+                            onclick: move |_| do_send(),
+                            class: "material-symbols-outlined",
+                            style: "color: rgba(255, 255, 255, 0.5); font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48; vertical-align: middle; font-size: 35px; user-select: none;",
+                            "send",
+                        }
+                    }
+                }
+                //button {
+                //    onclick: move |_| do_send(),
+                //    "Send"
+                //}
+            }
+        }
+    )
+}
+
+// true => rsx!(span { class: "material-symbols-outlined", style: "{button_style}", "mic_off"}),
+//Connecting => rsx! {
+//    div {
+//        class: "{connecting_status}",
+//        span {
+//            class: "material-symbols-outlined",
+//            style: "vertical-align: middle; font-size: 30px;",
+//            "signal_cellular_alt_2_bar"
+//        }
+//        span {
+//            style: "width: 5px; display: inline-block;"
+//        }
+//        span {
+//            style: "vertical-align: middle; font-size: 30px;",
+//            "Connecting"
+//        }
+//    }
+//},
+
+#[component]
+pub fn ControlView() -> Element {
+    let config_future = use_resource(|| CONFIG.get());
+
+    let net: Coroutine<Command> = use_coroutine_handle();
+    let status = &STATE.status;
+    let server = STATE.server.read();
+    let Some(&UserState {
+        deaf,
+        self_deaf,
+        mute,
+        self_mute,
+        ref name,
+        channel,
+        ..
+    }) = server.this_user()
+    else {
+        return rsx!();
+    };
+
+    let current_channel_name = server.channels[&channel].name.clone();
+
+    let Some(proxy_url) = config_future
+        .read_unchecked()
+        .as_ref()
+        .and_then(|gui_config| gui_config.proxy_url.clone())
+    else {
+        return rsx!();
+    };
+
+    let button_row = css!(
+        r#"
+        display: flex;
+        gap: 10px;
+    "#
+    );
+
+    let spacer = css!(
+        r#"
+        flex-grow: 1;
+    "#
+    );
+
+    let toggle_button = css!(
+        r#"
+        padding: 8px;
+        height: 100%;
+        aspect-ratio: 1 / 1;
+
+        background-color: unset;
+
+        border: solid rgb(255 255 255 / 0.1) 3px;
+        border-radius: 10px;
+        color: rgb(255 255 255 / 50%);
+
+        transition: all 0.5s ease-in-out;
+        "#
+    );
+
+    let toggle_button_on = css!(
+        r#"
+        padding: 8px;
+        height: 100%;
+        aspect-ratio: 1 / 1;
+
+        background-color: oklch(0.5 0.1381 21.71 / 20.12%);
+
+        border: solid rgb(255 255 255 / 0) 3px;
+        border-radius: 10px;
+        color: oklch(0.53 0.1505 21.71 / 89.38%);
+
+        transition: all 0.25s ease-in-out;
+        "#
+    );
+
+    let button_style = r#"
+        font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
+        vertical-align: middle;
+        font-size: 35px;
+    "#;
+
+    let connecting_status = css!(
+        r#"
+            color: yellow;
+        "#
+    );
+
+    let connected_status = css!(
+        r#"
+            color: oklch(0.55 0.1184 141.35);
+        "#
+    );
+
+    let disconnected_status = css!(
+        r#"
+            color: gray;
+        "#
+    );
+
+    let failed_status = css!(
+        r#"
+            color: red;
+        "#
+    );
+
+    let connection_info = css!(
+        r#"
+            color: gray;
+        "#
+    );
+
+    let user_edit_button = css!(
+        r#"
+            background-color: oklch(0.53 0.1431 264.18);
+            border-radius: 50%;
+            aspect-ratio: 1 / 1;
+        "#
+    );
+
+    let connection_status = match &*status.read() {
+        Connecting => rsx! {
+            div {
+                class: "{connecting_status}",
+                span {
+                    class: "material-symbols-outlined",
+                    style: "vertical-align: middle; font-size: 30px;",
+                    "signal_cellular_alt_2_bar"
+                }
+                span {
+                    style: "width: 5px; display: inline-block;"
+                }
+                span {
+                    style: "vertical-align: middle; font-size: 30px;",
+                    "Connecting"
+                }
+            }
+        },
+        Connected => rsx! {
+            div {
+                div {
+                    class: "{connected_status}",
+                    span {
+                        class: "material-symbols-outlined",
+                        style: "vertical-align: middle; font-size: 30px;",
+                        "signal_cellular_alt"
+                    }
+                    span {
+                        style: "width: 5px; display: inline-block;"
+                    }
+                    span {
+                        style: "vertical-align: middle; font-size: 25px;",
+                        "Connected"
+                    }
+                }
+                div {
+                    class: "{connection_info}",
+                    span { style: "width: 3px; display: inline-block;"}
+                    span { "{current_channel_name}" }
+                    span { " — " }
+                    span { "{proxy_url}" }
+                }
+            }
+        },
+        Disconnected => rsx! {
+            div {
+                class: "{disconnected_status}",
+                span {
+                    class: "material-symbols-outlined",
+                    style: "vertical-align: middle;",
+                    "signal_disconnected"
+                }
+                span {
+                    style: "width: 5px; display: inline-block;"
+                }
+                span {
+                    style: "vertical-align: middle;",
+                    "Disconnected"
+                }
+            }
+        },
+        Failed(_) => rsx! {
+            div {
+                class: "{failed_status}",
+                span {
+                    class: "material-symbols-outlined",
+                    style: "vertical-align: middle;",
+                    "error"
+                }
+                span {
+                    style: "width: 5px; display: inline-block;"
+                }
+                span {
+                    style: "vertical-align: middle;",
+                    "Failed"
+                }
+            }
+        },
+    };
+
+    rsx!(
+        // Server control
+        div {
+            class: "{button_row}",
+            div {
+                {connection_status}
+            }
+            span { class: "{spacer}" }
+            button {
+                class: "{toggle_button}",
+                onclick: move |_| net.send(Disconnect),
+                span {
+                    class: "material-symbols-outlined",
+                    style: "{button_style}",
+                    "signal_disconnected"
                 }
             }
         }
+        hr { style: "width: 100%;" }
+        // User control
         div {
-            class: "{chat_box}",
-            input {
-                placeholder: "say something",
-                value: "{draft.read()}",
-                oninput: move |evt| draft.set(evt.value().clone()),
-                onkeypress: move |evt: Event<KeyboardData>| {
-                    if evt.code() == Code::Enter && evt.modifiers().is_empty() {
-                        do_send();
-                    }
+            class: "{button_row}",
+            button {
+                class: "{user_edit_button}",
+                span {
+                    class: "material-symbols-outlined",
+                    style: "color: oklch(0.65 0.2245 28.06); font-size: 45px; font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;",
+                    "person_edit"
+                }
+            }
+            div {
+                div {
+                    span { style: "font-size: 25px;", "{name}" }
+                }
+                div {
+                    span { style: "font-size: 20px; color: gray;", "some data" }
+                }
+            }
+            span { class: "{spacer}" }
+            button {
+                class: match mute || self_mute {
+                    true => toggle_button_on,
+                    false => toggle_button,
+                },
+                role: "switch",
+                aria_checked: mute || self_mute,
+                disabled: mute,
+                onclick: move |_| net.send(SetMute { mute: !self_mute }),
+                match mute || self_mute {
+                    true => rsx!(span { class: "material-symbols-outlined", style: "{button_style}", "mic_off"}),
+                    false => rsx!(span { class: "material-symbols-outlined", style: "{button_style}", "mic"}),
                 }
             }
             button {
-                onclick: move |_| do_send(),
-                "Send"
+                class: match deaf || self_deaf {
+                    true => toggle_button_on,
+                    false => toggle_button,
+                },
+                role: "switch",
+                aria_checked: deaf || self_deaf,
+                disabled: deaf,
+                onclick: move |_| net.send(SetDeaf { deaf: !self_deaf }),
+                match deaf || self_deaf {
+                    true => rsx!(span { class: "material-symbols-outlined", style: "{button_style}", "volume_off"}),
+                    false => rsx!(span { class: "material-symbols-outlined", style: "{button_style}", "volume_up"}),
+                }
             }
         }
     )
@@ -338,21 +723,21 @@ pub fn ServerView() -> Element {
     let grid = css!(
         r#"
         display: grid;
-        height: 100%;
+       height: 100%;
         background-color: var(--bg-color);
 
-        grid-template-rows: auto 1fr;
-        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr auto;
+        grid-template-columns: 1fr 2fr;
         grid-template-areas:
-            "bar bar"
-            "tree chat";
+            "tree chat"
+            "control chat";
 
         @media screen and (max-width: 720px) {
             grid-template-rows: auto 1fr 1fr;
             grid-template-columns: 1fr;
             grid-template-areas:
-                "bar"
                 "tree"
+                "control"
                 "chat";
         }
     "#
@@ -369,7 +754,7 @@ pub fn ServerView() -> Element {
     let chat_box = css!(
         "
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
         grid-area: chat;
         border-left: solid var(--line-color) var(--line-width);
 
@@ -380,60 +765,24 @@ pub fn ServerView() -> Element {
     "
     );
 
-    let top_bar = css!(
+    let control_box = css!(
         "
         padding: 16px;
-        grid-area: bar;
-        background-color: var(--login-bg-color);
+        margin: 16px;
+        background-color: var(--light-bg-color);
+        border-radius: 10px;
+        overflow: hidden;
+        grid-area: control;
 
         display: flex;
-        flex-direction: row;
-        gap: 16px;
-        align-items: center;
-
-        button {
-            padding: 8px;
-
-            img {
-                height: 1em;
-                vertical-align: text-bottom;
-            }
-        }
+        gap: 10px;
+        flex-direction: column;
     "
     );
 
     rsx!(
         div {
             class: "{grid}",
-            div {
-                class: "{top_bar}",
-                button {
-                    onclick: move |_| net.send(Disconnect),
-                    "Disconnect"
-                }
-                button {
-                    role: "switch",
-                    aria_checked: mute || self_mute,
-                    disabled: mute,
-                    onclick: move |_| net.send(SetMute { mute: !self_mute }),
-                    match mute || self_mute {
-                        true => rsx!(img { src: asset!("assets/mic-off-svgrepo-com.svg") }),
-                        false => rsx!(img { src: asset!("assets/mic-svgrepo-com.svg") }),
-                    }
-                    "\u{00A0}Mute"
-                }
-                button {
-                    role: "switch",
-                    aria_checked: deaf || self_deaf,
-                    disabled: deaf,
-                    onclick: move |_| net.send(SetDeaf { deaf: !self_deaf }),
-                    match deaf || self_deaf {
-                        true => rsx!(img { src: asset!("assets/speaker-muted-svgrepo-com.svg") }),
-                        false => rsx!(img { src: asset!("assets/speaker-medium-svgrepo-com.svg") }),
-                    }
-                    "\u{00A0}Deafen"
-                }
-            }
             div {
                 class: "{channel_box}",
                 for (id, state) in server.channels.iter() {
@@ -446,6 +795,10 @@ pub fn ServerView() -> Element {
                 class: "{chat_box}",
                 ChatView {}
             }
+            div {
+                class: "{control_box}",
+                ControlView {}
+            }
         }
     )
 }
@@ -453,7 +806,15 @@ pub fn ServerView() -> Element {
 #[component]
 pub fn LoginView() -> Element {
     let net: Coroutine<Command> = use_coroutine_handle();
-    let default_address = CONFIG.proxy_url.as_deref().unwrap_or("");
+
+    let config_future = use_resource(|| CONFIG.get());
+
+    let default_address = &*config_future
+        .read_unchecked()
+        .as_ref()
+        .and_then(|gui_config| gui_config.proxy_url.clone())
+        .unwrap_or("".to_string());
+
     let mut address = use_signal(|| default_address.to_string());
 
     let previous_username = imp::load_username();
@@ -566,17 +927,23 @@ pub fn LoginView() -> Element {
 
 pub fn app() -> Element {
     use_coroutine(|rx: UnboundedReceiver<Command>| super::network_entrypoint(rx));
+    use_future(|| async move {
+        if let Err(err) = imp::load_config().await {
+            error!("{}", err)
+        }
+    });
 
     global_css!(
         "
     :root {
-        --txt-color: white;
-        --bg-color: #372f3a;
+        --txt-color: oklch(0.9 0 99);
+        --bg-color: oklch(0.15 0.01 338.64);
+        --light-bg-color: oklch(0.25 0.01 338.64);
         --login-bg-color: #5d7680;
         --primary-btn-color: #7bad9f;
-        --accent-a: #8eb29a;
-        --accent-b: #6a9395;
-        --accent-c: #464459;
+        --accent-normal: #7bad9f;
+        --accent-muted: #ff746c;
+        --accent-deafened: #464459;
         --line-width: 2px;
         --line-color: white;
     }
@@ -594,8 +961,10 @@ pub fn app() -> Element {
         overflow: auto;
         color: var(--txt-color);
 
-        font-family: sans-serif;
-        font-size: large;
+        font-family: Nunito;
+        font-size: 15pt;
+        font-weight: 600;
+
     }
 
     button {
@@ -617,21 +986,24 @@ pub fn app() -> Element {
 
     input:focus,input:focus-visible {
         border: none;
-        outline: solid var(--line-width) var(--accent-a);
+        outline: solid var(--line-width) var(--accent-normal);
         outline-offset: -3px;
     }
 
     a:link {
-        color: var(--accent-a);
+        color: var(--accent-normal);
     }
 
     a:visited {
-        color: var(--accent-b);
+        color: var(--accent-muted);
     }
     "
     );
 
     rsx!(
+        document::Link{ rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" }
+        document::Link{ rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" }
+
         sir::AppStyle { }
         match *STATE.status.read() {
             Connected => rsx!(ServerView {}),

gui/src/imp/desktop.rs

@@ -1,11 +1,13 @@
 use crate::app::Command;
-use color_eyre::eyre::Error;
+use color_eyre::eyre::{eyre, Error};
+use cpal::traits::{DeviceTrait, HostTrait};
 use dioxus::hooks::{UnboundedReceiver, UnboundedSender};
 use futures::io::{AsyncRead, AsyncWrite};
 use mumble_protocol::control::{ClientControlCodec, ControlPacket};
 use mumble_protocol::Serverbound;
 use mumble_web2_common::GuiConfig;
 use std::net::ToSocketAddrs;
+use std::sync::Mutex;
 use std::{fmt, io, sync::Arc};
 use tokio::net::TcpStream;
 use tokio_rustls::rustls;
@@ -15,6 +17,7 @@ use tokio_rustls::rustls::ClientConfig;
 use tokio_rustls::rustls::DigitallySignedStruct;
 use tokio_rustls::TlsConnector;
 use tokio_util::compat::{TokioAsyncReadCompatExt as _, TokioAsyncWriteCompatExt as _};
+use tracing::{error, warn};
 
 pub use tokio::task::spawn;
 pub use tokio::time::sleep;
@@ -25,25 +28,106 @@ impl<T: AsyncRead + Unpin + Send + 'static> ImpRead for T {}
 pub trait ImpWrite: AsyncWrite + Unpin + Send + 'static {}
 impl<T: AsyncWrite + Unpin + Send + 'static> ImpWrite for T {}
 
-pub struct AudioSystem();
+pub struct AudioSystem {
+    output: cpal::Device,
+    input: cpal::Device,
+}
+
+type Buffer = Arc<Mutex<dasp_ring_buffer::Bounded<Vec<i16>>>>;
 
 impl AudioSystem {
-    pub fn new(sender: UnboundedSender<ControlPacket<Serverbound>>) -> Result<Self, Error> {
+    pub fn new() -> Result<Self, Error> {
         // TODO
-        Ok(AudioSystem())
+        let host = cpal::default_host();
+        let name = host.id();
+        Ok(AudioSystem {
+            output: host
+                .default_output_device()
+                .ok_or(eyre!("no output devices from {name:?}"))?,
+            input: host
+                .default_input_device()
+                .ok_or(eyre!("no input devices from {name:?}"))?,
+        })
+    }
+
+    pub fn start_recording(&mut self, each: impl FnMut(Vec<u8>) + 'static) -> Result<(), Error> {
+        // TODO
+        Ok(())
     }
 
     pub fn create_player(&mut self) -> Result<AudioPlayer, Error> {
-        // TODO
-        Ok(AudioPlayer())
+        let buffer = Arc::new(Mutex::new(dasp_ring_buffer::Bounded::from_raw_parts(
+            0,
+            0,
+            vec![
+            0;
+            2400 // 50ms of buffer
+        ],
+        )));
+        let decoder = opus::Decoder::new(48_000, opus::Channels::Mono)?;
+        let stream = {
+            let buffer = buffer.clone();
+            self.output.build_output_stream(
+                &cpal::StreamConfig {
+                    channels: 1,
+                    sample_rate: cpal::SampleRate(48_000),
+                    buffer_size: cpal::BufferSize::Fixed(480), // 10ms playback delay
+                },
+                move |frame, info| {
+                    let mut buffer = buffer.lock().unwrap();
+                    for x in frame.iter_mut() {
+                        match buffer.pop() {
+                            Some(y) => {
+                                *x = y;
+                            }
+                            None => {
+                                *x = 0;
+                            }
+                        }
+                    }
+                },
+                move |err| error!("could not create output stream {err:?}"),
+                None,
+            )?
+        };
+        Ok(AudioPlayer {
+            decoder,
+            stream,
+            buffer,
+            tmp: vec![0; 2400],
+        })
     }
 }
 
-pub struct AudioPlayer();
+pub struct AudioPlayer {
+    decoder: opus::Decoder,
+    stream: cpal::Stream,
+    buffer: Buffer,
+    tmp: Vec<i16>,
+}
 
 impl AudioPlayer {
     pub fn play_opus(&mut self, payload: &[u8]) {
-        // TODO
+        let len = loop {
+            match self.decoder.decode(payload, &mut self.tmp, false) {
+                Ok(l) => break l,
+                Err(e) => {
+                    error!("opus decode error {e:?}");
+                    return;
+                }
+            }
+        };
+
+        let mut buffer = self.buffer.lock().unwrap();
+        let mut overrun = 0;
+        for x in &self.tmp[..len] {
+            if let Some(_) = buffer.push(*x) {
+                overrun += 1;
+            }
+        }
+        if overrun > 0 {
+            warn!("playback overrun by {overrun} samples");
+        }
     }
 }
 
@@ -140,8 +224,10 @@ pub fn load_username() -> Option<String> {
     return None;
 }
 
-pub fn load_config() -> Option<GuiConfig> {
-    None
+pub async fn load_config() -> color_eyre::Result<GuiConfig> {
+    color_eyre::eyre::bail!(
+        "there is no config on desktop because desktops cannot be configured as they are tables"
+    )
 }
 
 pub fn init_logging() {

gui/src/imp/web.rs

@@ -74,20 +74,22 @@ impl<T> ResultExt<T> for Result<T, JsError> {
 pub struct AudioSystem(AudioContext);
 
 impl AudioSystem {
-    pub fn new(sender: UnboundedSender<ControlPacket<Serverbound>>) -> Result<Self, Error> {
+    pub fn new() -> Result<Self, Error> {
         // Create MediaStreams to playback decoded audio
         // The audio context is used to reproduce audio.
         let audio_context = configure_audio_context();
+        Ok(AudioSystem(audio_context))
+    }
 
-        let audio_context_worklet = audio_context.clone();
+    pub fn start_recording(&mut self, each: impl FnMut(Vec<u8>) + 'static) -> Result<(), Error> {
+        let audio_context_worklet = self.0.clone();
         spawn(async move {
-            match create_encoder_worklet(&audio_context_worklet, sender).await {
+            match run_encoder_worklet(&audio_context_worklet, each).await {
                 Ok(node) => info!("created encoder worklet: {:?}", &node),
                 Err(err) => error!("could not create encoder worklet: {err}"),
             }
         });
-
-        Ok(AudioSystem(audio_context))
+        Ok(())
     }
 
     pub fn create_player(&mut self) -> Result<AudioPlayer, Error> {
@@ -191,9 +193,9 @@ impl PromiseExt for Promise {
     }
 }
 
-async fn create_encoder_worklet(
+async fn run_encoder_worklet(
     audio_context: &AudioContext,
-    packets: UnboundedSender<ControlPacket<mumble_protocol::Serverbound>>,
+    mut each: impl FnMut(Vec<u8>) + 'static,
 ) -> Result<AudioWorkletNode, Error> {
     let stream = window()
         .unwrap()
@@ -234,35 +236,12 @@ async fn create_encoder_worklet(
     let encoder_error: Closure<dyn FnMut(JsValue)> =
         Closure::new(|e| error!("error encoding audio {:?}", e));
 
-    let download_buffer = std::cell::RefCell::new(Vec::new());
-
     // This knows what MediaStreamTrackGenerator to use as it closes around it
-    let mut sequence_num = 0;
     let output: Closure<dyn FnMut(EncodedAudioChunk)> =
         Closure::new(move |audio_data: EncodedAudioChunk| {
             let mut array = vec![0u8; audio_data.byte_length() as usize];
             audio_data.copy_to_with_u8_slice(&mut array);
-
-            download_buffer.borrow_mut().push(array.clone());
-            if download_buffer.borrow().len() > 200 {
-                //download_data(download_buffer.borrow().to_vec(), "download_buffer.opus");
-                //download_data(
-                //    ass::encode(download_buffer.borrow().to_vec(), 960, 0),
-                //    "download_buffer.opus",
-                //);
-                download_buffer.borrow_mut().clear();
-            }
-
-            let _ =
-                packets.unbounded_send(ControlPacket::UDPTunnel(Box::new(VoicePacket::Audio {
-                    _dst: std::marker::PhantomData,
-                    target: 0,
-                    session_id: (),
-                    seq_num: sequence_num,
-                    payload: VoicePacketPayload::Opus(array.into(), false),
-                    position_info: None,
-                })));
-            sequence_num = sequence_num.wrapping_add(2);
+            each(array);
         });
 
     let audio_encoder = AudioEncoder::new(&AudioEncoderInit::new(
@@ -341,7 +320,8 @@ pub async fn network_connect(
     )
     .ey()?;
 
-    if let Some(server_hash) = &CONFIG.cert_hash {
+    if let Some(server_hash) = &CONFIG.try_get().and_then(|cfg| cfg.cert_hash) {
+        error!("{:?}", server_hash);
         let hash = web_sys::js_sys::Uint8Array::from(server_hash.as_slice());
         web_sys::js_sys::Reflect::set(&object, &"value".into(), &hash).ey()?;
     }
@@ -415,8 +395,19 @@ fn load_config_from_env() -> Option<GuiConfig> {
     serde_json::from_str(option_env!("MUMBLE_WEB2_GUI_CONFIG")?).ok()?
 }
 
-pub fn load_config() -> Option<GuiConfig> {
-    load_config_from_window().or_else(load_config_from_env)
+pub async fn load_config() -> color_eyre::Result<()> {
+    let config_url = option_env!("MUMBLE_WEB2_GUI_CONFIG_URL").ok_or(eyre!("foo"))?;
+
+    let config = reqwest::get(config_url)
+        .await
+        .unwrap()
+        .json::<GuiConfig>()
+        .await
+        .unwrap();
+
+    crate::CONFIG.set(config);
+
+    Ok(())
 }
 
 pub fn init_logging() {

gui/src/lib.rs

@@ -12,9 +12,11 @@ use futures::SinkExt as _;
 use futures::StreamExt as _;
 use futures_channel::mpsc::UnboundedSender;
 pub use imp::spawn;
+use msghtml::process_message_html;
 use mumble_protocol::control::msgs;
 use mumble_protocol::control::ControlCodec;
 use mumble_protocol::control::ControlPacket;
+use mumble_protocol::voice::VoicePacket;
 use mumble_protocol::voice::VoicePacketPayload;
 use mumble_protocol::Clientbound;
 use mumble_protocol::Serverbound;
@@ -29,8 +31,10 @@ use tracing::info;
 
 pub mod app;
 pub mod imp;
+mod msghtml;
 
-pub static CONFIG: Lazy<GuiConfig> = Lazy::new(|| imp::load_config().unwrap_or_default());
+//pub static CONFIG: Lazy<GuiConfig> = Lazy::new(|| imp::load_config().unwrap_or_default());
+pub static CONFIG: async_cell::sync::AsyncCell<GuiConfig> = async_cell::sync::AsyncCell::new();
 
 pub async fn network_entrypoint(mut event_rx: UnboundedReceiver<Command>) {
     loop {
@@ -103,7 +107,23 @@ pub async fn network_loop<R: imp::ImpRead, W: imp::ImpWrite>(
         });
     }
 
-    let mut audio = imp::AudioSystem::new(send_chan.clone())?;
+    let mut audio = imp::AudioSystem::new()?;
+    {
+        let send_chan = send_chan.clone();
+        let mut sequence_num = 0;
+        audio.start_recording(move |opus_frame| {
+            let _ =
+                send_chan.unbounded_send(ControlPacket::UDPTunnel(Box::new(VoicePacket::Audio {
+                    _dst: std::marker::PhantomData,
+                    target: 0,
+                    session_id: (),
+                    seq_num: sequence_num,
+                    payload: VoicePacketPayload::Opus(opus_frame.into(), false),
+                    position_info: None,
+                })));
+            sequence_num = sequence_num.wrapping_add(2);
+        });
+    }
 
     // Create map of session_id -> AudioDecoder
     let mut decoder_map = HashMap::new();
@@ -198,6 +218,47 @@ fn accept_command(
             u.set_channel_id(channels);
             let _ = send_chan.unbounded_send(u.into());
         }
+        SendFile {
+            ref bytes,
+            name,
+            mime,
+            channels,
+        } => {
+            use base64::{display::Base64Display, prelude::BASE64_STANDARD};
+            let html = match mime {
+                Some(mime) if mime.type_() == "image" => format!(
+                    "<img src=\"data:{};base64,{}\" />",
+                    mime,
+                    Base64Display::new(bytes, &BASE64_STANDARD)
+                ),
+                Some(mime) => format!(
+                    "<a href=\"data:{};base64,{}\" download>{name}</a>",
+                    mime,
+                    Base64Display::new(bytes, &BASE64_STANDARD)
+                ),
+                None => format!(
+                    "<a href=\"data:application/octet-stream;base64,{}\" download>{name}</a>",
+                    Base64Display::new(bytes, &BASE64_STANDARD)
+                ),
+            };
+
+            {
+                let mut server = STATE.server.write();
+                let Some(me) = server.session else {
+                    bail!("not signed in with a session id")
+                };
+                server.chat.push(Chat {
+                    raw: "".to_string(),
+                    dangerous_html: html.clone(),
+                    sender: Some(me),
+                })
+            }
+
+            let mut u = msgs::TextMessage::new();
+            u.set_message(html);
+            u.set_channel_id(channels);
+            let _ = send_chan.unbounded_send(u.into());
+        }
         SetMute { mute } => {
             let mut u = msgs::UserState::new();
             u.set_session(session);
@@ -358,7 +419,7 @@ fn accept_packet(
                     } else {
                         None
                     },
-                    dangerous_html: html_purifier::purifier(&text, Default::default()),
+                    dangerous_html: process_message_html(&text),
                     raw: text,
                 });
             }
@@ -370,7 +431,7 @@ fn accept_packet(
                 let text = u.get_welcome_text().to_string();
                 server.chat.push(Chat {
                     sender: None,
-                    dangerous_html: html_purifier::purifier(&text, Default::default()),
+                    dangerous_html: process_message_html(&text),
                     raw: text,
                 });
             }

gui/src/msghtml.rs

@@ -0,0 +1,110 @@
+// This is a fork of https://github.com/mehmetcansahin/html-purifier
+
+use lol_html::html_content::{Comment, Element};
+use lol_html::{comments, element, rewrite_str, RewriteStrSettings};
+
+pub struct AllowedElement {
+    pub name: &'static str,
+    pub attributes: &'static [&'static str],
+}
+
+const ALLOWED: &'static [AllowedElement] = &[
+    AllowedElement {
+        name: "div",
+        attributes: &[],
+    },
+    AllowedElement {
+        name: "b",
+        attributes: &[],
+    },
+    AllowedElement {
+        name: "strong",
+        attributes: &[],
+    },
+    AllowedElement {
+        name: "i",
+        attributes: &[],
+    },
+    AllowedElement {
+        name: "em",
+        attributes: &[],
+    },
+    AllowedElement {
+        name: "u",
+        attributes: &[],
+    },
+    AllowedElement {
+        name: "a",
+        attributes: &["href", "title"],
+    },
+    AllowedElement {
+        name: "ul",
+        attributes: &[],
+    },
+    AllowedElement {
+        name: "ol",
+        attributes: &[],
+    },
+    AllowedElement {
+        name: "li",
+        attributes: &[],
+    },
+    AllowedElement {
+        name: "p",
+        attributes: &["style"],
+    },
+    AllowedElement {
+        name: "br",
+        attributes: &[],
+    },
+    AllowedElement {
+        name: "span",
+        attributes: &["style"],
+    },
+    AllowedElement {
+        name: "img",
+        attributes: &["width", "height", "alt", "src"],
+    },
+];
+
+pub fn process_message_html(input: &str) -> String {
+    let element_handler = |el: &mut Element| {
+        let find = ALLOWED.iter().find(|e| e.name.eq(&el.tag_name()));
+        match find {
+            Some(find) => {
+                let remove_attributes = el
+                    .attributes()
+                    .iter()
+                    .filter(|e| find.attributes.iter().any(|a| a.eq(&e.name())) == false)
+                    .map(|m| m.name())
+                    .collect::<Vec<String>>();
+                for attr in remove_attributes {
+                    el.remove_attribute(&attr);
+                }
+            }
+            None => {
+                el.remove_and_keep_content();
+            }
+        }
+        if el.tag_name() == "a" {
+            el.set_attribute("target", "_blank");
+        }
+        Ok(())
+    };
+    let comment_handler = |c: &mut Comment| {
+        c.remove();
+        Ok(())
+    };
+    let output = rewrite_str(
+        input,
+        RewriteStrSettings {
+            element_content_handlers: vec![
+                element!("*", element_handler),
+                comments!("*", comment_handler),
+            ],
+            ..RewriteStrSettings::default()
+        },
+    )
+    .unwrap();
+    return output;
+}

proxy/.gitignore

@@ -1,4 +0,0 @@
-cert.pem
-key.pem
-bundle
-config.toml

proxy/Cargo.toml

@@ -13,6 +13,17 @@ toml = "0.8.19"
 tracing = { version = "0.1.40", features = ["async-await"] }
 tracing-subscriber = { version = "0.3.18", features = ["env-filter"] }
 mumble-web2-common = { workspace = true }
-salvo = { version = "0.74.2", features = ["quinn", "eyre", "rustls", "serve-static", "logging"] }
+salvo = { version = "0.74.2", features = [
+  "quinn",
+  "eyre",
+  "rustls",
+  "serve-static",
+  "logging",
+  "craft",
+  "cors",
+] }
 once_cell = "1.20.2"
 rustls = { version = "^0.23", features = ["aws_lc_rs"] }
+rcgen = "0.13.2"
+hmac-sha256 = "1.1.8"
+time = "0.3"

proxy/config.toml.example

@@ -1,11 +0,0 @@
-https_listen_address = "127.0.0.1:4433"
-http_listen_address = "127.0.0.1:8080"
-cert_path = "./cert.pem"
-key_path = "./key.pem"
-mumble_server_url = "voip.ohea.xyz:64738"
-gui_path = "../target/dx/mumble-web2-gui/release/web/public"
-
-[gui]
-force_proxy = true
-proxy_url = "https://127.0.0.1:4433/proxy"
-# cert_hash = [...]

proxy/src/main.rs

@@ -1,11 +1,14 @@
-use color_eyre::eyre::{anyhow, Context, Error, Result};
+use color_eyre::eyre::{anyhow, bail, Context, Result};
+use color_eyre::owo_colors::OwoColorize;
 use mumble_web2_common::GuiConfig;
 use once_cell::sync::OnceCell;
+use rcgen::date_time_ymd;
 use salvo::conn::rustls::{Keycert, RustlsConfig};
+use salvo::cors::{AllowOrigin, Cors};
 use salvo::logging::Logger;
 use salvo::prelude::*;
 use salvo::proto::quic::BidiStream;
-use serde::Deserialize;
+use serde::{Deserialize, Serialize};
 use std::net::{SocketAddr, ToSocketAddrs};
 use std::path::PathBuf;
 use std::sync::{Arc, Mutex};
@@ -24,12 +27,18 @@ use tracing::{error, instrument};
 use tracing_subscriber::filter::LevelFilter;
 use tracing_subscriber::EnvFilter;
 
+fn default_cert_alt_names() -> Vec<String> {
+    vec!["localhost".into()]
+}
+
 #[derive(Deserialize)]
 struct Config {
     https_listen_address: SocketAddr,
     http_listen_address: Option<SocketAddr>,
-    cert_path: PathBuf,
-    key_path: PathBuf,
+    cert_path: Option<PathBuf>,
+    key_path: Option<PathBuf>,
+    #[serde(default = "default_cert_alt_names")]
+    cert_alt_names: Vec<String>,
     mumble_server_url: String,
     mumble_server_address: Option<SocketAddr>,
     gui_path: PathBuf,
@@ -65,11 +74,6 @@ async fn serve_gui_index_html(req: &Request, res: &mut Response) {
     res.render(Text::Html(modified_html));
 }
 
-#[handler]
-async fn redirect_to_gui(res: &mut Response) {
-    res.render(Redirect::permanent("/gui"));
-}
-
 async fn init_config() -> Result<()> {
     let mut config: Config = toml::from_str(
         &fs::read_to_string("./config.toml")
@@ -100,32 +104,71 @@ async fn main() -> Result<()> {
     init_logging();
     init_config().await?;
     let config = CONFIG.get().unwrap();
+    info!("config\n{}", toml::to_string_pretty(&config.gui)?);
+    info!("gui config\n{}", serde_json::to_string_pretty(&config.gui)?);
 
-    // Server routing
-    let router = Router::new()
-        .get(redirect_to_gui)
-        .push(Router::with_path("/proxy").goal(connect_proxy))
-        .push(Router::with_path("/gui").get(serve_gui_index_html))
-        .push(Router::with_path("/gui/<*+rest>").get(StaticDir::new(config.gui_path.clone())))
-        // right now dioxus assets don't properly handle base_url, so we are stuck with this
-        .push(
-            Router::with_path("/assets/<*+rest>")
-                .get(StaticDir::new(config.gui_path.join("assets"))),
-        )
-        .hoop(Logger::new());
-
-    // Read server certs
     rustls::crypto::aws_lc_rs::default_provider()
         .install_default()
         .map_err(|e| anyhow!("could not install crypto provider {e:?}"))?;
-    let cert = fs::read(&config.cert_path)
-        .await
-        .context(format!("reading cert {}", config.cert_path.display()))?;
-    let key = fs::read(&config.key_path)
-        .await
-        .context(format!("reading key {}", config.key_path.display()))?;
+
+    let (cert, key) = match (&config.cert_path, &config.key_path) {
+        (None, None) => {
+            info!("generating self-signed cert");
+
+            // FIXME: redo every <14 days
+            let mut dname = rcgen::DistinguishedName::new();
+            dname.push(rcgen::DnType::CommonName, "mumble-web self-signed");
+            let key_pair = rcgen::KeyPair::generate_for(&rcgen::PKCS_ECDSA_P256_SHA256)?;
+            let mut cert_params = rcgen::CertificateParams::new(config.cert_alt_names.clone())?;
+            cert_params.distinguished_name = dname;
+            cert_params.not_before = time::OffsetDateTime::now_utc();
+            cert_params.not_after = cert_params.not_before + time::Duration::days(12);
+            let cert = cert_params.self_signed(&key_pair)?;
+
+            let hash = hmac_sha256::Hash::hash(cert.der().as_ref());
+            {
+                let mut gui_config = config.gui.lock().unwrap();
+                gui_config.cert_hash = Some(hash.into());
+            }
+
+            (cert.pem().into(), key_pair.serialize_pem().into())
+        }
+        (Some(cert_path), Some(key_path)) => {
+            // Read server certs
+            let cert = fs::read(cert_path)
+                .await
+                .context(format!("reading cert {}", cert_path.display()))?;
+            let key = fs::read(key_path)
+                .await
+                .context(format!("reading key {}", key_path.display()))?;
+            (cert, key)
+        }
+        _ => {
+            bail!("please supply both cert_path and key_path (or neither to generate a self-signed cert)")
+        }
+    };
     let rustls_config = RustlsConfig::new(Keycert::new().cert(cert.as_slice()).key(key.as_slice()));
 
+    let config_craft = ConfigCraft {
+        client_config: MumbleClientConfig {
+            force_proxy: true,
+            proxy_url: "https://localhost:4433".to_string(),
+            cert_hash: config.gui.lock().unwrap().cert_hash.clone().unwrap(),
+        },
+    };
+
+    // Server routing
+    let router = Router::new()
+        .get(serve_gui_index_html)
+        .push(Router::with_path("/proxy").goal(connect_proxy))
+        .push(Router::with_path("/config").get(config_craft.get_config()))
+        .push(Router::with_path("/<*+rest>").get(StaticDir::new(config.gui_path.clone())))
+        .hoop(Logger::new());
+
+    let cors = Cors::new().allow_origin(AllowOrigin::any()).into_handler();
+
+    let service = Service::new(router).hoop(cors);
+
     // Create http listeners
     let http_listener = config.http_listen_address.map(TcpListener::new);
     let https_listener =
@@ -136,17 +179,37 @@ async fn main() -> Result<()> {
     match (http_listener, https_listener, http3_listener) {
         (Some(a), b, c) => {
             let accepter = a.join(b).join(c).bind().await;
-            Server::new(accepter).serve(router).await;
+            Server::new(accepter).serve(service).await;
         }
         (None, b, c) => {
             let accepter = b.join(c).bind().await;
-            Server::new(accepter).serve(router).await;
+            Server::new(accepter).serve(service).await;
         }
     }
 
     Ok(())
 }
 
+#[derive(Serialize, Clone)]
+struct MumbleClientConfig {
+    force_proxy: bool,
+    proxy_url: String,
+    cert_hash: Vec<u8>,
+}
+
+#[derive(Clone)]
+pub struct ConfigCraft {
+    client_config: MumbleClientConfig,
+}
+
+#[craft]
+impl ConfigCraft {
+    #[craft(handler)]
+    async fn get_config(&self) -> Json<MumbleClientConfig> {
+        Json(self.client_config.clone())
+    }
+}
+
 #[handler]
 #[instrument]
 async fn connect_proxy(req: &mut Request, res: &mut Response) {