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

16 hide non talking clients

README.md

@@ -14,7 +14,7 @@ This App uses the new "Remote Apps" feature of Teamspeak 5.
 
 1. Download the `index.html` of the latest release from [here](https://github.com/DerTyp876/ts5-obs-overlay/releases/tag/v1.0.0)
    ![image](https://github.com/DerTyp876/ts5-obs-overlay/assets/76851529/04dc3a66-c493-429b-b4ae-44bade473ad6)  
-  1.1. (optional) You can rename the file. Just remember using the new file name in the future instead of `index.html` 
+   1.1. (optional) You can rename the file. Just remember using the new file name in the future instead of `index.html`
 2. Go into the Teamspeak 5 Settings and enable "Remote Apps"  
    ![image](https://github.com/DerTyp876/ts5-obs-overlay/assets/76851529/b31bc553-fde2-46ab-b07c-d3c81339cc7d)
 
@@ -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 ? (