From ccda5e8609a00cb3b270cdd85f6946e985094007 Mon Sep 17 00:00:00 2001 From: Ryan Alexander Date: Sun, 22 Aug 2021 12:22:44 +1000 Subject: [PATCH 1/5] Add deafen button --- src/components/common/user/UserIcon.tsx | 12 +++--- src/lib/vortex/VoiceClient.ts | 4 ++ src/lib/vortex/VoiceState.ts | 27 ++++++++++++ src/pages/channels/voice/VoiceHeader.tsx | 53 +++++++++++++++++++----- src/pages/settings/Settings.tsx | 6 +++ src/pages/settings/panes/Privacy.tsx | 36 ++++++++++++++++ src/pages/settings/server/Overview.tsx | 2 +- 7 files changed, 124 insertions(+), 16 deletions(-) create mode 100644 src/pages/settings/panes/Privacy.tsx diff --git a/src/components/common/user/UserIcon.tsx b/src/components/common/user/UserIcon.tsx index d79c2bbe..0c417afe 100644 --- a/src/components/common/user/UserIcon.tsx +++ b/src/components/common/user/UserIcon.tsx @@ -12,12 +12,12 @@ 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"; interface Props extends IconBaseProps { mask?: string; status?: boolean; - voice?: VoiceStatus; + voice?: string; showServerIdentity?: boolean; } @@ -33,7 +33,7 @@ export function useStatusColour(user?: User) { : theme["status-invisible"]; } -const VoiceIndicator = styled.div<{ status: VoiceStatus }>` +const VoiceIndicator = styled.div<{ status: string }>` width: 10px; height: 10px; border-radius: var(--border-radius-half); @@ -47,7 +47,7 @@ const VoiceIndicator = styled.div<{ status: VoiceStatus }>` } ${(props) => - props.status === "muted" && + (props.status === "muted" || props.status === "deaf") && css` background: var(--error); `} @@ -125,7 +125,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 0c32fc16..11fa5577 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() ? ( + + + + ): ( + + + + ) + }
); diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx index 315a782d..699d76a3 100644 --- a/src/pages/settings/Settings.tsx +++ b/src/pages/settings/Settings.tsx @@ -15,6 +15,7 @@ import { Flask, User, Megaphone, + Shield, } from "@styled-icons/boxicons-solid"; import { Route, Switch, useHistory } from "react-router-dom"; import { LIBRARY_VERSION } from "revolt.js"; @@ -76,6 +77,11 @@ export default function Settings() { icon: , title: , }, + { + id: "privacy", + icon: , + title: , + }, { id: "sessions", icon: , diff --git a/src/pages/settings/panes/Privacy.tsx b/src/pages/settings/panes/Privacy.tsx new file mode 100644 index 00000000..2486f822 --- /dev/null +++ b/src/pages/settings/panes/Privacy.tsx @@ -0,0 +1,36 @@ +import styles from "./Panes.module.scss"; +import { Text } from "preact-i18n"; + +import { dispatch } from "../../../redux"; +import { connectState } from "../../../redux/connector"; +import { SyncKeys, SyncOptions } from "../../../redux/reducers/sync"; + +import Checkbox from "../../../components/ui/Checkbox"; + +interface Props { + options?: SyncOptions; +} + +export function Component(props: Props) { + return ( +
+ + } + onChange={(enabled) => {console.log(enabled)}}> + + +
+ ); +} + +export const Sync = connectState(Component, (state) => { + return { + options: state.sync, + }; +}); diff --git a/src/pages/settings/server/Overview.tsx b/src/pages/settings/server/Overview.tsx index b72eb60f..c4b962a2 100644 --- a/src/pages/settings/server/Overview.tsx +++ b/src/pages/settings/server/Overview.tsx @@ -152,7 +152,7 @@ export const Overview = observer(({ server }: Props) => { {server.channels - .filter((x) => typeof x !== "undefined") + .filter((x) => (typeof x !== "undefined" && x.channel_type === "TextChannel")) .map((channel) => ( {server.channels - .filter((x) => (typeof x !== "undefined" && x.channel_type === "TextChannel")) + .filter((x) => typeof x !== "undefined") .map((channel) => (