Compare commits

..

64 Commits
v2.0.1 ... 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
Janis
f0761c40b7 update version 2023-11-12 19:26:26 +01:00
Janis
ef442f10e0 Merge branch 'main' of https://github.com/DerTyp7/ts5-obs-overlay 2023-11-12 19:25:52 +01:00
Janis
ce7bd90362 add link for detailed instructions 2023-11-12 19:25:50 +01:00
Janis
61f6651a57 Merge pull request #90 from DerTyp7/DerTyp7-patch-1
Update README.md
2023-11-12 19:24:46 +01:00
Janis
1d9b6de814 Update README.md 2023-11-12 19:24:20 +01:00
Janis
751fad72f4 Update README.md 2023-11-12 19:22:30 +01:00
Janis
4eb61d3b96 fix viewer font size 2023-11-12 19:19:33 +01:00
Janis
7fd2e2aafa Merge pull request #89 from DerTyp7/DerTyp7-patch-2
Update README.md
2023-11-12 19:04:09 +01:00
Janis
33786d7366 Update README.md 2023-11-12 19:03:18 +01:00
Janis
1a5b231d1e fix hashruter generator 2023-11-12 19:01:01 +01:00
Janis
232bca2bbc remove doubled pathname issue 2023-11-12 18:52:24 +01:00
Janis
0b74390d2e update version 2023-11-12 18:50:13 +01:00
Janis
d16e80a48d fix pathname in generator 2023-11-12 18:49:49 +01:00
Janis
c5009271c4 update version 2023-11-12 18:43:57 +01:00
Janis
e9f3fa28f9 remove auto reroute 2023-11-12 18:43:24 +01:00
Janis
8b23a8cca7 update version 2023-11-12 18:41:36 +01:00
Janis
87dd069dec fix url generation for gh pages 2023-11-12 18:41:12 +01:00
13 changed files with 1937 additions and 1162 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,16 +20,16 @@ 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/40faa435-e128-415f-98eb-a9e8809e8f65) ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/aa83b07d-3dea-461f-9487-f9e6a299f2f3)
### Detailed instructions ### Detailed instructions
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
@@ -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) ![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 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) 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) ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/40faa435-e128-415f-98eb-a9e8809e8f65)

View File

@@ -5,10 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta <meta
name="description" name="description"
content="An OBS overlay for TeamSpeak5, so your audience can see who is talking. https://github.com/DerTyp7/ts5-obs-overlay" 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" />
<title>TS5-OBS-Overlay</title> <link rel="icon" href="/logo.svg" type="image/x-icon" />
<title>TeamSpeak-OBS-Overlay</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

2860
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.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", "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"
} }
} }

23
public/logo.svg Normal file
View File

@@ -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>

After

Width:  |  Height:  |  Size: 1.3 KiB

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,11 +17,11 @@ 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"}
/> />
} }
/> />
<Route path="/generate" element={<Generator />} /> <Route path="/generate" element={<Generator />} />
<Route path="*" element={<Navigate to="/generate" replace />} />
</Routes> </Routes>
); );
} }

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,23 +9,29 @@ 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() {
const url = new URL(window.location.href.replace("/#/generate", "")); const url = new URL(window.location.href);
url.hash = "";
url.searchParams.set("remoteAppPort", remoteAppPort.toString()); url.searchParams.set("remoteAppPort", remoteAppPort.toString());
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());
setOutputUrl(url.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
setOutputUrl(url.toString().replace("?", "#/?"));
} }
// Function to copy URL to clipboard // Function to copy URL to clipboard
@@ -49,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>
@@ -58,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="#">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 */}
@@ -94,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>
@@ -114,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.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, 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,14 @@
flex-direction: column; flex-direction: column;
padding: 0.5rem; padding: 0.5rem;
&--align-right {
align-items: flex-end;
}
h1 {
font-size: 5vw;
}
h1, h1,
p { p {
background-color: #2f313680; background-color: #2f313680;
@@ -28,20 +36,24 @@
.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 {
width: 2.1rem; width: 5vw;
aspect-ratio: 1/1; aspect-ratio: 1/1;
margin-right: 0.5rem; margin-right: 0.5rem;
filter: drop-shadow(0 0 0.75rem rgba(15, 15, 15, 0.1));
} }
// client name styles // client name styles
p { p {
font-size: 1.4rem; font-size: 5vw;
} }
} }
} }

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,