diff --git a/README.md b/README.md index 50217b9..153d9bb 100644 --- a/README.md +++ b/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) diff --git a/src/App.tsx b/src/App.tsx index 29e4343..0186e1f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -56,6 +56,7 @@ export default function App() { return (
- {showChannelName ?

{channel?.properties.name}

: null} + {showChannelName ? ( +
+

{channel?.properties.name}

+
+ ) : null} {clients?.map((client, i) => { //* Client limit if (clientLimit != 0 && i >= clientLimit) { diff --git a/src/styles/Viewer.scss b/src/styles/Viewer.scss index dc4ad81..951bf25 100644 --- a/src/styles/Viewer.scss +++ b/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 {