From 75c9ef9ceec4689d794454a56d92a1f8fd4a247c Mon Sep 17 00:00:00 2001
From: Janis <janis.meister87@gmail.com>
Date: Thu, 27 Oct 2022 22:35:45 +0200
Subject: [PATCH] api key now gets stored dureing session

---
 config.js             |  1 -
 js/app.js             | 13 +++++--------
 js/display_content.js | 37 ++++++++++++++++++++-----------------
 overlay.html          |  1 +
 4 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/config.js b/config.js
index cdbfe9f..14dda9c 100644
--- a/config.js
+++ b/config.js
@@ -1,5 +1,4 @@
 const CONFIG = {
-  apiKey: "",
   remoteAppPort: 5899,
   style: {
     fontBackground: "rgba(19, 20, 33, 0.5)",
diff --git a/js/app.js b/js/app.js
index acf6cc0..2edcd94 100644
--- a/js/app.js
+++ b/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
   };
diff --git a/js/display_content.js b/js/display_content.js
index c42dcc3..90c79ca 100644
--- a/js/display_content.js
+++ b/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;
 }
diff --git a/overlay.html b/overlay.html
index 34ebb47..b889ab5 100644
--- a/overlay.html
+++ b/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;