saving apiKey in localstorage

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

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 += `<div class="client-div" ${
-        isHidden ? "hidden" : ""
-      } style="color:${CONFIG.style.fontColor}; font-size:${
-        CONFIG.style.fontSize
-      }">`;
+      result += `<div class="client-div" ${isHidden ? "hidden" : ""} style="color:${
+        CONFIG.style.fontColor
+      }; font-size:${CONFIG.style.fontSize}">`;
       result += '<div class="client-img-div">';
       if (c.outputMuted) {
         result += '	<img src="img/muted_output.svg" />';

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