chore: Release cnats version 0.2.4

Every video tile is built client-side via document.createElement, never
parsed from HTML - browsers only seed the live .muted property from the
muted attribute for parser-inserted elements, so the attribute alone
never actually silenced the local preview. Result: your own mic played
back through your own speakers even with no other peers in the call.
Now sets el.set_muted(true) directly whenever the preview's srcObject
is (re)assigned.

Cargo.lock

@@ -345,7 +345,7 @@ dependencies = [
 
 [[package]]
 name = "cnats"
-version = "0.2.2"
+version = "0.2.4"
 dependencies = [
  "anyhow",
  "async-nats",

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "cnats"
-version = "0.2.2"
+version = "0.2.4"
 edition = "2021"
 
 [lib]

aur/PKGBUILD

@@ -1,6 +1,6 @@
 # Maintainer: Bendik Aagaard Lynghaug <bendik.lynghaug@gmail.com>
 pkgname=cnats
-pkgver=0.2.2
+pkgver=0.2.4
 pkgrel=1
 pkgdesc="Web chat over NATS subjects with Kanidm SSO (Leptos SSR)"
 arch=('x86_64' 'aarch64')

src/app.rs

@@ -450,9 +450,19 @@ fn CallPanel(room: Memo<String>, me: String) -> impl IntoView {
 
         // Mirror the local MediaStream into the preview <video> element -
         // `srcObject` has no HTML attribute form, has to be set via JS.
+        //
+        // Also force `.muted` via the JS property here, not just the
+        // `muted` attribute on the element below: every video tile in this
+        // app is built client-side via `document.createElement` (never
+        // parsed from HTML), and browsers only seed the live `.muted`
+        // property from the `muted` *attribute* for parser-inserted
+        // elements. Without this, the local preview plays back the user's
+        // own mic through their speakers - audible as feedback in a
+        // solo call.
         Effect::new(move |_| {
             let stream = call_state.get_value().local_stream().get();
             if let Some(el) = local_video_ref.get() {
+                el.set_muted(true);
                 el.set_src_object(stream.as_ref());
             }
         });
@@ -495,10 +505,22 @@ fn CallPanel(room: Memo<String>, me: String) -> impl IntoView {
         }
             .into_any()
     }
+    // Must mirror the hydrate branch's default (not-in-call) markup exactly -
+    // hydration reconciles this SSR output against what the hydrate branch
+    // above expects to find, and an empty div here (vs. the button hydrate
+    // wants) is a hydration mismatch that panics and traps the whole wasm
+    // instance, killing all reactivity on the page.
     #[cfg(not(feature = "hydrate"))]
     {
         let _ = (room, me);
-        view! { <div class="call-panel"></div> }.into_any()
+        view! {
+            <div class="call-panel">
+                <button class="call-join" disabled=true>
+                    "☎ join call"
+                </button>
+            </div>
+        }
+            .into_any()
     }
 }