diff --git a/shared/js/ConnectionHandler.ts b/shared/js/ConnectionHandler.ts index 32476252..b8882c0e 100644 --- a/shared/js/ConnectionHandler.ts +++ b/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(); } diff --git a/shared/js/ui/modal/echo-test/Controller.tsx b/shared/js/ui/modal/echo-test/Controller.tsx index 77a2ed0e..f457f480 100644 --- a/shared/js/ui/modal/echo-test/Controller.tsx +++ b/shared/js/ui/modal/echo-test/Controller.tsx @@ -134,6 +134,12 @@ function initializeController(connection: ConnectionHandler, events: Registry { + 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 { break; case "unsupported": - inner = Echo testing hasn't been supported by the - server.; + inner = + Echo testing hasn't been supported by the + server. + ; + break; + + case "muted": + if(state.microphone && state.speaker) { + inner = + Your speaker and microphone have been muted. +
+ +
; + } else if(state.microphone) { + inner = + Your microphone has been muted. +
+ +
; + } else { + inner = + Your speaker has been muted. +
+ +
; + } break; } diff --git a/shared/js/ui/react-elements/Button.scss b/shared/js/ui/react-elements/Button.scss index 8400aae9..eae65e51 100644 --- a/shared/js/ui/react-elements/Button.scss +++ b/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); } } diff --git a/shared/js/ui/react-elements/Button.tsx b/shared/js/ui/react-elements/Button.tsx index bb5531d0..a8068e83 100644 --- a/shared/js/ui/react-elements/Button.tsx +++ b/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 { 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}