[feature] add List object

js/app.js

@@ -14,13 +14,12 @@ function connectToTeamSpeak() {
 	};
 
 	ws.onopen = (event) => {
-		ws.send("Connected to TeamSpeak5");
+		// Send payload to TS5 client
 		ws.send(JSON.stringify(paylaod));
 	};
 
 	ws.onmessage = (event) => {
 		let data = JSON.parse(event.data);
-		//console.log(data);
 
 		switch (data.type) {
 			case "auth":
@@ -39,19 +38,19 @@ function connectToTeamSpeak() {
 				console.log(`No handler for event type: ${data.type}`);
 				break;
 		}
+
+		// Draw clientList in HTML object
 		drawClients();
-		console.log(clients);
-		//console.log(channels);
 	};
 
 	ws.onerror = (err) => {
 		console.error(err);
-		connectToTeamSpeak();
+		connectToTeamSpeak(); // Reconnected
 	};
 
 	ws.onclose = (event) => {
 		console.log("Disconnected: " + event.reason);
-		connectToTeamSpeak();
+		connectToTeamSpeak(); // Reconnected
 	};
 }
 connectToTeamSpeak();

js/event_handlers.js

@@ -1,45 +1,39 @@
 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];
+	channelList.items = parseChannelInfos(
+		data.payload.connections[0].channelInfos
+	);
+	clientList.items = parseClientInfos(data.payload.connections[0].clientInfos);
+	thisClient = clientList.getById(data.payload.connections[0].clientId);
 }
 
 function handleClientMoved(data) {
-	const client = clients.filter((obj) => {
-		return obj.id === data.payload.clientId;
-	})[0];
+	const client = clientList.getById(data.payload.clientId);
 
 	if (data.payload.newChannelId == 0) {
 		// User disconnected
 		if (client) {
 			console.log(`${client.name} disconnected`);
-			clients.splice(clients.indexOf(client), 1);
+			clientList.remove(client);
 		}
 		if (data.payload.clientId == thisClient.id) {
 			console.log("You disconnected");
-			clients = [];
+			clientList.clear();
 			//! 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];
+			clientList.getById(data.payload.clientId).channel = channelList.getById(
+				data.payload.newChannelId
+			);
 		} else {
 			// New Client has to be created
-			clients.push(
+			clientList.add(
 				new Client(
 					data.payload.clientId,
-					channels.filter((obj) => {
-						return obj.id === data.payload.newChannelId;
-					})[0],
+					channelList.getById(data.payload.newChannelId),
 					data.payload.properties.nickname
 				)
 			);
@@ -48,33 +42,27 @@ function handleClientMoved(data) {
 }
 
 function handleClientPropertiesUpdate(data) {
-	let client = clients.filter((obj) => {
-		return obj.id === data.payload.clientId;
-	})[0];
+	let client = clientList.getById(data.payload.clientId);
 	if (data.payload.properties.channelGroupInheritedChannelId == 0) {
 		if (client) {
-			clients.splice(clients.indexOf(client), 1);
+			clientList.remove(client);
 		}
 	} else {
 		if (client) {
-			client.channel = channels.filter((obj) => {
-				return (
-					obj.id === data.payload.properties.channelGroupInheritedChannelId
-				);
-			})[0];
+			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 {
-			clients.push(
+			clientList.add(
 				new Client(
 					data.payload.clientId,
-					channels.filter((obj) => {
-						return (
-							obj.id === data.payload.properties.channelGroupInheritedChannelId
-						);
-					})[0],
+					channelList.getById(
+						data.payload.properties.channelGroupInheritedChannelId
+					),
 					data.payload.properties.nickname,
 					data.payload.properies.inputMuted,
 					data.payload.properies.outputMuted
@@ -85,9 +73,7 @@ function handleClientPropertiesUpdate(data) {
 }
 
 function handleTalkStatusChanged(data) {
-	let client = clients.filter((obj) => {
-		return obj.id === data.payload.clientId;
-	})[0];
+	let client = clientList.getById(data.payload.clientId);
 	if (client) {
 		client.talkStatus = data.payload.status;
 	}

js/objects.js

@@ -23,3 +23,31 @@ class Client {
 		console.log(`Client created: ${this.id} - ${this.name}`);
 	}
 }
+
+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 = [];
+	}
+}

js/parser.js

@@ -21,9 +21,7 @@ function parseClientInfos(clientInfos) {
 		result.push(
 			new Client(
 				e.id,
-				channels.filter((obj) => {
-					return obj.id === e.channelId;
-				})[0],
+				channelList.getById(e.channelId),
 				e.properties.nickname,
 				e.properties.inputMuted,
 				e.properties.outputMuted

js/utils.js

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

overlay.html

@@ -8,16 +8,16 @@
 		<title>TS5 - OBS Overlay</title>
 	</head>
 	<body>
+		<script src="js/objects.js"></script>
 		<script>
-			let clients = [];
-			let channels = [];
+			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/objects.js"></script>
 		<script src="js/display_content.js"></script>
 		<script src="js/parser.js"></script>
 		<script src="js/event_handlers.js"></script>