diff --git a/src/components/common/user/UserIcon.tsx b/src/components/common/user/UserIcon.tsx index d79c2bbe..81fd852a 100644 --- a/src/components/common/user/UserIcon.tsx +++ b/src/components/common/user/UserIcon.tsx @@ -12,8 +12,9 @@ import { AppContext, useClient } from "../../../context/revoltjs/RevoltClient"; import IconBase, { IconBaseProps } from "../IconBase"; import fallback from "../assets/user.png"; +import {VolumeMute} from "@styled-icons/boxicons-solid"; -type VoiceStatus = "muted"; +type VoiceStatus = "muted" | "deaf"; interface Props extends IconBaseProps { mask?: string; status?: boolean; @@ -47,7 +48,7 @@ const VoiceIndicator = styled.div<{ status: VoiceStatus }>` } ${(props) => - props.status === "muted" && + (props.status === "muted" || props.status === "deaf") && css` background: var(--error); `} @@ -125,7 +126,9 @@ export default observer( {props.voice && ( - {props.voice === "muted" && ( + {props.voice === "deaf" && ( + + ) ||props.voice === "muted" && ( )} diff --git a/src/lib/vortex/VoiceClient.ts b/src/lib/vortex/VoiceClient.ts index 8a8bab28..507f1f1e 100644 --- a/src/lib/vortex/VoiceClient.ts +++ b/src/lib/vortex/VoiceClient.ts @@ -40,6 +40,8 @@ export default class VoiceClient extends EventEmitter { sendTransport?: Transport; recvTransport?: Transport; + isDeaf?: boolean; + userId?: string; roomId?: string; participants: Map; @@ -54,6 +56,8 @@ export default class VoiceClient extends EventEmitter { this.participants = new Map(); this.consumers = new Map(); + this.isDeaf = false; + this.signaling.on( "data", (json) => { diff --git a/src/lib/vortex/VoiceState.ts b/src/lib/vortex/VoiceState.ts index 7c9287fb..9ce9efdd 100644 --- a/src/lib/vortex/VoiceState.ts +++ b/src/lib/vortex/VoiceState.ts @@ -143,6 +143,33 @@ class VoiceStateReference { } } + isDeaf() { + if(!this.client) + return false; + + return this.client.isDeaf; + } + + async startDeafen() { + if(!this.client) + return console.log("No client object"); // ! TODO: let the user know + + this.client.isDeaf = true; + + this.client?.consumers.forEach(consumer => { + consumer.audio?.pause(); + }) + } + async stopDeafen() { + if(!this.client) + return console.log("No client object"); // ! TODO: let the user know + + this.client.isDeaf = false; + this.client?.consumers.forEach(consumer => { + consumer.audio?.resume(); + }) + } + async startProducing(type: ProduceType) { switch (type) { case "audio": { diff --git a/src/pages/channels/voice/VoiceHeader.tsx b/src/pages/channels/voice/VoiceHeader.tsx index 2b310eef..4683635c 100644 --- a/src/pages/channels/voice/VoiceHeader.tsx +++ b/src/pages/channels/voice/VoiceHeader.tsx @@ -11,6 +11,18 @@ import { useClient } from "../../../context/revoltjs/RevoltClient"; import UserIcon from "../../../components/common/user/UserIcon"; import Button from "../../../components/ui/Button"; +import { + Megaphone, + Microphone, + MicrophoneOff, + PhoneOff, + Speaker, + VolumeFull, + VolumeMute +} from "@styled-icons/boxicons-solid"; +import Tooltip from "../../../components/common/Tooltip"; +import {Hashnode, Speakerdeck, Teamspeak} from "@styled-icons/simple-icons"; +import VoiceClient from "../../../lib/vortex/VoiceClient"; interface Props { id: string; @@ -89,7 +101,8 @@ export default observer(({ id }: Props) => { target={user} status={false} voice={ - voiceState.participants!.get(id) + client.user?._id === id && voiceState.isDeaf()?"deaf" + : voiceState.participants!.get(id) ?.audio ? undefined : "muted" @@ -115,18 +128,38 @@ export default observer(({ id }: Props) => { )}
- + + + {voiceState.isProducing("audio") ? ( - + + + ) : ( - + + + )} + {voiceState.isDeaf() ? ( + + + + ): ( + + + + ) + }
);