Merge pull request #22 from DerTyp876/16-hide-non-talking-clients

16 hide non talking clients

README.md

@@ -47,9 +47,10 @@ Real example: `file://C:/Users/.../index.html?remoteAppPort=5899`
 
 This is a list of all available parameters (all parameters are optional):
 
-| Parameter       | Description                            | Default |
-| --------------- | -------------------------------------- | ------- |
-| `remoteAppPort` | The port of the Teamspeak 5 remote app | `5899`  |
+| Parameter        | Description                            | Type    | Default |
+| ---------------- | -------------------------------------- | ------- | ------- |
+| `remoteAppPort`  | The port of the Teamspeak 5 remote app | number  | `5899`  |
+| `hideNonTalking` | Hide all non-talking clients           | boolean | `false` |
 
 ## Setup (Developer)
 

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 ? (