Update README.md

Version 2.2.0

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 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.
+This App uses the new "Remote Apps" feature of TeamSpeak5/6.
 
-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)
 
-- [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 [TeamSpeak5 Remote App API](https://github.com/DerTyp7/rea
 
 ### Quick instructions
 
-1. Open this link in your Browser: [https://dertyp7.github.io/ts5-obs-overlay/generate](https://dertyp7.github.io/ts5-obs-overlay/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  
+3. Accept overlay inside TeamSpeak5/6 
-   ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/40faa435-e128-415f-98eb-a9e8809e8f65)
+   ![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://dertyp7.github.io/ts5-obs-overlay/generate](https://dertyp7.github.io/ts5-obs-overlay/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
 
@@ -41,9 +41,9 @@ Try this instruction if you have problems with the quick instructions above.
    ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/58ad399f-5344-456f-b243-6e267b489fd5)
 
 5. Enter the in step 1 generated URL into the URL field of the Browser Source
-   ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/50b755f9-d4b4-469f-9136-e2b18f226547)
+   ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/e8fd4a1b-be70-4123-8d28-4dc7ebc8c2bd)
 
-6. Set the width and height to your desired size. Recommended is a ratio of 1:1 or 1:2 (e.g. 1500x3000 OR 1000x2000)
+6. Set the width and height to your desired size. Recommended is a width of 1000px and the height is determined of how many clients are expected (play around with these values)
 
 7. You should now receive a notification in TeamSpeak5 that the app is allowed to connect to your TeamSpeak5 client. Allow it. (If you don't get a notification, restart TeamSpeak5 and OBS -> try again)  
    ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/40faa435-e128-415f-98eb-a9e8809e8f65)
@@ -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
 

index.html

@@ -3,11 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta
+    <meta name="description" content="An OBS overlay for TeamSpeak5, so your audience can see who is talking. https://github.com/DerTyp7/ts5-obs-overlay" />
-      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>TS5-OBS-Overlay</title>
   </head>
   <body>

package.json

@@ -1,17 +1,20 @@
 {
-  "name": "ts5-obs-overlay",
+  "name": "teamspeak-obs-overlay",
   "private": false,
-  "version": "2.0.3",
+  "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.18.0",
+    "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.14",
+    "@types/react-dom": "^19.0.3",
-    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/eslint-plugin": "^8.21.0",
-    "@typescript-eslint/parser": "^6.9.1",
+    "@typescript-eslint/parser": "^8.21.0",
-    "@vitejs/plugin-react-swc": "^3.0.0",
+    "@vitejs/plugin-react-swc": "^3.7.2",
-    "eslint": "^8.53.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.3",
+    "eslint-plugin-react-refresh": "^0.4.18",
-    "typescript": "^5.2.2",
+    "typescript": "^5.7.3",
-    "vite": "^4.5.0"
+    "vite": "^6.0.11"
   }
 }

public/logo.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="307.000000pt" height="339.000000pt" viewBox="0 0 307.000000 339.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,339.000000) scale(0.100000,-0.100000)"
+fill="#008080" stroke="none">
+<path d="M1297 3382 c-3 -4 -7 -61 -11 -127 -20 -341 -120 -616 -370 -1010
+-158 -251 -306 -436 -331 -415 -7 6 -18 52 -24 103 -22 170 -77 377 -101 377
+-5 0 -21 -38 -35 -86 -27 -89 -79 -213 -212 -504 -201 -438 -244 -657 -180
+-901 52 -198 102 -290 232 -427 137 -145 345 -310 474 -376 l34 -18 -5 24 c-3
+12 -18 63 -32 113 -64 213 -19 418 154 701 106 173 164 314 194 474 16 82 30
+120 45 120 13 0 55 -59 94 -131 45 -83 81 -198 102 -329 9 -57 18 -106 20
+-108 7 -7 122 231 144 298 34 104 49 202 63 403 6 103 15 186 20 185 4 -2 79
+-72 167 -155 257 -247 392 -414 501 -625 97 -187 102 -205 107 -413 6 -223 -1
+-265 -73 -418 -31 -65 -53 -121 -50 -124 7 -7 188 122 295 212 210 176 368
+383 455 598 149 370 117 760 -98 1193 -110 220 -245 417 -434 633 l-39 45 -7
+-183 c-5 -106 -14 -203 -22 -230 -14 -46 -80 -144 -99 -145 -14 -1 -59 92
+-101 209 -121 342 -331 651 -579 854 -130 107 -287 203 -298 183z"/>
+</g>
+</svg>

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";
 

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";
 
@@ -27,11 +27,9 @@ export default function Generator() {
     url.searchParams.set("hideNonTalking", hideNonTalking.toString());
     url.searchParams.set("clientLimit", clientLimit.toString());
 
-    if (url.hostname === "dertyp7.github.io") {
+    // url.hash function always sets the hash to the end of the URL, so we have to replace the question mark with a hash
-      url.pathname = url.pathname + "ts5-obs-overlay/";
+    // gh-pages needs the hash to be between the base URL and the search params
-    }
+    setOutputUrl(url.toString().replace("?", "#/?"));
-
-    setOutputUrl(url.toString());
   }
 
   // Function to copy URL to clipboard
@@ -55,7 +53,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>
 
@@ -64,7 +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="#">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 */}

src/Viewer.tsx

@@ -1,5 +1,5 @@
 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,
@@ -16,9 +16,9 @@ export default function Viewer({
     remoteAppPort: remoteAppPort,
     auth: {
       identifier: "de.tealfire.obs",
-      version: "2.0.3",
+      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,
   });
@@ -31,7 +31,7 @@ export default function Viewer({
 
   return (
     <div className="viewer">
-      {showChannelName ? (
+      {showChannelName && currentChannel ? (
         <div className="channelNameContainer">
           <h1>{currentChannel?.properties.name}</h1>
         </div>
@@ -146,6 +146,24 @@ export default function Viewer({
           return <div key={Math.random()}></div>;
         }
       })}
+      {currentChannel == null ? (
+        <>
+          <h4>Overlay couldn't connect to the client:</h4>
+          <br />
+          <br />
+          <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 TeamSpeak-Settings</h5>
+          <br />
+          <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 />
+          <h6>If non of this worked refer to the GitHub and write an issue with your problem</h6>
+        </>
+      ) : (
+        ""
+      )}
     </div>
   );
 }

src/main.tsx

@@ -1,8 +1,7 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "@styles/index.scss";
-import { BrowserRouter, HashRouter } from "react-router-dom";
+import { HashRouter } from "react-router-dom";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <HashRouter>

src/styles/Generator.scss

@@ -211,6 +211,18 @@ $breakpoint-3: 600px;
         background-repeat: no-repeat;
         background-size: cover;
         min-height: 500px;
+        h1 {
+          font-size: 2rem;
+        }
+        .client {
+          svg {
+            width: 2rem;
+          }
+
+          p {
+            font-size: 2rem;
+          }
+        }
       }
     }
   }

src/styles/Viewer.scss

@@ -7,6 +7,10 @@
   flex-direction: column;
   padding: 0.5rem;
 
+  h1 {
+    font-size: 5vw;
+  }
+
   h1,
   p {
     background-color: #2f313680;
@@ -34,14 +38,15 @@
 
     // icon styles
     svg {
-      width: 2.1rem;
+      width: 5vw;
       aspect-ratio: 1/1;
       margin-right: 0.5rem;
+      filter: drop-shadow(0 0 0.75rem rgba(15, 15, 15, 0.1));
     }
 
     // client name styles
     p {
-      font-size: 1.4rem;
+      font-size: 5vw;
     }
   }
 }

src/styles/index.scss

@@ -41,6 +41,14 @@ h4 {
   font-size: 1.1rem;
 }
 
+h5 {
+  font-size: 1rem;
+}
+
+h6 {
+  font-size: 0.9rem;
+}
+
 // Common styles for heading elements
 h1,
 h2,