[feature] add hideNonTalking boolean

src/App.tsx

@@ -38,6 +38,7 @@ export default function App() {
   useEffect(() => {
     const remoteAppPort = searchParams.get("remoteAppPort");
 
+    console.log(searchParams.get("hideNonTalking"));
     const tsConnection: ITS5ConnectionHandler = new TS5ConnectionHandler(
       parseInt(remoteAppPort ?? "5899"),
       setConnections,
@@ -55,6 +56,7 @@ export default function App() {
   return (
     <div className="App">
       <Viewer
+        hideNonTalking={searchParams.get("hideNonTalking") === "true"}
         clients={
           clients.map((client) => {
             if (client.channel?.id === currentChannel?.id && client.channel.connection.id === activeConnectionId) {

src/Viewer.tsx

@@ -5,16 +5,27 @@ export default function Viewer({
   clients,
   channel,
   showChannelName = false,
+  hideNonTalking = false,
 }: {
   clients: IClient[] | undefined;
   channel: IChannel | undefined;
   showChannelName?: boolean;
+  hideNonTalking?: boolean;
 }) {
   return (
     <div className="viewer">
       {showChannelName ? <h3>{channel?.properties.name}</h3> : null}
       {clients?.map((client) => {
         if (client) {
+          //* Non-talking client
+          if (
+            hideNonTalking &&
+            (client.properties.inputMuted || client.properties.outputMuted || client.talkStatus == 0)
+          ) {
+            return null;
+          }
+
+          //* Normal client
           return (
             <div className="client" key={`${client.id}-${client.channel?.connection.id}`}>
               {client.properties.outputMuted ? (