From 40dbf72fcfa2c52854b69962b6d4c6de81eba826 Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 25 Jun 2023 19:39:58 +0200 Subject: [PATCH] [feature] add basic viewer --- src/App.tsx | 47 ++++++++++++++++++++++++++++++++++--- src/Viewer.tsx | 29 +++++++++++++++++++++++ src/interfaces/teamspeak.ts | 1 + src/teamspeak5Handler.ts | 45 ++++++++++++++++++++++++++--------- 4 files changed, 108 insertions(+), 14 deletions(-) create mode 100644 src/Viewer.tsx diff --git a/src/App.tsx b/src/App.tsx index a57cbdb..ba792c2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,25 +1,66 @@ +/* eslint-disable react-hooks/exhaustive-deps */ import "@styles/App.scss"; import { TS5Connection } from "./teamspeak5Handler"; import { IChannel, IClient, IConnection } from "interfaces/teamspeak"; import { useEffect, useState } from "react"; +import Viewer from "./Viewer"; export default function App() { const [clients, setClients] = useState([]); const [channels, setChannels] = useState([]); const [connections, setConnections] = useState([]); + const [activeConnectionId, setActiveConnectionId] = useState(1); + + const [currentConnection, setCurrentConnection] = useState(undefined); + const [currentChannel, setCurrentChannel] = useState(undefined); + const [currentClient, setCurrentClient] = useState(undefined); + + function setCurrentStates() { + const currentConnection = connections.find((connection) => connection.id === activeConnectionId); + setCurrentConnection(currentConnection); + + if (currentConnection) { + const currentClient = clients.find((client) => client.id === currentConnection.clientId); + setCurrentClient(currentClient); + if (currentClient) { + const currentChannel = channels.find((channel) => channel.id === currentClient.channel?.id); + setCurrentChannel(currentChannel); + if (currentChannel) { + return currentChannel; + } + } + } + } useEffect(() => { - const tsConnection: TS5Connection = new TS5Connection(5899, setConnections, setChannels, setClients); + const tsConnection: TS5Connection = new TS5Connection( + 5899, + setConnections, + setChannels, + setClients, + setActiveConnectionId + ); tsConnection.connect(); }, []); useEffect(() => { console.log("===================================="); - }, [clients, channels, connections]); + setCurrentStates(); + }, [clients, channels, connections, activeConnectionId]); - // debug view of lists return (
+ {activeConnectionId} + { + if (client.channel?.id === currentChannel?.id) { + return client; + } + }) as IClient[] + } + channel={currentChannel} + />

Channels {channels.length}

{channels.map((channel) => ( diff --git a/src/Viewer.tsx b/src/Viewer.tsx new file mode 100644 index 0000000..d64726b --- /dev/null +++ b/src/Viewer.tsx @@ -0,0 +1,29 @@ +import { IChannel, IClient } from "interfaces/teamspeak"; + +export default function Viewer({ + clients, + channel, +}: { + clients: IClient[] | undefined; + channel: IChannel | undefined; +}) { + return ( +
+

{channel?.properties.name}

+ {clients?.map((client) => { + if (client) { + return ( +

+ {client.talkStatus === 1 ? "🎤" : ""} + {client.properties.inputMuted ? "🎤x" : ""} + {client.properties.outputMuted ? "🔈" : ""} + {client.id} {client.properties.nickname} +

+ ); + } else { + return <>; + } + })} +
+ ); +} diff --git a/src/interfaces/teamspeak.ts b/src/interfaces/teamspeak.ts index 711d9b9..29972ea 100644 --- a/src/interfaces/teamspeak.ts +++ b/src/interfaces/teamspeak.ts @@ -22,6 +22,7 @@ export interface IAuthSenderPayload { export interface IClient { id: number; + talkStatus: number; channel: IChannel; properties: IClientProperties; } diff --git a/src/teamspeak5Handler.ts b/src/teamspeak5Handler.ts index e0d773f..002f1b0 100644 --- a/src/teamspeak5Handler.ts +++ b/src/teamspeak5Handler.ts @@ -15,14 +15,15 @@ export class TS5Connection { // State setters for dataHandler setConnections: React.Dispatch>, setChannels: React.Dispatch>, - setClients: React.Dispatch> + setClients: React.Dispatch>, + setActiveConnectionId: React.Dispatch>, ) { // Create websocket connection to TS5 client this.ws = new WebSocket(`ws://localhost:${remoteAppPort}`); // Create dataHandler and messageHandler this.dataHandler = new TS5DataHandler(setConnections, setChannels, setClients); - this.messageHandler = new TS5MessageHandler(this.ws, this.dataHandler); + this.messageHandler = new TS5MessageHandler(this.ws, this.dataHandler, setActiveConnectionId); } @@ -54,7 +55,6 @@ export class TS5Connection { // See TS5MessageHandler class this.ws.onmessage = (event) => { const data = JSON.parse(event.data); - switch (data.type) { case "auth": this.messageHandler.handleAuthMessage(data); @@ -261,9 +261,12 @@ class TS5MessageHandler { ws: WebSocket; dataHandler: TS5DataHandler; - constructor(ws: WebSocket, dataHandler: TS5DataHandler) { + setActiveConnectionId: React.Dispatch>; + + constructor(ws: WebSocket, dataHandler: TS5DataHandler, setActiveConnectionId: React.Dispatch>) { this.ws = ws; this.dataHandler = dataHandler; + this.setActiveConnectionId = setActiveConnectionId; } @@ -284,7 +287,7 @@ class TS5MessageHandler { if (connection.channelInfos.subChannels !== null && channel.id in connection.channelInfos.subChannels) { connection.channelInfos.subChannels[channel.id].forEach((subChannel: IChannel) => { - this.dataHandler.addChannel(subChannel); + this.dataHandler.addChannel({ ...subChannel, connection: connection }); }); } }); @@ -296,6 +299,7 @@ class TS5MessageHandler { if (clientChannel !== undefined) { this.dataHandler.addClient({ id: clientInfo.id, + talkStatus: 0, channel: { ...clientChannel, connection: connection }, properties: clientInfo.properties, }); @@ -335,6 +339,7 @@ class TS5MessageHandler { this.dataHandler.addClient( { id: data.payload.clientId, + talkStatus: 0, channel: newChannel, properties: data.payload.properties, } @@ -343,16 +348,34 @@ class TS5MessageHandler { } handleClientPropertiesUpdatedMessage(data: IClientPropertiesUpdatedMessage) { - // console.log("handleClientPropertiesUpdate", data); + console.log("handleClientPropertiesUpdate", data); + + const client: IClient | undefined = this.dataHandler.getClientById(data.payload.clientId, data.payload.connectionId); + + if (client !== undefined) { + this.dataHandler.updateClient({ + ...client, + properties: data.payload.properties, + }); + } } + handleTalkStatusChangedMessage(data: ITalkStatusChangedMessage) { - //console.log("handleTalkStatusChanged", data); - console.log(this.dataHandler.localConnections); - console.log(this.dataHandler.localChannels); - console.log(this.dataHandler.localClients); + console.log("handleTalkStatusChanged", data); + + const client: IClient | undefined = this.dataHandler.getClientById(data.payload.clientId, data.payload.connectionId); + + if (client !== undefined) { + this.dataHandler.updateClient({ + ...client, + talkStatus: data.payload.status, + }); + } + } handleClientSelfPropertyUpdatedMessage(data: IClientSelfPropertyUpdatedMessage) { - // console.log("handleClientSelfPropertyUpdated", data); + console.log("handleClientSelfPropertyUpdated", data); + this.setActiveConnectionId(data.payload.connectionId); } }