cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-12 18:29:57 -05:00
Code Issues Projects Releases Packages Wiki Activity

Add deafen button

Browse source
This commit is contained in:
Ryan Alexander 2021-08-22 12:22:44 +10:00
parent db43c02e01
commit ccda5e8609
7 changed files with 124 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/common/user/UserIcon.tsx
View file

@ -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<User> {
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 && (
<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>

4
src/lib/vortex/VoiceClient.ts
View file

@ -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) => {

27
src/lib/vortex/VoiceState.ts
View file

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

53
src/pages/channels/voice/VoiceHeader.tsx
View file

@ -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}>
<Text id="app.main.channel.voice.leave" />
</Button>
<Tooltip content={"Leave call"} placement={"bottom"}>
<Button error onClick={voiceState.disconnect}>
<PhoneOff width={25} />
</Button>
</Tooltip>
{voiceState.isProducing("audio") ? (
<Button onClick={() => voiceState.stopProducing("audio")}>
<Text id="app.main.channel.voice.mute" />
</Button>
<Tooltip content={"Mute microphone"} placement={"bottom"}>
<Button onClick={() => voiceState.stopProducing("audio")}>
<Microphone width={25} />
</Button>
</Tooltip>
) : (
<Button onClick={() => voiceState.startProducing("audio")}>
<Text id="app.main.channel.voice.unmute" />
</Button>
<Tooltip content={"Unmute microphone"} placement={"bottom"}>
<Button onClick={() => voiceState.startProducing("audio")}>
<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>
);

6
src/pages/settings/Settings.tsx
View file

@ -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: <IdCard size={20} />,
title: <Text id="app.settings.pages.profile.title" />,
},
{
id: "privacy",
icon: <Shield size={20} />,
title: <Text id="app.settings.pages.profile.title" />,
},
{
id: "sessions",
icon: <CheckShield size={20} />,

36
src/pages/settings/panes/Privacy.tsx Normal file
View file

@ -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 (
<div className={styles.notifications}>
<Checkbox
key={"everyone_dm"}
checked={false}
description={
<Text
id={`app.settings.pages.privacy.allow_dms.d`}
/>
}
onChange={(enabled) => {console.log(enabled)}}>
<Text id="app.settings.pages.privacy.allow_dms.t" />
</Checkbox>
</div>
);
}
export const Sync = connectState(Component, (state) => {
return {
options: state.sync,
};
});

2
src/pages/settings/server/Overview.tsx
View file

@ -152,7 +152,7 @@ export const Overview = observer(({ server }: Props) => {
<Text id="general.disabled" />
</option>
{server.channels
.filter((x) => typeof x !== "undefined")
.filter((x) => (typeof x !== "undefined" && x.channel_type === "TextChannel"))
.map((channel) => (
<option key={channel!._id} value={channel!._id}>
{getChannelName(channel!, true)}