Add option to align right (#124 )

Merge branch 'main' into dev
Update header title in Generator component to reflect TeamSpeak branding
2026-07-31 16:49:04 +02:00 · 2025-01-24 14:39:17 +01:00 · 2025-01-24 13:41:41 +01:00 · 2025-01-24 13:39:35 +01:00 · 2025-01-24 13:39:06 +01:00 · 2025-01-24 13:37:20 +01:00
10 changed files with 1831 additions and 1164 deletions
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,7 +1,7 @@
 {
  "tabWidth": 2,
  "useTabs": false,
-  "printWidth": 180,
+  "printWidth": 120,
  "singleQuote": false,
  "semi": true
 }
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
 This is an overlay for OBS to show the current talking clients in your TeamSpeak5 Channel.  
 This App uses the new "Remote Apps" feature of TeamSpeak5.
-This overlay uses the [TeamSpeak5 Remote App API](https://github.com/DerTyp7/react-ts5-remote-app-api).
+This overlay uses the [TeamSpeak Remote App API](https://github.com/DerTyp7/react-teamspeak-remote-app-api).
 ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/d0ab06f2-1a36-479d-826f-bd4bd3d405b7)
--- a/index.html
+++ b/index.html
@@ -3,10 +3,13 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="An OBS overlay for TeamSpeak5, so your audience can see who is talking. https://github.com/DerTyp7/ts5-obs-overlay" />
+    <meta
      name="description"
      content="An OBS overlay for TeamSpeak5/6, so your audience can see who is talking. https://github.com/DerTyp7/teamspeak-obs-overlay"
    />
    <meta name="author" content="DerTyp7" />
    <link rel="icon" href="/logo.svg" type="image/x-icon" />
-    <title>TS5-OBS-Overlay</title>
+    <title>TeamSpeak-OBS-Overlay</title>
  </head>
  <body>
    <div id="root"></div>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,17 +1,20 @@
 {
-  "name": "ts5-obs-overlay",
+  "name": "teamspeak-obs-overlay",
  "private": false,
-  "version": "2.1.1",
+  "version": "2.2.0",
-  "description": "Overlay for OBS to show the current talking clients in your TeamSpeak 5 Channel",
+  "description": "Overlay for OBS to show the current talking clients in your TeamSpeak Channel",
  "author": "DerTyp7",
-  "homepage": "https://dertyp7.github.io/ts5-obs-overlay/#",
+  "homepage": "https://dertyp7.github.io/teamspeak-obs-overlay/#",
  "repository": {
    "type": "git",
-    "url": "https://github.com/DerTyp7/ts5-obs-overlay"
+    "url": "https://github.com/DerTyp7/teamspeak-obs-overlay"
  },
  "keywords": [
    "ts5",
    "ts6",
    "teamspeak6",
    "teamspeak",
    "teamspeak5",
    "overlay",
    "remote app",
    "obs",
@@ -20,7 +23,7 @@
    "vite"
  ],
  "bugs": {
-    "url": "https://github.com/DerTyp7/ts5-obs-overlay/issues"
+    "url": "https://github.com/DerTyp7/teamspeak-obs-overlay/issues"
  },
  "type": "module",
  "scripts": {
@@ -30,24 +33,24 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@types/node": "^20.8.3",
+    "@types/node": "^22.10.10",
-    "react": "^18.2.0",
+    "react": "^19.0.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.0.0",
-    "react-router-dom": "^6.21.3",
+    "react-router-dom": "^7.1.3",
-    "react-ts5-remote-app-api": "^1.1.1",
+    "react-teamspeak-remote-app-api": "^2.0.0",
-    "sass": "^1.68.0"
+    "sass": "^1.83.4"
  },
  "devDependencies": {
-    "@types/jest": "^29.5.2",
+    "@types/jest": "^29.5.14",
-    "@types/react": "^18.2.35",
+    "@types/react": "^19.0.8",
-    "@types/react-dom": "^18.2.18",
+    "@types/react-dom": "^19.0.3",
-    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/eslint-plugin": "^8.21.0",
-    "@typescript-eslint/parser": "^6.9.1",
+    "@typescript-eslint/parser": "^8.21.0",
-    "@vitejs/plugin-react-swc": "^3.6.0",
+    "@vitejs/plugin-react-swc": "^3.7.2",
-    "eslint": "^8.56.0",
+    "eslint": "^9.18.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
+    "eslint-plugin-react-refresh": "^0.4.18",
-    "typescript": "^5.2.2",
+    "typescript": "^5.7.3",
-    "vite": "^4.5.2"
+    "vite": "^6.0.11"
  }
 }
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,6 @@
 import "@styles/App.scss";
-import { Navigate, Route, Routes, useSearchParams } from "react-router-dom";
+import { Route, Routes, useSearchParams } from "react-router-dom";
 import Viewer from "./Viewer";
 import Generator from "./Generator";
@@ -17,6 +17,7 @@ export default function App() {
            showChannelName={searchParams.get("showChannelName") === "true"}
            hideNonTalking={searchParams.get("hideNonTalking") === "true"}
            clientLimit={searchParams.get("clientLimit") ? parseInt(searchParams.get("clientLimit") ?? "0") : 0}
            alignRight={searchParams.get("alignRight") === "true"}
          />
        }
      />
--- a/src/Generator.tsx
+++ b/src/Generator.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useRef, useState, useEffect } from "react";
+import { ChangeEvent, useRef, useState, useEffect } from "react";
 import "@styles/Generator.scss";
 import Viewer from "./Viewer";
@@ -9,13 +9,14 @@ export default function Generator() {
  const [remoteAppPort, setRemoteAppPort] = useState(5899);
  const [showChannelName, setShowChannelName] = useState(true);
  const [alignRight, setAlignRight] = useState(false);
  const [hideNonTalking, setHideNonTalking] = useState(false);
  const [clientLimit, setClientLimit] = useState(0);
  // Effect to generate URL when dependencies change
  useEffect(() => {
    generateUrl();
-  }, [remoteAppPort, showChannelName, hideNonTalking, clientLimit]);
+  }, [remoteAppPort, showChannelName, hideNonTalking, clientLimit, alignRight]);
  // Function to generate the output URL
  function generateUrl() {
@@ -26,6 +27,7 @@ export default function Generator() {
    url.searchParams.set("showChannelName", showChannelName.toString());
    url.searchParams.set("hideNonTalking", hideNonTalking.toString());
    url.searchParams.set("clientLimit", clientLimit.toString());
    url.searchParams.set("alignRight", alignRight.toString());
    // url.hash function always sets the hash to the end of the URL, so we have to replace the question mark with a hash
    // gh-pages needs the hash to be between the base URL and the search params
@@ -53,7 +55,7 @@ export default function Generator() {
    <div className="generator">
      {/* Header */}
      <div className="headline">
-        <h1>TS5-OBS-Overlay Generator</h1>
+        <h1>TeamSpeak-OBS-Overlay Generator</h1>
        <h4>by DerTyp7</h4>
      </div>
@@ -62,7 +64,9 @@ export default function Generator() {
        <p>1. Customize your settings</p>
        <p>2. Copy the generated URL</p>
        <p>3. Paste the URL into the BrowserSource URL field in OBS</p>
-        <a href="https://github.com/DerTyp7/ts5-obs-overlay#detailed-instructions">Click here for detailed instructions</a>
+        <a href="https://github.com/DerTyp7/ts5-obs-overlay#detailed-instructions">
          Click here for detailed instructions
        </a>
      </div>
      {/* Output Section */}
@@ -98,18 +102,34 @@ export default function Generator() {
                <input type="checkbox" checked={hideNonTalking} />
                <label>Hide non talking clients</label>
              </div>
              {/* Alignment Option */}
              <div className="option" onClick={() => setAlignRight(!alignRight)}>
                <input type="checkbox" checked={alignRight} />
                <label>Align Right</label>
              </div>
            </section>
            <section>
              {/* Client Limit Option */}
              <div className="option">
-                <input type="number" value={clientLimit} min={0} onChange={(e: ChangeEvent<HTMLInputElement>) => setClientLimit(parseInt(e.target.value))} />
+                <input
                  type="number"
                  value={clientLimit}
                  min={0}
                  onChange={(e: ChangeEvent<HTMLInputElement>) => setClientLimit(parseInt(e.target.value))}
                />
                <label>Client Limit</label>
              </div>
              {/* RemoteApp-Port Option */}
              <div className="option">
-                <input type="number" value={remoteAppPort} min={0} onChange={(e: ChangeEvent<HTMLInputElement>) => setRemoteAppPort(parseInt(e.target.value))} />
+                <input
                  type="number"
                  value={remoteAppPort}
                  min={0}
                  onChange={(e: ChangeEvent<HTMLInputElement>) => setRemoteAppPort(parseInt(e.target.value))}
                />
                <label>RemoteApp-Port</label>
              </div>
            </section>
@@ -118,7 +138,13 @@ export default function Generator() {
        {/* Preview */}
        <div className="preview">
-          <Viewer remoteAppPort={remoteAppPort} showChannelName={showChannelName} hideNonTalking={hideNonTalking} clientLimit={clientLimit} />
+          <Viewer
            remoteAppPort={remoteAppPort}
            showChannelName={showChannelName}
            hideNonTalking={hideNonTalking}
            clientLimit={clientLimit}
            alignRight={alignRight}
          />
        </div>
      </div>
    </div>
--- a/src/Viewer.tsx
+++ b/src/Viewer.tsx
@@ -1,24 +1,26 @@
 import "@styles/Viewer.scss";
-import useTSRemoteApp, { IClient } from "react-ts5-remote-app-api";
+import useTSRemoteApp, { IClient } from "react-teamspeak-remote-app-api";
 export default function Viewer({
  remoteAppPort = 5899,
  showChannelName = false,
  hideNonTalking = false,
  clientLimit = 0,
  alignRight = false,
 }: {
  remoteAppPort?: number;
  showChannelName?: boolean;
  hideNonTalking?: boolean;
  clientLimit?: number;
  alignRight?: boolean;
 }) {
  const { clients, activeConnectionId, currentChannel } = useTSRemoteApp({
    remoteAppPort: remoteAppPort,
    auth: {
      identifier: "de.tealfire.obs",
-      version: "2.1.1",
+      version: "2.2.0",
-      name: "TS5 OBS Overlay",
+      name: "TeamSpeak OBS Overlay",
-      description: "A OBS overlay for TS5 by DerTyp7",
+      description: "A OBS overlay for TeamSpeak by DerTyp7",
    },
    logging: true,
  });
@@ -30,7 +32,7 @@ export default function Viewer({
  }) as IClient[];
  return (
-    <div className="viewer">
+    <div className={`viewer ${alignRight ? "viewer--align-right" : ""}`}>
      {showChannelName && currentChannel ? (
        <div className="channelNameContainer">
          <h1>{currentChannel?.properties.name}</h1>
@@ -44,13 +46,19 @@ export default function Viewer({
        if (client) {
          //* Non-talking client
-          if (hideNonTalking && (client.properties.inputMuted || client.properties.outputMuted || client.talkStatus == 0)) {
+          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}`}>
+            <div
              className={`client ${alignRight ? "client--align-right" : ""}`}
              key={`${client.id}-${client.channel?.connection.id}`}
            >
              {client.properties.outputHardware == false ? (
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
                  <title>muted_hardware_output</title>
@@ -85,7 +93,16 @@ export default function Viewer({
                      d="M88.62,54.15V64A24.69,24.69,0,0,1,64,88.62a25.26,25.26,0,0,1-8.38-1.46l-7.39,7.39A34,34,0,0,0,64,98.46,34.5,34.5,0,0,0,98.46,64V54.15a4.92,4.92,0,1,1,9.85,0V64a44.31,44.31,0,0,1-39.38,44v10.15H88.62a4.92,4.92,0,0,1,0,9.85H39.38a4.92,4.92,0,1,1,0-9.85H59.08V108A43.3,43.3,0,0,1,41,101.77L21.46,121.31a2.46,2.46,0,0,1-3.54,0L11.62,115a2.46,2.46,0,0,1,0-3.54l94.92-94.92a2.46,2.46,0,0,1,3.54,0l6.31,6.31a2.46,2.46,0,0,1,0,3.54ZM22.92,80.46A43.3,43.3,0,0,1,19.69,64V54.15a4.92,4.92,0,1,1,9.85,0V64a35.94,35.94,0,0,0,1.15,8.69ZM39.38,64V24.62a24.62,24.62,0,0,1,47.77-8.38Z"
                      fill="#d8d8d8"
                    />
-                    <rect x="-5.93" y="61.89" width="139.87" height="14.02" rx="2.87" ry="2.87" transform="translate(-29.97 65.43) rotate(-45)" fill="#c9070a" />
+                    <rect
                      x="-5.93"
                      y="61.89"
                      width="139.87"
                      height="14.02"
                      rx="2.87"
                      ry="2.87"
                      transform="translate(-29.97 65.43) rotate(-45)"
                      fill="#c9070a"
                    />
                  </g>
                </svg>
              ) : client.properties.outputMuted ? (
@@ -151,11 +168,11 @@ export default function Viewer({
          <h4>Overlay couldn't connect to the client:</h4>
          <br />
          <br />
-          <h5>1. Make sure to accept the overlay in your TS5-Client via the notifications</h5>
+          <h5>1. Make sure to accept the overlay in your TeamSpeak-Client via the notifications</h5>
          <br />
-          <h5>2. Enable remote apps inside the the TS5-Settings</h5>
+          <h5>2. Enable remote apps inside the the TeamSpeak-Settings</h5>
          <br />
-          <h5>3. Make sure to match the configuration port with the port in the TS5 remote app settings</h5>
+          <h5>3. Make sure to match the configuration port with the port in the TeamSpeak remote app settings</h5>
          <br />
          <h5>4. Refresh this page/BrowserSource (Select BrowserSource & click "Refresh" in OBS)</h5>
          <br />
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,4 +1,3 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "@styles/index.scss";
--- a/src/styles/Viewer.scss
+++ b/src/styles/Viewer.scss
@@ -7,6 +7,10 @@
  flex-direction: column;
  padding: 0.5rem;
  &--align-right {
    align-items: flex-end;
  }
  h1 {
    font-size: 5vw;
  }
@@ -32,9 +36,12 @@
  .client {
    display: flex;
    flex-direction: row;
-    gap: 0 0;
+    gap: 0.5rem 0.5rem;
    align-items: center;
-    margin: 0.5rem 0;
+
    &--align-right {
      flex-direction: row-reverse;
    }
    // icon styles
    svg {
Author	SHA1	Message	Date
Janis	9c94a351ee	Add option to align right (#124 )	2025-01-24 14:39:17 +01:00
Janis	9de39752f3	Merge branch 'main' into dev	2025-01-24 13:41:41 +01:00
DerTyp7	2499582f66	Update header title in Generator component to reflect TeamSpeak branding	2025-01-24 13:39:35 +01:00
DerTyp7	ad26dd62ad	Update Viewer component to reflect TeamSpeak branding in names and descriptions	2025-01-24 13:39:06 +01:00
DerTyp7	0a026baa9b	Rename project to teamspeak-obs-overlay and update related references	2025-01-24 13:37:20 +01:00
DerTyp7	a2b8f3620a	Update package-lock.json to version 2.2.0 and replace react-ts5-remote-app-api with react-teamspeak-remote-app-api	2025-01-24 13:32:42 +01:00
DerTyp7	06b940b7c9	Fix README and package.json to update API name from TeamSpeak5 to TeamSpeak	2025-01-24 13:31:50 +01:00
DerTyp7	c75d81eb43	Update dependencies and version to 2.2.0	2025-01-24 01:53:56 +01:00
Janis	529d1acbb6	Merge pull request #113 from DerTyp7/dependabot/npm_and_yarn/dev/typescript-eslint/eslint-plugin-7.0.0 Bump @typescript-eslint/eslint-plugin from 6.20.0 to 7.0.0	2025-01-24 00:08:32 +01:00
dependabot[bot]	e7e295cad1	Bump @types/jest from 29.5.11 to 29.5.12 Bumps [@types/jest](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/jest) from 29.5.11 to 29.5.12. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/jest) --- updated-dependencies: - dependency-name: "@types/jest" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2025-01-24 00:06:12 +01:00
Janis	10e8752bca	Merge pull request #111 from DerTyp7/dependabot/npm_and_yarn/dev/types/jest-29.5.12 Bump @types/jest from 29.5.11 to 29.5.12	2025-01-24 00:02:22 +01:00
dependabot[bot]	6eb5785bfd	Bump @typescript-eslint/eslint-plugin from 6.20.0 to 7.0.0 Bumps [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin) from 6.20.0 to 7.0.0. - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v7.0.0/packages/eslint-plugin) --- updated-dependencies: - dependency-name: "@typescript-eslint/eslint-plugin" dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com>	2024-03-01 01:54:49 +00:00
dependabot[bot]	6c912c37e4	Bump @types/jest from 29.5.11 to 29.5.12 Bumps [@types/jest](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/jest) from 29.5.11 to 29.5.12. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/jest) --- updated-dependencies: - dependency-name: "@types/jest" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2024-03-01 01:54:09 +00:00