Merge pull request #15 from DerTyp876/new_react_ts_version

Reworked project with React/Vite
2025-10-28 20:32:17 +01:00 · 2023-06-28 17:47:59 +02:00
parent dbca028c1d f2b1636dc3
commit f6b5fcc35d
34 changed files with 3744 additions and 528 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -0,0 +1,14 @@
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': 'warn',
+  },
+}
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/config.js
+++ b/config.js
@@ -1,14 +0,0 @@
-const CONFIG = {
-  remoteAppPort: 5899, // The port the TS5 client uses for remote apps (TS client -> settings/Remote Apps/Port)
-
-  // Style of the overlay
-  style: {
-    fontBackground: "rgba(19, 20, 33, 0.5)",
-    fontColor: "#ffffff",
-    fontSize: "70pt",
-    fontStrokeSize: "3px",
-    fontStrokeColor: "#000000",
-  },
-  hideSelf: false, // Hide yourself in the overlay
-  hideSilent: false, // Only show talking people
-};
--- a/css/style.css
+++ b/css/style.css
@@ -1,28 +0,0 @@
-* {
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: bold;
-}
-
-.client-div {
-  margin-top: 15px;
-}
-.client-img-div {
-  float: left;
-  width: 107px;
-}
-
-.client-img-div img {
-  display: block;
-}
-
-.client-text-div {
-  margin-left: 130px;
-}
-
-.client-text-div p {
-  display: inline;
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
--- a/img/muted_input.svg
+++ b/img/muted_input.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><title>muted_input</title><g id="muted_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="#c9070a"/></g></svg>
--- a/img/muted_output.svg
+++ b/img/muted_output.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><title>muted_output</title><g id="muted_output"><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="#c9070a"/><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.11,45.85H9.53A4.57,4.57,0,0,0,5,50.38V77.62a4.57,4.57,0,0,0,4.54,4.54H22.25l37.2-21.48V25.42a4.57,4.57,0,0,0-4.54-4.54" fill="#c9070a"/><path d="M85.1,56.6l-7.87,4.54A10,10,0,0,1,77.61,64c0,8.58-8.23,7.09-8.23,12.48A4.53,4.53,0,0,0,73.92,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.92,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.92,47" fill="#c9070a"/><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.24,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.24,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="#c9070a"/><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>
--- a/img/off.svg
+++ b/img/off.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><title>player_off_v2</title><g id="player_off_v2.svg"><path d="M64,128a64,64,0,1,1,64-64A64,64,0,0,1,64,128Z" fill="#3e4f5e"/></g></svg>
--- a/img/on.svg
+++ b/img/on.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><title>player_on_v2</title><g id="player_on_v2.svg"><path d="M64,128a64,64,0,1,1,64-64A64,64,0,0,1,64,128Z" fill="#00b4df"/></g></svg>
--- a/index.html
+++ b/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>TS5-OBS-Overlay</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
+</html>
--- a/js/app.js
+++ b/js/app.js
@@ -1,87 +0,0 @@
-// Main entry point
-function main() {
-  let authenticated = false; // using this bool to determine if an user is already authenticated
-
-  // Reset variables. Important so that the app can easly restart or reconnected.
-  clientList.clear();
-  channelList.clear();
-  selfClient = null;
-
-  // Initiliaze websocket connection to TS5 client
-  const ws = new WebSocket(`ws://localhost:${CONFIG.remoteAppPort}`);
-  const initalPayload = {
-    type: "auth",
-    payload: {
-      identifier: "de.tealfire.obs",
-      version: "0.2.1",
-      name: "TS5 OBS Overlay",
-      description: "A simple OBS overlay for TS5 by DerTyp876",
-      content: {
-        apiKey: localStorage.getItem("apiKey") ?? "",
-      },
-    },
-  };
-
-  ws.onopen = () => {
-    // Send authentication payload to TS5 client
-    ws.send(JSON.stringify(initalPayload));
-  };
-
-  // Handle websockets
-  ws.onmessage = (event) => {
-    let data = JSON.parse(event.data);
-    console.log(data);
-    switch (data.type) {
-      case "auth":
-        handleAuthMessage(data);
-        localStorage.setItem("apiKey", data.payload.apiKey);
-        authenticated = true;
-        //console.log(apiKey);
-        break;
-      case "clientMoved":
-        handleClientMoved(data);
-        break;
-      case "clientPropertiesUpdated":
-        handleClientPropertiesUpdate(data);
-        break;
-      case "talkStatusChanged":
-        handleTalkStatusChanged(data);
-        break;
-      case "serverPropertiesUpdated":
-        ws.close();
-      default:
-        console.log(`No handler for event type: ${data.type}`);
-        break;
-    }
-
-    // Draw clientList in HTML object
-    drawClients();
-  };
-
-  ws.onerror = (err) => {
-    console.log(err);
-    ws.close();
-    return;
-  };
-
-  ws.onclose = (event) => {
-    // Need to check if the connection got closed while the user was connected.
-    // Because TS does not return a proper authentication error.
-    // closed and not authenticated -> auth error or ts5 restarted/closed
-    // closed and authenticated -> no auth error, app/obs was just closed by user
-    if (authenticated == false) {
-      localStorage.setItem("apiKey", "");
-    }
-
-    console.log(event);
-    console.log("Disconnected");
-
-    // Since the user disconnected, we need to clear all clients and channel
-    clientList.clear();
-    channelList.clear();
-
-    drawClients(); // Redraw overlay to remove all clients
-    main(); // Reconnected
-  };
-}
-main();
--- a/js/display_content.js
+++ b/js/display_content.js
@@ -1,38 +0,0 @@
-// Draw clients in the overlay
-// Gets called everytime an event has been received (app.js -> ws.onmessage)
-function drawClients() {
-  const overlayContent = document.getElementById("content");
-
-  let result = "";
-  if (selfClient) {
-    // Loop through all clients which are currently in your channel
-    getClientsInChannel(selfClient.channel).forEach((c) => {
-      // Open client div
-      result += `<div class="client-div" ${c.isHidden() ? "hidden" : ""} style="color:${
-        CONFIG.style.fontColor
-      }; font-size:${CONFIG.style.fontSize}">`;
-
-      // Add image
-      result += '<div class="client-img-div">';
-      if (c.outputMuted) {
-        result += '	<img src="img/muted_output.svg" />';
-      } else if (c.inputMuted) {
-        result += '	<img src="img/muted_input.svg" />';
-      } else if (c.talkStatus == 1) {
-        result += '	<img src="img/on.svg" />';
-      } else {
-        result += '	<img src="img/off.svg" />';
-      }
-
-      // Close client div
-      result += "</div>";
-
-      // Add client text (name of the client)
-      result += `<div class="client-text-div"
-			 style="-webkit-text-stroke:${CONFIG.style.fontStrokeSize} ${CONFIG.style.fontStrokeColor};
-			"><p style="background:${CONFIG.style.fontBackground};">${c.name}</p></div></div>`;
-    });
-  }
-
-  overlayContent.innerHTML = result;
-}
--- a/js/event_handlers.js
+++ b/js/event_handlers.js
@@ -1,97 +0,0 @@
-// Handle the auth message event which is send by the client to init the session
-// The clients send therefore all channels and clients to us
-function handleAuthMessage(data) {
-  // Set channels and clients
-  channelList.setItems(parseChannelInfos(data.payload.connections[0].channelInfos));
-  clientList.setItems(parseClientInfos(data.payload.connections[0].clientInfos));
-
-  // The client of this current user
-  selfClient = clientList.getById(data.payload.connections[0].clientId);
-}
-
-// Handle the event when a client moved to another place/channel
-// Also includes disconnecting and connecting of clients
-function handleClientMoved(data) {
-  // Get our client object based on the target client id of this event
-  // This can be null if the client does not exist in our list (newly joined)
-  const client = clientList.getById(data.payload.clientId);
-
-  if (data.payload.newChannelId == 0) {
-    // If newChannelId is 0, the client left the server
-    // Client disconnected
-    if (client) {
-      console.log(`${client.name} disconnected`);
-      clientList.remove(client); // Remove disconnected client from clientList
-    }
-
-    // If the disconnected client is the current user
-    if (data.payload.clientId == selfClient.id) {
-      //* NOTE: since this app does support multiple servers yet, we expect the user to be connected to NO servers at this point
-      console.log("You disconnected");
-      clientList.clear(); // remove all clients.
-      channelList.clear();
-    }
-  } else {
-    // Client switched the channel OR JOINED the server to a channel
-    if (client) {
-      // Client just switched the channel
-      // Like described at the const client declaration, the client is not null therefore he already existed in our list/server
-      client.channel = channelList.getById(data.payload.newChannelId);
-    } else {
-      // Client joined the server
-      // Like described at the const client declaration, the client is null he is NEW in our list/server
-      clientList.add(
-        new Client(
-          data.payload.clientId,
-          channelList.getById(data.payload.newChannelId),
-          data.payload.properties.nickname
-        )
-      );
-    }
-  }
-}
-
-// Handle the event where a client updates his properties (e.g. name, muteStatus)
-function handleClientPropertiesUpdate(data) {
-  // Get our client object based on the target client id of this event
-  // This can be null if the client does not exist in our list
-  const client = clientList.getById(data.payload.clientId);
-
-  if (data.payload.properties.channelGroupInheritedChannelId == 0) {
-    if (client) {
-      clientList.remove(client);
-    }
-  } else {
-    if (client) {
-      // Update client properties
-
-      // Other to the handleClientMoved function this handleClientPropertiesUpdate function also gets called
-      // if anything at all happend to the client, so we update the channel here to be sure we dont miss anything
-      client.channel = channelList.getById(data.payload.properties.channelGroupInheritedChannelId);
-
-      client.name = data.payload.properties.nickname;
-      client.inputMuted = data.payload.properties.inputMuted;
-      client.outputMuted = data.payload.properties.outputMuted;
-    } else {
-      // For some reason the client did not exist in our list. Add client, to prevent further errors.
-      clientList.add(
-        new Client(
-          data.payload.clientId,
-          channelList.getById(data.payload.properties.channelGroupInheritedChannelId),
-          data.payload.properties.nickname,
-          data.payload.properies.inputMuted,
-          data.payload.properies.outputMuted
-        )
-      );
-    }
-  }
-}
-
-// Gets called when a client starts talking
-//* NOTE: If the "current self-user" is speaking but muted, this will still be called. This does not apply to foreign clients
-function handleTalkStatusChanged(data) {
-  let client = clientList.getById(data.payload.clientId);
-  if (client) {
-    client.talkStatus = data.payload.status;
-  }
-}
--- a/js/objects.js
+++ b/js/objects.js
@@ -1,71 +0,0 @@
-class Channel {
-  constructor(id, name) {
-    this.id = id;
-    this.name = name;
-  }
-}
-
-class Client {
-  constructor(id, channel, name, inputMuted = false, outputMuted = false, talkStatus = 0) {
-    this.id = id;
-    this.channel = channel;
-    this.name = name;
-    this.inputMuted = inputMuted;
-    this.outputMuted = outputMuted;
-    this.talkStatus = talkStatus;
-    console.log(`Client created: ${this.id} - ${this.name}`);
-  }
-
-  isMuted() {
-    return this.inputMuted == true || this.outputMuted == true;
-  }
-
-  isHidden() {
-    return (
-      (CONFIG.hideSilent && (this.talkStatus == 0 || this.isMuted())) || (CONFIG.hideSelf && this.id == selfClient.id)
-    );
-  }
-}
-
-class List {
-  constructor(items = []) {
-    this.items = items;
-  }
-
-  getById(id) {
-    return this.items.filter((obj) => {
-      return obj.id === id;
-    })[0];
-  }
-
-  add(item) {
-    if (!this.getById(item.id)) {
-      this.items.push(item);
-    } else {
-      console.error(`An item with id ${item.id} already exists in list`);
-    }
-  }
-
-  remove(item) {
-    this.items.splice(this.items.indexOf(item), 1);
-  }
-
-  clear() {
-    this.items = [];
-  }
-
-  setItems(items) {
-    // Never tested
-    let duplicateFound = false;
-    items.forEach((e1, i) => {
-      items.forEach((e2, j) => {
-        if (e1.id === e2.id && i != j) {
-          duplicateFound = true;
-        }
-      });
-    });
-    if (!duplicateFound) {
-      this.items = items;
-    }
-  }
-}
--- a/js/parser.js
+++ b/js/parser.js
@@ -1,34 +0,0 @@
-// Parse teamspeak channel structure into our objects
-function parseChannelInfos(channelInfos) {
-  let result = [];
-  let rootChannels = channelInfos.rootChannels;
-  let subChannels = channelInfos.subChannels;
-
-  rootChannels.forEach((rc) => {
-    result.push(new Channel(rc.id, rc.properties.name));
-
-    if (subChannels !== null && rc.id in subChannels) {
-      subChannels[rc.id].forEach((sc) => {
-        result.push(new Channel(sc.id, sc.properties.name));
-      });
-    }
-  });
-  return result;
-}
-
-// Parse teamspeak clients into our objects
-function parseClientInfos(clientInfos) {
-  let result = [];
-  clientInfos.forEach((e) => {
-    result.push(
-      new Client(
-        e.id,
-        channelList.getById(e.channelId),
-        e.properties.nickname,
-        e.properties.inputMuted,
-        e.properties.outputMuted
-      )
-    );
-  });
-  return result;
-}
--- a/js/utils.js
+++ b/js/utils.js
@@ -1,12 +0,0 @@
-function getClientsInChannel(channel) {
-  let result = [];
-
-  clientList.items.forEach((e) => {
-    if (e.channel) {
-      if (e.channel.id == channel.id) {
-        result.push(e);
-      }
-    }
-  });
-  return result;
-}
--- a/meta.json
+++ b/meta.json
@@ -1,3 +0,0 @@
-{
-  "version": "v0.2.1"
-}
--- a/overlay.html
+++ b/overlay.html
@@ -1,29 +0,0 @@
-<!-- https://github.com/DerTyp876/ts5-obs-overlay/ -->
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="css/style.css" />
-    <title>TS5 - OBS Overlay</title>
-  </head>
-  <body>
-    <script src="config.js"></script>
-    <script src="js/objects.js"></script>
-    <script>
-      let apiKey = "";
-      let clientList = new List();
-      let channelList = new List();
-      let thisClient;
-    </script>
-    <div id="content"></div>
-
-    <!--Scripts-->
-    <script src="js/utils.js"></script>
-    <script src="js/display_content.js"></script>
-    <script src="js/parser.js"></script>
-    <script src="js/event_handlers.js"></script>
-    <script src="js/app.js"></script>
-  </body>
-</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "ts5-obs-overlay",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.62.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
+    "@vitejs/plugin-react-swc": "^3.0.0",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.9",
+    "vite-plugin-singlefile": "^0.13.5"
+  }
+}
--- a/readme.md
+++ b/readme.md
@@ -1,60 +0,0 @@
-
-# A OBS-Overlay for TeamSpeak5
-Made with the "Remote App" feature of TeamSpeak5
- [A OBS-Overlay for TeamSpeak5](#a-obs-overlay-for-teamspeak5)
-  - [Setup](#setup)
-  - [Update](#update) 
-    - [Use script](#use-script)
-    - [Manually](#manually)
-  - [Configuration](#configuration)
-  - [Troubleshooting](#troubleshooting)
-    - [Option 1:](#option-1)
-    - [Option 2:](#option-2)
-    - [Option 3:](#option-3)
-
->**_WARNING:_** This overlay works only show the first server you were connected to.
-
-## Setup
-1. Download the [latest release](https://github.com/DerTyp876/ts5-obs-overlay/releases/latest) of this project & extract the archive to a folder of your choice
-2. Open your TeamSpeak5 client and go to 
-`settings -> Remote Apps`
-3. Enable the "Remote Apps" feature
-![image](https://user-images.githubusercontent.com/76851529/197849050-d4e28b8e-c150-4462-8871-f77ec672ee49.png)
-
-4. Open your OBS Studio & add a new **browser source** to your scene
-![image](https://user-images.githubusercontent.com/76851529/197849644-9396fb9c-4943-4cb2-a511-062ffcd60404.png)
-
-5. In the properties of your new browser source, select the Local File check box
-6. Click "Browse" next to the newly apperared "Local file" field
-7. Now select the in step 1 downloaded `overlay.html`
-8. Set the "Width" to `2000` and the "Height" to `1000` (This is just my own preference. If you have better values, use them)  
-![image](https://user-images.githubusercontent.com/76851529/197849886-679b200b-6d42-439e-bce6-44c6df67ffcc.png)  
-
-9. Now connect to a TeamSpeak server and check if it works. You need to **accept** the remote app in your TeamSpeak notifications  
-![image](https://user-images.githubusercontent.com/76851529/197850151-ad057277-fe3d-427e-b21b-1d2b4875c70b.png)  
-**Done**
-## Update
-### Use script
-If you want to update the project automatically, just double-click the "update.bat" file **OR** open a new console in the project directory and run the "update.ps1" command.  
-If you encounter problems because of the microsoft execution policy open a console in the project directory and run  
-`powershell -ExecutionPolicy Bypass -File update.ps1`  
-https://stackoverflow.com/questions/4037939/powershell-says-execution-of-scripts-is-disabled-on-this-system 
-
-### Manually
-To manually update just delete the hole project directory and repeat the [setup](#setup) above :).
-
-## Configuration
-In the `config.js` file, which is located in the same folder as the `overlay.html` file, you can make various settings for the appearance of the overlay.  
-Since everything is written in simple css and html, you can change the `css/style.css` file to your liking.
->**_NOTE_** If your change something in the files you have to do [Option 3 of the troubleshooting below](#option-3).  
-
-## Troubleshooting
-Possible solutions to fix the overlay.
-### Option 1:  
-   Disconnect from all TeamSpeak servers and reconnect to just one
-### Option 2: 
-   Restart TeamSpeak5
-### Option 3:
-1. Open OBS Studio
-2. Go open the properties of your browser source
-3. On the bottom of the properties press the "Refresh cache of current page" button.
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,64 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import "@styles/App.scss";
+import { TS5Connection } from "./teamspeak5Handler";
+import { IChannel, IClient, IConnection } from "interfaces/teamspeak";
+import { useEffect, useState } from "react";
+import Viewer from "./Viewer";
+
+export default function App() {
+  const [clients, setClients] = useState<IClient[]>([]);
+  const [channels, setChannels] = useState<IChannel[]>([]);
+  const [connections, setConnections] = useState<IConnection[]>([]);
+  const [activeConnectionId, setActiveConnectionId] = useState<number>(1);
+
+  const [currentConnection, setCurrentConnection] = useState<IConnection | undefined>(undefined);
+  const [currentChannel, setCurrentChannel] = useState<IChannel | undefined>(undefined);
+  const [currentClient, setCurrentClient] = useState<IClient | undefined>(undefined);
+
+  function setCurrentStates() {
+    const currentConnection = connections.find((connection) => connection.id === activeConnectionId);
+    setCurrentConnection(currentConnection);
+
+    if (currentConnection) {
+      const currentClient = clients.find((client) => client.id === currentConnection.clientId);
+      setCurrentClient(currentClient);
+      if (currentClient) {
+        const currentChannel = channels.find((channel) => channel.id === currentClient.channel?.id);
+        setCurrentChannel(currentChannel);
+        if (currentChannel) {
+          return currentChannel;
+        }
+      }
+    }
+  }
+
+  useEffect(() => {
+    const tsConnection: TS5Connection = new TS5Connection(
+      5899,
+      setConnections,
+      setChannels,
+      setClients,
+      setActiveConnectionId
+    );
+    tsConnection.connect();
+  }, []);
+
+  useEffect(() => {
+    setCurrentStates();
+  }, [clients, channels, connections, activeConnectionId]);
+
+  return (
+    <div className="App">
+      <Viewer
+        clients={
+          clients.map((client) => {
+            if (client.channel?.id === currentChannel?.id) {
+              return client;
+            }
+          }) as IClient[]
+        }
+        channel={currentChannel}
+      />
+    </div>
+  );
+}
--- a/src/Viewer.tsx
+++ b/src/Viewer.tsx
@@ -0,0 +1,80 @@
+import { IChannel, IClient } from "interfaces/teamspeak";
+import "@styles/Viewer.scss";
+
+export default function Viewer({
+  clients,
+  channel,
+  showChannelName = false,
+}: {
+  clients: IClient[] | undefined;
+  channel: IChannel | undefined;
+  showChannelName?: boolean;
+}) {
+  return (
+    <div className="viewer">
+      {showChannelName ? <h3>{channel?.properties.name}</h3> : null}
+      {clients?.map((client) => {
+        if (client) {
+          return (
+            <div className="client" key={`${client.id}-${client.channel?.connection.id}`}>
+              {client.properties.outputMuted ? (
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+                  <title>muted_output</title>
+                  <g id="muted_output">
+                    <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="#c9070a"
+                    />
+                    <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.11,45.85H9.53A4.57,4.57,0,0,0,5,50.38V77.62a4.57,4.57,0,0,0,4.54,4.54H22.25l37.2-21.48V25.42a4.57,4.57,0,0,0-4.54-4.54"
+                      fill="#c9070a"
+                    />
+                    <path
+                      d="M85.1,56.6l-7.87,4.54A10,10,0,0,1,77.61,64c0,8.58-8.23,7.09-8.23,12.48A4.53,4.53,0,0,0,73.92,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.92,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.92,47"
+                      fill="#c9070a"
+                    />
+                    <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.24,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.24,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="#c9070a"
+                    />
+                    <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.inputMuted ? (
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+                  <title>muted_input</title>
+                  <g id="muted_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="#c9070a"
+                    />
+                  </g>
+                </svg>
+              ) : client.talkStatus == 1 ? (
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+                  <title>player_on_v2</title>
+                  <g id="player_on_v2.svg">
+                    <path d="M64,128a64,64,0,1,1,64-64A64,64,0,0,1,64,128Z" fill="#00b4df" />
+                  </g>
+                </svg>
+              ) : (
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+                  <title>player_off_v2</title>
+                  <g id="player_off_v2.svg">
+                    <path d="M64,128a64,64,0,1,1,64-64A64,64,0,0,1,64,128Z" fill="#3e4f5e" />
+                  </g>
+                </svg>
+              )}
+              <p>{client.properties.nickname}</p>
+            </div>
+          );
+        } else {
+          return <></>;
+        }
+      })}
+    </div>
+  );
+}
--- a/src/interfaces/teamspeak.ts
+++ b/src/interfaces/teamspeak.ts
@@ -0,0 +1,299 @@
+
+export interface TS5MessageHandlerOptions {
+  handleAuthMessage?: (data: IAuthMessage) => void;
+  handleClientMoved?: (data: IClientMovedMessage) => void;
+  handleClientPropertiesUpdate?: (data: IClientPropertiesUpdatedMessage) => void;
+  handleTalkStatusChanged?: (data: ITalkStatusChangedMessage) => void;
+  handleClientSelfPropertyUpdated?: (data: IClientSelfPropertyUpdatedMessage) => void;
+}
+
+export interface IAuthSenderPayload {
+  type: "auth";
+  payload: {
+    identifier: string;
+    version: string;
+    name: string;
+    description: string;
+    content: {
+      apiKey: string;
+    };
+  };
+}
+
+export interface IClient {
+  id: number;
+  talkStatus: number;
+  channel: IChannel;
+  properties: IClientProperties;
+}
+
+export interface IChannel {
+  id: number;
+  connection: IConnection;
+  order: string;
+  parentId: string;
+  properties: IChannelProperties;
+}
+
+export interface IConnection {
+  channelInfos?: IChannelInfos;
+  clientId: number;
+  clientInfos?: IClientInfo[];
+  id: number;
+  properties?: IServerProperties;
+}
+
+
+export interface IChannelProperties {
+  bannerGfxUrl: string;
+  bannerMode: number;
+  codec: number;
+  codecIsUnencrypted: boolean;
+  codecLatencyFactor: number;
+  codecQuality: number;
+  deleteDelay: number;
+  description: string;
+  flagAreSubscribed: boolean;
+  flagDefault: boolean;
+  flagMaxclientsUnlimited: boolean;
+  flagMaxfamilyclientsInherited: boolean;
+  flagMaxfamilyclientsUnlimited: boolean;
+  flagPassword: boolean;
+  flagPermanent: boolean;
+  flagSemiPermanent: boolean;
+  forcedSilence: boolean;
+  iconId: number;
+  maxclients: number;
+  maxfamilyclients: number;
+  name: string;
+  namePhonetic: string;
+  neededTalkPower: number;
+  order: string;
+  permissionHints: number;
+  storageQuota: number;
+  topic: string;
+  uniqueIdentifier: string;
+}
+
+
+export interface IChannelInfos {
+  rootChannels: IChannel[];
+  subChannels: { [key: number]: IChannel[] };
+}
+
+export interface IClientInfo {
+  channelId: number;
+  id: number;
+  properties: IClientProperties;
+}
+
+export interface IClientProperties {
+  away: boolean;
+  awayMessage: string;
+  badges: string;
+  channelGroupId: string;
+  channelGroupInheritedChannelId: string;
+  country: string;
+  created: number;
+  databaseId: string;
+  defaultChannel: string;
+  defaultChannelPassword: string;
+  defaultToken: string;
+  description: string;
+  flagAvatar: string;
+  flagTalking: boolean;
+  iconId: number;
+  idleTime: number;
+  inputDeactivated: boolean;
+  inputHardware: boolean;
+  inputMuted: boolean;
+  integrations: string;
+  isChannelCommander: boolean;
+  isMuted: boolean;
+  isPrioritySpeaker: boolean;
+  isRecording: boolean;
+  isTalker: boolean;
+  lastConnected: number;
+  metaData: string;
+  monthBytesDownloaded: number;
+  monthBytesUploaded: number;
+  myteamspeakAvatar: string;
+  myteamspeakId: string;
+  neededServerQueryViewPower: number;
+  nickname: string;
+  nicknamePhonetic: string;
+  outputHardware: boolean;
+  outputMuted: boolean;
+  outputOnlyMuted: boolean;
+  permissionHints: number;
+  platform: string;
+  serverGroups: string;
+  serverPassword: string;
+  signedBadges: string;
+  talkPower: number;
+  talkRequest: number;
+  talkRequestMsg: string;
+  totalBytesDownloaded: number;
+  totalBytesUploaded: number;
+  totalConnections: number;
+  type: number;
+  uniqueIdentifier: string;
+  unreadMessages: number;
+  userTag: string;
+  version: string;
+  volumeModificator: number;
+}
+
+export interface IServerProperties {
+  antiFloodPointsNeededCommandBlock: number;
+  antiFloodPointsNeededIpBlock: number;
+  antiFloodPointsNeededPluginBlock: number;
+  antiFloodPointsTickReduce: number;
+  askForPrivilegeKeyAfterNickname: boolean;
+  askForPrivilegeKeyForChannelCreation: boolean;
+  askForPrivilegeKeyForModify: boolean;
+  awayMessage: string;
+  badges: string;
+  channelGroupId: string;
+  channelGroupInheritedChannelId: string;
+  clientType: number;
+  connectionBandwidthReceived: number;
+  connectionBandwidthSent: number;
+  connectionClientIp: string;
+  connectionConnectedTime: number;
+  connectionFiletransferBandwidthReceived: number;
+  connectionFiletransferBandwidthSent: number;
+  connectionPacketloss: number;
+  connectionPing: number;
+  connectionPacketsReceived: number;
+  connectionPacketsSent: number;
+  connectionPort: number;
+  connectionQueryBandwidthReceived: number;
+  connectionQueryBandwidthSent: number;
+  connectionServerIp: string;
+  connectionServerPort: number;
+  connectionThrottleBandwidthReceived: number;
+  connectionThrottleBandwidthSent: number;
+  country: string;
+  created: number;
+  defaultChannel: string;
+  defaultChannelPassword: string;
+  defaultServerGroup: string;
+  defaultToken: string;
+  flagAvatar: string;
+  iconId: number;
+  inputHardware: boolean;
+  inputMuted: boolean;
+  isChannelCommander: boolean;
+  isMuted: boolean;
+  isPrioritySpeaker: boolean;
+  isRecording: boolean;
+  isTalker: boolean;
+  isTts: boolean;
+  metaData: string;
+  monthBytesDownloaded: number;
+  monthBytesUploaded: number;
+  myteamspeakAvatar: string;
+  myteamspeakId: string;
+  neededServerQueryViewPower: number;
+  nickname: string;
+  nicknamePhonetic: string;
+  outputHardware: boolean;
+  outputMuted: boolean;
+  outputOnlyMuted: boolean;
+  permissionHints: number;
+  platform: string;
+  serverPassword: string;
+  signedBadges: string;
+  talkPower: number;
+  talkRequest: number;
+  talkRequestMsg: string;
+  totalBytesDownloaded: number;
+  totalBytesUploaded: number;
+  totalConnections: number;
+  type: number;
+  uniqueIdentifier: string;
+  unreadMessages: number;
+  userTag: string;
+  version: string;
+  volumeModificator: number;
+}
+
+
+export interface IClientPropertiesUpdatedMessage {
+  type: "clientPropertiesUpdated";
+  payload: {
+    clientId: number;
+    connectionId: number;
+    properties: IClientProperties;
+  };
+}
+
+export interface IClientMovedMessage {
+  type: "clientMoved";
+  payload: {
+    properties: IClientProperties;
+    clientId: number;
+    connectionId: number;
+    newChannelId: number;
+    oldChannelId: number;
+    type: number;
+    visibility: number;
+  };
+}
+
+export interface ITalkStatusChangedMessage {
+  type: "talkStatusChanged";
+  payload: {
+    clientId: number;
+    connectionId: number;
+    isWhisper: boolean;
+    status: number;
+  };
+}
+
+export interface IClientSelfPropertyUpdatedMessage {
+  type: "clientSelfPropertyUpdated";
+  payload: {
+    connectionId: number;
+    flag: string;
+    newValue: boolean;
+    oldValue: boolean;
+  };
+}
+
+export interface IAuthMessage {
+  type: "auth";
+  payload: {
+    apiKey: string;
+    connections: IConnection[];
+  };
+}
+
+export interface IServerPropertiesUpdatedMessage {
+  type: "serverPropertiesUpdated";
+  payload: {
+    connectionId: number;
+    properties: IServerProperties;
+  };
+}
+
+export interface IConnectStatusChangedMessage {
+  type: "connectStatusChanged";
+  payload: {
+    connectionId: number;
+    error: number;
+    info: {
+      clientId: number;
+    }
+    status: number;
+  };
+}
+
+export interface IChannelsMessage {
+  type: "channels";
+  payload: {
+    connectionId: number;
+    info: IChannelInfos
+  }
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "@styles/index.scss";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>
+);
--- a/src/styles/App.scss
+++ b/src/styles/App.scss
--- a/src/styles/Viewer.scss
+++ b/src/styles/Viewer.scss
@@ -0,0 +1,39 @@
+.viewer {
+  display: flex;
+  flex-direction: column;
+  gap: 0 0;
+  padding: 1rem;
+
+  h3 {
+    font-size: 1.5rem;
+    font-weight: 500;
+    margin: 0;
+  }
+
+  .client {
+    display: flex;
+    flex-direction: row;
+    gap: 0 0;
+    align-items: center;
+    margin: 0.5rem 0;
+
+    svg {
+      width: 2.8rem;
+      height: 2.8rem;
+      margin-right: 0.5rem;
+    }
+    p {
+      margin: 0;
+      color: white;
+      background-color: rgba(47, 49, 54, 0.5);
+      padding: 0.25rem 0.5rem;
+      border-radius: 0.25rem;
+
+      // ellipsis after 22 characters
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 20ch;
+    }
+  }
+}
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -0,0 +1,5 @@
+* {
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: bold;
+  font-size: 3rem;
+}
--- a/src/teamspeak5Handler.ts
+++ b/src/teamspeak5Handler.ts
@@ -0,0 +1,533 @@
+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[]>>,
+    setActiveConnectionId: 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, setActiveConnectionId);
+  }
+
+  reconnect() {
+    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");
+      }
+
+      this.reconnect();
+    };
+
+    // 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;
+
+  setActiveConnectionId: React.Dispatch<React.SetStateAction<number>>;
+
+  constructor(ws: WebSocket, dataHandler: TS5DataHandler, setActiveConnectionId: React.Dispatch<React.SetStateAction<number>>) {
+    this.ws = ws;
+    this.dataHandler = dataHandler;
+    this.setActiveConnectionId = setActiveConnectionId;
+  }
+
+  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);
+
+    if (data.payload.flag == "inputHardware") { // sadly thats the only way to detect if a server is active or not
+      this.setActiveConnectionId(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);
+
+  }
+}
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    "baseUrl": "./src",
+
+    "paths": {
+      "@/*": ["/src/*"],
+      "@components/*": ["/src/components/*"],
+      "@assets/*": ["/src/assets/*"],
+      "@styles/*": ["/src/styles/*"],
+      "@utils/*": ["/src/utils/*"],
+      "@interfaces/*": ["/src/interfaces/*"]
+    },
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/update.bat
+++ b/update.bat
@@ -1,2 +0,0 @@
-powershell ./update.ps1
-pause
--- a/update.ps1
+++ b/update.ps1
@@ -1,49 +0,0 @@
-Write-Output "Starting update..."
-
-$currentVersionString = (Get-Content .\meta.json | ConvertFrom-Json).version
-Write-Output "Current version: $currentVersionString"
-
-Write-Output "Searching for newest version..."
-$newestVersionString = ""
-$req = Invoke-WebRequest https://github.com/DerTyp876/ts5-obs-overlay/releases/latest
-
-foreach ($tag in $req.ParsedHtml.body.getElementsByTagName('h1')) {
-  if ($tag.innerText[0] -eq "v") {
-    $newestVersionString = $tag.innerText
-  }
-}
-
-if ($newestVersionString -ne "") {
-  Write-Output "Newest version found: $newestVersionString"
-
-
-  $currentVersion = ($currentVersionString -replace "v")
-  $newestVersion = ($newestVersionString -replace "v")
-
-  if ([System.Version]$currentVersion -gt [System.Version]$newestVersion) {
-    Write-Output "Current version is up to date!"
-  }
-  else {
-    Write-Output "Updating to newer version..."
-
-    Remove-Item * -Recurse -Force -Confirm
-
-    mkdir ./temp
-    attrib +h ./temp
-    Write-Output "Downloading newer version..."
-    Invoke-WebRequest -Uri "https://github.com/DerTyp876/ts5-obs-overlay/archive/refs/tags/$newestVersionString.zip" -OutFile "./temp/$newestVersionString.zip"
-    Write-Output "Extracting archive..."
-    Expand-Archive -Path "./temp/$newestVersionString.zip" -DestinationPath "./temp/"
-    Get-ChildItem -Path "./temp/ts5-obs-overlay-$($newestVersionString -replace 'v')" -Recurse | Move-Item -Destination "./"
-
-    Remove-Item "./temp" -Recurse -Force -Confirm
-
-    Write-Output "You are now up to date again!"
-  }
-}
-else {
-  Write-Output "No new version found!"
-}
-
-
-
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+import { viteSingleFile } from "vite-plugin-singlefile"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: "./",
+  resolve: {
+    alias: {
+      "@": "/src",
+      "@components": "/src/components",
+      "@styles": "/src/styles",
+      "@assets": "/src/assets",
+      "@interfaces": "/src/interfaces",
+      "@utils": "/src/utils",
+    },
+  },
+  plugins: [react(), viteSingleFile({ useRecommendedBuildConfig: false })],
+})
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><title>muted_input</title><g id="muted_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="#c9070a"/></g></svg>
				`@@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><title>player_off_v2</title><g id="player_off_v2.svg"><path d="M64,128a64,64,0,1,1,64-64A64,64,0,0,1,64,128Z" fill="#3e4f5e"/></g></svg>`