janis/teamspeak-obs-overlay
1
0
Fork 0
mirror of https://github.com/DerTyp7/teamspeak-obs-overlay.git synced 2025-10-29 12:52:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
5 show channel name
This commit is contained in:
Janis
2023-06-30 13:27:22 +02:00
committed by GitHub
parent 9758520239 14db96d10a
commit 3733f7ef79
4 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
View File

@@ -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): This is a list of all available parameters (all parameters are optional):
| Parameter | Description | Type | Default | | Parameter | Description | Type | Default |
| ---------------- | ---------------------------------------- | ------- | --------------- | | ----------------- | ---------------------------------------- | ------- | --------------- |
| `remoteAppPort` | The port of the Teamspeak 5 remote app | number | `5899` | | `remoteAppPort` | The port of the Teamspeak 5 remote app | number | `5899` |
| `hideNonTalking` | Hide all non-talking clients | boolean | `false` | | `hideNonTalking` | Hide all non-talking clients | boolean | `false` |
| `clientLimit` | Count of how many client should be shown | number | `0` (unlimited) | | `clientLimit` | Count of how many client should be shown | number | `0` (unlimited) |
| `showChannelName` | Display the channel name | boolean | `false` |
## Setup (Developer) ## Setup (Developer)

1
src/App.tsx
View File

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

6
src/Viewer.tsx
View File

@@ -16,7 +16,11 @@ export default function Viewer({
}) { }) {
return ( return (
<div className="viewer"> <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) => { {clients?.map((client, i) => {
//* Client limit //* Client limit
if (clientLimit != 0 && i >= clientLimit) { if (clientLimit != 0 && i >= clientLimit) {

17
src/styles/Viewer.scss
View File

@@ -4,10 +4,19 @@
gap: 0 0; gap: 0 0;
padding: 1rem; padding: 1rem;
h3 { .channelNameContainer {
font-size: 1.5rem; display: flex;
font-weight: 500; align-items: center;
margin: 0; 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 { .client {