Compare commits

...

47 Commits
v2.0.8 ... dev

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
Janis
d37c7326c3 Merge pull request #109 from DerTyp7/dev
update packages
2024-02-05 17:34:39 +01:00
Janis
4c1a6f92b9 Merge pull request #104 from DerTyp7/dependabot/npm_and_yarn/dev/typescript-eslint/eslint-plugin-6.20.0
Bump @typescript-eslint/eslint-plugin from 6.7.4 to 6.20.0
2024-02-05 17:31:41 +01:00
dependabot[bot]
1f3868fc3a Bump @typescript-eslint/eslint-plugin from 6.7.4 to 6.20.0
Bumps [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin) from 6.7.4 to 6.20.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/v6.20.0/packages/eslint-plugin)

---
updated-dependencies:
- dependency-name: "@typescript-eslint/eslint-plugin"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
2024-02-05 16:30:35 +00:00
Janis
632b2ad1ef Merge pull request #105 from DerTyp7/dependabot/npm_and_yarn/dev/types/react-dom-18.2.18
Bump @types/react-dom from 18.2.15 to 18.2.18
2024-02-05 17:29:54 +01:00
Janis
9519a19b5c Merge pull request #106 from DerTyp7/dependabot/npm_and_yarn/dev/eslint-plugin-react-refresh-0.4.5
Bump eslint-plugin-react-refresh from 0.4.3 to 0.4.5
2024-02-05 17:29:34 +01:00
dependabot[bot]
a438f81c72 Bump eslint-plugin-react-refresh from 0.4.3 to 0.4.5
Bumps [eslint-plugin-react-refresh](https://github.com/ArnaudBarre/eslint-plugin-react-refresh) from 0.4.3 to 0.4.5.
- [Release notes](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/releases)
- [Changelog](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/blob/main/CHANGELOG.md)
- [Commits](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/compare/v0.4.3...v0.4.5)

---
updated-dependencies:
- dependency-name: eslint-plugin-react-refresh
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
2024-02-05 16:29:16 +00:00
Janis
6b3d44796f Merge pull request #107 from DerTyp7/dependabot/npm_and_yarn/dev/react-router-dom-6.21.3
Bump react-router-dom from 6.21.1 to 6.21.3
2024-02-05 17:29:03 +01:00
Janis
c272df6397 Merge pull request #108 from DerTyp7/dependabot/npm_and_yarn/dev/vitejs/plugin-react-swc-3.6.0
Bump @vitejs/plugin-react-swc from 3.5.0 to 3.6.0
2024-02-05 17:28:37 +01:00
dependabot[bot]
1eae9e0017 Bump @vitejs/plugin-react-swc from 3.5.0 to 3.6.0
Bumps [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) from 3.5.0 to 3.6.0.
- [Release notes](https://github.com/vitejs/vite-plugin-react-swc/releases)
- [Changelog](https://github.com/vitejs/vite-plugin-react-swc/blob/main/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite-plugin-react-swc/compare/v3.5.0...v3.6.0)

---
updated-dependencies:
- dependency-name: "@vitejs/plugin-react-swc"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
2024-02-01 02:00:07 +00:00
dependabot[bot]
94c5a822fe Bump react-router-dom from 6.21.1 to 6.21.3
Bumps [react-router-dom](https://github.com/remix-run/react-router/tree/HEAD/packages/react-router-dom) from 6.21.1 to 6.21.3.
- [Release notes](https://github.com/remix-run/react-router/releases)
- [Changelog](https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/CHANGELOG.md)
- [Commits](https://github.com/remix-run/react-router/commits/react-router-dom@6.21.3/packages/react-router-dom)

---
updated-dependencies:
- dependency-name: react-router-dom
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
2024-02-01 01:59:59 +00:00
dependabot[bot]
509ca975bd Bump @types/react-dom from 18.2.15 to 18.2.18
Bumps [@types/react-dom](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react-dom) from 18.2.15 to 18.2.18.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react-dom)

---
updated-dependencies:
- dependency-name: "@types/react-dom"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
2024-02-01 01:59:44 +00:00
Janis
43f3c4f4ac Merge pull request #103 from DerTyp7/dev
Version 2.1.1
2024-01-25 21:44:36 +01:00
Janis
171a64da44 Update version numbers 2024-01-25 21:41:47 +01:00
dertyp7
01aaf66e55 Update dependencies in package.json 2024-01-25 20:10:04 +01:00
Janis
0e456bee91 Merge pull request #97 from DerTyp7/dependabot/npm_and_yarn/dev/types/jest-29.5.11
Bump @types/jest from 29.5.2 to 29.5.11
2024-01-25 20:07:10 +01:00
Janis
6bc2994a91 Merge pull request #98 from DerTyp7/dependabot/npm_and_yarn/dev/react-router-dom-6.21.1
Bump react-router-dom from 6.18.0 to 6.21.1
2024-01-25 20:06:55 +01:00
Janis
716d306a87 Merge pull request #99 from DerTyp7/dependabot/npm_and_yarn/dev/typescript-5.3.3
Bump typescript from 5.2.2 to 5.3.3
2024-01-25 20:06:32 +01:00
dertyp7
cf0f472c70 Merge branch 'main' into dev 2024-01-25 19:57:38 +01:00
dependabot[bot]
3159a86e8f Bump typescript from 5.2.2 to 5.3.3
Bumps [typescript](https://github.com/Microsoft/TypeScript) from 5.2.2 to 5.3.3.
- [Release notes](https://github.com/Microsoft/TypeScript/releases)
- [Commits](https://github.com/Microsoft/TypeScript/compare/v5.2.2...v5.3.3)

---
updated-dependencies:
- dependency-name: typescript
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
2024-01-25 18:52:29 +00:00
Janis
71fb6c565e Merge pull request #100 from DerTyp7/dependabot/npm_and_yarn/dev/eslint-8.56.0
Bump eslint from 8.53.0 to 8.56.0
2024-01-25 19:51:37 +01:00
Janis
254d29fe6d Merge pull request #101 from DerTyp7/dependabot/npm_and_yarn/vite-4.5.2
Bump vite from 4.5.0 to 4.5.2
2024-01-25 19:49:04 +01:00
dertyp7
13f621f17b Update package-lock.json version to 2.1.0 2024-01-25 19:44:27 +01:00
Janis
337c39935c Update README.md 2024-01-25 00:43:12 +01:00
Janis
d3cc20d58b Update README.md 2024-01-25 00:41:47 +01:00
Janis
cf5c0ae705 Change to GH-Pages custom url 2024-01-25 00:32:09 +01:00
dependabot[bot]
69db8c5bcc Bump vite from 4.5.0 to 4.5.2
Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 4.5.0 to 4.5.2.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v4.5.2/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v4.5.2/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
2024-01-20 05:11:49 +00:00
dependabot[bot]
fd2863b355 Bump eslint from 8.53.0 to 8.56.0
Bumps [eslint](https://github.com/eslint/eslint) from 8.53.0 to 8.56.0.
- [Release notes](https://github.com/eslint/eslint/releases)
- [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md)
- [Commits](https://github.com/eslint/eslint/compare/v8.53.0...v8.56.0)

---
updated-dependencies:
- dependency-name: eslint
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
2024-01-01 01:17:15 +00:00
dependabot[bot]
8ffbe023eb Bump react-router-dom from 6.18.0 to 6.21.1
Bumps [react-router-dom](https://github.com/remix-run/react-router/tree/HEAD/packages/react-router-dom) from 6.18.0 to 6.21.1.
- [Release notes](https://github.com/remix-run/react-router/releases)
- [Changelog](https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/CHANGELOG.md)
- [Commits](https://github.com/remix-run/react-router/commits/react-router-dom@6.21.1/packages/react-router-dom)

---
updated-dependencies:
- dependency-name: react-router-dom
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
2024-01-01 01:14:26 +00:00
dependabot[bot]
a9edeec900 Bump @types/jest from 29.5.2 to 29.5.11
Bumps [@types/jest](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/jest) from 29.5.2 to 29.5.11.
- [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-01-01 01:14:13 +00:00
Janis
3e5ec1862e fix remove emtpy channelname 2023-11-12 23:18:25 +01:00
Janis
34ffedc294 update version 2023-11-12 23:13:08 +01:00
Janis
6d7ee8905b show instructions when client cant connect 2023-11-12 23:12:37 +01:00
Janis
442e8f05e6 update version 2023-11-12 19:57:28 +01:00
Janis
f30cd26393 fix generator font size 2023-11-12 19:57:10 +01:00
12 changed files with 1900 additions and 1154 deletions

View File

@@ -1,7 +1,7 @@
{ {
"tabWidth": 2, "tabWidth": 2,
"useTabs": false, "useTabs": false,
"printWidth": 180, "printWidth": 120,
"singleQuote": false, "singleQuote": false,
"semi": true "semi": true
} }

View File

@@ -3,7 +3,7 @@
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 Channel.
This App uses the new "Remote Apps" feature of TeamSpeak5. 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) ![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 ### 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 2. Follow the instructions on the website
3. Accept overlay inside TeamSpeak5 3. Accept overlay inside TeamSpeak5
![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/aa83b07d-3dea-461f-9487-f9e6a299f2f3) ![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. 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 2. Follow the instructions on the website

View File

@@ -3,10 +3,13 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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" /> <meta name="author" content="DerTyp7" />
<link rel="icon" href="/logo.svg" type="image/x-icon" /> <link rel="icon" href="/logo.svg" type="image/x-icon" />
<title>TS5-OBS-Overlay</title> <title>TeamSpeak-OBS-Overlay</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

2864
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,17 +1,20 @@
{ {
"name": "ts5-obs-overlay", "name": "teamspeak-obs-overlay",
"private": false, "private": false,
"version": "2.0.8", "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", "author": "DerTyp7",
"homepage": "https://dertyp7.github.io/ts5-obs-overlay/#", "homepage": "https://dertyp7.github.io/teamspeak-obs-overlay/#",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://github.com/DerTyp7/ts5-obs-overlay" "url": "https://github.com/DerTyp7/teamspeak-obs-overlay"
}, },
"keywords": [ "keywords": [
"ts5", "ts5",
"ts6",
"teamspeak6",
"teamspeak", "teamspeak",
"teamspeak5",
"overlay", "overlay",
"remote app", "remote app",
"obs", "obs",
@@ -20,7 +23,7 @@
"vite" "vite"
], ],
"bugs": { "bugs": {
"url": "https://github.com/DerTyp7/ts5-obs-overlay/issues" "url": "https://github.com/DerTyp7/teamspeak-obs-overlay/issues"
}, },
"type": "module", "type": "module",
"scripts": { "scripts": {
@@ -30,24 +33,24 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "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": { "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"
} }
} }

View File

@@ -1,6 +1,6 @@
import "@styles/App.scss"; 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 Viewer from "./Viewer";
import Generator from "./Generator"; import Generator from "./Generator";
@@ -17,6 +17,7 @@ export default function App() {
showChannelName={searchParams.get("showChannelName") === "true"} showChannelName={searchParams.get("showChannelName") === "true"}
hideNonTalking={searchParams.get("hideNonTalking") === "true"} hideNonTalking={searchParams.get("hideNonTalking") === "true"}
clientLimit={searchParams.get("clientLimit") ? parseInt(searchParams.get("clientLimit") ?? "0") : 0} clientLimit={searchParams.get("clientLimit") ? parseInt(searchParams.get("clientLimit") ?? "0") : 0}
alignRight={searchParams.get("alignRight") === "true"}
/> />
} }
/> />

View File

@@ -1,4 +1,4 @@
import React, { ChangeEvent, useRef, useState, useEffect } from "react"; import { ChangeEvent, useRef, useState, useEffect } from "react";
import "@styles/Generator.scss"; import "@styles/Generator.scss";
import Viewer from "./Viewer"; import Viewer from "./Viewer";
@@ -9,13 +9,14 @@ export default function Generator() {
const [remoteAppPort, setRemoteAppPort] = useState(5899); const [remoteAppPort, setRemoteAppPort] = useState(5899);
const [showChannelName, setShowChannelName] = useState(true); const [showChannelName, setShowChannelName] = useState(true);
const [alignRight, setAlignRight] = useState(false);
const [hideNonTalking, setHideNonTalking] = useState(false); const [hideNonTalking, setHideNonTalking] = useState(false);
const [clientLimit, setClientLimit] = useState(0); const [clientLimit, setClientLimit] = useState(0);
// Effect to generate URL when dependencies change // Effect to generate URL when dependencies change
useEffect(() => { useEffect(() => {
generateUrl(); generateUrl();
}, [remoteAppPort, showChannelName, hideNonTalking, clientLimit]); }, [remoteAppPort, showChannelName, hideNonTalking, clientLimit, alignRight]);
// Function to generate the output URL // Function to generate the output URL
function generateUrl() { function generateUrl() {
@@ -26,6 +27,7 @@ export default function Generator() {
url.searchParams.set("showChannelName", showChannelName.toString()); url.searchParams.set("showChannelName", showChannelName.toString());
url.searchParams.set("hideNonTalking", hideNonTalking.toString()); url.searchParams.set("hideNonTalking", hideNonTalking.toString());
url.searchParams.set("clientLimit", clientLimit.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 // 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 // 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"> <div className="generator">
{/* Header */} {/* Header */}
<div className="headline"> <div className="headline">
<h1>TS5-OBS-Overlay Generator</h1> <h1>TeamSpeak-OBS-Overlay Generator</h1>
<h4>by DerTyp7</h4> <h4>by DerTyp7</h4>
</div> </div>
@@ -62,7 +64,9 @@ export default function Generator() {
<p>1. Customize your settings</p> <p>1. Customize your settings</p>
<p>2. Copy the generated URL</p> <p>2. Copy the generated URL</p>
<p>3. Paste the URL into the BrowserSource URL field in OBS</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> </div>
{/* Output Section */} {/* Output Section */}
@@ -98,18 +102,34 @@ export default function Generator() {
<input type="checkbox" checked={hideNonTalking} /> <input type="checkbox" checked={hideNonTalking} />
<label>Hide non talking clients</label> <label>Hide non talking clients</label>
</div> </div>
{/* Alignment Option */}
<div className="option" onClick={() => setAlignRight(!alignRight)}>
<input type="checkbox" checked={alignRight} />
<label>Align Right</label>
</div>
</section> </section>
<section> <section>
{/* Client Limit Option */} {/* Client Limit Option */}
<div className="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> <label>Client Limit</label>
</div> </div>
{/* RemoteApp-Port Option */} {/* RemoteApp-Port Option */}
<div className="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> <label>RemoteApp-Port</label>
</div> </div>
</section> </section>
@@ -118,7 +138,13 @@ export default function Generator() {
{/* Preview */} {/* Preview */}
<div className="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> </div>
</div> </div>

View File

@@ -1,24 +1,26 @@
import "@styles/Viewer.scss"; 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({ export default function Viewer({
remoteAppPort = 5899, remoteAppPort = 5899,
showChannelName = false, showChannelName = false,
hideNonTalking = false, hideNonTalking = false,
clientLimit = 0, clientLimit = 0,
alignRight = false,
}: { }: {
remoteAppPort?: number; remoteAppPort?: number;
showChannelName?: boolean; showChannelName?: boolean;
hideNonTalking?: boolean; hideNonTalking?: boolean;
clientLimit?: number; clientLimit?: number;
alignRight?: boolean;
}) { }) {
const { clients, activeConnectionId, currentChannel } = useTSRemoteApp({ const { clients, activeConnectionId, currentChannel } = useTSRemoteApp({
remoteAppPort: remoteAppPort, remoteAppPort: remoteAppPort,
auth: { auth: {
identifier: "de.tealfire.obs", identifier: "de.tealfire.obs",
version: "2.0.8", 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, logging: true,
}); });
@@ -30,8 +32,8 @@ export default function Viewer({
}) as IClient[]; }) as IClient[];
return ( return (
<div className="viewer"> <div className={`viewer ${alignRight ? "viewer--align-right" : ""}`}>
{showChannelName ? ( {showChannelName && currentChannel ? (
<div className="channelNameContainer"> <div className="channelNameContainer">
<h1>{currentChannel?.properties.name}</h1> <h1>{currentChannel?.properties.name}</h1>
</div> </div>
@@ -44,13 +46,19 @@ export default function Viewer({
if (client) { if (client) {
//* Non-talking 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; return null;
} }
//* Normal client //* Normal client
return ( 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 ? ( {client.properties.outputHardware == false ? (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
<title>muted_hardware_output</title> <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" 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" 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> </g>
</svg> </svg>
) : client.properties.outputMuted ? ( ) : client.properties.outputMuted ? (
@@ -146,6 +163,24 @@ export default function Viewer({
return <div key={Math.random()}></div>; 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> </div>
); );
} }

View File

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

View File

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

View File

@@ -7,6 +7,10 @@
flex-direction: column; flex-direction: column;
padding: 0.5rem; padding: 0.5rem;
&--align-right {
align-items: flex-end;
}
h1 { h1 {
font-size: 5vw; font-size: 5vw;
} }
@@ -32,9 +36,12 @@
.client { .client {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 0 0; gap: 0.5rem 0.5rem;
align-items: center; align-items: center;
margin: 0.5rem 0;
&--align-right {
flex-direction: row-reverse;
}
// icon styles // icon styles
svg { svg {

View File

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