[feature] add basic viewer

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<IClient[]>([]);
   const [channels, setChannels] = useState<IChannel[]>([]);
   const [connections, setConnections] = useState<IConnection[]>([]);
+  const [activeConnectionId, setActiveConnectionId] = useState<number>(1);
+
+  const [currentConnection, setCurrentConnection] = useState<IConnection | undefined>(undefined);
+  const [currentChannel, setCurrentChannel] = useState<IChannel | undefined>(undefined);
+  const [currentClient, setCurrentClient] = useState<IClient | undefined>(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 (
     <div className="App">
+      {activeConnectionId}
+      <Viewer
+        clients={
+          clients.map((client) => {
+            if (client.channel?.id === currentChannel?.id) {
+              return client;
+            }
+          }) as IClient[]
+        }
+        channel={currentChannel}
+      />
       <div className="list">
         <h1>Channels {channels.length}</h1>
         {channels.map((channel) => (

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 (
+    <div>
+      <h1>{channel?.properties.name}</h1>
+      {clients?.map((client) => {
+        if (client) {
+          return (
+            <p key={`${client.id}-${client.channel?.connection.id}`}>
+              {client.talkStatus === 1 ? "🎤" : ""}
+              {client.properties.inputMuted ? "🎤x" : ""}
+              {client.properties.outputMuted ? "🔈" : ""}
+              {client.id} {client.properties.nickname}
+            </p>
+          );
+        } else {
+          return <></>;
+        }
+      })}
+    </div>
+  );
+}

src/interfaces/teamspeak.ts

@@ -22,6 +22,7 @@ export interface IAuthSenderPayload {
 
 export interface IClient {
   id: number;
+  talkStatus: number;
   channel: IChannel;
   properties: IClientProperties;
 }

src/teamspeak5Handler.ts

@@ -15,14 +15,15 @@ export class TS5Connection {
     // State setters for dataHandler
     setConnections: React.Dispatch<React.SetStateAction<IConnection[]>>,
     setChannels: React.Dispatch<React.SetStateAction<IChannel[]>>,
-    setClients: React.Dispatch<React.SetStateAction<IClient[]>>
+    setClients: React.Dispatch<React.SetStateAction<IClient[]>>,
+    setActiveConnectionId: React.Dispatch<React.SetStateAction<number>>,
   ) {
     // 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<React.SetStateAction<number>>;
+
+  constructor(ws: WebSocket, dataHandler: TS5DataHandler, setActiveConnectionId: React.Dispatch<React.SetStateAction<number>>) {
     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);
   }
 }