cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-21 22:50:59 -05:00
Code Issues Projects Releases Packages Wiki Activity

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

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

Fixes #89. Fixes #91.
This commit is contained in:
Paul 2021-10-20 22:39:26 +01:00
parent d6169f3c3a
commit 195a9bda35
4 changed files with 87 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.vscode/extensions.json vendored
View file

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

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

@ -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();
}
}

7
src/pages/channels/actions/HeaderActions.tsx
View file

@ -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,7 +91,8 @@ export default function HeaderActions({
);
}
function VoiceActions({ channel }: Pick<ChannelHeaderProps, "channel">) {
const VoiceActions = observer(
({ channel }: Pick<ChannelHeaderProps, "channel">) => {
if (
channel.channel_type === "SavedMessages" ||
channel.channel_type === "TextChannel"
@ -123,4 +125,5 @@ function VoiceActions({ channel }: Pick<ChannelHeaderProps, "channel">) {
<PhoneCall size={24} /** ! FIXME: TEMP */ color="red" />
</IconButton>
);
}
},
);

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

@ -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
? undefined
: "muted"
}
onClick={() =>
openScreen({
id: "profile",
user_id: id,
})
}
/>
</div>
);
@ -135,13 +149,15 @@ export default observer(({ id }: Props) => {
</Tooltip>
{voiceState.isProducing("audio") ? (
<Tooltip content={"Mute microphone"} placement={"bottom"}>
<Button onClick={() => voiceState.stopProducing("audio")}>
<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>
);