Add vortex / voice client.

src/context/Locale.tsx

@@ -1,4 +1,5 @@
 import { IntlProvider } from "preact-i18n";
+import defaultsDeep from "lodash.defaultsdeep";
 import { connectState } from "../redux/connector";
 import { useEffect, useState } from "preact/hooks";
 import definition from "../../external/lang/en.json";
@@ -148,7 +149,7 @@ function Locale({ children, locale }: Props) {
                 }
 
                 dayjs.locale(dayjs_locale.default);
-                setDefinition(defn);
+                setDefinition(defaultsDeep(defn, definition));
             }
         );
     }, [locale, lang]);

src/context/Voice.tsx

@@ -0,0 +1,184 @@
+import { createContext } from "preact";
+import { Children } from "../types/Preact";
+import VoiceClient from "../lib/vortex/VoiceClient";
+import { AppContext } from "./revoltjs/RevoltClient";
+import { ProduceType, VoiceUser } from "../lib/vortex/Types";
+import { useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
+
+export enum VoiceStatus {
+    LOADING = 0,
+    UNAVAILABLE,
+    ERRORED,
+    READY = 3,
+    CONNECTING = 4,
+    AUTHENTICATING,
+    RTC_CONNECTING,
+    CONNECTED
+    // RECONNECTING
+}
+
+export interface VoiceOperations {
+    connect: (channelId: string) => Promise<void>;
+    disconnect: () => void;
+    isProducing: (type: ProduceType) => boolean;
+    startProducing: (type: ProduceType) => Promise<void>;
+    stopProducing: (type: ProduceType) => Promise<void>;
+}
+
+export interface VoiceState {
+    roomId?: string;
+    status: VoiceStatus;
+    participants?: Readonly<Map<string, VoiceUser>>;
+}
+
+export interface VoiceOperations {
+    connect: (channelId: string) => Promise<void>;
+    disconnect: () => void;
+    isProducing: (type: ProduceType) => boolean;
+    startProducing: (type: ProduceType) => Promise<void>;
+    stopProducing: (type: ProduceType) => Promise<void>;
+}
+
+export const VoiceContext = createContext<VoiceState>(undefined as any);
+export const VoiceOperationsContext = createContext<VoiceOperations>(undefined as any);
+
+type Props = {
+    children: Children;
+};
+
+export default function Voice({ children }: Props) {
+    const revoltClient = useContext(AppContext);
+    const [client,] = useState(new VoiceClient());
+    const [state, setState] = useState<VoiceState>({
+        status: VoiceStatus.LOADING,
+        participants: new Map()
+    });
+
+    function setStatus(status: VoiceStatus, roomId?: string) {
+        setState({
+            status,
+            roomId: roomId ?? client.roomId,
+            participants: client.participants ?? new Map(),
+        });
+    }
+
+    useEffect(() => {
+        if (!client.supported()) {
+            setStatus(VoiceStatus.UNAVAILABLE);
+        } else {
+            setStatus(VoiceStatus.READY);
+        }
+    }, []);
+
+    const isConnecting = useRef(false);
+    const operations: VoiceOperations = useMemo(() => {
+        return {
+            connect: async channelId => {
+                if (!client.supported())
+                    throw new Error("RTC is unavailable");
+                
+                isConnecting.current = true;
+                setStatus(VoiceStatus.CONNECTING, channelId);
+
+                try {
+                    const call = await revoltClient.channels.joinCall(
+                        channelId
+                    );
+
+                    if (!isConnecting.current) {
+                        setStatus(VoiceStatus.READY);
+                        return;
+                    }
+
+                    // ! FIXME: use configuration to check if voso is enabled
+                    //await client.connect("wss://voso.revolt.chat/ws");
+                    await client.connect("wss://voso.revolt.chat/ws", channelId);
+
+                    setStatus(VoiceStatus.AUTHENTICATING);
+
+                    await client.authenticate(call.token);
+                    setStatus(VoiceStatus.RTC_CONNECTING);
+
+                    await client.initializeTransports();
+                } catch (error) {
+                    console.error(error);
+                    setStatus(VoiceStatus.READY);
+                }
+
+                setStatus(VoiceStatus.CONNECTED);
+                isConnecting.current = false;
+            },
+            disconnect: () => {
+                if (!client.supported())
+                    throw new Error("RTC is unavailable");
+            
+                // if (status <= VoiceStatus.READY) return;
+                // this will not update in this context
+
+                isConnecting.current = false;
+                client.disconnect();
+                setStatus(VoiceStatus.READY);
+            },
+            isProducing: (type: ProduceType) => {
+                switch (type) {
+                    case "audio":
+                        return client.audioProducer !== undefined;
+                }
+            },
+            startProducing: async (type: ProduceType) => {
+                switch (type) {
+                    case "audio": {
+                        if (client.audioProducer !== undefined) return;
+                        if (navigator.mediaDevices === undefined) return;
+                        const mediaStream = await navigator.mediaDevices.getUserMedia(
+                            {
+                                audio: true
+                            }
+                        );
+
+                        await client.startProduce(
+                            mediaStream.getAudioTracks()[0],
+                            "audio"
+                        );
+                        return;
+                    }
+                }
+            },
+            stopProducing: (type: ProduceType) => {
+                return client.stopProduce(type);
+            }
+        }
+    }, [ client ]);
+
+    useEffect(() => {
+        if (!client.supported()) return;
+
+        /* client.on("startProduce", forceUpdate);
+        client.on("stopProduce", forceUpdate);
+
+        client.on("userJoined", forceUpdate);
+        client.on("userLeft", forceUpdate);
+        client.on("userStartProduce", forceUpdate);
+        client.on("userStopProduce", forceUpdate);
+        client.on("close", forceUpdate); */
+
+        return () => {
+            /* client.removeListener("startProduce", forceUpdate);
+            client.removeListener("stopProduce", forceUpdate);
+
+            client.removeListener("userJoined", forceUpdate);
+            client.removeListener("userLeft", forceUpdate);
+            client.removeListener("userStartProduce", forceUpdate);
+            client.removeListener("userStopProduce", forceUpdate);
+            client.removeListener("close", forceUpdate); */
+        };
+    }, [ client, state ]);
+
+    return (
+        <VoiceContext.Provider value={state}>
+            <VoiceOperationsContext.Provider value={operations}>
+                { children }
+            </VoiceOperationsContext.Provider>
+        </VoiceContext.Provider>
+    );
+}

src/context/index.tsx

@@ -1,24 +1,27 @@
 import State from "../redux/State";
 import { Children } from "../types/Preact";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter as Router } from "react-router-dom";
 
 import Intermediate from './intermediate/Intermediate';
-import ClientContext from './revoltjs/RevoltClient';
+import Client from './revoltjs/RevoltClient';
+import Voice from "./Voice";
 import Locale from "./Locale";
 import Theme from "./Theme";
 
 export default function Context({ children }: { children: Children }) {
     return (
-        <BrowserRouter>
+        <Router>
             <State>
                 <Locale>
                     <Intermediate>
-                        <ClientContext>
-                            <Theme>{children}</Theme>
-                        </ClientContext>
+                        <Client>
+                            <Voice>
+                                <Theme>{children}</Theme>
+                            </Voice>
+                        </Client>
                     </Intermediate>
                 </Locale>
             </State>
-        </BrowserRouter>
+        </Router>
     );
 }

src/context/revoltjs/RevoltClient.tsx

@@ -38,11 +38,10 @@ export const OperationsContext = createContext<ClientOperations>(undefined as an
 
 type Props = WithDispatcher & {
     auth: AuthState;
-    sync: SyncOptions;
     children: Children;
 };
 
-function Context({ auth, sync, children, dispatcher }: Props) {
+function Context({ auth, children, dispatcher }: Props) {
     const { openScreen } = useIntermediate();
     const [status, setStatus] = useState(ClientStatus.INIT);
     const [client, setClient] = useState<Client>(undefined as unknown as Client);

src/lib/vortex/Signaling.ts

@@ -0,0 +1,188 @@
+import EventEmitter from "eventemitter3";
+import {
+    RtpCapabilities,
+    RtpParameters
+} from "mediasoup-client/lib/RtpParameters";
+import { DtlsParameters } from "mediasoup-client/lib/Transport";
+
+import {
+    AuthenticationResult,
+    Room,
+    TransportInitDataTuple,
+    WSCommandType,
+    WSErrorCode,
+    ProduceType,
+    ConsumerData
+} from "./Types";
+
+interface SignalingEvents {
+    open: (event: Event) => void;
+    close: (event: CloseEvent) => void;
+    error: (event: Event) => void;
+    data: (data: any) => void;
+}
+
+export default class Signaling extends EventEmitter<SignalingEvents> {
+    ws?: WebSocket;
+    index: number;
+    pending: Map<number, (data: unknown) => void>;
+
+    constructor() {
+        super();
+        this.index = 0;
+        this.pending = new Map();
+    }
+
+    connected(): boolean {
+        return (
+            this.ws !== undefined &&
+            this.ws.readyState !== WebSocket.CLOSING &&
+            this.ws.readyState !== WebSocket.CLOSED
+        );
+    }
+
+    connect(address: string): Promise<void> {
+        this.disconnect();
+        this.ws = new WebSocket(address);
+        this.ws.onopen = e => this.emit("open", e);
+        this.ws.onclose = e => this.emit("close", e);
+        this.ws.onerror = e => this.emit("error", e);
+        this.ws.onmessage = e => this.parseData(e);
+
+        let finished = false;
+        return new Promise((resolve, reject) => {
+            this.once("open", () => {
+                if (finished) return;
+                finished = true;
+                resolve();
+            });
+
+            this.once("error", () => {
+                if (finished) return;
+                finished = true;
+                reject();
+            });
+        });
+    }
+
+    disconnect() {
+        if (
+            this.ws !== undefined &&
+            this.ws.readyState !== WebSocket.CLOSED &&
+            this.ws.readyState !== WebSocket.CLOSING
+        )
+            this.ws.close(1000);
+    }
+
+    private parseData(event: MessageEvent) {
+        if (typeof event.data !== "string") return;
+        const json = JSON.parse(event.data);
+        const entry = this.pending.get(json.id);
+        if (entry === undefined) {
+            this.emit("data", json);
+            return;
+        }
+
+        entry(json);
+    }
+
+    sendRequest(type: string, data?: any): Promise<any> {
+        if (this.ws === undefined || this.ws.readyState !== WebSocket.OPEN)
+            return Promise.reject({ error: WSErrorCode.NotConnected });
+
+        const ws = this.ws;
+        return new Promise((resolve, reject) => {
+            if (this.index >= 2 ** 32) this.index = 0;
+            while (this.pending.has(this.index)) this.index++;
+            const onClose = (e: CloseEvent) => {
+                reject({
+                    error: e.code,
+                    message: e.reason
+                });
+            };
+
+            const finishedFn = (data: any) => {
+                this.removeListener("close", onClose);
+                if (data.error)
+                    reject({
+                        error: data.error,
+                        message: data.message,
+                        data: data.data
+                    });
+                resolve(data.data);
+            };
+
+            this.pending.set(this.index, finishedFn);
+            this.once("close", onClose);
+            const json = {
+                id: this.index,
+                type: type,
+                data
+            };
+            ws.send(JSON.stringify(json) + "\n");
+            this.index++;
+        });
+    }
+
+    authenticate(token: string, roomId: string): Promise<AuthenticationResult> {
+        return this.sendRequest(WSCommandType.Authenticate, { token, roomId });
+    }
+
+    async roomInfo(): Promise<Room> {
+        const room = await this.sendRequest(WSCommandType.RoomInfo);
+        return {
+            id: room.id,
+            videoAllowed: room.videoAllowed,
+            users: new Map(Object.entries(room.users))
+        };
+    }
+
+    initializeTransports(
+        rtpCapabilities: RtpCapabilities
+    ): Promise<TransportInitDataTuple> {
+        return this.sendRequest(WSCommandType.InitializeTransports, {
+            mode: "SplitWebRTC",
+            rtpCapabilities
+        });
+    }
+
+    connectTransport(
+        id: string,
+        dtlsParameters: DtlsParameters
+    ): Promise<void> {
+        return this.sendRequest(WSCommandType.ConnectTransport, {
+            id,
+            dtlsParameters
+        });
+    }
+
+    async startProduce(
+        type: ProduceType,
+        rtpParameters: RtpParameters
+    ): Promise<string> {
+        let result = await this.sendRequest(WSCommandType.StartProduce, {
+            type,
+            rtpParameters
+        });
+        return result.producerId;
+    }
+
+    stopProduce(type: ProduceType): Promise<void> {
+        return this.sendRequest(WSCommandType.StopProduce, { type });
+    }
+
+    startConsume(userId: string, type: ProduceType): Promise<ConsumerData> {
+        return this.sendRequest(WSCommandType.StartConsume, { type, userId });
+    }
+
+    stopConsume(consumerId: string): Promise<void> {
+        return this.sendRequest(WSCommandType.StopConsume, { id: consumerId });
+    }
+
+    setConsumerPause(consumerId: string, paused: boolean): Promise<void> {
+        return this.sendRequest(WSCommandType.SetConsumerPause, {
+            id: consumerId,
+            paused
+        });
+    }
+}

src/lib/vortex/Types.ts

@@ -0,0 +1,111 @@
+import { Consumer } from "mediasoup-client/lib/Consumer";
+import {
+    MediaKind,
+    RtpCapabilities,
+    RtpParameters
+} from "mediasoup-client/lib/RtpParameters";
+import { SctpParameters } from "mediasoup-client/lib/SctpParameters";
+import {
+    DtlsParameters,
+    IceCandidate,
+    IceParameters
+} from "mediasoup-client/lib/Transport";
+
+export enum WSEventType {
+    UserJoined = "UserJoined",
+    UserLeft = "UserLeft",
+
+    UserStartProduce = "UserStartProduce",
+    UserStopProduce = "UserStopProduce"
+}
+
+export enum WSCommandType {
+    Authenticate = "Authenticate",
+    RoomInfo = "RoomInfo",
+
+    InitializeTransports = "InitializeTransports",
+    ConnectTransport = "ConnectTransport",
+
+    StartProduce = "StartProduce",
+    StopProduce = "StopProduce",
+
+    StartConsume = "StartConsume",
+    StopConsume = "StopConsume",
+    SetConsumerPause = "SetConsumerPause"
+}
+
+export enum WSErrorCode {
+    NotConnected = 0,
+    NotFound = 404,
+
+    TransportConnectionFailure = 601,
+
+    ProducerFailure = 611,
+    ProducerNotFound = 614,
+
+    ConsumerFailure = 621,
+    ConsumerNotFound = 624
+}
+
+export enum WSCloseCode {
+    // Sent when the received data is not a string, or is unparseable
+    InvalidData = 1003,
+    Unauthorized = 4001,
+    RoomClosed = 4004,
+    // Sent when a client tries to send an opcode in the wrong state
+    InvalidState = 1002,
+    ServerError = 1011
+}
+
+export interface VoiceError {
+    error: WSErrorCode | WSCloseCode;
+    message: string;
+}
+
+export type ProduceType = "audio"; //| "video" | "saudio" | "svideo";
+
+export interface AuthenticationResult {
+    userId: string;
+    roomId: string;
+    rtpCapabilities: RtpCapabilities;
+}
+
+export interface Room {
+    id: string;
+    videoAllowed: boolean;
+    users: Map<string, VoiceUser>;
+}
+
+export interface VoiceUser {
+    audio?: boolean;
+    //video?: boolean,
+    //saudio?: boolean,
+    //svideo?: boolean,
+}
+
+export interface ConsumerList {
+    audio?: Consumer;
+    //video?: Consumer,
+    //saudio?: Consumer,
+    //svideo?: Consumer,
+}
+
+export interface TransportInitData {
+    id: string;
+    iceParameters: IceParameters;
+    iceCandidates: IceCandidate[];
+    dtlsParameters: DtlsParameters;
+    sctpParameters: SctpParameters | undefined;
+}
+
+export interface TransportInitDataTuple {
+    sendTransport: TransportInitData;
+    recvTransport: TransportInitData;
+}
+
+export interface ConsumerData {
+    id: string;
+    producerId: string;
+    kind: MediaKind;
+    rtpParameters: RtpParameters;
+}

src/lib/vortex/VoiceClient.ts

@@ -0,0 +1,331 @@
+import EventEmitter from "eventemitter3";
+
+import * as mediasoupClient from "mediasoup-client";
+import {
+    Device,
+    Producer,
+    Transport,
+    UnsupportedError
+} from "mediasoup-client/lib/types";
+
+import {
+    ProduceType,
+    WSEventType,
+    VoiceError,
+    VoiceUser,
+    ConsumerList,
+    WSErrorCode
+} from "./Types";
+import Signaling from "./Signaling";
+
+interface VoiceEvents {
+    ready: () => void;
+    error: (error: Error) => void;
+    close: (error?: VoiceError) => void;
+
+    startProduce: (type: ProduceType) => void;
+    stopProduce: (type: ProduceType) => void;
+
+    userJoined: (userId: string) => void;
+    userLeft: (userId: string) => void;
+
+    userStartProduce: (userId: string, type: ProduceType) => void;
+    userStopProduce: (userId: string, type: ProduceType) => void;
+}
+
+export default class VoiceClient extends EventEmitter<VoiceEvents> {
+    private _supported: boolean;
+
+    device?: Device;
+    signaling: Signaling;
+
+    sendTransport?: Transport;
+    recvTransport?: Transport;
+
+    userId?: string;
+    roomId?: string;
+    participants: Map<string, VoiceUser>;
+    consumers: Map<string, ConsumerList>;
+
+    audioProducer?: Producer;
+    constructor() {
+        super();
+        this._supported = mediasoupClient.detectDevice() !== undefined;
+        this.signaling = new Signaling();
+
+        this.participants = new Map();
+        this.consumers = new Map();
+
+        this.signaling.on(
+            "data",
+            json => {
+                const data = json.data;
+                switch (json.type) {
+                    case WSEventType.UserJoined: {
+                        this.participants.set(data.id, {});
+                        this.emit("userJoined", data.id);
+                        break;
+                    }
+                    case WSEventType.UserLeft: {
+                        this.participants.delete(data.id);
+                        this.emit("userLeft", data.id);
+
+                        if (this.recvTransport) this.stopConsume(data.id);
+                        break;
+                    }
+                    case WSEventType.UserStartProduce: {
+                        const user = this.participants.get(data.id);
+                        if (user === undefined) return;
+                        switch (data.type) {
+                            case "audio":
+                                user.audio = true;
+                                break;
+                            default:
+                                throw new Error(
+                                    `Invalid produce type ${data.type}`
+                                );
+                        }
+
+                        if (this.recvTransport)
+                            this.startConsume(data.id, data.type);
+                        this.emit("userStartProduce", data.id, data.type);
+                        break;
+                    }
+                    case WSEventType.UserStopProduce: {
+                        const user = this.participants.get(data.id);
+                        if (user === undefined) return;
+                        switch (data.type) {
+                            case "audio":
+                                user.audio = false;
+                                break;
+                            default:
+                                throw new Error(
+                                    `Invalid produce type ${data.type}`
+                                );
+                        }
+
+                        if (this.recvTransport)
+                            this.stopConsume(data.id, data.type);
+                        this.emit("userStopProduce", data.id, data.type);
+                        break;
+                    }
+                }
+            },
+            this
+        );
+
+        this.signaling.on(
+            "error",
+            error => {
+                this.emit("error", new Error("Signaling error"));
+            },
+            this
+        );
+
+        this.signaling.on(
+            "close",
+            error => {
+                this.disconnect(
+                    {
+                        error: error.code,
+                        message: error.reason
+                    },
+                    true
+                );
+            },
+            this
+        );
+    }
+
+    supported() {
+        return this._supported;
+    }
+    throwIfUnsupported() {
+        if (!this._supported) throw new UnsupportedError("RTC not supported");
+    }
+
+    connect(address: string, roomId: string) {
+        this.throwIfUnsupported();
+        this.device = new Device();
+        this.roomId = roomId;
+        return this.signaling.connect(address);
+    }
+
+    disconnect(error?: VoiceError, ignoreDisconnected?: boolean) {
+        if (!this.signaling.connected() && !ignoreDisconnected) return;
+        this.signaling.disconnect();
+        this.participants = new Map();
+        this.consumers = new Map();
+        this.userId = undefined;
+        this.roomId = undefined;
+
+        this.audioProducer = undefined;
+
+        if (this.sendTransport) this.sendTransport.close();
+        if (this.recvTransport) this.recvTransport.close();
+        this.sendTransport = undefined;
+        this.recvTransport = undefined;
+
+        this.emit("close", error);
+    }
+
+    async authenticate(token: string) {
+        this.throwIfUnsupported();
+        if (this.device === undefined || this.roomId === undefined)
+            throw new ReferenceError("Voice Client is in an invalid state");
+        const result = await this.signaling.authenticate(token, this.roomId);
+        let [room] = await Promise.all([
+            this.signaling.roomInfo(),
+            this.device.load({ routerRtpCapabilities: result.rtpCapabilities })
+        ]);
+
+        this.userId = result.userId;
+        this.participants = room.users;
+    }
+
+    async initializeTransports() {
+        this.throwIfUnsupported();
+        if (this.device === undefined)
+            throw new ReferenceError("Voice Client is in an invalid state");
+        const initData = await this.signaling.initializeTransports(
+            this.device.rtpCapabilities
+        );
+
+        this.sendTransport = this.device.createSendTransport(
+            initData.sendTransport
+        );
+        this.recvTransport = this.device.createRecvTransport(
+            initData.recvTransport
+        );
+
+        const connectTransport = (transport: Transport) => {
+            transport.on("connect", ({ dtlsParameters }, callback, errback) => {
+                this.signaling
+                    .connectTransport(transport.id, dtlsParameters)
+                    .then(callback)
+                    .catch(errback);
+            });
+        };
+
+        connectTransport(this.sendTransport);
+        connectTransport(this.recvTransport);
+
+        this.sendTransport.on("produce", (parameters, callback, errback) => {
+            const type = parameters.appData.type;
+            if (
+                parameters.kind === "audio" &&
+                type !== "audio" &&
+                type !== "saudio"
+            )
+                return errback();
+            if (
+                parameters.kind === "video" &&
+                type !== "video" &&
+                type !== "svideo"
+            )
+                return errback();
+            this.signaling
+                .startProduce(type, parameters.rtpParameters)
+                .then(id => callback({ id }))
+                .catch(errback);
+        });
+
+        this.emit("ready");
+        for (let user of this.participants) {
+            if (user[1].audio && user[0] !== this.userId)
+                this.startConsume(user[0], "audio");
+        }
+    }
+
+    private async startConsume(userId: string, type: ProduceType) {
+        if (this.recvTransport === undefined)
+            throw new Error("Receive transport undefined");
+        const consumers = this.consumers.get(userId) || {};
+        const consumerParams = await this.signaling.startConsume(userId, type);
+        const consumer = await this.recvTransport.consume(consumerParams);
+        switch (type) {
+            case "audio":
+                consumers.audio = consumer;
+        }
+
+        const mediaStream = new MediaStream([consumer.track]);
+        const audio = new Audio();
+        audio.srcObject = mediaStream;
+        await this.signaling.setConsumerPause(consumer.id, false);
+        audio.play();
+        this.consumers.set(userId, consumers);
+    }
+
+    private async stopConsume(userId: string, type?: ProduceType) {
+        const consumers = this.consumers.get(userId);
+        if (consumers === undefined) return;
+        if (type === undefined) {
+            if (consumers.audio !== undefined) consumers.audio.close();
+            this.consumers.delete(userId);
+        } else {
+            switch (type) {
+                case "audio": {
+                    if (consumers.audio !== undefined) {
+                        consumers.audio.close();
+                        this.signaling.stopConsume(consumers.audio.id);
+                    }
+                    consumers.audio = undefined;
+                    break;
+                }
+            }
+
+            this.consumers.set(userId, consumers);
+        }
+    }
+
+    async startProduce(track: MediaStreamTrack, type: ProduceType) {
+        if (this.sendTransport === undefined)
+            throw new Error("Send transport undefined");
+        const producer = await this.sendTransport.produce({
+            track,
+            appData: { type }
+        });
+
+        switch (type) {
+            case "audio":
+                this.audioProducer = producer;
+                break;
+        }
+
+        const participant = this.participants.get(this.userId || "");
+        if (participant !== undefined) {
+            participant[type] = true;
+            this.participants.set(this.userId || "", participant);
+        }
+
+        this.emit("startProduce", type);
+    }
+
+    async stopProduce(type: ProduceType) {
+        let producer;
+        switch (type) {
+            case "audio":
+                producer = this.audioProducer;
+                this.audioProducer = undefined;
+                break;
+        }
+
+        if (producer !== undefined) {
+            producer.close();
+            this.emit("stopProduce", type);
+        }
+
+        const participant = this.participants.get(this.userId || "");
+        if (participant !== undefined) {
+            participant[type] = false;
+            this.participants.set(this.userId || "", participant);
+        }
+
+        try {
+            await this.signaling.stopProduce(type);
+        } catch (error) {
+            if (error.error === WSErrorCode.ProducerNotFound) return;
+            else throw error;
+        }
+    }
+}

src/pages/channels/ChannelHeader.tsx

@@ -1,19 +1,17 @@
 import styled from "styled-components";
 import { Channel, User } from "revolt.js";
 import { useContext } from "preact/hooks";
-import { useHistory } from "react-router-dom";
 import Header from "../../components/ui/Header";
-import IconButton from "../../components/ui/IconButton";
+import HeaderActions from "./actions/HeaderActions";
 import Markdown from "../../components/markdown/Markdown";
 import { getChannelName } from "../../context/revoltjs/util";
 import UserStatus from "../../components/common/user/UserStatus";
 import { AppContext } from "../../context/revoltjs/RevoltClient";
-import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
+import { Save, AtSign, Users, Hash } from "@styled-icons/feather";
 import { useStatusColour } from "../../components/common/user/UserIcon";
 import { useIntermediate } from "../../context/intermediate/Intermediate";
-import { Save, AtSign, Users, Hash, UserPlus, Settings, Sidebar as SidebarIcon } from "@styled-icons/feather";
 
-interface Props {
+export interface ChannelHeaderProps {
     channel: Channel,
     toggleSidebar?: () => void
 }
@@ -51,10 +49,9 @@ const Info = styled.div`
     }
 `;
 
-export default function ChannelHeader({ channel, toggleSidebar }: Props) {
+export default function ChannelHeader({ channel, toggleSidebar }: ChannelHeaderProps) {
     const { openScreen } = useIntermediate();
     const client = useContext(AppContext);
-    const history = useHistory();
 
     const name = getChannelName(client, channel);
     let icon, recipient;
@@ -105,32 +102,7 @@ export default function ChannelHeader({ channel, toggleSidebar }: Props) {
                     </>
                 )}
             </Info>
-            <>
-                { channel.channel_type === "Group" && (
-                    <>
-                        <IconButton onClick={() =>
-                            openScreen({
-                                id: "user_picker",
-                                omit: channel.recipients,
-                                callback: async users => {
-                                    for (const user of users) {
-                                        await client.channels.addMember(channel._id, user);
-                                    }
-                                }
-                            })}>
-                            <UserPlus size={22} />
-                        </IconButton>
-                        <IconButton onClick={() => history.push(`/channel/${channel._id}/settings`)}>
-                            <Settings size={22} />
-                        </IconButton>
-                    </>
-                ) }
-                { channel.channel_type === "Group" && !isTouchscreenDevice && (
-                    <IconButton onClick={toggleSidebar}>
-                        <SidebarIcon size={22} />
-                    </IconButton>
-                ) }
-            </>
+            <HeaderActions channel={channel} toggleSidebar={toggleSidebar} />
         </Header>
     )
 }

src/pages/channels/actions/HeaderActions.tsx

@@ -0,0 +1,78 @@
+import { useContext } from "preact/hooks";
+import { useHistory } from "react-router-dom";
+import { ChannelHeaderProps } from "../ChannelHeader";
+import IconButton from "../../../components/ui/IconButton";
+import { AppContext } from "../../../context/revoltjs/RevoltClient";
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { VoiceContext, VoiceOperationsContext, VoiceStatus } from "../../../context/Voice";
+import { UserPlus, Settings, Sidebar as SidebarIcon, PhoneCall, PhoneOff } from "@styled-icons/feather";
+
+export default function HeaderActions({ channel, toggleSidebar }: ChannelHeaderProps) {
+    const { openScreen } = useIntermediate();
+    const client = useContext(AppContext);
+    const history = useHistory();
+
+    return (
+        <>
+            { channel.channel_type === "Group" && (
+                <>
+                    <IconButton onClick={() =>
+                        openScreen({
+                            id: "user_picker",
+                            omit: channel.recipients,
+                            callback: async users => {
+                                for (const user of users) {
+                                    await client.channels.addMember(channel._id, user);
+                                }
+                            }
+                        })}>
+                        <UserPlus size={22} />
+                    </IconButton>
+                    <IconButton onClick={() => history.push(`/channel/${channel._id}/settings`)}>
+                        <Settings size={22} />
+                    </IconButton>
+                </>
+            ) }
+            <VoiceActions channel={channel} />
+            { channel.channel_type === "Group" && !isTouchscreenDevice && (
+                <IconButton onClick={toggleSidebar}>
+                    <SidebarIcon size={22} />
+                </IconButton>
+            ) }
+        </>
+    )
+}
+
+function VoiceActions({ channel }: Pick<ChannelHeaderProps, 'channel'>) {
+    if (channel.channel_type === 'SavedMessages' ||
+        channel.channel_type === 'TextChannel') return null;
+
+    const voice = useContext(VoiceContext);
+    const { connect, disconnect } = useContext(VoiceOperationsContext);
+
+    if (voice.status >= VoiceStatus.READY) {
+        if (voice.roomId === channel._id) {
+            return (
+                <IconButton onClick={disconnect}>
+                    <PhoneOff size={22} />
+                </IconButton>
+            )
+        } else {
+            return (
+                <IconButton onClick={() => {
+                    disconnect();
+                    connect(channel._id);
+                }}>
+                    <PhoneCall size={22} />
+                </IconButton>
+            )
+        }
+    } else {
+        return (
+            <IconButton>
+                <PhoneCall size={22} /** ! FIXME: TEMP */ color="red" />
+            </IconButton>
+        )
+    }
+}