add auth options in contructor

README.md

@@ -6,6 +6,10 @@ This is a ReactJS hook for the TeamSpeak5 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: [TS5 OBS Overlay](https://github.com/DerTyp7/ts5-obs-overlay)
+
 ## Table of Contents
 
 - [React TeamSpeak5 RemoteApp API](#react-teamspeak5-remoteapp-api)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ts5-remote-app-api",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "React hook/api for the TeamSpeak5 remote app feature",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

src/handlers/teamspeak/connectionHandler.ts

@@ -2,6 +2,7 @@ import { IAuthSenderPayload, IChannel, IClient, IConnection, ITS5ConnectionHandl
 import { TS5DataHandler } from "./dataHandler";
 import { TS5MessageHandler } from "./messageHandler";
 import Logger from "../../utils/logger";
+import { ITSRemoteAppAuthPayloadOptions } from "../../interfaces/api";
 
 
 // Establish connection to TS5 client
@@ -10,13 +11,14 @@ export class TS5ConnectionHandler implements ITS5ConnectionHandler {
   ws: WebSocket; // Websocket connection to TS5 client
   authenticated = false; // Is the connection authenticated?
   remoteAppPort: number; // Port of TS5 client
+  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,
     // State setters for dataHandler
     setConnections: React.Dispatch<React.SetStateAction<IConnection[]>>,
     setChannels: React.Dispatch<React.SetStateAction<IChannel[]>>,
@@ -27,6 +29,7 @@ export class TS5ConnectionHandler implements ITS5ConnectionHandler {
 
     // Create websocket connection to TS5 client
     this.remoteAppPort = remoteAppPort;
+    this.authPayload = authPayload;
     this.ws = new WebSocket(`ws://localhost:${this.remoteAppPort}`);
 
     // Create dataHandler and messageHandler
@@ -53,14 +56,11 @@ export class TS5ConnectionHandler implements ITS5ConnectionHandler {
     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",
+        ...this.authPayload,
         content: {
           apiKey: localStorage.getItem("apiKey") ?? "",
         },
-      },
+      }
     };
 
     this.ws.onopen = () => {

src/hooks/useTSRemoteApp.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { TS5ConnectionHandler } from "../handlers/teamspeak/connectionHandler";
+import { ITSRemoteAppOptions } from "../interfaces/api";
 import { IClient, IChannel, IConnection, ITS5ConnectionHandler } from "../interfaces/teamspeak";
 import { useEffect, useState } from "react";
 
-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 +18,8 @@ export default function useTSRemoteApp({ remoteAppPort = 5899 }: { remoteAppPort
 
   useEffect(() => {
     const tsConnection: ITS5ConnectionHandler = new TS5ConnectionHandler(
-      remoteAppPort,
+      options.remoteAppPort ?? 5899,
+      options.auth,
       setConnections,
       setChannels,
       setClients,

src/interfaces/api.ts

@@ -0,0 +1,11 @@
+export interface ITSRemoteAppOptions {
+  remoteAppPort: number;
+  auth: ITSRemoteAppAuthPayloadOptions,
+}
+
+export interface ITSRemoteAppAuthPayloadOptions {
+  identifier: string,
+  version: string,
+  name: string,
+  description: string
+}

src/interfaces/teamspeak.ts

@@ -1,8 +1,11 @@
+import { ITSRemoteAppAuthPayloadOptions } from "./api";
+
 // Classes
 export interface ITS5ConnectionHandler {
   ws: WebSocket;
   authenticated: boolean;
   remoteAppPort: number;
+  authPayload: ITSRemoteAppAuthPayloadOptions;
   dataHandler: ITS5DataHandler;
   messageHandler: ITS5MessageHandler;
   reconnect(): void;