From 195a9bda353fdbef98705d7a67001d5cae8202a4 Mon Sep 17 00:00:00 2001 From: Paul Date: Wed, 20 Oct 2021 22:39:26 +0100 Subject: [PATCH] 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 | 6 +- src/lib/vortex/VoiceState.ts | 15 ++++- src/pages/channels/actions/HeaderActions.tsx | 53 ++++++++------- src/pages/channels/voice/VoiceHeader.tsx | 69 ++++++++++++-------- 4 files changed, 87 insertions(+), 56 deletions(-) diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 00500d00..f664cdbe 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,3 +1,7 @@ { - "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"] + "recommendations": [ + "esbenp.prettier-vscode", + "dbaeumer.vscode-eslint", + "kol.commit-lint" + ] } diff --git a/src/lib/vortex/VoiceState.ts b/src/lib/vortex/VoiceState.ts index 54d143c3..c0f4c0a5 100644 --- a/src/lib/vortex/VoiceState.ts +++ b/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(); } } diff --git a/src/pages/channels/actions/HeaderActions.tsx b/src/pages/channels/actions/HeaderActions.tsx index ef3ba03c..514a1b2e 100644 --- a/src/pages/channels/actions/HeaderActions.tsx +++ b/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) { - if ( - channel.channel_type === "SavedMessages" || - channel.channel_type === "TextChannel" - ) - return null; +const VoiceActions = observer( + ({ channel }: Pick) => { + if ( + channel.channel_type === "SavedMessages" || + channel.channel_type === "TextChannel" + ) + return null; + + if (voiceState.status >= VoiceStatus.READY) { + if (voiceState.roomId === channel._id) { + return ( + + + + ); + } - if (voiceState.status >= VoiceStatus.READY) { - if (voiceState.roomId === channel._id) { return ( - - + { + await voiceState.loadVoice(); + voiceState.disconnect(); + voiceState.connect(channel); + }}> + ); } return ( - { - await voiceState.loadVoice(); - voiceState.disconnect(); - voiceState.connect(channel); - }}> - + + ); - } - - return ( - - - - ); -} + }, +); diff --git a/src/pages/channels/voice/VoiceHeader.tsx b/src/pages/channels/voice/VoiceHeader.tsx index 4683635c..84ad85e6 100644 --- a/src/pages/channels/voice/VoiceHeader.tsx +++ b/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, + }) + } /> ); @@ -134,14 +148,16 @@ export default observer(({ id }: Props) => { {voiceState.isProducing("audio") ? ( - - - + + + ) : ( - @@ -152,14 +168,13 @@ export default observer(({ id }: Props) => { - ): ( + ) : ( - ) - } + )} );