janis/teamspeak-obs-overlay
1
0
Fork 0
mirror of https://github.com/DerTyp7/teamspeak-obs-overlay.git synced 2025-10-29 04:42:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

[refactor] split up handler classes

Browse Source
This commit is contained in:
Janis
2023-06-29 00:56:33 +02:00
parent 9382572bd7
commit d1dca713aa
8 changed files with 3156 additions and 600 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2850
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -10,12 +10,14 @@
"preview": "vite preview"
},
"dependencies": {
"jest": "^29.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.14.0",
"sass": "^1.62.1"
},
"devDependencies": {
"@types/jest": "^29.5.2",
"@types/react": "^18.0.37",
"@types/react-dom": "^18.0.11",
"@typescript-eslint/eslint-plugin": "^5.59.0",

2
src/App.tsx
View File

@@ -1,10 +1,10 @@
/* 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";
import { useSearchParams } from "react-router-dom";
import { TS5Connection } from "handlers/teamspeak/connectionHandler";
export default function App() {
const [searchParams] = useSearchParams();

131
src/handlers/teamspeak/connectionHandler.ts Normal file
View File

@@ -0,0 +1,131 @@
import { IAuthSenderPayload, IChannel, IClient, IConnection } from "interfaces/teamspeak";
import { TS5DataHandler } from "./dataHandler";
import { TS5MessageHandler } from "./messageHandler";
// 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[]>>,
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() {
console.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() {
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");
}
setTimeout(() => {
this.reconnect();
}, 2000);
};
// 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;
}
};
}
}

221
src/handlers/teamspeak/messageHandler.ts Normal file
View File

@@ -0,0 +1,221 @@
import { IChannelInfos, IConnection, IChannel, IAuthMessage, IClientInfo, IClientMovedMessage, IClient, IClientPropertiesUpdatedMessage, ITalkStatusChangedMessage, IClientSelfPropertyUpdatedMessage, IServerPropertiesUpdatedMessage, IConnectStatusChangedMessage, IChannelsMessage } from "interfaces/teamspeak";
import { TS5DataHandler } from "./dataHandler";
// Handle incoming messages from TS5 client
export class TS5MessageHandler {
ws: WebSocket;
dataHandler: TS5DataHandler;
setActiveConnectionStateId: React.Dispatch<React.SetStateAction<number>>;
activeConnectionId = 0;
constructor(ws: WebSocket, dataHandler: TS5DataHandler, 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) {
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);
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) {
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);
}
}

544
src/teamspeak5Handler.ts
View File

@@ -1,544 +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[]>>,
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() {
console.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() {
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");
}
setTimeout(() => {
this.reconnect();
}, 2000);
};
// 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;
setActiveConnectionStateId: React.Dispatch<React.SetStateAction<number>>;
activeConnectionId = 0;
constructor(ws: WebSocket, dataHandler: TS5DataHandler, 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) {
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);
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) {
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);
}
}

5
tsconfig.json
View File

@@ -14,7 +14,8 @@
"@assets/*": ["/src/assets/*"],
"@styles/*": ["/src/styles/*"],
"@utils/*": ["/src/utils/*"],
"@interfaces/*": ["/src/interfaces/*"]
"@interfaces/*": ["/src/interfaces/*"],
"@handlers/*": ["/src/handlers/*"]
},
/* Bundler mode */
@@ -31,6 +32,6 @@
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"include": ["src", "tests/teamspeakHandler.test.ts"],
"references": [{ "path": "./tsconfig.node.json" }]
}

1
vite.config.ts
View File

@@ -13,6 +13,7 @@ export default defineConfig({
"@assets": "/src/assets",
"@interfaces": "/src/interfaces",
"@utils": "/src/utils",
"@handlers": "/src/handlers",
},
},
plugins: [react(), viteSingleFile({ useRecommendedBuildConfig: false })],