first commit

config.json

@@ -0,0 +1 @@
+{}

css/style.css

@@ -0,0 +1,25 @@
+* {
+	font-family: Arial, Helvetica, sans-serif;
+	font-weight: bold;
+	color: white;
+	font-size: 70pt;
+	padding: 0;
+	margin: 0;
+	-webkit-text-stroke: 3px black;
+	background-color: black;
+}
+#content div {
+	margin-top: 5px;
+}
+.content-img {
+	float: left;
+	width: 100px;
+}
+
+.content-img img {
+	display: block;
+}
+
+.content-text {
+	margin-left: 130px;
+}

img/muted_input.svg

@@ -0,0 +1 @@
+<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>

img/muted_output.svg

@@ -0,0 +1 @@
+<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>

img/off.svg

@@ -0,0 +1 @@
+<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>

img/on.svg

@@ -0,0 +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>

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;
+}

overlay.html

@@ -0,0 +1,26 @@
+<!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>
+			let clients = [];
+			let channels = [];
+			let thisClient;
+		</script>
+		<div id="content"></div>
+
+		<!--Scripts-->
+		<script src="js/utils.js"></script>
+		<script src="js/objects.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>