Merge pull request #24 from DerTyp876/5-show-channel-name

5 show channel name

README.md

@@ -47,11 +47,12 @@ Real example: `file://C:/Users/.../index.html?remoteAppPort=5899&hideNonTalking=
 
 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`         |
-| `clientLimit`    | Count of how many client should be shown | number  | `0` (unlimited) |
+| 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) |
+| `showChannelName` | Display the channel name                 | boolean | `false`         |
 
 ## Setup (Developer)
 

src/App.tsx

@@ -56,6 +56,7 @@ export default function App() {
   return (
     <div className="App">
       <Viewer
+        showChannelName={searchParams.get("showChannelName") === "true"}
         hideNonTalking={searchParams.get("hideNonTalking") === "true"}
         clientLimit={searchParams.get("clientLimit") ? parseInt(searchParams.get("clientLimit") ?? "0") : 0}
         clients={

src/Viewer.tsx

@@ -16,7 +16,11 @@ export default function Viewer({
 }) {
   return (
     <div className="viewer">
-      {showChannelName ? <h3>{channel?.properties.name}</h3> : null}
+      {showChannelName ? (
+        <div className="channelNameContainer">
+          <h3>{channel?.properties.name}</h3>
+        </div>
+      ) : null}
       {clients?.map((client, i) => {
         //* Client limit
         if (clientLimit != 0 && i >= clientLimit) {

src/styles/Viewer.scss

@@ -4,10 +4,19 @@
   gap: 0 0;
   padding: 1rem;
 
-  h3 {
-    font-size: 1.5rem;
-    font-weight: 500;
-    margin: 0;
+  .channelNameContainer {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    h3 {
+      font-size: 1.7rem;
+      font-weight: 500;
+      margin: 0;
+      background-color: rgba(47, 49, 54, 0.5);
+      padding: 0.25rem 0.5rem;
+      border-radius: 0.25rem;
+      color: white;
+    }
   }
 
   .client {