Prompting the user to unmute himself if he's muted before doing the echo test

shared/js/ConnectionHandler.ts

@@ -1052,10 +1052,12 @@ export class ConnectionHandler {
     }
 
     /* state changing methods */
-    setMicrophoneMuted(muted: boolean) {
+    setMicrophoneMuted(muted: boolean, dontPlaySound?: boolean) {
         if(this.client_status.input_muted === muted) return;
         this.client_status.input_muted = muted;
-        this.sound.play(muted ? Sound.MICROPHONE_MUTED : Sound.MICROPHONE_ACTIVATED);
+        if(!dontPlaySound) {
+            this.sound.play(muted ? Sound.MICROPHONE_MUTED : Sound.MICROPHONE_ACTIVATED);
+        }
         this.update_voice_status();
         this.event_registry.fire("notify_state_updated", { state: "microphone" });
     }
@@ -1064,12 +1066,12 @@ export class ConnectionHandler {
     isMicrophoneMuted() { return this.client_status.input_muted; }
     isMicrophoneDisabled() { return this.inputHardwareState !== InputHardwareState.VALID; }
 
-    setSpeakerMuted(muted: boolean) {
+    setSpeakerMuted(muted: boolean, dontPlaySound?: boolean) {
         if(this.client_status.output_muted === muted) return;
-        if(muted) this.sound.play(Sound.SOUND_MUTED); /* play the sound *before* we're setting the muted state */
+        if(muted && !dontPlaySound) this.sound.play(Sound.SOUND_MUTED); /* play the sound *before* we're setting the muted state */
         this.client_status.output_muted = muted;
         this.event_registry.fire("notify_state_updated", { state: "speaker" });
-        if(!muted) this.sound.play(Sound.SOUND_ACTIVATED); /* play the sound *after* we're setting we've unmuted the sound */
+        if(!muted && !dontPlaySound) this.sound.play(Sound.SOUND_ACTIVATED); /* play the sound *after* we're setting we've unmuted the sound */
         this.update_voice_status();
         this.serverConnection.getVoiceConnection().stopAllVoiceReplays();
     }

shared/js/ui/modal/echo-test/Controller.tsx

@@ -134,6 +134,12 @@ function initializeController(connection: ConnectionHandler, events: Registry<Ec
         beginTest();
     });
 
+    events.on("action_unmute", () => {
+        connection.setSpeakerMuted(false, true);
+        connection.setMicrophoneMuted(false, true);
+        beginTest();
+    });
+
     const setTestState = (state: TestState) => {
         testState = state;
         events.fire("notify_test_state", {state: state});
@@ -146,6 +152,13 @@ function initializeController(connection: ConnectionHandler, events: Registry<Ec
         } else if (!connection.serverFeatures.supportsFeature(ServerFeature.WHISPER_ECHO)) {
             setTestState({state: "unsupported"});
             return;
+        } else if (connection.isSpeakerMuted() || connection.isMicrophoneMuted()) {
+            setTestState({
+                state: "muted",
+                speaker: connection.isSpeakerMuted(),
+                microphone: connection.isMicrophoneMuted()
+            });
+            return;
         }
 
         setTestState({state: "initializing"});

shared/js/ui/modal/echo-test/Definitions.ts

@@ -5,9 +5,11 @@ export type VoiceConnectionState =
     | "unsupported-client"
     | "unsupported-server"
     | "failed";
+
 export type TestState =
     { state: "initializing" | "running" | "stopped" | "microphone-invalid" | "unsupported" }
-    | { state: "start-failed", error: string };
+    | { state: "start-failed", error: string }
+    | { state: "muted", microphone: boolean, speaker: boolean };
 
 export interface EchoTestEvents {
     action_troubleshooting_finished: { status: "test-again" | "aborted" }
@@ -18,6 +20,7 @@ export interface EchoTestEvents {
     action_toggle_tests: { enabled: boolean },
     action_start_test: {},
     action_stop_test: {},
+    action_unmute: {},
 
     query_voice_connection_state: {},
     query_test_state: {},

shared/js/ui/modal/echo-test/Renderer.tsx

@@ -109,8 +109,38 @@ const TestStateOverlay = () => {
             break;
 
         case "unsupported":
-            inner = <a key={"initializing"}><Translatable>Echo testing hasn't been supported by the
+            inner = <a key={"initializing"}>
-                server.</Translatable></a>;
+                <Translatable>Echo testing hasn't been supported by the
+                server.</Translatable>
+            </a>;
+            break;
+
+        case "muted":
+            if(state.microphone && state.speaker) {
+                inner = <a key={"muted-microphone-speaker"}>
+                    <Translatable>Your speaker and microphone have been muted.</Translatable>
+                    <br/>
+                    <Button type={"small"} color={"green"} onClick={() => events.fire("action_unmute")} transparency={false}>
+                        <Translatable>Unmute speaker and microphone</Translatable>
+                    </Button>
+                </a>;
+            } else if(state.microphone) {
+                inner = <a key={"muted-microphone"}>
+                    <Translatable>Your microphone has been muted.</Translatable>
+                    <br/>
+                    <Button type={"small"} color={"green"} onClick={() => events.fire("action_unmute")} transparency={false}>
+                        <Translatable>Unmute microphone</Translatable>
+                    </Button>
+                </a>;
+            } else {
+                inner = <a key={"muted-speaker"}>
+                    <Translatable>Your speaker has been muted.</Translatable>
+                    <br/>
+                    <Button type={"small"} color={"green"} onClick={() => events.fire("action_unmute")} transparency={false}>
+                        <Translatable>Unmute speaker</Translatable>
+                    </Button>
+                </a>;
+            }
             break;
     }
 

shared/js/ui/react-elements/Button.scss

@@ -3,8 +3,13 @@
 
 html:root {
     --button-background: rgba(0, 0, 0, 0.5);
+    --button-background-solid: rgba(0, 0, 0, 1); /* TODO! */
+
     --button-hover-background: rgba(0, 0, 0, 0.7);
+    --button-hover-background-solid: #121212;
+
     --button-disabled-background: rgba(0, 0, 0, 0.27);
+    --button-disabled-background-solid: rgba(0, 0, 0, 1); /* TODO! */
 
     --button-color: #7c7c7c;
 
@@ -41,9 +46,17 @@ html:root {
     &:disabled {
         box-shadow: none;
         background-color: var(--button-disabled-background);
+    }
+
+    &.nonTransparent {
+        background-color: var(--button-background-solid);
 
         &:hover {
-            background-color: var(--button-disabled-background);
+            background-color: var(--button-hover-background-solid);
+        }
+
+        &:disabled {
+            background-color: var(--button-disabled-background-solid);
         }
     }
 

shared/js/ui/react-elements/Button.tsx

@@ -13,6 +13,7 @@ export interface ButtonProperties {
     disabled?: boolean;
 
     title?: string;
+    transparency?: boolean;
 }
 
 export interface ButtonState {
@@ -36,6 +37,7 @@ export class Button extends ReactComponentBase<ButtonProperties, ButtonState> {
                     cssStyle.button,
                     cssStyle["color-" + this.props.color] || cssStyle["color-default"],
                     cssStyle["type-" + this.props.type] || cssStyle["type-normal"],
+                    typeof this.props.transparency === "boolean" && !this.props.transparency ? cssStyle.nonTransparent : undefined,
                     this.props.className
                 )}
                 title={this.props.title}