api key now gets stored dureing session

config.js

@@ -1,5 +1,4 @@
 const CONFIG = {
-  apiKey: "",
   remoteAppPort: 5899,
   style: {
     fontBackground: "rgba(19, 20, 33, 0.5)",

js/app.js

@@ -8,7 +8,7 @@ function main() {
       name: "TS5 OBS Overlay",
       description: "A simple OBS overlay for TS5 by DerTyp876",
       content: {
-        apiKey: CONFIG.apiKey,
+        apiKey: apiKey,
       },
     },
   };
@@ -27,11 +27,7 @@ function main() {
     switch (data.type) {
       case "auth":
         handleAuthMessage(data);
-        console.log(
-          "%c --> API-KEY: %s ",
-          "color:red;font-weight:bold;",
-          ` ${data.payload.apiKey}`
-        );
+        apiKey = data.payload.apiKey;
         break;
       case "clientMoved":
         handleClientMoved(data);
@@ -54,15 +50,16 @@ function main() {
   };
 
   ws.onerror = (err) => {
-    console.error(err);
+    console.log(err);
     ws.close();
     return;
   };
 
   ws.onclose = (event) => {
-    console.log("Disconnected: " + event.reason);
+    console.log("Disconnected");
     clientList.clear();
     channelList.clear();
+    console.log(clientList);
     drawClients();
     main(); // Reconnected
   };

js/display_content.js

@@ -2,22 +2,25 @@ function drawClients() {
   let elem = document.getElementById("content");
 
   result = "";
-  getClientsInChannel(thisClient.channel).forEach((c) => {
-    result += `<div style="color:${CONFIG.style.fontColor}; font-size:${CONFIG.style.fontSize}">`;
-    result += '<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"
-		 style="-webkit-text-stroke:${CONFIG.style.fontStrokeSize} ${CONFIG.style.fontStrokeColor};
-		"><p style="background:${CONFIG.style.fontBackground};">${c.name}</p></div></div>`;
-  });
+  if (thisClient) {
+    getClientsInChannel(thisClient.channel).forEach((c) => {
+      result += `<div style="color:${CONFIG.style.fontColor}; font-size:${CONFIG.style.fontSize}">`;
+      result += '<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"
+			 style="-webkit-text-stroke:${CONFIG.style.fontStrokeSize} ${CONFIG.style.fontStrokeColor};
+			"><p style="background:${CONFIG.style.fontBackground};">${c.name}</p></div></div>`;
+    });
+  }
+
   elem.innerHTML = result;
 }

overlay.html

@@ -11,6 +11,7 @@
     <script src="config.js"></script>
     <script src="js/objects.js"></script>
     <script>
+      let apiKey = "";
       let clientList = new List();
       let channelList = new List();
       let thisClient;