3 files changed, 25 insertions, 6 deletions

diff --git a/client-web/public/assets/style/master.css b/client-web/public/assets/style/master.css
index c030f63..7a59d78 100644
--- a/client-web/public/assets/style/master.css
+++ b/client-web/public/assets/style/master.css
@@ -46,20 +46,24 @@ button {
     border: 0px solid transparent;
     border-radius: 3px;
 }
+
 input[type="button"]:hover,
 button:hover {
     filter: brightness(130%);
 }
+
 input[type="button"].active,
 button.active {
     filter: hue-rotate(20deg);
 }
+
 input[type="text"],
 select,
 input[type="number"] {
     background-color: var(--bg-dark);
     border: 1px solid var(--ac-light);
 }
+
 input:disabled,
 button:disabled {
     filter: sepia(90%);
@@ -71,15 +75,18 @@ button:disabled {
     left: 50vw;
     transform: translate(-50%, -50%);
 }
+
 .start-box p {
     margin-bottom: 0.5em;
 }
+
 .start-box input[type="text"] {
     margin: 0.5em;
     font-size: xx-large;
 }
+
 .start-box input[type="button"] {
     margin: 0.5em;
     font-size: x-large;
     width: calc(100% - 1em);
-}
+}
\ No newline at end of file
diff --git a/client-web/public/assets/style/room.css b/client-web/public/assets/style/room.css
index 928ab4e..ad84325 100644
--- a/client-web/public/assets/style/room.css
+++ b/client-web/public/assets/style/room.css
@@ -71,5 +71,5 @@
 }
 
 .resource-track>div.audio-active {
-    border: 2px solid rgb(37, 228, 37);
+    border: 2px solid var(--ac-light);
 }
diff --git a/client-web/source/resource/track.ts b/client-web/source/resource/track.ts
index 58157cf..22af16f 100644
--- a/client-web/source/resource/track.ts
+++ b/client-web/source/resource/track.ts
@@ -5,7 +5,7 @@
 */
 /// <reference lib="dom" />
 import { ProvideInfo } from "../../../common/packets.d.ts";
-import { ebutton, ediv } from "../helper.ts";
+import { ebutton, ediv, elabel } from "../helper.ts";
 import { log } from "../logger.ts";
 import { on_pref_changed, PREFS } from "../preferences/mod.ts";
 import { get_rnnoise_node } from "../rnnoise.ts";
@@ -48,11 +48,12 @@ export const resource_track: ResourceHandlerDecl = {
     }
 }
 
-export function new_local_track(info: ProvideInfo, track: TrackHandle): LocalResource {
+export function new_local_track(info: ProvideInfo, track: TrackHandle, ...extra_controls: HTMLElement[]): LocalResource {
     return {
         info,
         el: ediv({},
-            create_track_display(track)
+            create_track_display(track),
+            ...extra_controls
         ),
         destroy() { track.end() },
         on_request(_user, _create_channel) {
@@ -172,5 +173,16 @@ export async function create_mic_res() {
         clear_gain_cb()
         destination.disconnect()
     })
-    return new_local_track({ id: t.id, kind: "track", track_kind: "audio", label: "Microphone" }, t)
+
+    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 = elabel("Mute", { class: "check-button" })
+    mute_label.prepend(mute)
+
+    return new_local_track({ id: t.id, kind: "track", track_kind: "audio", label: "Microphone" }, t, mute_label)
 }