Add options to hide self and non-talking clients

config.js

@@ -7,4 +7,6 @@ const CONFIG = {
     fontStrokeSize: "3px",
     fontStrokeColor: "#000000",
   },
+  hideSelf: false,
+  hideSilent: false,
 };

js/app.js

@@ -15,6 +15,7 @@ function main() {
 
   clientList.clear();
   channelList.clear();
+  selfClient = null;
 
   ws.onopen = (event) => {
     // Send payload to TS5 client

js/display_content.js

@@ -4,7 +4,8 @@ function drawClients() {
   result = "";
   if (thisClient) {
     getClientsInChannel(thisClient.channel).forEach((c) => {
-      result += `<div class="client-div" style="color:${CONFIG.style.fontColor}; font-size:${CONFIG.style.fontSize}">`;
+      isHidden = CONFIG.hideSilent && c.talkStatus == 0;
+      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

@@ -6,6 +6,8 @@ function handleAuthMessage(data) {
     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);
 }
 
 function handleClientMoved(data) {

js/utils.js

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