mirror of
https://github.com/DerTyp7/teamspeak-obs-overlay.git
synced 2026-07-31 08:39:04 +02:00
Compare commits
57 Commits
v2.0.5
...
feature_al
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
6d95ec8f4c | ||
|
|
9de39752f3 | ||
|
|
2499582f66 | ||
|
|
ad26dd62ad | ||
|
|
0a026baa9b | ||
|
|
a2b8f3620a | ||
|
|
06b940b7c9 | ||
|
|
c75d81eb43 | ||
|
|
529d1acbb6 | ||
|
|
e7e295cad1 | ||
|
|
10e8752bca | ||
|
|
6eb5785bfd | ||
|
|
6c912c37e4 | ||
|
|
d37c7326c3 | ||
|
|
4c1a6f92b9 | ||
|
|
1f3868fc3a | ||
|
|
632b2ad1ef | ||
|
|
9519a19b5c | ||
|
|
a438f81c72 | ||
|
|
6b3d44796f | ||
|
|
c272df6397 | ||
|
|
1eae9e0017 | ||
|
|
94c5a822fe | ||
|
|
509ca975bd | ||
|
|
43f3c4f4ac | ||
|
|
171a64da44 | ||
|
|
01aaf66e55 | ||
|
|
0e456bee91 | ||
|
|
6bc2994a91 | ||
|
|
716d306a87 | ||
|
|
cf0f472c70 | ||
|
|
3159a86e8f | ||
|
|
71fb6c565e | ||
|
|
254d29fe6d | ||
|
|
13f621f17b | ||
|
|
337c39935c | ||
|
|
d3cc20d58b | ||
|
|
cf5c0ae705 | ||
|
|
69db8c5bcc | ||
|
|
fd2863b355 | ||
|
|
8ffbe023eb | ||
|
|
a9edeec900 | ||
|
|
3e5ec1862e | ||
|
|
34ffedc294 | ||
|
|
6d7ee8905b | ||
|
|
442e8f05e6 | ||
|
|
f30cd26393 | ||
|
|
f0761c40b7 | ||
|
|
ef442f10e0 | ||
|
|
ce7bd90362 | ||
|
|
61f6651a57 | ||
|
|
1d9b6de814 | ||
|
|
751fad72f4 | ||
|
|
4eb61d3b96 | ||
|
|
7fd2e2aafa | ||
|
|
33786d7366 | ||
|
|
1a5b231d1e |
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"tabWidth": 2,
|
"tabWidth": 2,
|
||||||
"useTabs": false,
|
"useTabs": false,
|
||||||
"printWidth": 180,
|
"printWidth": 120,
|
||||||
"singleQuote": false,
|
"singleQuote": false,
|
||||||
"semi": true
|
"semi": true
|
||||||
}
|
}
|
||||||
|
|||||||
12
README.md
12
README.md
@@ -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).
|
||||||
|
|
||||||

|

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

|

|
||||||
|
|
||||||
### 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.
|
|||||||

|

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

|

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

|

|
||||||
|
|||||||
@@ -3,10 +3,13 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta name="description" content="An OBS overlay for TeamSpeak5, so your audience can see who is talking. https://github.com/DerTyp7/ts5-obs-overlay" />
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="An OBS overlay for TeamSpeak5/6, so your audience can see who is talking. https://github.com/DerTyp7/teamspeak-obs-overlay"
|
||||||
|
/>
|
||||||
<meta name="author" content="DerTyp7" />
|
<meta name="author" content="DerTyp7" />
|
||||||
<link rel="icon" href="/logo.svg" type="image/x-icon" />
|
<link rel="icon" href="/logo.svg" type="image/x-icon" />
|
||||||
<title>TS5-OBS-Overlay</title>
|
<title>TeamSpeak-OBS-Overlay</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
2864
package-lock.json
generated
2864
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
49
package.json
49
package.json
@@ -1,17 +1,20 @@
|
|||||||
{
|
{
|
||||||
"name": "ts5-obs-overlay",
|
"name": "teamspeak-obs-overlay",
|
||||||
"private": false,
|
"private": false,
|
||||||
"version": "2.0.5",
|
"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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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"}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -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,8 +27,11 @@ 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());
|
||||||
|
|
||||||
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
|
||||||
@@ -51,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>
|
||||||
|
|
||||||
@@ -60,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 */}
|
||||||
@@ -96,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>
|
||||||
@@ -116,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>
|
||||||
|
|||||||
@@ -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.5",
|
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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user