Update README.md

update README and package.json for TeamSpeak5/6 API naming consistency
fixed subchannel not being recognized
2025-10-30 21:27:14 +01:00 · 2025-01-26 01:52:53 +01:00 · 2025-01-24 13:30:39 +01:00 · 2025-01-24 01:54:55 +01:00 · 2025-01-24 01:04:30 +01:00 · 2025-01-24 00:51:51 +01:00
15 changed files with 1841 additions and 1056 deletions
--- a/README.md
+++ b/README.md
@@ -1,14 +1,18 @@
-# React TeamSpeak5 RemoteApp API
+# React TeamSpeak5/6 RemoteApp API

-[![npm](https://img.shields.io/npm/v/react-ts5-remote-app-api.svg)](https://www.npmjs.com/package/react-ts5-remote-app-api) ![downloads](https://img.shields.io/npm/dt/react-ts5-remote-app-api.svg)
+[![npm](https://img.shields.io/npm/v/react-teamspeak-remote-app-api.svg)](https://www.npmjs.com/package/react-teamspeak-remote-app-api) ![downloads](https://img.shields.io/npm/dt/react-teamspeak-remote-app-api.svg)

-This is a ReactJS hook for the TeamSpeak5 RemoteApp API.
+This is a ReactJS hook for the TeamSpeak5/6 RemoteApp API.

 It gathers all the events and methods from the API and makes them available as React states.

+Please note that this is still a work in progress and not all events and methods are implemented yet.
+
+Projects which are using this hook: [TeamSpeak OBS Overlay](https://github.com/DerTyp7/teamspeak-obs-overlay)
+
 ## Table of Contents

- [React TeamSpeak5 RemoteApp API](#react-teamspeak5-remoteapp-api)
+- [React TeamSpeak5/6 RemoteApp API](#react-teamspeak56-remoteapp-api)
  - [Table of Contents](#table-of-contents)
  - [Installation](#installation)
  - [Usage](#usage)
@@ -22,13 +26,13 @@ It gathers all the events and methods from the API and makes them available as R
 ## Installation

 ```bash
-npm install react-ts5-remote-app-api
+npm install react-teamspeak-remote-app-api
 ```

 ## Usage

 ```Typescript
-import useTSRemoteApp, { IClient } from "react-ts5-remote-app-api";
+import useTSRemoteApp, { IClient } from "react-teamspeak-remote-app-api";

 export default function App() {
  const {
@@ -53,7 +57,7 @@ export default function App() {
 ### Get all clients in the current channel

 ```Typescript
-import useTSRemoteApp, { IClient } from "react-ts5-remote-app-api";
+import useTSRemoteApp, { IClient } from "react-teamspeak-remote-app-api";

 default function App() {
  const { clientsInChannel } = useTSRemoteApp({
--- a/index.html
+++ b/index.html
@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,15 +1,17 @@
 {
-  "name": "react-ts5-remote-app-api",
-  "version": "1.0.5",
-  "description": "React hook/api for the TeamSpeak5 remote app feature",
+  "name": "react-teamspeak-remote-app-api",
+  "version": "2.0.0",
+  "description": "React hook/api for the TeamSpeak5/6 remote app feature",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "source": "src/index.ts",
  "types": "dist/cjs/index.d.ts",
  "scripts": {
    "build": "npm run build:esm && npm run build:js",
-    "build:esm": "tsc --project tsconfig.build.json --outDir dist/esm --module esnext",
-    "build:js": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs"
+    "build:esm": "tsc --project tsconfig.build.json --outDir dist/esm --module esnext && npm run alias:esm",
+    "build:js": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs &&  npm run alias:js",
+    "alias:esm": "tsc-alias --project tsconfig.build.json --outDir dist/esm",
+    "alias:js": "tsc-alias --project tsconfig.build.json --outDir dist/cjs"
  },
  "keywords": [
    "TeamSpeak5",
@@ -25,13 +27,13 @@
  "author": "DerTyp7",
  "repository": {
    "type": "git",
-    "url": "https://github.com/DerTyp7/react-ts5-remote-app-api"
+    "url": "https://github.com/DerTyp7/react-teamspeak-remote-app-api"
  },
  "license": "ISC",
  "peerDependencies": {
-    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
  },
  "peerDependenciesMeta": {
    "@types/react": {
@@ -43,22 +45,24 @@
    "src"
  ],
  "dependencies": {
-    "@rollup/plugin-typescript": "^11.1.2",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "rollup-plugin-typescript-paths": "^1.4.0",
-    "ts-node": "^10.9.1",
-    "tslib": "^2.6.0"
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@types/node": "^22.10.10",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "rollup-plugin-typescript-paths": "^1.5.0",
+    "ts-node": "^10.9.2",
+    "tslib": "^2.8.1"
  },
  "devDependencies": {
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "typescript": "^5.0.2"
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@typescript-eslint/eslint-plugin": "^8.21.0",
+    "@typescript-eslint/parser": "^8.21.0",
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "eslint": "^9.18.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "tsc-alias": "^1.8.10",
+    "typescript": "^5.7.3"
  }
 }
--- a/src/handlers/teamspeak/connectionHandler.ts
+++ b/src/handlers/teamspeak/connectionHandler.ts
@@ -1,7 +1,8 @@
-import { IAuthSenderPayload, IChannel, IClient, IConnection, ITS5ConnectionHandler, ITS5DataHandler, ITS5MessageHandler } from "../../interfaces/teamspeak";
-import { TS5DataHandler } from "./dataHandler";
-import { TS5MessageHandler } from "./messageHandler";
-import Logger from "../../utils/logger";
+import { IAuthSenderPayload, IChannel, IClient, IConnection, ITS5ConnectionHandler, ITS5DataHandler, ITS5MessageHandler } from "interfaces/teamspeak";
+import { TS5DataHandler } from "handlers/teamspeak/dataHandler";
+import { TS5MessageHandler } from "handlers/teamspeak/messageHandler";
+import { ILogger } from "utils/logger";
+import { ITSRemoteAppAuthPayloadOptions } from "interfaces/api";


 // Establish connection to TS5 client
@@ -10,13 +11,16 @@ export class TS5ConnectionHandler implements ITS5ConnectionHandler {
  ws: WebSocket; // Websocket connection to TS5 client
  authenticated = false; // Is the connection authenticated?
  remoteAppPort: number; // Port of TS5 client
+  logger: ILogger; // Logger
+  authPayload: ITSRemoteAppAuthPayloadOptions; // Authentication payload
  dataHandler: ITS5DataHandler; // Handles data/lists and states
  messageHandler: ITS5MessageHandler; // Handles messages received from TS5 client

  constructor(
    // Port of TS5 client
    remoteAppPort: number,
-
+    authPayload: ITSRemoteAppAuthPayloadOptions,
+    logger: ILogger,
    // State setters for dataHandler
    setConnections: React.Dispatch<React.SetStateAction<IConnection[]>>,
    setChannels: React.Dispatch<React.SetStateAction<IChannel[]>>,
@@ -27,15 +31,17 @@ export class TS5ConnectionHandler implements ITS5ConnectionHandler {

    // Create websocket connection to TS5 client
    this.remoteAppPort = remoteAppPort;
+    this.authPayload = authPayload;
+    this.logger = logger;
    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);
+    this.dataHandler = new TS5DataHandler(setConnections, setChannels, setClients, logger);
+    this.messageHandler = new TS5MessageHandler(this.ws, this.dataHandler, setActiveConnectionStateId, logger);
  }

  reconnect() {
-    Logger.log("Reconnecting...")
+    this.logger.log("Reconnecting...")
    this.ws.close();

    this.ws = new WebSocket(`ws://localhost:${this.remoteAppPort}`);
@@ -47,35 +53,32 @@ export class TS5ConnectionHandler implements ITS5ConnectionHandler {

  // Connect to TS5 client
  connect() {
-    Logger.log('Connecting to TS5 client...');
+    this.logger.log('Connecting to TS5 client...');

    // Create authentication payload
-    const initalPayload: IAuthSenderPayload = {
+    const initialPayload: IAuthSenderPayload = {
      type: "auth",
      payload: {
-        identifier: "de.tealfire.obs",
-        version: "1.1.3",
-        name: "TS5 OBS Overlay",
-        description: "A OBS overlay for TS5 by DerTyp876",
+        ...this.authPayload,
        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.send(JSON.stringify(initialPayload));
+      this.logger.wsSent(initialPayload);
    };

    this.ws.onclose = (event) => {
-      Logger.log("WebSocket connection closed", event);
+      this.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")
+      // OBS weirdly caches the localstorage and is very stubborn about clearing it (even when clicking "Clear Cache")
      if (!this.authenticated) {
-        Logger.log("WebSocket connection closed before authentication");
+        this.logger.log("WebSocket connection closed before authentication");
        localStorage.removeItem("apiKey");
      }

@@ -89,7 +92,7 @@ export class TS5ConnectionHandler implements ITS5ConnectionHandler {
    this.ws.onmessage = (event) => {
      const data = JSON.parse(event.data);

-      Logger.wsReceived(data)
+      this.logger.wsReceived(data)

      switch (data.type) {
        case "auth":
@@ -117,8 +120,11 @@ export class TS5ConnectionHandler implements ITS5ConnectionHandler {
        case "channels":
          this.messageHandler.handleChannelsMessage(data);
          break;
+        case "channelCreated":
+          this.messageHandler.handleChannelCreatedMessage(data);
+          break;
        default:
-          Logger.log(`No handler for event type: ${data.type}`);
+          this.logger.log(`No handler for event type: ${data.type}`);
          break;
      }
    };
--- a/src/handlers/teamspeak/dataHandler.ts
+++ b/src/handlers/teamspeak/dataHandler.ts
@@ -1,10 +1,10 @@
-import Logger from "../..//utils/logger";
-import { IConnection, IChannel, IClient, ITS5DataHandler } from "../../interfaces/teamspeak";
+import { ILogger } 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
+ * Updates the states of useTSRemoteApp.tsx
 */
 export class TS5DataHandler implements ITS5DataHandler {
  // Local lists of connections, channels and clients
@@ -18,11 +18,14 @@ export class TS5DataHandler implements ITS5DataHandler {
  setChannels: React.Dispatch<React.SetStateAction<IChannel[]>>;
  setClients: React.Dispatch<React.SetStateAction<IClient[]>>;

+  logger: ILogger;
  constructor(
    // State setters for App.tsx
    setConnections: React.Dispatch<React.SetStateAction<IConnection[]>>,
    setChannels: React.Dispatch<React.SetStateAction<IChannel[]>>,
-    setClients: React.Dispatch<React.SetStateAction<IClient[]>>
+    setClients: React.Dispatch<React.SetStateAction<IClient[]>>,
+
+    logger: ILogger,
  ) {
    this.setConnections = setConnections;
    this.setChannels = setChannels;
@@ -31,6 +34,20 @@ export class TS5DataHandler implements ITS5DataHandler {
    this.localConnections = [];
    this.localChannels = [];
    this.localClients = [];
+
+    this.logger = logger;
+  }
+
+  get connections(): IConnection[] {
+    return this.localConnections;
+  }
+
+  get channels(): IChannel[] {
+    return this.localChannels;
+  }
+
+  get clients(): IClient[] {
+    return this.localClients;
  }

  // Update App.tsx states
@@ -59,88 +76,88 @@ export class TS5DataHandler implements ITS5DataHandler {

  // Add data to local lists and update states
  addConnection(connection: IConnection) {
-    Logger.log("Adding connection...", connection)
+    this.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")
+      this.logger.log("Connection added")
    } else {
-      Logger.log("Connection already exists")
+      this.logger.log("Connection already exists")
    }
  }

  addChannel(channel: IChannel) {
-    Logger.log("Adding channel...", channel)
+    this.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")
+      this.logger.log("Channel added")
    } else {
-      Logger.log("Channel already exists")
+      this.logger.log("Channel already exists")
    }
  }

  addClient(client: IClient) {
-    Logger.log("Adding client...", client)
+    this.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")
+      this.logger.log("Client added")
    } else {
-      Logger.log("Client already exists")
+      this.logger.log("Client already exists")
    }
  }

  // Update data in local lists and update states
  updateConnection(connection: IConnection) {
-    Logger.log("Updating connection...", connection)
+    this.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")
+      this.logger.log("Connection updated")
    } else {
-      Logger.log("Connection does not exist")
+      this.logger.log("Connection does not exist")
    }
  }

  updateChannel(channel: IChannel) {
-    Logger.log("Updating channel...", channel)
+    this.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")
+      this.logger.log("Channel updated")
    } else {
-      Logger.log("Channel does not exist")
+      this.logger.log("Channel does not exist")
    }
  }

  updateClient(client: IClient) {
-    Logger.log("Updating client...", client)
+    this.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")
+      this.logger.log("Client updated")
    } else {
-      Logger.log("Client does not exist")
+      this.logger.log("Client does not exist")
    }
  }

  // Remove data from local lists and update states
  removeConnection(connection: IConnection) {
-    Logger.log("Removing connection...", connection)
+    this.logger.log("Removing connection...", connection)
    const existingConnection: IConnection | undefined = this.localConnections.find((localConnection: IConnection) => localConnection.id === connection.id);

    if (existingConnection !== undefined) {
@@ -153,14 +170,14 @@ export class TS5DataHandler implements ITS5DataHandler {
      this.updateChannelsState();
      this.updateClientsState();
      this.updateConnectionsState();
-      Logger.log("Connection removed")
+      this.logger.log("Connection removed")
    } else {
-      Logger.log("Connection does not exist")
+      this.logger.log("Connection does not exist")
    }
  }

  removeChannel(channel: IChannel) {
-    Logger.log("Removing channel...", channel)
+    this.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) {
@@ -171,22 +188,22 @@ export class TS5DataHandler implements ITS5DataHandler {

      this.updateClientsState();
      this.updateChannelsState();
-      Logger.log("Channel removed")
+      this.logger.log("Channel removed")
    } else {
-      Logger.log("Channel does not exist")
+      this.logger.log("Channel does not exist")
    }
  }

  removeClient(client: IClient) {
-    Logger.log("Removing client...", client)
+    this.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")
+      this.logger.log("Client removed")
    } else {
-      Logger.log("Client does not exist")
+      this.logger.log("Client does not exist")
    }
  }

--- a/src/handlers/teamspeak/messageHandler.ts
+++ b/src/handlers/teamspeak/messageHandler.ts
@@ -1,18 +1,21 @@
-import Logger from "../../utils/logger";
-import { IChannelInfos, IConnection, IChannel, IAuthMessage, IClientInfo, IClientMovedMessage, IClient, IClientPropertiesUpdatedMessage, ITalkStatusChangedMessage, IClientSelfPropertyUpdatedMessage, IServerPropertiesUpdatedMessage, IConnectStatusChangedMessage, IChannelsMessage, ITS5MessageHandler, ITS5DataHandler } from "../../interfaces/teamspeak";
+import { ILogger } from "utils/logger";
+import { IChannelInfos, IConnection, IChannel, IAuthMessage, IClientInfo, IClientMovedMessage, IClient, IClientPropertiesUpdatedMessage, ITalkStatusChangedMessage, IClientSelfPropertyUpdatedMessage, IServerPropertiesUpdatedMessage, IConnectStatusChangedMessage, IChannelsMessage, ITS5MessageHandler, ITS5DataHandler, IChannelCreatedMessage } from "interfaces/teamspeak";
+import { log } from "console";

 // Handle incoming messages from TS5 client
 export class TS5MessageHandler implements ITS5MessageHandler {
  ws: WebSocket;
  dataHandler: ITS5DataHandler;
+  logger: ILogger;

  setActiveConnectionStateId: React.Dispatch<React.SetStateAction<number>>;
  activeConnectionId = 0;

-  constructor(ws: WebSocket, dataHandler: ITS5DataHandler, setActiveConnectionStateId: React.Dispatch<React.SetStateAction<number>>) {
+  constructor(ws: WebSocket, dataHandler: ITS5DataHandler, setActiveConnectionStateId: React.Dispatch<React.SetStateAction<number>>, logger: ILogger) {
    this.ws = ws;
    this.dataHandler = dataHandler;
    this.setActiveConnectionStateId = setActiveConnectionStateId;
+    this.logger = logger;
  }

  setActiveConnection(connectionId: number) {
@@ -23,16 +26,14 @@ export class TS5MessageHandler implements ITS5MessageHandler {
  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) => {
+    for (const key in channelInfos.subChannels) {
+      channelInfos.subChannels[key]?.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
@@ -68,10 +69,9 @@ export class TS5MessageHandler implements ITS5MessageHandler {
  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
+      //set timeout to wait for channels to be created
      setTimeout(() => {
        const newChannel = this.dataHandler.getChannelById(data.payload.newChannelId, data.payload.connectionId);
        if (newChannel !== undefined) {
@@ -82,7 +82,7 @@ export class TS5MessageHandler implements ITS5MessageHandler {
              channel: newChannel,
              properties: data.payload.properties,
            });
-          Logger.ts(`New Client found (${data.payload.connectionId} - ${data.payload.clientId} - ${data.payload.properties.nickname})`)
+          this.logger.ts(`New Client found (${data.payload.connectionId} - ${data.payload.clientId} - ${data.payload.properties.nickname})`)
        }
      }, 2000);

@@ -90,7 +90,7 @@ export class TS5MessageHandler implements ITS5MessageHandler {
      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})`)
+        this.logger.ts(`Client left (${data.payload.connectionId} - ${data.payload.clientId} - ${data.payload.properties.nickname})`)
        if (client !== undefined) {
          this.dataHandler.removeClient(client);
        }
@@ -98,7 +98,7 @@ export class TS5MessageHandler implements ITS5MessageHandler {
      }

      if (client !== undefined) { // Client already exists
-        Logger.ts(`Client moved (${client.channel.connection.id} - ${client.id} - ${client.properties.nickname})`)
+        this.logger.ts(`Client moved (${client.channel.connection.id} - ${client.id} - ${client.properties.nickname})`)

        this.dataHandler.updateClient({
          ...client,
@@ -107,7 +107,7 @@ export class TS5MessageHandler implements ITS5MessageHandler {

      } else { // Client does not exist
        // Client joined
-        Logger.ts(`Client joined (${data.payload.connectionId} - ${data.payload.clientId} - ${data.payload.properties.nickname})`)
+        this.logger.ts(`Client joined (${data.payload.connectionId} - ${data.payload.clientId} - ${data.payload.properties.nickname})`)

        this.dataHandler.addClient(
          {
@@ -147,6 +147,7 @@ export class TS5MessageHandler implements ITS5MessageHandler {
    // console.log(this.dataHandler.localClients)

  }
+
  handleClientSelfPropertyUpdatedMessage(data: IClientSelfPropertyUpdatedMessage) {
    const connection: IConnection | undefined = this.dataHandler.getConnectionById(this.activeConnectionId);

@@ -194,4 +195,19 @@ export class TS5MessageHandler implements ITS5MessageHandler {
      }
    }, 1000);
  }
+
+  handleChannelCreatedMessage(data: IChannelCreatedMessage) {
+    const connection = this.dataHandler.getConnectionById(data.payload.connectionId);
+
+    if (connection !== undefined) {
+      this.dataHandler.addChannel(
+        {
+          id: data.payload.channelId,
+          connection: connection,
+          order: data.payload.properties.order,
+          parentId: data.payload.parentId,
+          properties: data.payload.properties,
+        });
+    }
+  }
 }
--- a/src/hooks/useTSRemoteApp.tsx
+++ b/src/hooks/useTSRemoteApp.tsx
@@ -1,9 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { TS5ConnectionHandler } from "../handlers/teamspeak/connectionHandler";
-import { IClient, IChannel, IConnection, ITS5ConnectionHandler } from "../interfaces/teamspeak";
+import { TS5ConnectionHandler } from "handlers/teamspeak/connectionHandler";
+import { ITSRemoteAppOptions } from "interfaces/api";
+import { IClient, IChannel, IConnection, ITS5ConnectionHandler } from "interfaces/teamspeak";
 import { useEffect, useState } from "react";
+import Logger from "utils/logger";

-export default function useTSRemoteApp({ remoteAppPort = 5899 }: { remoteAppPort: number }) {
+export default function useTSRemoteApp(options: ITSRemoteAppOptions) {
  const [clients, setClients] = useState<IClient[]>([]);
  const [channels, setChannels] = useState<IChannel[]>([]);
  const [connections, setConnections] = useState<IConnection[]>([]);
@@ -17,7 +19,9 @@ export default function useTSRemoteApp({ remoteAppPort = 5899 }: { remoteAppPort

  useEffect(() => {
    const tsConnection: ITS5ConnectionHandler = new TS5ConnectionHandler(
-      remoteAppPort,
+      options.remoteAppPort ?? 5899,
+      options.auth,
+      new Logger(options.logging ?? false),
      setConnections,
      setChannels,
      setClients,
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,6 @@

-import useTSRemoteApp from "./hooks/useTSRemoteApp";
+import useTSRemoteApp from "hooks/useTSRemoteApp";

-export type { IChannel, IClient, IConnection, IAuthSenderPayload, IChannelInfos, IAuthMessage, IChannelProperties, IClientInfo, IServerProperties } from "./interfaces/teamspeak";
+export type { IChannel, IClient, IConnection, IAuthSenderPayload, IChannelInfos, IAuthMessage, IChannelProperties, IClientInfo, IServerProperties } from "interfaces/teamspeak";

 export default useTSRemoteApp;
--- a/src/interfaces/api.ts
+++ b/src/interfaces/api.ts
@@ -0,0 +1,12 @@
+export interface ITSRemoteAppOptions {
+  remoteAppPort: number;
+  logging: boolean;
+  auth: ITSRemoteAppAuthPayloadOptions,
+}
+
+export interface ITSRemoteAppAuthPayloadOptions {
+  identifier: string,
+  version: string,
+  name: string,
+  description: string
+}
--- a/src/interfaces/teamspeak.ts
+++ b/src/interfaces/teamspeak.ts
@@ -1,8 +1,13 @@
+import { ILogger } from "utils/logger";
+import { ITSRemoteAppAuthPayloadOptions } from "interfaces/api";
+
 // Classes
 export interface ITS5ConnectionHandler {
  ws: WebSocket;
  authenticated: boolean;
  remoteAppPort: number;
+  logger: ILogger;
+  authPayload: ITSRemoteAppAuthPayloadOptions;
  dataHandler: ITS5DataHandler;
  messageHandler: ITS5MessageHandler;
  reconnect(): void;
@@ -13,6 +18,7 @@ export interface ITS5DataHandler {
  localConnections: IConnection[];
  localChannels: IChannel[];
  localClients: IClient[];
+  logger: ILogger;
  setConnections: React.Dispatch<React.SetStateAction<IConnection[]>>;
  setChannels: React.Dispatch<React.SetStateAction<IChannel[]>>;
  setClients: React.Dispatch<React.SetStateAction<IClient[]>>;
@@ -29,11 +35,16 @@ export interface ITS5DataHandler {
  getConnectionById(id: number): IConnection | undefined;
  getChannelById(id: number, connectionId: number): IChannel | undefined;
  getClientById(id: number, connectionId: number): IClient | undefined;
+
+  readonly connections: IConnection[];
+  readonly channels: IChannel[];
+  readonly clients: IClient[];
 }

 export interface ITS5MessageHandler {
  ws: WebSocket;
  dataHandler: ITS5DataHandler;
+  logger: ILogger;
  setActiveConnectionStateId: React.Dispatch<React.SetStateAction<number>>;
  activeConnectionId: number;
  setActiveConnection(connectionId: number): void;
@@ -46,6 +57,7 @@ export interface ITS5MessageHandler {
  handleServerPropertiesUpdatedMessage(data: IServerPropertiesUpdatedMessage): void;
  handleConnectStatusChangedMessage(data: IConnectStatusChangedMessage): void;
  handleChannelsMessage(data: IChannelsMessage): void;
+  handleChannelCreatedMessage(data: IChannelCreatedMessage): void;
 }

 // Remote App
@@ -339,3 +351,13 @@ export interface IChannelsMessage {
    info: IChannelInfos
  }
 }
+
+export interface IChannelCreatedMessage {
+  type: "channelCreated";
+  payload: {
+    channelId: number;
+    connectionId: number;
+    parentId: string;
+    properties: IChannelProperties;
+  }
+}
--- a/src/utils/logger.tsx
+++ b/src/utils/logger.tsx
@@ -1,31 +1,53 @@
-export default class Logger {
+export interface ILogger {
+  enabled: boolean;
+  log(message: string, data?: object | null): void;
+  warn(message: string, data?: object | null): void;
+  error(message: string, data?: object | null): void;
+  wsReceived(data: object, message?: string | undefined): void;
+  wsSent(data: object, message?: string | undefined): void;
+  ts(message: string, data?: object | null): void;
+}
+
+export default class Logger implements ILogger {
+  enabled: boolean;
+
+  constructor(enabled: boolean) {
+    this.enabled = enabled;
+  }
+
  // Log message to the console
-  public static log(message: string, data: object | null = null): void {
+  public log(message: string, data: object | null = null): void {
+    if (!this.enabled) return;
    console.log(`[Log] %c${message}`.trim(), "color: gray", data ?? "");
  }

  // Log warning to the console
-  public static warn(message: string, data: object | null = null): void {
+  public warn(message: string, data: object | null = null): void {
+    if (!this.enabled) return;
    console.warn(`%c${message}`.trim(), data ?? "");
  }

  // Log error to the console
-  public static error(message: string, data: object | null = null): void {
+  public error(message: string, data: object | null = null): void {
+    if (!this.enabled) return;
    console.error(`%c${message}`.trim(), data ?? "");
  }

  // Log message received from the websocket to the console
-  public static wsReceived(data: object, message: string | undefined = undefined): void {
+  public wsReceived(data: object, message: string | undefined = undefined): void {
+    if (!this.enabled) return;
    console.log(`%c[WS Recieved] ${message ?? ""}`.trim(), "color: #8258c7", data);
  }

  // Log message sent to the websocket to the console
-  public static wsSent(data: object, message: string | undefined = undefined): void {
+  public wsSent(data: object, message: string | undefined = undefined): void {
+    if (!this.enabled) return;
    console.log(`%c[WS Sent] ${message ?? ""}`.trim(), "color: #4eb570", data);
  }

  // Log message to the console with a timestamp
-  public static ts(message: string, data: object | null = null): void {
+  public ts(message: string, data: object | null = null): void {
+    if (!this.enabled) return;
    console.log(`%c[TS] ${message}`.trim(), "color: #2e6bc7", data ?? "");
  }
 }
--- a/tsconfig.build.json
+++ b/tsconfig.build.json
@@ -1 +1,5 @@
-{ "extends": "./tsconfig.json", "exclude": ["src/**/*.spec.ts", "src/**/*.spec.tsx"] }
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["src/**/*.spec.ts", "src/**/*.spec.tsx"],
+  "compilerOptions": { "baseUrl": "./src" }
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,7 +9,8 @@
    "outDir": "dist",
    "strict": true,
    "strictNullChecks": true,
-    "target": "es5"
+    "target": "es5",
+    "baseUrl": "./src"
  },
  "include": ["src"]
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -3,6 +3,7 @@
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
+    "baseUrl": "./src",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
Author	SHA1	Message	Date
Janis	5ea9cb91c6	Update README.md	2025-01-26 01:52:53 +01:00
DerTyp7	ff9e2a3284	update README and package.json for TeamSpeak5/6 API naming consistency	2025-01-24 13:30:39 +01:00
DerTyp7	798dfd8ec5	fixed subchannel not being recognized	2025-01-24 01:54:55 +01:00
DerTyp7	23a8a6464d	use non relative paths	2025-01-24 01:04:30 +01:00
DerTyp7	eb84e9b335	remove index.html and update dependencies for compatibility	2025-01-24 00:51:51 +01:00
DerTyp7	f6b18af6e4	update peer and dev dependencies for React and TypeScript	2025-01-24 00:31:52 +01:00
Janis	7362d80a9e	add option to enable logger	2023-08-03 00:12:57 +02:00
Janis	e920aa6f18	add auth options in contructor	2023-08-02 23:40:51 +02:00
Janis	9da47028bc	update readme	2023-07-24 02:31:59 +02:00