├── src
    ├── styles
    │   ├── App.scss
    │   ├── Viewer.scss
    │   ├── index.scss
    │   └── Generator.scss
    ├── vite-env.d.ts
    ├── main.tsx
    ├── App.tsx
    ├── utils
    │   └── logger.tsx
    ├── Generator.tsx
    └── Viewer.tsx
├── .prettierrc
├── public
    ├── images
    │   └── viewer_example_background.png
    └── logo.svg
├── tsconfig.node.json
├── .gitignore
├── .eslintrc.cjs
├── .github
    ├── dependabot.yml
    ├── workflows
    │   └── deploy.yml
    └── ISSUE_TEMPLATE
    │   └── bug_report.md
├── index.html
├── vite.config.ts
├── tsconfig.json
├── package.json
└── README.md


/src/styles/App.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "tabWidth": 2,
3 |   "useTabs": false,
4 |   "printWidth": 180,
5 |   "singleQuote": false,
6 |   "semi": true
7 | }
8 | 


--------------------------------------------------------------------------------
/public/images/viewer_example_background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DerTyp7/teamspeak-obs-overlay/HEAD/public/images/viewer_example_background.png


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "skipLibCheck": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "bundler",
 7 |     "allowSyntheticDefaultImports": true
 8 |   },
 9 |   "include": ["vite.config.ts"]
10 | }
11 | 


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import ReactDOM from "react-dom/client";
 2 | import App from "./App.tsx";
 3 | import "@styles/index.scss";
 4 | import { HashRouter } from "react-router-dom";
 5 | 
 6 | ReactDOM.createRoot(document.getElementById("root")!).render(
 7 |   <HashRouter>
 8 |     <App />
 9 |   </HashRouter>
10 | );
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: { browser: true, es2020: true },
 3 |   extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended"],
 4 |   parser: "@typescript-eslint/parser",
 5 |   parserOptions: { ecmaVersion: "latest", sourceType: "module" },
 6 |   plugins: ["react-refresh"],
 7 |   rules: {
 8 |     "react-refresh/only-export-components": "warn",
 9 |     "react-hooks/exhaustive-deps": "ignore",
10 |   },
11 | };
12 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | # To get started with Dependabot version updates, you'll need to specify which
 2 | # package ecosystems to update and where the package manifests are located.
 3 | # Please see the documentation for all configuration options:
 4 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
 5 | version: 2
 6 | updates:
 7 |   - package-ecosystem: "npm" # See documentation for possible values
 8 |     directory: "/" # Location of package manifests
 9 |     schedule:
10 |       interval: "monthly"
11 |     target-branch: "dev"


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta name="description" content="An OBS overlay for TeamSpeak5, so your audience can see who is talking. https://github.com/DerTyp7/ts5-obs-overlay" />
 7 |     <meta name="author" content="DerTyp7" />
 8 |     <link rel="icon" href="/logo.svg" type="image/x-icon" />
 9 |     <title>TS5-OBS-Overlay</title>
10 |   </head>
11 |   <body>
12 |     <div id="root"></div>
13 |     <script type="module" src="/src/main.tsx"></script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/.github/workflows/deploy.yml:
--------------------------------------------------------------------------------
 1 | name: Deploy to GitHub Pages on Release
 2 | 
 3 | on:
 4 |   release:
 5 |     types:
 6 |       - created
 7 | 
 8 | jobs:
 9 |   deploy:
10 |     runs-on: ubuntu-latest
11 | 
12 |     steps:
13 |       - name: Checkout code
14 |         uses: actions/checkout@v2
15 | 
16 |       - name: Setup Node.js
17 |         uses: actions/setup-node@v2
18 |         with:
19 |           node-version: '18'
20 | 
21 |       - name: Install dependencies
22 |         run: npm install
23 | 
24 |       - name: Build
25 |         run: npm run build
26 | 
27 |       - name: Deploy to GitHub Pages
28 |         uses: peaceiris/actions-gh-pages@v3.9.3
29 |         with:
30 |           github_token: ${{ secrets.GITHUB_TOKEN }}
31 |           publish_dir: ./dist
32 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Something isn't working for you
 4 | title: ''
 5 | labels: bug
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | > Screenshots are welcome
11 | ## Describe the bug
12 | A clear and concise description of what the bug is.
13 | 
14 | ## To Reproduce
15 | Example or explanation to reproduce the issue.
16 | 
17 | ## Expected behavior
18 | A clear and concise description of what you expected to happen.
19 | 
20 | **Do you use the local or online version?**
21 | - [x] Online version with URL: `https://dertyp7.github.io/ts5-obs-overlay`
22 | - [ ] The version named below locally downloaded on my device
23 | 
24 | **Your environment:**
25 |  - OS: [e.g. Windows 11]
26 |  - OBS version: [e.g. 29.1.3]
27 |  - Overlay version [e.g. v1.1.0]
28 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import react from '@vitejs/plugin-react-swc'
 3 | import path from 'path';
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 |   base: "./",
 8 |   resolve: {
 9 |     alias: {
10 |       '@': path.resolve(__dirname, './src'),
11 |       '@assets': path.resolve(__dirname, './src/assets'),
12 |       '@components': path.resolve(__dirname, './src/components'),
13 |       '@handlers': path.resolve(__dirname, './src/handlers'),
14 |       '@interfaces': path.resolve(__dirname, './src/interfaces'),
15 |       '@utils': path.resolve(__dirname, './src/utils'),
16 |       '@styles': path.resolve(__dirname, './src/styles'),
17 |     },
18 |   },
19 |   build: {
20 |     outDir: 'dist',
21 |     emptyOutDir: true,
22 |   },
23 |   plugins: [react()],
24 | })
25 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import "@styles/App.scss";
 2 | 
 3 | import { Route, Routes, useSearchParams } from "react-router-dom";
 4 | import Viewer from "./Viewer";
 5 | import Generator from "./Generator";
 6 | 
 7 | export default function App() {
 8 |   const [searchParams] = useSearchParams();
 9 | 
10 |   return (
11 |     <Routes>
12 |       <Route
13 |         path="/"
14 |         element={
15 |           <Viewer
16 |             remoteAppPort={parseInt(searchParams.get("remoteAppPort") ?? "5899")}
17 |             showChannelName={searchParams.get("showChannelName") === "true"}
18 |             hideNonTalking={searchParams.get("hideNonTalking") === "true"}
19 |             clientLimit={searchParams.get("clientLimit") ? parseInt(searchParams.get("clientLimit") ?? "0") : 0}
20 |           />
21 |         }
22 |       />
23 |       <Route path="/generate" element={<Generator />} />
24 |     </Routes>
25 |   );
26 | }
27 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 | 
 9 |     "baseUrl": ".",
10 |     "paths": {
11 |       "@/*": ["src/*"],
12 |       "@components/*": ["src/components/*"],
13 |       "@assets/*": ["src/assets/*"],
14 |       "@styles/*": ["src/styles/*"],
15 |       "@utils/*": ["src/utils/*"],
16 |       "@interfaces/*": ["src/interfaces/*"],
17 |       "@handlers/*": ["src/handlers/*"]
18 |     },
19 | 
20 |     /* Bundler mode */
21 |     "moduleResolution": "Node",
22 |     "allowSyntheticDefaultImports": true,
23 |     "allowImportingTsExtensions": true,
24 |     "resolveJsonModule": true,
25 |     "isolatedModules": true,
26 |     "noEmit": true,
27 |     "jsx": "react-jsx",
28 | 
29 |     /* Linting */
30 |     "strict": true,
31 |     "noUnusedLocals": false,
32 |     "noUnusedParameters": true,
33 |     "noFallthroughCasesInSwitch": true
34 |   },
35 |   "include": ["src"],
36 |   "references": [{ "path": "./tsconfig.node.json" }]
37 | }
38 | 


--------------------------------------------------------------------------------
/src/styles/Viewer.scss:
--------------------------------------------------------------------------------
 1 | //* Viewer styles
 2 | // this file contains styles for the viewer component
 3 | // styles for the viewer component should not be modified somewhere else
 4 | 
 5 | .viewer {
 6 |   display: flex;
 7 |   flex-direction: column;
 8 |   padding: 0.5rem;
 9 | 
10 |   h1 {
11 |     font-size: 5vw;
12 |   }
13 | 
14 |   h1,
15 |   p {
16 |     background-color: #2f313680;
17 |     padding: 0.25rem 0.5rem;
18 |     border-radius: 0.25rem;
19 |     white-space: nowrap;
20 |     overflow: hidden;
21 |     text-overflow: ellipsis;
22 |     max-width: 20ch;
23 |     user-select: none;
24 |   }
25 | 
26 |   .channelNameContainer {
27 |     display: flex;
28 |     align-items: center;
29 |     margin-bottom: 20px;
30 |   }
31 | 
32 |   .client {
33 |     display: flex;
34 |     flex-direction: row;
35 |     gap: 0 0;
36 |     align-items: center;
37 |     margin: 0.5rem 0;
38 | 
39 |     // icon styles
40 |     svg {
41 |       width: 5vw;
42 |       aspect-ratio: 1/1;
43 |       margin-right: 0.5rem;
44 |       filter: drop-shadow(0 0 0.75rem rgba(15, 15, 15, 0.1));
45 |     }
46 | 
47 |     // client name styles
48 |     p {
49 |       font-size: 5vw;
50 |     }
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/src/utils/logger.tsx:
--------------------------------------------------------------------------------
 1 | export default class Logger {
 2 |   // Log message to the console
 3 |   public static log(message: string, data: object | null = null): void {
 4 |     console.log(`[Log] %c${message}`.trim(), "color: gray", data ?? "");
 5 |   }
 6 | 
 7 |   // Log warning to the console
 8 |   public static warn(message: string, data: object | null = null): void {
 9 |     console.warn(`%c${message}`.trim(), data ?? "");
10 |   }
11 | 
12 |   // Log error to the console
13 |   public static error(message: string, data: object | null = null): void {
14 |     console.error(`%c${message}`.trim(), data ?? "");
15 |   }
16 | 
17 |   // Log message received from the websocket to the console
18 |   public static wsReceived(data: object, message: string | undefined = undefined): void {
19 |     console.log(`%c[WS Recieved] ${message ?? ""}`.trim(), "color: #8258c7", data);
20 |   }
21 | 
22 |   // Log message sent to the websocket to the console
23 |   public static wsSent(data: object, message: string | undefined = undefined): void {
24 |     console.log(`%c[WS Sent] ${message ?? ""}`.trim(), "color: #4eb570", data);
25 |   }
26 | 
27 |   // Log message to the console with a timestamp
28 |   public static ts(message: string, data: object | null = null): void {
29 |     console.log(`%c[TS] ${message}`.trim(), "color: #2e6bc7", data ?? "");
30 |   }
31 | }
32 | 


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


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "teamspeak-obs-overlay",
 3 |   "private": false,
 4 |   "version": "2.2.0",
 5 |   "description": "Overlay for OBS to show the current talking clients in your TeamSpeak Channel",
 6 |   "author": "DerTyp7",
 7 |   "homepage": "https://dertyp7.github.io/teamspeak-obs-overlay/#",
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "https://github.com/DerTyp7/teamspeak-obs-overlay"
11 |   },
12 |   "keywords": [
13 |     "ts5",
14 |     "ts6",
15 |     "teamspeak6",
16 |     "teamspeak",
17 |     "teamspeak5",
18 |     "overlay",
19 |     "remote app",
20 |     "obs",
21 |     "typescript",
22 |     "react",
23 |     "vite"
24 |   ],
25 |   "bugs": {
26 |     "url": "https://github.com/DerTyp7/teamspeak-obs-overlay/issues"
27 |   },
28 |   "type": "module",
29 |   "scripts": {
30 |     "dev": "vite",
31 |     "build": "tsc && vite build",
32 |     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
33 |     "preview": "vite preview"
34 |   },
35 |   "dependencies": {
36 |     "@types/node": "^22.10.10",
37 |     "react": "^19.0.0",
38 |     "react-dom": "^19.0.0",
39 |     "react-router-dom": "^7.1.3",
40 |     "react-teamspeak-remote-app-api": "^2.0.0",
41 |     "sass": "^1.83.4"
42 |   },
43 |   "devDependencies": {
44 |     "@types/jest": "^29.5.14",
45 |     "@types/react": "^19.0.8",
46 |     "@types/react-dom": "^19.0.3",
47 |     "@typescript-eslint/eslint-plugin": "^8.21.0",
48 |     "@typescript-eslint/parser": "^8.21.0",
49 |     "@vitejs/plugin-react-swc": "^3.7.2",
50 |     "eslint": "^9.18.0",
51 |     "eslint-plugin-react-hooks": "^5.1.0",
52 |     "eslint-plugin-react-refresh": "^0.4.18",
53 |     "typescript": "^5.7.3",
54 |     "vite": "^6.0.11"
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/src/styles/index.scss:
--------------------------------------------------------------------------------
  1 | // Reset styles for all elements
  2 | * {
  3 |   font-family: Arial, Helvetica, sans-serif;
  4 |   font-weight: bold;
  5 |   font-size: 1rem;
  6 |   margin: 0;
  7 |   padding: 0;
  8 |   box-sizing: border-box;
  9 | }
 10 | 
 11 | // Set up basic styles for the entire page
 12 | body,
 13 | html {
 14 |   min-height: 100vh;
 15 |   min-width: 100%;
 16 |   display: flex;
 17 |   overflow-x: hidden;
 18 |   color: #fff;
 19 | }
 20 | 
 21 | // Ensure the root element takes up the full viewport
 22 | #root {
 23 |   height: 100%;
 24 |   min-width: 100%;
 25 | }
 26 | 
 27 | // Headline styles
 28 | h1 {
 29 |   font-size: 1.8rem;
 30 | }
 31 | 
 32 | h2 {
 33 |   font-size: 1.5rem;
 34 | }
 35 | 
 36 | h3 {
 37 |   font-size: 1.2rem;
 38 | }
 39 | 
 40 | h4 {
 41 |   font-size: 1.1rem;
 42 | }
 43 | 
 44 | h5 {
 45 |   font-size: 1rem;
 46 | }
 47 | 
 48 | h6 {
 49 |   font-size: 0.9rem;
 50 | }
 51 | 
 52 | // Common styles for heading elements
 53 | h1,
 54 | h2,
 55 | h3,
 56 | h4,
 57 | h5,
 58 | h6 {
 59 |   font-weight: bold;
 60 | }
 61 | 
 62 | // Text styles
 63 | a {
 64 |   color: #3abe78;
 65 |   font-weight: bold;
 66 |   text-decoration: none;
 67 |   transition: all 100ms ease-in-out;
 68 | 
 69 |   &:hover {
 70 |     color: #31f399;
 71 |   }
 72 | }
 73 | 
 74 | // Button styles
 75 | button {
 76 |   background-color: #202024;
 77 |   color: #fff;
 78 |   font-weight: bold;
 79 |   border: 2px solid #31f399;
 80 |   border-radius: 5px;
 81 |   padding: 10px 20px;
 82 |   cursor: pointer;
 83 |   transition: all 300ms ease-in-out;
 84 | 
 85 |   &:hover {
 86 |     background-color: #42d486;
 87 |     color: #202024;
 88 |   }
 89 | }
 90 | 
 91 | // Custom dark-themed scrollbar
 92 | ::-webkit-scrollbar {
 93 |   width: 5px;
 94 |   height: 5px;
 95 | }
 96 | 
 97 | ::-webkit-scrollbar-track {
 98 |   background: #363638;
 99 |   border-radius: 10px;
100 | }
101 | 
102 | ::-webkit-scrollbar-thumb {
103 |   background: #31f39973;
104 |   border-radius: 10px;
105 | 
106 |   &:hover {
107 |     background: #48ee95;
108 |   }
109 | }
110 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # TeamSpeak-OBS-Overlay
 2 | 
 3 | This is an overlay for OBS to show the current talking clients in your TeamSpeak5/6 Channel.  
 4 | This App uses the new "Remote Apps" feature of TeamSpeak5/6.
 5 | 
 6 | This overlay uses the [TeamSpeak Remote App API](https://github.com/DerTyp7/react-teamspeak-remote-app-api).
 7 | 
 8 | ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/d0ab06f2-1a36-479d-826f-bd4bd3d405b7)
 9 | 
10 | - [TeamSpeak-OBS-Overlay](#teamspeak-obs-overlay)
11 |   - [Usage](#usage)
12 |     - [Quick instructions](#quick-instructions)
13 |     - [Detailed instructions](#detailed-instructions)
14 |   - [Common Issues](#common-issues)
15 |     - [The overlay is empty, but i'm connected to a TeamSpeak5 server](#the-overlay-is-empty-but-im-connected-to-a-teamspeak5-server)
16 |     - [OBS doesn't show the latest version of the overlay](#obs-doesnt-show-the-latest-version-of-the-overlay)
17 |   - [Setup (Developer)](#setup-developer)
18 | 
19 | ## Usage
20 | 
21 | ### Quick instructions
22 | 
23 | 1. Open this link in your Browser: [https://teamspeak-overlay.tealfire.de/#/generate](https://teamspeak-overlay.tealfire.de/#/generate)
24 | 2. Follow the instructions on the website
25 | 3. Accept overlay inside TeamSpeak5/6 
26 |    ![image](https://github.com/DerTyp7/teamspeak-overlay.tealfire.de/assets/76851529/aa83b07d-3dea-461f-9487-f9e6a299f2f3)
27 | 
28 | ### Detailed instructions
29 | 
30 | Try this instruction if you have problems with the quick instructions above.
31 | 
32 | 1. Open this link in your Browser: [https://teamspeak-overlay.tealfire.de/#/generate](https://teamspeak-overlay.tealfire.de/#/generate)
33 | 
34 | 2. Follow the instructions on the website
35 | 
36 | 3. Go into the TeamSpeak5 Settings and enable "Remote Apps"  
37 |    ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/b31bc553-fde2-46ab-b07c-d3c81339cc7d)
38 | 
39 | 4. Add a new Browser Source to your OBS Scene  
40 |    ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/0198b468-bb96-4b65-bdd4-3d6bb3ef7d25)  
41 |    ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/58ad399f-5344-456f-b243-6e267b489fd5)
42 | 
43 | 5. Enter the in step 1 generated URL into the URL field of the Browser Source
44 |    ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/e8fd4a1b-be70-4123-8d28-4dc7ebc8c2bd)
45 | 
46 | 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)
47 | 
48 | 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)  
49 |    ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/40faa435-e128-415f-98eb-a9e8809e8f65)
50 | 
51 | ## Common Issues
52 | 
53 | ### The overlay is empty, but i'm connected to a TeamSpeak5 server
54 | 
55 | **Fix 1**  
56 | Make sure you accepted the notification in your TeamSpeak Client.
57 | 
58 | **Fix 2**  
59 | Sadly TeamSpeak5/6 does not give us any information about the current active server tab.  
60 | 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.
61 | 
62 | However this workaround is not 100% accurate and can fail in some cases.
63 | 
64 | Possible fixes:
65 | 
66 | - Unmute and mute yourself in the active server tab (Just a normal unmute and mute, not the hardware mute)
67 | - Reconnect to the TS5/6 server while the overlay is open
68 | 
69 | ### OBS doesn't show the latest version of the overlay
70 | 
71 | This can happen if the OBS Browser Source is caching the overlay.  
72 | To fix this, open the Browser Source settings and click on "Refresh cache of current page".
73 | 
74 | ## Setup (Developer)
75 | 
76 | 1. Clone this repository
77 | 2. Run `npm install`
78 | 3. To start the development server run `npm run dev`
79 | 
80 | > **Note:** Pull requests are welcome, but please be consistent with the code style.  
81 | > This project uses [Prettier](https://prettier.io/) to format the code.  
82 | > Pull requests always in the `dev` branch.
83 | 


--------------------------------------------------------------------------------
/src/Generator.tsx:
--------------------------------------------------------------------------------
  1 | import { ChangeEvent, useRef, useState, useEffect } from "react";
  2 | import "@styles/Generator.scss";
  3 | import Viewer from "./Viewer";
  4 | 
  5 | export default function Generator() {
  6 |   // State variables
  7 |   const [outputUrl, setOutputUrl] = useState(() => new URL(window.location.href).toString());
  8 |   const copiedTooltipRef = useRef<HTMLDivElement>(null);
  9 | 
 10 |   const [remoteAppPort, setRemoteAppPort] = useState(5899);
 11 |   const [showChannelName, setShowChannelName] = useState(true);
 12 |   const [hideNonTalking, setHideNonTalking] = useState(false);
 13 |   const [clientLimit, setClientLimit] = useState(0);
 14 | 
 15 |   // Effect to generate URL when dependencies change
 16 |   useEffect(() => {
 17 |     generateUrl();
 18 |   }, [remoteAppPort, showChannelName, hideNonTalking, clientLimit]);
 19 | 
 20 |   // Function to generate the output URL
 21 |   function generateUrl() {
 22 |     const url = new URL(window.location.href);
 23 |     url.hash = "";
 24 | 
 25 |     url.searchParams.set("remoteAppPort", remoteAppPort.toString());
 26 |     url.searchParams.set("showChannelName", showChannelName.toString());
 27 |     url.searchParams.set("hideNonTalking", hideNonTalking.toString());
 28 |     url.searchParams.set("clientLimit", clientLimit.toString());
 29 | 
 30 |     // url.hash function always sets the hash to the end of the URL, so we have to replace the question mark with a hash
 31 |     // gh-pages needs the hash to be between the base URL and the search params
 32 |     setOutputUrl(url.toString().replace("?", "#/?"));
 33 |   }
 34 | 
 35 |   // Function to copy URL to clipboard
 36 |   function copy() {
 37 |     navigator.clipboard.writeText(outputUrl);
 38 | 
 39 |     if (copiedTooltipRef.current) {
 40 |       copiedTooltipRef.current.style.animation = "tooltipAnimation 200ms";
 41 |       copiedTooltipRef.current.style.opacity = "1";
 42 | 
 43 |       setTimeout(() => {
 44 |         if (copiedTooltipRef.current) {
 45 |           copiedTooltipRef.current.style.opacity = "0";
 46 |           copiedTooltipRef.current.style.animation = "";
 47 |         }
 48 |       }, 1000);
 49 |     }
 50 |   }
 51 | 
 52 |   return (
 53 |     <div className="generator">
 54 |       {/* Header */}
 55 |       <div className="headline">
 56 |         <h1>TeamSpeak-OBS-Overlay Generator</h1>
 57 |         <h4>by DerTyp7</h4>
 58 |       </div>
 59 | 
 60 |       {/* Instructions */}
 61 |       <div className="instructions">
 62 |         <p>1. Customize your settings</p>
 63 |         <p>2. Copy the generated URL</p>
 64 |         <p>3. Paste the URL into the BrowserSource URL field in OBS</p>
 65 |         <a href="https://github.com/DerTyp7/ts5-obs-overlay#detailed-instructions">Click here for detailed instructions</a>
 66 |       </div>
 67 | 
 68 |       {/* Output Section */}
 69 |       <div className="output">
 70 |         <p className="url">
 71 |           <code>{outputUrl}</code>
 72 |         </p>
 73 |         <button onClick={copy} className="copy">
 74 |           Copy
 75 |         </button>
 76 |         <div ref={copiedTooltipRef} className="copiedTooltip">
 77 |           Copied!
 78 |         </div>
 79 |       </div>
 80 | 
 81 |       {/* Generator Content */}
 82 |       <div className="generatorContent">
 83 |         {/* Configurations */}
 84 |         <div className="configurations">
 85 |           <h2>Configurations</h2>
 86 | 
 87 |           <div className="options">
 88 |             {/* Option Sections */}
 89 |             <section>
 90 |               {/* Show Channel Name Option */}
 91 |               <div className="option" onClick={() => setShowChannelName(!showChannelName)}>
 92 |                 <input type="checkbox" checked={showChannelName} />
 93 |                 <label>Show channel name</label>
 94 |               </div>
 95 | 
 96 |               {/* Hide Non-Talking Clients Option */}
 97 |               <div className="option" onClick={() => setHideNonTalking(!hideNonTalking)}>
 98 |                 <input type="checkbox" checked={hideNonTalking} />
 99 |                 <label>Hide non talking clients</label>
100 |               </div>
101 |             </section>
102 | 
103 |             <section>
104 |               {/* Client Limit Option */}
105 |               <div className="option">
106 |                 <input type="number" value={clientLimit} min={0} onChange={(e: ChangeEvent<HTMLInputElement>) => setClientLimit(parseInt(e.target.value))} />
107 |                 <label>Client Limit</label>
108 |               </div>
109 | 
110 |               {/* RemoteApp-Port Option */}
111 |               <div className="option">
112 |                 <input type="number" value={remoteAppPort} min={0} onChange={(e: ChangeEvent<HTMLInputElement>) => setRemoteAppPort(parseInt(e.target.value))} />
113 |                 <label>RemoteApp-Port</label>
114 |               </div>
115 |             </section>
116 |           </div>
117 |         </div>
118 | 
119 |         {/* Preview */}
120 |         <div className="preview">
121 |           <Viewer remoteAppPort={remoteAppPort} showChannelName={showChannelName} hideNonTalking={hideNonTalking} clientLimit={clientLimit} />
122 |         </div>
123 |       </div>
124 |     </div>
125 |   );
126 | }
127 | 


--------------------------------------------------------------------------------
/src/styles/Generator.scss:
--------------------------------------------------------------------------------
  1 | // Breakpoints
  2 | $breakpoint-1: 1200px;
  3 | $breakpoint-2: 790px;
  4 | $breakpoint-3: 600px;
  5 | 
  6 | // Tooltip animation keyframes
  7 | @keyframes tooltipAnimation {
  8 |   0% {
  9 |     opacity: 0;
 10 |     transform: translateY(-10px);
 11 |   }
 12 |   100% {
 13 |     opacity: 1;
 14 |     transform: translateY(0);
 15 |   }
 16 | }
 17 | 
 18 | .generator {
 19 |   background-color: #232528;
 20 |   color: #fff;
 21 |   width: 100%;
 22 |   display: flex;
 23 |   height: 100%;
 24 |   flex-direction: column;
 25 |   align-items: center;
 26 |   gap: 50px;
 27 |   padding: 50px 0;
 28 | 
 29 |   .headline {
 30 |     text-align: center;
 31 |     letter-spacing: 1.8px;
 32 |   }
 33 | 
 34 |   .instructions {
 35 |     border-bottom: 2px solid #75797773;
 36 |     display: flex;
 37 |     flex-direction: row;
 38 |     align-items: center;
 39 |     justify-content: center;
 40 |     gap: 10px 50px;
 41 |     flex-wrap: wrap;
 42 |     padding-bottom: 10px;
 43 | 
 44 |     p,
 45 |     a {
 46 |       font-size: 0.8rem;
 47 |     }
 48 | 
 49 |     p {
 50 |       color: #b4b4b4;
 51 |     }
 52 |   }
 53 | 
 54 |   .output {
 55 |     display: flex;
 56 |     flex-direction: row;
 57 |     align-items: center;
 58 |     justify-content: center;
 59 |     column-gap: 20px;
 60 |     position: relative;
 61 |     height: 50px;
 62 | 
 63 |     .url {
 64 |       white-space: nowrap;
 65 |       overflow: auto;
 66 |       font-weight: bold;
 67 |       width: 500px;
 68 |       padding: 5px 10px;
 69 |       background-color: #313136;
 70 |       border-radius: 5px;
 71 |       text-align: center;
 72 |     }
 73 | 
 74 |     .copy {
 75 |       padding: 5px 10px;
 76 |       border: 2px solid #31f39973;
 77 |       transition: all 100ms ease-in-out;
 78 | 
 79 |       &:hover {
 80 |         border-color: #42d486;
 81 |         background-color: transparent;
 82 |         color: #fff;
 83 |       }
 84 |     }
 85 | 
 86 |     .copiedTooltip {
 87 |       opacity: 0;
 88 |       position: absolute;
 89 |       right: -90px;
 90 |       background-color: #31f399;
 91 |       color: #202024;
 92 |       padding: 5px 10px;
 93 |       border-radius: 5px;
 94 |       font-size: 0.8rem;
 95 |       font-weight: bold;
 96 |     }
 97 |   }
 98 | 
 99 |   .generatorContent {
100 |     display: flex;
101 |     flex-direction: row;
102 |     align-items: center;
103 |     justify-content: center;
104 |     padding: 0 50px;
105 |     gap: 30px;
106 |     width: 100%;
107 | 
108 |     .configurations {
109 |       display: flex;
110 |       flex-direction: column;
111 |       align-items: center;
112 |       height: 100%;
113 |       flex: 1;
114 |       gap: 50px;
115 | 
116 |       .options {
117 |         display: flex;
118 |         flex-direction: row;
119 |         align-items: center;
120 |         gap: 100px;
121 |         user-select: none;
122 | 
123 |         section {
124 |           display: flex;
125 |           flex-direction: column;
126 |           align-items: center;
127 |           justify-content: left;
128 |           gap: 10px;
129 |         }
130 | 
131 |         .option {
132 |           display: flex;
133 |           flex-direction: row;
134 |           align-items: center;
135 |           justify-content: left;
136 |           column-gap: 10px;
137 |           width: 100%;
138 | 
139 |           input {
140 |             -webkit-appearance: none;
141 |             -moz-appearance: none;
142 |             appearance: none;
143 |             width: 20px;
144 |             height: 20px;
145 |             border: 2px solid #31f399;
146 |             border-radius: 5px;
147 |             background-color: #202024;
148 |             outline: none;
149 |             transition: all 200ms ease-in-out;
150 |             position: relative;
151 |             color: #fff;
152 |             text-align: center;
153 | 
154 |             &::-webkit-outer-spin-button,
155 |             &::-webkit-inner-spin-button {
156 |               -webkit-appearance: none;
157 |               margin: 0;
158 |             }
159 | 
160 |             // Cross when checked styles
161 |             &:checked {
162 |               &:after {
163 |                 content: "";
164 |                 position: absolute;
165 |                 width: 10px;
166 |                 height: 2px;
167 |                 background-color: #31f399;
168 |                 transform: rotate(45deg);
169 |               }
170 |               &:before {
171 |                 content: "";
172 |                 position: absolute;
173 |                 width: 10px;
174 |                 height: 2px;
175 |                 background-color: #31f399;
176 |                 transform: rotate(-45deg);
177 |               }
178 | 
179 |               &:after,
180 |               &:before {
181 |                 top: 7px;
182 |                 left: 3px;
183 |               }
184 |             }
185 |             cursor: pointer;
186 |           }
187 | 
188 |           input[type="number"] {
189 |             width: 50px;
190 |             height: 25px;
191 |             cursor: text;
192 |             -moz-appearance: textfield;
193 |             appearance: textfield;
194 |           }
195 | 
196 |           label {
197 |             cursor: pointer;
198 |           }
199 |         }
200 |       }
201 |     }
202 | 
203 |     // Preview styles
204 |     .preview {
205 |       flex: 1;
206 |       border: 2px solid #31f39973;
207 | 
208 |       // Viewer styles (see src/styles/Viewer.scss)
209 |       .viewer {
210 |         background-image: url("/images/viewer_example_background.png");
211 |         background-repeat: no-repeat;
212 |         background-size: cover;
213 |         min-height: 500px;
214 |         h1 {
215 |           font-size: 2rem;
216 |         }
217 |         .client {
218 |           svg {
219 |             width: 2rem;
220 |           }
221 | 
222 |           p {
223 |             font-size: 2rem;
224 |           }
225 |         }
226 |       }
227 |     }
228 |   }
229 | 
230 |   // Responsive styles
231 |   @media screen and (max-width: $breakpoint-1) {
232 |     .generatorContent {
233 |       flex-direction: column;
234 | 
235 |       .preview {
236 |         width: 80%;
237 |       }
238 |     }
239 |   }
240 | 
241 |   @media screen and (max-width: $breakpoint-2) {
242 |     .output {
243 |       .url {
244 |         width: 300px;
245 |       }
246 |     }
247 | 
248 |     .generatorContent {
249 |       .preview {
250 |         width: 100%;
251 |       }
252 |     }
253 |   }
254 | 
255 |   @media screen and (max-width: $breakpoint-3) {
256 |     .output {
257 |       .url {
258 |         width: 200px;
259 |       }
260 | 
261 |       .generatorContent {
262 |         .configurations {
263 |           .options {
264 |             flex-direction: column;
265 |             gap: 30px;
266 |           }
267 |         }
268 |       }
269 |     }
270 |   }
271 | }
272 | 


--------------------------------------------------------------------------------
/src/Viewer.tsx:
--------------------------------------------------------------------------------
  1 | import "@styles/Viewer.scss";
  2 | import useTSRemoteApp, { IClient } from "react-teamspeak-remote-app-api";
  3 | 
  4 | export default function Viewer({
  5 |   remoteAppPort = 5899,
  6 |   showChannelName = false,
  7 |   hideNonTalking = false,
  8 |   clientLimit = 0,
  9 | }: {
 10 |   remoteAppPort?: number;
 11 |   showChannelName?: boolean;
 12 |   hideNonTalking?: boolean;
 13 |   clientLimit?: number;
 14 | }) {
 15 |   const { clients, activeConnectionId, currentChannel } = useTSRemoteApp({
 16 |     remoteAppPort: remoteAppPort,
 17 |     auth: {
 18 |       identifier: "de.tealfire.obs",
 19 |       version: "2.2.0",
 20 |       name: "TeamSpeak OBS Overlay",
 21 |       description: "A OBS overlay for TeamSpeak by DerTyp7",
 22 |     },
 23 |     logging: true,
 24 |   });
 25 | 
 26 |   const currentClients = clients.map((client) => {
 27 |     if (client.channel?.id === currentChannel?.id && client.channel.connection.id === activeConnectionId) {
 28 |       return client;
 29 |     }
 30 |   }) as IClient[];
 31 | 
 32 |   return (
 33 |     <div className="viewer">
 34 |       {showChannelName && currentChannel ? (
 35 |         <div className="channelNameContainer">
 36 |           <h1>{currentChannel?.properties.name}</h1>
 37 |         </div>
 38 |       ) : null}
 39 |       {currentClients?.map((client, i) => {
 40 |         //* Client limit
 41 |         if (clientLimit != 0 && i >= clientLimit) {
 42 |           return null;
 43 |         }
 44 | 
 45 |         if (client) {
 46 |           //* Non-talking client
 47 |           if (hideNonTalking && (client.properties.inputMuted || client.properties.outputMuted || client.talkStatus == 0)) {
 48 |             return null;
 49 |           }
 50 | 
 51 |           //* Normal client
 52 |           return (
 53 |             <div className="client" key={`${client.id}-${client.channel?.connection.id}`}>
 54 |               {client.properties.outputHardware == false ? (
 55 |                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
 56 |                   <title>muted_hardware_output</title>
 57 |                   <g id="muted_hardware_output.svg">
 58 |                     <path
 59 |                       d="M116.62,39a4.78,4.78,0,0,1-1.59.3l-6.29,3.63a45.42,45.42,0,0,1-13.33,57.64,49.4,49.4,0,0,1-5.82,3.62c-1.06.57-2.2.92-3.19,1.49-1.7,1-2.77,2.13-2.77,4.18a4.57,4.57,0,0,0,4.54,4.54,5.33,5.33,0,0,0,1.84-.35,54.49,54.49,0,0,0,26.94-75c-.12,0-.22,0-.34,0M88.18,13.58a4.57,4.57,0,0,0-4.54,4.54c0,2.06,1.06,3.19,2.77,4.18,1,.57,2.13.92,3.19,1.49a49.4,49.4,0,0,1,5.82,3.62,45.68,45.68,0,0,1,8.19,7.78l7-4a2.63,2.63,0,0,1,1.11-.34A54.31,54.31,0,0,0,90,13.94a5.33,5.33,0,0,0-1.84-.35"
 60 |                       fill="#d8d8d8"
 61 |                     />
 62 |                     <path
 63 |                       d="M59.46,71.4,32.77,86.81l19,19a4.51,4.51,0,0,0,3.19,1.35,4.57,4.57,0,0,0,4.54-4.54V71.4M54.92,20.88a4.51,4.51,0,0,0-3.19,1.35L28.12,45.85H9.54A4.57,4.57,0,0,0,5,50.38V77.62a4.57,4.57,0,0,0,4.54,4.54H22.26l37.2-21.48V25.42a4.57,4.57,0,0,0-4.54-4.54"
 64 |                       fill="#d8d8d8"
 65 |                     />
 66 |                     <path
 67 |                       d="M85.11,56.6l-7.87,4.54A10,10,0,0,1,77.62,64c0,8.58-8.23,7.09-8.23,12.48A4.53,4.53,0,0,0,73.93,81a4,4,0,0,0,1.77-.35A18.13,18.13,0,0,0,86.69,64a18.34,18.34,0,0,0-1.59-7.4M73.93,47a4.52,4.52,0,0,0-4.54,4.54,3.92,3.92,0,0,0,1.08,2.8l8.76-5.06a16.14,16.14,0,0,0-3.52-1.93A4,4,0,0,0,73.93,47"
 68 |                       fill="#d8d8d8"
 69 |                     />
 70 |                     <path
 71 |                       d="M100.87,47.49,93,52a27.15,27.15,0,0,1-8.36,33.87A36.79,36.79,0,0,1,79.25,89a4.54,4.54,0,0,0,1.84,8.72,5.24,5.24,0,0,0,1.77-.35,36.34,36.34,0,0,0,18-49.91M81,30.25A4.54,4.54,0,0,0,79.25,39a36.82,36.82,0,0,1,5.39,3.12,27,27,0,0,1,2.86,2.4l8.14-4.7A35.37,35.37,0,0,0,82.86,30.6,5.31,5.31,0,0,0,81,30.25"
 72 |                       fill="#d8d8d8"
 73 |                     />
 74 |                     <path
 75 |                       d="M126.57,43.71,10.42,110.77a2.88,2.88,0,0,1-3.93-1.05L4.33,106A2.88,2.88,0,0,1,5.38,102L121.53,35A2.88,2.88,0,0,1,125.46,36l2.16,3.75A2.88,2.88,0,0,1,126.57,43.71Z"
 76 |                       fill="#c9070a"
 77 |                     />
 78 |                   </g>
 79 |                 </svg>
 80 |               ) : client.properties.inputHardware == false ? (
 81 |                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
 82 |                   <title>muted_hardware_input</title>
 83 |                   <g id="muted_hardware_input.svg">
 84 |                     <path
 85 |                       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"
 86 |                       fill="#d8d8d8"
 87 |                     />
 88 |                     <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" />
 89 |                   </g>
 90 |                 </svg>
 91 |               ) : client.properties.outputMuted ? (
 92 |                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
 93 |                   <title>muted_output</title>
 94 |                   <g id="muted_output">
 95 |                     <path
 96 |                       d="M116.62,39a4.78,4.78,0,0,1-1.59.3l-6.29,3.63a45.42,45.42,0,0,1-13.33,57.64,49.4,49.4,0,0,1-5.82,3.62c-1.06.57-2.2.92-3.19,1.49-1.7,1-2.77,2.13-2.77,4.18a4.57,4.57,0,0,0,4.54,4.54,5.33,5.33,0,0,0,1.84-.35,54.49,54.49,0,0,0,26.94-75c-.12,0-.22,0-.34,0M88.18,13.58a4.57,4.57,0,0,0-4.54,4.54c0,2.06,1.06,3.19,2.77,4.18,1,.57,2.13.92,3.19,1.49a49.4,49.4,0,0,1,5.82,3.62,45.68,45.68,0,0,1,8.19,7.78l7-4a2.63,2.63,0,0,1,1.11-.34A54.31,54.31,0,0,0,90,13.94a5.33,5.33,0,0,0-1.84-.35"
 97 |                       fill="#c9070a"
 98 |                     />
 99 |                     <path
100 |                       d="M59.46,71.4,32.77,86.81l19,19a4.51,4.51,0,0,0,3.19,1.35,4.57,4.57,0,0,0,4.54-4.54V71.4M54.92,20.88a4.51,4.51,0,0,0-3.19,1.35L28.11,45.85H9.53A4.57,4.57,0,0,0,5,50.38V77.62a4.57,4.57,0,0,0,4.54,4.54H22.25l37.2-21.48V25.42a4.57,4.57,0,0,0-4.54-4.54"
101 |                       fill="#c9070a"
102 |                     />
103 |                     <path
104 |                       d="M85.1,56.6l-7.87,4.54A10,10,0,0,1,77.61,64c0,8.58-8.23,7.09-8.23,12.48A4.53,4.53,0,0,0,73.92,81a4,4,0,0,0,1.77-.35A18.13,18.13,0,0,0,86.69,64a18.34,18.34,0,0,0-1.59-7.4M73.92,47a4.52,4.52,0,0,0-4.54,4.54,3.92,3.92,0,0,0,1.08,2.8l8.76-5.06a16.14,16.14,0,0,0-3.52-1.93A4,4,0,0,0,73.92,47"
105 |                       fill="#c9070a"
106 |                     />
107 |                     <path
108 |                       d="M100.87,47.49,93,52a27.15,27.15,0,0,1-8.36,33.87A36.79,36.79,0,0,1,79.24,89a4.54,4.54,0,0,0,1.84,8.72,5.24,5.24,0,0,0,1.77-.35,36.34,36.34,0,0,0,18-49.91M81,30.25A4.54,4.54,0,0,0,79.24,39a36.82,36.82,0,0,1,5.39,3.12,27,27,0,0,1,2.86,2.4l8.14-4.7A35.37,35.37,0,0,0,82.86,30.6,5.31,5.31,0,0,0,81,30.25"
109 |                       fill="#c9070a"
110 |                     />
111 |                     <path
112 |                       d="M126.57,43.71,10.42,110.77a2.88,2.88,0,0,1-3.93-1.05L4.33,106A2.88,2.88,0,0,1,5.38,102L121.53,35A2.88,2.88,0,0,1,125.46,36l2.16,3.75A2.88,2.88,0,0,1,126.57,43.71Z"
113 |                       fill="#c9070a"
114 |                     />
115 |                   </g>
116 |                 </svg>
117 |               ) : client.properties.inputMuted ? (
118 |                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
119 |                   <title>muted_input</title>
120 |                   <g id="muted_input.svg">
121 |                     <path
122 |                       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"
123 |                       fill="#c9070a"
124 |                     />
125 |                   </g>
126 |                 </svg>
127 |               ) : client.talkStatus == 1 ? (
128 |                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
129 |                   <title>player_on_v2</title>
130 |                   <g id="player_on_v2.svg">
131 |                     <path d="M64,128a64,64,0,1,1,64-64A64,64,0,0,1,64,128Z" fill="#00b4df" />
132 |                   </g>
133 |                 </svg>
134 |               ) : (
135 |                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
136 |                   <title>player_off_v2</title>
137 |                   <g id="player_off_v2.svg">
138 |                     <path d="M64,128a64,64,0,1,1,64-64A64,64,0,0,1,64,128Z" fill="#3e4f5e" />
139 |                   </g>
140 |                 </svg>
141 |               )}
142 |               <p>{client.properties.nickname}</p>
143 |             </div>
144 |           );
145 |         } else {
146 |           return <div key={Math.random()}></div>;
147 |         }
148 |       })}
149 |       {currentChannel == null ? (
150 |         <>
151 |           <h4>Overlay couldn't connect to the client:</h4>
152 |           <br />
153 |           <br />
154 |           <h5>1. Make sure to accept the overlay in your TeamSpeak-Client via the notifications</h5>
155 |           <br />
156 |           <h5>2. Enable remote apps inside the the TeamSpeak-Settings</h5>
157 |           <br />
158 |           <h5>3. Make sure to match the configuration port with the port in the TeamSpeak remote app settings</h5>
159 |           <br />
160 |           <h5>4. Refresh this page/BrowserSource (Select BrowserSource & click "Refresh" in OBS)</h5>
161 |           <br />
162 |           <h6>If non of this worked refer to the GitHub and write an issue with your problem</h6>
163 |         </>
164 |       ) : (
165 |         ""
166 |       )}
167 |     </div>
168 |   );
169 | }
170 | 


--------------------------------------------------------------------------------