mirror of
https://github.com/revoltchat/revite.git
synced 2024-12-26 23:42:11 -05:00
Show nickname / role colour in typing indicator.
Try to fix voice context.
This commit is contained in:
parent
a8c3482815
commit
98f9672801
3 changed files with 32 additions and 22 deletions
|
@ -4,12 +4,16 @@ import styled from "styled-components";
|
||||||
import { Text } from "preact-i18n";
|
import { Text } from "preact-i18n";
|
||||||
import { useContext } from "preact/hooks";
|
import { useContext } from "preact/hooks";
|
||||||
|
|
||||||
|
import { TextReact } from "../../../../lib/i18n";
|
||||||
|
|
||||||
import { connectState } from "../../../../redux/connector";
|
import { connectState } from "../../../../redux/connector";
|
||||||
import { TypingUser } from "../../../../redux/reducers/typing";
|
import { TypingUser } from "../../../../redux/reducers/typing";
|
||||||
|
|
||||||
import { AppContext } from "../../../../context/revoltjs/RevoltClient";
|
import { AppContext } from "../../../../context/revoltjs/RevoltClient";
|
||||||
import { useUsers } from "../../../../context/revoltjs/hooks";
|
import { useUsers } from "../../../../context/revoltjs/hooks";
|
||||||
|
|
||||||
|
import { Username } from "../../user/UserShort";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
typing?: TypingUser[];
|
typing?: TypingUser[];
|
||||||
}
|
}
|
||||||
|
@ -74,19 +78,21 @@ export function TypingIndicator({ typing }: Props) {
|
||||||
} else if (users.length > 1) {
|
} else if (users.length > 1) {
|
||||||
const usersCopy = [...users];
|
const usersCopy = [...users];
|
||||||
text = (
|
text = (
|
||||||
<Text
|
<TextReact
|
||||||
id="app.main.channel.typing.multiple"
|
id="app.main.channel.typing.multiple"
|
||||||
fields={{
|
fields={{
|
||||||
user: usersCopy.pop()?.username,
|
user: <Username user={usersCopy.pop()} />,
|
||||||
userlist: usersCopy.map((x) => x.username).join(", "),
|
userlist: usersCopy
|
||||||
|
.map((x) => <Username user={x} />)
|
||||||
|
.join(", "),
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
text = (
|
text = (
|
||||||
<Text
|
<TextReact
|
||||||
id="app.main.channel.typing.single"
|
id="app.main.channel.typing.single"
|
||||||
fields={{ user: users[0].username }}
|
fields={{ user: <Username user={users[0]} /> }}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,7 +18,7 @@ export function Username({
|
||||||
let username = user?.username;
|
let username = user?.username;
|
||||||
let color;
|
let color;
|
||||||
|
|
||||||
// ! this must be really bad for perf.
|
// ! FIXME: this must be really bad for perf.
|
||||||
if (user) {
|
if (user) {
|
||||||
let { server } = useParams<{ server?: string }>();
|
let { server } = useParams<{ server?: string }>();
|
||||||
if (server) {
|
if (server) {
|
||||||
|
|
|
@ -7,7 +7,6 @@ import type VoiceClient from "../lib/vortex/VoiceClient";
|
||||||
import { Children } from "../types/Preact";
|
import { Children } from "../types/Preact";
|
||||||
import { SoundContext } from "./Settings";
|
import { SoundContext } from "./Settings";
|
||||||
import { AppContext } from "./revoltjs/RevoltClient";
|
import { AppContext } from "./revoltjs/RevoltClient";
|
||||||
import { useForceUpdate } from "./revoltjs/hooks";
|
|
||||||
|
|
||||||
export enum VoiceStatus {
|
export enum VoiceStatus {
|
||||||
LOADING = 0,
|
LOADING = 0,
|
||||||
|
@ -160,7 +159,6 @@ export default function Voice({ children }: Props) {
|
||||||
};
|
};
|
||||||
}, [client]);
|
}, [client]);
|
||||||
|
|
||||||
const { forceUpdate } = useForceUpdate();
|
|
||||||
const playSound = useContext(SoundContext);
|
const playSound = useContext(SoundContext);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -170,30 +168,36 @@ export default function Voice({ children }: Props) {
|
||||||
// ! get rid of these force updates
|
// ! get rid of these force updates
|
||||||
// ! handle it through state or smth
|
// ! handle it through state or smth
|
||||||
|
|
||||||
client.on("startProduce", forceUpdate);
|
function stateUpdate() {
|
||||||
client.on("stopProduce", forceUpdate);
|
setStatus(state.status);
|
||||||
|
}
|
||||||
|
|
||||||
|
client.on("startProduce", stateUpdate);
|
||||||
|
client.on("stopProduce", stateUpdate);
|
||||||
|
|
||||||
client.on("userJoined", () => {
|
client.on("userJoined", () => {
|
||||||
playSound("call_join");
|
playSound("call_join");
|
||||||
forceUpdate();
|
stateUpdate();
|
||||||
});
|
});
|
||||||
client.on("userLeft", () => {
|
client.on("userLeft", () => {
|
||||||
playSound("call_leave");
|
playSound("call_leave");
|
||||||
forceUpdate();
|
stateUpdate();
|
||||||
});
|
});
|
||||||
client.on("userStartProduce", forceUpdate);
|
|
||||||
client.on("userStopProduce", forceUpdate);
|
client.on("userStartProduce", stateUpdate);
|
||||||
client.on("close", forceUpdate);
|
client.on("userStopProduce", stateUpdate);
|
||||||
|
|
||||||
|
client.on("close", stateUpdate);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
client.removeListener("startProduce", forceUpdate);
|
client.removeListener("startProduce", stateUpdate);
|
||||||
client.removeListener("stopProduce", forceUpdate);
|
client.removeListener("stopProduce", stateUpdate);
|
||||||
|
|
||||||
client.removeListener("userJoined", forceUpdate);
|
client.removeListener("userJoined", stateUpdate);
|
||||||
client.removeListener("userLeft", forceUpdate);
|
client.removeListener("userLeft", stateUpdate);
|
||||||
client.removeListener("userStartProduce", forceUpdate);
|
client.removeListener("userStartProduce", stateUpdate);
|
||||||
client.removeListener("userStopProduce", forceUpdate);
|
client.removeListener("userStopProduce", stateUpdate);
|
||||||
client.removeListener("close", forceUpdate);
|
client.removeListener("close", stateUpdate);
|
||||||
};
|
};
|
||||||
}, [client, state]);
|
}, [client, state]);
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue