From 2bb719dbea9a45069e8b8a3423a60fcdab3cffbc Mon Sep 17 00:00:00 2001 From: Janis Date: Wed, 11 Jan 2023 12:50:34 +0100 Subject: [PATCH] saving apiKey in localstorage --- js/app.js | 59 ++++++++++++++++++++++++++++--------------- js/display_content.js | 12 ++++----- js/event_handlers.js | 24 +++++------------- 3 files changed, 50 insertions(+), 45 deletions(-) diff --git a/js/app.js b/js/app.js index a94802b..7dc38ed 100644 --- a/js/app.js +++ b/js/app.js @@ -1,35 +1,42 @@ -// Main entry point to the app +// Main entry point function main() { - const ws = new WebSocket(`ws://localhost:${CONFIG.remoteAppPort}`); - const payload = { - 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: apiKey, - }, - }, - }; + 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; - ws.onopen = (event) => { - // Send payload to TS5 client - ws.send(JSON.stringify(payload)); + // 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.0.1", // TODO take version from meta.json + 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); + console.log(data); switch (data.type) { case "auth": handleAuthMessage(data); - apiKey = data.payload.apiKey; + localStorage.setItem("apiKey", data.payload.apiKey); + authenticated = true; + //console.log(apiKey); break; case "clientMoved": handleClientMoved(data); @@ -58,10 +65,22 @@ function main() { }; 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(); + + drawClients(); // Redraw overlay to remove all clients main(); // Reconnected }; } diff --git a/js/display_content.js b/js/display_content.js index c23d8f4..3306490 100644 --- a/js/display_content.js +++ b/js/display_content.js @@ -2,15 +2,13 @@ function drawClients() { let elem = document.getElementById("content"); result = ""; - if (thisClient) { - getClientsInChannel(thisClient.channel).forEach((c) => { + if (selfClient) { + getClientsInChannel(selfClient.channel).forEach((c) => { isHidden = CONFIG.hideSilent && (c.talkStatus == 0 || c.isMuted()); - result += `
`; + result += `
`; result += '
'; if (c.outputMuted) { result += ' '; diff --git a/js/event_handlers.js b/js/event_handlers.js index 57245b8..09082d5 100644 --- a/js/event_handlers.js +++ b/js/event_handlers.js @@ -1,13 +1,7 @@ function handleAuthMessage(data) { - channelList.setItems( - parseChannelInfos(data.payload.connections[0].channelInfos) - ); - clientList.setItems( - parseClientInfos(data.payload.connections[0].clientInfos) - ); - thisClient = clientList.getById(data.payload.connections[0].clientId); - - selfClient = data.payload.connections[0].clientInfos.find((client) => client.id == data.payload.connections[0].clientId); + channelList.setItems(parseChannelInfos(data.payload.connections[0].channelInfos)); + clientList.setItems(parseClientInfos(data.payload.connections[0].clientInfos)); + selfClient = clientList.getById(data.payload.connections[0].clientId); } function handleClientMoved(data) { @@ -27,9 +21,7 @@ function handleClientMoved(data) { // User moved channel if (client) { // Client already exists in list - clientList.getById(data.payload.clientId).channel = channelList.getById( - data.payload.newChannelId - ); + clientList.getById(data.payload.clientId).channel = channelList.getById(data.payload.newChannelId); } else { console.log(data.payload); // New Client has to be created @@ -52,9 +44,7 @@ function handleClientPropertiesUpdate(data) { } } else { if (client) { - client.channel = channelList.getById( - data.payload.properties.channelGroupInheritedChannelId - ); + client.channel = channelList.getById(data.payload.properties.channelGroupInheritedChannelId); client.name = data.payload.properties.nickname; client.inputMuted = data.payload.properties.inputMuted; @@ -63,9 +53,7 @@ function handleClientPropertiesUpdate(data) { clientList.add( new Client( data.payload.clientId, - channelList.getById( - data.payload.properties.channelGroupInheritedChannelId - ), + channelList.getById(data.payload.properties.channelGroupInheritedChannelId), data.payload.properties.nickname, data.payload.properies.inputMuted, data.payload.properies.outputMuted