Update README.md

Merge pull request #122 from DerTyp7/dev
Version 2.2.0
2026-07-31 16:49:04 +02:00 · 2025-01-24 13:52:26 +01:00 · 2025-01-24 13:43:21 +01:00
9 changed files with 33 additions and 87 deletions
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,7 +1,7 @@
 {
  "tabWidth": 2,
  "useTabs": false,
-  "printWidth": 120,
+  "printWidth": 180,
  "singleQuote": false,
  "semi": true
 }
--- a/README.md
+++ b/README.md
@@ -1,13 +1,13 @@
-# TeamSpeak5-OBS-Overlay
+# TeamSpeak-OBS-Overlay

-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 is an overlay for OBS to show the current talking clients in your TeamSpeak5/6 Channel.  
+This App uses the new "Remote Apps" feature of TeamSpeak5/6.

 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)

- [TeamSpeak5-OBS-Overlay](#teamspeak5-obs-overlay)
+- [TeamSpeak-OBS-Overlay](#teamspeak-obs-overlay)
  - [Usage](#usage)
    - [Quick instructions](#quick-instructions)
    - [Detailed instructions](#detailed-instructions)
@@ -20,16 +20,16 @@ This overlay uses the [TeamSpeak Remote App API](https://github.com/DerTyp7/reac

 ### Quick instructions

-1. Open this link in your Browser: [https://ts5-overlay.tealfire.de/#/generate](https://ts5-overlay.tealfire.de/#/generate)
+1. Open this link in your Browser: [https://teamspeak-overlay.tealfire.de/#/generate](https://teamspeak-overlay.tealfire.de/#/generate)
 2. Follow the instructions on the website
-3. Accept overlay inside TeamSpeak5  
-   ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/aa83b07d-3dea-461f-9487-f9e6a299f2f3)
+3. Accept overlay inside TeamSpeak5/6 
+   ![image](https://github.com/DerTyp7/teamspeak-overlay.tealfire.de/assets/76851529/aa83b07d-3dea-461f-9487-f9e6a299f2f3)

 ### Detailed instructions

 Try this instruction if you have problems with the quick instructions above.

-1. Open this link in your Browser: [https://ts5-overlay.tealfire.de/#/generate](https://ts5-overlay.tealfire.de/#/generate)
+1. Open this link in your Browser: [https://teamspeak-overlay.tealfire.de/#/generate](https://teamspeak-overlay.tealfire.de/#/generate)

 2. Follow the instructions on the website

@@ -56,7 +56,7 @@ Try this instruction if you have problems with the quick instructions above.
 Make sure you accepted the notification in your TeamSpeak Client.

 **Fix 2**  
-Sadly TeamSpeak5 does not give us any information about the current active server tab.  
+Sadly TeamSpeak5/6 does not give us any information about the current active server tab.  
 So we try currently use a workaround, where the active server tab is determined by looking on which server the your hardware input was unmuted the latest, since the non-active server tabs in TS5 usually mute the client’s microphone.

 However this workaround is not 100% accurate and can fail in some cases.
@@ -64,7 +64,7 @@ However this workaround is not 100% accurate and can fail in some cases.
 Possible fixes:

 - Unmute and mute yourself in the active server tab (Just a normal unmute and mute, not the hardware mute)
- Reconnect to the TS5 server while the overlay is open
+- Reconnect to the TS5/6 server while the overlay is open

 ### OBS doesn't show the latest version of the overlay

--- a/index.html
+++ b/index.html
@@ -3,13 +3,10 @@
  <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/6, so your audience can see who is talking. https://github.com/DerTyp7/teamspeak-obs-overlay"
-    />
+    <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="author" content="DerTyp7" />
    <link rel="icon" href="/logo.svg" type="image/x-icon" />
-    <title>TeamSpeak-OBS-Overlay</title>
+    <title>TS5-OBS-Overlay</title>
  </head>
  <body>
    <div id="root"></div>
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
        "@types/node": "^22.10.10",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
-        "react-router-dom": "^7.4.1",
+        "react-router-dom": "^7.1.3",
        "react-teamspeak-remote-app-api": "^2.0.0",
        "sass": "^1.83.4"
      },
@@ -3344,9 +3344,9 @@
      "dev": true
    },
    "node_modules/react-router": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.4.1.tgz",
-      "integrity": "sha512-Vmizn9ZNzxfh3cumddqv3kLOKvc7AskUT0dC1prTabhiEi0U4A33LmkDOJ79tXaeSqCqMBXBU/ySX88W85+EUg==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.3.tgz",
+      "integrity": "sha512-EezYymLY6Guk/zLQ2vRA8WvdUhWFEj5fcE3RfWihhxXBW7+cd1LsIiA3lmx+KCmneAGQuyBv820o44L2+TtkSA==",
      "license": "MIT",
      "dependencies": {
        "@types/cookie": "^0.6.0",
@@ -3368,12 +3368,12 @@
      }
    },
    "node_modules/react-router-dom": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.4.1.tgz",
-      "integrity": "sha512-L3/4tig0Lvs6m6THK0HRV4eHUdpx0dlJasgCxXKnavwhh4tKYgpuZk75HRYNoRKDyDWi9QgzGXsQ1oQSBlWpAA==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.3.tgz",
+      "integrity": "sha512-qQGTE+77hleBzv9SIUIkGRvuFBQGagW+TQKy53UTZAO/3+YFNBYvRsNIZ1GT17yHbc63FylMOdS+m3oUriF1GA==",
      "license": "MIT",
      "dependencies": {
-        "react-router": "7.4.1"
+        "react-router": "7.1.3"
      },
      "engines": {
        "node": ">=20.0.0"
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
    "@types/node": "^22.10.10",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
-    "react-router-dom": "^7.4.1",
+    "react-router-dom": "^7.1.3",
    "react-teamspeak-remote-app-api": "^2.0.0",
    "sass": "^1.83.4"
  },
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,7 +17,6 @@ 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
@@ -9,14 +9,13 @@ 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, alignRight]);
+  }, [remoteAppPort, showChannelName, hideNonTalking, clientLimit]);

  // Function to generate the output URL
  function generateUrl() {
@@ -27,7 +26,6 @@ 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
@@ -64,9 +62,7 @@ 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 */}
@@ -102,34 +98,18 @@ 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>
@@ -138,13 +118,7 @@ export default function Generator() {

        {/* Preview */}
        <div className="preview">
-          <Viewer
-            remoteAppPort={remoteAppPort}
-            showChannelName={showChannelName}
-            hideNonTalking={hideNonTalking}
-            clientLimit={clientLimit}
-            alignRight={alignRight}
-          />
+          <Viewer remoteAppPort={remoteAppPort} showChannelName={showChannelName} hideNonTalking={hideNonTalking} clientLimit={clientLimit} />
        </div>
      </div>
    </div>
--- a/src/Viewer.tsx
+++ b/src/Viewer.tsx
@@ -6,13 +6,11 @@ export default function Viewer({
  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,
@@ -32,7 +30,7 @@ export default function Viewer({
  }) as IClient[];

  return (
-    <div className={`viewer ${alignRight ? "viewer--align-right" : ""}`}>
+    <div className="viewer">
      {showChannelName && currentChannel ? (
        <div className="channelNameContainer">
          <h1>{currentChannel?.properties.name}</h1>
@@ -46,19 +44,13 @@ 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 ${alignRight ? "client--align-right" : ""}`}
-              key={`${client.id}-${client.channel?.connection.id}`}
-            >
+            <div className="client" 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>
@@ -93,16 +85,7 @@ 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 ? (
--- a/src/styles/Viewer.scss
+++ b/src/styles/Viewer.scss
@@ -7,10 +7,6 @@
  flex-direction: column;
  padding: 0.5rem;

-  &--align-right {
-    align-items: flex-end;
-  }
-
  h1 {
    font-size: 5vw;
  }
@@ -36,12 +32,9 @@
  .client {
    display: flex;
    flex-direction: row;
-    gap: 0.5rem 0.5rem;
+    gap: 0 0;
    align-items: center;
-
-    &--align-right {
-      flex-direction: row-reverse;
-    }
+    margin: 0.5rem 0;

    // icon styles
    svg {
Author	SHA1	Message	Date
Janis	8b8bbb610d	Update README.md	2025-01-24 13:52:26 +01:00
Janis	aaa770be2b	Merge pull request #122 from DerTyp7/dev Version 2.2.0	2025-01-24 13:43:21 +01:00