mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-25 08:30:58 -05:00
Merge branch 'master' of github.com:3nt3/revite
This commit is contained in:
3nt3
commit
d78640ed48
4 changed files with 87 additions and 56 deletions
6
.vscode/extensions.json
vendored
6
.vscode/extensions.json
vendored
|
|
@ -1,3 +1,7 @@
|
|||
{
|
||||
"recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
|
||||
"recommendations": [
|
||||
"esbenp.prettier-vscode",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"kol.commit-lint"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,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<ChannelHeaderProps, "channel">) {
|
||||
if (
|
||||
channel.channel_type === "SavedMessages" ||
|
||||
channel.channel_type === "TextChannel"
|
||||
)
|
||||
return null;
|
||||
const VoiceActions = observer(
|
||||
({ channel }: Pick<ChannelHeaderProps, "channel">) => {
|
||||
if (
|
||||
channel.channel_type === "SavedMessages" ||
|
||||
channel.channel_type === "TextChannel"
|
||||
)
|
||||
return null;
|
||||
|
||||
if (voiceState.status >= VoiceStatus.READY) {
|
||||
if (voiceState.roomId === channel._id) {
|
||||
return (
|
||||
<IconButton onClick={voiceState.disconnect}>
|
||||
<PhoneOff size={22} />
|
||||
</IconButton>
|
||||
);
|
||||
}
|
||||
|
||||
if (voiceState.status >= VoiceStatus.READY) {
|
||||
if (voiceState.roomId === channel._id) {
|
||||
return (
|
||||
<IconButton onClick={voiceState.disconnect}>
|
||||
<PhoneOff size={22} />
|
||||
<IconButton
|
||||
onClick={async () => {
|
||||
await voiceState.loadVoice();
|
||||
voiceState.disconnect();
|
||||
voiceState.connect(channel);
|
||||
}}>
|
||||
<PhoneCall size={24} />
|
||||
</IconButton>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<IconButton
|
||||
onClick={async () => {
|
||||
await voiceState.loadVoice();
|
||||
voiceState.disconnect();
|
||||
voiceState.connect(channel);
|
||||
}}>
|
||||
<PhoneCall size={24} />
|
||||
<IconButton>
|
||||
<PhoneCall size={24} /** ! FIXME: TEMP */ color="red" />
|
||||
</IconButton>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<IconButton>
|
||||
<PhoneCall size={24} /** ! FIXME: TEMP */ color="red" />
|
||||
</IconButton>
|
||||
);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -134,14 +148,16 @@ export default observer(({ id }: Props) => {
|
|||
</Button>
|
||||
</Tooltip>
|
||||
{voiceState.isProducing("audio") ? (
|
||||
<Tooltip content={"Mute microphone"} placement={"bottom"}>
|
||||
<Button onClick={() => voiceState.stopProducing("audio")}>
|
||||
<Microphone width={25} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip content={"Mute microphone"} placement={"bottom"}>
|
||||
<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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue