Update CNAME

Create CNAME
deploy: aaa770be2b
2026-07-31 08:39:04 +02:00 · 2025-01-24 13:49:59 +01:00 · 2025-01-24 13:46:06 +01:00 · 2025-01-24 12:44:49 +00:00 · 2024-02-05 19:49:56 +01:00 · 2024-02-05 16:35:43 +00:00
23 changed files with 98 additions and 3746 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,14 +0,0 @@
-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
@@ -1,24 +0,0 @@
-# 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/src/styles/App.scss
+++ b/src/styles/App.scss
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +0,0 @@
-{
-  "tabWidth": 2,
-  "useTabs": false,
-  "printWidth": 120
-}
--- a/1
+++ b/1
@@ -0,0 +1 @@
+teamspeak-overlay.tealfire.de
--- a/assets/index-DXas0TfE.js
+++ b/assets/index-DXas0TfE.js
--- a/assets/index-MKACXyL3.css
+++ b/assets/index-MKACXyL3.css
--- a/images/viewer_example_background.png
+++ b/images/viewer_example_background.png
--- a/index.html
+++ b/index.html
@@ -1,12 +1,16 @@
 <!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>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="An OBS overlay for TeamSpeak5, so your audience can see who is talking. https://github.com/DerTyp7/ts5-obs-overlay" />
+    <meta name="author" content="DerTyp7" />
+    <link rel="icon" href="./logo.svg" type="image/x-icon" />
+    <title>TS5-OBS-Overlay</title>
+    <script type="module" crossorigin src="./assets/index-DXas0TfE.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-MKACXyL3.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
 </html>
--- a/logo.svg
+++ b/logo.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="307.000000pt" height="339.000000pt" viewBox="0 0 307.000000 339.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,339.000000) scale(0.100000,-0.100000)"
+fill="#008080" stroke="none">
+<path d="M1297 3382 c-3 -4 -7 -61 -11 -127 -20 -341 -120 -616 -370 -1010
+-158 -251 -306 -436 -331 -415 -7 6 -18 52 -24 103 -22 170 -77 377 -101 377
+-5 0 -21 -38 -35 -86 -27 -89 -79 -213 -212 -504 -201 -438 -244 -657 -180
+-901 52 -198 102 -290 232 -427 137 -145 345 -310 474 -376 l34 -18 -5 24 c-3
+12 -18 63 -32 113 -64 213 -19 418 154 701 106 173 164 314 194 474 16 82 30
+120 45 120 13 0 55 -59 94 -131 45 -83 81 -198 102 -329 9 -57 18 -106 20
+-108 7 -7 122 231 144 298 34 104 49 202 63 403 6 103 15 186 20 185 4 -2 79
+-72 167 -155 257 -247 392 -414 501 -625 97 -187 102 -205 107 -413 6 -223 -1
+-265 -73 -418 -31 -65 -53 -121 -50 -124 7 -7 188 122 295 212 210 176 368
+383 455 598 149 370 117 760 -98 1193 -110 220 -245 417 -434 633 l-39 45 -7
+-183 c-5 -106 -14 -203 -22 -230 -14 -46 -80 -144 -99 -145 -14 -1 -59 92
+-101 209 -121 342 -331 651 -579 854 -130 107 -287 203 -298 183z"/>
+</g>
+</svg>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,30 +0,0 @@
-{
-  "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/src/App.tsx
+++ b/src/App.tsx
@@ -1,64 +0,0 @@
-/* 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
@@ -1,80 +0,0 @@
-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
@@ -1,299 +0,0 @@
-
-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
@@ -1,10 +0,0 @@
-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/Viewer.scss
+++ b/src/styles/Viewer.scss
@@ -1,39 +0,0 @@
-.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
@@ -1,5 +0,0 @@
-* {
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: bold;
-  font-size: 3rem;
-}
--- a/src/teamspeak5Handler.ts
+++ b/src/teamspeak5Handler.ts
@@ -1,533 +0,0 @@
-import { IAuthMessage, IAuthSenderPayload, IChannel, IChannelInfos, IChannelsMessage, IClient, IClientInfo, IClientMovedMessage, IClientPropertiesUpdatedMessage, IClientSelfPropertyUpdatedMessage, IConnectStatusChangedMessage, IConnection, IServerPropertiesUpdatedMessage, ITalkStatusChangedMessage } from "interfaces/teamspeak";
-
-
-// Establish connection to TS5 client
-// Main class
-export class TS5Connection {
-  ws: WebSocket; // Websocket connection to TS5 client
-  authenticated = false; // Is the connection authenticated?
-  remoteAppPort: number; // Port of TS5 client
-  dataHandler: TS5DataHandler; // Handles data/lists and states
-  messageHandler: TS5MessageHandler; // Handles messages received from TS5 client
-
-  constructor(
-    // Port of TS5 client
-    remoteAppPort: number,
-
-    // State setters for dataHandler
-    setConnections: React.Dispatch<React.SetStateAction<IConnection[]>>,
-    setChannels: React.Dispatch<React.SetStateAction<IChannel[]>>,
-    setClients: React.Dispatch<React.SetStateAction<IClient[]>>,
-    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
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,36 +0,0 @@
-{
-  "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
@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,19 +0,0 @@
-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 })],
-})