more live regions and mute indicator

6 files changed, 16 insertions, 11 deletions

diff --git a/client-web/source/index.ts b/client-web/source/index.ts
index 029ffc4..237db60 100644
--- a/client-web/source/index.ts
+++ b/client-web/source/index.ts
@@ -78,7 +78,6 @@ export async function main() {
     if (!globalThis.navigator.serviceWorker) log({ scope: "*", warn: true }, "Your browser does not support the Service Worker API, forced automatic updates are unavoidable.")
     if (PREFS.warn_redirect) log({ scope: "crypto", warn: true }, "You were redirected from the old URL format. The server knows the room secret now - E2EE is insecure!")
 
-
     const sud = e("div", { class: "side-ui" })
     const state: AppState = {
         chat: new Chat(),
@@ -109,7 +108,7 @@ export async function main() {
     globalThis.onbeforeunload = ev => {
         if (state.room && state.room.local_user.resources.size != 0 && PREFS.enable_onbeforeunload) {
             ev.preventDefault()
-            return ev.returnValue = "You have local resources shared. Really quit?"
+            return "You have local resources shared. Really quit?"
         }
     }
 
diff --git a/client-web/source/menu.ts b/client-web/source/menu.ts
index 7554053..5cd9e7a 100644
--- a/client-web/source/menu.ts
+++ b/client-web/source/menu.ts
@@ -41,7 +41,7 @@ export function control_bar(state: AppState, side_ui_container: HTMLElement): HT
     const chat = side_ui(side_ui_container, state.chat.element, "chat", "Chat", state.chat)
     const prefs = side_ui(side_ui_container, ui_preferences(), "settings", "Settings")
     const rwatches = side_ui(side_ui_container, ui_room_watches(state.conn), "room", "Known Rooms")
-    const local_controls = [ //ediv({ class: "local-controls", aria_label: "local resources" },
+    const local_controls = [
         e("button", { icon: "microphone", onclick: () => state.room?.local_user.await_add_resource(create_mic_res()) }, "Microphone"),
         e("button", { icon: "camera", onclick: () => state.room?.local_user.await_add_resource(create_camera_res()) }, "Camera"),
         e("button", { icon: "screen", onclick: () => state.room?.local_user.await_add_resource(create_screencast_res()) }, "Screen"),
diff --git a/client-web/source/resource/track.ts b/client-web/source/resource/track.ts
index 05b0588..9ba650a 100644
--- a/client-web/source/resource/track.ts
+++ b/client-web/source/resource/track.ts
@@ -180,13 +180,16 @@ export async function create_mic_res() {
 
     const mute = document.createElement("input")
     mute.type = "checkbox"
-    mute.onchange = () => {
-        log("media", mute.checked ? "muted" : "unmuted")
-        if (mute.checked) gain.gain.value = Number.MIN_VALUE
-        else gain.gain.value = PREFS.microphone_gain
-    }
+
     const mute_label = e("label", { class: "check-button" }, "Mute")
     mute_label.prepend(mute)
 
-    return new_local_track({ id: t.id, kind: "track", track_kind: "audio", label: "Microphone" }, t, mute_label)
+    const res = new_local_track({ id: t.id, kind: "track", track_kind: "audio", label: "Microphone" }, t, mute_label)
+    mute.onchange = () => {
+        log("media", mute.checked ? "muted" : "unmuted")
+        gain.gain.value = mute.checked ? Number.MIN_VALUE : PREFS.microphone_gain
+        if (mute.checked) res.el.classList.add("audio-mute")
+        else res.el.classList.remove("audio-mute")
+    }
+    return res
 }
diff --git a/client-web/source/room.ts b/client-web/source/room.ts
index 53b8740..2192bb9 100644
--- a/client-web/source/room.ts
+++ b/client-web/source/room.ts
@@ -22,7 +22,7 @@ export class Room {
     public destroy: () => void
 
     constructor(public signaling: SignalingConnection, public chat: Chat, public rtc_config: RTCConfiguration) {
-        this.element = e("div", { class: "room", aria_label: "user list" })
+        this.element = e("div", { class: "room", aria_label: "user list", aria_live: "polite" })
         const h1 = ([a, b]: [number, RelayMessage]) => this.relay_handler(a, b);
         const h2 = (p: ClientboundPacket) => this.control_handler(p)
         signaling.relay_handler.add_listener(h1)
diff --git a/client-web/source/user/mod.ts b/client-web/source/user/mod.ts
index 7c6c212..37eba73 100644
--- a/client-web/source/user/mod.ts
+++ b/client-web/source/user/mod.ts
@@ -17,7 +17,7 @@ export class User {
     name_el = e("span", {}, this.display_name)
     status_el = e("span", { class: ["connection-status", "status-neutral"] }, "")
     stats_el = e("pre", {})
-    el = e("div", { class: "user", role: "group", aria_label: `unknown user` })
+    el = e("div", { class: "user", role: "group", aria_label: `unknown user`, aria_live: "polite" })
 
     constructor(public room: Room, public id: number) {
         const info_el = e("div", { class: "info" })
diff --git a/client-web/style/room.sass b/client-web/style/room.sass
index 45517ff..efb968b 100644
--- a/client-web/style/room.sass
+++ b/client-web/style/room.sass
@@ -66,6 +66,9 @@
 .resource-track.audio-active
     border: 2px solid var(--ac-light)
 
+.resource-track.audio-mute
+    border: 2px solid rgb(255, 86, 86)
+
 .connection-status
     font-size: small
 .status-neutral