Show nickname / role colour in typing indicator.

Try to fix voice context.
This commit is contained in:
Paul 2021-07-27 11:45:45 +01:00
parent a8c3482815
commit 98f9672801
3 changed files with 32 additions and 22 deletions

View file

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

View file

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

View file

@ -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]);