diff --git a/js/app.js b/js/app.js index 2fc7cc5..b9d4ca3 100644 --- a/js/app.js +++ b/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(); diff --git a/js/event_handlers.js b/js/event_handlers.js index de4a011..bd84bca 100644 --- a/js/event_handlers.js +++ b/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; } diff --git a/js/objects.js b/js/objects.js index 3b861fd..cd8f657 100644 --- a/js/objects.js +++ b/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 = []; + } +} diff --git a/js/parser.js b/js/parser.js index 8f5456e..77e69f6 100644 --- a/js/parser.js +++ b/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 diff --git a/js/utils.js b/js/utils.js index 0bfb7de..361e6aa 100644 --- a/js/utils.js +++ b/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; } diff --git a/overlay.html b/overlay.html index f6244c5..ba28044 100644 --- a/overlay.html +++ b/overlay.html @@ -8,16 +8,16 @@ TS5 - OBS Overlay +
-