moved determination of isHidden to client object

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