change version to 1.3.1

Bump @types/node from 20.8.0 to 20.8.3

.github/dependabot.yml

@@ -7,4 +7,4 @@ updates:
   - package-ecosystem: "npm" # See documentation for possible values
     directory: "/" # Location of package manifests
     schedule:
-      interval: "weekly"
+      interval: "monthly"

.github/workflows/deploy.yml

@@ -0,0 +1,31 @@
+name: Deploy to GitHub Pages on Release
+
+on:
+  release:
+    types:
+      - created
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3.9.3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist

README.md

@@ -1,53 +1,86 @@
 # Teamspeak5-OBS-Overlay
 
-This is a overlay for OBS to show the current talking clients in your Teamspeak 5 Channel.  
+This is an overlay for OBS to show the current talking clients in your Teamspeak 5 Channel.  
 This App uses the new "Remote Apps" feature of Teamspeak 5.
 
+This overlay uses the [Teamspeak 5 Remote App API](https://github.com/DerTyp7/react-ts5-remote-app-api).
+
 ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/d0ab06f2-1a36-479d-826f-bd4bd3d405b7)
 
 - [Teamspeak5-OBS-Overlay](#teamspeak5-obs-overlay)
-  - [Setup](#setup)
+  - [Usage](#usage)
-    - [Customization (Parameters)](#customization-parameters)
+    - [Quick instructions (online usage only)](#quick-instructions-online-usage-only)
+    - [Instructions](#instructions)
+  - [Settings (Parameters)](#settings-parameters)
+    - [Are you using the **online** version (recommended version)?](#are-you-using-the-online-version-recommended-version)
+    - [Are you using the **offline** version?](#are-you-using-the-offline-version)
+    - [Adding Parameters](#adding-parameters)
   - [Setup (Developer)](#setup-developer)
   - [Common Issues](#common-issues)
     - [The overlay is empty, but i'm connected to a Teamspeak 5 server](#the-overlay-is-empty-but-im-connected-to-a-teamspeak-5-server)
 
-## Setup
+## Usage
 
-1. Download the `ts5-overlay-{version}.html` of the latest release from [here](https://github.com/DerTyp7/ts5-obs-overlay/releases/latest)
+### Quick instructions (online usage only)
-   ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/04dc3a66-c493-429b-b4ae-44bade473ad6)  
+
-   1.1. (optional) You can rename the file. Just remember using the new file name in the future instead of `ts5-overlay-{version}.html`
+1. Go into the Teamspeak 5 Settings and enable "Remote Apps"
-2. Go into the Teamspeak 5 Settings and enable "Remote Apps"  
+2. Add a new Browser Source to your OBS Scene and enter `https://dertyp7.github.io/ts5-obs-overlay/` as URL
+3. Set the width and height to your desired size (e.g. 1920x1080 OR 1280x720)
+4. You should now receive a notification in Teamspeak 5 that the app is allowed to connect to your Teamspeak 5 client. Allow it.
+
+### Instructions
+
+1. Go into the Teamspeak 5 Settings and enable "Remote Apps"  
    ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/b31bc553-fde2-46ab-b07c-d3c81339cc7d)
 
-3. Add a new Browser Source to your OBS Scene  
+2. Add a new Browser Source to your OBS Scene  
    ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/0198b468-bb96-4b65-bdd4-3d6bb3ef7d25)  
    ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/58ad399f-5344-456f-b243-6e267b489fd5)
 
-4. Tick the checkbox "Local File" and select the downloaded `ts5-overlay-{version}.html`  
+3. Configure **Browser Source** (Use **ONE** of the following methods)
-    4.1. Set the width and height to your desired size (e.g. 1920x1080 OR 1280x720)  
-   ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/5ad8ce69-645b-45e7-acc3-ce7ba8d7f8ab)
 
+   1. **Online Usage (recommended):** Enter **`https://dertyp7.github.io/ts5-obs-overlay/`** as URL
+   2. **Offline Usage (ignore this if you use the online usage above):**
+      1. Download the `ts5-overlay-{version}.html` of the latest release from [here](https://github.com/DerTyp7/ts5-obs-overlay/releases/latest)
+         ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/04dc3a66-c493-429b-b4ae-44bade473ad6)  
+         1.1. (optional) You can rename the file. Just remember using the new file name in the future instead of `ts5-overlay-{version}.html`
+      2. Tick the checkbox "Local File" and select the downloaded `ts5-overlay-{version}.html`
+
+4. Set the width and height to your desired size (e.g. 1920x1080 OR 1280x720)
 5. You should now receive a notification in Teamspeak 5 that the app is allowed to connect to your Teamspeak 5 client. Allow it. (If you don't get a notification, restart Teamspeak 5 and OBS -> try again)  
    ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/40faa435-e128-415f-98eb-a9e8809e8f65)
 
-### Customization (Parameters)
+## Settings (Parameters)
 
-You can customize the overlay by adding parameters to the URL of the Browser Source.
+You can customize the overlay by **adding parameters** to the URL of the **Browser Source**.
+
+### Are you using the **online** version (recommended version)?
+
+1. Open your Browser Source settings
+2. Start adding parameters like discribed in [Adding Parameters](#adding-parameters)
+
+### Are you using the **offline** version?
 
 1. Open your Browser Source settings
 2. **Untick** the checkbox "Local File"
 3. Add `file://` to the beginning of the URL  
    ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/87985b4c-4397-4681-9635-239d1e382c24)
-4. Start adding parameters like discribed below
+4. Start adding parameters like discribed in [Adding Parameters](#adding-parameters)
+
+### Adding Parameters
 
 Start by adding a `?` to the end of the URL and then add the parameters.
 To add multiple parameters, you have to seperate them with a `&`.
 
-Like this: `file://C:/Users/.../ts5-overlay-{version}.html?parameter1=value1&parameter2=value2`  
+Like this:  
-Real example: `file://C:/Users/.../ts5-overlay-{version}.html?remoteAppPort=5899&hideNonTalking=true&clientLimit=5`
+**Online:** _`https://dertyp7.github.io/ts5-obs-overlay/?parameter1=value1&parameter2=value2`_  
+**Offline:** _`file://C:/Users/.../ts5-overlay-{version}.html?parameter1=value1&parameter2=value2`_
 
-This is a list of all available parameters (all parameters are optional):
+Real example:  
+**Online:** _`https://dertyp7.github.io/ts5-obs-overlay/?remoteAppPort=5899&hideNonTalking=true&clientLimit=5&showChannelName=true`_  
+**Offline:** _`file://C:/Users/.../ts5-overlay-{version}.html?remoteAppPort=5899&hideNonTalking=true&clientLimit=5&showChannelName=true`_
+
+This is a **list** of **all available parameters** (all parameters are optional):
 
 | Parameter         | Description                              | Type    | Default         |
 | ----------------- | ---------------------------------------- | ------- | --------------- |

package.json

@@ -1,7 +1,9 @@
 {
   "name": "ts5-obs-overlay",
   "private": true,
-  "version": "1.1.3",
+  "version": "1.3.1",
+  "description": "Overlay for OBS to show the current talking clients in your Teamspeak 5 Channel",
+  "homepage": "https://dertyp7.github.io/ts5-obs-overlay",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -10,25 +12,25 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@types/node": "^20.4.2",
+    "@types/node": "^20.8.3",
-    "jest": "^29.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.14.1",
+    "react-router-dom": "^6.14.2",
-    "sass": "^1.63.6"
+    "react-ts5-remote-app-api": "^1.1.1",
+    "sass": "^1.68.0"
   },
   "devDependencies": {
     "@types/jest": "^29.5.2",
-    "@types/react": "^18.2.14",
+    "@types/react": "^18.2.23",
     "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@typescript-eslint/parser": "^5.62.0",
+    "@typescript-eslint/parser": "^6.2.1",
     "@vitejs/plugin-react-swc": "^3.0.0",
     "eslint": "^8.45.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "typescript": "^5.1.6",
-    "vite": "^4.4.4",
+    "vite": "^4.4.7",
     "vite-plugin-singlefile": "^0.13.5"
   }
 }

src/App.tsx

@@ -1,57 +1,22 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import "@styles/App.scss";
-import { IChannel, IClient, IConnection, ITS5ConnectionHandler } from "@interfaces/teamspeak";
+
-import { useEffect, useState } from "react";
-import Viewer from "./Viewer";
 import { useSearchParams } from "react-router-dom";
-import { TS5ConnectionHandler } from "@handlers/teamspeak/connectionHandler";
+import useTSRemoteApp, { IClient } from "react-ts5-remote-app-api";
+import Viewer from "./Viewer";
 
 export default function App() {
   const [searchParams] = useSearchParams();
-
+  const { clients, activeConnectionId, currentChannel } = useTSRemoteApp({
-  const [clients, setClients] = useState<IClient[]>([]);
+    remoteAppPort: parseInt(searchParams.get("remoteAppPort") ?? "5899"),
-  const [channels, setChannels] = useState<IChannel[]>([]);
+    auth: {
-  const [connections, setConnections] = useState<IConnection[]>([]);
+      identifier: "de.tealfire.obs",
-  const [activeConnectionId, setActiveConnectionId] = useState<number>(1);
+      version: "1.3.1",
-
+      name: "TS5 OBS Overlay",
-  const [currentConnection, setCurrentConnection] = useState<IConnection | undefined>(undefined);
+      description: "A OBS overlay for TS5 by DerTyp7",
-  const [currentChannel, setCurrentChannel] = useState<IChannel | undefined>(undefined);
+    },
-  const [currentClient, setCurrentClient] = useState<IClient | undefined>(undefined);
+    logging: true,
-
+  });
-  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 remoteAppPort = searchParams.get("remoteAppPort");
-
-    console.log(searchParams.get("hideNonTalking"));
-    const tsConnection: ITS5ConnectionHandler = new TS5ConnectionHandler(
-      parseInt(remoteAppPort ?? "5899"),
-      setConnections,
-      setChannels,
-      setClients,
-      setActiveConnectionId
-    );
-    tsConnection.connect();
-  }, []);
-
-  useEffect(() => {
-    setCurrentStates();
-  }, [clients, channels, connections, activeConnectionId]);
 
   return (
     <div className="App">

src/Viewer.tsx

@@ -1,5 +1,5 @@
-import { IChannel, IClient } from "@interfaces/teamspeak";
 import "@styles/Viewer.scss";
+import { IChannel, IClient } from "react-ts5-remote-app-api";
 
 export default function Viewer({
   clients,

src/handlers/teamspeak/connectionHandler.ts

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

src/handlers/teamspeak/dataHandler.ts

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

src/handlers/teamspeak/messageHandler.ts

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

src/interfaces/teamspeak.ts

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