mirror of
https://github.com/DerTyp7/teamspeak-obs-overlay.git
synced 2025-10-29 12:52:09 +01:00
Merge pull request #20 from DerTyp876/refactor_clean-up
Clean up project
This commit is contained in:
Janis
2851
package-lock.json
generated
2851
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -10,12 +10,15 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/node": "^20.3.2",
|
||||
"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",
|
||||
|
||||
@@ -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 { 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";
|
||||
|
||||
export default function App() {
|
||||
const [searchParams] = useSearchParams();
|
||||
@@ -38,7 +38,7 @@ export default function App() {
|
||||
useEffect(() => {
|
||||
const remoteAppPort = searchParams.get("remoteAppPort");
|
||||
|
||||
const tsConnection: TS5Connection = new TS5Connection(
|
||||
const tsConnection: ITS5ConnectionHandler = new TS5ConnectionHandler(
|
||||
parseInt(remoteAppPort ?? "5899"),
|
||||
setConnections,
|
||||
setChannels,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { IChannel, IClient } from "interfaces/teamspeak";
|
||||
import { IChannel, IClient } from "@interfaces/teamspeak";
|
||||
import "@styles/Viewer.scss";
|
||||
|
||||
export default function Viewer({
|
||||
|
||||
131
src/handlers/teamspeak/connectionHandler.ts
Normal file
131
src/handlers/teamspeak/connectionHandler.ts
Normal file
@@ -0,0 +1,131 @@
|
||||
import { IAuthSenderPayload, IChannel, IClient, IConnection, ITS5ConnectionHandler, ITS5DataHandler, ITS5MessageHandler } from "@interfaces/teamspeak";
|
||||
import { TS5DataHandler } from "./dataHandler";
|
||||
import { TS5MessageHandler } from "./messageHandler";
|
||||
|
||||
|
||||
// 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() {
|
||||
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;
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
204
src/handlers/teamspeak/dataHandler.ts
Normal file
204
src/handlers/teamspeak/dataHandler.ts
Normal file
@@ -0,0 +1,204 @@
|
||||
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) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
220
src/handlers/teamspeak/messageHandler.ts
Normal file
220
src/handlers/teamspeak/messageHandler.ts
Normal file
@@ -0,0 +1,220 @@
|
||||
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) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
@@ -1,12 +1,54 @@
|
||||
|
||||
export interface TS5MessageHandlerOptions {
|
||||
handleAuthMessage?: (data: IAuthMessage) => void;
|
||||
handleClientMoved?: (data: IClientMovedMessage) => void;
|
||||
handleClientPropertiesUpdate?: (data: IClientPropertiesUpdatedMessage) => void;
|
||||
handleTalkStatusChanged?: (data: ITalkStatusChangedMessage) => void;
|
||||
handleClientSelfPropertyUpdated?: (data: IClientSelfPropertyUpdatedMessage) => void;
|
||||
// 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: {
|
||||
|
||||
@@ -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);
|
||||
|
||||
}
|
||||
}
|
||||
@@ -6,15 +6,15 @@
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
"baseUrl": "./src",
|
||||
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["/src/*"],
|
||||
"@components/*": ["/src/components/*"],
|
||||
"@assets/*": ["/src/assets/*"],
|
||||
"@styles/*": ["/src/styles/*"],
|
||||
"@utils/*": ["/src/utils/*"],
|
||||
"@interfaces/*": ["/src/interfaces/*"]
|
||||
"@/*": ["src/*"],
|
||||
"@components/*": ["src/components/*"],
|
||||
"@assets/*": ["src/assets/*"],
|
||||
"@styles/*": ["src/styles/*"],
|
||||
"@utils/*": ["src/utils/*"],
|
||||
"@interfaces/*": ["src/interfaces/*"],
|
||||
"@handlers/*": ["src/handlers/*"]
|
||||
},
|
||||
|
||||
/* Bundler mode */
|
||||
|
||||
@@ -1,18 +1,20 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react-swc'
|
||||
import { viteSingleFile } from "vite-plugin-singlefile"
|
||||
import path from 'path';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
base: "./",
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": "/src",
|
||||
"@components": "/src/components",
|
||||
"@styles": "/src/styles",
|
||||
"@assets": "/src/assets",
|
||||
"@interfaces": "/src/interfaces",
|
||||
"@utils": "/src/utils",
|
||||
'@': path.resolve(__dirname, './src'),
|
||||
'@assets': path.resolve(__dirname, './src/assets'),
|
||||
'@components': path.resolve(__dirname, './src/components'),
|
||||
'@handlers': path.resolve(__dirname, './src/handlers'),
|
||||
'@interfaces': path.resolve(__dirname, './src/interfaces'),
|
||||
'@utils': path.resolve(__dirname, './src/utils'),
|
||||
'@styles': path.resolve(__dirname, './src/styles'),
|
||||
},
|
||||
},
|
||||
plugins: [react(), viteSingleFile({ useRecommendedBuildConfig: false })],
|
||||
|
||||
Reference in New Issue
Block a user