Fix(voice): Voice UI would not react to actions.

Feat(voice): Allow accessing user profile from voice UI.

Fixes #89. Fixes #91.

.vscode/extensions.json

@@ -1,3 +1,7 @@
 {
-    "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
+    "recommendations": [
+        "esbenp.prettier-vscode",
+        "dbaeumer.vscode-eslint",
+        "kol.commit-lint"
+    ]
 }

src/lib/vortex/VoiceState.ts

@@ -154,20 +154,25 @@ class VoiceStateReference {
 
     async startDeafen() {
         if (!this.client) return console.log("No client object"); // ! TODO: let the user know
+        if (this.client.isDeaf) return;
 
         this.client.isDeaf = true;
-
         this.client?.consumers.forEach((consumer) => {
             consumer.audio?.pause();
         });
+
+        this.syncState();
     }
     async stopDeafen() {
         if (!this.client) return console.log("No client object"); // ! TODO: let the user know
+        if (!this.client.isDeaf) return;
 
         this.client.isDeaf = false;
         this.client?.consumers.forEach((consumer) => {
             consumer.audio?.resume();
         });
+
+        this.syncState();
     }
 
     async startProducing(type: ProduceType) {
@@ -192,10 +197,14 @@ class VoiceStateReference {
                 );
             }
         }
+
+        this.syncState();
     }
 
-    stopProducing(type: ProduceType) {
-        this.client?.stopProduce(type);
+    async stopProducing(type: ProduceType) {
+        await this.client?.stopProduce(type);
+
+        this.syncState();
     }
 }
 

src/pages/channels/actions/HeaderActions.tsx

@@ -7,6 +7,7 @@ import {
     PhoneOff,
     Group,
 } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
 
 import { internalEmit } from "../../../lib/eventEmitter";
@@ -90,37 +91,39 @@ export default function HeaderActions({
     );
 }
 
-function VoiceActions({ channel }: Pick<ChannelHeaderProps, "channel">) {
-    if (
-        channel.channel_type === "SavedMessages" ||
-        channel.channel_type === "TextChannel"
-    )
-        return null;
+const VoiceActions = observer(
+    ({ channel }: Pick<ChannelHeaderProps, "channel">) => {
+        if (
+            channel.channel_type === "SavedMessages" ||
+            channel.channel_type === "TextChannel"
+        )
+            return null;
+
+        if (voiceState.status >= VoiceStatus.READY) {
+            if (voiceState.roomId === channel._id) {
+                return (
+                    <IconButton onClick={voiceState.disconnect}>
+                        <PhoneOff size={22} />
+                    </IconButton>
+                );
+            }
 
-    if (voiceState.status >= VoiceStatus.READY) {
-        if (voiceState.roomId === channel._id) {
             return (
-                <IconButton onClick={voiceState.disconnect}>
-                    <PhoneOff size={22} />
+                <IconButton
+                    onClick={async () => {
+                        await voiceState.loadVoice();
+                        voiceState.disconnect();
+                        voiceState.connect(channel);
+                    }}>
+                    <PhoneCall size={24} />
                 </IconButton>
             );
         }
 
         return (
-            <IconButton
-                onClick={async () => {
-                    await voiceState.loadVoice();
-                    voiceState.disconnect();
-                    voiceState.connect(channel);
-                }}>
-                <PhoneCall size={24} />
+            <IconButton>
+                <PhoneCall size={24} /** ! FIXME: TEMP */ color="red" />
             </IconButton>
         );
-    }
-
-    return (
-        <IconButton>
-            <PhoneCall size={24} /** ! FIXME: TEMP */ color="red" />
-        </IconButton>
-    );
-}
+    },
+);

src/pages/channels/voice/VoiceHeader.tsx

@@ -1,16 +1,4 @@
 import { BarChart } from "@styled-icons/boxicons-regular";
-import { observer } from "mobx-react-lite";
-import styled from "styled-components";
-
-import { Text } from "preact-i18n";
-import { useMemo } from "preact/hooks";
-
-import { voiceState, VoiceStatus } from "../../../lib/vortex/VoiceState";
-
-import { useClient } from "../../../context/revoltjs/RevoltClient";
-
-import UserIcon from "../../../components/common/user/UserIcon";
-import Button from "../../../components/ui/Button";
 import {
     Megaphone,
     Microphone,
@@ -18,11 +6,24 @@ import {
     PhoneOff,
     Speaker,
     VolumeFull,
-    VolumeMute
+    VolumeMute,
 } from "@styled-icons/boxicons-solid";
-import Tooltip from "../../../components/common/Tooltip";
-import {Hashnode, Speakerdeck, Teamspeak} from "@styled-icons/simple-icons";
+import { Hashnode, Speakerdeck, Teamspeak } from "@styled-icons/simple-icons";
+import { observer } from "mobx-react-lite";
+import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+import { useMemo } from "preact/hooks";
+
 import VoiceClient from "../../../lib/vortex/VoiceClient";
+import { voiceState, VoiceStatus } from "../../../lib/vortex/VoiceState";
+
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { useClient } from "../../../context/revoltjs/RevoltClient";
+
+import Tooltip from "../../../components/common/Tooltip";
+import UserIcon from "../../../components/common/user/UserIcon";
+import Button from "../../../components/ui/Button";
 
 interface Props {
     id: string;
@@ -59,11 +60,14 @@ const VoiceBase = styled.div`
     .participants {
         margin: 20px 0;
         justify-content: center;
-        pointer-events: none;
         user-select: none;
         display: flex;
         gap: 16px;
 
+        div:hover img {
+            opacity: 0.8;
+        }
+
         .disconnected {
             opacity: 0.5;
         }
@@ -79,6 +83,8 @@ const VoiceBase = styled.div`
 export default observer(({ id }: Props) => {
     if (voiceState.roomId !== id) return null;
 
+    const { openScreen } = useIntermediate();
+
     const client = useClient();
     const self = client.users.get(client.user!._id);
 
@@ -101,12 +107,20 @@ export default observer(({ id }: Props) => {
                                       target={user}
                                       status={false}
                                       voice={
-                                          client.user?._id === id && voiceState.isDeaf()?"deaf"
+                                          client.user?._id === id &&
+                                          voiceState.isDeaf()
+                                              ? "deaf"
                                               : voiceState.participants!.get(id)
-                                              ?.audio
+                                                    ?.audio
                                               ? undefined
                                               : "muted"
                                       }
+                                      onClick={() =>
+                                          openScreen({
+                                              id: "profile",
+                                              user_id: id,
+                                          })
+                                      }
                                   />
                               </div>
                           );
@@ -134,14 +148,16 @@ export default observer(({ id }: Props) => {
                     </Button>
                 </Tooltip>
                 {voiceState.isProducing("audio") ? (
-                        <Tooltip content={"Mute microphone"} placement={"bottom"}>
-                            <Button onClick={() => voiceState.stopProducing("audio")}>
-                                <Microphone width={25} />
-                            </Button>
-                        </Tooltip>
+                    <Tooltip content={"Mute microphone"} placement={"bottom"}>
+                        <Button
+                            onClick={() => voiceState.stopProducing("audio")}>
+                            <Microphone width={25} />
+                        </Button>
+                    </Tooltip>
                 ) : (
                     <Tooltip content={"Unmute microphone"} placement={"bottom"}>
-                        <Button onClick={() => voiceState.startProducing("audio")}>
+                        <Button
+                            onClick={() => voiceState.startProducing("audio")}>
                             <MicrophoneOff width={25} />
                         </Button>
                     </Tooltip>
@@ -152,14 +168,13 @@ export default observer(({ id }: Props) => {
                             <VolumeMute width={25} />
                         </Button>
                     </Tooltip>
-                ): (
+                ) : (
                     <Tooltip content={"Deafen"} placement={"bottom"}>
                         <Button onClick={() => voiceState.startDeafen()}>
                             <VolumeFull width={25} />
                         </Button>
                     </Tooltip>
-                )
-                }
+                )}
             </div>
         </VoiceBase>
     );