Merge pull request #23 from DerTyp876/6-set-a-show-clients-limit

6 set a show clients limit

README.md

@@ -43,14 +43,15 @@ Start by adding a `?` to the end of the URL and then add the parameters.
 To add multiple parameters, you have to seperate them with a `&`.
 
 Like this: `file://C:/Users/.../index.html?parameter1=value1&parameter2=value2`  
-Real example: `file://C:/Users/.../index.html?remoteAppPort=5899`
+Real example: `file://C:/Users/.../index.html?remoteAppPort=5899&hideNonTalking=true&clientLimit=5`
 
 This is a list of all available parameters (all parameters are optional):
 
-| Parameter        | Description                            | Type    | Default |
-| ---------------- | -------------------------------------- | ------- | ------- |
-| `remoteAppPort`  | The port of the Teamspeak 5 remote app | number  | `5899`  |
-| `hideNonTalking` | Hide all non-talking clients           | boolean | `false` |
+| Parameter        | Description                              | Type    | Default         |
+| ---------------- | ---------------------------------------- | ------- | --------------- |
+| `remoteAppPort`  | The port of the Teamspeak 5 remote app   | number  | `5899`          |
+| `hideNonTalking` | Hide all non-talking clients             | boolean | `false`         |
+| `clientLimit`    | Count of how many client should be shown | number  | `0` (unlimited) |
 
 ## Setup (Developer)
 

src/App.tsx

@@ -57,6 +57,7 @@ export default function App() {
     <div className="App">
       <Viewer
         hideNonTalking={searchParams.get("hideNonTalking") === "true"}
+        clientLimit={searchParams.get("clientLimit") ? parseInt(searchParams.get("clientLimit") ?? "0") : 0}
         clients={
           clients.map((client) => {
             if (client.channel?.id === currentChannel?.id && client.channel.connection.id === activeConnectionId) {

src/Viewer.tsx

@@ -6,16 +6,23 @@ export default function Viewer({
   channel,
   showChannelName = false,
   hideNonTalking = false,
+  clientLimit = 0,
 }: {
   clients: IClient[] | undefined;
   channel: IChannel | undefined;
   showChannelName?: boolean;
   hideNonTalking?: boolean;
+  clientLimit?: number;
 }) {
   return (
     <div className="viewer">
       {showChannelName ? <h3>{channel?.properties.name}</h3> : null}
-      {clients?.map((client) => {
+      {clients?.map((client, i) => {
+        //* Client limit
+        if (clientLimit != 0 && i >= clientLimit) {
+          return null;
+        }
+
         if (client) {
           //* Non-talking client
           if (