mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-09 16:53:36 -05:00
Add deafen button
This commit is contained in:
parent
db43c02e01
commit
ccda5e8609
7 changed files with 124 additions and 16 deletions
|
@ -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>
|
||||
|
|
|
@ -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) => {
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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
36
src/pages/settings/panes/Privacy.tsx
Normal 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,
|
||||
};
|
||||
});
|
|
@ -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)}
|
||||
|
|
Loading…
Reference in a new issue