moved determination of isHidden to client object

config.js

@@ -10,5 +10,5 @@ const CONFIG = {
     fontStrokeColor: "#000000",
   },
   hideSelf: false, // Hide yourself in the overlay
-  hideSilent: true, // Only show talking people
+  hideSilent: false, // Only show talking people
 };

js/display_content.js

@@ -1,14 +1,18 @@
+// Draw clients in the overlay
+// Gets called everytime an event has been received (app.js -> ws.onmessage)
 function drawClients() {
-  let elem = document.getElementById("content");
+  const overlayContent = document.getElementById("content");
 
-  result = "";
+  let result = "";
   if (selfClient) {
+    // Loop through all clients which are currently in your channel
     getClientsInChannel(selfClient.channel).forEach((c) => {
-      isHidden = CONFIG.hideSilent && (c.talkStatus == 0 || c.isMuted());
-
-      result += `<div class="client-div" ${isHidden ? "hidden" : ""} style="color:${
+      // Open client div
+      result += `<div class="client-div" ${c.isHidden() ? "hidden" : ""} style="color:${
         CONFIG.style.fontColor
       }; font-size:${CONFIG.style.fontSize}">`;
+
+      // Add image
       result += '<div class="client-img-div">';
       if (c.outputMuted) {
         result += '	<img src="img/muted_output.svg" />';
@@ -19,12 +23,16 @@ function drawClients() {
       } else {
         result += '	<img src="img/off.svg" />';
       }
+
+      // Close client div
       result += "</div>";
+
+      // Add client text (name of the client)
       result += `<div class="client-text-div"
 			 style="-webkit-text-stroke:${CONFIG.style.fontStrokeSize} ${CONFIG.style.fontStrokeColor};
 			"><p style="background:${CONFIG.style.fontBackground};">${c.name}</p></div></div>`;
     });
   }
 
-  elem.innerHTML = result;
+  overlayContent.innerHTML = result;
 }

js/objects.js

@@ -6,14 +6,7 @@ class Channel {
 }
 
 class Client {
-  constructor(
-    id,
-    channel,
-    name,
-    inputMuted = false,
-    outputMuted = false,
-    talkStatus = 0
-  ) {
+  constructor(id, channel, name, inputMuted = false, outputMuted = false, talkStatus = 0) {
     this.id = id;
     this.channel = channel;
     this.name = name;
@@ -26,6 +19,12 @@ class Client {
   isMuted() {
     return this.inputMuted == true || this.outputMuted == true;
   }
+
+  isHidden() {
+    return (
+      (CONFIG.hideSilent && (this.talkStatus == 0 || this.isMuted())) || (CONFIG.hideSelf && this.id == selfClient.id)
+    );
+  }
 }
 
 class List {

js/utils.js

@@ -3,7 +3,7 @@ function getClientsInChannel(channel) {
 
   clientList.items.forEach((e) => {
     if (e.channel) {
-      if (e.channel.id == channel.id && !(CONFIG.hideSelf && selfClient && e.id == selfClient.id)) {
+      if (e.channel.id == channel.id) {
         result.push(e);
       }
     }