Update logs and variable names

Add background color to #main in loader styles to prevent white flash
while app CSS loads after WASM initialization.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.gitea/workflows/build-release.yaml

@@ -0,0 +1,85 @@
+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.2
+
+      - 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
+
+  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

.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

@@ -4,5 +4,6 @@ server_hash.txt
 .aider*
 **.pem
 proxy/bundle
-config.toml
+/config.toml
 proxy/config.toml
+gui/assets/*_onnx.tar.gz

.vscode/settings.json

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

README.md

@@ -2,13 +2,12 @@
 
 ## Running Desktop
 
-1. `cargo install dioxus-cli --version 0.6.3`
+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.6.3`
+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`
@@ -16,7 +15,7 @@
 
 ## Running Web (with `proxy` only)
 
-1. `cargo install dioxus-cli --version 0.6.3`
+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

common/src/lib.rs

@@ -1,9 +1,8 @@
 use serde::{Deserialize, Serialize};
 
 #[derive(Debug, Clone, Deserialize, Serialize, Default)]
-pub struct ClientConfig {
+pub struct ProxyOverides {
     pub proxy_url: Option<String>,
-    pub status_url: Option<String>,
     pub cert_hash: Option<Vec<u8>>,
     pub any_server: bool,
 }

config.toml.example

@@ -1,4 +1,4 @@
-public_url = "https://127.0.0.1:4433"
+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]"

docker/dioxus.Dockerfile

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

docker/docker-compose.yaml

@@ -40,7 +40,7 @@ services:
     ports:
       - "4433:4433/tcp"
       - "4433:4433/udp"
-    command: ["cargo", "run", "-p", "mumble-web2-proxy"]
+    command: ["cargo", "run", "-p", "mumble-web2-proxy", "--locked"]
     network_mode: host
 
   mumble-server:
@@ -48,8 +48,6 @@ services:
     ports:
       - "64738:64738/tcp"
       - "64738:64738/udp"
-    environment:
-      - MUMBLE_CONFIG_WELCOMETEXT=Welcome to the Mumble server
     network_mode: host
 #volumes:
 #  caddy_data:

docker/proxy-config.toml

@@ -1,4 +1,4 @@
-public_url = "https://127.0.0.1:4433"
+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,57 @@
+# 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 carog 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 from git HEAD with cargo
+# This is to work around a bug in the windows builder upstream.
+# Dioxus has released 0.7.2, but it seems to be broken for now.
+RUN cargo binstall dioxus-cli
+
+ENTRYPOINT ["C:\\Program Files (x86)\\Microsoft Visual Studio\\2022\\BuildTools\\Common7\\Tools\\VsDevCmd.bat", "&&", "powershell.exe", "-NoLogo", "-ExecutionPolicy", "Bypass"]

gui/Cargo.toml

@@ -6,13 +6,13 @@ edition = "2021"
 [dependencies]
 # Web Dependencies
 # ================
-dioxus-web = { version = "0.6.3", optional = true }
-wasm-bindgen = { version = "0.2.92", optional = true }
-wasm-bindgen-futures = { version = "0.4.42", optional = true }
-wasm-streams = { version = "0.4.0", optional = true }
-serde-wasm-bindgen = { version = "0.6.5", optional = true }
-js-sys = { version = "0.3.70", optional = true }
-web-sys = { version = "0.3.72", features = [
+dioxus-web = { version = "0.7.1", optional = true }
+wasm-bindgen = { version = "^0.2.92", optional = true }
+wasm-bindgen-futures = { version = "^0.4.42", optional = true }
+wasm-streams = { version = "^0.4.0", optional = true }
+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",
@@ -30,8 +30,6 @@ web-sys = { version = "0.3.72", features = [
   "EncodedAudioChunkInit",
   "EncodedAudioChunkType",
   "CodecState",
-  "MediaStreamTrackGenerator",
-  "MediaStreamTrackGeneratorInit",
   "AudioContext",
   "AudioContextOptions",
   "MediaStream",
@@ -42,6 +40,7 @@ web-sys = { version = "0.3.72", features = [
   "AudioWorkletNode",
   "AudioWorklet",
   "AudioWorkletProcessor",
+  "MessagePort",
   "MediaStreamConstraints",
   "WorkletOptions",
   "AudioEncoder",
@@ -54,55 +53,61 @@ web-sys = { version = "0.3.72", features = [
   "AudioSampleFormat",
   "Storage",
 ], optional = true }
-gloo-timers = { version = "0.3.0", features = ["futures"], optional = true }
-tracing-web = { version = "0.1.3", optional = true }
+gloo-timers = { version = "^0.3.0", features = ["futures"], optional = true }
+tracing-web = { version = "^0.1.3", optional = true }
 
 # Desktop Dependecies
 # ===================
-dioxus-desktop = { version = "0.6.3", optional = true }
-tokio = { version = "1.41.1", features = ["net", "rt"], optional = true }
-tokio-rustls = { version = "0.26.0", optional = true }
+tokio = { version = "^1.41.1", features = ["net", "rt"], optional = true }
+tokio-rustls = { version = "^0.26.0", optional = true }
 opus = { version = "0.3.0", optional = true }
 cpal = { version = "0.15.3", optional = true }
 dasp_ring_buffer = { version = "0.11.0", optional = true }
+etcetera = { version = "0.10.0", optional = true }
 
 # Base Dependencies
 # ================
-dioxus = { version = "0.6.3" }
+dioxus = { version = "0.7.2" }
 once_cell = "1.19.0"
 asynchronous-codec = { workspace = true }
-futures = "0.3.30"
-merge-io = "0.3.0"
+futures = "^0.3.30"
+merge-io = "^0.3.0"
 mumble-protocol = { workspace = true }
-serde_json = "1.0.117"
-tokio-util = { version = "0.7.11", features = ["codec", "compat"] }
-byteorder = "1.5.0"
-ogg = "0.9.1"
-ordermap = "0.5.3"
-html-purifier = "0.3.0"
-markdown = "0.3.0"
-futures-channel = "0.3.30"
-sir = { git = "https://gitlab.com/samsartor/sir", features = [
-  "dioxus",
-] } # dioxus 0.6
+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"
-rfd = "0.15.2"
-base64 = "0.22"
-mime_guess = "2.0.5"
-async_cell = "0.2.3"
-reqwest = { version = "0.12.22", features = ["json"] }
+tracing-subscriber = { version = "^0.3.18", features = ["ansi"] }
+tracing = "^0.1.40"
+color-eyre = "^0.6.3"
+crossbeam-queue = "^0.3.11"
+lol_html = "^2.2.0"
+rfd = { git = "https://github.com/PolyMeilex/rfd.git", version = "^0.16.0", default-features = false }
+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" }
+deep_filter = { git = "https://github.com/Rikorose/DeepFilterNet.git", rev = "d375b2d8309e0935d165700c91da9de862a99c31", features = [
+  "tract",
+] }
 crossbeam = "0.8.4"
 
+[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 = [
   "dioxus/web",
@@ -115,6 +120,7 @@ web = [
   "web-sys",
   "gloo-timers",
   "tracing-web",
+  "deep_filter/wasm",
 ]
 desktop = [
   "dioxus/desktop",
@@ -124,4 +130,6 @@ desktop = [
   "opus",
   "cpal",
   "dasp_ring_buffer",
+  "rfd/xdg-portal",
+  "etcetera",
 ]

gui/Dioxus.toml

@@ -23,7 +23,7 @@ watch_path = ["src", "assets"]
 # CSS style file
 style = []
 # Javascript code file
-script = []
+script = ["loader.js"]
 
 [web.resource.dev]
 # serve: [dev-server] only
@@ -31,3 +31,14 @@ script = []
 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,310 @@
+: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 {
+  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 {
+  &_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;
+}
+
+.button_row {
+  display: flex;
+  gap: 10px;
+
+  .spacer {
+    flex-grow: 1;
+  }
+}
+
+.toggle_button {
+  padding: 8px;
+  height: 100%;
+  aspect-ratio: 1 / 1;
+
+  background-color: unset;
+
+  border: solid rgb(255 255 255 / 0.1) 3px;
+  border-radius: 10px;
+  color: rgb(255 255 255 / 50%);
+
+  transition: all 0.5s ease-in-out;
+
+  &.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;
+    font-size: 35px;
+  }
+}
+
+.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: 16px;
+    margin: 16px;
+    background-color: var(--light-bg-color);
+    border-radius: 10px;
+    overflow: hidden;
+    grid-area: control;
+
+    display: flex;
+    gap: 10px;
+    flex-direction: column;
+  }
+}
+
+.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/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);

gui/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();
+}

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/app.rs

@@ -2,9 +2,8 @@
 
 use dioxus::prelude::*;
 use mime_guess::Mime;
-use mumble_web2_common::{ClientConfig, ServerStatus};
+use mumble_web2_common::{ProxyOverides, ServerStatus};
 use ordermap::OrderSet;
-use sir::{css, global_css};
 use std::collections::HashMap;
 
 use crate::imp;
@@ -24,7 +23,7 @@ pub enum Command {
     Connect {
         address: String,
         username: String,
-        config: ClientConfig,
+        config: ProxyOverides,
     },
     SendChat {
         markdown: String,
@@ -138,25 +137,6 @@ impl UserIcon {
 
 #[component]
 pub fn UserPill(name: String, icon: UserIcon, isself: bool) -> Element {
-    let pill = css!(
-        "
-        border-radius: 100px;
-        padding: 4px 8px;
-        width: fit-content;
-
-        img {
-            height: 1em;
-            vertical-align: text-bottom;
-        }
-    "
-    );
-
-    let pill_self = css!(
-        "
-        font-weight: bolder;
-        "
-    );
-
     let color = match icon {
         UserIcon::Normal => "var(--accent-normal)",
         UserIcon::Muted => "var(--accent-muted)",
@@ -166,7 +146,7 @@ pub fn UserPill(name: String, icon: UserIcon, isself: bool) -> Element {
 
     rsx!(
         div {
-            class: match isself { true => format!("{pill} {pill_self}"), false => format!("{pill}") },
+            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}"
@@ -200,34 +180,9 @@ pub fn Channel(id: ChannelId) -> Element {
         return rsx!("missing channel {id}");
     };
 
-    let channel_details = css!(
-        "
-        flex: 0 0 100%;
-
-        summary {
-            cursor: pointer;
-        }
-
-        summary:focus-visible {
-            outline: none;
-        }
-    "
-    );
-    let channel_children = css!(
-        "
-        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;    "
-    );
-
     rsx!(
         details {
-            class: "{channel_details}",
+            class: "channel_details",
             open: true,
             summary {
                 span {
@@ -242,7 +197,7 @@ pub fn Channel(id: ChannelId) -> Element {
             }
             if state.users.len() + state.children.len() > 0 {
                 div {
-                    class: "{channel_children}",
+                    class: "channel_children",
                     for id in state.users.iter() {
                         User { id: *id }
                     }
@@ -283,71 +238,6 @@ pub fn ChatView() -> Element {
     let server = STATE.server.read();
     let mut draft = use_signal(|| "".to_string());
 
-    let chat_panel = css!(
-        "
-        display: flex;
-        flex-direction: column;
-    "
-    );
-
-    let chat_history = css!(
-        "
-        overflow-y: auto;
-        flex: 1 0 0;
-    "
-    );
-
-    let chat_message = css!(
-        "
-        display: flex;
-        flex-direction: row;
-        margin: 16px;
-        gap: 8px;
-        align-items: center;
-    "
-    );
-
-    let chat_box_wrapper = css!(
-        "
-        padding: 16px;
-        border-top: solid var(--line-color) var(--line-width);
-    "
-    );
-
-    let chat_box = css!(
-        "
-        display: flex;
-        flex-direction: row;
-        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;
-        }
-
-    "
-    );
-
     let mut do_send = move || {
         if let Some(user) = STATE.server.read().this_user() {
             net.send(SendChat {
@@ -359,12 +249,12 @@ pub fn ChatView() -> Element {
 
     rsx!(
         div {
-            class: "{chat_panel}",
+            class: "chat_panel",
             div {
-                class: "{chat_history}",
+                class: "chat_history",
                 for chat in server.chat.iter() {
                     div {
-                        class: "{chat_message}",
+                        class: "chat_message",
                         if let Some(sender) = chat.sender.and_then(|u| server.users.get(&u)) {
                             UserPill {
                                 name: sender.name.clone(),
@@ -379,9 +269,9 @@ pub fn ChatView() -> Element {
                 }
             }
             div {
-                class: "{chat_box_wrapper}",
+                class: "chat_box_wrapper",
                 div {
-                    class: "{chat_box}",
+                    class: "chat_box",
                     input {
                         placeholder: "say something",
                         value: "{draft.read()}",
@@ -418,27 +308,8 @@ pub fn ChatView() -> Element {
     )
 }
 
-// true => rsx!(span { class: "material-symbols-outlined", style: "{button_style}", "mic_off"}),
-//Connecting => rsx! {
-//    div {
-//        class: "{connecting_status}",
-//        span {
-//            class: "material-symbols-outlined",
-//            style: "vertical-align: middle; font-size: 30px;",
-//            "signal_cellular_alt_2_bar"
-//        }
-//        span {
-//            style: "width: 5px; display: inline-block;"
-//        }
-//        span {
-//            style: "vertical-align: middle; font-size: 30px;",
-//            "Connecting"
-//        }
-//    }
-//},
-
 #[component]
-pub fn ControlView(config: Resource<ClientConfig>) -> Element {
+pub fn ControlView(config: Resource<ProxyOverides>) -> Element {
     let net: Coroutine<Command> = use_coroutine_handle();
     let status = &STATE.status;
     let server = STATE.server.read();
@@ -462,99 +333,15 @@ pub fn ControlView(config: Resource<ClientConfig>) -> Element {
         .as_ref()
         .and_then(|gui_config| gui_config.proxy_url.clone());
 
-    let button_row = css!(
-        r#"
-        display: flex;
-        gap: 10px;
-    "#
-    );
-
-    let spacer = css!(
-        r#"
-        flex-grow: 1;
-    "#
-    );
-
-    let toggle_button = css!(
-        r#"
-        padding: 8px;
-        height: 100%;
-        aspect-ratio: 1 / 1;
-
-        background-color: unset;
-
-        border: solid rgb(255 255 255 / 0.1) 3px;
-        border-radius: 10px;
-        color: rgb(255 255 255 / 50%);
-
-        transition: all 0.5s ease-in-out;
-        "#
-    );
-
-    let toggle_button_on = css!(
-        r#"
-        padding: 8px;
-        height: 100%;
-        aspect-ratio: 1 / 1;
-
-        background-color: oklch(0.5 0.1381 21.71 / 20.12%);
-
-        border: solid rgb(255 255 255 / 0) 3px;
-        border-radius: 10px;
-        color: oklch(0.53 0.1505 21.71 / 89.38%);
-
-        transition: all 0.25s ease-in-out;
-        "#
-    );
-
-    let button_style = r#"
-        font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
-        vertical-align: middle;
-        font-size: 35px;
-    "#;
-
-    let connecting_status = css!(
-        r#"
-            color: yellow;
-        "#
-    );
-
-    let connected_status = css!(
-        r#"
-            color: oklch(0.55 0.1184 141.35);
-        "#
-    );
-
-    let disconnected_status = css!(
-        r#"
-            color: gray;
-        "#
-    );
-
-    let failed_status = css!(
-        r#"
-            color: red;
-        "#
-    );
-
-    let connection_info = css!(
-        r#"
-            color: gray;
-        "#
-    );
-
-    let user_edit_button = css!(
-        r#"
-            background-color: oklch(0.53 0.1431 264.18);
-            border-radius: 50%;
-            aspect-ratio: 1 / 1;
-        "#
-    );
+    let 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: "{connecting_status}",
+                style: "color: \"{connecting_color}\";",
                 span {
                     class: "material-symbols-outlined",
                     style: "vertical-align: middle; font-size: 30px;",
@@ -572,7 +359,7 @@ pub fn ControlView(config: Resource<ClientConfig>) -> Element {
         Connected => rsx! {
             div {
                 div {
-                    class: "{connected_status}",
+                    style: "color: \"{connected_color}\";",
                     span {
                         class: "material-symbols-outlined",
                         style: "vertical-align: middle; font-size: 30px;",
@@ -587,7 +374,6 @@ pub fn ControlView(config: Resource<ClientConfig>) -> Element {
                     }
                 }
                 div {
-                    class: "{connection_info}",
                     span { style: "width: 3px; display: inline-block;"}
                     span { "{current_channel_name}" }
                     if let Some(proxy_url) = proxy_url {
@@ -599,7 +385,7 @@ pub fn ControlView(config: Resource<ClientConfig>) -> Element {
         },
         Disconnected => rsx! {
             div {
-                class: "{disconnected_status}",
+                style: "color: \"{disconnected_color}\";",
                 span {
                     class: "material-symbols-outlined",
                     style: "vertical-align: middle;",
@@ -616,7 +402,7 @@ pub fn ControlView(config: Resource<ClientConfig>) -> Element {
         },
         Failed(_) => rsx! {
             div {
-                class: "{failed_status}",
+                style: "color: \"{failed_color}\";",
                 span {
                     class: "material-symbols-outlined",
                     style: "vertical-align: middle;",
@@ -637,17 +423,16 @@ pub fn ControlView(config: Resource<ClientConfig>) -> Element {
     rsx!(
         // Server control
         div {
-            class: "{button_row}",
+            class: "button_row",
             div {
                 {connection_status}
             }
-            span { class: "{spacer}" }
+            span { class: "spacer" }
             button {
-                class: "{toggle_button}",
+                class: "toggle_button",
                 onclick: move |_| net.send(Disconnect),
                 span {
                     class: "material-symbols-outlined",
-                    style: "{button_style}",
                     "signal_disconnected"
                 }
             }
@@ -655,9 +440,9 @@ pub fn ControlView(config: Resource<ClientConfig>) -> Element {
         hr { style: "width: 100%;" }
         // User control
         div {
-            class: "{button_row}",
+            class: "button_row",
             button {
-                class: "{user_edit_button}",
+                class: "user_edit_button",
                 span {
                     class: "material-symbols-outlined",
                     style: "color: oklch(0.65 0.2245 28.06); font-size: 45px; font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;",
@@ -672,11 +457,11 @@ pub fn ControlView(config: Resource<ClientConfig>) -> Element {
                     span { style: "font-size: 20px; color: gray;", "some data" }
                 }
             }
-            span { class: "{spacer}" }
+            span { class: "spacer" }
             button {
                 class: match denoise() {
-                    true => toggle_button_on,
-                    false => toggle_button,
+                    true => "toggle_button is_on",
+                    false => "toggle_button",
                 },
                 role: "switch",
                 aria_checked: denoise(),
@@ -686,36 +471,36 @@ pub fn ControlView(config: Resource<ClientConfig>) -> Element {
                     net.send(UpdateMicEffects { denoise: new_denoise })
                 },
                 match denoise() {
-                    true => rsx!(span { class: "material-symbols-outlined", style: "{button_style}", "cadence"}),
-                    false => rsx!(span { class: "material-symbols-outlined", style: "{button_style}", "graphic_eq"}),
+                    true => rsx!(span { class: "material-symbols-outlined", "cadence"}),
+                    false => rsx!(span { class: "material-symbols-outlined", "graphic_eq"}),
                 }
             }
             button {
                 class: match mute || self_mute {
-                    true => toggle_button_on,
-                    false => toggle_button,
+                    true => "toggle_button is_on",
+                    false => "toggle_button",
                 },
                 role: "switch",
                 aria_checked: mute || self_mute,
                 disabled: mute,
                 onclick: move |_| net.send(SetMute { mute: !self_mute }),
                 match mute || self_mute {
-                    true => rsx!(span { class: "material-symbols-outlined", style: "{button_style}", "mic_off"}),
-                    false => rsx!(span { class: "material-symbols-outlined", style: "{button_style}", "mic"}),
+                    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_on,
-                    false => toggle_button,
+                    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", style: "{button_style}", "volume_off"}),
-                    false => rsx!(span { class: "material-symbols-outlined", style: "{button_style}", "volume_up"}),
+                    true => rsx!(span { class: "material-symbols-outlined", "volume_off"}),
+                    false => rsx!(span { class: "material-symbols-outlined", "volume_up"}),
                 }
             }
         }
@@ -723,7 +508,7 @@ pub fn ControlView(config: Resource<ClientConfig>) -> Element {
 }
 
 #[component]
-pub fn ServerView(config: Resource<ClientConfig>) -> Element {
+pub fn ServerView(config: Resource<ProxyOverides>) -> Element {
     let net: Coroutine<Command> = use_coroutine_handle();
     let server = STATE.server.read();
     let Some(&UserState {
@@ -737,71 +522,11 @@ pub fn ServerView(config: Resource<ClientConfig>) -> Element {
         return rsx!();
     };
 
-    let grid = css!(
-        r#"
-        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";
-        }
-    "#
-    );
-
-    let channel_box = css!(
-        "
-        padding: 16px;
-        overflow: auto;
-        grid-area: tree;
-    "
-    );
-
-    let chat_box = css!(
-        "
-        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);
-        }
-    "
-    );
-
-    let control_box = css!(
-        "
-        padding: 16px;
-        margin: 16px;
-        background-color: var(--light-bg-color);
-        border-radius: 10px;
-        overflow: hidden;
-        grid-area: control;
-
-        display: flex;
-        gap: 10px;
-        flex-direction: column;
-    "
-    );
-
     rsx!(
         div {
-            class: "{grid}",
+            class: "server_grid",
             div {
-                class: "{channel_box}",
+                class: "server_channel_box",
                 for (id, state) in server.channels.iter() {
                     if state.parent.is_none() {
                         Channel { id: *id }
@@ -809,49 +534,31 @@ pub fn ServerView(config: Resource<ClientConfig>) -> Element {
                 }
             }
             div {
-                class: "{chat_box}",
+                class: "server_chat_box",
                 ChatView {}
             }
             div {
-                class: "{control_box}",
+                class: "server_control_box",
                 ControlView { config }
             }
         }
     )
 }
 
-async fn get_status(
-    client: &reqwest::Client,
-    status_url: &str,
-) -> color_eyre::Result<ServerStatus> {
-    Ok(client
-        .get(status_url)
-        .send()
-        .await?
-        .json::<ServerStatus>()
-        .await?)
-}
-
 #[component]
-pub fn LoginView(config: Resource<ClientConfig>) -> Element {
+pub fn LoginView(config: Resource<ProxyOverides>) -> Element {
     let net: Coroutine<Command> = use_coroutine_handle();
 
     let last_status = use_signal(|| None::<color_eyre::Result<ServerStatus>>);
     use_resource(move || async move {
-        let Some(config) = config.read().clone() else {
-            return;
-        };
-        let Some(status_url) = config.status_url else {
-            return;
-        };
         let client = reqwest::Client::new();
         loop {
-            *last_status.write_unchecked() = Some(get_status(&client, &status_url).await);
+            *last_status.write_unchecked() = Some(imp::get_status(&client).await);
             imp::sleep(std::time::Duration::from_secs_f32(1.0)).await;
         }
     });
 
-    let mut address_input = use_signal(|| None::<String>);
+    let mut address_input = use_signal(|| imp::load_server_url());
     let address = use_memo(move || {
         if let Some(addr) = address_input() {
             addr.clone()
@@ -865,52 +572,12 @@ pub fn LoginView(config: Resource<ClientConfig>) -> Element {
     let previous_username = imp::load_username();
     let mut username = use_signal(|| previous_username.unwrap_or(String::new()));
 
-    let error = css!(
-        "
-        background-color: white;
-        border-radius: 4px;
-        overflow: auto;
-        padding: 4px;
-        color: red;
-        pre {
-            color: black;
-        }
-    "
-    );
-
-    let login_box = css!(
-        "
-        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;
-        }
-    "
-    );
-
-    let bttn = css!(
-        "
-        font-weight: bold;
-        font-size: large;
-    "
-    );
-
     let do_connect = move |_| {
         //let _ = set_default_username(&username.read());
         let _ = imp::set_default_username(&username.read());
+        if config.read().as_ref().is_some_and(|cfg| cfg.any_server) {
+            imp::set_default_server(&address.read());
+        }
         net.send(Connect {
             address: address.read().clone(),
             username: username.read().clone(),
@@ -921,25 +588,25 @@ pub fn LoginView(config: Resource<ClientConfig>) -> Element {
     let bottom = match &*status.read() {
         Disconnected => rsx! {
             button {
-                class: "{bttn}",
+                class: "login_bttn",
                 onclick: do_connect.clone(),
                 "Connect"
             }
         },
         Connecting => rsx! {
             div {
-                class: "{bttn}",
+                class: "login_bttn",
                 "Connecting..."
             }
         },
         Failed(msg) => rsx!(
             button {
-                class: "{bttn}",
+                class: "login_bttn",
                 onclick: do_connect.clone(),
                 "Reconnect"
             }
             div {
-                class: "{error}",
+                class: "login_error",
                 "Failed to connect:"
                 pre {
                     "{msg}"
@@ -948,11 +615,16 @@ pub fn LoginView(config: Resource<ClientConfig>) -> Element {
         ),
         Connected => unreachable!(),
     };
+    let version = option_env!("MUMBLE_WEB2_VERSION");
     rsx!(
         div {
-            class: "{login_box}",
+            class: "login",
             h1 {
                 "Mumble Web"
+                match version {
+                    Some(v) => rsx!(" " span { class: "login_version", "({v})" }),
+                    None => rsx!(),
+                }
             }
             if config.read().as_ref().is_some_and(|cfg| cfg.any_server) {
                 div {
@@ -984,15 +656,37 @@ pub fn LoginView(config: Resource<ClientConfig>) -> Element {
                 }
             }
             div {
-                div {
-                    span {}
-                    span {"—"}
-                    span {}
-                }
-                div {
-                    span {"1/100 Online"}
-                    span {"—"}
-                    span {"Version: 1.4.255"}
+                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 proxy server"
+                        }
+                    }),
                 }
                 div {
                     {bottom}
@@ -1025,86 +719,21 @@ pub fn LoginView(config: Resource<ClientConfig>) -> Element {
 }
 
 pub fn app() -> Element {
+    static STYLE: Asset = asset!("/assets/main.scss");
+
     use_coroutine(|rx: UnboundedReceiver<Command>| super::network_entrypoint(rx));
     let config = use_resource(|| async move {
-        match imp::load_config().await {
+        match imp::load_proxy_overides().await {
             Ok(config) => config,
-            Err(_) => ClientConfig::default(),
+            Err(_) => ProxyOverides::default(),
         }
     });
 
-    global_css!(
-        "
-    :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: white;
-    }
-
-    body {
-        margin: 0;
-    }
-
-    #main {
-        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;
-
-    }
-
-    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);
-    }
-    "
-    );
-
     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 }
 
-        sir::AppStyle { }
         match *STATE.status.read() {
             Connected => rsx!(ServerView { config }),
             _ => rsx!(LoginView { config }),

gui/src/effects.rs

@@ -1,26 +1,136 @@
 use crossbeam::atomic::AtomicCell;
+use df::tract::{mut_slice_as_arrayviewmut, slice_as_arrayview};
+use df::tract::{DfParams, DfTract, RuntimeParams};
+use dioxus::prelude::{asset, manganis, Asset};
+use dioxus_asset_resolver::read_asset_bytes;
+use std::cell::RefCell;
 use std::sync::Arc;
+use tracing::{error, info};
+
+use crate::imp;
+
+static DF_MODEL: Asset = asset!("/assets/DeepFilterNet3_ll_onnx.tar.gz");
+
+enum DenoisingModelState {
+    Nothing,
+    Downloading(Arc<AtomicCell<Option<DfParams>>>),
+    Availible(Box<DfTract>),
+}
+
+fn with_denoising_model<O>(
+    spawn: &imp::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);
+            spawn.spawn(async move {
+                let model_bytes = match read_asset_bytes(&DF_MODEL).await {
+                    Ok(b) => b,
+                    Err(e) => {
+                        error!("could not read denoising model from \"{DF_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)),
+    })
+}
 
-#[derive(Default)]
 pub struct AudioProcessor {
-    df: Option<::df::DFState>,
+    denoise: bool,
+    spawn: imp::SpawnHandle,
+    buffer: Vec<f32>,
 }
 
 impl AudioProcessor {
+    pub fn new_plain() -> Self {
+        AudioProcessor {
+            denoise: false,
+            spawn: imp::SpawnHandle::current(),
+            buffer: Vec::new(),
+        }
+    }
+
     pub fn new_denoising() -> Self {
-        let df = ::df::DFState::default();
-        AudioProcessor { df: Some(df) }
+        AudioProcessor {
+            denoise: true,
+            spawn: imp::SpawnHandle::current(),
+            buffer: Vec::new(),
+        }
     }
 }
 
 impl AudioProcessor {
-    pub fn process(&mut self, audio: &[f32], output: &mut Vec<f32>) {
-        if let Some(df) = &mut self.df {
-            let start = output.len();
-            output.extend(std::iter::repeat_n(0f32, audio.len()));
-            df.process_frame(audio, &mut output[start..]);
-        } else {
-            output.extend_from_slice(audio);
+    pub fn process(&mut self, audio: &[f32], channels: usize, output: &mut Vec<f32>) {
+        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());
         }
     }
 }

gui/src/imp/desktop.rs

@@ -1,16 +1,17 @@
 use crate::app::Command;
 use crate::effects::{AudioProcessor, AudioProcessorSender};
-use color_eyre::eyre::{eyre, Error};
-use cpal::traits::{DeviceTrait, HostTrait};
-use dioxus::hooks::{UnboundedReceiver, UnboundedSender};
+use color_eyre::eyre::{bail, eyre, Error};
+use cpal::traits::{DeviceTrait, HostTrait, StreamTrait as _};
+use dioxus::hooks::UnboundedReceiver;
+use etcetera::{choose_app_strategy, AppStrategy, AppStrategyArgs};
 use futures::io::{AsyncRead, AsyncWrite};
-use mumble_protocol::control::{ClientControlCodec, ControlPacket};
-use mumble_protocol::Serverbound;
-use mumble_web2_common::ClientConfig;
+use mumble_protocol::control::ClientControlCodec;
+use mumble_web2_common::{ProxyOverides, ServerStatus};
+use std::collections::HashMap;
 use std::mem::replace;
 use std::net::ToSocketAddrs;
+use std::sync::Arc;
 use std::sync::Mutex;
-use std::{fmt, io, sync::Arc};
 use tokio::net::TcpStream;
 use tokio_rustls::rustls;
 use tokio_rustls::rustls::client::danger::{HandshakeSignatureValid, ServerCertVerifier};
@@ -19,8 +20,9 @@ use tokio_rustls::rustls::ClientConfig as RlsClientConfig;
 use tokio_rustls::rustls::DigitallySignedStruct;
 use tokio_rustls::TlsConnector;
 use tokio_util::compat::{TokioAsyncReadCompatExt as _, TokioAsyncWriteCompatExt as _};
-use tracing::{debug, error, info, instrument, warn};
+use tracing::{error, info, instrument, warn};
 
+pub use tokio::runtime::Handle as SpawnHandle;
 pub use tokio::task::spawn;
 pub use tokio::time::sleep;
 
@@ -43,7 +45,7 @@ const PACKET_SAMPLES: u32 = 960;
 type Buffer = Arc<Mutex<dasp_ring_buffer::Bounded<Vec<i16>>>>;
 
 impl AudioSystem {
-    pub fn new() -> Result<Self, Error> {
+    pub async fn new() -> Result<Self, Error> {
         // TODO
         let host = cpal::default_host();
         let name = host.id();
@@ -64,13 +66,49 @@ impl AudioSystem {
         self.processors.store(Some(processor))
     }
 
+    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"))
+    }
+
     pub fn start_recording(
         &mut self,
         mut each: impl FnMut(Vec<u8>) + 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::default();
+        let mut current_processor = AudioProcessor::new_plain();
         let mut output_buffer = Vec::new();
         let processors = self.processors.clone();
         let error_callback = move |e: cpal::StreamError| error!("error recording: {e:?}");
@@ -78,7 +116,7 @@ impl AudioSystem {
             if let Some(new_processor) = processors.take() {
                 current_processor = new_processor;
             }
-            current_processor.process(frame, &mut output_buffer);
+            current_processor.process(frame, config.channels as usize, &mut output_buffer);
             if output_buffer.len() < PACKET_SAMPLES as usize {
                 return;
             }
@@ -94,17 +132,12 @@ impl AudioSystem {
             }
         };
 
-        match self.input.build_input_stream(
-            &cpal::StreamConfig {
-                channels: 1,
-                sample_rate: cpal::SampleRate(SAMPLE_RATE),
-                buffer_size: cpal::BufferSize::Fixed(PACKET_SAMPLES),
-            },
-            data_callback,
-            error_callback,
-            None,
-        ) {
+        match self
+            .input
+            .build_input_stream(&config, data_callback, error_callback, None)
+        {
             Ok(stream) => {
+                stream.play()?;
                 self.recording_stream = Some(stream);
                 Ok(())
             }
@@ -116,32 +149,34 @@ impl AudioSystem {
     }
 
     pub fn create_player(&mut self) -> Result<AudioPlayer, Error> {
+        let config = self.choose_config(self.input.supported_input_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;
-            2400 // 50ms of buffer
+            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(
-                &cpal::StreamConfig {
-                    channels: 1,
-                    sample_rate: cpal::SampleRate(SAMPLE_RATE),
-                    buffer_size: cpal::BufferSize::Fixed(480), // 10ms playback delay
-                },
-                move |frame, info| {
+                &config,
+                move |frame, _info| {
                     let mut buffer = buffer.lock().unwrap();
-                    for x in frame.iter_mut() {
+                    for x in frame.chunks_mut(config.channels as usize) {
                         match buffer.pop() {
                             Some(y) => {
-                                *x = y;
+                                x.fill(y);
                             }
                             None => {
-                                *x = 0;
+                                x.fill(0);
                             }
                         }
                     }
@@ -150,6 +185,7 @@ impl AudioSystem {
                 None,
             )?
         };
+        stream.play()?;
         Ok(AudioPlayer {
             decoder,
             stream,
@@ -248,7 +284,7 @@ pub async fn network_connect(
     address: String,
     username: String,
     event_rx: &mut UnboundedReceiver<Command>,
-    gui_config: &ClientConfig,
+    proxy_overides: &ProxyOverides,
 ) -> Result<(), Error> {
     info!("connecting");
 
@@ -280,23 +316,68 @@ pub async fn network_connect(
     crate::network_loop(username, event_rx, reader, writer).await
 }
 
+fn get_config_path() -> std::path::PathBuf {
+    let strategy = choose_app_strategy(AppStrategyArgs {
+        top_level_domain: "com".to_string(),
+        author: "Ohea Corp".to_string(),
+        app_name: "Mumble Web2".to_string(),
+    })
+    .expect("failed to choose app strategy");
+    strategy.config_dir().join("config.json")
+}
+
+fn load_config_map() -> HashMap<String, String> {
+    let config_path = get_config_path();
+    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, String>) -> color_eyre::Result<()> {
+    let config_path = get_config_path();
+    if let Some(parent) = config_path.parent() {
+        std::fs::create_dir_all(parent)?;
+    }
+    let contents = serde_json::to_string_pretty(config)?;
+    std::fs::write(&config_path, contents)?;
+    Ok(())
+}
+
 pub fn set_default_username(username: &str) -> Option<()> {
-    None
+    let mut config = load_config_map();
+    config.insert("username".to_string(), username.to_string());
+    save_config_map(&config).ok()
+}
+
+pub fn set_default_server(server: &str) -> Option<()> {
+    let mut config = load_config_map();
+    config.insert("server".to_string(), server.to_string());
+    save_config_map(&config).ok()
 }
 
 pub fn load_username() -> Option<String> {
-    return None;
+    let config = load_config_map();
+    config.get("username").cloned()
 }
 
-pub async fn load_config() -> color_eyre::Result<ClientConfig> {
-    Ok(ClientConfig {
+pub fn load_server_url() -> Option<String> {
+    let config = load_config_map();
+    config.get("server").cloned()
+}
+
+pub async fn load_proxy_overides() -> color_eyre::Result<ProxyOverides> {
+    Ok(ProxyOverides {
         proxy_url: None,
-        status_url: None,
         cert_hash: None,
         any_server: true,
     })
 }
 
+pub async fn get_status(client: &reqwest::Client) -> color_eyre::Result<ServerStatus> {
+    bail!("status not supported on desktop yet")
+}
+
 pub fn init_logging() {
     use tracing::level_filters::LevelFilter;
     use tracing_subscriber::filter::EnvFilter;

gui/src/imp/web.rs

@@ -6,15 +6,15 @@ use futures::{AsyncRead, AsyncWrite};
 use gloo_timers::future::TimeoutFuture;
 use js_sys::Float32Array;
 use mumble_protocol::control::ClientControlCodec;
-use mumble_web2_common::ClientConfig;
+use mumble_web2_common::{ProxyOverides, ServerStatus};
 use reqwest::Url;
+use std::future::Future;
 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::AudioContext;
 use web_sys::AudioContextOptions;
 use web_sys::AudioData;
 use web_sys::AudioDecoder;
@@ -29,14 +29,13 @@ 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;
 use web_sys::{console, window};
+use web_sys::{AudioContext, AudioDataCopyToOptions};
 
 pub use wasm_bindgen_futures::spawn_local as spawn;
 
@@ -77,12 +76,41 @@ pub struct AudioSystem {
     processors: AudioProcessorSender,
 }
 
+async fn attach_worklet(audio_context: &AudioContext) -> 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()?;
+
+    let module = asset!("assets/rust_audio_worklet.js").to_string();
+    info!("loading mic worklet from {module:?}");
+    audio_context
+        .audio_worklet()
+        .ey()?
+        .add_module_with_options(&module, &options)
+        .ey()?
+        .into_future()
+        .await
+        .ey()?;
+    Ok(())
+}
+
 impl AudioSystem {
-    pub fn new() -> Result<Self, Error> {
+    pub 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).await?;
+
         let processors = AudioProcessorSender::default();
+
         Ok(AudioSystem { webctx, processors })
     }
 
@@ -103,18 +131,10 @@ impl AudioSystem {
     }
 
     pub fn create_player(&mut self) -> Result<AudioPlayer, Error> {
-        let audio_stream_generator =
-            MediaStreamTrackGenerator::new(&MediaStreamTrackGeneratorInit::new("audio")).ey()?;
+        let sink_node = AudioWorkletNode::new(&self.webctx, "rust_speaker_worklet").ey()?;
 
-        // 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).ey()?;
-
-        // Create MediaStreamAudioSourceNode
-        let audio_source = self.webctx.create_media_stream_source(&media_stream).ey()?;
-        // Connect output of audio_source to audio_context (browser audio)
-        audio_source
+        // Connect worklet to destination
+        sink_node
             .connect_with_audio_node(&self.webctx.destination())
             .ey()?;
 
@@ -123,28 +143,31 @@ impl AudioSystem {
             error!("error decoding audio {:?}", e);
         }) as Box<dyn FnMut(JsValue)>);
 
-        // This knows what MediaStreamTrackGenerator to use as it closes around it
+        let sink_port = sink_node.port().ey()?;
+
         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.ey() {
-                        error!("write chunk ready error {:?}", e);
-                    }
-                    if let Err(e) = JsFuture::from(writer.write_with_chunk(&audio_data))
-                        .await
-                        .ey()
-                    {
-                        error!("write chunk error {:?}", e);
-                    };
-                    writer.release_lock();
-                });
-            }) {
-                error!("error writing audio data {:?}", e);
+            // 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(
@@ -208,7 +231,7 @@ fn process_audio(frame: &JsValue, processor: &mut AudioProcessor) {
     };
     let input = samples.to_vec();
     let mut output = Vec::with_capacity(input.len());
-    processor.process(&input, &mut output);
+    processor.process(&input, 1, &mut output);
     samples.copy_from(&output);
 }
 
@@ -233,25 +256,6 @@ async fn run_encoder_worklet(
         .map_err(|e| JsError::new(&format!("not a stream: {e:?}")))
         .ey()?;
 
-    let options = WorkletOptions::new();
-    Reflect::set(
-        &options,
-        &"processorOptions".into(),
-        &wasm_bindgen::module(),
-    )
-    .ey()?;
-
-    let module = asset!("assets/rust_mic_worklet.js").to_string();
-    info!("loading mic worklet from {module:?}");
-    audio_context
-        .audio_worklet()
-        .ey()?
-        .add_module_with_options(&module, &options)
-        .ey()?
-        .into_future()
-        .await
-        .ey()?;
-
     let source = audio_context.create_media_stream_source(&stream).ey()?;
     let worklet_node = AudioWorkletNode::new(audio_context, "rust_mic_worklet").ey()?;
 
@@ -283,7 +287,7 @@ async fn run_encoder_worklet(
     audio_encoder.configure(&encoder_config);
     info!("created audio encoder");
 
-    let mut current_processor = AudioProcessor::default();
+    let mut current_processor = AudioProcessor::new_plain();
     let onmessage: Closure<dyn FnMut(MessageEvent)> = Closure::new(move |event: MessageEvent| {
         if let Some(new_processor) = processors.take() {
             current_processor = new_processor;
@@ -325,7 +329,7 @@ pub async fn network_connect(
     address: String,
     username: String,
     event_rx: &mut UnboundedReceiver<Command>,
-    gui_config: &ClientConfig,
+    proxy_overides: &ProxyOverides,
 ) -> Result<(), Error> {
     info!("connecting");
 
@@ -338,7 +342,7 @@ pub async fn network_connect(
     )
     .ey()?;
 
-    if let Some(server_hash) = &gui_config.cert_hash {
+    if let Some(server_hash) = &proxy_overides.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()?;
     }
@@ -395,6 +399,10 @@ pub fn set_default_username(username: &str) -> Option<()> {
         .ok()
 }
 
+pub fn set_default_server(username: &str) -> Option<()> {
+    None
+}
+
 pub fn load_username() -> Option<String> {
     web_sys::window()
         .unwrap()
@@ -404,25 +412,40 @@ pub fn load_username() -> Option<String> {
         .ok()?
 }
 
-pub async fn load_config() -> color_eyre::Result<ClientConfig> {
+pub fn load_server_url() -> Option<String> {
+    None
+}
+
+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)?)
+}
+
+pub async fn load_proxy_overides() -> color_eyre::Result<ProxyOverides> {
     let config_url = match option_env!("MUMBLE_WEB2_GUI_CONFIG_URL") {
         Some(url) => Url::parse(url)?,
-        None => {
-            let window: web_sys::Window = web_sys::window().expect("no global `window` exists");
-            let location = window.location();
-            Url::parse(&location.href().ey()?)?.join("config")?
-        }
+        None => absolute_url("config")?,
     };
     info!("loading config from {}", config_url);
 
     let config = reqwest::get(config_url)
         .await?
-        .json::<ClientConfig>()
+        .json::<ProxyOverides>()
         .await?;
 
     Ok(config)
 }
 
+pub async fn get_status(client: &reqwest::Client) -> color_eyre::Result<ServerStatus> {
+    Ok(client
+        .get(absolute_url("status")?)
+        .send()
+        .await?
+        .json::<ServerStatus>()
+        .await?)
+}
+
 pub fn init_logging() {
     // copied from tracing_web example usage
 
@@ -444,3 +467,18 @@ pub fn init_logging() {
 
     info!("logging initiated");
 }
+
+pub struct SpawnHandle;
+
+impl SpawnHandle {
+    pub fn current() -> Self {
+        SpawnHandle
+    }
+
+    pub fn spawn<F>(&self, future: F)
+    where
+        F: Future<Output = ()> + 'static,
+    {
+        spawn(future);
+    }
+}

gui/src/lib.rs

@@ -20,7 +20,7 @@ use mumble_protocol::voice::VoicePacket;
 use mumble_protocol::voice::VoicePacketPayload;
 use mumble_protocol::Clientbound;
 use mumble_protocol::Serverbound;
-use mumble_web2_common::ClientConfig;
+use mumble_web2_common::ProxyOverides;
 use once_cell::sync::Lazy;
 use std::collections::hash_map::Entry;
 use std::collections::HashMap;
@@ -113,7 +113,7 @@ pub async fn network_loop<R: imp::ImpRead, W: imp::ImpWrite>(
         });
     }
 
-    let mut audio = imp::AudioSystem::new()?;
+    let mut audio = imp::AudioSystem::new().await?;
     {
         let send_chan = send_chan.clone();
         let mut sequence_num = 0;
@@ -289,7 +289,7 @@ fn accept_command(
             if denoise {
                 audio.set_processor(AudioProcessor::new_denoising());
             } else {
-                audio.set_processor(AudioProcessor::default());
+                audio.set_processor(AudioProcessor::new_plain());
             }
         }
     }

gui/src/main.rs

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

proxy/Cargo.toml

@@ -7,13 +7,13 @@ edition = "2021"
 color-eyre = "^0.6"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
-tokio = { version = "^1.37", features = ["full"] }
+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 }
-salvo = { version = "^0.74.2", features = [
+salvo = { version = "^0.84.2", features = [
   "quinn",
   "eyre",
   "rustls",

proxy/src/main.rs

@@ -1,10 +1,6 @@
 use color_eyre::eyre::{anyhow, bail, Context, Result};
-use color_eyre::owo_colors::OwoColorize;
-use mumble_web2_common::{ClientConfig, ServerStatus};
-use once_cell::sync::OnceCell;
+use mumble_web2_common::{ProxyOverides, ServerStatus};
 use rand::Rng;
-use rcgen::date_time_ymd;
-use rustls::server;
 use salvo::conn::rustls::{Keycert, RustlsConfig};
 use salvo::cors::{AllowOrigin, Cors};
 use salvo::logging::Logger;
@@ -38,7 +34,7 @@ fn default_cert_alt_names() -> Vec<String> {
 
 #[derive(Debug, Deserialize, Serialize)]
 struct Config {
-    public_url: Url,
+    proxy_url: Option<Url>,
     https_listen_address: SocketAddr,
     http_listen_address: Option<SocketAddr>,
     cert_path: Option<PathBuf>,
@@ -81,9 +77,11 @@ async fn main() -> Result<()> {
         .install_default()
         .map_err(|e| anyhow!("could not install crypto provider {e:?}"))?;
 
-    let mut client_config = ClientConfig {
-        proxy_url: Some(server_config.public_url.join("proxy")?.to_string()),
-        status_url: Some(server_config.public_url.join("status")?.to_string()),
+    let mut proxy_overides = ProxyOverides {
+        proxy_url: match &server_config.proxy_url {
+            Some(url) => Some(url.to_string()),
+            None => None,
+        },
         cert_hash: None,
         any_server: false,
     };
@@ -104,7 +102,7 @@ async fn main() -> Result<()> {
             let cert = cert_params.self_signed(&key_pair)?;
 
             let hash = hmac_sha256::Hash::hash(cert.der().as_ref());
-            client_config.cert_hash = Some(hash.into());
+            proxy_overides.cert_hash = Some(hash.into());
 
             (cert.pem().into(), key_pair.serialize_pem().into())
         }
@@ -125,13 +123,13 @@ async fn main() -> Result<()> {
     let rustls_config = RustlsConfig::new(Keycert::new().cert(cert.as_slice()).key(key.as_slice()));
 
     info!(
-        "client config:\n{}",
-        toml::to_string_pretty(&client_config)?
+        "proxy overides:\n{}",
+        toml::to_string_pretty(&proxy_overides)?
     );
 
     let config_craft = ConfigCraft {
         server_config: server_config.clone(),
-        client_config,
+        proxy_overides,
     };
 
     let status_craft = StatusCraft {
@@ -254,14 +252,14 @@ impl StatusCraft {
 #[derive(Clone)]
 pub struct ConfigCraft {
     server_config: Arc<Config>,
-    client_config: ClientConfig,
+    proxy_overides: ProxyOverides,
 }
 
 #[craft]
 impl ConfigCraft {
     #[craft(handler)]
-    async fn get_config(&self) -> Json<ClientConfig> {
-        Json(self.client_config.clone())
+    async fn get_config(&self) -> Json<ProxyOverides> {
+        Json(self.proxy_overides.clone())
     }
 
     #[craft(handler)]