Compare commits

..

24 Commits
v2.1.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
10 changed files with 1855 additions and 1163 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)

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>

2868
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.1.1", "version": "2.2.0",
"description": "Overlay for OBS to show the current talking clients in your TeamSpeak 5 Channel", "description": "Overlay for OBS to show the current talking clients in your TeamSpeak Channel",
"author": "DerTyp7", "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.5.0", "@vitejs/plugin-react-swc": "^3.7.2",
"eslint": "^8.56.0", "eslint": "^9.18.0",
"eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-react-refresh": "^0.4.3", "eslint-plugin-react-refresh": "^0.4.18",
"typescript": "^5.2.2", "typescript": "^5.7.3",
"vite": "^4.5.2" "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.1.1", version: "2.2.0",
name: "TS5 OBS Overlay", name: "TeamSpeak OBS Overlay",
description: "A OBS overlay for TS5 by DerTyp7", description: "A OBS overlay for TeamSpeak by DerTyp7",
}, },
logging: true, logging: true,
}); });
@@ -30,7 +32,7 @@ export default function Viewer({
}) as IClient[]; }) as IClient[];
return ( return (
<div className="viewer"> <div className={`viewer ${alignRight ? "viewer--align-right" : ""}`}>
{showChannelName && currentChannel ? ( {showChannelName && currentChannel ? (
<div className="channelNameContainer"> <div className="channelNameContainer">
<h1>{currentChannel?.properties.name}</h1> <h1>{currentChannel?.properties.name}</h1>
@@ -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 ? (
@@ -151,11 +168,11 @@ export default function Viewer({
<h4>Overlay couldn't connect to the client:</h4> <h4>Overlay couldn't connect to the client:</h4>
<br /> <br />
<br /> <br />
<h5>1. Make sure to accept the overlay in your TS5-Client via the notifications</h5> <h5>1. Make sure to accept the overlay in your TeamSpeak-Client via the notifications</h5>
<br /> <br />
<h5>2. Enable remote apps inside the the TS5-Settings</h5> <h5>2. Enable remote apps inside the the TeamSpeak-Settings</h5>
<br /> <br />
<h5>3. Make sure to match the configuration port with the port in the TS5 remote app settings</h5> <h5>3. Make sure to match the configuration port with the port in the TeamSpeak remote app settings</h5>
<br /> <br />
<h5>4. Refresh this page/BrowserSource (Select BrowserSource & click "Refresh" in OBS)</h5> <h5>4. Refresh this page/BrowserSource (Select BrowserSource & click "Refresh" in OBS)</h5>
<br /> <br />

View File

@@ -1,4 +1,3 @@
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";

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 {