common: resolve ping addresses with async DNS

The previous std::net::ToSocketAddrs call blocked the runtime during
DNS lookup. This change allows the server ping status to be resolved
asynchronously.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

.cargo/config.toml

@@ -1,2 +1,16 @@
 [build]
 rustflags = ["--cfg=web_sys_unstable_apis"]
+
+[profile]
+
+[profile.dioxus-wasm]
+inherits = "dev"
+opt-level = 2
+
+[profile.dioxus-server]
+inherits = "dev"
+opt-level = 2
+
+[profile.dioxus-android]
+inherits = "dev"
+opt-level = 2

.dockerignore

@@ -0,0 +1 @@
+target

.gitea/workflows/android-container-builds.yaml

@@ -0,0 +1,27 @@
+name: Build android container
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: "0 4 * * *"
+
+jobs:
+  android-release-builder-container-build:
+    runs-on: ubuntu-latest 
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Log in to container registry
+        uses: docker/login-action@v3
+        with:
+          registry: git.ohea.xyz
+          username: ${{ secrets.CI_REGISTRY_USER }}
+          password: ${{ secrets.CI_REGISTRY_PASSWORD }}
+
+      - name: Build Android builder image
+        shell: bash
+        run: |
+          docker pull "$(grep -m1 '^FROM' ./docker/android-release-builder.Dockerfile | awk '{print $2}')"
+          docker build -t git.ohea.xyz/mumble/mumble-web2/android-release-builder:latest -f ./docker/android-release-builder.Dockerfile .
+          docker push git.ohea.xyz/mumble/mumble-web2/android-release-builder:latest

.gitea/workflows/build-release.yaml

@@ -0,0 +1,149 @@
+name: Build Mumble Web 2
+on: [push]
+
+jobs:
+  linux_build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - name: Install rust
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          toolchain: stable
+          targets: wasm32-unknown-unknown
+
+      - name: Install cargo binstall
+        run: curl -L --proto '=https' --tlsv1.2 -sSf https://raw.githubusercontent.com/cargo-bins/cargo-binstall/main/install-from-binstall-release.sh | bash
+
+      - name: Install dioxus-cli
+        run: cargo binstall dioxus-cli --version 0.7.3
+
+      - uses: Swatinem/rust-cache@v2
+
+      - name: Build dioxus project
+        run: dx build --platform web --release -p mumble-web2-gui
+
+      - name: Upload mumble-web2-gui Artifact
+        uses: https://gitea.com/actions/gitea-upload-artifact@v4
+        with:
+          name: mumble-web2-gui
+          path: target/dx/mumble-web2-gui/release/web/public
+          retention-days: 5
+
+      - name: Build proxy
+        run: cargo build --release -p mumble-web2-proxy
+
+      - name: Upload mumble-web2-proxy Artifact
+        uses: https://gitea.com/actions/gitea-upload-artifact@v4
+        with:
+          name: mumble-web2-proxy
+          path: target/release/mumble-web2-proxy
+          retention-days: 5
+
+  macos_build:
+    runs-on: macos
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - name: Restore Rust cache
+        uses: actions/cache/restore@v4
+        with:
+          path: |
+            ~/.cargo
+            ./target
+          key: rust-${{ runner.os }}-${{ hashFiles('**/Cargo.lock') }}
+          restore-keys: |
+            rust-${{ runner.os }}-
+
+      - name: Install cargo binstall
+        run: curl -L --proto '=https' --tlsv1.2 -sSf https://raw.githubusercontent.com/cargo-bins/cargo-binstall/main/install-from-binstall-release.sh | bash
+
+      - name: Install dioxus-cli
+        run: cargo binstall dioxus-cli --version 0.7.3 --no-confirm
+
+      - name: Build dioxus project
+        run: dx bundle --platform macos --release -p mumble-web2-gui
+
+      - name: Save Rust cache
+        if: always()
+        uses: actions/cache/save@v4
+        with:
+          path: |
+            ~/.cargo
+            ./target
+          key: rust-${{ runner.os }}-${{ hashFiles('**/Cargo.lock') }}
+
+      - name: Upload mumble-web2-gui Artifact
+        uses: https://gitea.com/actions/gitea-upload-artifact@v4
+        with:
+          name: mumble-web2-gui-macos-arm64
+          path: gui/dist
+          retention-days: 5
+
+  windows_build:
+    runs-on: windows
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - name: Restore Rust cache
+        uses: actions/cache/restore@v4
+        with:
+          path: |
+            ~/.cargo
+            ./target
+          key: rust-${{ runner.os }}-${{ hashFiles('**/Cargo.lock') }}
+          restore-keys: |
+            rust-${{ runner.os }}-
+
+      - name: Pull builder container
+        run: docker pull git.ohea.xyz/mumble/mumble-web2/windows-release-builder:latest
+
+      - name: Bundle dioxus project
+        run: docker run `
+          --mount "type=bind,source=${PWD},target=C:\app" `
+          --workdir "C:\app\gui" `
+          git.ohea.xyz/mumble/mumble-web2/windows-release-builder:latest `
+          C:\Users\ContainerAdministrator\.cargo\bin\dx.exe bundle --verbose --trace -p mumble-web2-gui --release --windows
+
+      - name: Save Rust cache
+        if: always()
+        uses: actions/cache/save@v4
+        with:
+          path: |
+            ~/.cargo
+            ./target
+          key: rust-${{ runner.os }}-${{ hashFiles('**/Cargo.lock') }}
+
+      - name: Upload mumble-web2-gui Windows Artifact
+        uses: https://gitea.com/actions/gitea-upload-artifact@v4
+        with:
+          name: mumble-web2-gui-windows
+          path: gui/dist
+          retention-days: 5
+
+  android_build:
+    runs-on: ubuntu-latest
+    container:
+      image: git.ohea.xyz/mumble/mumble-web2/android-release-builder:latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - uses: Swatinem/rust-cache@v2
+
+      - name: Build dioxus project (x86_64-linux-android)
+        run: dx build --platform android --target x86_64-linux-android --release -p mumble-web2-gui
+
+      - name: Build dioxus project (aarch64-linux-android)
+        run: dx build --platform android --target aarch64-linux-android --release -p mumble-web2-gui
+
+      - name: Upload mumble-web2-gui Android Artifact
+        uses: https://gitea.com/actions/gitea-upload-artifact@v4
+        with:
+          name: mumble-web2-android
+          path: target/dx/mumble-web2-gui/release/android/app/app/build/outputs/apk/debug/app-debug.apk
+          retention-days: 5

.gitea/workflows/windows-container-build.yaml

@@ -0,0 +1,27 @@
+name: Build Mumble Web 2 release builder containers
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: "0 4 * * *"
+
+jobs:
+  windows-release-builder-container-build:
+    runs-on: windows
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Log in to container registry
+        uses: docker/login-action@v3
+        with:
+          registry: git.ohea.xyz
+          username: ${{ secrets.CI_REGISTRY_USER }}
+          password: ${{ secrets.CI_REGISTRY_PASSWORD }}
+
+      - name: Build Windows image
+        shell: bash
+        run: |
+          docker pull "$(grep -m1 '^FROM' ./docker/windows-release-builder.Dockerfile | awk '{print $2}')"
+          docker build -t git.ohea.xyz/mumble/mumble-web2/windows-release-builder:latest -f ./docker/windows-release-builder.Dockerfile .
+          docker push git.ohea.xyz/mumble/mumble-web2/windows-release-builder:latest

.gitignore

@@ -1,3 +1,9 @@
 /target
 dist/
 server_hash.txt
+.aider*
+**.pem
+proxy/bundle
+/config.toml
+proxy/config.toml
+*_onnx.tar.gz

.helix/languages.toml

@@ -0,0 +1,2 @@
+[language-server.rust-analyzer]
+config = { cargo = { features = "all" } }

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "rust-analyzer.cargo.features": ["desktop","web"],
+    "rust-analyzer.cargo.noDefaultFeatures": false
+}

Cargo.toml

@@ -1,90 +1,26 @@
-[package]
-name = "mumble-web2"
-version = "0.1.0"
-edition = "2021"
+[workspace]
+resolver = "2"
+members = ["client", "common", "gui", "proxy"]
 
-[dependencies]
-dioxus = { version = "0.5.6" }
-dioxus-web = { version = "0.5.6", optional = true }
-manganis = "0.2.2"
-once_cell = "1.19.0"
+[workspace.dependencies]
+serde = { version = "1.0.214", features = ["derive"] }
 asynchronous-codec = "0.6.2"
-futures = "0.3.30"
-merge-io = "0.3.0"
-mumble-protocol = { version = "0.5.0", package = "mumble-protocol-2x", default-features = false, features = [
-  "asynchronous-codec",
-] }
-serde_json = "1.0.117"
-tokio-util = { version = "0.7.11", features = ["codec", "compat"] }
-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 }
-serde-wasm-bindgen = { version = "0.6.5", optional = true }
-js-sys = { version = "0.3.70", optional = true }
-web-sys = { version = "0.3.72", features = [
-  "WebTransport",
-  "console",
-  "WebTransportOptions",
-  "WebTransportBidirectionalStream",
-  "WebTransportSendStream",
-  "WebTransportReceiveStream",
-  "Navigator",
-  "MediaDevices",
-  "AudioDecoder",
-  "AudioDecoderInit",
-  "AudioData",
-  "AudioEncoderConfig",
-  "AudioDecoderConfig",
-  "EncodedAudioChunk",
-  "EncodedAudioChunkInit",
-  "EncodedAudioChunkType",
-  "CodecState",
-  "MediaStreamTrackGenerator",
-  "MediaStreamTrackGeneratorInit",
-  "AudioContext",
-  "AudioContextOptions",
-  "MediaStream",
-  "GainNode",
-  "MediaStreamAudioSourceNode",
-  "BaseAudioContext",
-  "AudioDestinationNode",
-  "AudioWorkletNode",
-  "AudioWorklet",
-  "AudioWorkletProcessor",
-  "MediaStreamConstraints",
-  "WorkletOptions",
-  "AudioEncoder",
-  "AudioEncoderInit",
-  "AudioDataInit",
-  "HtmlAnchorElement",
-  "Url",
-  "Blob",
-  "AudioDataCopyToOptions",
-  "AudioSampleFormat",
-  "Storage",
-] }
-anyhow = "1.0.86"
-byteorder = "1.5.0"
-ogg = "0.9.1"
-ordermap = "0.5.3"
-html-purifier = "0.3.0"
-markdown = "0.3.0"
-gloo-timers = { version = "0.3.0", features = ["futures"], optional = true }
-futures-channel = "0.3.30"
-sir = { version = "0.5.0", features = ["dioxus"] }
-tokio = { version = "1.41.1", features = ["net", "rt"], optional = true }
-tokio-rustls = { version = "0.26.0", optional = true }
+mumble-web2-common = { path = "common" }
 
-[features]
-web = [
-  "dioxus/web",
-  "dioxus-web",
-  "wasm-bindgen",
-  "wasm-bindgen-futures",
-  "wasm-streams",
-  "serde-wasm-bindgen",
-  "js-sys",
-  "web-sys",
-  "gloo-timers",
-]
-desktop = ["dioxus/desktop", "tokio", "tokio-rustls"]
+[workspace.dependencies.mumble-protocol]
+version = "0.5.0"
+package = "mumble-protocol-2x"
+default-features = false
+features = ["asynchronous-codec"]
+
+[profile]
+
+[profile.wasm-dev]
+inherits = "dev"
+opt-level = 1
+
+[profile.server-dev]
+inherits = "dev"
+
+[profile.android-dev]
+inherits = "dev"

README.md

@@ -0,0 +1,22 @@
+# GUI Development
+
+## Running Desktop
+
+1. `cargo install dioxus-cli --version 0.7.1`
+2. `dx run -p mumble-web2-gui --platform desktop --release`
+
+## Running Web (development)
+
+1. `cargo install dioxus-cli --version 0.7.1`
+3. `dx serve -p mumble-web2-gui --platform web`
+2. `cd docker && docker compose up`
+4. connect to `https://localhost:64444`
+5. fill in the proxy url as `https://127.0.0.1:4433/proxy` (this should autofill)
+
+## Running Web (with `proxy` only)
+
+1. `cargo install dioxus-cli --version 0.7.1`
+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`

client/Cargo.toml

@@ -0,0 +1,146 @@
+[package]
+name = "mumble-web2-client"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+# Web Dependencies
+# ================
+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 }
+serde-wasm-bindgen = { version = "^0.6.5", optional = true }
+js-sys = { version = "=0.3.82", optional = true }
+web-sys = { version = "=0.3.82", features = [
+  "WebTransport",
+  "console",
+  "WebTransportOptions",
+  "WebTransportBidirectionalStream",
+  "WebTransportSendStream",
+  "WebTransportReceiveStream",
+  "Navigator",
+  "MediaDevices",
+  "AudioDecoder",
+  "AudioDecoderInit",
+  "AudioData",
+  "AudioEncoderConfig",
+  "AudioDecoderConfig",
+  "EncodedAudioChunk",
+  "EncodedAudioChunkInit",
+  "EncodedAudioChunkType",
+  "CodecState",
+  "AudioContext",
+  "AudioContextOptions",
+  "MediaStream",
+  "GainNode",
+  "MediaStreamAudioSourceNode",
+  "BaseAudioContext",
+  "AudioDestinationNode",
+  "AudioWorkletNode",
+  "AudioWorklet",
+  "AudioWorkletProcessor",
+  "MessagePort",
+  "MediaStreamConstraints",
+  "WorkletOptions",
+  "AudioEncoder",
+  "AudioEncoderInit",
+  "AudioDataInit",
+  "HtmlAnchorElement",
+  "Url",
+  "Blob",
+  "AudioDataCopyToOptions",
+  "AudioSampleFormat",
+  "Storage",
+], optional = true }
+gloo-timers = { version = "^0.3.0", features = ["futures"], optional = true }
+tracing-web = { version = "^0.1.3", optional = true }
+
+# Desktop Dependecies
+# ===================
+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 }
+etcetera = { version = "0.10.0", optional = true }
+
+# Base Dependencies
+# ================
+dioxus-signals = "0.7.2"
+manganis = "0.7.2"
+once_cell = "1.19.0"
+asynchronous-codec = { workspace = true }
+futures = "^0.3.30"
+merge-io = "^0.3.0"
+mumble-protocol = { workspace = true }
+serde_json = "1"
+tokio-util = { version = "^0.7.11", features = ["codec", "compat"] }
+byteorder = "1.5"
+ogg = "^0.9.1"
+ordermap = "^0.5.3"
+html-purifier = "^0.3.0"
+markdown = "^0.3.0"
+futures-channel = "^0.3.30"
+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"
+base64 = "^0.22"
+mime_guess = "^2.0.5"
+async_cell = "^0.2.3"
+reqwest = { version = "^0.12.22", features = ["json"] }
+dioxus-asset-resolver = "0.7.2"
+
+# Denoising
+# =========
+deep_filter = { git = "https://github.com/Rikorose/DeepFilterNet.git", rev = "d375b2d8309e0935d165700c91da9de862a99c31", features = [
+  "tract",
+] }
+crossbeam = "0.8.4"
+
+# Android dependencies for requesting permissions
+[target.'cfg(target_os = "android")'.dependencies]
+android-permissions = "0.1.2"
+jni = "0.21.1"
+ndk-context = "0.1.1"
+
+[patch.crates-io]
+tract-hir = "=0.12.4"
+tract-core = "=0.12.4"
+tract-onnx = "=0.12.4"
+tract-pulse = "=0.12.4"
+
+[features]
+web = [
+  "wasm-bindgen",
+  "wasm-bindgen-futures",
+  "wasm-streams",
+  "serde-wasm-bindgen",
+  "js-sys",
+  "web-sys",
+  "gloo-timers",
+  "tracing-web",
+  "deep_filter/wasm",
+]
+desktop = [
+  "tokio",
+  "tokio-rustls",
+  "tracing-subscriber/env-filter",
+  "opus",
+  "cpal",
+  "dasp_ring_buffer",
+  "etcetera",
+  "mumble-web2-common/networking",
+]
+mobile = [
+  "tokio",
+  "tokio-rustls",
+  "tracing-subscriber/env-filter",
+  "opus",
+  "cpal",
+  "dasp_ring_buffer",
+  "mumble-web2-common/networking",
+]

client/assets/rust_audio_worklet.js

@@ -1,7 +1,7 @@
 const SAMPLE_RATE = 48000;
 const PACKET_SAMPLES = 960;
 
-class RustWorklet extends AudioWorkletProcessor {
+class RustMicWorklet extends AudioWorkletProcessor {
   constructor(options) {
     super();
     this.module = options.processorOptions;
@@ -31,7 +31,7 @@ class RustWorklet extends AudioWorkletProcessor {
     }
     this.buffer_offset -= PACKET_SAMPLES;
     this.timestamp = null;
-   }
+  }
 
   process(inputs) {
     //console.log(inputs);
@@ -60,4 +60,44 @@ class RustWorklet extends AudioWorkletProcessor {
   }
 };
 
-registerProcessor("rust_mic_worklet", RustWorklet);
+
+class RustSpeakerWorklet extends AudioWorkletProcessor {
+  constructor() {
+    super();
+    this.queue = [];
+    this.readIndex = 0;
+
+    this.port.onmessage = (event) => {
+      this.queue.push(event.data)
+    };
+  }
+
+  process(inputs, outputs) {
+    if (this.queue.length) {
+      console.log(this.queue[0].samples.length, outputs[0][0].length);
+    }
+
+    const output = outputs[0];
+
+    for (let i = 0; i < output[0].length; i++) {
+      if (!this.queue.length) {
+        return true;
+      }
+      const current = this.queue[0];
+      for (let ch = 0; ch < output.length; ch++) {
+        output[ch][i] = current.samples[this.readIndex];
+      }
+      this.readIndex++;
+      if (this.readIndex >= current.samples.length) {
+        this.queue.shift();
+        this.readIndex = 0;
+      }
+    }
+    return true;
+  }
+};
+
+
+
+registerProcessor("rust_mic_worklet", RustMicWorklet);
+registerProcessor("rust_speaker_worklet", RustSpeakerWorklet);

client/build.rs

@@ -0,0 +1,86 @@
+use std::env;
+use std::path::Path;
+use std::process::Command;
+
+fn version_env() -> Option<()> {
+    if env::var("MUMBLE_WEB2_VERSION").is_ok() {
+        return Some(());
+    }
+
+    let output = Command::new("git")
+        .args(["rev-parse", "--short", "HEAD"])
+        .output()
+        .ok()?;
+
+    let git_hash = String::from_utf8(output.stdout).ok()?;
+    let git_hash = git_hash.trim(); // drop trailing newline
+
+    let status = Command::new("git")
+        .args(["status", "--porcelain"])
+        .output()
+        .ok()?;
+    let dirty = match status.stdout.is_empty() {
+        true => "",
+        false => "-dirty",
+    };
+
+    // Expose it as a compile-time env var
+    println!("cargo::rustc-env=MUMBLE_WEB2_VERSION=git-{git_hash}{dirty}");
+
+    // Optional: rebuild when HEAD changes
+    println!("cargo::rerun-if-changed=.git/HEAD");
+
+    Some(())
+}
+
+fn download_deepfilternet() {
+    // Define the target directory and file
+    let assets_dir = "assets";
+    let target_file = format!("{}/DeepFilterNet3_ll_onnx.tar.gz", assets_dir);
+    let target_path = Path::new(&target_file);
+
+    // Check if the file already exists
+    if target_path.exists() {
+        println!(
+            "cargo::warning=DeepFilterNet model already exists at {}",
+            target_file
+        );
+        return;
+    }
+
+    println!(
+        "cargo::warning=Downloading DeepFilterNet model to {}...",
+        target_file
+    );
+
+    // Download the file using curl
+    let url = "https://github.com/Rikorose/DeepFilterNet/raw/refs/heads/main/models/DeepFilterNet3_ll_onnx.tar.gz";
+
+    let status = Command::new("curl")
+        .args([
+            "-L", // Follow redirects
+            "-o",
+            &target_file, // Output file
+            url,
+        ])
+        .status()
+        .expect("Failed to execute curl command. Make sure curl is installed.");
+
+    if !status.success() {
+        println!("cargo::error=Failed to download DeepFilterNet model from {url}");
+        return;
+    }
+
+    println!(
+        "cargo::warning=Successfully downloaded DeepFilterNet model to {}",
+        target_file
+    );
+
+    // Rerun this build script if the target file is deleted
+    println!("cargo::rerun-if-changed={}", target_file);
+}
+
+fn main() {
+    version_env();
+    download_deepfilternet();
+}

client/src/app.rs

@@ -0,0 +1,215 @@
+use dioxus_signals::{ReadableExt as _, Signal};
+use mime_guess::Mime;
+use mumble_web2_common::ProxyOverrides;
+use ordermap::OrderSet;
+use std::collections::{HashMap, HashSet};
+use std::{fmt, sync::Arc};
+
+pub type ChannelId = u32;
+pub type UserId = u32;
+
+#[derive(Debug)]
+pub enum ConnectionState {
+    Disconnected,
+    Connecting,
+    Connected,
+    Failed(String),
+}
+
+#[derive(Debug, Clone)]
+pub struct AudioSettings {
+    pub denoise: bool,
+}
+
+#[derive(Debug)]
+pub enum Command {
+    Connect {
+        address: String,
+        username: String,
+        config: ProxyOverrides,
+    },
+    SendChat {
+        markdown: String,
+        channels: Vec<ChannelId>,
+    },
+    SendFile {
+        bytes: Vec<u8>,
+        name: String,
+        mime: Option<Mime>,
+        channels: Vec<ChannelId>,
+    },
+    SetMute {
+        mute: bool,
+    },
+    SetDeaf {
+        deaf: bool,
+    },
+    EnterChannel {
+        channel: ChannelId,
+        user: UserId,
+    },
+    UpdateAudioSettings(AudioSettings),
+    Disconnect,
+}
+
+#[derive(Default, Debug)]
+pub struct UserState {
+    pub name: String,
+    pub channel: ChannelId,
+    pub deaf: bool,
+    pub mute: bool,
+    pub suppress: bool,
+    pub self_deaf: bool,
+    pub self_mute: bool,
+}
+
+#[derive(Debug)]
+pub struct Chat {
+    pub raw: String,
+    pub dangerous_html: String,
+    pub sender: Option<UserId>,
+}
+
+#[derive(Default, Debug)]
+pub struct ChannelState {
+    pub name: String,
+    pub children: OrderSet<ChannelId>,
+    pub users: OrderSet<UserId>,
+    pub parent: Option<ChannelId>,
+    pub position: i32,
+}
+
+impl ChannelState {
+    pub fn update_from_channel_state(
+        &mut self,
+        channel_state: &mumble_protocol::control::msgs::ChannelState,
+    ) {
+        if channel_state.has_position() {
+            self.position = channel_state.get_position();
+        }
+        if channel_state.has_parent() {
+            self.parent = Some(channel_state.get_parent());
+        }
+        if channel_state.has_name() {
+            self.name = channel_state.get_name().to_string();
+        }
+    }
+}
+
+#[derive(Default, Debug)]
+pub struct ChannelsState {
+    pub channels: HashMap<ChannelId, ChannelState>,
+}
+
+impl ChannelsState {
+    pub fn update_from_channel_state(
+        &mut self,
+        channel_state: &mumble_protocol::control::msgs::ChannelState,
+    ) {
+        self.channels
+            .entry(channel_state.get_channel_id())
+            .or_default()
+            .update_from_channel_state(channel_state);
+
+        self.update_channel_parents();
+    }
+
+    pub fn update_from_channel_remove(
+        &mut self,
+        channel_remove: &mumble_protocol::control::msgs::ChannelRemove,
+    ) {
+        self.channels.remove(&channel_remove.get_channel_id());
+        self.update_channel_parents();
+    }
+
+    pub fn update_channel_parents(&mut self) {
+        // Zero out existing children
+        for state in self.channels.values_mut() {
+            state.children.clear();
+        }
+
+        let mut to_sort: Vec<(ChannelId, Option<ChannelId>, i32, String)> = Vec::new();
+        for (id, state) in self.channels.iter() {
+            // Handle channels with no parent (the root channel)
+            let Some(parent_id) = state.parent else {
+                to_sort.push((*id, None, 0, state.name.clone()));
+                continue;
+            };
+
+            // If a channel has a parent that we haven't gotten a channel
+            // state packet for, ignore it
+            if !self.channels.contains_key(&parent_id) {
+                continue;
+            }
+
+            to_sort.push((*id, Some(parent_id), state.position, state.name.clone()));
+        }
+
+        let pos_name: HashMap<ChannelId, (i32, String)> = self
+            .channels
+            .iter()
+            .map(|(&id, state)| (id, (state.position, state.name.clone())))
+            .collect();
+
+        let mut updated: HashSet<ChannelId> = HashSet::new();
+
+        while updated.len() < to_sort.len() {
+            for &(id, ref parent_id, position, ref name) in &to_sort {
+                let Some(parent_id) = parent_id else {
+                    updated.insert(id);
+                    continue;
+                };
+
+                if updated.contains(&id) || !updated.contains(&parent_id) {
+                    continue;
+                }
+
+                // Unwrap should never fail here since we pre filter
+                let parent = self.channels.get_mut(&parent_id).unwrap();
+
+                let mut insert_index = parent.children.len();
+                for (i, &child) in parent.children.iter().enumerate() {
+                    let (p, ref n) = pos_name[&child];
+                    if (position == p && name < n) || p > position {
+                        insert_index = i;
+                        break;
+                    }
+                }
+
+                parent.children.insert_before(insert_index, id);
+                updated.insert(id);
+            }
+        }
+    }
+}
+
+#[derive(Default, Debug)]
+pub struct ServerState {
+    pub channels_state: ChannelsState,
+    pub users: HashMap<UserId, UserState>,
+    pub chat: Vec<Chat>,
+    pub session: Option<UserId>,
+}
+
+impl ServerState {
+    pub fn this_user(&self) -> Option<&UserState> {
+        self.users.get(&self.session?)
+    }
+}
+
+pub struct State {
+    pub status: Signal<ConnectionState>,
+    pub server: Signal<ServerState>,
+    pub audio: Signal<AudioSettings>,
+}
+
+impl fmt::Debug for State {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.debug_struct("State")
+            .field("status", &self.status.read())
+            .field("server", &self.server.read())
+            .finish()
+    }
+}
+
+pub type SharedState = Arc<State>;

client/src/effects.rs

@@ -0,0 +1,188 @@
+use crossbeam::atomic::AtomicCell;
+use df::tract::{mut_slice_as_arrayviewmut, slice_as_arrayview};
+use df::tract::{DfParams, DfTract, RuntimeParams};
+use dioxus_asset_resolver::read_asset_bytes;
+use manganis::{asset, Asset};
+use std::cell::RefCell;
+use std::sync::Arc;
+use tracing::{error, info};
+
+use crate::imp::SpawnHandle;
+
+static DF_MODEL: Asset = asset!("/assets/DeepFilterNet3_ll_onnx.tar.gz");
+// TODO: make this user configurable.
+static DEFAULT_NOISE_FLOOR: f32 = 0.001;
+// 200ms hold at 48kHz sample rate
+static HOLD_SAMPLES_MAX: usize = 48000 / 5; // 9600 samples = 200ms
+
+/// Indicates the transmission state after processing audio.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum TransmitState {
+    /// Audio is above threshold, or below but within hold period - transmit normally
+    Transmitting,
+    /// Hold period expired - send this frame as terminator (end_bit = true)
+    Terminator,
+    /// Silent and not transmitting - don't send anything
+    Silent,
+}
+
+enum DenoisingModelState {
+    Nothing,
+    Downloading(Arc<AtomicCell<Option<DfParams>>>),
+    Availible(Box<DfTract>),
+}
+
+fn with_denoising_model<O>(spawn: &SpawnHandle, func: impl FnOnce(&mut DfTract) -> O) -> Option<O> {
+    // Using a thread local is super gross, but DfTract is not Send (so it can never leave the current
+    // thread) while AudioProcessing itself might change threads whenever.
+    thread_local! {
+        static STATE: RefCell<DenoisingModelState> = const { RefCell::new(DenoisingModelState::Nothing) };
+    }
+
+    STATE.with_borrow_mut(|state| match state {
+        DenoisingModelState::Nothing => {
+            let cell = Arc::new(AtomicCell::new(None));
+            let cell_task = cell.clone();
+            *state = DenoisingModelState::Downloading(cell);
+            let model = DF_MODEL.to_string();
+            spawn.spawn(async move {
+                let model_bytes = match read_asset_bytes(&model).await {
+                    Ok(b) => b,
+                    Err(e) => {
+                        error!("could not read denoising model from \"{model}\": {e:?}");
+                        return;
+                    }
+                };
+                let params = match DfParams::from_bytes(&model_bytes) {
+                    Ok(p) => p,
+                    Err(e) => {
+                        error!("could not load denoising model parameters: {e:?}");
+                        return;
+                    }
+                };
+                cell_task.store(Some(params));
+            });
+            None
+        }
+        DenoisingModelState::Downloading(cell) => {
+            if let Some(params) = cell.take() {
+                let mut tract = match DfTract::new(params, &RuntimeParams::default_with_ch(1)) {
+                    Ok(t) => Box::new(t),
+                    Err(e) => {
+                        error!("could not create denoising engine: {e:?}");
+                        return None;
+                    }
+                };
+                info!("instantiated denoising engine");
+                let out = func(&mut tract);
+                *state = DenoisingModelState::Availible(tract);
+                Some(out)
+            } else {
+                None
+            }
+        }
+        DenoisingModelState::Availible(tract) => Some(func(tract)),
+    })
+}
+
+pub struct AudioProcessor {
+    denoise: bool,
+    spawn: SpawnHandle,
+    buffer: Vec<f32>,
+    noise_floor: f32,
+    /// Whether we were transmitting in the previous frame
+    was_transmitting: bool,
+    /// Number of samples we've been below threshold (for hold period)
+    hold_samples: usize,
+}
+
+impl AudioProcessor {
+    pub fn new(denoise: bool) -> Self {
+        AudioProcessor {
+            denoise,
+            spawn: SpawnHandle::current(),
+            buffer: Vec::new(),
+            noise_floor: DEFAULT_NOISE_FLOOR,
+            was_transmitting: false,
+            hold_samples: 0,
+        }
+    }
+}
+
+impl AudioProcessor {
+    pub fn process(
+        &mut self,
+        audio: &[f32],
+        channels: usize,
+        output: &mut Vec<f32>,
+    ) -> TransmitState {
+        let mut include_raw = true;
+        if self.denoise {
+            with_denoising_model(&self.spawn, |df| {
+                include_raw = false;
+
+                self.buffer.extend(audio.iter().step_by(channels).copied());
+                output.reserve(audio.len());
+
+                let hop = df.hop_size;
+                let mut i = 0;
+                while self.buffer[i..].len() >= hop {
+                    let audio = &self.buffer[i..][..hop];
+                    i += audio.len();
+
+                    let j = output.len();
+                    output.extend(std::iter::repeat_n(0f32, audio.len()));
+                    let output = &mut output[j..];
+
+                    df.process(
+                        slice_as_arrayview(audio, &[audio.len()])
+                            .into_shape((1, audio.len()))
+                            .unwrap(),
+                        mut_slice_as_arrayviewmut(output, &[output.len()])
+                            .into_shape((1, output.len()))
+                            .unwrap(),
+                    );
+                }
+                self.buffer.splice(..i, []);
+            });
+        }
+
+        if include_raw {
+            output.extend(audio.iter().step_by(channels).copied());
+        }
+
+        // Calculate average amplitude for VAD
+        let avg: f32 = if output.is_empty() {
+            0.0
+        } else {
+            output.iter().map(|x| x.abs()).sum::<f32>() / output.len() as f32
+        };
+
+        let above_threshold = avg >= self.noise_floor;
+        let samples_in_frame = output.len();
+
+        let state = if above_threshold {
+            // Above threshold - reset hold counter and transmit
+            self.hold_samples = 0;
+            self.was_transmitting = true;
+            TransmitState::Transmitting
+        } else if self.was_transmitting && self.hold_samples < HOLD_SAMPLES_MAX {
+            // Below threshold but in hold period - keep transmitting
+            self.hold_samples += samples_in_frame;
+            TransmitState::Transmitting
+        } else if self.was_transmitting {
+            // Hold period expired - send terminator
+            self.was_transmitting = false;
+            self.hold_samples = 0;
+            TransmitState::Terminator
+        } else {
+            // Not transmitting and below threshold - stay silent
+            output.clear(); // Don't accumulate stale audio during silence
+            TransmitState::Silent
+        };
+
+        state
+    }
+}
+
+pub type AudioProcessorSender = Arc<AtomicCell<Option<AudioProcessor>>>;

client/src/imp/android.rs

@@ -0,0 +1,91 @@
+use crate::app::Command;
+use color_eyre::eyre::Error;
+use dioxus::hooks::UnboundedReceiver;
+use mumble_web2_common::{ClientConfig, ServerStatus};
+use std::future::Future;
+use std::time::Duration;
+
+/// Mobile platform implementation using Tokio, native audio, and Android permissions.
+pub struct MobilePlatform;
+
+impl super::PlatformInterface for MobilePlatform {
+    type AudioSystem = super::native_audio::NativeAudioSystem;
+
+    async fn load_config() -> color_eyre::Result<ClientConfig> {
+        Ok(ClientConfig {
+            proxy_url: None,
+            cert_hash: None,
+            any_server: true,
+        })
+    }
+
+    fn load_username() -> Option<String> {
+        None
+    }
+
+    fn load_server_url() -> Option<String> {
+        None
+    }
+
+    fn set_default_username(_username: &str) -> Option<()> {
+        None
+    }
+
+    fn set_default_server(server: &str) -> Option<()> {
+        None
+    }
+
+    async fn network_connect(
+        address: String,
+        username: String,
+        event_rx: &mut UnboundedReceiver<Command>,
+        gui_config: &ClientConfig,
+    ) -> Result<(), Error> {
+        super::connect::network_connect(address, username, event_rx, gui_config).await
+    }
+
+    async fn get_status(client: &reqwest::Client) -> color_eyre::Result<ServerStatus> {
+        super::connect::get_status(client).await
+    }
+
+    fn init_logging() {
+        use tracing::level_filters::LevelFilter;
+        use tracing_subscriber::filter::EnvFilter;
+
+        let env_filter = EnvFilter::builder()
+            .with_default_directive(LevelFilter::INFO.into())
+            .from_env_lossy();
+
+        tracing_subscriber::fmt()
+            .with_target(true)
+            .with_level(true)
+            .with_env_filter(env_filter)
+            .init();
+    }
+
+    fn request_permissions() {
+        request_recording_permission();
+    }
+
+    async fn sleep(duration: Duration) {
+        tokio::time::sleep(duration).await;
+    }
+}
+
+#[cfg(not(target_os = "android"))]
+pub fn request_recording_permission() {}
+
+#[cfg(target_os = "android")]
+pub fn request_recording_permission() {
+    use android_permissions::{PermissionManager, RECORD_AUDIO};
+    use jni::{objects::JObject, JavaVM};
+
+    let ctx = ndk_context::android_context();
+    let vm = unsafe { JavaVM::from_raw(ctx.vm().cast()).unwrap() };
+    let activity = unsafe { JObject::from_raw(ctx.context().cast()) };
+
+    let manager = PermissionManager::create(vm, activity).unwrap();
+    if !manager.check(&RECORD_AUDIO).unwrap() {
+        manager.request(&[&RECORD_AUDIO]).unwrap();
+    }
+}

client/src/imp/connect.rs

@@ -1,13 +1,10 @@
-use crate::app::Command;
-use anyhow::Result;
-use dioxus::hooks::{UnboundedReceiver, UnboundedSender};
-use futures::io::{AsyncRead, AsyncWrite};
-use mumble_protocol::control::{ClientControlCodec, ControlPacket};
-use mumble_protocol::Serverbound;
+use crate::app::{Command, SharedState};
+use color_eyre::eyre::Error;
+use futures_channel::mpsc::UnboundedReceiver;
+use mumble_protocol::control::ClientControlCodec;
 use std::net::ToSocketAddrs;
-use std::{fmt, io, sync::Arc};
+use std::sync::Arc;
 use tokio::net::TcpStream;
-use tokio::task::LocalSet;
 use tokio_rustls::rustls;
 use tokio_rustls::rustls::client::danger::{HandshakeSignatureValid, ServerCertVerifier};
 use tokio_rustls::rustls::pki_types::{CertificateDer, ServerName, UnixTime};
@@ -15,75 +12,9 @@ use tokio_rustls::rustls::ClientConfig;
 use tokio_rustls::rustls::DigitallySignedStruct;
 use tokio_rustls::TlsConnector;
 use tokio_util::compat::{TokioAsyncReadCompatExt as _, TokioAsyncWriteCompatExt as _};
+use tracing::{info, instrument};
 
-pub use tokio::task::spawn;
-pub use tokio::time::sleep;
-
-pub struct Error(anyhow::Error);
-
-pub trait ImpRead: AsyncRead + Unpin + Send + 'static {}
-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 {}
-
-impl From<anyhow::Error> for Error {
-    fn from(value: anyhow::Error) -> Self {
-        Error(value)
-    }
-}
-
-impl From<io::Error> for Error {
-    fn from(value: io::Error) -> Self {
-        Error(value.into())
-    }
-}
-
-impl Error {
-    pub fn new(text: String) -> Self {
-        Self(anyhow::Error::msg(text))
-    }
-
-    pub fn log(&self) {
-        eprintln!("{}", self.0);
-    }
-}
-
-impl std::error::Error for Error {}
-
-impl fmt::Display for Error {
-    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
-        fmt::Display::fmt(&self.0, f)
-    }
-}
-
-impl fmt::Debug for Error {
-    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
-        fmt::Debug::fmt(&self.0, f)
-    }
-}
-
-pub struct AudioSystem();
-
-impl AudioSystem {
-    pub fn new(sender: UnboundedSender<ControlPacket<Serverbound>>) -> Result<Self, Error> {
-        // dbg!("todo");
-        Ok(AudioSystem())
-    }
-
-    pub fn create_player(&mut self) -> Result<AudioPlayer, Error> {
-        // dbg!("todo");
-        Ok(AudioPlayer())
-    }
-}
-
-pub struct AudioPlayer();
-
-impl AudioPlayer {
-    pub fn play_opus(&mut self, payload: &[u8]) {
-        // dbg!("todo");
-    }
-}
+use mumble_web2_common::ProxyOverrides;
 
 #[derive(Debug)]
 struct NoCertificateVerification;
@@ -137,11 +68,16 @@ impl ServerCertVerifier for NoCertificateVerification {
     }
 }
 
+#[instrument]
 pub async fn network_connect(
     address: String,
     username: String,
     event_rx: &mut UnboundedReceiver<Command>,
+    overrides: &ProxyOverrides,
+    state: SharedState,
 ) -> Result<(), Error> {
+    info!("connecting");
+
     let config = ClientConfig::builder()
         .dangerous()
         .with_custom_certificate_verifier(Arc::new(NoCertificateVerification))
@@ -157,23 +93,22 @@ pub async fn network_connect(
     let server_tcp = TcpStream::connect(addr).await?;
     let server_stream = connector
         //.connect("127.0.0.1".try_into()?, server_tcp)
-        .connect(address.try_into().map_err(anyhow::Error::from)?, server_tcp)
+        .connect(address.try_into()?, server_tcp)
         .await?;
     let (read_server, write_server) = tokio::io::split(server_stream);
 
     let read_codec = ClientControlCodec::new();
     let write_codec = ClientControlCodec::new();
 
-    let mut reader = asynchronous_codec::FramedRead::new(read_server.compat(), read_codec);
-    let mut writer = asynchronous_codec::FramedWrite::new(write_server.compat_write(), write_codec);
+    let reader = asynchronous_codec::FramedRead::new(read_server.compat(), read_codec);
+    let writer = asynchronous_codec::FramedWrite::new(write_server.compat_write(), write_codec);
 
-    super::network_loop(username, event_rx, reader, writer).await
+    let (outgoing_send, outgoing_recv) = futures_channel::mpsc::unbounded();
+    spawn(crate::sender_loop(outgoing_recv, writer));
+    crate::network_loop(username, state, event_rx, outgoing_send, reader).await
 }
 
-pub fn set_default_username(username: &str) -> Option<()> {
-    None
-}
-
-pub fn load_username() -> Option<String> {
-    return None;
-}
+#[allow(unused)]
+pub use tokio::spawn;
+#[allow(unused)]
+pub type SpawnHandle = tokio::runtime::Handle;

client/src/imp/desktop.rs

@@ -0,0 +1,61 @@
+use crate::app::{Command, SharedState};
+use color_eyre::eyre::Error;
+use futures_channel::mpsc::UnboundedReceiver;
+use mumble_web2_common::{ProxyOverrides, ServerStatus};
+use std::time::Duration;
+
+/// Desktop platform implementation using Tokio and native audio.
+pub struct DesktopPlatform;
+
+impl super::PlatformInterface for DesktopPlatform {
+    type AudioSystem = super::native_audio::NativeAudioSystem;
+    type ConfigSystem = super::native_config::NativeConfigSystem;
+
+    async fn sleep(duration: Duration) {
+        tokio::time::sleep(duration).await;
+    }
+
+    async fn load_proxy_overrides() -> color_eyre::Result<ProxyOverrides> {
+        Ok(ProxyOverrides {
+            proxy_url: None,
+            cert_hash: None,
+            any_server: true,
+        })
+    }
+
+    async fn network_connect(
+        address: String,
+        username: String,
+        event_rx: &mut UnboundedReceiver<Command>,
+        overrides: &ProxyOverrides,
+        state: SharedState,
+    ) -> Result<(), Error> {
+        super::connect::network_connect(address, username, event_rx, overrides, state).await
+    }
+
+    async fn get_status(
+        _client: &reqwest::Client,
+        address: &str,
+    ) -> color_eyre::Result<ServerStatus> {
+        mumble_web2_common::ping_server(address, 64738).await
+    }
+
+    fn init_logging() {
+        use tracing::level_filters::LevelFilter;
+        use tracing_subscriber::filter::EnvFilter;
+
+        let env_filter = EnvFilter::builder()
+            .with_default_directive(LevelFilter::INFO.into())
+            .from_env_lossy();
+
+        tracing_subscriber::fmt()
+            .with_target(true)
+            .with_level(true)
+            .with_env_filter(env_filter)
+            .init();
+    }
+
+    fn request_permissions() {
+        // No-op on desktop
+    }
+}

client/src/imp/mobile.rs

@@ -0,0 +1,79 @@
+use crate::app::{Command, SharedState};
+use color_eyre::eyre::Error;
+use futures_channel::mpsc::UnboundedReceiver;
+use mumble_web2_common::{ProxyOverrides, ServerStatus};
+use std::time::Duration;
+
+/// Mobile platform implementation using Tokio, native audio, and Android permissions.
+pub struct MobilePlatform;
+
+impl super::PlatformInterface for MobilePlatform {
+    type AudioSystem = super::native_audio::NativeAudioSystem;
+    type ConfigSystem = super::native_config::NativeConfigSystem;
+
+    async fn load_proxy_overrides() -> color_eyre::Result<ProxyOverrides> {
+        Ok(ProxyOverrides {
+            proxy_url: None,
+            cert_hash: None,
+            any_server: true,
+        })
+    }
+
+    async fn network_connect(
+        address: String,
+        username: String,
+        event_rx: &mut UnboundedReceiver<Command>,
+        overrides: &ProxyOverrides,
+        state: SharedState,
+    ) -> Result<(), Error> {
+        super::connect::network_connect(address, username, event_rx, overrides, state).await
+    }
+
+    async fn get_status(
+        _client: &reqwest::Client,
+        address: &str,
+    ) -> color_eyre::Result<ServerStatus> {
+        mumble_web2_common::ping_server(address, 64738).await
+    }
+
+    fn init_logging() {
+        use tracing::level_filters::LevelFilter;
+        use tracing_subscriber::filter::EnvFilter;
+
+        let env_filter = EnvFilter::builder()
+            .with_default_directive(LevelFilter::INFO.into())
+            .from_env_lossy();
+
+        tracing_subscriber::fmt()
+            .with_target(true)
+            .with_level(true)
+            .with_env_filter(env_filter)
+            .init();
+    }
+
+    fn request_permissions() {
+        request_recording_permission();
+    }
+
+    async fn sleep(duration: Duration) {
+        tokio::time::sleep(duration).await;
+    }
+}
+
+#[cfg(not(target_os = "android"))]
+pub fn request_recording_permission() {}
+
+#[cfg(target_os = "android")]
+pub fn request_recording_permission() {
+    use android_permissions::{PermissionManager, RECORD_AUDIO};
+    use jni::{objects::JObject, JavaVM};
+
+    let ctx = ndk_context::android_context();
+    let vm = unsafe { JavaVM::from_raw(ctx.vm().cast()).unwrap() };
+    let activity = unsafe { JObject::from_raw(ctx.context().cast()) };
+
+    let manager = PermissionManager::create(vm, activity).unwrap();
+    if !manager.check(&RECORD_AUDIO).unwrap() {
+        manager.request(&[&RECORD_AUDIO]).unwrap();
+    }
+}

client/src/imp/mod.rs

@@ -0,0 +1,192 @@
+//! Platform abstraction layer
+//!
+//! This module defines traits that each platform (web, desktop, mobile) must implement.
+//! The traits make the platform boundary explicit and provide compile-time verification.
+#![allow(async_fn_in_trait)]
+
+use crate::app::{Command, SharedState};
+use crate::effects::AudioProcessor;
+use color_eyre::eyre::Error;
+use futures_channel::mpsc::UnboundedReceiver;
+use mumble_web2_common::{ProxyOverrides, ServerStatus};
+use std::collections::HashMap;
+use std::future::Future;
+use std::time::Duration;
+
+// ============================================================================
+// Trait Definitions
+// ============================================================================
+
+/// Platform-specific audio subsystem for capturing microphone input and creating playback streams.
+///
+/// The audio system handles Opus encoding internally - callers receive encoded frames
+/// ready for network transmission.
+pub trait AudioSystemInterface: Sized {
+    /// The player type returned by [`create_player`](Self::create_player).
+    type AudioPlayer: AudioPlayerInterface;
+
+    /// Initialize the audio system.
+    async fn new() -> Result<Self, Error>;
+
+    /// Set the processor for the microphone input, mainly noise cancellation settings.
+    fn set_processor(&self, processor: AudioProcessor);
+
+    /// Begin listening to microphone input, calling the `each` function with
+    /// encoded opus frames.
+    fn start_recording(
+        &mut self,
+        each: impl FnMut(Vec<u8>, bool) + Send + 'static,
+    ) -> Result<(), Error>;
+
+    /// Begin playback of an audio stream, returning an object that can be passed  opus frames.
+    fn create_player(&mut self) -> Result<Self::AudioPlayer, Error>;
+}
+
+/// A handle to an active audio playback stream for a single remote user.
+///
+/// Each connected user gets their own `AudioPlayer` instance, which decodes
+/// incoming Opus frames and outputs PCM audio to the platform's audio device.
+/// The player manages its own decoder state and output buffer.
+pub trait AudioPlayerInterface {
+    /// Decode and play an Opus-encoded audio frame.
+    fn play_opus(&mut self, payload: &[u8]);
+}
+
+pub trait ConfigSystemInterface: Sized + Clone {
+    fn new() -> Result<Self, Error>;
+
+    fn config_get<T>(&self, key: &str) -> Option<T>
+    where
+        T: serde::de::DeserializeOwned;
+
+    fn config_set<T>(&self, key: &str, value: &T)
+    where
+        T: serde::Serialize;
+}
+
+/// This is the main trait that each platform must implement. It combines all
+/// platform-specific functionality into a single interface, providing compile-time
+/// verification that all platforms implement the required functionality.
+pub trait PlatformInterface {
+    type AudioSystem: AudioSystemInterface;
+    type ConfigSystem: ConfigSystemInterface;
+
+    /// Initialize logging for the platform.
+    fn init_logging();
+
+    /// Request runtime permissions (Android audio recording, etc.).
+    fn request_permissions();
+
+    /// Establish a connection to the Mumble server and run the network loop.
+    fn network_connect(
+        address: String,
+        username: String,
+        event_rx: &mut UnboundedReceiver<Command>,
+        proxy_overrides: &ProxyOverrides,
+        state: SharedState,
+    ) -> impl Future<Output = Result<(), Error>>;
+
+    /// Get server status (user count, version, etc.) for the given address.
+    ///
+    /// On web, this goes through the proxy's /status endpoint and ignores `address`
+    /// (the proxy is bound to a specific server). On desktop/mobile, this pings the
+    /// given address directly via UDP.
+    fn get_status(
+        client: &reqwest::Client,
+        address: &str,
+    ) -> impl Future<Output = color_eyre::Result<ServerStatus>>;
+
+    /// Load the proxy overrides (proxy URL, cert hash, etc.).
+    fn load_proxy_overrides() -> impl Future<Output = color_eyre::Result<ProxyOverrides>>;
+
+    /// Async sleep for the given duration.
+    fn sleep(duration: Duration) -> impl Future<Output = ()>;
+}
+
+// ============================================================================
+// Platform Modules
+// ============================================================================
+
+mod stub;
+
+#[cfg(any(feature = "desktop", feature = "mobile"))]
+mod connect;
+#[cfg(any(feature = "desktop", feature = "mobile"))]
+mod native_audio;
+#[cfg(any(feature = "desktop", feature = "mobile"))]
+mod native_config;
+
+#[cfg(feature = "desktop")]
+mod desktop;
+
+#[cfg(feature = "mobile")]
+mod mobile;
+
+#[cfg(feature = "web")]
+mod web;
+
+// ============================================================================
+// Platform Type Alias
+// ============================================================================
+
+#[cfg(feature = "web")]
+pub type Platform = web::WebPlatform;
+
+#[cfg(all(feature = "desktop", not(feature = "web")))]
+pub type Platform = desktop::DesktopPlatform;
+
+#[cfg(all(feature = "mobile", not(feature = "web"), not(feature = "desktop")))]
+pub type Platform = mobile::MobilePlatform;
+
+#[cfg(all(
+    not(feature = "mobile"),
+    not(feature = "web"),
+    not(feature = "desktop")
+))]
+pub type Platform = stub::StubPlatform;
+
+pub type AudioSystem = <Platform as PlatformInterface>::AudioSystem;
+pub type AudioPlayer = <AudioSystem as AudioSystemInterface>::AudioPlayer;
+
+pub type ConfigSystem = <Platform as PlatformInterface>::ConfigSystem;
+
+// ========================
+// Platform Async Runtime
+// ========================
+
+// Note: these can not be part of the Platform because they differ in Send requiremets
+#[cfg(all(any(feature = "desktop", feature = "mobile"), not(feature = "web")))]
+pub use connect::{spawn, SpawnHandle};
+#[cfg(all(
+    not(feature = "desktop"),
+    not(feature = "mobile"),
+    not(feature = "web")
+))]
+pub use stub::{spawn, SpawnHandle};
+#[cfg(feature = "web")]
+pub use web::{spawn, SpawnHandle};
+
+// =======================
+// Compile-time Assertions
+// =======================
+const _: () = {
+    fn assert_platform<T: PlatformInterface>() {}
+
+    // Check each implementation, and prevent warnings that the implementations are unused.
+    #[cfg(feature = "web")]
+    let _ = assert_platform::<web::WebPlatform>;
+    #[cfg(feature = "desktop")]
+    let _ = assert_platform::<desktop::DesktopPlatform>;
+    #[cfg(feature = "mobile")]
+    let _ = assert_platform::<mobile::MobilePlatform>;
+    let _ = assert_platform::<stub::StubPlatform>;
+};
+
+fn global_default_config() -> HashMap<String, serde_json::Value> {
+    serde_json::json!({})
+        .as_object()
+        .unwrap()
+        .clone()
+        .into_iter()
+        .collect()
+}

client/src/imp/native_audio.rs

@@ -0,0 +1,219 @@
+use crate::effects::{AudioProcessor, AudioProcessorSender, TransmitState};
+use color_eyre::eyre::{eyre, Error};
+use cpal::traits::{DeviceTrait, HostTrait, StreamTrait as _};
+use std::mem::replace;
+use std::sync::Arc;
+use std::sync::Mutex;
+use tracing::{error, info, warn};
+
+pub struct NativeAudioSystem {
+    output: cpal::Device,
+    input: cpal::Device,
+    processors: AudioProcessorSender,
+    recording_stream: Option<cpal::Stream>,
+}
+
+const SAMPLE_RATE: u32 = 48_000;
+const PACKET_SAMPLES: u32 = 960;
+// Divide by 1000 to get samples per ms, then multiply by 60ms for max Opus frame size.
+const MAX_DECODE_SAMPLES: usize = SAMPLE_RATE as usize / 1000 * 60;
+
+fn encode_and_send(
+    state: TransmitState,
+    output_buffer: &mut Vec<f32>,
+    encoder: &mut opus::Encoder,
+    each: &mut impl FnMut(Vec<u8>, bool),
+) {
+    let (is_terminator, should_encode) = match state {
+        TransmitState::Silent => return,
+        TransmitState::Transmitting => (false, output_buffer.len() >= PACKET_SAMPLES as usize),
+        TransmitState::Terminator => {
+            output_buffer.resize(PACKET_SAMPLES as usize, 0.0);
+            (true, true)
+        }
+    };
+
+    if should_encode {
+        let remainder = output_buffer.split_off(PACKET_SAMPLES as usize);
+        let frame = replace(output_buffer, remainder);
+        match encoder.encode_vec_float(&frame, frame.len() * 2) {
+            Ok(encoded) => each(encoded, is_terminator),
+            Err(e) => error!("error encoding {} samples: {e:?}", frame.len()),
+        }
+    }
+}
+
+type Buffer = Arc<Mutex<dasp_ring_buffer::Bounded<Vec<i16>>>>;
+
+impl NativeAudioSystem {
+    fn choose_config(
+        &self,
+        configs: impl Iterator<Item = cpal::SupportedStreamConfigRange>,
+    ) -> Result<cpal::StreamConfig, Error> {
+        let mut supported_configs: Vec<_> = configs
+            .filter_map(|cfg| cfg.try_with_sample_rate(cpal::SampleRate(SAMPLE_RATE)))
+            .filter(|cfg| cfg.sample_format() == cpal::SampleFormat::I16)
+            .map(|cfg| cpal::StreamConfig {
+                buffer_size: cpal::BufferSize::Fixed(match *cfg.buffer_size() {
+                    cpal::SupportedBufferSize::Range { min, max } => 480.clamp(min, max),
+                    cpal::SupportedBufferSize::Unknown => 480,
+                }),
+                ..cfg.config()
+            })
+            .collect();
+        supported_configs.sort_by(|a, b| {
+            let cpal::BufferSize::Fixed(a_buf) = a.buffer_size else {
+                unreachable!()
+            };
+            let cpal::BufferSize::Fixed(b_buf) = b.buffer_size else {
+                unreachable!()
+            };
+            Ord::cmp(&a.channels, &b.channels).then(Ord::cmp(&a_buf, &b_buf))
+        });
+        supported_configs
+            .get(0)
+            .cloned()
+            .ok_or(eyre!("no supported stream configs"))
+    }
+}
+
+impl super::AudioSystemInterface for NativeAudioSystem {
+    type AudioPlayer = NativeAudioPlayer;
+
+    async fn new() -> Result<Self, Error> {
+        let host = cpal::default_host();
+        let name = host.id();
+        let processors = AudioProcessorSender::default();
+        Ok(NativeAudioSystem {
+            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:?}"))?,
+            processors,
+            recording_stream: None,
+        })
+    }
+
+    fn set_processor(&self, processor: AudioProcessor) {
+        self.processors.store(Some(processor))
+    }
+
+    fn start_recording(
+        &mut self,
+        mut each: impl FnMut(Vec<u8>, bool) + Send + 'static,
+    ) -> Result<(), Error> {
+        let config = self.choose_config(self.input.supported_input_configs()?)?;
+        info!(
+            "creating recording on {:?} with {:#?}",
+            self.input.name()?,
+            config
+        );
+        let mut encoder =
+            opus::Encoder::new(SAMPLE_RATE, opus::Channels::Mono, opus::Application::Voip)?;
+        let mut current_processor = AudioProcessor::new(false);
+        let mut output_buffer = Vec::new();
+        let processors = self.processors.clone();
+        let error_callback = move |e: cpal::StreamError| error!("error recording: {e:?}");
+        let data_callback = move |frame: &[f32], _: &cpal::InputCallbackInfo| {
+            if let Some(new_processor) = processors.take() {
+                current_processor = new_processor;
+            }
+            let state =
+                current_processor.process(frame, config.channels as usize, &mut output_buffer);
+            encode_and_send(state, &mut output_buffer, &mut encoder, &mut each);
+        };
+
+        match self
+            .input
+            .build_input_stream(&config, data_callback, error_callback, None)
+        {
+            Ok(stream) => {
+                stream.play()?;
+                self.recording_stream = Some(stream);
+                Ok(())
+            }
+            Err(err) => {
+                self.recording_stream = None;
+                Err(err.into())
+            }
+        }
+    }
+
+    fn create_player(&mut self) -> Result<NativeAudioPlayer, Error> {
+        let config = self.choose_config(self.output.supported_output_configs()?)?;
+        info!(
+            "creating player on {:?} with {:#?}",
+            self.output.name().ok(),
+            &config
+        );
+        let buffer = Arc::new(Mutex::new(dasp_ring_buffer::Bounded::from_raw_parts(
+            0,
+            0,
+            vec![
+            0;
+            SAMPLE_RATE as usize/4 // 250ms of buffer
+        ],
+        )));
+        let decoder = opus::Decoder::new(SAMPLE_RATE, opus::Channels::Mono)?;
+        let stream = {
+            let buffer = buffer.clone();
+            self.output.build_output_stream(
+                &config,
+                move |frame, _info| {
+                    let mut buffer = buffer.lock().unwrap();
+                    for x in frame.chunks_mut(config.channels as usize) {
+                        match buffer.pop() {
+                            Some(y) => {
+                                x.fill(y);
+                            }
+                            None => {
+                                x.fill(0);
+                            }
+                        }
+                    }
+                },
+                move |err| error!("could not create output stream {err:?}"),
+                None,
+            )?
+        };
+        stream.play()?;
+        Ok(NativeAudioPlayer {
+            decoder,
+            stream,
+            buffer,
+            tmp: vec![0; MAX_DECODE_SAMPLES],
+        })
+    }
+}
+
+pub struct NativeAudioPlayer {
+    decoder: opus::Decoder,
+    stream: cpal::Stream,
+    buffer: Buffer,
+    tmp: Vec<i16>,
+}
+
+impl super::AudioPlayerInterface for NativeAudioPlayer {
+    fn play_opus(&mut self, payload: &[u8]) {
+        let len = match self.decoder.decode(payload, &mut self.tmp, false) {
+            Ok(l) => 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");
+        }
+    }
+}

client/src/imp/native_config.rs

@@ -0,0 +1,117 @@
+use color_eyre::eyre::Error;
+use std::collections::HashMap;
+use tracing::info;
+
+#[derive(Clone, PartialEq)]
+pub struct NativeConfigSystem {
+    config_path: std::path::PathBuf,
+}
+
+impl super::ConfigSystemInterface for NativeConfigSystem {
+    fn new() -> color_eyre::Result<Self, Error> {
+        return Ok(NativeConfigSystem {
+            config_path: get_config_path()?,
+        });
+    }
+
+    fn config_get<T>(&self, key: &str) -> Option<T>
+    where
+        T: serde::de::DeserializeOwned,
+    {
+        let config = load_config_map(&self.config_path);
+
+        let Some(value_untyped) = config.get(key).cloned().or_else(|| config_get_default(key))
+        else {
+            return None;
+        };
+
+        match serde_json::from_value::<T>(value_untyped) {
+            Ok(v) => Some(v),
+            Err(_) => {
+                let default_value = config_get_default(key)
+                    .expect("Default value required after config parse failure");
+                Some(
+                    serde_json::from_value::<T>(default_value)
+                        .expect("Default value could not be parsed"),
+                )
+            }
+        }
+    }
+
+    fn config_set<T>(&self, key: &str, value: &T)
+    where
+        T: serde::Serialize,
+    {
+        let mut config = load_config_map(&self.config_path);
+        let json_value = serde_json::to_value(value).expect("failed to serialize config value");
+        config.insert(key.to_string(), json_value);
+        save_config_map(&config).expect("failed to set config")
+    }
+}
+
+#[cfg(any(feature = "desktop"))]
+fn get_config_path() -> color_eyre::Result<std::path::PathBuf> {
+    use etcetera::{choose_app_strategy, AppStrategy, AppStrategyArgs};
+
+    let strategy = choose_app_strategy(AppStrategyArgs {
+        top_level_domain: "xyz".to_string(),
+        author: "ohea".to_string(),
+        app_name: "Mumble Web2".to_string(),
+    })
+    .expect("failed to choose app strategy");
+    Ok(strategy.config_dir().join("config.json"))
+}
+
+#[cfg(target_os = "android")]
+fn get_config_path() -> color_eyre::Result<std::path::PathBuf> {
+    let ctx = ndk_context::android_context();
+    let vm = unsafe { jni::JavaVM::from_raw(ctx.vm().cast()) }?;
+    let mut env = vm.attach_current_thread()?;
+    let ctx = unsafe { jni::objects::JObject::from_raw(ctx.context().cast()) };
+    let cache_dir = env
+        .call_method(ctx, "getFilesDir", "()Ljava/io/File;", &[])?
+        .l()?;
+    let cache_dir: jni::objects::JString = env
+        .call_method(&cache_dir, "toString", "()Ljava/lang/String;", &[])?
+        .l()?
+        .try_into()?;
+    let cache_dir = env.get_string(&cache_dir)?;
+    let cache_dir = cache_dir.to_str()?;
+    Ok(std::path::PathBuf::from(cache_dir).join("config.json"))
+}
+
+fn load_config_map(config_path: &std::path::PathBuf) -> HashMap<String, serde_json::Value> {
+    match std::fs::read_to_string(config_path) {
+        Ok(contents) => serde_json::from_str(&contents).unwrap_or_default(),
+        Err(_) => HashMap::new(),
+    }
+}
+
+fn save_config_map(config: &HashMap<String, serde_json::Value>) -> color_eyre::Result<()> {
+    let config_path = get_config_path().expect("Could not get config file path.");
+    if let Some(parent) = config_path.parent() {
+        info!("Creating config directory: {}", parent.display());
+        std::fs::create_dir_all(parent)?;
+    }
+    let contents = serde_json::to_string_pretty(config)?;
+    info!("Writing config to {}", config_path.display());
+    std::fs::write(&config_path, contents)?;
+    Ok(())
+}
+
+fn config_get_default(key: &str) -> Option<serde_json::Value> {
+    let default_config = platform_default_config();
+    default_config
+        .get(key)
+        .cloned()
+        .or(super::global_default_config().get(key).cloned())
+}
+
+fn platform_default_config() -> HashMap<String, serde_json::Value> {
+    serde_json::json!({})
+        .as_object()
+        .unwrap()
+        .clone()
+        .into_iter()
+        .collect()
+}

client/src/imp/stub.rs

@@ -0,0 +1,129 @@
+/// Stub implementation of the platform interface, so that we can
+/// `cargo check` without any --feature flags.
+use crate::{app::SharedState, effects::AudioProcessor};
+use color_eyre::eyre::Error;
+use futures_channel::mpsc::UnboundedReceiver;
+use mumble_web2_common::{ProxyOverrides, ServerStatus};
+use std::future::Future;
+
+pub struct StubPlatform;
+
+impl super::PlatformInterface for StubPlatform {
+    type AudioSystem = StubAudioSystem;
+    type ConfigSystem = StubConfigSystem;
+
+    fn init_logging() {
+        panic!("stubbed platform")
+    }
+
+    fn request_permissions() {
+        panic!("stubbed platform")
+    }
+
+    fn network_connect(
+        _address: String,
+        _username: String,
+        _event_rx: &mut UnboundedReceiver<crate::app::Command>,
+        _overrides: &ProxyOverrides,
+        _state: SharedState,
+    ) -> impl Future<Output = Result<(), Error>> {
+        async { panic!("stubbed platform") }
+    }
+
+    fn get_status(
+        _client: &reqwest::Client,
+        _address: &str,
+    ) -> impl Future<Output = color_eyre::Result<ServerStatus>> {
+        async { panic!("stubbed platform") }
+    }
+
+    fn load_proxy_overrides() -> impl Future<Output = color_eyre::Result<ProxyOverrides>> {
+        async { panic!("stubbed platform") }
+    }
+
+    fn sleep(_duration: std::time::Duration) -> impl Future<Output = ()> {
+        async { panic!("stubbed platform") }
+    }
+}
+
+pub struct StubAudioSystem;
+
+impl super::AudioSystemInterface for StubAudioSystem {
+    type AudioPlayer = StubAudioPlayer;
+
+    async fn new() -> Result<Self, Error> {
+        panic!("stubbed platform")
+    }
+
+    fn set_processor(&self, _processor: AudioProcessor) {
+        panic!("stubbed platform")
+    }
+
+    fn start_recording(
+        &mut self,
+        _each: impl FnMut(Vec<u8>, bool) + Send + 'static,
+    ) -> Result<(), Error> {
+        panic!("stubbed platform")
+    }
+
+    fn create_player(&mut self) -> Result<Self::AudioPlayer, Error> {
+        panic!("stubbed platform")
+    }
+}
+
+pub struct StubAudioPlayer;
+
+impl super::AudioPlayerInterface for StubAudioPlayer {
+    fn play_opus(&mut self, _payload: &[u8]) {
+        panic!("stubbed platform")
+    }
+}
+
+#[derive(Clone)]
+pub struct StubConfigSystem;
+
+impl super::ConfigSystemInterface for StubConfigSystem {
+    fn new() -> Result<Self, Error> {
+        panic!("stubbed platform")
+    }
+
+    fn config_get<T>(&self, key: &str) -> Option<T>
+    where
+        T: serde::de::DeserializeOwned,
+    {
+        panic!("stubbed platform")
+    }
+
+    fn config_set<T>(&self, key: &str, value: &T)
+    where
+        T: serde::Serialize,
+    {
+        panic!("stubbed platform")
+    }
+}
+
+#[allow(unused)]
+pub struct SpawnHandle;
+
+impl SpawnHandle {
+    #[allow(unused)]
+    pub fn spawn<F>(&self, _future: F)
+    where
+        F: Future<Output = ()> + 'static,
+    {
+        panic!("stubbed platform")
+    }
+
+    #[allow(unused)]
+    pub fn current() -> Self {
+        SpawnHandle
+    }
+}
+
+#[allow(unused)]
+pub fn spawn<F>(_future: F)
+where
+    F: Future<Output = ()> + 'static,
+{
+    panic!("stubbed platform")
+}

client/src/imp/web.rs

@@ -0,0 +1,574 @@
+use crate::app::{Command, SharedState};
+use crate::effects::{AudioProcessor, AudioProcessorSender, TransmitState};
+use color_eyre::eyre::{bail, eyre, Error};
+use crossbeam::atomic::AtomicCell;
+use futures_channel::mpsc::UnboundedReceiver;
+use gloo_timers::future::TimeoutFuture;
+use js_sys::Float32Array;
+use manganis::asset;
+use mumble_protocol::control::ClientControlCodec;
+use mumble_web2_common::{ProxyOverrides, ServerStatus};
+use reqwest::Url;
+use std::collections::HashMap;
+use std::future::Future;
+use std::sync::Arc;
+use std::time::Duration;
+use tracing::level_filters::LevelFilter;
+use tracing::{debug, error, info, instrument};
+use wasm_bindgen::prelude::*;
+use wasm_bindgen_futures::JsFuture;
+use web_sys::js_sys::{Promise, Reflect, Uint8Array};
+use web_sys::AudioContextOptions;
+use web_sys::AudioData;
+use web_sys::AudioDecoder;
+use web_sys::AudioDecoderConfig;
+use web_sys::AudioDecoderInit;
+use web_sys::AudioEncoder;
+use web_sys::AudioEncoderConfig;
+use web_sys::AudioEncoderInit;
+use web_sys::AudioWorkletNode;
+use web_sys::EncodedAudioChunk;
+use web_sys::EncodedAudioChunkInit;
+use web_sys::EncodedAudioChunkType;
+use web_sys::MediaStreamConstraints;
+use web_sys::MessageEvent;
+use web_sys::WebTransport;
+use web_sys::WebTransportBidirectionalStream;
+use web_sys::WebTransportOptions;
+use web_sys::WorkletOptions;
+use web_sys::{console, window};
+use web_sys::{AudioContext, AudioDataCopyToOptions};
+
+#[allow(unused)]
+pub use wasm_bindgen_futures::spawn_local as spawn;
+
+#[allow(unused)]
+#[derive(Clone)]
+pub struct SpawnHandle;
+
+impl SpawnHandle {
+    pub fn spawn<F>(&self, future: F)
+    where
+        F: Future<Output = ()> + 'static,
+    {
+        wasm_bindgen_futures::spawn_local(future);
+    }
+
+    pub fn current() -> Self {
+        SpawnHandle
+    }
+}
+
+/// Web platform implementation using WebTransport and Web Audio API.
+pub struct WebPlatform;
+
+impl super::PlatformInterface for WebPlatform {
+    type AudioSystem = WebAudioSystem;
+    type ConfigSystem = WebConfigSystem;
+
+    fn init_logging() {
+        // copied from tracing_web example usage
+
+        use tracing_subscriber::fmt::format::Pretty;
+        use tracing_subscriber::prelude::*;
+        use tracing_web::{performance_layer, MakeWebConsoleWriter};
+
+        let fmt_layer = tracing_subscriber::fmt::layer()
+            .with_ansi(false) // Only partially supported across browsers
+            .without_time() // std::time is not available in browsers
+            .with_writer(MakeWebConsoleWriter::new()) // write events to the console
+            .with_filter(LevelFilter::DEBUG);
+        let perf_layer = performance_layer().with_details_from_fields(Pretty::default());
+
+        tracing_subscriber::registry()
+            .with(fmt_layer)
+            .with(perf_layer)
+            .init();
+
+        info!("logging initiated");
+    }
+
+    fn request_permissions() {
+        // No-op on web
+    }
+
+    async fn load_proxy_overrides() -> color_eyre::Result<ProxyOverrides> {
+        let overrides = match option_env!("MUMBLE_WEB2_PROXY_OVERRIDES_URL") {
+            Some(url) => Url::parse(url)?,
+            None => absolute_url("overrides")?,
+        };
+        info!("loading config from {}", overrides);
+
+        let config = reqwest::get(overrides)
+            .await?
+            .json::<ProxyOverrides>()
+            .await?;
+
+        Ok(config)
+    }
+
+    async fn network_connect(
+        address: String,
+        username: String,
+        event_rx: &mut UnboundedReceiver<Command>,
+        overrides: &ProxyOverrides,
+        state: SharedState,
+    ) -> Result<(), Error> {
+        network_connect(address, username, event_rx, overrides, state).await
+    }
+
+    async fn get_status(
+        client: &reqwest::Client,
+        _address: &str,
+    ) -> color_eyre::Result<ServerStatus> {
+        Ok(client
+            .get(absolute_url("status")?)
+            .send()
+            .await?
+            .json::<ServerStatus>()
+            .await?)
+    }
+
+    async fn sleep(duration: Duration) {
+        TimeoutFuture::new(duration.as_millis() as u32).await;
+    }
+}
+
+trait ResultExt<T> {
+    fn ey(self) -> Result<T, Error>;
+}
+
+impl<T> ResultExt<T> for Result<T, JsValue> {
+    fn ey(self) -> Result<T, Error> {
+        match self {
+            Ok(x) => Ok(x),
+            Err(e) => match e.dyn_into::<js_sys::Error>() {
+                Ok(e) => Err(eyre!("{}: {}", e.name(), e.message())),
+                Err(e) => Err(eyre!("{:?}", e)),
+            },
+        }
+    }
+}
+
+impl<T> ResultExt<T> for Result<T, JsError> {
+    fn ey(self) -> Result<T, Error> {
+        self.map_err(|e| JsValue::from(e)).ey()
+    }
+}
+
+pub struct WebAudioSystem {
+    webctx: AudioContext,
+    processors: AudioProcessorSender,
+}
+
+async fn attach_worklet(audio_context: &AudioContext, worklet_url: &str) -> Result<(), Error> {
+    // Create worklets to process mic and speaker audio
+    // Speaker audio processing worklet only required on
+    // browsers that don't support MediaStreamTrackGenerator
+
+    let options = WorkletOptions::new();
+    Reflect::set(
+        &options,
+        &"processorOptions".into(),
+        &wasm_bindgen::module(),
+    )
+    .ey()?;
+
+    info!("loading mic worklet from {worklet_url:?}");
+    audio_context
+        .audio_worklet()
+        .ey()?
+        .add_module_with_options(worklet_url, &options)
+        .ey()?
+        .into_future()
+        .await
+        .ey()?;
+    Ok(())
+}
+
+impl super::AudioSystemInterface for WebAudioSystem {
+    type AudioPlayer = WebAudioPlayer;
+
+    async fn new() -> Result<Self, Error> {
+        // Create MediaStreams to playback decoded audio
+        // The audio context is used to reproduce audio.
+        let webctx = configure_audio_context();
+        attach_worklet(
+            &webctx,
+            &asset!("/assets/rust_audio_worklet.js").to_string(),
+        )
+        .await?;
+
+        let processors = AudioProcessorSender::default();
+
+        Ok(WebAudioSystem { webctx, processors })
+    }
+
+    fn set_processor(&self, processor: AudioProcessor) {
+        self.processors.store(Some(processor))
+    }
+
+    fn start_recording(&mut self, each: impl FnMut(Vec<u8>, bool) + 'static) -> Result<(), Error> {
+        let audio_context_worklet = self.webctx.clone();
+        let processors = self.processors.clone();
+        spawn(async move {
+            match run_encoder_worklet(&audio_context_worklet, each, processors).await {
+                Ok(node) => info!("created encoder worklet: {:?}", &node),
+                Err(err) => error!("could not create encoder worklet: {err}"),
+            }
+        });
+        Ok(())
+    }
+
+    fn create_player(&mut self) -> Result<WebAudioPlayer, Error> {
+        let sink_node = AudioWorkletNode::new(&self.webctx, "rust_speaker_worklet").ey()?;
+
+        // Connect worklet to destination
+        sink_node
+            .connect_with_audio_node(&self.webctx.destination())
+            .ey()?;
+
+        // Create callback functions for AudioDecoder
+        let decoder_error = Closure::wrap(Box::new(move |e: JsValue| {
+            error!("error decoding audio {:?}", e);
+        }) as Box<dyn FnMut(JsValue)>);
+
+        let sink_port = sink_node.port().ey()?;
+
+        let output = Closure::wrap(Box::new(move |audio_data: AudioData| {
+            // Extract planar PCM from AudioData into an ArrayBuffer or Float32Array
+            // Here we assume f32 samples, 1 channel for brevity.
+            let number_of_frames = audio_data.number_of_frames();
+
+            let js_buffer = Float32Array::new_with_length(number_of_frames);
+
+            let audio_data_copy_to_options = &AudioDataCopyToOptions::new(0);
+            audio_data_copy_to_options.set_format(web_sys::AudioSampleFormat::F32);
+
+            if let Err(e) = audio_data
+                .copy_to_with_buffer_source(&js_buffer.buffer(), &audio_data_copy_to_options)
+            {
+                error!("could not copy audio data to array {:?}", e);
+            }
+
+            // Post to the worklet; include sampleRate and channel count if needed.
+            let msg = js_sys::Object::new();
+            js_sys::Reflect::set(&msg, &"samples".into(), &js_buffer).unwrap();
+
+            sink_port.post_message(&msg).unwrap();
+
+            audio_data.close();
+        }) as Box<dyn FnMut(AudioData)>);
+
+        let audio_decoder = AudioDecoder::new(&AudioDecoderInit::new(
+            decoder_error.as_ref().unchecked_ref(),
+            output.as_ref().unchecked_ref(),
+        ))
+        .ey()?;
+
+        audio_decoder.configure(&AudioDecoderConfig::new("opus", 1, 48000));
+        info!("created audio decoder");
+
+        // This is required to prevent these from being deallocated
+        decoder_error.forget();
+        output.forget();
+
+        Ok(WebAudioPlayer(audio_decoder))
+    }
+}
+
+pub struct WebAudioPlayer(AudioDecoder);
+
+impl super::AudioPlayerInterface for WebAudioPlayer {
+    fn play_opus(&mut self, payload: &[u8]) {
+        let js_audio_payload = Uint8Array::from(payload);
+        let _ = self.0.decode(
+            &EncodedAudioChunk::new(&EncodedAudioChunkInit::new(
+                &js_audio_payload.into(),
+                0.0,
+                EncodedAudioChunkType::Key,
+            ))
+            .unwrap(),
+        );
+    }
+}
+
+// Borrowed from
+// https://github.com/security-union/videocall-rs/blob/main/videocall-client/src/decode/config.rs#L6
+fn configure_audio_context() -> AudioContext {
+    let audio_context_options = AudioContextOptions::new();
+    audio_context_options.set_sample_rate(48000 as f32);
+    let audio_context = AudioContext::new_with_context_options(&audio_context_options).unwrap();
+    audio_context
+}
+
+trait PromiseExt {
+    fn into_future(self) -> JsFuture;
+}
+
+impl PromiseExt for Promise {
+    fn into_future(self) -> JsFuture {
+        self.into()
+    }
+}
+
+fn process_audio(frame: &JsValue, processor: &mut AudioProcessor) -> TransmitState {
+    let Ok(samples) = Reflect::get(&frame, &"data".into()) else {
+        return TransmitState::Silent;
+    };
+    let Ok(samples) = samples.dyn_into::<Float32Array>() else {
+        return TransmitState::Silent;
+    };
+    let input = samples.to_vec();
+    let mut output = Vec::with_capacity(input.len());
+    let state = processor.process(&input, 1, &mut output);
+    if !output.is_empty() {
+        samples.copy_from(&output);
+    }
+
+    state
+}
+
+async fn run_encoder_worklet(
+    audio_context: &AudioContext,
+    mut each: impl FnMut(Vec<u8>, bool) + 'static,
+    processors: AudioProcessorSender,
+) -> Result<AudioWorkletNode, Error> {
+    let constraints = MediaStreamConstraints::new();
+    constraints.set_audio(&JsValue::TRUE);
+    let stream = window()
+        .unwrap()
+        .navigator()
+        .media_devices()
+        .ey()?
+        .get_user_media_with_constraints(&constraints)
+        .ey()?
+        .into_future()
+        .await
+        .ey()?
+        .dyn_into()
+        .map_err(|e| JsError::new(&format!("not a stream: {e:?}")))
+        .ey()?;
+
+    let source = audio_context.create_media_stream_source(&stream).ey()?;
+    let worklet_node = AudioWorkletNode::new(audio_context, "rust_mic_worklet").ey()?;
+
+    let encoder_error: Closure<dyn FnMut(JsValue)> =
+        Closure::new(|e| error!("error encoding audio {:?}", e));
+
+    // Shared state to signal terminator between onmessage and output closures
+    // The output closure runs asynchronously after encoding completes
+    let pending_terminator = Arc::new(AtomicCell::new(false));
+    let pending_terminator_output = pending_terminator.clone();
+
+    // This knows what MediaStreamTrackGenerator to use as it closes around it
+    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);
+            // Check if this frame was marked as a terminator
+            let is_terminator = pending_terminator_output.swap(false);
+            each(array, is_terminator);
+        });
+
+    let audio_encoder = AudioEncoder::new(&AudioEncoderInit::new(
+        encoder_error.as_ref().unchecked_ref(),
+        output.as_ref().unchecked_ref(),
+    ))
+    .unwrap();
+
+    // This is required to prevent these from being deallocated
+    encoder_error.forget();
+    output.forget();
+    let encoder_config = AudioEncoderConfig::new("opus");
+    encoder_config.set_number_of_channels(1);
+    encoder_config.set_sample_rate(48000);
+    encoder_config.set_bitrate(72_000.0);
+
+    audio_encoder.configure(&encoder_config);
+    info!("created audio encoder");
+
+    let mut current_processor = AudioProcessor::new(false);
+    let onmessage: Closure<dyn FnMut(MessageEvent)> = Closure::new(move |event: MessageEvent| {
+        if let Some(new_processor) = processors.take() {
+            current_processor = new_processor;
+        }
+
+        let frame = event.data();
+        let state = process_audio(&frame, &mut current_processor);
+
+        match state {
+            TransmitState::Silent => {
+                // Don't encode or send anything
+                return;
+            }
+            TransmitState::Transmitting => (), // Normal transmission
+            TransmitState::Terminator => {
+                // Mark this as a terminator before encoding
+                pending_terminator.store(true);
+            }
+        }
+        match AudioData::new(frame.unchecked_ref()) {
+            Ok(data) => {
+                let _ = audio_encoder.encode(&data);
+            }
+            Err(err) => {
+                error!(
+                    "error creating AudioData object {:?} during event {:?}",
+                    err, event,
+                );
+            }
+        }
+    });
+    Reflect::set(
+        &Reflect::get(&worklet_node, &"port".into()).ey()?,
+        &"onmessage".into(),
+        onmessage.as_ref(),
+    )
+    .ey()?;
+    onmessage.forget();
+
+    source.connect_with_audio_node(&worklet_node).ey()?;
+    worklet_node
+        .connect_with_audio_node(&audio_context.destination())
+        .ey()?;
+
+    Ok(worklet_node)
+}
+
+#[instrument]
+pub async fn network_connect(
+    address: String,
+    username: String,
+    event_rx: &mut UnboundedReceiver<Command>,
+    overrides: &ProxyOverrides,
+    state: SharedState,
+) -> Result<(), Error> {
+    info!("connecting");
+
+    let object = web_sys::js_sys::Object::new();
+
+    Reflect::set(
+        &object,
+        &JsValue::from_str("algorithm"),
+        &JsValue::from_str("sha-256"),
+    )
+    .ey()?;
+
+    if let Some(server_hash) = &overrides.cert_hash {
+        let hash = web_sys::js_sys::Uint8Array::from(server_hash.as_slice());
+        web_sys::js_sys::Reflect::set(&object, &"value".into(), &hash).ey()?;
+    }
+
+    let array = web_sys::js_sys::Array::new();
+    array.push(&object);
+
+    debug!("created option object: {:?}", &object);
+
+    let mut options = WebTransportOptions::new();
+    options.set_server_certificate_hashes(&array);
+
+    debug!("created WebTransportOptions");
+    console::log_1(&options.clone().into());
+
+    let transport = WebTransport::new_with_options(&address, &options).ey()?;
+    debug!("created WebTransport connection object");
+    console::log_1(&transport.clone().into());
+
+    if let Err(e) = wasm_bindgen_futures::JsFuture::from(transport.ready())
+        .await
+        .ey()
+    {
+        bail!("could not connect to transport: {e}");
+    }
+
+    info!("transport is ready");
+
+    let stream: WebTransportBidirectionalStream =
+        wasm_bindgen_futures::JsFuture::from(transport.create_bidirectional_stream())
+            .await
+            .ey()?
+            .into();
+
+    let wasm_stream_readable = wasm_streams::ReadableStream::from_raw(stream.readable().into());
+    let wasm_stream_writable = wasm_streams::WritableStream::from_raw(stream.writable().into());
+
+    let read_codec = ClientControlCodec::new();
+    let write_codec = ClientControlCodec::new();
+
+    let reader =
+        asynchronous_codec::FramedRead::new(wasm_stream_readable.into_async_read(), read_codec);
+    let writer =
+        asynchronous_codec::FramedWrite::new(wasm_stream_writable.into_async_write(), write_codec);
+
+    let (outgoing_send, outgoing_recv) = futures_channel::mpsc::unbounded();
+    spawn(crate::sender_loop(outgoing_recv, writer));
+    crate::network_loop(username, state, event_rx, outgoing_send, reader).await
+}
+
+pub fn absolute_url(path: &str) -> Result<Url, Error> {
+    let window: web_sys::Window = web_sys::window().expect("no global `window` exists");
+    let location = window.location();
+    Ok(Url::parse(&location.href().ey()?)?.join(path)?)
+}
+
+#[derive(Clone, PartialEq)]
+pub struct WebConfigSystem {}
+
+impl super::ConfigSystemInterface for WebConfigSystem {
+    fn new() -> Result<Self, Error> {
+        return Ok(WebConfigSystem {});
+    }
+
+    fn config_get<T>(&self, key: &str) -> Option<T>
+    where
+        T: serde::de::DeserializeOwned,
+    {
+        // Get Storage
+        let storage = web_sys::window()?.local_storage().ok()??;
+
+        // Try localStorage first
+        if let Ok(Some(raw)) = storage.get_item(key) {
+            if let Ok(parsed) = serde_json::from_str::<T>(&raw) {
+                return Some(parsed);
+            }
+        }
+
+        // Fallback to default if deserialization fails or key missing
+        let default_value = config_get_default(key)?;
+        serde_json::from_value::<T>(default_value).ok()
+    }
+
+    fn config_set<T>(&self, key: &str, value: &T)
+    where
+        T: serde::Serialize,
+    {
+        let storage = window()
+            .and_then(|w| w.local_storage().ok().flatten())
+            .expect("localStorage not available");
+
+        let json_value =
+            serde_json::to_string(value).expect("failed to serialize config value to JSON string");
+
+        storage
+            .set_item(key, &json_value)
+            .expect("failed to write to localStorage");
+    }
+}
+
+fn config_get_default(key: &str) -> Option<serde_json::Value> {
+    let default_config = platform_default_config();
+    default_config
+        .get(key)
+        .cloned()
+        .or(super::global_default_config().get(key).cloned())
+}
+
+fn platform_default_config() -> HashMap<String, serde_json::Value> {
+    serde_json::json!({})
+        .as_object()
+        .unwrap()
+        .clone()
+        .into_iter()
+        .collect()
+}

client/src/lib.rs

@@ -0,0 +1,13 @@
+mod app;
+mod effects;
+mod imp;
+mod mainloop;
+mod msghtml;
+
+pub use app::*;
+pub use imp::*;
+pub use mainloop::*;
+pub use mime_guess;
+pub use reqwest;
+
+pub const VERSION: Option<&str> = option_env!("MUMBLE_WEB2_VERSION");

client/src/mainloop.rs

@@ -1,79 +1,89 @@
-use app::Chat;
-use app::Command;
-use app::ConnectionState;
-use app::STATE;
+use crate::msghtml::process_message_html;
+use crate::AudioSettings;
+use crate::Chat;
+use crate::Command;
+use crate::ConnectionState;
 use asynchronous_codec::FramedRead;
 use asynchronous_codec::FramedWrite;
-use dioxus::prelude::*;
+use color_eyre::eyre::{bail, Error};
+use dioxus_signals::ReadableExt as _;
+use dioxus_signals::WritableExt as _;
 use futures::select;
+use futures::AsyncRead;
+use futures::AsyncWrite;
 use futures::FutureExt as _;
 use futures::SinkExt as _;
 use futures::StreamExt as _;
-use futures_channel::mpsc::UnboundedSender;
-pub use imp::spawn;
-pub use imp::Error;
+use futures_channel::mpsc::{UnboundedReceiver, UnboundedSender};
 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;
 use std::collections::hash_map::Entry;
 use std::collections::HashMap;
 use std::time::Duration;
+use tracing::error;
+use tracing::info;
 
-pub mod app;
+use crate::app::SharedState;
+use crate::app::State;
+use crate::effects::AudioProcessor;
+use crate::imp::{
+    spawn, AudioPlayer, AudioPlayerInterface as _, AudioSystem, AudioSystemInterface as _,
+    Platform, PlatformInterface as _,
+};
 
-#[cfg(feature = "web")]
-#[path = "imp/web.rs"]
-pub mod imp;
-
-#[cfg(feature = "desktop")]
-#[path = "imp/desktop.rs"]
-pub mod imp;
-
-#[macro_export]
-macro_rules! bail {
-    ($($x:tt)*) => {
-        return Err(Error::new(format!($($x)*)))
-    };
-}
-
-pub async fn network_entrypoint(mut event_rx: UnboundedReceiver<Command>) {
+pub async fn network_entrypoint(mut event_rx: UnboundedReceiver<Command>, state: SharedState) {
     loop {
-        let Some(Command::Connect { address, username }) = event_rx.next().await else {
-            panic!("Did not receive connect command")
+        let Some(Command::Connect {
+            address,
+            username,
+            config,
+        }) = event_rx.next().await
+        else {
+            panic!("did not receive connect command")
         };
 
-        *STATE.server.write() = Default::default();
-        *STATE.status.write() = ConnectionState::Connecting;
-        if let Err(error) = imp::network_connect(address, username, &mut event_rx).await {
-            error.log();
-            *STATE.status.write() = ConnectionState::Failed(error.to_string());
+        *state.server.write_unchecked() = Default::default();
+        *state.status.write_unchecked() = ConnectionState::Connecting;
+        if let Err(error) =
+            Platform::network_connect(address, username, &mut event_rx, &config, state.clone())
+                .await
+        {
+            error!("could not connect {:?}", error);
+            *state.status.write_unchecked() = ConnectionState::Failed(error.to_string());
         } else {
-            *STATE.status.write() = ConnectionState::Disconnected;
+            *state.status.write_unchecked() = ConnectionState::Disconnected;
         }
     }
 }
 
-pub async fn network_loop<R: imp::ImpRead, W: imp::ImpWrite>(
-    username: String,
-    event_rx: &mut UnboundedReceiver<Command>,
-    mut reader: FramedRead<R, ControlCodec<Serverbound, Clientbound>>,
+pub(crate) async fn sender_loop<W: AsyncWrite + Unpin + 'static>(
+    mut outgoing: UnboundedReceiver<ControlPacket<Serverbound>>,
     mut writer: FramedWrite<W, ControlCodec<Serverbound, Clientbound>>,
-) -> Result<(), Error> {
-    let (mut send_chan, mut writer_recv_chan) = futures_channel::mpsc::unbounded();
-    spawn(async move {
-        while let Some(msg) = writer_recv_chan.next().await {
-            if !matches!(msg, ControlPacket::Ping(_) | ControlPacket::UDPTunnel(_)) {
-                eprintln!("sending {:#?}", msg);
-            }
-            if let Err(e) = writer.send(msg).await {
-                eprintln!("ERROR: {}", e);
-                break;
-            }
+) {
+    while let Some(msg) = outgoing.next().await {
+        if !matches!(msg, ControlPacket::Ping(_) | ControlPacket::UDPTunnel(_)) {
+            info!("sending packet {:#?}", msg);
         }
-    });
+        if let Err(e) = writer.send(msg).await {
+            error!("error sending packet {:?}", e);
+            break;
+        }
+    }
+}
+
+pub(crate) async fn network_loop<R: AsyncRead + Unpin + 'static>(
+    username: String,
+    state: SharedState,
+    event_rx: &mut UnboundedReceiver<Command>,
+    mut outgoing: UnboundedSender<ControlPacket<Serverbound>>,
+    mut reader: FramedRead<R, ControlCodec<Serverbound, Clientbound>>,
+) -> Result<(), Error> {
+    let audio_settings = state.audio.read().clone();
 
     // Get version packet
     let version = match reader.next().await {
@@ -81,37 +91,55 @@ pub async fn network_loop<R: imp::ImpRead, W: imp::ImpWrite>(
         Some(Err(err)) => bail!("bad version packet: {err:?}"),
         None => bail!("no version was recieved"),
     };
-    println!("Got version packet");
-    println!("{:#?}", version);
+    info!("got version packet {:#?}", version);
 
     // Send version packet
     let mut msg = msgs::Version::new();
     msg.set_version(0x000010204);
     msg.set_release(format!("{} {}", "mumbleweb2", "6.9.0"));
     //msg.set_os("Chrome".to_string());
-    send_chan.send(msg.into()).await.unwrap();
+    outgoing.send(msg.into()).await.unwrap();
 
     // Send authenticate packet
     let mut msg = msgs::Authenticate::new();
     msg.set_username(username);
     msg.set_opus(true);
-    send_chan.send(msg.into()).await.unwrap();
+    outgoing.send(msg.into()).await.unwrap();
 
     // Spawn worker to send pings
     {
-        let mut send_chan = send_chan.clone();
+        let mut send_chan = outgoing.clone();
         spawn(async move {
             loop {
                 if let Err(_) = send_chan.send(msgs::Ping::new().into()).await {
                     break;
                 }
 
-                imp::sleep(Duration::from_millis(3000)).await;
+                Platform::sleep(Duration::from_millis(3000)).await;
             }
         });
     }
 
-    let mut audio = imp::AudioSystem::new(send_chan.clone())?;
+    let mut audio = AudioSystem::new().await?;
+    audio.set_processor(AudioProcessor::new(audio_settings.denoise));
+    {
+        let send_chan = outgoing.clone();
+        let mut sequence_num = 0;
+        if let Err(err) = audio.start_recording(move |opus_frame, is_terminator| {
+            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(), is_terminator),
+                    position_info: None,
+                })));
+            sequence_num = sequence_num.wrapping_add(2);
+        }) {
+            error!("could not begin recording: {err:?}")
+        }
+    }
 
     // Create map of session_id -> AudioDecoder
     let mut decoder_map = HashMap::new();
@@ -126,28 +154,30 @@ pub async fn network_loop<R: imp::ImpRead, W: imp::ImpWrite>(
                 match packet {
                     Some(Ok(msg)) => {
                         if !matches!(msg, ControlPacket::UDPTunnel(_) | ControlPacket::Ping(_)) {
-                            println!("receiving {:#?}", msg);
+                            info!("receiving packet {:#?}", msg);
                         }
-                        let res = accept_packet(msg, &mut audio, &mut decoder_map);
+                        let res = accept_packet(msg, &mut audio, &mut decoder_map, &state);
                         if let Err(err) = res {
-                            err.log();
+                            error!("error accepting packet {:?}", err)
                         }
                     },
-                    Some(Err(err)) => Error::from(err).log(),
+                    Some(Err(err)) => {
+                        error!("error receiving packet {:?}", err)
+                    },
                     None => break,
                 }
             }
             command = command_future => {
                 command_future = event_rx.next();
                 if let Some(command) = &command {
-                    println!("commanding {:#?}", command);
+                    info!("issuing command {:#?}", command);
                 }
                 match command {
                     Some(Command::Disconnect) => break,
                     Some(command) => {
-                        let res = accept_command(command, &mut send_chan);
+                        let res = accept_command(command, &mut outgoing, &mut audio, &state);
                         if let Err(err) = res {
-                            err.log();
+                            info!("error accepting command {:?}", err)
                         }
                     }
                     None => continue,
@@ -155,7 +185,7 @@ pub async fn network_loop<R: imp::ImpRead, W: imp::ImpWrite>(
             }
         }
     }
-    let _ = send_chan.close();
+    let _ = outgoing.close();
 
     Ok(())
 }
@@ -163,9 +193,11 @@ pub async fn network_loop<R: imp::ImpRead, W: imp::ImpWrite>(
 fn accept_command(
     command: Command,
     send_chan: &mut UnboundedSender<ControlPacket<mumble_protocol::Serverbound>>,
+    audio: &mut AudioSystem,
+    state: &State,
 ) -> Result<(), Error> {
     use Command::*;
-    let Some(session) = STATE.server.read().session else {
+    let Some(session) = state.server.read().session else {
         bail!("no session id")
     };
 
@@ -188,7 +220,7 @@ fn accept_command(
             };
 
             {
-                let mut server = STATE.server.write();
+                let mut server = state.server.write_unchecked();
                 let Some(me) = server.session else {
                     bail!("not signed in with a session id")
                 };
@@ -204,6 +236,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_unchecked();
+                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);
@@ -223,6 +296,9 @@ fn accept_command(
             let _ = send_chan.unbounded_send(u.into());
         }
         Connect { .. } | Disconnect => (),
+        UpdateAudioSettings(AudioSettings { denoise }) => {
+            audio.set_processor(AudioProcessor::new(denoise));
+        }
     }
 
     Ok(())
@@ -230,8 +306,9 @@ fn accept_command(
 
 fn accept_packet(
     msg: ControlPacket<mumble_protocol::Clientbound>,
-    audio_context: &mut imp::AudioSystem,
-    player_map: &mut HashMap<u32, imp::AudioPlayer>,
+    audio_context: &mut AudioSystem,
+    player_map: &mut HashMap<u32, AudioPlayer>,
+    state: &State,
 ) -> Result<(), Error> {
     match msg {
         ControlPacket::UDPTunnel(u) => {
@@ -268,45 +345,15 @@ fn accept_packet(
             }
         }
         ControlPacket::ChannelState(u) => {
-            let mut server = STATE.server.write();
-            let id = u.get_channel_id();
-
-            let state = server.channels.entry(id).or_default();
-            let new_parent = if u.has_parent() {
-                if let Some(parent) = state.parent.and_then(|p| server.channels.get_mut(&p)) {
-                    parent.children.remove(&id);
-                }
-
-                let parent_id = u.get_parent();
-                let parent = server.channels.entry(parent_id).or_default();
-                if u.has_position() && u.get_position() as usize <= parent.children.len() {
-                    // TODO: what if positions are received out of order? we need to sort afterwards?
-                    parent.children.insert_before(u.get_position() as usize, id);
-                } else {
-                    parent.children.insert(id);
-                }
-                Some(parent_id)
-            } else {
-                None
-            };
-
-            let state = server.channels.entry(id).or_default();
-            state.parent = new_parent;
-            if u.has_name() {
-                state.name = u.get_name().to_string();
-            }
+            let mut server = state.server.write_unchecked();
+            server.channels_state.update_from_channel_state(&u);
         }
         ControlPacket::ChannelRemove(u) => {
-            let mut server = STATE.server.write();
-            let id = u.get_channel_id();
-            if let Some(channel) = server.channels.remove(&id) {
-                if let Some(parent) = channel.parent.and_then(|p| server.channels.get_mut(&p)) {
-                    parent.children.remove(&id);
-                }
-            }
+            let mut server = state.server.write_unchecked();
+            server.channels_state.update_from_channel_remove(&u);
         }
         ControlPacket::UserState(u) => {
-            let mut server = STATE.server.write();
+            let mut server = state.server.write_unchecked();
             let server = &mut *server;
             let id = u.get_session();
 
@@ -315,12 +362,13 @@ fn accept_packet(
             let state = state_entry.or_default();
             // the server might now send a channel_id if the user is in channel=0
             if u.has_channel_id() || new {
-                if let Some(parent) = server.channels.get_mut(&state.channel) {
+                if let Some(parent) = server.channels_state.channels.get_mut(&state.channel) {
                     parent.users.remove(&id);
                 }
 
                 let channel_id = u.get_channel_id();
                 server
+                    .channels_state
                     .channels
                     .entry(channel_id)
                     .or_default()
@@ -338,6 +386,9 @@ fn accept_packet(
             if u.has_deaf() {
                 state.deaf = u.get_deaf();
             }
+            if u.has_suppress() {
+                state.suppress = u.get_suppress();
+            }
             if u.has_self_mute() {
                 state.self_mute = u.get_self_mute();
             }
@@ -346,16 +397,16 @@ fn accept_packet(
             }
         }
         ControlPacket::UserRemove(u) => {
-            let mut server = STATE.server.write();
+            let mut server = state.server.write_unchecked();
             let id = u.get_session();
             if let Some(state) = server.users.remove(&id) {
-                if let Some(parent) = server.channels.get_mut(&state.channel) {
+                if let Some(parent) = server.channels_state.channels.get_mut(&state.channel) {
                     parent.users.remove(&id);
                 }
             }
         }
         ControlPacket::TextMessage(u) => {
-            let mut server = STATE.server.write();
+            let mut server = state.server.write_unchecked();
             if u.has_message() {
                 let text = u.get_message().to_string();
                 server.chat.push(Chat {
@@ -364,19 +415,19 @@ fn accept_packet(
                     } else {
                         None
                     },
-                    dangerous_html: html_purifier::purifier(&text, Default::default()),
+                    dangerous_html: process_message_html(&text),
                     raw: text,
                 });
             }
         }
         ControlPacket::ServerSync(u) => {
-            *STATE.status.write() = ConnectionState::Connected;
-            let mut server = STATE.server.write();
+            *state.status.write_unchecked() = ConnectionState::Connected;
+            let mut server = state.server.write_unchecked();
             if u.has_welcome_text() {
                 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,
                 });
             }

client/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;
+}

common/Cargo.toml

@@ -0,0 +1,12 @@
+[package]
+name = "mumble-web2-common"
+version = "0.1.0"
+edition = "2021"
+
+[features]
+networking = ["dep:tokio", "dep:color-eyre"]
+
+[dependencies]
+serde = { workspace = true }
+tokio = { version = "1", features = ["net", "time"], optional = true }
+color-eyre = { version = "0.6", optional = true }

common/src/lib.rs

@@ -0,0 +1,76 @@
+use serde::{Deserialize, Serialize};
+
+#[derive(Debug, Clone, Deserialize, Serialize, Default)]
+pub struct ProxyOverrides {
+    pub proxy_url: Option<String>,
+    pub cert_hash: Option<Vec<u8>>,
+    pub any_server: bool,
+}
+
+#[derive(Debug, Clone, Deserialize, Serialize, Default)]
+pub struct ServerStatus {
+    #[serde(default)]
+    pub success: bool,
+    pub version: Option<(u32, u32, u32)>,
+    pub users: Option<u32>,
+    pub max_users: Option<u32>,
+    pub bandwidth: Option<u32>,
+}
+
+/// Mumble UDP ping protocol.
+///
+/// Send a 12-byte packet: 4 zero bytes + 8-byte identifier.
+/// Receive a 24-byte response: 4 bytes version + 8 bytes identifier echo
+/// + 4 bytes current_users + 4 bytes max_users + 4 bytes bandwidth.
+#[cfg(feature = "networking")]
+pub async fn ping_server(address: &str, port: u16) -> color_eyre::Result<ServerStatus> {
+    use color_eyre::eyre::{bail, eyre};
+    use std::time::Duration;
+    use tokio::net::{lookup_host, UdpSocket};
+
+    let dest = lookup_host(format!("{}:{}", address, port))
+        .await?
+        .next()
+        .ok_or_else(|| eyre!("could not resolve address"))?;
+
+    let bind_addr = if dest.is_ipv6() { "[::]:0" } else { "0.0.0.0:0" };
+    let socket = UdpSocket::bind(bind_addr).await?;
+    socket.connect(dest).await?;
+
+    let request_id: u64 = std::time::SystemTime::now()
+        .duration_since(std::time::UNIX_EPOCH)
+        .unwrap_or_default()
+        .as_nanos() as u64;
+
+    let mut buf = [0u8; 12];
+    buf[4..12].copy_from_slice(&request_id.to_be_bytes());
+    socket.send(&buf).await?;
+
+    let mut response = [0u8; 24];
+    let timeout = tokio::time::timeout(Duration::from_secs(2), socket.recv(&mut response)).await;
+
+    match timeout {
+        Ok(Ok(len)) if len >= 24 => {
+            let version_major = response[0] as u32;
+            let version_minor = response[1] as u32;
+            let version_patch = response[2] as u32;
+            let users =
+                u32::from_be_bytes([response[12], response[13], response[14], response[15]]);
+            let max_users =
+                u32::from_be_bytes([response[16], response[17], response[18], response[19]]);
+            let bandwidth =
+                u32::from_be_bytes([response[20], response[21], response[22], response[23]]);
+
+            Ok(ServerStatus {
+                success: true,
+                version: Some((version_major, version_minor, version_patch)),
+                users: Some(users),
+                max_users: Some(max_users),
+                bandwidth: Some(bandwidth),
+            })
+        }
+        Ok(Ok(_)) => bail!("ping response too short"),
+        Ok(Err(e)) => Err(e.into()),
+        Err(_) => bail!("ping timed out"),
+    }
+}

config.toml.example

@@ -0,0 +1,5 @@
+proxy_url = "https://127.0.0.1:4433/proxy"
+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"

docker/Caddyfile

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

docker/android-release-builder.Dockerfile

@@ -0,0 +1,43 @@
+FROM rust:trixie
+
+ARG ANDROID_CLI_TOOLS_VERSION=13114758
+
+# Install android rust toolchains
+RUN rustup target add aarch64-linux-android armv7-linux-androideabi i686-linux-android x86_64-linux-android
+
+# Install debian dependencies
+RUN apt-get update && \
+    DEBIAN_FRONTEND=noninteractive apt-get install -y --no-install-recommends \
+    nodejs \
+    ca-certificates \
+    curl \
+    unzip \
+    default-jdk
+
+# Install android commandline tools (required to install the sdk)
+RUN cd /tmp && \
+    curl -o commandlinetools-linux.zip "https://dl.google.com/android/repository/commandlinetools-linux-${ANDROID_CLI_TOOLS_VERSION}_latest.zip" && \
+    unzip commandlinetools-linux.zip && \
+    mkdir -p /opt/android-tools/cmdline-tools && \ 
+    cp -r cmdline-tools /opt/android-tools/cmdline-tools/latest
+
+
+# Install required android tools
+RUN yes | /opt/android-tools/cmdline-tools/latest/bin/sdkmanager --install "platform-tools" "platforms;android-36.1" "build-tools;36.1.0" "ndk;29.0.14206865" "cmake;3.31.6"
+
+# Install cargo binstall
+RUN curl -L --proto '=https' --tlsv1.2 -sSf https://raw.githubusercontent.com/cargo-bins/cargo-binstall/main/install-from-binstall-release.sh | bash
+
+# Install dioxus-cli
+RUN cargo binstall dioxus-cli@0.7.3
+
+# Install bindgen-cli
+RUN cargo binstall bindgen-cli
+
+# Set required env vars
+ENV ANDROID_HOME="/opt/android-tools/"
+ENV NDK_HOME="$ANDROID_HOME/ndk/29.0.14206865"
+ENV PATH="$PATH:$ANDROID_HOME/platform-tools"
+ENV PATH="$PATH:/opt/android-tools/cmake/3.31.6/bin/"
+ENV LLVM_CONFIG_PATH="/opt/android-tools/ndk/29.0.14206865/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-config"
+

docker/build-android-local.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+set -euo pipefail
+
+SCRIPT_DIR="$(dirname "$(realpath "${BASH_SOURCE[0]}")")"
+PROJECT_ROOT="$(dirname "$SCRIPT_DIR")"
+IMAGE_NAME="mumble-web2/android-release-builder:local"
+
+TARGET="${1:-aarch64-linux-android}"
+
+echo "==> Building Android builder Docker image..."
+docker build -t "$IMAGE_NAME" -f "$SCRIPT_DIR/android-release-builder.Dockerfile" "$PROJECT_ROOT"
+
+echo "==> Building Android APK (target: $TARGET)..."
+docker run --rm \
+    -v "$PROJECT_ROOT:/app" \
+    -w /app \
+    "$IMAGE_NAME" \
+    dx build --platform android --target "$TARGET" --release -p mumble-web2-gui
+
+echo "==> Done! APK should be at:"
+echo "    target/dx/mumble-web2-gui/release/android/app/app/build/outputs/apk/debug/app-debug.apk"

docker/docker-compose.yaml

@@ -0,0 +1,58 @@
+services:
+  caddy:
+    image: caddy:latest
+    ports:
+      - "64444:64444/tcp"
+      - "64444:64444/udp"
+    volumes:
+      - ./Caddyfile:/etc/caddy/Caddyfile:z
+      #- 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_PROXY_OVERRIDES_URL=https://localhost:64444/overrides
+  #  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:z
+      - ./proxy-config.toml:/app/config.toml:z
+    ports:
+      - "4433:4433/tcp"
+      - "4433:4433/udp"
+    command: ["cargo", "run", "-p", "mumble-web2-proxy", "--locked"]
+    network_mode: host
+
+  mumble-server:
+    image: mumblevoip/mumble-server:latest
+    ports:
+      - "64738:64738/tcp"
+      - "64738:64738/udp"
+    network_mode: host
+#volumes:
+#  caddy_data:
+#  caddy_config:
+#
+#networks:
+#  app-network:
+#    driver: bridge

docker/proxy-config.toml

@@ -0,0 +1,4 @@
+proxy_url = "https://127.0.0.1:4433/proxy"
+https_listen_address = "127.0.0.1:4433"
+http_listen_address = "127.0.0.1:4400"
+mumble_server_url = "127.0.0.1:64738"

docker/windows-release-builder.Dockerfile

@@ -0,0 +1,55 @@
+# escape=`
+
+# Use a Windows Server Core 2025 image that matches our build host.
+# If the version doesn't match the build host we cannot run
+# this container. I'm not sure with what specificity it has to
+# match, so let's pin this and then upgrade it as we upgrade
+# the host.
+FROM mcr.microsoft.com/windows/servercore:10.0.26100.7171
+
+ENV CMAKE_VERSION=3.31.10
+ENV CMAKE_ARCH=windows-x86_64
+
+# Restore the default Windows shell for correct batch processing.
+SHELL ["cmd", "/S", "/C"]
+
+RUN curl -SL --output vs_buildtools.exe https://aka.ms/vs/17/release/vs_buildtools.exe `
+  && ( start /w vs_buildtools.exe --quiet --wait --norestart --nocache `
+  --installPath "%ProgramFiles(x86)%\Microsoft Visual Studio\2022\BuildTools" `
+  --add Microsoft.VisualStudio.Component.VC.Tools.x86.x64 `
+  --add Microsoft.VisualStudio.Component.Windows10SDK.19041 `
+  --add Microsoft.VisualStudio.Workload.NativeDesktop `
+  || IF "%ERRORLEVEL%"=="3010" EXIT 0 )
+
+SHELL ["powershell", "-NoLogo", "-ExecutionPolicy", "Bypass", "-Command"]
+
+RUN $ErrorActionPreference = 'Stop'; `
+  $url = \"https://github.com/Kitware/CMake/releases/download/v$env:CMAKE_VERSION/cmake-$env:CMAKE_VERSION-$env:CMAKE_ARCH.zip\"; `
+  $out = 'C:\\cmake.zip'; `
+  (New-Object System.Net.WebClient).DownloadFile($url, $out); `
+  Expand-Archive -Path $out -DestinationPath 'C:\\'; `
+  Remove-Item $out; `
+  $cmakeDir = \"C:\\cmake-$env:CMAKE_VERSION-$env:CMAKE_ARCH\\bin\"; `
+  [Environment]::SetEnvironmentVariable('PATH', $cmakeDir + ';' + $env:PATH, 'Machine')
+
+# Install Chocolatey
+RUN Set-ExecutionPolicy Bypass -Scope Process; `
+  [System.Net.ServicePointManager]::SecurityProtocol = `
+  [System.Net.SecurityProtocolType]::Tls12; `
+  iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
+
+RUN choco install git -y --no-progress
+RUN choco install rustup.install -y --no-progress
+
+RUN rustup toolchain install stable-x86_64-pc-windows-msvc
+RUN rustup default stable-x86_64-pc-windows-msvc
+
+# Install cargo binstall
+RUN Set-ExecutionPolicy Unrestricted -Scope Process; `
+  iex (Invoke-WebRequest "https://raw.githubusercontent.com/cargo-bins/cargo-binstall/main/install-from-binstall-release.ps1" -UseBasicParsing).Content
+
+SHELL ["C:\\Program Files (x86)\\Microsoft Visual Studio\\2022\\BuildTools\\Common7\\Tools\\VsDevCmd.bat", "&&", "powershell.exe", "-NoLogo", "-ExecutionPolicy", "Bypass"]
+# Install dioxus-cli
+RUN cargo binstall dioxus-cli@0.7.3
+
+ENTRYPOINT ["C:\\Program Files (x86)\\Microsoft Visual Studio\\2022\\BuildTools\\Common7\\Tools\\VsDevCmd.bat", "&&", "powershell.exe", "-NoLogo", "-ExecutionPolicy", "Bypass"]

gui/Cargo.toml

@@ -0,0 +1,34 @@
+[package]
+name = "mumble-web2-gui"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+dioxus = { version = "0.7.2" }
+dioxus-web = { version = "0.7.2", optional = true }
+mumble-web2-client = { version = "0.1.0", path = "../client" }
+mumble-web2-common = { version = "0.1.0", path = "../common" }
+color-eyre = "^0.6.3"
+
+# Platform Integration
+# ====================
+# rfd only supports windows, macos, linux, and wasm32. No support for Android or iOS
+[target.'cfg(any(target_os = "linux", target_os = "windows", target_os = "macos", target_arch = "wasm32"))'.dependencies]
+rfd = { git = "https://github.com/PolyMeilex/rfd.git", version = "^0.16.0", default-features = false, optional = true }
+
+[features]
+web = [
+  "dioxus/web",
+  "dioxus-web",
+  "mumble-web2-client/web",
+  "rfd",
+]
+desktop = [
+  "dioxus/desktop",
+  "mumble-web2-client/desktop",
+  "rfd/xdg-portal",
+]
+mobile = [
+  "dioxus/mobile",
+  "mumble-web2-client/mobile"
+]

gui/Dioxus.toml

@@ -1,46 +1,46 @@
 [application]
-
 # App (Project) Name
 name = "Mumble Web 2"
-
 # Dioxus App Default Platform
-# desktop, web, mobile, ssr
 default_platform = "web"
-
 # `build` & `serve` dist path
 out_dir = "dist"
-
 # resource (public) file folder
 asset_dir = "public"
 
-[web.app]
+android_manifest = "build/AndroidManifest.xml"
 
+[web.app]
 # HTML title tag content
-title = "mumble-web"
+title = "Mumble Web 2"
 
 [web.watcher]
-
 # when watcher trigger, regenerate the `index.html`
 reload_html = true
-
 # which files or dirs will be watcher monitoring
-watch_path = ["src", "public"]
+watch_path = ["src", "assets"]
 
 # include `assets` in web platform
 [web.resource]
-
 # CSS style file
 style = []
-
 # Javascript code file
-script = []
+script = ["loader.js"]
 
 [web.resource.dev]
-
 # serve: [dev-server] only
-
 # CSS style file
 style = []
-
 # Javascript code file
 script = []
+
+[bundle]
+identifier = "xyz.ohea.mumble_web_2"
+publisher = "OheaCorp"
+icon = [
+  "icons/32x32.png",
+  "icons/256x256.png",
+  "assets/favicon.ico",
+  "icons/icon.icns",
+  "icons/icon.ico",
+]

gui/assets/main.scss

@@ -0,0 +1,434 @@
+:root {
+  --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-normal: #7bad9f;
+  --accent-muted: #ff746c;
+  --accent-deafened: #464459;
+  --line-width: 2px;
+  --line-color: oklch(0.7 0 0.99);
+}
+
+body {
+  margin: 0;
+}
+
+#main {
+  visibility: visible;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  background-color: var(--bg-color);
+  overflow: auto;
+  color: var(--txt-color);
+
+  font-family: Nunito;
+  font-size: 15pt;
+  font-weight: 600;
+}
+
+hr {
+  color: var(--line-color);
+  background-color: var(--line-color);
+  height: var(--line-width);
+  border: none;
+}
+
+button {
+  font-weight: bold;
+  font-size: medium;
+  border: none;
+  border-radius: 4px;
+  color: var(--txt-color);
+  background-color: var(--primary-btn-color);
+  cursor: pointer;
+}
+
+input {
+  border: none;
+  border-radius: 4px;
+  background-color: white;
+  color: black;
+}
+
+input:focus,
+input:focus-visible {
+  border: none;
+  outline: solid var(--line-width) var(--accent-normal);
+  outline-offset: -3px;
+}
+
+a:link {
+  color: var(--accent-normal);
+}
+
+a:visited {
+  color: var(--accent-muted);
+}
+
+.userpil {
+  border-radius: 100px;
+  padding: 4px 8px;
+  width: fit-content;
+
+  img {
+    height: 1em;
+    vertical-align: text-bottom;
+  }
+
+  &.is_self {
+    font-weight: bolder;
+  }
+}
+
+
+.channel_header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.channel_arrow {
+    width: 1em;
+    text-align: center;
+    margin-right: 0.25rem;
+}
+
+.channel_arrow--placeholder {
+    pointer-events: none;
+    visibility: hidden;
+}
+
+/* The whole right side of the row is the dblclick target */
+.channel_row_click {
+    flex: 1;
+    padding: 0.1rem 0.25rem 0.1rem 0.5rem;
+    cursor: pointer;
+}
+
+/* Hover highlight for whole row area (title + blank space) */
+.channel_row_click:hover {
+    background-color: var(--channel-hover-bg, #222); /* pick your color */
+}
+
+
+/* still keep text non-selectable if desired */
+.channel_details {
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.channel {
+  &_details {
+    flex: 0 0 100%;
+
+    summary {
+      cursor: pointer;
+    }
+
+    summary:focus-visible {
+      outline: none;
+    }
+  }
+
+  &_children {
+    border-left: solid var(--line-color) var(--line-width);
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-left: 5px;
+    padding-left: 11px;
+    padding-top: 4px;
+  }
+}
+
+.chat {
+  &_panel {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &_history {
+    overflow-y: auto;
+    flex: 1 0 0;
+  }
+
+  &_message {
+    display: flex;
+    flex-direction: row;
+    margin: 16px;
+    gap: 8px;
+    align-items: center;
+  }
+
+  &_box_wrapper {
+    padding: 16px;
+    border-top: solid var(--line-color) var(--line-width);
+  }
+
+  &_box {
+    display: flex;
+    flex-direction: row;
+    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;
+
+      border: none;
+    }
+
+    input:focus {
+      outline: none;
+    }
+  }
+}
+
+.user_edit_button {
+  background-color: oklch(0.53 0.1431 264.18);
+  border-radius: 50%;
+  aspect-ratio: 1 / 1;
+  flex-shrink: 0;
+
+  .material-symbols-outlined {
+    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
+  }
+}
+
+.button_row {
+  display: flex;
+  gap: clamp(4px, 1vw, 10px);
+  align-items: center;
+  flex-wrap: nowrap;
+  min-height: 0;
+
+  .spacer {
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-width: 0;
+  }
+
+  .connection_status {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    flex-shrink: 1;
+
+    .material-symbols-outlined {
+      font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
+      vertical-align: middle;
+    }
+  }
+
+  .user_info {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    overflow: hidden;
+    flex-shrink: 1;
+
+    .user_name {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .user_data {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.toggle_button {
+  padding: clamp(4px, 0.5vw, 8px);
+  aspect-ratio: 1 / 1;
+  flex-shrink: 0;
+
+  background-color: unset;
+
+  border: solid rgb(255 255 255 / 0.1) clamp(1px, 0.3vw, 3px);
+  border-radius: clamp(4px, 0.8vw, 10px);
+  color: rgb(255 255 255 / 50%);
+
+  transition: all 0.5s ease-in-out;
+
+  &.is_on {
+    background-color: oklch(0.5 0.1381 21.71 / 20.12%);
+    color: oklch(0.53 0.1505 21.71 / 89.38%);
+  }
+
+  .material-symbols-outlined {
+    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
+    vertical-align: middle;
+  }
+}
+
+.server {
+  &_grid {
+    display: grid;
+    height: 100%;
+    background-color: var(--bg-color);
+
+    grid-template-rows: 1fr auto;
+    grid-template-columns: 1fr 2fr;
+    grid-template-areas:
+      "tree chat"
+      "control chat";
+
+    @media screen and (max-width: 720px) {
+      grid-template-rows: auto 1fr 1fr;
+      grid-template-columns: 1fr;
+      grid-template-areas:
+        "tree"
+        "control"
+        "chat";
+    }
+  }
+
+  &_channel_box {
+    padding: 16px;
+    overflow: auto;
+    grid-area: tree;
+  }
+
+  &_chat_box {
+    display: flex;
+    flex-direction: row;
+    grid-area: chat;
+    border-left: solid var(--line-color) var(--line-width);
+
+    @media screen and (max-width: 720px) {
+      border-left: unset;
+      border-top: solid var(--line-color) var(--line-width);
+    }
+  }
+
+  &_control_box {
+    padding: clamp(6px, 0.8vw, 12px);
+    margin: clamp(6px, 0.8vw, 12px);
+    background-color: var(--light-bg-color);
+    border-radius: clamp(6px, 1vw, 10px);
+    overflow: hidden;
+    grid-area: control;
+
+    display: flex;
+    gap: clamp(4px, 0.8vw, 8px);
+    flex-direction: column;
+
+    // Dynamic font sizing for control elements
+    --control-icon-size: clamp(16px, 2.5vw, 30px);
+    --control-text-size: clamp(12px, 2vw, 25px);
+    --control-small-text-size: clamp(10px, 1.5vw, 20px);
+    --user-icon-size: clamp(24px, 4vw, 45px);
+    --toggle-icon-size: clamp(18px, 3vw, 35px);
+
+    .connection_status {
+      .material-symbols-outlined {
+        font-size: var(--control-icon-size);
+      }
+      .status_text {
+        font-size: var(--control-text-size);
+      }
+      .channel_text {
+        font-size: var(--control-small-text-size);
+      }
+    }
+
+    .user_edit_button {
+      .material-symbols-outlined {
+        font-size: var(--user-icon-size);
+      }
+    }
+
+    .user_info {
+      .user_name {
+        font-size: var(--control-text-size);
+      }
+      .user_data {
+        font-size: var(--control-small-text-size);
+      }
+    }
+
+    .toggle_button {
+      .material-symbols-outlined {
+        font-size: var(--toggle-icon-size);
+      }
+    }
+
+    hr {
+      margin: 0;
+    }
+  }
+}
+
+.login {
+  max-width: 50vw;
+  align-self: center;
+  padding: 32px;
+  border-radius: 16px;
+  background-color: var(--login-bg-color);
+
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  input,
+  button {
+    padding: 8px;
+  }
+
+  h1 {
+    margin: 0;
+    color: #b3c6b4;
+  }
+
+  &_version {
+    color: var(--txt-color);
+    font-weight: normal;
+  }
+
+  &_bttn {
+    font-weight: bold;
+    font-size: large;
+  }
+
+  &_error {
+
+    background-color: white;
+    border-radius: 4px;
+    overflow: auto;
+    padding: 4px;
+    color: red;
+
+    pre {
+      color: black;
+    }
+  }
+
+  &_status {
+    &.is_error {
+      color: red;
+    }
+  }
+}

gui/assets/mic-off-svgrepo-com.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none">
+
+<g fill="#fff">
+
+<path d="M8 0c-.78 0-1.538.29-2.104.821a2.862 2.862 0 00-.627.857.75.75 0 001.354.644c.07-.147.17-.286.3-.407A1.578 1.578 0 018 1.5c.413 0 .8.154 1.078.415.276.26.422.601.422.946v3.443a.75.75 0 001.5 0V2.861c0-.775-.329-1.507-.896-2.04A3.077 3.077 0 008 0z"/>
+
+<path fill-rule="evenodd" d="M5 6.06L1.22 2.28a.75.75 0 011.06-1.06l12.5 12.5a.75.75 0 11-1.06 1.06L11.338 12.4a5.575 5.575 0 01-2.588 1.05V14.5h1.75a.75.75 0 010 1.5h-5a.75.75 0 010-1.5h1.75v-1.05a5.553 5.553 0 01-3.131-1.514A5.3 5.3 0 012.5 8.135V6.75a.75.75 0 011.5 0v1.385a3.8 3.8 0 001.164 2.725A4.071 4.071 0 008 12c.815 0 1.602-.24 2.262-.677l-.726-.726A3.113 3.113 0 018 11c-.78 0-1.538-.29-2.104-.821A2.797 2.797 0 015 8.139V6.06zm1.5 1.5v.579c0 .345.146.686.422.946.278.26.665.415 1.078.415.134 0 .266-.016.392-.047L6.5 7.56z" clip-rule="evenodd"/>
+
+<path d="M12.03 6.75a.75.75 0 011.5 0v1.385c0 .266-.02.53-.06.79a.75.75 0 11-1.483-.227c.029-.185.043-.374.043-.563V6.75z"/>
+
+</g>
+
+</svg>

gui/assets/mic-svgrepo-com.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none">
+
+<g fill="#fff">
+
+<path fill-rule="evenodd" d="M8 0c-.78 0-1.538.29-2.104.821A2.797 2.797 0 005 2.861V8.14c0 .775.328 1.507.896 2.04.566.53 1.323.821 2.104.821.78 0 1.538-.29 2.104-.821A2.797 2.797 0 0011 8.139V2.86c0-.775-.329-1.507-.896-2.04A3.077 3.077 0 008 0zM6.922 1.915A1.578 1.578 0 018 1.5c.413 0 .8.154 1.078.415.276.26.422.601.422.946V8.14c0 .345-.146.686-.422.946A1.578 1.578 0 018 9.5c-.413 0-.8-.154-1.078-.415-.276-.26-.422-.601-.422-.946V2.86c0-.345.146-.686.422-.946z" clip-rule="evenodd"/>
+
+<path d="M4 6.75a.75.75 0 00-1.5 0v1.385a5.3 5.3 0 001.619 3.801A5.553 5.553 0 007.25 13.45v1.05H5.5a.75.75 0 000 1.5h5a.75.75 0 000-1.5H8.75v-1.05a5.553 5.553 0 003.131-1.514A5.3 5.3 0 0013.5 8.135V6.75a.75.75 0 00-1.5 0v1.385a3.8 3.8 0 01-1.164 2.725A4.071 4.071 0 018 12a4.071 4.071 0 01-2.836-1.14A3.8 3.8 0 014 8.135V6.75z"/>
+
+</g>
+
+</svg>

gui/assets/speaker-medium-svgrepo-com.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="2 2 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.0355 8.52113C13.4261 8.1306 14.0674 8.12674 14.3881 8.57637C15.0882 9.55788 15.5 10.7592 15.5 12.0567C15.5 13.3541 15.0882 14.5554 14.3881 15.537C14.0674 15.9866 13.4261 15.9827 13.0355 15.5922C12.645 15.2017 12.6586 14.5725 12.9408 14.0978C13.296 13.5002 13.5 12.8023 13.5 12.0567C13.5 11.3111 13.296 10.6131 12.9408 10.0156C12.6586 9.54084 12.645 8.91165 13.0355 8.52113Z" fill="#fff"/>
+<path d="M15.864 5.69316C16.2545 5.30263 16.8921 5.29976 17.2419 5.72712C18.6532 7.45118 19.5 9.65526 19.5 12.0571C19.5 14.459 18.6532 16.6631 17.2419 18.3871C16.8921 18.8145 16.2545 18.8116 15.864 18.4211C15.4734 18.0306 15.4792 17.4007 15.8183 16.9648C16.8723 15.6098 17.5 13.9068 17.5 12.0571C17.5 10.2075 16.8723 8.50445 15.8183 7.14944C15.4792 6.71351 15.4734 6.08368 15.864 5.69316Z" fill="#fff"/>
+<path d="M11 16.5858V7.41421C11 6.52331 9.92286 6.07714 9.29289 6.70711L7.29289 8.70711C7.10536 8.89464 6.851 9 6.58579 9H5C4.44772 9 4 9.44772 4 10V14C4 14.5523 4.44772 15 5 15H6.58579C6.851 15 7.10536 15.1054 7.29289 15.2929L9.29289 17.2929C9.92286 17.9229 11 17.4767 11 16.5858Z" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
+</svg>

gui/assets/speaker-muted-svgrepo-com.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="2 2 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 16.5858V7.41421C11 6.52331 9.92286 6.07714 9.29289 6.70711L7.29289 8.70711C7.10536 8.89464 6.851 9 6.58579 9H5C4.44772 9 4 9.44772 4 10V14C4 14.5523 4.44772 15 5 15H6.58579C6.851 15 7.10536 15.1054 7.29289 15.2929L9.29289 17.2929C9.92286 17.9229 11 17.4767 11 16.5858Z" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
+<path d="M20 9.5L15 14.5" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
+<path d="M20 14.5L15 9.5" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
+</svg>

gui/build/AndroidManifest.xml

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8" ?>
+
+<!--
+Borrowed from https://github.com/irh/audio-app/blob/main/apps/dioxus/AndroidManifest.xml 
+--> 
+
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.RECORD_AUDIO" />
+
+    <uses-feature android:name="android.hardware.audio.low_latency" android:required="false" />
+    <uses-feature android:name="android.hardware.audio.output" android:required="false" />
+    <uses-feature android:name="android.hardware.audio.pro" android:required="false" />
+    <uses-feature android:name="android.hardware.microphone" android:required="false" />
+
+    <application android:hasCode="true" android:supportsRtl="true" android:icon="@mipmap/ic_launcher"
+        android:extractNativeLibs="true"
+        android:allowNativeHeapPointerTagging="false"
+        android:label="@string/app_name"
+        android:theme="@style/AppTheme"
+        android:networkSecurityConfig="@xml/network_security_config">
+        <activity android:configChanges="orientation|screenLayout|screenSize|keyboardHidden" android:exported="true"
+            android:label="@string/app_name" android:name="dev.dioxus.main.MainActivity">
+            <meta-data android:name="android.app.lib_name" android:value="dioxusmain" />
+            <meta-data android:name="android.app.func_name" android:value="ANativeActivity_onCreate" />
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+        </activity>
+    </application>
+</manifest>

gui/public/loader.js

@@ -0,0 +1,68 @@
+// Loading screen that displays while WASM loads
+(function() {
+  // Create and inject loader styles immediately (head exists)
+  var style = document.createElement('style');
+  style.textContent =
+    '.wasm-loader {' +
+      'position: fixed;' +
+      'top: 0;' +
+      'left: 0;' +
+      'width: 100%;' +
+      'height: 100%;' +
+      'background-color: oklch(0.15 0.01 338.64);' +
+      'display: flex;' +
+      'align-items: center;' +
+      'justify-content: center;' +
+      'z-index: 9999;' +
+      'transition: opacity 0.3s ease-out;' +
+    '}' +
+    '.wasm-loader.hidden {' +
+      'opacity: 0;' +
+      'pointer-events: none;' +
+    '}' +
+    '.wasm-spinner {' +
+      'width: 48px;' +
+      'height: 48px;' +
+      'border: 4px solid rgba(123, 173, 159, 0.2);' +
+      'border-top-color: #7bad9f;' +
+      'border-radius: 50%;' +
+      'animation: wasm-spin 1s linear infinite;' +
+    '}' +
+    '@keyframes wasm-spin {' +
+      'to { transform: rotate(360deg); }' +
+    '}' +
+    '#main {' +
+      'background-color: oklch(0.15 0.01 338.64);' +
+    '}';
+  document.head.appendChild(style);
+
+  function init() {
+    // Create loader element
+    var loader = document.createElement('div');
+    loader.className = 'wasm-loader';
+    loader.innerHTML = '<div class="wasm-spinner"></div>';
+    document.body.appendChild(loader);
+
+    // Watch for Dioxus to mount content in #main
+    var observer = new MutationObserver(function(mutations, obs) {
+      var main = document.getElementById('main');
+      if (main && main.children.length > 0) {
+        loader.classList.add('hidden');
+        setTimeout(function() { loader.remove(); }, 300);
+        obs.disconnect();
+      }
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+  }
+
+  // Wait for body to exist
+  if (document.body) {
+    init();
+  } else {
+    document.addEventListener('DOMContentLoaded', init);
+  }
+})();

gui/src/main.rs

@@ -0,0 +1,740 @@
+#![allow(non_snake_case)]
+
+use dioxus::prelude::*;
+use mumble_web2_client::{
+    network_entrypoint, reqwest, AudioSettings, ChannelId, Command, ConfigSystem,
+    ConfigSystemInterface as _, ConnectionState, Platform, PlatformInterface as _, ServerState,
+    SharedState, State, UserId, UserState, VERSION,
+};
+use mumble_web2_common::{ProxyOverrides, ServerStatus};
+use std::collections::{HashMap, HashSet};
+use std::{fmt, sync::Arc};
+use Command::*;
+use ConnectionState::*;
+
+#[derive(Clone, Copy, PartialEq, Eq)]
+pub enum UserIcon {
+    Normal,
+    Muted,
+    Deafened,
+    Suppressed,
+    None,
+}
+
+impl UserIcon {
+    pub fn icon(user: &UserState) -> UserIcon {
+        if user.deaf || user.self_deaf {
+            UserIcon::Deafened
+        } else if user.mute || user.self_mute {
+            UserIcon::Muted
+        } else if user.suppress {
+            UserIcon::Suppressed
+        } else {
+            UserIcon::Normal
+        }
+    }
+
+    pub fn url(self) -> Option<Asset> {
+        // speaker from https://www.svgrepo.com/collection/ikono-bold-line-icons/
+        // mic from https://www.svgrepo.com/collection/hashicorp-line-interface-icons/
+
+        use UserIcon::*;
+        Some(match self {
+            Normal => asset!("assets/mic-svgrepo-com.svg"),
+            Muted | Suppressed => asset!("assets/mic-off-svgrepo-com.svg"),
+            Deafened => asset!("assets/speaker-muted-svgrepo-com.svg"),
+            None => return Option::None,
+        })
+    }
+}
+
+#[component]
+pub fn UserPill(name: String, icon: UserIcon, isself: bool) -> Element {
+    let color = match icon {
+        UserIcon::Normal => "var(--accent-normal)",
+        UserIcon::Muted => "var(--accent-muted)",
+        UserIcon::Suppressed | UserIcon::Deafened => "var(--accent-deafened)",
+        UserIcon::None => "var(--accent-normal)",
+    };
+
+    rsx!(
+        div {
+            class: match isself { true => "userpil is_self", false => "userpil" },
+            style: "background-color: {color}",
+            { icon.url().map(|url| rsx!(img { src: url })) }
+            "\u{00A0}{name}\u{00A0}"
+        }
+    )
+}
+
+#[component]
+pub fn User(id: UserId) -> Element {
+    let state = use_context::<SharedState>();
+    let server = state.server.read();
+    match server.users.get(&id) {
+        Some(state) => rsx!(UserPill {
+            name: state.name.clone(),
+            icon: UserIcon::icon(state),
+            isself: server.session.unwrap() == id,
+        }),
+        None => rsx!(UserPill {
+            name: format!("unknown user ({id})"),
+            icon: UserIcon::None,
+            isself: false,
+        }),
+    }
+}
+
+#[component]
+pub fn Channel(id: ChannelId) -> Element {
+    let net: Coroutine<Command> = use_coroutine_handle();
+    let state = use_context::<SharedState>();
+    let server = state.server.read();
+    let user = server.session.unwrap();
+    let Some(state) = server.channels_state.channels.get(&id) else {
+        return rsx!("missing channel {id}");
+    };
+
+    let mut open = use_signal(|| true);
+
+    let has_children = !state.users.is_empty() || !state.children.is_empty();
+
+    rsx!(
+        div {
+            class: "channel_details",
+
+            div {
+                class: "channel_header",
+                // Arrow: only toggles open
+                if has_children {
+                    span {
+                        class: "channel_arrow",
+                        onclick: move |evt| {
+                            evt.stop_propagation();
+                            evt.prevent_default();
+                            let mut w = open.write();
+                            *w = !*w;
+                        },
+                        if *open.read() { "▾" } else { "▸" }
+                    }
+                } else {
+                    span {
+                        class: "channel_arrow channel_arrow--placeholder",
+                        " "
+                    }
+                }
+
+                // Clickable row area (everything except the arrow)
+                div {
+                    class: "channel_row_click",
+                    ondblclick: move |evt| {
+                        evt.stop_propagation();
+                        evt.prevent_default();
+                        net.send(EnterChannel { channel: id, user })
+                    },
+                    // remove dblclick from the inner span
+                    span {
+                        class: "channel_title",
+                        "{state.name}"
+                    }
+                    // if you add icons/badges later, put them here too
+                }
+            }
+
+            if *open.read() && has_children {
+                div {
+                    class: "channel_children",
+                    for id in state.users.iter() {
+                        User { id: *id }
+                    }
+                    for child in state.children.iter() {
+                        Channel { id: *child }
+                    }
+                }
+            }
+        }
+    )
+}
+
+#[cfg(any(feature = "desktop", feature = "web"))]
+pub fn pick_and_send_file(net: &Coroutine<Command>) {
+    let state = use_context::<SharedState>();
+    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 = mumble_web2_client::mime_guess::from_path(&name).first();
+        let _ = sender.unbounded_send(SendFile {
+            bytes,
+            name,
+            mime,
+            channels,
+        });
+    });
+}
+#[cfg(not(any(feature = "desktop", feature = "web")))]
+pub fn pick_and_send_file(net: &Coroutine<Command>) {}
+
+#[component]
+pub fn ChatView() -> Element {
+    let net: Coroutine<Command> = use_coroutine_handle();
+    let state = use_context::<SharedState>();
+    let server = state.server.read();
+    let mut draft = use_signal(|| "".to_string());
+
+    let mut do_send = move || {
+        let state = use_context::<SharedState>();
+        let server = state.server.read();
+        if let Some(user) = server.this_user() {
+            net.send(SendChat {
+                markdown: draft.write().split_off(0),
+                channels: vec![user.channel],
+            });
+        }
+    };
+
+    rsx!(
+        div {
+            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}",
+                        }
+                    }
+                }
+            }
+            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"
+                //}
+            }
+        }
+    )
+}
+
+#[component]
+pub fn ControlView(overrides: Resource<ProxyOverrides>) -> Element {
+    let net: Coroutine<Command> = use_coroutine_handle();
+    let state = use_context::<SharedState>();
+    let status = &state.status;
+    let server = state.server.read();
+    let audio = state.audio.read();
+    let Some(&UserState {
+        deaf,
+        self_deaf,
+        mute,
+        suppress,
+        self_mute,
+        ref name,
+        channel,
+        ..
+    }) = server.this_user()
+    else {
+        return rsx!();
+    };
+
+    let current_channel_name = server.channels_state.channels[&channel].name.clone();
+
+    let proxy_url = overrides
+        .read_unchecked()
+        .as_ref()
+        .and_then(|overrides| overrides.proxy_url.clone());
+
+    let connecting_color = "yellow";
+    let connected_color = "oklch(0.55 0.1184 141.35)";
+    let disconnected_color = "gray";
+    let failed_color = "red";
+
+    let connection_status = match &*status.read() {
+        Connecting => rsx! {
+            div {
+                class: "connection_status",
+                style: "color: {connecting_color};",
+                div {
+                    span {
+                        class: "material-symbols-outlined",
+                        "signal_cellular_alt_2_bar"
+                    }
+                    span {
+                        class: "status_text",
+                        " Connecting"
+                    }
+                }
+            }
+        },
+        Connected => rsx! {
+            div {
+                class: "connection_status",
+                div {
+                    style: "color: {connected_color};",
+                    span {
+                        class: "material-symbols-outlined",
+                        "signal_cellular_alt"
+                    }
+                    span {
+                        class: "status_text",
+                        " Connected"
+                    }
+                }
+                div {
+                    class: "channel_text",
+                    span { "{current_channel_name}" }
+                }
+            }
+        },
+        Disconnected => rsx! {
+            div {
+                class: "connection_status",
+                style: "color: {disconnected_color};",
+                div {
+                    span {
+                        class: "material-symbols-outlined",
+                        "signal_disconnected"
+                    }
+                    span {
+                        class: "status_text",
+                        " Disconnected"
+                    }
+                }
+            }
+        },
+        Failed(_) => rsx! {
+            div {
+                class: "connection_status",
+                style: "color: {failed_color};",
+                div {
+                    span {
+                        class: "material-symbols-outlined",
+                        "error"
+                    }
+                    span {
+                        class: "status_text",
+                        " 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",
+                    "signal_disconnected"
+                }
+            }
+        }
+        hr { style: "width: 100%;" }
+        // User control
+        div {
+            class: "button_row",
+            button {
+                class: "user_edit_button",
+                span {
+                    class: "material-symbols-outlined",
+                    style: "color: oklch(0.65 0.2245 28.06);",
+                    "person_edit"
+                }
+            }
+            div {
+                class: "user_info",
+                div {
+                    span { class: "user_name", "{name}" }
+                }
+                div {
+                    span { class: "user_data", "some data" }
+                }
+            }
+            span { class: "spacer" }
+            button {
+                class: match audio.denoise {
+                    true => "toggle_button is_on",
+                    false => "toggle_button",
+                },
+                role: "switch",
+                aria_checked: audio.denoise,
+                onclick: move |_| {
+                    let state = use_context::<SharedState>();
+                    let mut audio = state.audio.read().clone();
+                    audio.denoise = !audio.denoise;
+                    let denoise = audio.denoise;
+                    *state.audio.write_unchecked() = audio;
+                    net.send(UpdateAudioSettings(AudioSettings { denoise: denoise }));
+                    let user_config = use_context::<ConfigSystem>();
+                    user_config.config_set::<bool>("denoise", &denoise);
+                },
+                match audio.denoise {
+                    true => rsx!(span { class: "material-symbols-outlined", "cadence"}),
+                    false => rsx!(span { class: "material-symbols-outlined", "graphic_eq"}),
+                }
+            }
+            button {
+                class: match mute || suppress || self_mute {
+                    true => "toggle_button is_on",
+                    false => "toggle_button",
+                },
+                role: "switch",
+                aria_checked: mute || suppress || self_mute,
+                disabled: mute || suppress,
+                onclick: move |_| net.send(SetMute { mute: !self_mute }),
+                match mute || suppress || self_mute {
+                    true => rsx!(span { class: "material-symbols-outlined", "mic_off"}),
+                    false => rsx!(span { class: "material-symbols-outlined", "mic"}),
+                }
+            }
+            button {
+                class: match deaf || self_deaf {
+                    true => "toggle_button in_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", "volume_off"}),
+                    false => rsx!(span { class: "material-symbols-outlined", "volume_up"}),
+                }
+            }
+        }
+    )
+}
+
+#[component]
+pub fn ServerView(overrides: Resource<ProxyOverrides>) -> Element {
+    let net: Coroutine<Command> = use_coroutine_handle();
+    let state = use_context::<SharedState>();
+    let server = state.server.read();
+    let Some(&UserState {
+        deaf,
+        self_deaf,
+        mute,
+        self_mute,
+        ..
+    }) = server.this_user()
+    else {
+        return rsx!();
+    };
+
+    rsx!(
+        div {
+            class: "server_grid",
+            div {
+                class: "server_channel_box",
+                for (id, state) in server.channels_state.channels.iter() {
+                    if state.parent.is_none() {
+                        Channel { id: *id }
+                    }
+                }
+            }
+            div {
+                class: "server_chat_box",
+                ChatView {}
+            }
+            div {
+                class: "server_control_box",
+                ControlView { overrides }
+            }
+        }
+    )
+}
+
+#[component]
+pub fn LoginView(overrides: Resource<ProxyOverrides>) -> Element {
+    let user_config = use_context::<ConfigSystem>();
+    let net: Coroutine<Command> = use_coroutine_handle();
+
+    let mut address_input = use_signal(|| user_config.config_get::<String>("server_url"));
+    let address = use_memo(move || {
+        if let Some(addr) = address_input() {
+            addr.clone()
+        } else {
+            overrides()
+                .and_then(|c| c.proxy_url.clone())
+                .unwrap_or_default()
+        }
+    });
+
+    let last_status = use_signal(|| None::<color_eyre::Result<ServerStatus>>);
+    use_resource(move || {
+        let addr = address();
+        async move {
+            let client = reqwest::Client::new();
+            loop {
+                *last_status.write_unchecked() =
+                    Some(Platform::get_status(&client, &addr).await);
+                Platform::sleep(std::time::Duration::from_secs_f32(1.0)).await;
+            }
+        }
+    });
+
+    let mut username = use_signal(|| {
+        user_config
+            .config_get::<String>("username")
+            .unwrap_or(String::new())
+    });
+
+    let do_connect = move |_| {
+        let _ = user_config.config_set::<String>("username", &username.read());
+        if overrides.read().as_ref().is_some_and(|cfg| cfg.any_server) {
+            user_config.config_set::<String>("server_url", &address.read());
+        }
+        net.send(Connect {
+            address: address.read().clone(),
+            username: username.read().clone(),
+            config: overrides.read().clone().unwrap_or_default(),
+        })
+    };
+    let state = use_context::<SharedState>();
+    let status = &state.status;
+    let bottom = match &*status.read() {
+        Disconnected => rsx! {
+            button {
+                class: "login_bttn",
+                onclick: do_connect.clone(),
+                "Connect"
+            }
+        },
+        Connecting => rsx! {
+            div {
+                class: "login_bttn",
+                "Connecting..."
+            }
+        },
+        Failed(msg) => rsx!(
+            button {
+                class: "login_bttn",
+                onclick: do_connect.clone(),
+                "Reconnect"
+            }
+            div {
+                class: "login_error",
+                "Failed to connect:"
+                pre {
+                    "{msg}"
+                }
+            }
+        ),
+        Connected => unreachable!(),
+    };
+    rsx!(
+        div {
+            class: "login",
+            h1 {
+                "Mumble Web"
+                match VERSION {
+                    Some(v) => rsx!(" " span { class: "login_version", "({v})" }),
+                    None => rsx!(),
+                }
+            }
+            if overrides.read().as_ref().is_some_and(|cfg| cfg.any_server) {
+                div {
+                    label {
+                        for: "address-entry",
+                        "Server Address:"
+                    }
+                    input {
+                        id: "address-entry",
+                        placeholder: "address",
+                        value: "{address.read()}",
+                        autofocus: "true",
+                        oninput: move |evt| address_input.set(Some(evt.value().clone())),
+                    }
+                }
+            }
+            div {
+                label {
+                    for: "username-entry",
+                    "Username:"
+                    //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;",
+                }
+                input {
+                    id: "username-entry",
+                    placeholder: "username",
+                    value: "{username.read()}",
+                    autofocus: "true",
+                    oninput: move |evt| username.set(evt.value().clone()),
+                }
+            }
+            div {
+                match &*last_status.read() {
+                    None => rsx!(div {
+                        class: "login_status",
+                        span {"···"}
+                    }),
+                    Some(Ok(ServerStatus { success: false, .. })) => rsx!(div {
+                        class: "login_status is_error",
+                        span {
+                            "Could not reach server"
+                        }
+                    }),
+                    Some(Ok(status)) => rsx!(div {
+                        class: "login_status",
+                        if let (Some(users), Some(max_users)) = (status.users, status.max_users) {
+                            span {"{users}/{max_users} Online"}
+                        } else {
+                            span {"Unknown Online"}
+                        }
+                        span {"-"}
+                        if let Some((maj, min, pat)) = status.version {
+                            span {"Version: {maj}.{min}.{pat}"}
+                        } else {
+                            span {"Unknown Version"}
+                        }
+                    }),
+                    Some(Err(_)) => rsx!(div {
+                        class: "login_status is_error",
+                        span {
+                            "Could not reach server"
+                        }
+                    }),
+                }
+                div {
+                    {bottom}
+                }
+
+            }
+        }
+    )
+    //    rsx!(
+    //        div {
+    //            class: "{login_box}",
+    //            h1 {
+    //                "Mumble Web"
+    //            }
+    //            input {
+    //                placeholder: "username",
+    //                value: "{username.read()}",
+    //                autofocus: "true",
+    //                oninput: move |evt| username.set(evt.value().clone()),
+    //            }
+    //            input {
+    //                placeholder: "server address",
+    //                value: "{address.read()}",
+    //                autofocus: "true",
+    //                oninput: move |evt| address_input.set(Some(evt.value().clone())),
+    //            }
+    //            {bottom}
+    //        }
+    //    )
+}
+
+#[component]
+pub fn app() -> Element {
+    static STYLE: Asset = asset!("/assets/main.scss");
+
+    use_effect(|| {
+        Platform::request_permissions();
+    });
+
+    let user_config = use_root_context(|| ConfigSystem::new().unwrap());
+    let state = use_root_context(|| {
+        SharedState::new(State {
+            status: Signal::new(Disconnected),
+            server: Signal::new(Default::default()),
+            audio: Signal::new(AudioSettings {
+                denoise: user_config.config_get::<bool>("denoise").unwrap_or(true),
+            }),
+        })
+    });
+
+    let network_state = state.clone();
+    use_coroutine(move |rx: UnboundedReceiver<Command>| {
+        network_entrypoint(rx, network_state.clone())
+    });
+    let overrides = use_resource(|| async move {
+        match Platform::load_proxy_overrides().await {
+            Ok(overrides) => overrides,
+            Err(_) => ProxyOverrides::default(),
+        }
+    });
+
+    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" }
+        document::Link{ rel: "stylesheet", href: STYLE }
+
+        match *state.status.read() {
+            Connected => rsx!(ServerView { overrides }),
+            _ => rsx!(LoginView { overrides }),
+        }
+    )
+}
+
+pub fn main() {
+    Platform::init_logging();
+    dioxus::LaunchBuilder::new()
+        .with_cfg(desktop! {
+            dioxus::desktop::Config::new()
+            // Reduce white flash on startup by setting background color and hiding main element
+            .with_background_color((0, 0, 0, 255))
+            .with_custom_head("<style>html, body { background: black; } #main { visibility: hidden; }</style>".into())
+            .with_disable_context_menu(cfg!(not(debug_assertions)))
+            .with_window(
+                dioxus::desktop::WindowBuilder::new()
+                    .with_title("Mumble Web 2")
+                    .with_min_inner_size(dioxus::desktop::LogicalSize::new(600.0, 300.0))
+                    .with_inner_size(dioxus::desktop::LogicalSize::new(900.0, 700.0))
+                    .with_maximized(false),
+            )
+        })
+        .launch(app);
+}

proxy/Cargo.toml

@@ -0,0 +1,30 @@
+[package]
+name = "mumble-web2-proxy"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+color-eyre = "^0.6"
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+tokio = { version = "1", features = ["full"] }
+tokio-rustls = "0.26"
+toml = "0.8"
+tracing = { version = "^0.1.40", features = ["async-await"] }
+tracing-subscriber = { version = "^0.3.18", features = ["env-filter"] }
+mumble-web2-common = { workspace = true, features = ["networking"] }
+salvo = { version = "^0.84.2", features = [
+  "quinn",
+  "eyre",
+  "rustls",
+  "serve-static",
+  "logging",
+  "craft",
+  "cors",
+] }
+once_cell = "^1.20"
+rustls = { version = "^0.23", features = ["aws_lc_rs"] }
+rcgen = "^0.13.2"
+hmac-sha256 = "^1.1.8"
+time = "0.3"
+url = { version = "2", features = ["serde"] }

proxy/bundle.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+cargo build --release
+
+rm -rf mumble-web2
+git clone https://git.ohea.xyz/mumble/mumble-web2
+cd mumble-web2
+echo "[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]" >server_hash.txt
+dx build --release
+cd ..
+
+rm -rf bundle
+mkdir bundle
+cp target/release/mumble-webtransport-proxy bundle
+cp -r mumble-web2/dist bundle/gui

proxy/src/main.rs

@@ -0,0 +1,367 @@
+use color_eyre::eyre::{anyhow, bail, Context, Result};
+use mumble_web2_common::{ping_server, ProxyOverrides, ServerStatus};
+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, Serialize};
+use std::net::{SocketAddr, ToSocketAddrs};
+use std::path::PathBuf;
+use std::sync::Arc;
+use tokio::fs;
+use tokio::io::{AsyncRead, AsyncReadExt, AsyncWrite, AsyncWriteExt};
+use tokio::net::TcpStream;
+use tokio::pin;
+use tokio_rustls::rustls::client::danger::{HandshakeSignatureValid, ServerCertVerifier};
+use tokio_rustls::rustls::pki_types::{CertificateDer, ServerName, UnixTime};
+use tokio_rustls::rustls::{ClientConfig, DigitallySignedStruct};
+use tokio_rustls::{rustls, TlsConnector};
+use tracing::info;
+use tracing::info_span;
+use tracing::Instrument;
+use tracing::{error, instrument};
+use tracing_subscriber::filter::LevelFilter;
+use tracing_subscriber::EnvFilter;
+use url::Url;
+
+fn default_cert_alt_names() -> Vec<String> {
+    vec!["localhost".into()]
+}
+
+#[derive(Debug, Deserialize, Serialize)]
+struct Config {
+    proxy_url: Option<Url>,
+    https_listen_address: SocketAddr,
+    http_listen_address: Option<SocketAddr>,
+    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: Option<PathBuf>,
+}
+
+fn init_config() -> Result<Config> {
+    let mut config: Config = toml::from_str(
+        &std::fs::read_to_string("./config.toml")
+            .context("reading config.toml (try making a copy of config.toml.example)")?,
+    )?;
+    let mumble_server_addr = config
+        .mumble_server_url
+        .to_socket_addrs()
+        .context(format!(
+            "parsing mumble_server_url={}",
+            config.mumble_server_url
+        ))?
+        .next()
+        .ok_or(anyhow!(
+            "no socket addrs in mumble_server_url={}",
+            config.mumble_server_url
+        ))?;
+    config.mumble_server_address = Some(mumble_server_addr);
+    Ok(config)
+}
+
+#[tokio::main]
+async fn main() -> Result<()> {
+    init_logging();
+    let server_config = Arc::new(init_config()?);
+    info!("config:\n{}", toml::to_string_pretty(&*server_config)?);
+
+    rustls::crypto::aws_lc_rs::default_provider()
+        .install_default()
+        .map_err(|e| anyhow!("could not install crypto provider {e:?}"))?;
+
+    let mut overrides = ProxyOverrides {
+        proxy_url: match &server_config.proxy_url {
+            Some(url) => Some(url.to_string()),
+            None => None,
+        },
+        cert_hash: None,
+        any_server: false,
+    };
+
+    let (cert, key) = match (&server_config.cert_path, &server_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(server_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());
+            overrides.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()));
+
+    info!("proxy overrides:\n{}", toml::to_string_pretty(&overrides)?);
+
+    let config_craft = ConfigCraft {
+        server_config: server_config.clone(),
+        overrides,
+    };
+
+    let status_craft = StatusCraft {
+        mumble_server_address: server_config.mumble_server_address.unwrap().clone(),
+    };
+
+    // Server routing
+    let mut router = Router::new()
+        .push(Router::with_path("/proxy").goal(config_craft.connect_proxy()))
+        .push(Router::with_path("/overrides").get(config_craft.get_overrides()))
+        .push(Router::with_path("/status").get(status_craft.get_status()))
+        .hoop(Logger::new());
+    if let Some(gui_path) = server_config.gui_path.clone() {
+        router =
+            router.push(Router::with_path("/").get(StaticFile::new(gui_path.join("index.html"))));
+        router = router.push(Router::with_path("/<*+rest>").get(StaticDir::new(gui_path)));
+    }
+
+    let cors = Cors::new().allow_origin(AllowOrigin::any()).into_handler();
+
+    let service = Service::new(router).hoop(cors);
+
+    // Create http listeners
+    let http_listener = server_config.http_listen_address.map(TcpListener::new);
+    let https_listener =
+        TcpListener::new(server_config.https_listen_address).rustls(rustls_config.clone());
+    let http3_listener = QuinnListener::new(rustls_config, server_config.https_listen_address);
+
+    // Start server
+    match (http_listener, https_listener, http3_listener) {
+        (Some(a), b, c) => {
+            let accepter = a.join(b).join(c).bind().await;
+            Server::new(accepter).serve(service).await;
+        }
+        (None, b, c) => {
+            let accepter = b.join(c).bind().await;
+            Server::new(accepter).serve(service).await;
+        }
+    }
+
+    Ok(())
+}
+
+#[derive(Clone)]
+pub struct StatusCraft {
+    mumble_server_address: SocketAddr,
+}
+
+#[craft]
+impl StatusCraft {
+    #[craft(handler)]
+    async fn get_status(&self) -> Json<ServerStatus> {
+        let addr = self.mumble_server_address;
+        match ping_server(&addr.ip().to_string(), addr.port()).await {
+            Ok(status) => Json(status),
+            Err(e) => {
+                error!("ping failed: {e:#}");
+                Json(ServerStatus::default())
+            }
+        }
+    }
+}
+
+#[derive(Clone)]
+pub struct ConfigCraft {
+    server_config: Arc<Config>,
+    overrides: ProxyOverrides,
+}
+
+#[craft]
+impl ConfigCraft {
+    #[craft(handler)]
+    async fn get_overrides(&self) -> Json<ProxyOverrides> {
+        Json(self.overrides.clone())
+    }
+
+    #[craft(handler)]
+    async fn connect_proxy(&self, req: &mut Request, res: &mut Response) {
+        info!("received proxy request");
+        let mumble_server_address = self.server_config.mumble_server_address.unwrap();
+        let wt = match req.web_transport_mut().await {
+            Ok(wt) => wt,
+            Err(err) => {
+                res.status_code(StatusCode::BAD_REQUEST);
+                res.render(format!("error with webtransport: {err:?}"));
+                return;
+            }
+        };
+        info!("got webtransport for connection");
+
+        use salvo::webtransport::server::AcceptedBi;
+        let (id, bi) = match wt.accept_bi().await {
+            Ok(Some(AcceptedBi::BidiStream(id, bi))) => (id, bi),
+            Ok(Some(AcceptedBi::Request(req, _))) => {
+                res.status_code(StatusCode::BAD_REQUEST);
+                res.render(format!(
+                    "expected webtransport stream but got request {req:?}"
+                ));
+                return;
+            }
+            Ok(None) => {
+                res.status_code(StatusCode::BAD_REQUEST);
+                res.render(format!("no bidirectional connection requested"));
+                return;
+            }
+            Err(err) => {
+                res.status_code(StatusCode::INTERNAL_SERVER_ERROR);
+                res.render(format!("error with bidirectional connection: {err:?}"));
+                return;
+            }
+        };
+
+        let (outgoing, incoming) = bi.split();
+        let res = tokio::spawn(async move {
+            if let Err(error) = connect_proxy_impl(mumble_server_address, incoming, outgoing).await
+            {
+                error!("error connecting proxy {error:?}")
+            }
+        })
+        .await;
+        if let Err(err) = res {
+            error!("crash in connected proxy {err:?}");
+        }
+    }
+}
+
+#[instrument(skip(incoming, outgoing))]
+async fn connect_proxy_impl(
+    mumble_server_address: SocketAddr,
+    incoming: impl AsyncRead + Send + Sync + 'static,
+    outgoing: impl AsyncWrite + Send + Sync + 'static,
+) -> Result<()> {
+    info!("connecting to Mumble server...");
+
+    let config = ClientConfig::builder()
+        .dangerous()
+        .with_custom_certificate_verifier(Arc::new(NoCertificateVerification))
+        .with_no_client_auth();
+
+    let connector = TlsConnector::from(Arc::new(config));
+
+    let server_tcp = TcpStream::connect(mumble_server_address).await?;
+    let server_stream = connector
+        .connect("example.com".try_into()?, server_tcp)
+        .await?;
+    let (read_server, write_server) = tokio::io::split(server_stream);
+
+    info!("connected to Mumble server");
+
+    // Handle transmitting data between the WebTransport client and Mumble TCP Server
+    // When one direction completes/fails, the other is dropped and its streams are closed
+    tokio::select! {
+        res = pass_bytes_loop(incoming, write_server)
+            .instrument(info_span!("Handler", "Client to server")) => res?,
+        res = pass_bytes_loop(read_server, outgoing)
+            .instrument(info_span!("Handler", "Server to client")) => res?,
+    };
+    Ok(())
+}
+
+#[derive(Debug)]
+struct NoCertificateVerification;
+
+impl ServerCertVerifier for NoCertificateVerification {
+    fn verify_server_cert(
+        &self,
+        _end_entity: &CertificateDer<'_>,
+        _intermediates: &[CertificateDer<'_>],
+        _server_name: &ServerName<'_>,
+        _ocsp: &[u8],
+        _now: UnixTime,
+    ) -> Result<rustls::client::danger::ServerCertVerified, rustls::Error> {
+        Ok(rustls::client::danger::ServerCertVerified::assertion())
+    }
+
+    fn verify_tls12_signature(
+        &self,
+        _message: &[u8],
+        _cert: &CertificateDer<'_>,
+        _dss: &DigitallySignedStruct,
+    ) -> Result<HandshakeSignatureValid, rustls::Error> {
+        Ok(HandshakeSignatureValid::assertion())
+    }
+
+    fn verify_tls13_signature(
+        &self,
+        _message: &[u8],
+        _cert: &CertificateDer<'_>,
+        _dss: &DigitallySignedStruct,
+    ) -> Result<HandshakeSignatureValid, rustls::Error> {
+        Ok(HandshakeSignatureValid::assertion())
+    }
+
+    fn supported_verify_schemes(&self) -> Vec<rustls::SignatureScheme> {
+        vec![
+            rustls::SignatureScheme::RSA_PKCS1_SHA1,
+            rustls::SignatureScheme::ECDSA_SHA1_Legacy,
+            rustls::SignatureScheme::RSA_PKCS1_SHA256,
+            rustls::SignatureScheme::ECDSA_NISTP256_SHA256,
+            rustls::SignatureScheme::RSA_PKCS1_SHA384,
+            rustls::SignatureScheme::ECDSA_NISTP384_SHA384,
+            rustls::SignatureScheme::RSA_PKCS1_SHA512,
+            rustls::SignatureScheme::ECDSA_NISTP521_SHA512,
+            rustls::SignatureScheme::RSA_PSS_SHA256,
+            rustls::SignatureScheme::RSA_PSS_SHA384,
+            rustls::SignatureScheme::RSA_PSS_SHA512,
+            rustls::SignatureScheme::ED25519,
+            rustls::SignatureScheme::ED448,
+        ]
+    }
+}
+
+async fn pass_bytes_loop(
+    client_stream: impl AsyncRead + Sync + Send + 'static,
+    server_stream: impl AsyncWrite + Send + Sync + 'static,
+) -> Result<()> {
+    let mut buffer = vec![0; 65536].into_boxed_slice();
+    pin!(client_stream);
+    pin!(server_stream);
+    loop {
+        let bytes_read = client_stream.read(&mut buffer).await?;
+        if bytes_read == 0 {
+            break Ok(());
+        }
+
+        server_stream.write_all(&buffer[..bytes_read]).await?;
+        server_stream.flush().await?;
+    }
+}
+
+fn init_logging() {
+    let env_filter = EnvFilter::builder()
+        .with_default_directive(LevelFilter::DEBUG.into())
+        .from_env_lossy();
+
+    tracing_subscriber::fmt()
+        .with_target(true)
+        .with_level(true)
+        .with_env_filter(env_filter)
+        .init();
+}

src/app.rs

@@ -1,490 +0,0 @@
-#![allow(non_snake_case)]
-
-use dioxus::prelude::*;
-use ordermap::OrderSet;
-use sir::{css, global_css};
-use std::collections::HashMap;
-
-use crate::imp;
-
-pub type ChannelId = u32;
-pub type UserId = u32;
-
-pub enum ConnectionState {
-    Disconnected,
-    Connecting,
-    Connected,
-    Failed(String),
-}
-
-#[derive(Debug)]
-pub enum Command {
-    Connect {
-        address: String,
-        username: String,
-    },
-    SendChat {
-        markdown: String,
-        channels: Vec<ChannelId>,
-    },
-    SetMute {
-        mute: bool,
-    },
-    SetDeaf {
-        deaf: bool,
-    },
-    EnterChannel {
-        channel: ChannelId,
-        user: UserId,
-    },
-    Disconnect,
-}
-
-use Command::*;
-use ConnectionState::*;
-
-#[derive(Default)]
-pub struct ChannelState {
-    pub name: String,
-    pub children: OrderSet<ChannelId>,
-    pub users: OrderSet<UserId>,
-    pub parent: Option<ChannelId>,
-}
-
-#[derive(Default)]
-pub struct UserState {
-    pub name: String,
-    pub channel: ChannelId,
-    pub deaf: bool,
-    pub mute: bool,
-    pub self_deaf: bool,
-    pub self_mute: bool,
-}
-
-pub struct Chat {
-    pub raw: String,
-    pub dangerous_html: String,
-    pub sender: Option<UserId>,
-}
-
-#[derive(Default)]
-pub struct ServerState {
-    pub channels: HashMap<ChannelId, ChannelState>,
-    pub users: HashMap<UserId, UserState>,
-    pub chat: Vec<Chat>,
-    pub session: Option<UserId>,
-}
-
-impl ServerState {
-    pub fn this_user(&self) -> Option<&UserState> {
-        self.users.get(&self.session?)
-    }
-}
-
-pub struct State {
-    pub status: GlobalSignal<ConnectionState>,
-    pub server: GlobalSignal<ServerState>,
-}
-
-pub static STATE: State = State {
-    status: Signal::global(|| Disconnected),
-    server: Signal::global(|| Default::default()),
-};
-
-#[component]
-pub fn UserPill(name: String) -> Element {
-    let pill = css!(
-        "
-        border: solid 1px black;
-        border-radius: 8px;
-        padding: 4px;
-        width: fit-content;
-    "
-    );
-
-    rsx!(
-        div {
-            class: "{pill}",
-            "{name}"
-        }
-    )
-}
-
-#[component]
-pub fn User(id: UserId) -> Element {
-    let server = STATE.server.read();
-    let state = server.users.get(&id)?;
-    rsx!(UserPill {
-        name: state.name.clone()
-    })
-}
-
-#[component]
-pub fn Channel(id: ChannelId) -> Element {
-    let net: Coroutine<Command> = use_coroutine_handle();
-    let server = STATE.server.read();
-    let user = server.session?;
-    let state = server.channels.get(&id)?;
-
-    let channel_details = css!(
-        "
-        flex: 0 0 100%;
-    "
-    );
-    let channel_children = css!(
-        "
-        border-left: solid black 1px;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: 8px;
-        margin-left: 5px;
-        padding-left: 11px;
-    "
-    );
-
-    rsx!(
-        details {
-            class: "{channel_details}",
-            open: true,
-            summary {
-                ondoubleclick: move |_| net.send(EnterChannel { channel: id, user }),
-                "{state.name}"
-            }
-            div {
-                class: "{channel_children}",
-                for id in state.users.iter() {
-                    User { id: *id }
-                }
-                for child in state.children.iter() {
-                    Channel { id: *child }
-                }
-            }
-        }
-    )
-}
-
-#[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_history = css!(
-        "
-        overflow-y: auto;
-        flex: 1 0 0;
-    "
-    );
-
-    let chat_message = css!(
-        "
-        display: flex;
-        flex-direction: row;
-        margin: 16px;
-        gap: 8px;
-        align-items: center;
-    "
-    );
-
-    let chat_box = css!(
-        "
-        display: flex;
-        flex-direction: row;
-        padding: 16px;
-        gap: 8px;
-        border-top: solid black 1px;
-
-        input {
-            flex-grow: 1;
-            padding: 8px;
-        }
-    "
-    );
-
-    let mut do_send = move || {
-        if let Some(user) = STATE.server.read().this_user() {
-            net.send(SendChat {
-                markdown: draft.write().split_off(0),
-                channels: vec![user.channel],
-            });
-        }
-    };
-
-    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() }
-                    }
-                    span {
-                        dangerous_inner_html: "{chat.dangerous_html}",
-                    }
-                }
-            }
-        }
-        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();
-                    }
-                }
-            }
-            button {
-                onclick: move |_| do_send(),
-                "Send"
-            }
-        }
-    )
-}
-
-#[component]
-pub fn ServerView() -> Element {
-    let net: Coroutine<Command> = use_coroutine_handle();
-    let server = STATE.server.read();
-    let &UserState {
-        deaf,
-        self_deaf,
-        mute,
-        self_mute,
-        ..
-    } = server.this_user()?;
-
-    let grid = css!(
-        r#"
-        display: grid;
-        height: 100%;
-        background-color: white;
-
-        grid-template-rows: auto 1fr;
-        grid-template-columns: 1fr 1fr;
-        grid-template-areas:
-            "bar bar"
-            "tree chat";
-
-        @media screen and (max-width: 720px) {
-            grid-template-rows: auto 1fr 1fr;
-            grid-template-columns: 1fr;
-            grid-template-areas:
-                "bar"
-                "tree"
-                "chat";
-        }
-
-        gap: 4px;
-        padding: 4px;
-    "#
-    );
-
-    let channel_box = css!(
-        "
-        padding: 16px;
-        border: solid black 1px;
-        overflow: auto;
-        grid-area: tree;
-    "
-    );
-
-    let chat_box = css!(
-        "
-        border: solid black 1px;
-        display: flex;
-        flex-direction: column;
-        grid-area: chat;
-    "
-    );
-
-    let top_bar = css!(
-        "
-        padding: 16px;
-        border: solid black 1px;
-        grid-area: bar;
-
-        display: flex;
-        flex-direction: row;
-        gap: 16px;
-        align-items: center;
-
-        button {
-            padding: 8px;
-        }
-    "
-    );
-
-    rsx!(
-        div {
-            class: "{grid}",
-            div {
-                class: "{top_bar}",
-                button {
-                    onclick: move |_| net.send(Disconnect),
-                    "Disconnect"
-                }
-                span {
-                    input {
-                        r#type: "checkbox",
-                        id: "mute",
-                        checked: mute || self_mute,
-                        disabled: mute,
-                        onchange: move |_| net.send(SetMute { mute: !self_mute }),
-                    }
-                    label {
-                        r#for: "mute",
-                        "Mute"
-                    }
-                }
-                span {
-                    input {
-                        r#type: "checkbox",
-                        id: "deaf",
-                        checked: deaf || self_deaf,
-                        disabled: deaf,
-                        onchange: move |_| net.send(SetDeaf { deaf: !self_deaf }),
-                    }
-                    label {
-                        r#for: "deaf",
-                        "Deafen"
-                    }
-                }
-            }
-            div {
-                class: "{channel_box}",
-                for (id, state) in server.channels.iter() {
-                    if state.parent.is_none() {
-                        Channel { id: *id }
-                    }
-                }
-            }
-            div {
-                class: "{chat_box}",
-                ChatView {}
-            }
-        }
-    )
-}
-
-#[component]
-pub fn LoginView() -> Element {
-    let net: Coroutine<Command> = use_coroutine_handle();
-    let default_address = option_env!("MUMBLEWEB2_WEBTRANSPORT_SERVER_ADDRESS").unwrap_or("");
-    let mut address = use_signal(|| default_address.to_string());
-
-    let previous_username = imp::load_username();
-    let mut username = use_signal(|| previous_username.unwrap_or(String::new()));
-
-    let error = css!(
-        "
-        color: red;
-        pre {
-            color: black;
-        }
-    "
-    );
-
-    let login_box = css!(
-        "
-        max-width: 50vw;
-        align-self: center;
-        padding: 16px;
-        background-color: white;
-
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-
-        input,button {
-            padding: 8px;
-        }
-    "
-    );
-
-    let do_connect = move |_| {
-        //let _ = set_default_username(&username.read());
-        let _ = imp::set_default_username(&username.read());
-        net.send(Connect {
-            address: address.read().clone(),
-            username: username.read().clone(),
-        })
-    };
-    let status = &STATE.status;
-    let bottom = match &*status.read() {
-        Disconnected => rsx! {
-            button {
-                onclick: do_connect.clone(),
-                "Connect!"
-            }
-        },
-        Connecting => rsx! {
-            "Connecting..."
-        },
-        Failed(msg) => rsx!(
-            button {
-                onclick: do_connect.clone(),
-                "Reconnect!"
-            }
-            div {
-                class: "{error}",
-                "Failed to connect:"
-                pre {
-                    "{msg}"
-                }
-            }
-        ),
-        Connected => unreachable!(),
-    };
-    rsx!(
-        div {
-            class: "{login_box}",
-            input {
-                placeholder: "username",
-                value: "{username.read()}",
-                autofocus: "true",
-                oninput: move |evt| username.set(evt.value().clone()),
-            }
-            input {
-                placeholder: "server address",
-                value: "{address.read()}",
-                autofocus: "true",
-                oninput: move |evt| address.set(evt.value().clone()),
-            }
-            {bottom}
-        }
-    )
-}
-
-pub fn app() -> Element {
-    use_coroutine(|rx: UnboundedReceiver<Command>| super::network_entrypoint(rx));
-
-    global_css!(
-        "
-    body {
-        margin: 0;
-    }
-
-    #main {
-        height: 100vh;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-around;
-        background-color: grey;
-        overflow: auto;
-    }
-    "
-    );
-
-    rsx!(
-        sir::AppStyle { }
-        match *STATE.status.read() {
-            Connected => rsx!(ServerView {}),
-            _ => rsx!(LoginView {}),
-        }
-    )
-}

src/imp/web.rs

@@ -1,424 +0,0 @@
-use crate::app::Command;
-use crate::bail;
-use dioxus::prelude::*;
-use futures::AsyncRead;
-use futures::AsyncWrite;
-use futures_channel::mpsc::UnboundedSender;
-use gloo_timers::future::TimeoutFuture;
-use mumble_protocol::control::ClientControlCodec;
-use mumble_protocol::control::ControlPacket;
-use mumble_protocol::voice::VoicePacket;
-use mumble_protocol::voice::VoicePacketPayload;
-use mumble_protocol::Serverbound;
-use std::fmt;
-use std::io;
-use std::time::Duration;
-use wasm_bindgen::prelude::*;
-use wasm_bindgen_futures::JsFuture;
-use web_sys::console;
-use web_sys::js_sys::Promise;
-use web_sys::js_sys::Reflect;
-use web_sys::js_sys::Uint8Array;
-use web_sys::window;
-use web_sys::AudioContext;
-use web_sys::AudioContextOptions;
-use web_sys::AudioData;
-use web_sys::AudioDecoder;
-use web_sys::AudioDecoderConfig;
-use web_sys::AudioDecoderInit;
-use web_sys::AudioEncoder;
-use web_sys::AudioEncoderConfig;
-use web_sys::AudioEncoderInit;
-use web_sys::AudioWorkletNode;
-use web_sys::EncodedAudioChunk;
-use web_sys::EncodedAudioChunkInit;
-use web_sys::EncodedAudioChunkType;
-use web_sys::MediaStream;
-use web_sys::MediaStreamConstraints;
-use web_sys::MediaStreamTrackGenerator;
-use web_sys::MediaStreamTrackGeneratorInit;
-use web_sys::MessageEvent;
-use web_sys::WebTransport;
-use web_sys::WebTransportBidirectionalStream;
-use web_sys::WebTransportOptions;
-use web_sys::WorkletOptions;
-
-pub use wasm_bindgen_futures::spawn_local as spawn;
-
-pub trait ImpRead: AsyncRead + Unpin + 'static {}
-impl<T: AsyncRead + Unpin + 'static> ImpRead for T {}
-
-pub trait ImpWrite: AsyncWrite + Unpin + 'static {}
-impl<T: AsyncWrite + Unpin + 'static> ImpWrite for T {}
-
-pub async fn sleep(d: Duration) {
-    TimeoutFuture::new(d.as_millis() as u32).await
-}
-
-pub struct Error(JsValue);
-
-impl From<anyhow::Error> for Error {
-    fn from(value: anyhow::Error) -> Self {
-        Error(JsError::new(&value.to_string()).into())
-    }
-}
-
-impl From<io::Error> for Error {
-    fn from(value: io::Error) -> Self {
-        Error(JsError::new(&value.to_string()).into())
-    }
-}
-
-impl From<JsValue> for Error {
-    fn from(value: JsValue) -> Self {
-        Error(value)
-    }
-}
-
-impl From<JsError> for Error {
-    fn from(value: JsError) -> Self {
-        Error(JsError::from(value).into())
-    }
-}
-
-impl Error {
-    pub fn new(text: String) -> Self {
-        wasm_bindgen::JsError::new(&text).into()
-    }
-
-    pub fn log(&self) {
-        console::error_1(&self.0);
-    }
-}
-
-impl std::error::Error for Error {}
-
-impl fmt::Display for Error {
-    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
-        let text: String = js_sys::Object::from(self.0.clone()).to_string().into();
-        f.write_str(&text)
-    }
-}
-
-impl fmt::Debug for Error {
-    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
-        let text: String = js_sys::Object::from(self.0.clone()).to_string().into();
-        f.write_str(&text)
-    }
-}
-
-pub struct AudioSystem(AudioContext);
-
-impl AudioSystem {
-    pub fn new(sender: UnboundedSender<ControlPacket<Serverbound>>) -> Result<Self, Error> {
-        // Create MediaStreams to playback decoded audio
-        // The audio context is used to reproduce audio.
-        let audio_context = configure_audio_context();
-
-        let audio_context_worklet = audio_context.clone();
-        spawn(async move {
-            match create_encoder_worklet(&audio_context_worklet, sender).await {
-                Ok(node) => console::log_2(&"Created audio worklet:".into(), &node),
-                Err(err) => err.log(),
-            }
-        });
-
-        Ok(AudioSystem(audio_context))
-    }
-
-    pub fn create_player(&mut self) -> Result<AudioPlayer, Error> {
-        let audio_context = &self.0;
-
-        let audio_stream_generator =
-            MediaStreamTrackGenerator::new(&MediaStreamTrackGeneratorInit::new("audio"))?;
-
-        // Create MediaStream from MediaStreamTrackGenerator
-        let js_tracks = web_sys::js_sys::Array::new();
-        js_tracks.push(&audio_stream_generator);
-        let media_stream = MediaStream::new_with_tracks(&js_tracks)?;
-
-        // Create MediaStreamAudioSourceNode
-        let audio_source = audio_context.create_media_stream_source(&media_stream)?;
-        // Connect output of audio_source to audio_context (browser audio)
-        audio_source.connect_with_audio_node(&audio_context.destination())?;
-
-        // Create callback functions for AudioDecoder
-        let error = Closure::wrap(Box::new(move |e: JsValue| {
-            console::error_1(&e);
-        }) as Box<dyn FnMut(JsValue)>);
-
-        // This knows what MediaStreamTrackGenerator to use as it closes around it
-        let output = Closure::wrap(Box::new(move |audio_data: AudioData| {
-            let writable = audio_stream_generator.writable();
-            if writable.locked() {
-                return;
-            }
-            if let Err(e) = writable.get_writer().map(|writer| {
-                spawn(async move {
-                    if let Err(e) = JsFuture::from(writer.ready()).await {
-                        console::error_1(&format!("write chunk ready error {:?}", e).into());
-                    }
-                    if let Err(e) = JsFuture::from(writer.write_with_chunk(&audio_data)).await {
-                        console::error_1(&format!("write chunk error {:?}", e).into());
-                    };
-                    writer.release_lock();
-                });
-            }) {
-                console::error_1(&e);
-            }
-        }) as Box<dyn FnMut(AudioData)>);
-
-        let audio_decoder = AudioDecoder::new(&AudioDecoderInit::new(
-            error.as_ref().unchecked_ref(),
-            output.as_ref().unchecked_ref(),
-        ))?;
-
-        audio_decoder.configure(&AudioDecoderConfig::new("opus", 1, 48000));
-        console::log_1(&"Created Audio Decoder".into());
-
-        // This is required to prevent these from being deallocated
-        error.forget();
-        output.forget();
-
-        Ok(AudioPlayer(audio_decoder))
-    }
-}
-
-pub struct AudioPlayer(AudioDecoder);
-
-impl AudioPlayer {
-    pub fn play_opus(&mut self, payload: &[u8]) {
-        let js_audio_payload = Uint8Array::from(payload);
-        let _ = self.0.decode(
-            &EncodedAudioChunk::new(&EncodedAudioChunkInit::new(
-                &js_audio_payload.into(),
-                0.0,
-                EncodedAudioChunkType::Key,
-            ))
-            .unwrap(),
-        );
-    }
-}
-
-// Borrowed from
-// https://github.com/security-union/videocall-rs/blob/main/videocall-client/src/decode/config.rs#L6
-fn configure_audio_context() -> AudioContext {
-    let mut audio_context_options = AudioContextOptions::new();
-    audio_context_options.sample_rate(48000 as f32);
-    let audio_context = AudioContext::new_with_context_options(&audio_context_options).unwrap();
-    audio_context
-}
-
-trait PromiseExt {
-    fn into_future(self) -> JsFuture;
-}
-
-impl PromiseExt for Promise {
-    fn into_future(self) -> JsFuture {
-        self.into()
-    }
-}
-
-async fn create_encoder_worklet(
-    audio_context: &AudioContext,
-    packets: UnboundedSender<ControlPacket<mumble_protocol::Serverbound>>,
-) -> Result<AudioWorkletNode, Error> {
-    let stream = window()
-        .unwrap()
-        .navigator()
-        .media_devices()?
-        .get_user_media_with_constraints(MediaStreamConstraints::new().audio(&JsValue::TRUE))?
-        .into_future()
-        .await?
-        .dyn_into()
-        .map_err(|e| JsError::new(&format!("not a stream: {e:?}")))?;
-
-    let options = WorkletOptions::new();
-    Reflect::set(
-        &options,
-        &"processorOptions".into(),
-        &wasm_bindgen::module(),
-    )?;
-
-    let module = "rust_mic_worklet.js";
-    console::log_1(&format!("Loading mic worklet from {module:?}").into());
-    audio_context
-        .audio_worklet()?
-        .add_module_with_options(module, &options)?
-        .into_future()
-        .await?;
-
-    let source = audio_context.create_media_stream_source(&stream)?;
-    let worklet_node = AudioWorkletNode::new(audio_context, "rust_mic_worklet")?;
-
-    let error: Closure<dyn FnMut(JsValue)> = Closure::new(|e| console::error_1(&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);
-        });
-
-    let audio_encoder = AudioEncoder::new(&AudioEncoderInit::new(
-        error.as_ref().unchecked_ref(),
-        output.as_ref().unchecked_ref(),
-    ))
-    .unwrap();
-
-    // This is required to prevent these from being deallocated
-    error.forget();
-    output.forget();
-    let encoder_config = AudioEncoderConfig::new("opus");
-    encoder_config.set_number_of_channels(1);
-    encoder_config.set_sample_rate(48000);
-    encoder_config.set_bitrate(72_000.0);
-
-    audio_encoder.configure(&encoder_config);
-    console::log_1(&"Created Audio Encoder".into());
-
-    let download_buffer = std::cell::RefCell::new(Vec::new());
-
-    let onmessage: Closure<dyn FnMut(MessageEvent)> = Closure::new(move |event: MessageEvent| {
-        match AudioData::new(event.data().unchecked_ref()) {
-            Ok(data) => {
-                let x = web_sys::AudioDataCopyToOptions::new(0);
-                x.set_format(web_sys::AudioSampleFormat::F32);
-                let mut sub_buffer = vec![0; data.allocation_size(&x).unwrap() as usize];
-                data.copy_to_with_u8_slice(&mut sub_buffer, &x);
-                download_buffer.borrow_mut().append(&mut sub_buffer);
-                if download_buffer.borrow().len() > 48000 * 10 * 4 {
-                    //pub fn download_data(data: Vec<u8>, filename: &str) -> Result<(), JsValue> {
-                    //download_data(download_buffer.borrow().to_vec(), "download_buffer.pcm32");
-                    download_buffer.borrow_mut().clear();
-                }
-
-                audio_encoder.encode(&data);
-            }
-            Err(err) => {
-                console::error_1(&err);
-                console::debug_1(&event);
-            }
-        }
-    });
-    Reflect::set(
-        &Reflect::get(&worklet_node, &"port".into())?,
-        &"onmessage".into(),
-        onmessage.as_ref(),
-    )?;
-    onmessage.forget();
-
-    source.connect_with_audio_node(&worklet_node)?;
-    worklet_node.connect_with_audio_node(&audio_context.destination())?;
-
-    Ok(worklet_node)
-}
-
-pub async fn network_connect(
-    address: String,
-    username: String,
-    event_rx: &mut UnboundedReceiver<Command>,
-) -> Result<(), Error> {
-    console::log_1(&"Rust via WASM!".into());
-
-    let Ok(server_hash): Result<Vec<u8>, _> = include_str!("../../server_hash.txt")
-        .trim()
-        .trim_matches(&['[', ']'])
-        .split(',')
-        .map(|x| x.trim().parse())
-        .collect()
-    else {
-        bail!("could not parse server hash");
-    };
-    let hash = web_sys::js_sys::Uint8Array::from(server_hash.as_slice());
-
-    let object = web_sys::js_sys::Object::new();
-
-    Reflect::set(
-        &object,
-        &JsValue::from_str("algorithm"),
-        &JsValue::from_str("sha-256"),
-    )?;
-
-    web_sys::js_sys::Reflect::set(&object, &"value".into(), &hash)?;
-
-    let array = web_sys::js_sys::Array::new();
-    array.push(&object);
-
-    console::log_1(&object.clone().into());
-    console::log_1(&"Created option object!".into());
-
-    let mut options = WebTransportOptions::new();
-    options.server_certificate_hashes(&array);
-
-    console::log_1(&"Created WebTransportOptions!".into());
-
-    let transport = WebTransport::new_with_options(&address, &options)?;
-    console::log_1(&"Created WebTransport connection object.".into());
-    console::log_1(&transport.clone().into());
-
-    if let Err(e) = wasm_bindgen_futures::JsFuture::from(transport.ready()).await {
-        bail!("could not connect to transport: {e:?}");
-    }
-
-    console::log_1(&"Transport is ready.".into());
-
-    let stream: WebTransportBidirectionalStream =
-        wasm_bindgen_futures::JsFuture::from(transport.create_bidirectional_stream())
-            .await?
-            .into();
-
-    let wasm_stream_readable = wasm_streams::ReadableStream::from_raw(stream.readable().into());
-    let wasm_stream_writable = wasm_streams::WritableStream::from_raw(stream.writable().into());
-
-    let read_codec = ClientControlCodec::new();
-    let write_codec = ClientControlCodec::new();
-
-    let reader =
-        asynchronous_codec::FramedRead::new(wasm_stream_readable.into_async_read(), read_codec);
-    let writer =
-        asynchronous_codec::FramedWrite::new(wasm_stream_writable.into_async_write(), write_codec);
-
-    super::network_loop(username, event_rx, reader, writer).await
-}
-
-pub fn set_default_username(username: &str) -> Option<()> {
-    web_sys::window()?
-        .local_storage()
-        .ok()??
-        .set_item("username", username)
-        .ok()
-}
-
-pub fn load_username() -> Option<String> {
-    web_sys::window()
-        .unwrap()
-        .local_storage()
-        .ok()??
-        .get_item("username")
-        .ok()?
-}

src/main.rs

@@ -1,11 +0,0 @@
-use mumble_web2::app;
-
-pub fn main() {
-    #[cfg(feature = "desktop")]
-    let _guard = tokio::runtime::Builder::new_multi_thread()
-        .enable_all()
-        .build()
-        .unwrap()
-        .enter();
-    dioxus::launch(app::app);
-}