first commit

js/app.js

@@ -0,0 +1,57 @@
+function connectToTeamSpeak() {
+	const ws = new WebSocket("ws://localhost:5899");
+	const paylaod = {
+		type: "auth",
+		payload: {
+			identifier: "de.tealfire.obs",
+			version: "0.0.1",
+			name: "TS5 OBS Overlay",
+			description: "A simple OBS overlay for TS5 by DerTyp876",
+			content: {
+				apiKey: "b02b521c-68bb-4971-a8d2-3f9f94b44d73",
+			},
+		},
+	};
+
+	ws.onopen = (event) => {
+		ws.send("Connected to TeamSpeak5");
+		ws.send(JSON.stringify(paylaod));
+	};
+
+	ws.onmessage = (event) => {
+		let data = JSON.parse(event.data);
+		//console.log(data);
+
+		switch (data.type) {
+			case "auth":
+				handleAuthMessage(data);
+				break;
+			case "clientMoved":
+				handleClientMoved(data);
+				break;
+			case "clientPropertiesUpdated":
+				handleClientPropertiesUpdate(data);
+				break;
+			case "talkStatusChanged":
+				handleTalkStatusChanged(data);
+				break;
+			default:
+				console.log(`No handler for event type: ${data.type}`);
+				break;
+		}
+		drawClients();
+		console.log(clients);
+		//console.log(channels);
+	};
+
+	ws.onerror = (err) => {
+		console.error(err);
+		connectToTeamSpeak();
+	};
+
+	ws.onclose = (event) => {
+		console.log("Disconnected: " + event.reason);
+		connectToTeamSpeak();
+	};
+}
+connectToTeamSpeak();

js/display_content.js

@@ -0,0 +1,20 @@
+function drawClients() {
+	let elem = document.getElementById("content");
+
+	result = "";
+	getClientsInChannel(thisClient.channel).forEach((c) => {
+		result += '<div> <div class="content-img">';
+		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" />';
+		}
+		result += "</div>";
+		result += '<div class="content-text">' + c.name + "</div></div>";
+	});
+	elem.innerHTML = result;
+}

js/event_handlers.js

@@ -0,0 +1,94 @@
+function handleAuthMessage(data) {
+	console.log("Handling auth message");
+	channels = parseChannelInfos(data.payload.connections[0].channelInfos);
+	clients = parseClientInfos(data.payload.connections[0].clientInfos);
+	thisClient = clients.filter((obj) => {
+		return obj.id === data.payload.connections[0].clientId;
+	})[0];
+}
+
+function handleClientMoved(data) {
+	const client = clients.filter((obj) => {
+		return obj.id === data.payload.clientId;
+	})[0];
+
+	if (data.payload.newChannelId == 0) {
+		// User disconnected
+		if (client) {
+			console.log(`${client.name} disconnected`);
+			clients.splice(clients.indexOf(client), 1);
+		}
+		if (data.payload.clientId == thisClient.id) {
+			console.log("You disconnected");
+			clients = [];
+			//! Maybe handle channel list here too
+		}
+	} else {
+		// User moved channel
+		if (client) {
+			// Client already exists in list
+			clients.filter((obj) => {
+				return obj.id === data.payload.clientId;
+			})[0].channel = channels.filter((obj) => {
+				return obj.id === data.payload.newChannelId;
+			})[0];
+		} else {
+			// New Client has to be created
+			clients.push(
+				new Client(
+					data.payload.clientId,
+					channels.filter((obj) => {
+						return obj.id === data.payload.newChannelId;
+					})[0],
+					data.payload.properties.nickname
+				)
+			);
+		}
+	}
+}
+
+function handleClientPropertiesUpdate(data) {
+	let client = clients.filter((obj) => {
+		return obj.id === data.payload.clientId;
+	})[0];
+	if (data.payload.properties.channelGroupInheritedChannelId == 0) {
+		if (client) {
+			clients.splice(clients.indexOf(client), 1);
+		}
+	} else {
+		if (client) {
+			client.channel = channels.filter((obj) => {
+				return (
+					obj.id === data.payload.properties.channelGroupInheritedChannelId
+				);
+			})[0];
+
+			client.name = data.payload.properties.nickname;
+			client.inputMuted = data.payload.properties.inputMuted;
+			client.outputMuted = data.payload.properties.outputMuted;
+		} else {
+			clients.push(
+				new Client(
+					data.payload.clientId,
+					channels.filter((obj) => {
+						return (
+							obj.id === data.payload.properties.channelGroupInheritedChannelId
+						);
+					})[0],
+					data.payload.properties.nickname,
+					data.payload.properies.inputMuted,
+					data.payload.properies.outputMuted
+				)
+			);
+		}
+	}
+}
+
+function handleTalkStatusChanged(data) {
+	let client = clients.filter((obj) => {
+		return obj.id === data.payload.clientId;
+	})[0];
+	if (client) {
+		client.talkStatus = data.payload.status;
+	}
+}

js/objects.js

@@ -0,0 +1,25 @@
+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}`);
+	}
+}

js/parser.js

@@ -0,0 +1,34 @@
+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 (rc.id in subChannels) {
+			subChannels[rc.id].forEach((sc) => {
+				result.push(new Channel(sc.id, sc.properties.name));
+			});
+		}
+	});
+	return result;
+}
+
+function parseClientInfos(clientInfos) {
+	let result = [];
+	clientInfos.forEach((e) => {
+		result.push(
+			new Client(
+				e.id,
+				channels.filter((obj) => {
+					return obj.id === e.channelId;
+				})[0],
+				e.properties.nickname,
+				e.properties.inputMuted,
+				e.properties.outputMuted
+			)
+		);
+	});
+	return result;
+}

js/utils.js

@@ -0,0 +1,11 @@
+function getClientsInChannel(channel) {
+	let result = [];
+
+	clients.forEach((e) => {
+		if (e.channel.id == channel.id) {
+			result.push(e);
+		}
+	});
+	console.log(result);
+	return result;
+}