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

[feature] add hardware muted inputs

README.md

@@ -14,7 +14,7 @@ This App uses the new "Remote Apps" feature of Teamspeak 5.
 
 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)  
-  1.1. (optional) You can rename the file. Just remember using the new file name in the future instead of `index.html` 
+   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)
 
@@ -34,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
@@ -43,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 |
-| --------------- | -------------------------------------- | ------- |
-| `remoteAppPort` | The port of the Teamspeak 5 remote app | `5899`  |
+| Parameter         | Description                              | Type    | Default         |
+| ----------------- | ---------------------------------------- | ------- | --------------- |
+| `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)
 

src/App.tsx

@@ -38,6 +38,7 @@ export default function App() {
   useEffect(() => {
     const remoteAppPort = searchParams.get("remoteAppPort");
 
+    console.log(searchParams.get("hideNonTalking"));
     const tsConnection: ITS5ConnectionHandler = new TS5ConnectionHandler(
       parseInt(remoteAppPort ?? "5899"),
       setConnections,
@@ -55,6 +56,9 @@ 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 && client.channel.connection.id === activeConnectionId) {

src/Viewer.tsx

@@ -5,19 +5,87 @@ 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}
-      {clients?.map((client) => {
+      {showChannelName ? (
+        <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

@@ -1,6 +1,7 @@
 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
@@ -22,6 +23,8 @@ export class TS5ConnectionHandler implements ITS5ConnectionHandler {
     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}`);
@@ -32,7 +35,7 @@ export class TS5ConnectionHandler implements ITS5ConnectionHandler {
   }
 
   reconnect() {
-    console.log("Reconnecting...")
+    Logger.log("Reconnecting...")
     this.ws.close();
 
     this.ws = new WebSocket(`ws://localhost:${this.remoteAppPort}`);
@@ -44,8 +47,7 @@ export class TS5ConnectionHandler implements ITS5ConnectionHandler {
 
   // Connect to TS5 client
   connect() {
-    console.log('Connecting to TS5 client...');
-    console.log(localStorage.getItem("apiKey"))
+    Logger.log('Connecting to TS5 client...');
 
     // Create authentication payload
     const initalPayload: IAuthSenderPayload = {
@@ -63,17 +65,17 @@ export class TS5ConnectionHandler implements ITS5ConnectionHandler {
 
     this.ws.onopen = () => {
       // Send authentication payload to TS5 client
-      console.log("Sending auth payload...")
       this.ws.send(JSON.stringify(initalPayload));
+      Logger.wsSent(initalPayload);
     };
 
     this.ws.onclose = (event) => {
-      console.log("WebSocket connection closed", 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) {
-        console.log("WebSocket connection closed before authentication");
+        Logger.log("WebSocket connection closed before authentication");
         localStorage.removeItem("apiKey");
       }
 
@@ -87,7 +89,7 @@ export class TS5ConnectionHandler implements ITS5ConnectionHandler {
     this.ws.onmessage = (event) => {
       const data = JSON.parse(event.data);
 
-      console.log(data)
+      Logger.wsReceived(data)
 
       switch (data.type) {
         case "auth":
@@ -105,7 +107,6 @@ export class TS5ConnectionHandler implements ITS5ConnectionHandler {
           break;
         case "serverPropertiesUpdated":
           this.messageHandler.handleServerPropertiesUpdatedMessage(data);
-          //this.ws.close();
           break;
         case "connectStatusChanged":
           this.messageHandler.handleConnectStatusChangedMessage(data);
@@ -117,7 +118,7 @@ export class TS5ConnectionHandler implements ITS5ConnectionHandler {
           this.messageHandler.handleChannelsMessage(data);
           break;
         default:
-          console.log(`No handler for event type: ${data.type}`);
+          Logger.log(`No handler for event type: ${data.type}`);
           break;
       }
     };

src/handlers/teamspeak/dataHandler.ts

@@ -1,3 +1,4 @@
+import Logger from "@/utils/logger";
 import { IConnection, IChannel, IClient, ITS5DataHandler } from "@interfaces/teamspeak";
 
 
@@ -58,88 +59,88 @@ export class TS5DataHandler implements ITS5DataHandler {
 
   // Add data to local lists and update states
   addConnection(connection: IConnection) {
-    console.log("Adding connection...", connection)
+    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();
-      console.log("Connection added")
+      Logger.log("Connection added")
     } else {
-      console.log("Connection already exists")
+      Logger.log("Connection already exists")
     }
   }
 
   addChannel(channel: IChannel) {
-    console.log("Adding channel...", channel)
+    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();
-      console.log("Channel added")
+      Logger.log("Channel added")
     } else {
-      console.log("Channel already exists")
+      Logger.log("Channel already exists")
     }
   }
 
   addClient(client: IClient) {
-    console.log("Adding client...", client)
+    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();
-      console.log("Client added")
+      Logger.log("Client added")
     } else {
-      console.log("Client already exists")
+      Logger.log("Client already exists")
     }
   }
 
   // Update data in local lists and update states
   updateConnection(connection: IConnection) {
-    console.log("Updating connection...", connection)
+    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();
-      console.log("Connection updated")
+      Logger.log("Connection updated")
     } else {
-      console.log("Connection does not exist")
+      Logger.log("Connection does not exist")
     }
   }
 
   updateChannel(channel: IChannel) {
-    console.log("Updating channel...", channel)
+    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();
-      console.log("Channel updated")
+      Logger.log("Channel updated")
     } else {
-      console.log("Channel does not exist")
+      Logger.log("Channel does not exist")
     }
   }
 
   updateClient(client: IClient) {
-    console.log("Updating client...", client)
+    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();
-      console.log("Client updated")
+      Logger.log("Client updated")
     } else {
-      console.log("Client does not exist")
+      Logger.log("Client does not exist")
     }
   }
 
   // Remove data from local lists and update states
   removeConnection(connection: IConnection) {
-    console.log("Removing connection...", connection)
+    Logger.log("Removing connection...", connection)
     const existingConnection: IConnection | undefined = this.localConnections.find((localConnection: IConnection) => localConnection.id === connection.id);
 
     if (existingConnection !== undefined) {
@@ -152,14 +153,14 @@ export class TS5DataHandler implements ITS5DataHandler {
       this.updateChannelsState();
       this.updateClientsState();
       this.updateConnectionsState();
-      console.log("Connection removed")
+      Logger.log("Connection removed")
     } else {
-      console.log("Connection does not exist")
+      Logger.log("Connection does not exist")
     }
   }
 
   removeChannel(channel: IChannel) {
-    console.log("Removing channel...", channel)
+    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) {
@@ -170,22 +171,22 @@ export class TS5DataHandler implements ITS5DataHandler {
 
       this.updateClientsState();
       this.updateChannelsState();
-      console.log("Channel removed")
+      Logger.log("Channel removed")
     } else {
-      console.log("Channel does not exist")
+      Logger.log("Channel does not exist")
     }
   }
 
   removeClient(client: IClient) {
-    console.log("Removing client...", client)
+    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();
-      console.log("Client removed")
+      Logger.log("Client removed")
     } else {
-      console.log("Client does not exist")
+      Logger.log("Client does not exist")
     }
   }
 

src/handlers/teamspeak/messageHandler.ts

@@ -1,3 +1,4 @@
+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
@@ -36,8 +37,6 @@ export class TS5MessageHandler implements ITS5MessageHandler {
   // 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
@@ -67,8 +66,6 @@ export class TS5MessageHandler implements ITS5MessageHandler {
 
   // 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);
 
 
@@ -76,7 +73,6 @@ export class TS5MessageHandler implements ITS5MessageHandler {
     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(
@@ -86,25 +82,23 @@ export class TS5MessageHandler implements ITS5MessageHandler {
               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) {
-        console.log("---> Client left")
-
+        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
-
-        // Client moved
-        console.log("---> Client moved")
+        Logger.ts(`Client moved (${client.channel.connection.id} - ${client.id} - ${client.properties.nickname})`)
 
         this.dataHandler.updateClient({
           ...client,
@@ -113,7 +107,8 @@ export class TS5MessageHandler implements ITS5MessageHandler {
 
       } else { // Client does not exist
         // Client joined
-        console.log("---> New Client joined")
+        Logger.ts(`Client joined (${data.payload.connectionId} - ${data.payload.clientId} - ${data.payload.properties.nickname})`)
+
         this.dataHandler.addClient(
           {
             id: data.payload.clientId,
@@ -127,8 +122,6 @@ export class TS5MessageHandler implements ITS5MessageHandler {
   }
 
   handleClientPropertiesUpdatedMessage(data: IClientPropertiesUpdatedMessage) {
-    console.log("handleClientPropertiesUpdate", data);
-
     const client: IClient | undefined = this.dataHandler.getClientById(data.payload.clientId, data.payload.connectionId);
 
     if (client !== undefined) {
@@ -140,8 +133,6 @@ export class TS5MessageHandler implements ITS5MessageHandler {
   }
 
   handleTalkStatusChangedMessage(data: ITalkStatusChangedMessage) {
-    console.log("handleTalkStatusChanged", data);
-
     const client: IClient | undefined = this.dataHandler.getClientById(data.payload.clientId, data.payload.connectionId);
 
     if (client !== undefined) {
@@ -151,14 +142,12 @@ export class TS5MessageHandler implements ITS5MessageHandler {
       });
     }
 
-    console.log(this.dataHandler.localConnections)
-    console.log(this.dataHandler.localChannels)
-    console.log(this.dataHandler.localClients)
+    // 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
@@ -167,8 +156,6 @@ export class TS5MessageHandler implements ITS5MessageHandler {
   }
 
   handleServerPropertiesUpdatedMessage(data: IServerPropertiesUpdatedMessage) {
-    console.log("handleServerPropertiesUpdated", data);
-
     const connection: IConnection | undefined = this.dataHandler.getConnectionById(data.payload.connectionId);
 
     if (connection !== undefined) { // Update existing connection
@@ -180,8 +167,6 @@ export class TS5MessageHandler implements ITS5MessageHandler {
   }
 
   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);
 
@@ -201,19 +186,11 @@ export class TS5MessageHandler implements ITS5MessageHandler {
   }
 
   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/styles/Viewer.scss

@@ -4,10 +4,19 @@
   gap: 0 0;
   padding: 1rem;
 
-  h3 {
-    font-size: 1.5rem;
-    font-weight: 500;
-    margin: 0;
+  .channelNameContainer {
+    display: flex;
+    align-items: center;
+    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/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 ?? "");
+  }
+}