Merge pull request #25 from DerTyp876/19-show-if-a-client-is-hardware-muted

[feature] add hardware muted inputs

README.md

@@ -12,8 +12,9 @@ This App uses the new "Remote Apps" feature of Teamspeak 5.
 
 ## Setup
 
-1. Download the `index.html` of the latest release from [here](https://github.com/DerTyp876/ts5-obs-overlay/releases/tag/v1.0.0)  
+1. Download the `index.html` of the latest release from [here](https://github.com/DerTyp876/ts5-obs-overlay/releases/tag/v1.0.0)
-   ![image](https://github.com/DerTyp876/ts5-obs-overlay/assets/76851529/04dc3a66-c493-429b-b4ae-44bade473ad6)
+   ![image](https://github.com/DerTyp876/ts5-obs-overlay/assets/76851529/04dc3a66-c493-429b-b4ae-44bade473ad6)  
+   1.1. (optional) You can rename the file. Just remember using the new file name in the future instead of `index.html`
 2. Go into the Teamspeak 5 Settings and enable "Remote Apps"  
    ![image](https://github.com/DerTyp876/ts5-obs-overlay/assets/76851529/b31bc553-fde2-46ab-b07c-d3c81339cc7d)
 
@@ -33,7 +34,7 @@ This App uses the new "Remote Apps" feature of Teamspeak 5.
 You can customize the overlay by adding parameters to the URL of the Browser Source.
 
 1. Open your Browser Source settings
-2. **Untick** the checkbox "Local File"  
+2. **Untick** the checkbox "Local File"
 3. Add `file://` to the beginning of the URL  
    ![image](https://github.com/DerTyp876/ts5-obs-overlay/assets/76851529/87985b4c-4397-4681-9635-239d1e382c24)
 4. Start adding parameters like discribed below
@@ -42,13 +43,16 @@ Start by adding a `?` to the end of the URL and then add the parameters.
 To add multiple parameters, you have to seperate them with a `&`.
 
 Like this: `file://C:/Users/.../index.html?parameter1=value1&parameter2=value2`  
-Real example: `file://C:/Users/.../index.html?remoteAppPort=5899`
+Real example: `file://C:/Users/.../index.html?remoteAppPort=5899&hideNonTalking=true&clientLimit=5`
 
 This is a list of all available parameters (all parameters are optional):
 
-| Parameter       | Description                            | Default |
+| Parameter         | Description                              | Type    | Default         |
-| --------------- | -------------------------------------- | ------- |
+| ----------------- | ---------------------------------------- | ------- | --------------- |
-| `remoteAppPort` | The port of the Teamspeak 5 remote app | `5899`  |
+| `remoteAppPort`   | The port of the Teamspeak 5 remote app   | number  | `5899`          |
+| `hideNonTalking`  | Hide all non-talking clients             | boolean | `false`         |
+| `clientLimit`     | Count of how many client should be shown | number  | `0` (unlimited) |
+| `showChannelName` | Display the channel name                 | boolean | `false`         |
 
 ## Setup (Developer)
 

package.json

@@ -10,12 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@types/node": "^20.3.2",
+    "jest": "^29.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.0",
     "sass": "^1.62.1"
   },
   "devDependencies": {
+    "@types/jest": "^29.5.2",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.59.0",

src/App.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import "@styles/App.scss";
-import { TS5Connection } from "./teamspeak5Handler";
+import { IChannel, IClient, IConnection, ITS5ConnectionHandler } from "@interfaces/teamspeak";
-import { IChannel, IClient, IConnection } from "interfaces/teamspeak";
 import { useEffect, useState } from "react";
 import Viewer from "./Viewer";
 import { useSearchParams } from "react-router-dom";
+import { TS5ConnectionHandler } from "@handlers/teamspeak/connectionHandler";
 
 export default function App() {
   const [searchParams] = useSearchParams();
@@ -38,7 +38,8 @@ export default function App() {
   useEffect(() => {
     const remoteAppPort = searchParams.get("remoteAppPort");
 
-    const tsConnection: TS5Connection = new TS5Connection(
+    console.log(searchParams.get("hideNonTalking"));
+    const tsConnection: ITS5ConnectionHandler = new TS5ConnectionHandler(
       parseInt(remoteAppPort ?? "5899"),
       setConnections,
       setChannels,
@@ -55,9 +56,12 @@ export default function App() {
   return (
     <div className="App">
       <Viewer
+        showChannelName={searchParams.get("showChannelName") === "true"}
+        hideNonTalking={searchParams.get("hideNonTalking") === "true"}
+        clientLimit={searchParams.get("clientLimit") ? parseInt(searchParams.get("clientLimit") ?? "0") : 0}
         clients={
           clients.map((client) => {
-            if (client.channel?.id === currentChannel?.id) {
+            if (client.channel?.id === currentChannel?.id && client.channel.connection.id === activeConnectionId) {
               return client;
             }
           }) as IClient[]

src/Viewer.tsx

@@ -1,23 +1,91 @@
-import { IChannel, IClient } from "interfaces/teamspeak";
+import { IChannel, IClient } from "@interfaces/teamspeak";
 import "@styles/Viewer.scss";
 
 export default function Viewer({
   clients,
   channel,
   showChannelName = false,
+  hideNonTalking = false,
+  clientLimit = 0,
 }: {
   clients: IClient[] | undefined;
   channel: IChannel | undefined;
   showChannelName?: boolean;
+  hideNonTalking?: boolean;
+  clientLimit?: number;
 }) {
   return (
     <div className="viewer">
-      {showChannelName ? <h3>{channel?.properties.name}</h3> : null}
+      {showChannelName ? (
-      {clients?.map((client) => {
+        <div className="channelNameContainer">
+          <h3>{channel?.properties.name}</h3>
+        </div>
+      ) : null}
+      {clients?.map((client, i) => {
+        //* Client limit
+        if (clientLimit != 0 && i >= clientLimit) {
+          return null;
+        }
+
         if (client) {
+          //* Non-talking client
+          if (
+            hideNonTalking &&
+            (client.properties.inputMuted || client.properties.outputMuted || client.talkStatus == 0)
+          ) {
+            return null;
+          }
+
+          //* Normal client
           return (
             <div className="client" key={`${client.id}-${client.channel?.connection.id}`}>
-              {client.properties.outputMuted ? (
+              {client.properties.outputHardware == false ? (
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+                  <title>muted_hardware_output</title>
+                  <g id="muted_hardware_output.svg">
+                    <path
+                      d="M116.62,39a4.78,4.78,0,0,1-1.59.3l-6.29,3.63a45.42,45.42,0,0,1-13.33,57.64,49.4,49.4,0,0,1-5.82,3.62c-1.06.57-2.2.92-3.19,1.49-1.7,1-2.77,2.13-2.77,4.18a4.57,4.57,0,0,0,4.54,4.54,5.33,5.33,0,0,0,1.84-.35,54.49,54.49,0,0,0,26.94-75c-.12,0-.22,0-.34,0M88.18,13.58a4.57,4.57,0,0,0-4.54,4.54c0,2.06,1.06,3.19,2.77,4.18,1,.57,2.13.92,3.19,1.49a49.4,49.4,0,0,1,5.82,3.62,45.68,45.68,0,0,1,8.19,7.78l7-4a2.63,2.63,0,0,1,1.11-.34A54.31,54.31,0,0,0,90,13.94a5.33,5.33,0,0,0-1.84-.35"
+                      fill="#d8d8d8"
+                    />
+                    <path
+                      d="M59.46,71.4,32.77,86.81l19,19a4.51,4.51,0,0,0,3.19,1.35,4.57,4.57,0,0,0,4.54-4.54V71.4M54.92,20.88a4.51,4.51,0,0,0-3.19,1.35L28.12,45.85H9.54A4.57,4.57,0,0,0,5,50.38V77.62a4.57,4.57,0,0,0,4.54,4.54H22.26l37.2-21.48V25.42a4.57,4.57,0,0,0-4.54-4.54"
+                      fill="#d8d8d8"
+                    />
+                    <path
+                      d="M85.11,56.6l-7.87,4.54A10,10,0,0,1,77.62,64c0,8.58-8.23,7.09-8.23,12.48A4.53,4.53,0,0,0,73.93,81a4,4,0,0,0,1.77-.35A18.13,18.13,0,0,0,86.69,64a18.34,18.34,0,0,0-1.59-7.4M73.93,47a4.52,4.52,0,0,0-4.54,4.54,3.92,3.92,0,0,0,1.08,2.8l8.76-5.06a16.14,16.14,0,0,0-3.52-1.93A4,4,0,0,0,73.93,47"
+                      fill="#d8d8d8"
+                    />
+                    <path
+                      d="M100.87,47.49,93,52a27.15,27.15,0,0,1-8.36,33.87A36.79,36.79,0,0,1,79.25,89a4.54,4.54,0,0,0,1.84,8.72,5.24,5.24,0,0,0,1.77-.35,36.34,36.34,0,0,0,18-49.91M81,30.25A4.54,4.54,0,0,0,79.25,39a36.82,36.82,0,0,1,5.39,3.12,27,27,0,0,1,2.86,2.4l8.14-4.7A35.37,35.37,0,0,0,82.86,30.6,5.31,5.31,0,0,0,81,30.25"
+                      fill="#d8d8d8"
+                    />
+                    <path
+                      d="M126.57,43.71,10.42,110.77a2.88,2.88,0,0,1-3.93-1.05L4.33,106A2.88,2.88,0,0,1,5.38,102L121.53,35A2.88,2.88,0,0,1,125.46,36l2.16,3.75A2.88,2.88,0,0,1,126.57,43.71Z"
+                      fill="#c9070a"
+                    />
+                  </g>
+                </svg>
+              ) : client.properties.inputHardware == false ? (
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+                  <title>muted_hardware_input</title>
+                  <g id="muted_hardware_input.svg">
+                    <path
+                      d="M88.62,54.15V64A24.69,24.69,0,0,1,64,88.62a25.26,25.26,0,0,1-8.38-1.46l-7.39,7.39A34,34,0,0,0,64,98.46,34.5,34.5,0,0,0,98.46,64V54.15a4.92,4.92,0,1,1,9.85,0V64a44.31,44.31,0,0,1-39.38,44v10.15H88.62a4.92,4.92,0,0,1,0,9.85H39.38a4.92,4.92,0,1,1,0-9.85H59.08V108A43.3,43.3,0,0,1,41,101.77L21.46,121.31a2.46,2.46,0,0,1-3.54,0L11.62,115a2.46,2.46,0,0,1,0-3.54l94.92-94.92a2.46,2.46,0,0,1,3.54,0l6.31,6.31a2.46,2.46,0,0,1,0,3.54ZM22.92,80.46A43.3,43.3,0,0,1,19.69,64V54.15a4.92,4.92,0,1,1,9.85,0V64a35.94,35.94,0,0,0,1.15,8.69ZM39.38,64V24.62a24.62,24.62,0,0,1,47.77-8.38Z"
+                      fill="#d8d8d8"
+                    />
+                    <rect
+                      x="-5.93"
+                      y="61.89"
+                      width="139.87"
+                      height="14.02"
+                      rx="2.87"
+                      ry="2.87"
+                      transform="translate(-29.97 65.43) rotate(-45)"
+                      fill="#c9070a"
+                    />
+                  </g>
+                </svg>
+              ) : client.properties.outputMuted ? (
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
                   <title>muted_output</title>
                   <g id="muted_output">

src/handlers/teamspeak/connectionHandler.ts

@@ -0,0 +1,132 @@
+import { IAuthSenderPayload, IChannel, IClient, IConnection, ITS5ConnectionHandler, ITS5DataHandler, ITS5MessageHandler } from "@interfaces/teamspeak";
+import { TS5DataHandler } from "./dataHandler";
+import { TS5MessageHandler } from "./messageHandler";
+import Logger from "@/utils/logger";
+
+
+// Establish connection to TS5 client
+// Main class
+export class TS5ConnectionHandler implements ITS5ConnectionHandler {
+  ws: WebSocket; // Websocket connection to TS5 client
+  authenticated = false; // Is the connection authenticated?
+  remoteAppPort: number; // Port of TS5 client
+  dataHandler: ITS5DataHandler; // Handles data/lists and states
+  messageHandler: ITS5MessageHandler; // Handles messages received from TS5 client
+
+  constructor(
+    // Port of TS5 client
+    remoteAppPort: number,
+
+    // State setters for dataHandler
+    setConnections: React.Dispatch<React.SetStateAction<IConnection[]>>,
+    setChannels: React.Dispatch<React.SetStateAction<IChannel[]>>,
+    setClients: React.Dispatch<React.SetStateAction<IClient[]>>,
+    setActiveConnectionStateId: React.Dispatch<React.SetStateAction<number>>,
+  ) {
+
+
+    // Create websocket connection to TS5 client
+    this.remoteAppPort = remoteAppPort;
+    this.ws = new WebSocket(`ws://localhost:${this.remoteAppPort}`);
+
+    // Create dataHandler and messageHandler
+    this.dataHandler = new TS5DataHandler(setConnections, setChannels, setClients);
+    this.messageHandler = new TS5MessageHandler(this.ws, this.dataHandler, setActiveConnectionStateId);
+  }
+
+  reconnect() {
+    Logger.log("Reconnecting...")
+    this.ws.close();
+
+    this.ws = new WebSocket(`ws://localhost:${this.remoteAppPort}`);
+
+    this.dataHandler.clearAll();
+    this.authenticated = false;
+    this.connect();
+  }
+
+  // Connect to TS5 client
+  connect() {
+    Logger.log('Connecting to TS5 client...');
+
+    // Create authentication payload
+    const initalPayload: IAuthSenderPayload = {
+      type: "auth",
+      payload: {
+        identifier: "de.tealfire.obs",
+        version: "1.0.0",
+        name: "TS5 OBS Overlay",
+        description: "A OBS overlay for TS5 by DerTyp876",
+        content: {
+          apiKey: localStorage.getItem("apiKey") ?? "",
+        },
+      },
+    };
+
+    this.ws.onopen = () => {
+      // Send authentication payload to TS5 client
+      this.ws.send(JSON.stringify(initalPayload));
+      Logger.wsSent(initalPayload);
+    };
+
+    this.ws.onclose = (event) => {
+      Logger.log("WebSocket connection closed", event);
+
+      // If the connection was closed before authentication, remove the API key from local storage
+      // OBS weirdly caches the localstorage and is very stubborn about clearing it (even when clicken "Clear Cache")
+      if (!this.authenticated) {
+        Logger.log("WebSocket connection closed before authentication");
+        localStorage.removeItem("apiKey");
+      }
+
+      setTimeout(() => {
+        this.reconnect();
+      }, 2000);
+    };
+
+    // Handle messages received from TS5 client
+    // See TS5MessageHandler class
+    this.ws.onmessage = (event) => {
+      const data = JSON.parse(event.data);
+
+      Logger.wsReceived(data)
+
+      switch (data.type) {
+        case "auth":
+          this.messageHandler.handleAuthMessage(data);
+          this.authenticated = true;
+          break;
+        case "clientMoved":
+          this.messageHandler.handleClientMovedMessage(data);
+          break;
+        case "clientPropertiesUpdated":
+          this.messageHandler.handleClientPropertiesUpdatedMessage(data);
+          break;
+        case "talkStatusChanged":
+          this.messageHandler.handleTalkStatusChangedMessage(data);
+          break;
+        case "serverPropertiesUpdated":
+          this.messageHandler.handleServerPropertiesUpdatedMessage(data);
+          break;
+        case "connectStatusChanged":
+          this.messageHandler.handleConnectStatusChangedMessage(data);
+          break;
+        case "clientSelfPropertyUpdated":
+          this.messageHandler.handleClientSelfPropertyUpdatedMessage(data);
+          break;
+        case "channels":
+          this.messageHandler.handleChannelsMessage(data);
+          break;
+        default:
+          Logger.log(`No handler for event type: ${data.type}`);
+          break;
+      }
+    };
+  }
+}
+
+
+
+
+
+

src/handlers/teamspeak/dataHandler.ts

@@ -0,0 +1,205 @@
+import Logger from "@/utils/logger";
+import { IConnection, IChannel, IClient, ITS5DataHandler } from "@interfaces/teamspeak";
+
+
+/**
+ * Handles data received from TS5 client (list of connections, channels and clients)
+ * Updates the states of App.tsx
+ */
+export class TS5DataHandler implements ITS5DataHandler {
+  // Local lists of connections, channels and clients
+  // These lists are used to keep track of the data, independent of the App.tsx state
+  localConnections: IConnection[];
+  localChannels: IChannel[];
+  localClients: IClient[];
+
+  // State setters for App.tsx
+  setConnections: React.Dispatch<React.SetStateAction<IConnection[]>>;
+  setChannels: React.Dispatch<React.SetStateAction<IChannel[]>>;
+  setClients: React.Dispatch<React.SetStateAction<IClient[]>>;
+
+  constructor(
+    // State setters for App.tsx
+    setConnections: React.Dispatch<React.SetStateAction<IConnection[]>>,
+    setChannels: React.Dispatch<React.SetStateAction<IChannel[]>>,
+    setClients: React.Dispatch<React.SetStateAction<IClient[]>>
+  ) {
+    this.setConnections = setConnections;
+    this.setChannels = setChannels;
+    this.setClients = setClients;
+
+    this.localConnections = [];
+    this.localChannels = [];
+    this.localClients = [];
+  }
+
+  // Update App.tsx states
+  private updateConnectionsState() {
+    this.setConnections([...this.localConnections]);
+  }
+
+  private updateChannelsState() {
+    this.setChannels([...this.localChannels]);
+  }
+
+  private updateClientsState() {
+    this.setClients([...this.localClients]);
+  }
+
+  // Clear all data
+  clearAll() {
+    this.localConnections = [];
+    this.localChannels = [];
+    this.localClients = [];
+
+    this.updateConnectionsState();
+    this.updateChannelsState();
+    this.updateClientsState();
+  }
+
+  // Add data to local lists and update states
+  addConnection(connection: IConnection) {
+    Logger.log("Adding connection...", connection)
+
+    const existingConnection: IConnection | undefined = this.localConnections.find((localConnection: IConnection) => localConnection.id === connection.id);
+
+    if (existingConnection == undefined) {
+      this.localConnections.push(connection);
+      this.updateConnectionsState();
+      Logger.log("Connection added")
+    } else {
+      Logger.log("Connection already exists")
+    }
+  }
+
+  addChannel(channel: IChannel) {
+    Logger.log("Adding channel...", channel)
+    const existingChannel: IChannel | undefined = this.localChannels.find((localChannel: IChannel) => localChannel.id === channel.id && localChannel.connection.id === channel.connection.id);
+
+    if (existingChannel == undefined) {
+      this.localChannels.push(channel);
+      this.updateChannelsState();
+      Logger.log("Channel added")
+    } else {
+      Logger.log("Channel already exists")
+    }
+  }
+
+  addClient(client: IClient) {
+    Logger.log("Adding client...", client)
+    const existingClient: IClient | undefined = this.localClients.find((localClient: IClient) => localClient.id === client.id && localClient.channel?.connection.id === client.channel?.connection.id);
+
+    if (existingClient == undefined) {
+      this.localClients.push(client);
+      this.updateClientsState();
+      Logger.log("Client added")
+    } else {
+      Logger.log("Client already exists")
+    }
+  }
+
+  // Update data in local lists and update states
+  updateConnection(connection: IConnection) {
+    Logger.log("Updating connection...", connection)
+    const existingConnection: IConnection | undefined = this.localConnections.find((localConnection: IConnection) => localConnection.id === connection.id);
+
+    if (existingConnection !== undefined) {
+      this.localConnections[this.localConnections.indexOf(existingConnection)] = connection;
+      this.updateConnectionsState();
+      Logger.log("Connection updated")
+    } else {
+      Logger.log("Connection does not exist")
+    }
+  }
+
+  updateChannel(channel: IChannel) {
+    Logger.log("Updating channel...", channel)
+    const existingChannel: IChannel | undefined = this.localChannels.find((localChannel: IChannel) => localChannel.id === channel.id && localChannel.connection.id === channel.connection.id);
+
+    if (existingChannel !== undefined) {
+      this.localChannels[this.localChannels.indexOf(existingChannel)] = channel;
+      this.updateChannelsState();
+      Logger.log("Channel updated")
+    } else {
+      Logger.log("Channel does not exist")
+    }
+  }
+
+  updateClient(client: IClient) {
+    Logger.log("Updating client...", client)
+    const existingClient: IClient | undefined = this.localClients.find((localClient: IClient) => localClient.id === client.id && localClient.channel?.connection.id === client.channel?.connection.id);
+
+    if (existingClient !== undefined) {
+      this.localClients[this.localClients.indexOf(existingClient)] = client;
+      this.updateClientsState();
+      Logger.log("Client updated")
+    } else {
+      Logger.log("Client does not exist")
+    }
+  }
+
+  // Remove data from local lists and update states
+  removeConnection(connection: IConnection) {
+    Logger.log("Removing connection...", connection)
+    const existingConnection: IConnection | undefined = this.localConnections.find((localConnection: IConnection) => localConnection.id === connection.id);
+
+    if (existingConnection !== undefined) {
+      this.localConnections.splice(this.localConnections.indexOf(existingConnection), 1);
+
+      // Remove all channels and clients associated with the connection
+      this.localChannels = this.localChannels.filter((localChannel: IChannel) => localChannel.connection.id !== connection.id);
+      this.localClients = this.localClients.filter((localClient: IClient) => localClient.channel?.connection.id !== connection.id);
+
+      this.updateChannelsState();
+      this.updateClientsState();
+      this.updateConnectionsState();
+      Logger.log("Connection removed")
+    } else {
+      Logger.log("Connection does not exist")
+    }
+  }
+
+  removeChannel(channel: IChannel) {
+    Logger.log("Removing channel...", channel)
+    const existingChannel: IChannel | undefined = this.localChannels.find((localChannel: IChannel) => localChannel.id === channel.id && localChannel.connection.id === channel.connection.id);
+
+    if (existingChannel !== undefined) {
+      this.localChannels.splice(this.localChannels.indexOf(existingChannel), 1);
+
+      // Remove all clients associated with the channel
+      this.localClients = this.localClients.filter((localClient: IClient) => localClient.channel?.id !== channel.id);
+
+      this.updateClientsState();
+      this.updateChannelsState();
+      Logger.log("Channel removed")
+    } else {
+      Logger.log("Channel does not exist")
+    }
+  }
+
+  removeClient(client: IClient) {
+    Logger.log("Removing client...", client)
+    const existingClient: IClient | undefined = this.localClients.find((localClient: IClient) => localClient.id === client.id && localClient.channel?.connection.id === client.channel?.connection.id);
+
+    if (existingClient !== undefined) {
+      this.localClients.splice(this.localClients.indexOf(existingClient), 1);
+      this.updateClientsState();
+      Logger.log("Client removed")
+    } else {
+      Logger.log("Client does not exist")
+    }
+  }
+
+  // Helper functions
+  getConnectionById(id: number): IConnection | undefined {
+    return this.localConnections.find((connection: IConnection) => connection.id === id);
+  }
+
+  getChannelById(id: number, connectionId: number): IChannel | undefined {
+    return this.localChannels.find((channel: IChannel) => channel.id === id && channel.connection?.id === connectionId);
+  }
+
+  getClientById(id: number, connectionId: number): IClient | undefined {
+    return this.localClients.find((client: IClient) => client.id === id && client.channel?.connection.id === connectionId);
+  }
+}

src/handlers/teamspeak/messageHandler.ts

@@ -0,0 +1,197 @@
+import Logger from "@/utils/logger";
+import { IChannelInfos, IConnection, IChannel, IAuthMessage, IClientInfo, IClientMovedMessage, IClient, IClientPropertiesUpdatedMessage, ITalkStatusChangedMessage, IClientSelfPropertyUpdatedMessage, IServerPropertiesUpdatedMessage, IConnectStatusChangedMessage, IChannelsMessage, ITS5MessageHandler, ITS5DataHandler } from "@interfaces/teamspeak";
+
+// Handle incoming messages from TS5 client
+export class TS5MessageHandler implements ITS5MessageHandler {
+  ws: WebSocket;
+  dataHandler: ITS5DataHandler;
+
+  setActiveConnectionStateId: React.Dispatch<React.SetStateAction<number>>;
+  activeConnectionId = 0;
+
+  constructor(ws: WebSocket, dataHandler: ITS5DataHandler, setActiveConnectionStateId: React.Dispatch<React.SetStateAction<number>>) {
+    this.ws = ws;
+    this.dataHandler = dataHandler;
+    this.setActiveConnectionStateId = setActiveConnectionStateId;
+  }
+
+  setActiveConnection(connectionId: number) {
+    this.activeConnectionId = connectionId;
+    this.setActiveConnectionStateId(connectionId);
+  }
+
+  parseChannelInfos(channelInfos: IChannelInfos, connection: IConnection) {
+    channelInfos.rootChannels.forEach((channel: IChannel) => {
+      this.dataHandler.addChannel({ ...channel, connection: connection });
+
+      if (channelInfos) {
+        if (channelInfos.subChannels !== null && channel.id in channelInfos.subChannels) {
+          channelInfos.subChannels[channel.id].forEach((subChannel: IChannel) => {
+            this.dataHandler.addChannel({ ...subChannel, connection: connection });
+          });
+        }
+      }
+    });
+  }
+
+  // This message is sent by the TS5 server when the client is connected
+  // It contains the initial data
+  handleAuthMessage(data: IAuthMessage) {
+    localStorage.setItem("apiKey", data.payload.apiKey);
+
+    // Process auth payload and add initial data
+    data.payload.connections.forEach((connection: IConnection) => {
+      this.dataHandler.addConnection(connection);
+
+      // Add channels
+      if (connection.channelInfos !== undefined) {
+        this.parseChannelInfos(connection.channelInfos, connection);
+      }
+
+      // Add clients
+      connection.clientInfos?.forEach((clientInfo: IClientInfo) => {
+        const clientChannel: IChannel | undefined = this.dataHandler.getChannelById(clientInfo.channelId, connection.id);
+
+        if (clientChannel !== undefined) {
+          this.dataHandler.addClient({
+            id: clientInfo.id,
+            talkStatus: 0,
+            channel: { ...clientChannel, connection: connection },
+            properties: clientInfo.properties,
+          });
+        }
+      });
+    });
+  }
+
+  // This message is sent by the TS5 server when a client moves a channel OR joins/leaves the server
+  handleClientMovedMessage(data: IClientMovedMessage) {
+    const client: IClient | undefined = this.dataHandler.getClientById(data.payload.clientId, data.payload.connectionId);
+
+
+    //* This gets called when we are connecting to the server and the new clients get loaded
+    if (+data.payload.oldChannelId == 0) { // Create new client(when connecting to server)
+      //set timout to wait for channels to be created
+      setTimeout(() => {
+        const newChannel = this.dataHandler.getChannelById(data.payload.newChannelId, data.payload.connectionId);
+        if (newChannel !== undefined) {
+          this.dataHandler.addClient(
+            {
+              id: data.payload.clientId,
+              talkStatus: 0,
+              channel: newChannel,
+              properties: data.payload.properties,
+            });
+          Logger.ts(`New Client found (${data.payload.connectionId} - ${data.payload.clientId} - ${data.payload.properties.nickname})`)
+        }
+      }, 2000);
+
+    } else {//* This gets called when a client moves a channel OR joins/leaves the server
+      const newChannel: IChannel | undefined = this.dataHandler.getChannelById(data.payload.newChannelId, data.payload.connectionId);
+
+      if (newChannel === undefined || newChannel.id === 0) {
+        Logger.ts(`Client left (${data.payload.connectionId} - ${data.payload.clientId} - ${data.payload.properties.nickname})`)
+        if (client !== undefined) {
+          this.dataHandler.removeClient(client);
+        }
+        return;
+      }
+
+      if (client !== undefined) { // Client already exists
+        Logger.ts(`Client moved (${client.channel.connection.id} - ${client.id} - ${client.properties.nickname})`)
+
+        this.dataHandler.updateClient({
+          ...client,
+          channel: newChannel,
+        });
+
+      } else { // Client does not exist
+        // Client joined
+        Logger.ts(`Client joined (${data.payload.connectionId} - ${data.payload.clientId} - ${data.payload.properties.nickname})`)
+
+        this.dataHandler.addClient(
+          {
+            id: data.payload.clientId,
+            talkStatus: 0,
+            channel: newChannel,
+            properties: data.payload.properties,
+          }
+        );
+      }
+    }
+  }
+
+  handleClientPropertiesUpdatedMessage(data: IClientPropertiesUpdatedMessage) {
+    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) {
+    const client: IClient | undefined = this.dataHandler.getClientById(data.payload.clientId, data.payload.connectionId);
+
+    if (client !== undefined) {
+      this.dataHandler.updateClient({
+        ...client,
+        talkStatus: data.payload.status,
+      });
+    }
+
+    // console.log(this.dataHandler.localConnections)
+    // console.log(this.dataHandler.localChannels)
+    // console.log(this.dataHandler.localClients)
+
+  }
+  handleClientSelfPropertyUpdatedMessage(data: IClientSelfPropertyUpdatedMessage) {
+    const connection: IConnection | undefined = this.dataHandler.getConnectionById(this.activeConnectionId);
+
+    if (data.payload.flag == "inputHardware" || connection == undefined) { // sadly thats the only way to detect if a server is active or not
+      this.setActiveConnection(data.payload.connectionId);
+    }
+  }
+
+  handleServerPropertiesUpdatedMessage(data: IServerPropertiesUpdatedMessage) {
+    const connection: IConnection | undefined = this.dataHandler.getConnectionById(data.payload.connectionId);
+
+    if (connection !== undefined) { // Update existing connection
+      this.dataHandler.updateConnection({
+        ...connection,
+        properties: data.payload.properties,
+      });
+    }
+  }
+
+  handleConnectStatusChangedMessage(data: IConnectStatusChangedMessage) {
+    if (data.payload.status === 0) { // Disconnected from server
+      const connection: IConnection | undefined = this.dataHandler.getConnectionById(data.payload.connectionId);
+
+      if (connection !== undefined) {
+        this.dataHandler.removeConnection(connection);
+      }
+    }
+
+    // Status 1-3 are the connection steps (connecting, authenticating, etc.) (i guess)
+
+    if (data.payload.status === 4) { // Connected to server
+      this.dataHandler.addConnection({
+        id: data.payload.connectionId,
+        clientId: data.payload.info.clientId,
+      });
+    }
+  }
+
+  handleChannelsMessage(data: IChannelsMessage) {
+    // Wait a bit for the connection to be added
+    setTimeout(() => {
+      const connection: IConnection | undefined = this.dataHandler.getConnectionById(data.payload.connectionId);
+      if (connection !== undefined) {
+        this.parseChannelInfos(data.payload.info, connection);
+      }
+    }, 1000);
+  }
+}

src/interfaces/teamspeak.ts

@@ -1,12 +1,54 @@
-
+// Classes
-export interface TS5MessageHandlerOptions {
+export interface ITS5ConnectionHandler {
-  handleAuthMessage?: (data: IAuthMessage) => void;
+  ws: WebSocket;
-  handleClientMoved?: (data: IClientMovedMessage) => void;
+  authenticated: boolean;
-  handleClientPropertiesUpdate?: (data: IClientPropertiesUpdatedMessage) => void;
+  remoteAppPort: number;
-  handleTalkStatusChanged?: (data: ITalkStatusChangedMessage) => void;
+  dataHandler: ITS5DataHandler;
-  handleClientSelfPropertyUpdated?: (data: IClientSelfPropertyUpdatedMessage) => void;
+  messageHandler: ITS5MessageHandler;
+  reconnect(): void;
+  connect(): void;
 }
 
+export interface ITS5DataHandler {
+  localConnections: IConnection[];
+  localChannels: IChannel[];
+  localClients: IClient[];
+  setConnections: React.Dispatch<React.SetStateAction<IConnection[]>>;
+  setChannels: React.Dispatch<React.SetStateAction<IChannel[]>>;
+  setClients: React.Dispatch<React.SetStateAction<IClient[]>>;
+  clearAll(): void;
+  addConnection(connection: IConnection): void;
+  addChannel(channel: IChannel): void;
+  addClient(client: IClient): void;
+  updateConnection(connection: IConnection): void;
+  updateChannel(channel: IChannel): void;
+  updateClient(client: IClient): void;
+  removeConnection(connection: IConnection): void;
+  removeChannel(channel: IChannel): void;
+  removeClient(client: IClient): void;
+  getConnectionById(id: number): IConnection | undefined;
+  getChannelById(id: number, connectionId: number): IChannel | undefined;
+  getClientById(id: number, connectionId: number): IClient | undefined;
+}
+
+export interface ITS5MessageHandler {
+  ws: WebSocket;
+  dataHandler: ITS5DataHandler;
+  setActiveConnectionStateId: React.Dispatch<React.SetStateAction<number>>;
+  activeConnectionId: number;
+  setActiveConnection(connectionId: number): void;
+  parseChannelInfos(channelInfos: IChannelInfos, connection: IConnection): void;
+  handleAuthMessage(data: IAuthMessage): void;
+  handleClientMovedMessage(data: IClientMovedMessage): void;
+  handleClientPropertiesUpdatedMessage(data: IClientPropertiesUpdatedMessage): void;
+  handleTalkStatusChangedMessage(data: ITalkStatusChangedMessage): void;
+  handleClientSelfPropertyUpdatedMessage(data: IClientSelfPropertyUpdatedMessage): void;
+  handleServerPropertiesUpdatedMessage(data: IServerPropertiesUpdatedMessage): void;
+  handleConnectStatusChangedMessage(data: IConnectStatusChangedMessage): void;
+  handleChannelsMessage(data: IChannelsMessage): void;
+}
+
+// Remote App
 export interface IAuthSenderPayload {
   type: "auth";
   payload: {

src/styles/Viewer.scss

@@ -4,10 +4,19 @@
   gap: 0 0;
   padding: 1rem;
 
-  h3 {
+  .channelNameContainer {
-    font-size: 1.5rem;
+    display: flex;
-    font-weight: 500;
+    align-items: center;
-    margin: 0;
+    margin-bottom: 20px;
+    h3 {
+      font-size: 1.7rem;
+      font-weight: 500;
+      margin: 0;
+      background-color: rgba(47, 49, 54, 0.5);
+      padding: 0.25rem 0.5rem;
+      border-radius: 0.25rem;
+      color: white;
+    }
   }
 
   .client {

src/teamspeak5Handler.ts

@@ -1,544 +0,0 @@
-import { IAuthMessage, IAuthSenderPayload, IChannel, IChannelInfos, IChannelsMessage, IClient, IClientInfo, IClientMovedMessage, IClientPropertiesUpdatedMessage, IClientSelfPropertyUpdatedMessage, IConnectStatusChangedMessage, IConnection, IServerPropertiesUpdatedMessage, ITalkStatusChangedMessage } from "interfaces/teamspeak";
-
-
-// Establish connection to TS5 client
-// Main class
-export class TS5Connection {
-  ws: WebSocket; // Websocket connection to TS5 client
-  authenticated = false; // Is the connection authenticated?
-  remoteAppPort: number; // Port of TS5 client
-  dataHandler: TS5DataHandler; // Handles data/lists and states
-  messageHandler: TS5MessageHandler; // Handles messages received from TS5 client
-
-  constructor(
-    // Port of TS5 client
-    remoteAppPort: number,
-
-    // State setters for dataHandler
-    setConnections: React.Dispatch<React.SetStateAction<IConnection[]>>,
-    setChannels: React.Dispatch<React.SetStateAction<IChannel[]>>,
-    setClients: React.Dispatch<React.SetStateAction<IClient[]>>,
-    setActiveConnectionStateId: React.Dispatch<React.SetStateAction<number>>,
-  ) {
-    // Create websocket connection to TS5 client
-    this.remoteAppPort = remoteAppPort;
-    this.ws = new WebSocket(`ws://localhost:${this.remoteAppPort}`);
-
-    // Create dataHandler and messageHandler
-    this.dataHandler = new TS5DataHandler(setConnections, setChannels, setClients);
-    this.messageHandler = new TS5MessageHandler(this.ws, this.dataHandler, setActiveConnectionStateId);
-  }
-
-  reconnect() {
-    console.log("Reconnecting...")
-    this.ws.close();
-
-    this.ws = new WebSocket(`ws://localhost:${this.remoteAppPort}`);
-
-    this.dataHandler.clearAll();
-    this.authenticated = false;
-    this.connect();
-  }
-
-  // Connect to TS5 client
-  connect() {
-    console.log('Connecting to TS5 client...');
-    console.log(localStorage.getItem("apiKey"))
-
-    // Create authentication payload
-    const initalPayload: IAuthSenderPayload = {
-      type: "auth",
-      payload: {
-        identifier: "de.tealfire.obs",
-        version: "1.0.0",
-        name: "TS5 OBS Overlay",
-        description: "A OBS overlay for TS5 by DerTyp876",
-        content: {
-          apiKey: localStorage.getItem("apiKey") ?? "",
-        },
-      },
-    };
-
-    this.ws.onopen = () => {
-      // Send authentication payload to TS5 client
-      console.log("Sending auth payload...")
-      this.ws.send(JSON.stringify(initalPayload));
-    };
-
-    this.ws.onclose = (event) => {
-      console.log("WebSocket connection closed", event);
-
-      // If the connection was closed before authentication, remove the API key from local storage
-      // OBS weirdly caches the localstorage and is very stubborn about clearing it (even when clicken "Clear Cache")
-      if (!this.authenticated) {
-        console.log("WebSocket connection closed before authentication");
-        localStorage.removeItem("apiKey");
-      }
-
-      setTimeout(() => {
-        this.reconnect();
-      }, 2000);
-    };
-
-    // Handle messages received from TS5 client
-    // See TS5MessageHandler class
-    this.ws.onmessage = (event) => {
-      const data = JSON.parse(event.data);
-
-      console.log(data)
-
-      switch (data.type) {
-        case "auth":
-          this.messageHandler.handleAuthMessage(data);
-          this.authenticated = true;
-          break;
-        case "clientMoved":
-          this.messageHandler.handleClientMovedMessage(data);
-          break;
-        case "clientPropertiesUpdated":
-          this.messageHandler.handleClientPropertiesUpdatedMessage(data);
-          break;
-        case "talkStatusChanged":
-          this.messageHandler.handleTalkStatusChangedMessage(data);
-          break;
-        case "serverPropertiesUpdated":
-          this.messageHandler.handleServerPropertiesUpdatedMessage(data);
-          //this.ws.close();
-          break;
-        case "connectStatusChanged":
-          this.messageHandler.handleConnectStatusChangedMessage(data);
-          break;
-        case "clientSelfPropertyUpdated":
-          this.messageHandler.handleClientSelfPropertyUpdatedMessage(data);
-          break;
-        case "channels":
-          this.messageHandler.handleChannelsMessage(data);
-          break;
-        default:
-          console.log(`No handler for event type: ${data.type}`);
-          break;
-      }
-    };
-  }
-}
-
-class TS5DataHandler {
-  // Local lists of connections, channels and clients
-  // These lists are used to keep track of the data independent of the App.tsx state
-  localConnections: IConnection[];
-  localChannels: IChannel[];
-  localClients: IClient[];
-
-  // State setters for App.tsx
-  setConnections: React.Dispatch<React.SetStateAction<IConnection[]>>;
-  setChannels: React.Dispatch<React.SetStateAction<IChannel[]>>;
-  setClients: React.Dispatch<React.SetStateAction<IClient[]>>;
-
-  constructor(
-    // State setters for App.tsx
-    setConnections: React.Dispatch<React.SetStateAction<IConnection[]>>,
-    setChannels: React.Dispatch<React.SetStateAction<IChannel[]>>,
-    setClients: React.Dispatch<React.SetStateAction<IClient[]>>
-  ) {
-    this.setConnections = setConnections;
-    this.setChannels = setChannels;
-    this.setClients = setClients;
-
-    this.localConnections = [];
-    this.localChannels = [];
-    this.localClients = [];
-  }
-
-  // Update App.tsx states
-  private updateConnectionsState() {
-    this.setConnections([...this.localConnections]);
-  }
-
-  private updateChannelsState() {
-    this.setChannels([...this.localChannels]);
-  }
-
-  private updateClientsState() {
-    this.setClients([...this.localClients]);
-  }
-
-  // Clear all data
-  clearAll() {
-    this.localConnections = [];
-    this.localChannels = [];
-    this.localClients = [];
-
-    this.updateConnectionsState();
-    this.updateChannelsState();
-    this.updateClientsState();
-  }
-
-  // Add data to local lists and update states
-  addConnection(connection: IConnection) {
-    console.log("Adding connection...", connection)
-
-    const existingConnection: IConnection | undefined = this.localConnections.find((localConnection: IConnection) => localConnection.id === connection.id);
-
-    if (existingConnection == undefined) {
-      this.localConnections.push(connection);
-      this.updateConnectionsState();
-      console.log("Connection added")
-    } else {
-      console.log("Connection already exists")
-    }
-  }
-
-  addChannel(channel: IChannel) {
-    console.log("Adding channel...", channel)
-    const existingChannel: IChannel | undefined = this.localChannels.find((localChannel: IChannel) => localChannel.id === channel.id && localChannel.connection.id === channel.connection.id);
-
-    if (existingChannel == undefined) {
-      this.localChannels.push(channel);
-      this.updateChannelsState();
-      console.log("Channel added")
-    } else {
-      console.log("Channel already exists")
-    }
-  }
-
-  addClient(client: IClient) {
-    console.log("Adding client...", client)
-    const existingClient: IClient | undefined = this.localClients.find((localClient: IClient) => localClient.id === client.id && localClient.channel?.connection.id === client.channel?.connection.id);
-
-    if (existingClient == undefined) {
-      this.localClients.push(client);
-      this.updateClientsState();
-      console.log("Client added")
-    } else {
-      console.log("Client already exists")
-    }
-  }
-
-  // Update data in local lists and update states
-  updateConnection(connection: IConnection) {
-    console.log("Updating connection...", connection)
-    const existingConnection: IConnection | undefined = this.localConnections.find((localConnection: IConnection) => localConnection.id === connection.id);
-
-    if (existingConnection !== undefined) {
-      this.localConnections[this.localConnections.indexOf(existingConnection)] = connection;
-      this.updateConnectionsState();
-      console.log("Connection updated")
-    } else {
-      console.log("Connection does not exist")
-    }
-  }
-
-  updateChannel(channel: IChannel) {
-    console.log("Updating channel...", channel)
-    const existingChannel: IChannel | undefined = this.localChannels.find((localChannel: IChannel) => localChannel.id === channel.id && localChannel.connection.id === channel.connection.id);
-
-    if (existingChannel !== undefined) {
-      this.localChannels[this.localChannels.indexOf(existingChannel)] = channel;
-      this.updateChannelsState();
-      console.log("Channel updated")
-    } else {
-      console.log("Channel does not exist")
-    }
-  }
-
-  updateClient(client: IClient) {
-    console.log("Updating client...", client)
-    const existingClient: IClient | undefined = this.localClients.find((localClient: IClient) => localClient.id === client.id && localClient.channel?.connection.id === client.channel?.connection.id);
-
-    if (existingClient !== undefined) {
-      this.localClients[this.localClients.indexOf(existingClient)] = client;
-      this.updateClientsState();
-      console.log("Client updated")
-    } else {
-      console.log("Client does not exist")
-    }
-  }
-
-  // Remove data from local lists and update states
-  removeConnection(connection: IConnection) {
-    console.log("Removing connection...", connection)
-    const existingConnection: IConnection | undefined = this.localConnections.find((localConnection: IConnection) => localConnection.id === connection.id);
-
-    if (existingConnection !== undefined) {
-      this.localConnections.splice(this.localConnections.indexOf(existingConnection), 1);
-
-      // Remove all channels and clients associated with the connection
-      this.localChannels = this.localChannels.filter((localChannel: IChannel) => localChannel.connection.id !== connection.id);
-      this.localClients = this.localClients.filter((localClient: IClient) => localClient.channel?.connection.id !== connection.id);
-
-      this.updateChannelsState();
-      this.updateClientsState();
-      this.updateConnectionsState();
-      console.log("Connection removed")
-    } else {
-      console.log("Connection does not exist")
-    }
-  }
-
-  removeChannel(channel: IChannel) {
-    console.log("Removing channel...", channel)
-    const existingChannel: IChannel | undefined = this.localChannels.find((localChannel: IChannel) => localChannel.id === channel.id && localChannel.connection.id === channel.connection.id);
-
-    if (existingChannel !== undefined) {
-      this.localChannels.splice(this.localChannels.indexOf(existingChannel), 1);
-
-      // Remove all clients associated with the channel
-      this.localClients = this.localClients.filter((localClient: IClient) => localClient.channel?.id !== channel.id);
-
-      this.updateClientsState();
-      this.updateChannelsState();
-      console.log("Channel removed")
-    } else {
-      console.log("Channel does not exist")
-    }
-  }
-
-  removeClient(client: IClient) {
-    console.log("Removing client...", client)
-    const existingClient: IClient | undefined = this.localClients.find((localClient: IClient) => localClient.id === client.id && localClient.channel?.connection.id === client.channel?.connection.id);
-
-    if (existingClient !== undefined) {
-      this.localClients.splice(this.localClients.indexOf(existingClient), 1);
-      this.updateClientsState();
-      console.log("Client removed")
-    } else {
-      console.log("Client does not exist")
-    }
-  }
-
-  // Helper functions
-  getConnectionById(id: number): IConnection | undefined {
-    return this.localConnections.find((connection: IConnection) => connection.id === id);
-  }
-
-  getChannelById(id: number, connectionId: number): IChannel | undefined {
-    return this.localChannels.find((channel: IChannel) => channel.id === id && channel.connection?.id === connectionId);
-  }
-
-  getClientById(id: number, connectionId: number): IClient | undefined {
-    return this.localClients.find((client: IClient) => client.id === id && client.channel?.connection.id === connectionId);
-  }
-
-
-
-}
-
-// Handle incoming messages from TS5 client
-class TS5MessageHandler {
-  ws: WebSocket;
-  dataHandler: TS5DataHandler;
-
-  setActiveConnectionStateId: React.Dispatch<React.SetStateAction<number>>;
-  activeConnectionId = 0;
-
-  constructor(ws: WebSocket, dataHandler: TS5DataHandler, setActiveConnectionStateId: React.Dispatch<React.SetStateAction<number>>) {
-    this.ws = ws;
-    this.dataHandler = dataHandler;
-    this.setActiveConnectionStateId = setActiveConnectionStateId;
-  }
-
-  setActiveConnection(connectionId: number) {
-    this.activeConnectionId = connectionId;
-    this.setActiveConnectionStateId(connectionId);
-  }
-
-  parseChannelInfos(channelInfos: IChannelInfos, connection: IConnection) {
-    channelInfos.rootChannels.forEach((channel: IChannel) => {
-      this.dataHandler.addChannel({ ...channel, connection: connection });
-
-      if (channelInfos) {
-        if (channelInfos.subChannels !== null && channel.id in channelInfos.subChannels) {
-          channelInfos.subChannels[channel.id].forEach((subChannel: IChannel) => {
-            this.dataHandler.addChannel({ ...subChannel, connection: connection });
-          });
-        }
-      }
-    });
-  }
-
-  // This message is sent by the TS5 server when the client is connected
-  // It contains the initial data
-  handleAuthMessage(data: IAuthMessage) {
-    console.log("handleAuthMessage", data);
-
-    localStorage.setItem("apiKey", data.payload.apiKey);
-
-    // Process auth payload and add initial data
-    data.payload.connections.forEach((connection: IConnection) => {
-      this.dataHandler.addConnection(connection);
-
-      // Add channels
-      if (connection.channelInfos !== undefined) {
-        this.parseChannelInfos(connection.channelInfos, connection);
-      }
-
-      // Add clients
-      connection.clientInfos?.forEach((clientInfo: IClientInfo) => {
-        const clientChannel: IChannel | undefined = this.dataHandler.getChannelById(clientInfo.channelId, connection.id);
-
-        if (clientChannel !== undefined) {
-          this.dataHandler.addClient({
-            id: clientInfo.id,
-            talkStatus: 0,
-            channel: { ...clientChannel, connection: connection },
-            properties: clientInfo.properties,
-          });
-        }
-      });
-    });
-  }
-
-  // This message is sent by the TS5 server when a client moves a channel OR joins/leaves the server
-  handleClientMovedMessage(data: IClientMovedMessage) {
-    console.log("handleClientMoved", data);
-
-    const client: IClient | undefined = this.dataHandler.getClientById(data.payload.clientId, data.payload.connectionId);
-
-
-    //* This gets called when we are connecting to the server and the new clients get loaded
-    if (+data.payload.oldChannelId == 0) { // Create new client(when connecting to server)
-      //set timout to wait for channels to be created
-      setTimeout(() => {
-        console.log("---> New Client created")
-        const newChannel = this.dataHandler.getChannelById(data.payload.newChannelId, data.payload.connectionId);
-        if (newChannel !== undefined) {
-          this.dataHandler.addClient(
-            {
-              id: data.payload.clientId,
-              talkStatus: 0,
-              channel: newChannel,
-              properties: data.payload.properties,
-            });
-        }
-      }, 2000);
-    } else {//* This gets called when a client moves a channel OR joins/leaves the server
-      const newChannel: IChannel | undefined = this.dataHandler.getChannelById(data.payload.newChannelId, data.payload.connectionId);
-
-      if (newChannel === undefined || newChannel.id === 0) {
-        console.log("---> Client left")
-
-        if (client !== undefined) {
-          this.dataHandler.removeClient(client);
-
-        }
-        return;
-      }
-
-      if (client !== undefined) { // Client already exists
-
-        // Client moved
-        console.log("---> Client moved")
-
-        this.dataHandler.updateClient({
-          ...client,
-          channel: newChannel,
-        });
-
-      } else { // Client does not exist
-        // Client joined
-        console.log("---> New Client joined")
-        this.dataHandler.addClient(
-          {
-            id: data.payload.clientId,
-            talkStatus: 0,
-            channel: newChannel,
-            properties: data.payload.properties,
-          }
-        );
-      }
-    }
-  }
-
-  handleClientPropertiesUpdatedMessage(data: IClientPropertiesUpdatedMessage) {
-    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);
-
-    const client: IClient | undefined = this.dataHandler.getClientById(data.payload.clientId, data.payload.connectionId);
-
-    if (client !== undefined) {
-      this.dataHandler.updateClient({
-        ...client,
-        talkStatus: data.payload.status,
-      });
-    }
-
-    console.log(this.dataHandler.localConnections)
-    console.log(this.dataHandler.localChannels)
-    console.log(this.dataHandler.localClients)
-
-  }
-  handleClientSelfPropertyUpdatedMessage(data: IClientSelfPropertyUpdatedMessage) {
-    console.log("handleClientSelfPropertyUpdated", data);
-
-    const connection: IConnection | undefined = this.dataHandler.getConnectionById(this.activeConnectionId);
-
-    if (data.payload.flag == "inputHardware" || connection == undefined) { // sadly thats the only way to detect if a server is active or not
-      this.setActiveConnection(data.payload.connectionId);
-    }
-  }
-
-  handleServerPropertiesUpdatedMessage(data: IServerPropertiesUpdatedMessage) {
-    console.log("handleServerPropertiesUpdated", data);
-
-    const connection: IConnection | undefined = this.dataHandler.getConnectionById(data.payload.connectionId);
-
-    if (connection !== undefined) { // Update existing connection
-      this.dataHandler.updateConnection({
-        ...connection,
-        properties: data.payload.properties,
-      });
-    }
-  }
-
-  handleConnectStatusChangedMessage(data: IConnectStatusChangedMessage) {
-    console.log("handleConnectStatusChanged", data);
-
-    if (data.payload.status === 0) { // Disconnected from server
-      const connection: IConnection | undefined = this.dataHandler.getConnectionById(data.payload.connectionId);
-
-      if (connection !== undefined) {
-        this.dataHandler.removeConnection(connection);
-      }
-    }
-
-    // Status 1-3 are the connection steps (connecting, authenticating, etc.) (i guess)
-
-    if (data.payload.status === 4) { // Connected to server
-      this.dataHandler.addConnection({
-        id: data.payload.connectionId,
-        clientId: data.payload.info.clientId,
-      });
-    }
-  }
-
-  handleChannelsMessage(data: IChannelsMessage) {
-    console.log("handleChannels", data);
-
-    // Wait a bit for the connection to be added
-    setTimeout(() => {
-      console.log(this.dataHandler.localConnections);
-      console.log(data.payload.connectionId)
-      console.log(this.dataHandler.localConnections.filter((connection: IConnection) => connection.id === data.payload.connectionId)[0]);
-      console.log(this.dataHandler.localConnections.find((connection: IConnection) => connection.id === data.payload.connectionId));
-      const connection: IConnection | undefined = this.dataHandler.getConnectionById(data.payload.connectionId);
-      console.log(connection);
-      if (connection !== undefined) {
-        this.parseChannelInfos(data.payload.info, connection);
-        console.log(data.payload.info)
-      }
-    }, 1000);
-
-  }
-}

src/utils/logger.tsx

@@ -0,0 +1,31 @@
+export default class Logger {
+  // Log message to the console
+  public static log(message: string, data: object | null = null): void {
+    console.log(`[Log] %c${message}`.trim(), "color: gray", data ?? "");
+  }
+
+  // Log warning to the console
+  public static warn(message: string, data: object | null = null): void {
+    console.warn(`%c${message}`.trim(), data ?? "");
+  }
+
+  // Log error to the console
+  public static error(message: string, data: object | null = null): void {
+    console.error(`%c${message}`.trim(), data ?? "");
+  }
+
+  // Log message received from the websocket to the console
+  public static wsReceived(data: object, message: string | undefined = undefined): void {
+    console.log(`%c[WS Recieved] ${message ?? ""}`.trim(), "color: #8258c7", data);
+  }
+
+  // Log message sent to the websocket to the console
+  public static wsSent(data: object, message: string | undefined = undefined): void {
+    console.log(`%c[WS Sent] ${message ?? ""}`.trim(), "color: #4eb570", data);
+  }
+
+  // Log message to the console with a timestamp
+  public static ts(message: string, data: object | null = null): void {
+    console.log(`%c[TS] ${message}`.trim(), "color: #2e6bc7", data ?? "");
+  }
+}

tsconfig.json

@@ -6,15 +6,15 @@
     "module": "ESNext",
     "skipLibCheck": true,
 
-    "baseUrl": "./src",
+    "baseUrl": ".",
-
     "paths": {
-      "@/*": ["/src/*"],
+      "@/*": ["src/*"],
-      "@components/*": ["/src/components/*"],
+      "@components/*": ["src/components/*"],
-      "@assets/*": ["/src/assets/*"],
+      "@assets/*": ["src/assets/*"],
-      "@styles/*": ["/src/styles/*"],
+      "@styles/*": ["src/styles/*"],
-      "@utils/*": ["/src/utils/*"],
+      "@utils/*": ["src/utils/*"],
-      "@interfaces/*": ["/src/interfaces/*"]
+      "@interfaces/*": ["src/interfaces/*"],
+      "@handlers/*": ["src/handlers/*"]
     },
 
     /* Bundler mode */

vite.config.ts

@@ -1,18 +1,20 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
 import { viteSingleFile } from "vite-plugin-singlefile"
+import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   base: "./",
   resolve: {
     alias: {
-      "@": "/src",
+      '@': path.resolve(__dirname, './src'),
-      "@components": "/src/components",
+      '@assets': path.resolve(__dirname, './src/assets'),
-      "@styles": "/src/styles",
+      '@components': path.resolve(__dirname, './src/components'),
-      "@assets": "/src/assets",
+      '@handlers': path.resolve(__dirname, './src/handlers'),
-      "@interfaces": "/src/interfaces",
+      '@interfaces': path.resolve(__dirname, './src/interfaces'),
-      "@utils": "/src/utils",
+      '@utils': path.resolve(__dirname, './src/utils'),
+      '@styles': path.resolve(__dirname, './src/styles'),
     },
   },
   plugins: [react(), viteSingleFile({ useRecommendedBuildConfig: false })],