mirror of
https://github.com/DerTyp7/teamspeak-obs-overlay.git
synced 2025-10-29 12:52:09 +01:00
Merge pull request #15 from DerTyp876/new_react_ts_version
Reworked project with React/Vite
This commit is contained in:
Janis
14
.eslintrc.cjs
Normal file
14
.eslintrc.cjs
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
module.exports = {
|
||||||
|
env: { browser: true, es2020: true },
|
||||||
|
extends: [
|
||||||
|
'eslint:recommended',
|
||||||
|
'plugin:@typescript-eslint/recommended',
|
||||||
|
'plugin:react-hooks/recommended',
|
||||||
|
],
|
||||||
|
parser: '@typescript-eslint/parser',
|
||||||
|
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
|
||||||
|
plugins: ['react-refresh'],
|
||||||
|
rules: {
|
||||||
|
'react-refresh/only-export-components': 'warn',
|
||||||
|
},
|
||||||
|
}
|
||||||
24
.gitignore
vendored
24
.gitignore
vendored
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|||||||
14
config.js
14
config.js
@@ -1,14 +0,0 @@
|
|||||||
const CONFIG = {
|
|
||||||
remoteAppPort: 5899, // The port the TS5 client uses for remote apps (TS client -> settings/Remote Apps/Port)
|
|
||||||
|
|
||||||
// Style of the overlay
|
|
||||||
style: {
|
|
||||||
fontBackground: "rgba(19, 20, 33, 0.5)",
|
|
||||||
fontColor: "#ffffff",
|
|
||||||
fontSize: "70pt",
|
|
||||||
fontStrokeSize: "3px",
|
|
||||||
fontStrokeColor: "#000000",
|
|
||||||
},
|
|
||||||
hideSelf: false, // Hide yourself in the overlay
|
|
||||||
hideSilent: false, // Only show talking people
|
|
||||||
};
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
* {
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.client-div {
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
.client-img-div {
|
|
||||||
float: left;
|
|
||||||
width: 107px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.client-img-div img {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.client-text-div {
|
|
||||||
margin-left: 130px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.client-text-div p {
|
|
||||||
display: inline;
|
|
||||||
padding-left: 20px;
|
|
||||||
padding-right: 20px;
|
|
||||||
padding-top: 5px;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><title>muted_input</title><g id="muted_input.svg"><path d="M88.62,54.15V64A24.69,24.69,0,0,1,64,88.62a25.26,25.26,0,0,1-8.38-1.46l-7.39,7.39A34,34,0,0,0,64,98.46,34.5,34.5,0,0,0,98.46,64V54.15a4.92,4.92,0,1,1,9.85,0V64a44.31,44.31,0,0,1-39.38,44v10.15H88.62a4.92,4.92,0,0,1,0,9.85H39.38a4.92,4.92,0,1,1,0-9.85H59.08V108A43.3,43.3,0,0,1,41,101.77L21.46,121.31a2.46,2.46,0,0,1-3.54,0L11.62,115a2.46,2.46,0,0,1,0-3.54l94.92-94.92a2.46,2.46,0,0,1,3.54,0l6.31,6.31a2.46,2.46,0,0,1,0,3.54ZM22.92,80.46A43.3,43.3,0,0,1,19.69,64V54.15a4.92,4.92,0,1,1,9.85,0V64a35.94,35.94,0,0,0,1.15,8.69ZM39.38,64V24.62a24.62,24.62,0,0,1,47.77-8.38Z" fill="#c9070a"/></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 716 B |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><title>muted_output</title><g id="muted_output"><path d="M116.62,39a4.78,4.78,0,0,1-1.59.3l-6.29,3.63a45.42,45.42,0,0,1-13.33,57.64,49.4,49.4,0,0,1-5.82,3.62c-1.06.57-2.2.92-3.19,1.49-1.7,1-2.77,2.13-2.77,4.18a4.57,4.57,0,0,0,4.54,4.54,5.33,5.33,0,0,0,1.84-.35,54.49,54.49,0,0,0,26.94-75c-.12,0-.22,0-.34,0M88.18,13.58a4.57,4.57,0,0,0-4.54,4.54c0,2.06,1.06,3.19,2.77,4.18,1,.57,2.13.92,3.19,1.49a49.4,49.4,0,0,1,5.82,3.62,45.68,45.68,0,0,1,8.19,7.78l7-4a2.63,2.63,0,0,1,1.11-.34A54.31,54.31,0,0,0,90,13.94a5.33,5.33,0,0,0-1.84-.35" fill="#c9070a"/><path d="M59.46,71.4,32.77,86.81l19,19a4.51,4.51,0,0,0,3.19,1.35,4.57,4.57,0,0,0,4.54-4.54V71.4M54.92,20.88a4.51,4.51,0,0,0-3.19,1.35L28.11,45.85H9.53A4.57,4.57,0,0,0,5,50.38V77.62a4.57,4.57,0,0,0,4.54,4.54H22.25l37.2-21.48V25.42a4.57,4.57,0,0,0-4.54-4.54" fill="#c9070a"/><path d="M85.1,56.6l-7.87,4.54A10,10,0,0,1,77.61,64c0,8.58-8.23,7.09-8.23,12.48A4.53,4.53,0,0,0,73.92,81a4,4,0,0,0,1.77-.35A18.13,18.13,0,0,0,86.69,64a18.34,18.34,0,0,0-1.59-7.4M73.92,47a4.52,4.52,0,0,0-4.54,4.54,3.92,3.92,0,0,0,1.08,2.8l8.76-5.06a16.14,16.14,0,0,0-3.52-1.93A4,4,0,0,0,73.92,47" fill="#c9070a"/><path d="M100.87,47.49,93,52a27.15,27.15,0,0,1-8.36,33.87A36.79,36.79,0,0,1,79.24,89a4.54,4.54,0,0,0,1.84,8.72,5.24,5.24,0,0,0,1.77-.35,36.34,36.34,0,0,0,18-49.91M81,30.25A4.54,4.54,0,0,0,79.24,39a36.82,36.82,0,0,1,5.39,3.12,27,27,0,0,1,2.86,2.4l8.14-4.7A35.37,35.37,0,0,0,82.86,30.6,5.31,5.31,0,0,0,81,30.25" fill="#c9070a"/><path d="M126.57,43.71,10.42,110.77a2.88,2.88,0,0,1-3.93-1.05L4.33,106A2.88,2.88,0,0,1,5.38,102L121.53,35A2.88,2.88,0,0,1,125.46,36l2.16,3.75A2.88,2.88,0,0,1,126.57,43.71Z" fill="#c9070a"/></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.7 KiB |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><title>player_off_v2</title><g id="player_off_v2.svg"><path d="M64,128a64,64,0,1,1,64-64A64,64,0,0,1,64,128Z" fill="#3e4f5e"/></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 198 B |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><title>player_on_v2</title><g id="player_on_v2.svg"><path d="M64,128a64,64,0,1,1,64-64A64,64,0,0,1,64,128Z" fill="#00b4df"/></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 196 B |
12
index.html
Normal file
12
index.html
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>TS5-OBS-Overlay</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
87
js/app.js
87
js/app.js
@@ -1,87 +0,0 @@
|
|||||||
// Main entry point
|
|
||||||
function main() {
|
|
||||||
let authenticated = false; // using this bool to determine if an user is already authenticated
|
|
||||||
|
|
||||||
// Reset variables. Important so that the app can easly restart or reconnected.
|
|
||||||
clientList.clear();
|
|
||||||
channelList.clear();
|
|
||||||
selfClient = null;
|
|
||||||
|
|
||||||
// Initiliaze websocket connection to TS5 client
|
|
||||||
const ws = new WebSocket(`ws://localhost:${CONFIG.remoteAppPort}`);
|
|
||||||
const initalPayload = {
|
|
||||||
type: "auth",
|
|
||||||
payload: {
|
|
||||||
identifier: "de.tealfire.obs",
|
|
||||||
version: "0.2.1",
|
|
||||||
name: "TS5 OBS Overlay",
|
|
||||||
description: "A simple OBS overlay for TS5 by DerTyp876",
|
|
||||||
content: {
|
|
||||||
apiKey: localStorage.getItem("apiKey") ?? "",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
ws.onopen = () => {
|
|
||||||
// Send authentication payload to TS5 client
|
|
||||||
ws.send(JSON.stringify(initalPayload));
|
|
||||||
};
|
|
||||||
|
|
||||||
// Handle websockets
|
|
||||||
ws.onmessage = (event) => {
|
|
||||||
let data = JSON.parse(event.data);
|
|
||||||
console.log(data);
|
|
||||||
switch (data.type) {
|
|
||||||
case "auth":
|
|
||||||
handleAuthMessage(data);
|
|
||||||
localStorage.setItem("apiKey", data.payload.apiKey);
|
|
||||||
authenticated = true;
|
|
||||||
//console.log(apiKey);
|
|
||||||
break;
|
|
||||||
case "clientMoved":
|
|
||||||
handleClientMoved(data);
|
|
||||||
break;
|
|
||||||
case "clientPropertiesUpdated":
|
|
||||||
handleClientPropertiesUpdate(data);
|
|
||||||
break;
|
|
||||||
case "talkStatusChanged":
|
|
||||||
handleTalkStatusChanged(data);
|
|
||||||
break;
|
|
||||||
case "serverPropertiesUpdated":
|
|
||||||
ws.close();
|
|
||||||
default:
|
|
||||||
console.log(`No handler for event type: ${data.type}`);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Draw clientList in HTML object
|
|
||||||
drawClients();
|
|
||||||
};
|
|
||||||
|
|
||||||
ws.onerror = (err) => {
|
|
||||||
console.log(err);
|
|
||||||
ws.close();
|
|
||||||
return;
|
|
||||||
};
|
|
||||||
|
|
||||||
ws.onclose = (event) => {
|
|
||||||
// Need to check if the connection got closed while the user was connected.
|
|
||||||
// Because TS does not return a proper authentication error.
|
|
||||||
// closed and not authenticated -> auth error or ts5 restarted/closed
|
|
||||||
// closed and authenticated -> no auth error, app/obs was just closed by user
|
|
||||||
if (authenticated == false) {
|
|
||||||
localStorage.setItem("apiKey", "");
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(event);
|
|
||||||
console.log("Disconnected");
|
|
||||||
|
|
||||||
// Since the user disconnected, we need to clear all clients and channel
|
|
||||||
clientList.clear();
|
|
||||||
channelList.clear();
|
|
||||||
|
|
||||||
drawClients(); // Redraw overlay to remove all clients
|
|
||||||
main(); // Reconnected
|
|
||||||
};
|
|
||||||
}
|
|
||||||
main();
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
// Draw clients in the overlay
|
|
||||||
// Gets called everytime an event has been received (app.js -> ws.onmessage)
|
|
||||||
function drawClients() {
|
|
||||||
const overlayContent = document.getElementById("content");
|
|
||||||
|
|
||||||
let result = "";
|
|
||||||
if (selfClient) {
|
|
||||||
// Loop through all clients which are currently in your channel
|
|
||||||
getClientsInChannel(selfClient.channel).forEach((c) => {
|
|
||||||
// Open client div
|
|
||||||
result += `<div class="client-div" ${c.isHidden() ? "hidden" : ""} style="color:${
|
|
||||||
CONFIG.style.fontColor
|
|
||||||
}; font-size:${CONFIG.style.fontSize}">`;
|
|
||||||
|
|
||||||
// Add image
|
|
||||||
result += '<div class="client-img-div">';
|
|
||||||
if (c.outputMuted) {
|
|
||||||
result += ' <img src="img/muted_output.svg" />';
|
|
||||||
} else if (c.inputMuted) {
|
|
||||||
result += ' <img src="img/muted_input.svg" />';
|
|
||||||
} else if (c.talkStatus == 1) {
|
|
||||||
result += ' <img src="img/on.svg" />';
|
|
||||||
} else {
|
|
||||||
result += ' <img src="img/off.svg" />';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Close client div
|
|
||||||
result += "</div>";
|
|
||||||
|
|
||||||
// Add client text (name of the client)
|
|
||||||
result += `<div class="client-text-div"
|
|
||||||
style="-webkit-text-stroke:${CONFIG.style.fontStrokeSize} ${CONFIG.style.fontStrokeColor};
|
|
||||||
"><p style="background:${CONFIG.style.fontBackground};">${c.name}</p></div></div>`;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
overlayContent.innerHTML = result;
|
|
||||||
}
|
|
||||||
@@ -1,97 +0,0 @@
|
|||||||
// Handle the auth message event which is send by the client to init the session
|
|
||||||
// The clients send therefore all channels and clients to us
|
|
||||||
function handleAuthMessage(data) {
|
|
||||||
// Set channels and clients
|
|
||||||
channelList.setItems(parseChannelInfos(data.payload.connections[0].channelInfos));
|
|
||||||
clientList.setItems(parseClientInfos(data.payload.connections[0].clientInfos));
|
|
||||||
|
|
||||||
// The client of this current user
|
|
||||||
selfClient = clientList.getById(data.payload.connections[0].clientId);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle the event when a client moved to another place/channel
|
|
||||||
// Also includes disconnecting and connecting of clients
|
|
||||||
function handleClientMoved(data) {
|
|
||||||
// Get our client object based on the target client id of this event
|
|
||||||
// This can be null if the client does not exist in our list (newly joined)
|
|
||||||
const client = clientList.getById(data.payload.clientId);
|
|
||||||
|
|
||||||
if (data.payload.newChannelId == 0) {
|
|
||||||
// If newChannelId is 0, the client left the server
|
|
||||||
// Client disconnected
|
|
||||||
if (client) {
|
|
||||||
console.log(`${client.name} disconnected`);
|
|
||||||
clientList.remove(client); // Remove disconnected client from clientList
|
|
||||||
}
|
|
||||||
|
|
||||||
// If the disconnected client is the current user
|
|
||||||
if (data.payload.clientId == selfClient.id) {
|
|
||||||
//* NOTE: since this app does support multiple servers yet, we expect the user to be connected to NO servers at this point
|
|
||||||
console.log("You disconnected");
|
|
||||||
clientList.clear(); // remove all clients.
|
|
||||||
channelList.clear();
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Client switched the channel OR JOINED the server to a channel
|
|
||||||
if (client) {
|
|
||||||
// Client just switched the channel
|
|
||||||
// Like described at the const client declaration, the client is not null therefore he already existed in our list/server
|
|
||||||
client.channel = channelList.getById(data.payload.newChannelId);
|
|
||||||
} else {
|
|
||||||
// Client joined the server
|
|
||||||
// Like described at the const client declaration, the client is null he is NEW in our list/server
|
|
||||||
clientList.add(
|
|
||||||
new Client(
|
|
||||||
data.payload.clientId,
|
|
||||||
channelList.getById(data.payload.newChannelId),
|
|
||||||
data.payload.properties.nickname
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle the event where a client updates his properties (e.g. name, muteStatus)
|
|
||||||
function handleClientPropertiesUpdate(data) {
|
|
||||||
// Get our client object based on the target client id of this event
|
|
||||||
// This can be null if the client does not exist in our list
|
|
||||||
const client = clientList.getById(data.payload.clientId);
|
|
||||||
|
|
||||||
if (data.payload.properties.channelGroupInheritedChannelId == 0) {
|
|
||||||
if (client) {
|
|
||||||
clientList.remove(client);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (client) {
|
|
||||||
// Update client properties
|
|
||||||
|
|
||||||
// Other to the handleClientMoved function this handleClientPropertiesUpdate function also gets called
|
|
||||||
// if anything at all happend to the client, so we update the channel here to be sure we dont miss anything
|
|
||||||
client.channel = channelList.getById(data.payload.properties.channelGroupInheritedChannelId);
|
|
||||||
|
|
||||||
client.name = data.payload.properties.nickname;
|
|
||||||
client.inputMuted = data.payload.properties.inputMuted;
|
|
||||||
client.outputMuted = data.payload.properties.outputMuted;
|
|
||||||
} else {
|
|
||||||
// For some reason the client did not exist in our list. Add client, to prevent further errors.
|
|
||||||
clientList.add(
|
|
||||||
new Client(
|
|
||||||
data.payload.clientId,
|
|
||||||
channelList.getById(data.payload.properties.channelGroupInheritedChannelId),
|
|
||||||
data.payload.properties.nickname,
|
|
||||||
data.payload.properies.inputMuted,
|
|
||||||
data.payload.properies.outputMuted
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Gets called when a client starts talking
|
|
||||||
//* NOTE: If the "current self-user" is speaking but muted, this will still be called. This does not apply to foreign clients
|
|
||||||
function handleTalkStatusChanged(data) {
|
|
||||||
let client = clientList.getById(data.payload.clientId);
|
|
||||||
if (client) {
|
|
||||||
client.talkStatus = data.payload.status;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,71 +0,0 @@
|
|||||||
class Channel {
|
|
||||||
constructor(id, name) {
|
|
||||||
this.id = id;
|
|
||||||
this.name = name;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class Client {
|
|
||||||
constructor(id, channel, name, inputMuted = false, outputMuted = false, talkStatus = 0) {
|
|
||||||
this.id = id;
|
|
||||||
this.channel = channel;
|
|
||||||
this.name = name;
|
|
||||||
this.inputMuted = inputMuted;
|
|
||||||
this.outputMuted = outputMuted;
|
|
||||||
this.talkStatus = talkStatus;
|
|
||||||
console.log(`Client created: ${this.id} - ${this.name}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
isMuted() {
|
|
||||||
return this.inputMuted == true || this.outputMuted == true;
|
|
||||||
}
|
|
||||||
|
|
||||||
isHidden() {
|
|
||||||
return (
|
|
||||||
(CONFIG.hideSilent && (this.talkStatus == 0 || this.isMuted())) || (CONFIG.hideSelf && this.id == selfClient.id)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class List {
|
|
||||||
constructor(items = []) {
|
|
||||||
this.items = items;
|
|
||||||
}
|
|
||||||
|
|
||||||
getById(id) {
|
|
||||||
return this.items.filter((obj) => {
|
|
||||||
return obj.id === id;
|
|
||||||
})[0];
|
|
||||||
}
|
|
||||||
|
|
||||||
add(item) {
|
|
||||||
if (!this.getById(item.id)) {
|
|
||||||
this.items.push(item);
|
|
||||||
} else {
|
|
||||||
console.error(`An item with id ${item.id} already exists in list`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
remove(item) {
|
|
||||||
this.items.splice(this.items.indexOf(item), 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
clear() {
|
|
||||||
this.items = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
setItems(items) {
|
|
||||||
// Never tested
|
|
||||||
let duplicateFound = false;
|
|
||||||
items.forEach((e1, i) => {
|
|
||||||
items.forEach((e2, j) => {
|
|
||||||
if (e1.id === e2.id && i != j) {
|
|
||||||
duplicateFound = true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
if (!duplicateFound) {
|
|
||||||
this.items = items;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
34
js/parser.js
34
js/parser.js
@@ -1,34 +0,0 @@
|
|||||||
// Parse teamspeak channel structure into our objects
|
|
||||||
function parseChannelInfos(channelInfos) {
|
|
||||||
let result = [];
|
|
||||||
let rootChannels = channelInfos.rootChannels;
|
|
||||||
let subChannels = channelInfos.subChannels;
|
|
||||||
|
|
||||||
rootChannels.forEach((rc) => {
|
|
||||||
result.push(new Channel(rc.id, rc.properties.name));
|
|
||||||
|
|
||||||
if (subChannels !== null && rc.id in subChannels) {
|
|
||||||
subChannels[rc.id].forEach((sc) => {
|
|
||||||
result.push(new Channel(sc.id, sc.properties.name));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Parse teamspeak clients into our objects
|
|
||||||
function parseClientInfos(clientInfos) {
|
|
||||||
let result = [];
|
|
||||||
clientInfos.forEach((e) => {
|
|
||||||
result.push(
|
|
||||||
new Client(
|
|
||||||
e.id,
|
|
||||||
channelList.getById(e.channelId),
|
|
||||||
e.properties.nickname,
|
|
||||||
e.properties.inputMuted,
|
|
||||||
e.properties.outputMuted
|
|
||||||
)
|
|
||||||
);
|
|
||||||
});
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
12
js/utils.js
12
js/utils.js
@@ -1,12 +0,0 @@
|
|||||||
function getClientsInChannel(channel) {
|
|
||||||
let result = [];
|
|
||||||
|
|
||||||
clientList.items.forEach((e) => {
|
|
||||||
if (e.channel) {
|
|
||||||
if (e.channel.id == channel.id) {
|
|
||||||
result.push(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
29
overlay.html
29
overlay.html
@@ -1,29 +0,0 @@
|
|||||||
<!-- https://github.com/DerTyp876/ts5-obs-overlay/ -->
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css" />
|
|
||||||
<title>TS5 - OBS Overlay</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="config.js"></script>
|
|
||||||
<script src="js/objects.js"></script>
|
|
||||||
<script>
|
|
||||||
let apiKey = "";
|
|
||||||
let clientList = new List();
|
|
||||||
let channelList = new List();
|
|
||||||
let thisClient;
|
|
||||||
</script>
|
|
||||||
<div id="content"></div>
|
|
||||||
|
|
||||||
<!--Scripts-->
|
|
||||||
<script src="js/utils.js"></script>
|
|
||||||
<script src="js/display_content.js"></script>
|
|
||||||
<script src="js/parser.js"></script>
|
|
||||||
<script src="js/event_handlers.js"></script>
|
|
||||||
<script src="js/app.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
2568
package-lock.json
generated
Normal file
2568
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
30
package.json
Normal file
30
package.json
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"name": "ts5-obs-overlay",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc && vite build",
|
||||||
|
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"sass": "^1.62.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.0.37",
|
||||||
|
"@types/react-dom": "^18.0.11",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^5.59.0",
|
||||||
|
"@typescript-eslint/parser": "^5.59.0",
|
||||||
|
"@vitejs/plugin-react-swc": "^3.0.0",
|
||||||
|
"eslint": "^8.38.0",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.3.4",
|
||||||
|
"typescript": "^5.0.2",
|
||||||
|
"vite": "^4.3.9",
|
||||||
|
"vite-plugin-singlefile": "^0.13.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
60
readme.md
60
readme.md
@@ -1,60 +0,0 @@
|
|||||||
|
|
||||||
# A OBS-Overlay for TeamSpeak5
|
|
||||||
Made with the "Remote App" feature of TeamSpeak5
|
|
||||||
- [A OBS-Overlay for TeamSpeak5](#a-obs-overlay-for-teamspeak5)
|
|
||||||
- [Setup](#setup)
|
|
||||||
- [Update](#update)
|
|
||||||
- [Use script](#use-script)
|
|
||||||
- [Manually](#manually)
|
|
||||||
- [Configuration](#configuration)
|
|
||||||
- [Troubleshooting](#troubleshooting)
|
|
||||||
- [Option 1:](#option-1)
|
|
||||||
- [Option 2:](#option-2)
|
|
||||||
- [Option 3:](#option-3)
|
|
||||||
|
|
||||||
>**_WARNING:_** This overlay works only show the first server you were connected to.
|
|
||||||
|
|
||||||
## Setup
|
|
||||||
1. Download the [latest release](https://github.com/DerTyp876/ts5-obs-overlay/releases/latest) of this project & extract the archive to a folder of your choice
|
|
||||||
2. Open your TeamSpeak5 client and go to
|
|
||||||
`settings -> Remote Apps`
|
|
||||||
3. Enable the "Remote Apps" feature
|
|
||||||
|
|
||||||
|
|
||||||
4. Open your OBS Studio & add a new **browser source** to your scene
|
|
||||||
|
|
||||||
|
|
||||||
5. In the properties of your new browser source, select the Local File check box
|
|
||||||
6. Click "Browse" next to the newly apperared "Local file" field
|
|
||||||
7. Now select the in step 1 downloaded `overlay.html`
|
|
||||||
8. Set the "Width" to `2000` and the "Height" to `1000` (This is just my own preference. If you have better values, use them)
|
|
||||||
|
|
||||||
|
|
||||||
9. Now connect to a TeamSpeak server and check if it works. You need to **accept** the remote app in your TeamSpeak notifications
|
|
||||||
|
|
||||||
**Done**
|
|
||||||
## Update
|
|
||||||
### Use script
|
|
||||||
If you want to update the project automatically, just double-click the "update.bat" file **OR** open a new console in the project directory and run the "update.ps1" command.
|
|
||||||
If you encounter problems because of the microsoft execution policy open a console in the project directory and run
|
|
||||||
`powershell -ExecutionPolicy Bypass -File update.ps1`
|
|
||||||
https://stackoverflow.com/questions/4037939/powershell-says-execution-of-scripts-is-disabled-on-this-system
|
|
||||||
|
|
||||||
### Manually
|
|
||||||
To manually update just delete the hole project directory and repeat the [setup](#setup) above :).
|
|
||||||
|
|
||||||
## Configuration
|
|
||||||
In the `config.js` file, which is located in the same folder as the `overlay.html` file, you can make various settings for the appearance of the overlay.
|
|
||||||
Since everything is written in simple css and html, you can change the `css/style.css` file to your liking.
|
|
||||||
>**_NOTE_** If your change something in the files you have to do [Option 3 of the troubleshooting below](#option-3).
|
|
||||||
|
|
||||||
## Troubleshooting
|
|
||||||
Possible solutions to fix the overlay.
|
|
||||||
### Option 1:
|
|
||||||
Disconnect from all TeamSpeak servers and reconnect to just one
|
|
||||||
### Option 2:
|
|
||||||
Restart TeamSpeak5
|
|
||||||
### Option 3:
|
|
||||||
1. Open OBS Studio
|
|
||||||
2. Go open the properties of your browser source
|
|
||||||
3. On the bottom of the properties press the "Refresh cache of current page" button.
|
|
||||||
64
src/App.tsx
Normal file
64
src/App.tsx
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
/* 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";
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
const [clients, setClients] = useState<IClient[]>([]);
|
||||||
|
const [channels, setChannels] = useState<IChannel[]>([]);
|
||||||
|
const [connections, setConnections] = useState<IConnection[]>([]);
|
||||||
|
const [activeConnectionId, setActiveConnectionId] = useState<number>(1);
|
||||||
|
|
||||||
|
const [currentConnection, setCurrentConnection] = useState<IConnection | undefined>(undefined);
|
||||||
|
const [currentChannel, setCurrentChannel] = useState<IChannel | undefined>(undefined);
|
||||||
|
const [currentClient, setCurrentClient] = useState<IClient | undefined>(undefined);
|
||||||
|
|
||||||
|
function setCurrentStates() {
|
||||||
|
const currentConnection = connections.find((connection) => connection.id === activeConnectionId);
|
||||||
|
setCurrentConnection(currentConnection);
|
||||||
|
|
||||||
|
if (currentConnection) {
|
||||||
|
const currentClient = clients.find((client) => client.id === currentConnection.clientId);
|
||||||
|
setCurrentClient(currentClient);
|
||||||
|
if (currentClient) {
|
||||||
|
const currentChannel = channels.find((channel) => channel.id === currentClient.channel?.id);
|
||||||
|
setCurrentChannel(currentChannel);
|
||||||
|
if (currentChannel) {
|
||||||
|
return currentChannel;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const tsConnection: TS5Connection = new TS5Connection(
|
||||||
|
5899,
|
||||||
|
setConnections,
|
||||||
|
setChannels,
|
||||||
|
setClients,
|
||||||
|
setActiveConnectionId
|
||||||
|
);
|
||||||
|
tsConnection.connect();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setCurrentStates();
|
||||||
|
}, [clients, channels, connections, activeConnectionId]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="App">
|
||||||
|
<Viewer
|
||||||
|
clients={
|
||||||
|
clients.map((client) => {
|
||||||
|
if (client.channel?.id === currentChannel?.id) {
|
||||||
|
return client;
|
||||||
|
}
|
||||||
|
}) as IClient[]
|
||||||
|
}
|
||||||
|
channel={currentChannel}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
80
src/Viewer.tsx
Normal file
80
src/Viewer.tsx
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
import { IChannel, IClient } from "interfaces/teamspeak";
|
||||||
|
import "@styles/Viewer.scss";
|
||||||
|
|
||||||
|
export default function Viewer({
|
||||||
|
clients,
|
||||||
|
channel,
|
||||||
|
showChannelName = false,
|
||||||
|
}: {
|
||||||
|
clients: IClient[] | undefined;
|
||||||
|
channel: IChannel | undefined;
|
||||||
|
showChannelName?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="viewer">
|
||||||
|
{showChannelName ? <h3>{channel?.properties.name}</h3> : null}
|
||||||
|
{clients?.map((client) => {
|
||||||
|
if (client) {
|
||||||
|
return (
|
||||||
|
<div className="client" key={`${client.id}-${client.channel?.connection.id}`}>
|
||||||
|
{client.properties.outputMuted ? (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
|
||||||
|
<title>muted_output</title>
|
||||||
|
<g id="muted_output">
|
||||||
|
<path
|
||||||
|
d="M116.62,39a4.78,4.78,0,0,1-1.59.3l-6.29,3.63a45.42,45.42,0,0,1-13.33,57.64,49.4,49.4,0,0,1-5.82,3.62c-1.06.57-2.2.92-3.19,1.49-1.7,1-2.77,2.13-2.77,4.18a4.57,4.57,0,0,0,4.54,4.54,5.33,5.33,0,0,0,1.84-.35,54.49,54.49,0,0,0,26.94-75c-.12,0-.22,0-.34,0M88.18,13.58a4.57,4.57,0,0,0-4.54,4.54c0,2.06,1.06,3.19,2.77,4.18,1,.57,2.13.92,3.19,1.49a49.4,49.4,0,0,1,5.82,3.62,45.68,45.68,0,0,1,8.19,7.78l7-4a2.63,2.63,0,0,1,1.11-.34A54.31,54.31,0,0,0,90,13.94a5.33,5.33,0,0,0-1.84-.35"
|
||||||
|
fill="#c9070a"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M59.46,71.4,32.77,86.81l19,19a4.51,4.51,0,0,0,3.19,1.35,4.57,4.57,0,0,0,4.54-4.54V71.4M54.92,20.88a4.51,4.51,0,0,0-3.19,1.35L28.11,45.85H9.53A4.57,4.57,0,0,0,5,50.38V77.62a4.57,4.57,0,0,0,4.54,4.54H22.25l37.2-21.48V25.42a4.57,4.57,0,0,0-4.54-4.54"
|
||||||
|
fill="#c9070a"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M85.1,56.6l-7.87,4.54A10,10,0,0,1,77.61,64c0,8.58-8.23,7.09-8.23,12.48A4.53,4.53,0,0,0,73.92,81a4,4,0,0,0,1.77-.35A18.13,18.13,0,0,0,86.69,64a18.34,18.34,0,0,0-1.59-7.4M73.92,47a4.52,4.52,0,0,0-4.54,4.54,3.92,3.92,0,0,0,1.08,2.8l8.76-5.06a16.14,16.14,0,0,0-3.52-1.93A4,4,0,0,0,73.92,47"
|
||||||
|
fill="#c9070a"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M100.87,47.49,93,52a27.15,27.15,0,0,1-8.36,33.87A36.79,36.79,0,0,1,79.24,89a4.54,4.54,0,0,0,1.84,8.72,5.24,5.24,0,0,0,1.77-.35,36.34,36.34,0,0,0,18-49.91M81,30.25A4.54,4.54,0,0,0,79.24,39a36.82,36.82,0,0,1,5.39,3.12,27,27,0,0,1,2.86,2.4l8.14-4.7A35.37,35.37,0,0,0,82.86,30.6,5.31,5.31,0,0,0,81,30.25"
|
||||||
|
fill="#c9070a"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M126.57,43.71,10.42,110.77a2.88,2.88,0,0,1-3.93-1.05L4.33,106A2.88,2.88,0,0,1,5.38,102L121.53,35A2.88,2.88,0,0,1,125.46,36l2.16,3.75A2.88,2.88,0,0,1,126.57,43.71Z"
|
||||||
|
fill="#c9070a"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
) : client.properties.inputMuted ? (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
|
||||||
|
<title>muted_input</title>
|
||||||
|
<g id="muted_input.svg">
|
||||||
|
<path
|
||||||
|
d="M88.62,54.15V64A24.69,24.69,0,0,1,64,88.62a25.26,25.26,0,0,1-8.38-1.46l-7.39,7.39A34,34,0,0,0,64,98.46,34.5,34.5,0,0,0,98.46,64V54.15a4.92,4.92,0,1,1,9.85,0V64a44.31,44.31,0,0,1-39.38,44v10.15H88.62a4.92,4.92,0,0,1,0,9.85H39.38a4.92,4.92,0,1,1,0-9.85H59.08V108A43.3,43.3,0,0,1,41,101.77L21.46,121.31a2.46,2.46,0,0,1-3.54,0L11.62,115a2.46,2.46,0,0,1,0-3.54l94.92-94.92a2.46,2.46,0,0,1,3.54,0l6.31,6.31a2.46,2.46,0,0,1,0,3.54ZM22.92,80.46A43.3,43.3,0,0,1,19.69,64V54.15a4.92,4.92,0,1,1,9.85,0V64a35.94,35.94,0,0,0,1.15,8.69ZM39.38,64V24.62a24.62,24.62,0,0,1,47.77-8.38Z"
|
||||||
|
fill="#c9070a"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
) : client.talkStatus == 1 ? (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
|
||||||
|
<title>player_on_v2</title>
|
||||||
|
<g id="player_on_v2.svg">
|
||||||
|
<path d="M64,128a64,64,0,1,1,64-64A64,64,0,0,1,64,128Z" fill="#00b4df" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
) : (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
|
||||||
|
<title>player_off_v2</title>
|
||||||
|
<g id="player_off_v2.svg">
|
||||||
|
<path d="M64,128a64,64,0,1,1,64-64A64,64,0,0,1,64,128Z" fill="#3e4f5e" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
|
<p>{client.properties.nickname}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return <></>;
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
299
src/interfaces/teamspeak.ts
Normal file
299
src/interfaces/teamspeak.ts
Normal file
@@ -0,0 +1,299 @@
|
|||||||
|
|
||||||
|
export interface TS5MessageHandlerOptions {
|
||||||
|
handleAuthMessage?: (data: IAuthMessage) => void;
|
||||||
|
handleClientMoved?: (data: IClientMovedMessage) => void;
|
||||||
|
handleClientPropertiesUpdate?: (data: IClientPropertiesUpdatedMessage) => void;
|
||||||
|
handleTalkStatusChanged?: (data: ITalkStatusChangedMessage) => void;
|
||||||
|
handleClientSelfPropertyUpdated?: (data: IClientSelfPropertyUpdatedMessage) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IAuthSenderPayload {
|
||||||
|
type: "auth";
|
||||||
|
payload: {
|
||||||
|
identifier: string;
|
||||||
|
version: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
content: {
|
||||||
|
apiKey: string;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IClient {
|
||||||
|
id: number;
|
||||||
|
talkStatus: number;
|
||||||
|
channel: IChannel;
|
||||||
|
properties: IClientProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IChannel {
|
||||||
|
id: number;
|
||||||
|
connection: IConnection;
|
||||||
|
order: string;
|
||||||
|
parentId: string;
|
||||||
|
properties: IChannelProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IConnection {
|
||||||
|
channelInfos?: IChannelInfos;
|
||||||
|
clientId: number;
|
||||||
|
clientInfos?: IClientInfo[];
|
||||||
|
id: number;
|
||||||
|
properties?: IServerProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export interface IChannelProperties {
|
||||||
|
bannerGfxUrl: string;
|
||||||
|
bannerMode: number;
|
||||||
|
codec: number;
|
||||||
|
codecIsUnencrypted: boolean;
|
||||||
|
codecLatencyFactor: number;
|
||||||
|
codecQuality: number;
|
||||||
|
deleteDelay: number;
|
||||||
|
description: string;
|
||||||
|
flagAreSubscribed: boolean;
|
||||||
|
flagDefault: boolean;
|
||||||
|
flagMaxclientsUnlimited: boolean;
|
||||||
|
flagMaxfamilyclientsInherited: boolean;
|
||||||
|
flagMaxfamilyclientsUnlimited: boolean;
|
||||||
|
flagPassword: boolean;
|
||||||
|
flagPermanent: boolean;
|
||||||
|
flagSemiPermanent: boolean;
|
||||||
|
forcedSilence: boolean;
|
||||||
|
iconId: number;
|
||||||
|
maxclients: number;
|
||||||
|
maxfamilyclients: number;
|
||||||
|
name: string;
|
||||||
|
namePhonetic: string;
|
||||||
|
neededTalkPower: number;
|
||||||
|
order: string;
|
||||||
|
permissionHints: number;
|
||||||
|
storageQuota: number;
|
||||||
|
topic: string;
|
||||||
|
uniqueIdentifier: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export interface IChannelInfos {
|
||||||
|
rootChannels: IChannel[];
|
||||||
|
subChannels: { [key: number]: IChannel[] };
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IClientInfo {
|
||||||
|
channelId: number;
|
||||||
|
id: number;
|
||||||
|
properties: IClientProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IClientProperties {
|
||||||
|
away: boolean;
|
||||||
|
awayMessage: string;
|
||||||
|
badges: string;
|
||||||
|
channelGroupId: string;
|
||||||
|
channelGroupInheritedChannelId: string;
|
||||||
|
country: string;
|
||||||
|
created: number;
|
||||||
|
databaseId: string;
|
||||||
|
defaultChannel: string;
|
||||||
|
defaultChannelPassword: string;
|
||||||
|
defaultToken: string;
|
||||||
|
description: string;
|
||||||
|
flagAvatar: string;
|
||||||
|
flagTalking: boolean;
|
||||||
|
iconId: number;
|
||||||
|
idleTime: number;
|
||||||
|
inputDeactivated: boolean;
|
||||||
|
inputHardware: boolean;
|
||||||
|
inputMuted: boolean;
|
||||||
|
integrations: string;
|
||||||
|
isChannelCommander: boolean;
|
||||||
|
isMuted: boolean;
|
||||||
|
isPrioritySpeaker: boolean;
|
||||||
|
isRecording: boolean;
|
||||||
|
isTalker: boolean;
|
||||||
|
lastConnected: number;
|
||||||
|
metaData: string;
|
||||||
|
monthBytesDownloaded: number;
|
||||||
|
monthBytesUploaded: number;
|
||||||
|
myteamspeakAvatar: string;
|
||||||
|
myteamspeakId: string;
|
||||||
|
neededServerQueryViewPower: number;
|
||||||
|
nickname: string;
|
||||||
|
nicknamePhonetic: string;
|
||||||
|
outputHardware: boolean;
|
||||||
|
outputMuted: boolean;
|
||||||
|
outputOnlyMuted: boolean;
|
||||||
|
permissionHints: number;
|
||||||
|
platform: string;
|
||||||
|
serverGroups: string;
|
||||||
|
serverPassword: string;
|
||||||
|
signedBadges: string;
|
||||||
|
talkPower: number;
|
||||||
|
talkRequest: number;
|
||||||
|
talkRequestMsg: string;
|
||||||
|
totalBytesDownloaded: number;
|
||||||
|
totalBytesUploaded: number;
|
||||||
|
totalConnections: number;
|
||||||
|
type: number;
|
||||||
|
uniqueIdentifier: string;
|
||||||
|
unreadMessages: number;
|
||||||
|
userTag: string;
|
||||||
|
version: string;
|
||||||
|
volumeModificator: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IServerProperties {
|
||||||
|
antiFloodPointsNeededCommandBlock: number;
|
||||||
|
antiFloodPointsNeededIpBlock: number;
|
||||||
|
antiFloodPointsNeededPluginBlock: number;
|
||||||
|
antiFloodPointsTickReduce: number;
|
||||||
|
askForPrivilegeKeyAfterNickname: boolean;
|
||||||
|
askForPrivilegeKeyForChannelCreation: boolean;
|
||||||
|
askForPrivilegeKeyForModify: boolean;
|
||||||
|
awayMessage: string;
|
||||||
|
badges: string;
|
||||||
|
channelGroupId: string;
|
||||||
|
channelGroupInheritedChannelId: string;
|
||||||
|
clientType: number;
|
||||||
|
connectionBandwidthReceived: number;
|
||||||
|
connectionBandwidthSent: number;
|
||||||
|
connectionClientIp: string;
|
||||||
|
connectionConnectedTime: number;
|
||||||
|
connectionFiletransferBandwidthReceived: number;
|
||||||
|
connectionFiletransferBandwidthSent: number;
|
||||||
|
connectionPacketloss: number;
|
||||||
|
connectionPing: number;
|
||||||
|
connectionPacketsReceived: number;
|
||||||
|
connectionPacketsSent: number;
|
||||||
|
connectionPort: number;
|
||||||
|
connectionQueryBandwidthReceived: number;
|
||||||
|
connectionQueryBandwidthSent: number;
|
||||||
|
connectionServerIp: string;
|
||||||
|
connectionServerPort: number;
|
||||||
|
connectionThrottleBandwidthReceived: number;
|
||||||
|
connectionThrottleBandwidthSent: number;
|
||||||
|
country: string;
|
||||||
|
created: number;
|
||||||
|
defaultChannel: string;
|
||||||
|
defaultChannelPassword: string;
|
||||||
|
defaultServerGroup: string;
|
||||||
|
defaultToken: string;
|
||||||
|
flagAvatar: string;
|
||||||
|
iconId: number;
|
||||||
|
inputHardware: boolean;
|
||||||
|
inputMuted: boolean;
|
||||||
|
isChannelCommander: boolean;
|
||||||
|
isMuted: boolean;
|
||||||
|
isPrioritySpeaker: boolean;
|
||||||
|
isRecording: boolean;
|
||||||
|
isTalker: boolean;
|
||||||
|
isTts: boolean;
|
||||||
|
metaData: string;
|
||||||
|
monthBytesDownloaded: number;
|
||||||
|
monthBytesUploaded: number;
|
||||||
|
myteamspeakAvatar: string;
|
||||||
|
myteamspeakId: string;
|
||||||
|
neededServerQueryViewPower: number;
|
||||||
|
nickname: string;
|
||||||
|
nicknamePhonetic: string;
|
||||||
|
outputHardware: boolean;
|
||||||
|
outputMuted: boolean;
|
||||||
|
outputOnlyMuted: boolean;
|
||||||
|
permissionHints: number;
|
||||||
|
platform: string;
|
||||||
|
serverPassword: string;
|
||||||
|
signedBadges: string;
|
||||||
|
talkPower: number;
|
||||||
|
talkRequest: number;
|
||||||
|
talkRequestMsg: string;
|
||||||
|
totalBytesDownloaded: number;
|
||||||
|
totalBytesUploaded: number;
|
||||||
|
totalConnections: number;
|
||||||
|
type: number;
|
||||||
|
uniqueIdentifier: string;
|
||||||
|
unreadMessages: number;
|
||||||
|
userTag: string;
|
||||||
|
version: string;
|
||||||
|
volumeModificator: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export interface IClientPropertiesUpdatedMessage {
|
||||||
|
type: "clientPropertiesUpdated";
|
||||||
|
payload: {
|
||||||
|
clientId: number;
|
||||||
|
connectionId: number;
|
||||||
|
properties: IClientProperties;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IClientMovedMessage {
|
||||||
|
type: "clientMoved";
|
||||||
|
payload: {
|
||||||
|
properties: IClientProperties;
|
||||||
|
clientId: number;
|
||||||
|
connectionId: number;
|
||||||
|
newChannelId: number;
|
||||||
|
oldChannelId: number;
|
||||||
|
type: number;
|
||||||
|
visibility: number;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ITalkStatusChangedMessage {
|
||||||
|
type: "talkStatusChanged";
|
||||||
|
payload: {
|
||||||
|
clientId: number;
|
||||||
|
connectionId: number;
|
||||||
|
isWhisper: boolean;
|
||||||
|
status: number;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IClientSelfPropertyUpdatedMessage {
|
||||||
|
type: "clientSelfPropertyUpdated";
|
||||||
|
payload: {
|
||||||
|
connectionId: number;
|
||||||
|
flag: string;
|
||||||
|
newValue: boolean;
|
||||||
|
oldValue: boolean;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IAuthMessage {
|
||||||
|
type: "auth";
|
||||||
|
payload: {
|
||||||
|
apiKey: string;
|
||||||
|
connections: IConnection[];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IServerPropertiesUpdatedMessage {
|
||||||
|
type: "serverPropertiesUpdated";
|
||||||
|
payload: {
|
||||||
|
connectionId: number;
|
||||||
|
properties: IServerProperties;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IConnectStatusChangedMessage {
|
||||||
|
type: "connectStatusChanged";
|
||||||
|
payload: {
|
||||||
|
connectionId: number;
|
||||||
|
error: number;
|
||||||
|
info: {
|
||||||
|
clientId: number;
|
||||||
|
}
|
||||||
|
status: number;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IChannelsMessage {
|
||||||
|
type: "channels";
|
||||||
|
payload: {
|
||||||
|
connectionId: number;
|
||||||
|
info: IChannelInfos
|
||||||
|
}
|
||||||
|
}
|
||||||
10
src/main.tsx
Normal file
10
src/main.tsx
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import React from "react";
|
||||||
|
import ReactDOM from "react-dom/client";
|
||||||
|
import App from "./App.tsx";
|
||||||
|
import "@styles/index.scss";
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
0
src/styles/App.scss
Normal file
0
src/styles/App.scss
Normal file
39
src/styles/Viewer.scss
Normal file
39
src/styles/Viewer.scss
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
.viewer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0 0;
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.client {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 0 0;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 2.8rem;
|
||||||
|
height: 2.8rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
color: white;
|
||||||
|
background-color: rgba(47, 49, 54, 0.5);
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
|
||||||
|
// ellipsis after 22 characters
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
max-width: 20ch;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
5
src/styles/index.scss
Normal file
5
src/styles/index.scss
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
* {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
533
src/teamspeak5Handler.ts
Normal file
533
src/teamspeak5Handler.ts
Normal file
@@ -0,0 +1,533 @@
|
|||||||
|
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[]>>,
|
||||||
|
setActiveConnectionId: 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, setActiveConnectionId);
|
||||||
|
}
|
||||||
|
|
||||||
|
reconnect() {
|
||||||
|
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");
|
||||||
|
}
|
||||||
|
|
||||||
|
this.reconnect();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
setActiveConnectionId: React.Dispatch<React.SetStateAction<number>>;
|
||||||
|
|
||||||
|
constructor(ws: WebSocket, dataHandler: TS5DataHandler, setActiveConnectionId: React.Dispatch<React.SetStateAction<number>>) {
|
||||||
|
this.ws = ws;
|
||||||
|
this.dataHandler = dataHandler;
|
||||||
|
this.setActiveConnectionId = setActiveConnectionId;
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
if (data.payload.flag == "inputHardware") { // sadly thats the only way to detect if a server is active or not
|
||||||
|
this.setActiveConnectionId(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
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
36
tsconfig.json
Normal file
36
tsconfig.json
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
"baseUrl": "./src",
|
||||||
|
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["/src/*"],
|
||||||
|
"@components/*": ["/src/components/*"],
|
||||||
|
"@assets/*": ["/src/assets/*"],
|
||||||
|
"@styles/*": ["/src/styles/*"],
|
||||||
|
"@utils/*": ["/src/utils/*"],
|
||||||
|
"@interfaces/*": ["/src/interfaces/*"]
|
||||||
|
},
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": false,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
10
tsconfig.node.json
Normal file
10
tsconfig.node.json
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
powershell ./update.ps1
|
|
||||||
pause
|
|
||||||
49
update.ps1
49
update.ps1
@@ -1,49 +0,0 @@
|
|||||||
Write-Output "Starting update..."
|
|
||||||
|
|
||||||
$currentVersionString = (Get-Content .\meta.json | ConvertFrom-Json).version
|
|
||||||
Write-Output "Current version: $currentVersionString"
|
|
||||||
|
|
||||||
Write-Output "Searching for newest version..."
|
|
||||||
$newestVersionString = ""
|
|
||||||
$req = Invoke-WebRequest https://github.com/DerTyp876/ts5-obs-overlay/releases/latest
|
|
||||||
|
|
||||||
foreach ($tag in $req.ParsedHtml.body.getElementsByTagName('h1')) {
|
|
||||||
if ($tag.innerText[0] -eq "v") {
|
|
||||||
$newestVersionString = $tag.innerText
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if ($newestVersionString -ne "") {
|
|
||||||
Write-Output "Newest version found: $newestVersionString"
|
|
||||||
|
|
||||||
|
|
||||||
$currentVersion = ($currentVersionString -replace "v")
|
|
||||||
$newestVersion = ($newestVersionString -replace "v")
|
|
||||||
|
|
||||||
if ([System.Version]$currentVersion -gt [System.Version]$newestVersion) {
|
|
||||||
Write-Output "Current version is up to date!"
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
Write-Output "Updating to newer version..."
|
|
||||||
|
|
||||||
Remove-Item * -Recurse -Force -Confirm
|
|
||||||
|
|
||||||
mkdir ./temp
|
|
||||||
attrib +h ./temp
|
|
||||||
Write-Output "Downloading newer version..."
|
|
||||||
Invoke-WebRequest -Uri "https://github.com/DerTyp876/ts5-obs-overlay/archive/refs/tags/$newestVersionString.zip" -OutFile "./temp/$newestVersionString.zip"
|
|
||||||
Write-Output "Extracting archive..."
|
|
||||||
Expand-Archive -Path "./temp/$newestVersionString.zip" -DestinationPath "./temp/"
|
|
||||||
Get-ChildItem -Path "./temp/ts5-obs-overlay-$($newestVersionString -replace 'v')" -Recurse | Move-Item -Destination "./"
|
|
||||||
|
|
||||||
Remove-Item "./temp" -Recurse -Force -Confirm
|
|
||||||
|
|
||||||
Write-Output "You are now up to date again!"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
Write-Output "No new version found!"
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
19
vite.config.ts
Normal file
19
vite.config.ts
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react-swc'
|
||||||
|
import { viteSingleFile } from "vite-plugin-singlefile"
|
||||||
|
|
||||||
|
// 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",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [react(), viteSingleFile({ useRecommendedBuildConfig: false })],
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user