From 5cd88136c70dc3aae12778180b7f1c2c568a00fc Mon Sep 17 00:00:00 2001 From: metamuffin Date: Mon, 1 Apr 2024 15:03:08 +0200 Subject: more live regions and mute indicator --- client-web/source/index.ts | 3 +-- client-web/source/menu.ts | 2 +- client-web/source/resource/track.ts | 15 +++++++++------ client-web/source/room.ts | 2 +- client-web/source/user/mod.ts | 2 +- client-web/style/room.sass | 3 +++ 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 -- cgit v1.2.3-70-g09d2