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)
 

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

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.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,
   });
@@ -151,11 +151,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 />

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