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

[feature] add hardware muted inputs

README.md

@@ -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 |
+| 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)
 

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}
+      {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

@@ -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...');
+    Logger.log('Connecting to TS5 client...');
-    console.log(localStorage.getItem("apiKey"))
 
     // 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
-
+        Logger.ts(`Client moved (${client.channel.connection.id} - ${client.id} - ${client.properties.nickname})`)
-        // Client moved
-        console.log("---> Client moved")
 
         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.localConnections)
-    console.log(this.dataHandler.localChannels)
+    // console.log(this.dataHandler.localChannels)
-    console.log(this.dataHandler.localClients)
+    // 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;
 
+  .channelNameContainer {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
     h3 {
-    font-size: 1.5rem;
+      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 ?? "");
+  }
+}