Merge pull request #122 from DerTyp7/dev

Version 2.2.0

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)
 
@@ -20,7 +20,7 @@ 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://ts5-overlay.tealfire.de/#/generate](https://ts5-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)
@@ -29,7 +29,7 @@ This overlay uses the [TeamSpeak5 Remote App API](https://github.com/DerTyp7/rea
 
 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://ts5-overlay.tealfire.de/#/generate](https://ts5-overlay.tealfire.de/#/generate)
 
 2. Follow the instructions on the website
 

package.json

@@ -1,17 +1,20 @@
 {
-  "name": "ts5-obs-overlay",
+  "name": "teamspeak-obs-overlay",
   "private": false,
-  "version": "2.0.8",
-  "description": "Overlay for OBS to show the current talking clients in your TeamSpeak 5 Channel",
+  "version": "2.2.0",
+  "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",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.18.0",
-    "react-ts5-remote-app-api": "^1.1.1",
-    "sass": "^1.68.0"
+    "@types/node": "^22.10.10",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.1.3",
+    "react-teamspeak-remote-app-api": "^2.0.0",
+    "sass": "^1.83.4"
   },
   "devDependencies": {
-    "@types/jest": "^29.5.2",
-    "@types/react": "^18.2.35",
-    "@types/react-dom": "^18.2.14",
-    "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@typescript-eslint/parser": "^6.9.1",
-    "@vitejs/plugin-react-swc": "^3.0.0",
-    "eslint": "^8.53.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0"
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@typescript-eslint/eslint-plugin": "^8.21.0",
+    "@typescript-eslint/parser": "^8.21.0",
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "eslint": "^9.18.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.11"
   }
 }

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";
 
@@ -53,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>
 

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.8",
-      name: "TS5 OBS Overlay",
-      description: "A OBS overlay for TS5 by DerTyp7",
+      version: "2.2.0",
+      name: "TeamSpeak OBS Overlay",
+      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/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,