Merge pull request #131 from ryanalexander/new-voice-interface

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<User> {
     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 && (
                     <foreignObject x="22" y="22" width="10" height="10">
                         <VoiceIndicator status={props.voice}>
-                            {props.voice === "muted" && (
+                            {props.voice === "deaf" && (
+                                <VolumeMute size={6} />
+                            ) ||props.voice === "muted" && (
                                 <MicrophoneOff size={6} />
                             )}
                         </VoiceIndicator>

src/lib/vortex/VoiceClient.ts

@@ -40,6 +40,8 @@ export default class VoiceClient extends EventEmitter<VoiceEvents> {
     sendTransport?: Transport;
     recvTransport?: Transport;
 
+    isDeaf?: boolean;
+
     userId?: string;
     roomId?: string;
     participants: Map<string, VoiceUser>;
@@ -54,6 +56,8 @@ export default class VoiceClient extends EventEmitter<VoiceEvents> {
         this.participants = new Map();
         this.consumers = new Map();
 
+        this.isDeaf = false;
+
         this.signaling.on(
             "data",
             (json) => {

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": {

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) => {
                 )}
             </div>
             <div className="actions">
-                <Button error onClick={voiceState.disconnect}>
+                <Tooltip content={"Leave call"} placement={"bottom"}>
-                    <Text id="app.main.channel.voice.leave" />
+                    <Button error onClick={voiceState.disconnect}>
-                </Button>
+                        <PhoneOff width={25} />
+                    </Button>
+                </Tooltip>
                 {voiceState.isProducing("audio") ? (
-                    <Button onClick={() => voiceState.stopProducing("audio")}>
+                        <Tooltip content={"Mute microphone"} placement={"bottom"}>
-                        <Text id="app.main.channel.voice.mute" />
+                            <Button onClick={() => voiceState.stopProducing("audio")}>
-                    </Button>
+                                <Microphone width={25} />
+                            </Button>
+                        </Tooltip>
                 ) : (
-                    <Button onClick={() => voiceState.startProducing("audio")}>
+                    <Tooltip content={"Unmute microphone"} placement={"bottom"}>
-                        <Text id="app.main.channel.voice.unmute" />
+                        <Button onClick={() => voiceState.startProducing("audio")}>
-                    </Button>
+                            <MicrophoneOff width={25} />
+                        </Button>
+                    </Tooltip>
                 )}
+                {voiceState.isDeaf() ? (
+                    <Tooltip content={"Deafen"} placement={"bottom"}>
+                        <Button onClick={() => voiceState.stopDeafen()}>
+                            <VolumeMute width={25} />
+                        </Button>
+                    </Tooltip>
+                ): (
+                    <Tooltip content={"Deafen"} placement={"bottom"}>
+                        <Button onClick={() => voiceState.startDeafen()}>
+                            <VolumeFull width={25} />
+                        </Button>
+                    </Tooltip>
+                )
+                }
             </div>
         </VoiceBase>
     );