mirror of
https://github.com/DerTyp7/teamspeak-obs-overlay.git
synced 2026-07-31 16:49:04 +02:00
Compare commits
45 Commits
v2.0.9
...
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 |
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
"printWidth": 180,
|
||||
"printWidth": 120,
|
||||
"singleQuote": false,
|
||||
"semi": true
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
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 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,7 +20,7 @@ This overlay uses the [TeamSpeak5 Remote App API](https://github.com/DerTyp7/rea
|
||||
|
||||
### 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
|
||||
3. Accept overlay inside TeamSpeak5
|
||||
|
||||
@@ -29,7 +29,7 @@ This overlay uses the [TeamSpeak5 Remote App API](https://github.com/DerTyp7/rea
|
||||
|
||||
Try this instruction if you have problems with the quick instructions above.
|
||||
|
||||
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
|
||||
|
||||
|
||||
@@ -3,10 +3,13 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<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" />
|
||||
<link rel="icon" href="/logo.svg" type="image/x-icon" />
|
||||
<title>TS5-OBS-Overlay</title>
|
||||
<title>TeamSpeak-OBS-Overlay</title>
|
||||
</head>
|
||||
<body>
|
||||
<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,
|
||||
"version": "2.0.9",
|
||||
"description": "Overlay for OBS to show the current talking clients in your TeamSpeak 5 Channel",
|
||||
"version": "2.2.0",
|
||||
"description": "Overlay for OBS to show the current talking clients in your TeamSpeak Channel",
|
||||
"author": "DerTyp7",
|
||||
"homepage": "https://dertyp7.github.io/ts5-obs-overlay/#",
|
||||
"homepage": "https://dertyp7.github.io/teamspeak-obs-overlay/#",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/DerTyp7/ts5-obs-overlay"
|
||||
"url": "https://github.com/DerTyp7/teamspeak-obs-overlay"
|
||||
},
|
||||
"keywords": [
|
||||
"ts5",
|
||||
"ts6",
|
||||
"teamspeak6",
|
||||
"teamspeak",
|
||||
"teamspeak5",
|
||||
"overlay",
|
||||
"remote app",
|
||||
"obs",
|
||||
@@ -20,7 +23,7 @@
|
||||
"vite"
|
||||
],
|
||||
"bugs": {
|
||||
"url": "https://github.com/DerTyp7/ts5-obs-overlay/issues"
|
||||
"url": "https://github.com/DerTyp7/teamspeak-obs-overlay/issues"
|
||||
},
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
@@ -30,24 +33,24 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/node": "^20.8.3",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.18.0",
|
||||
"react-ts5-remote-app-api": "^1.1.1",
|
||||
"sass": "^1.68.0"
|
||||
"@types/node": "^22.10.10",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-router-dom": "^7.1.3",
|
||||
"react-teamspeak-remote-app-api": "^2.0.0",
|
||||
"sass": "^1.83.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/jest": "^29.5.2",
|
||||
"@types/react": "^18.2.35",
|
||||
"@types/react-dom": "^18.2.14",
|
||||
"@typescript-eslint/eslint-plugin": "^6.7.4",
|
||||
"@typescript-eslint/parser": "^6.9.1",
|
||||
"@vitejs/plugin-react-swc": "^3.0.0",
|
||||
"eslint": "^8.53.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.3",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^4.5.0"
|
||||
"@types/jest": "^29.5.14",
|
||||
"@types/react": "^19.0.8",
|
||||
"@types/react-dom": "^19.0.3",
|
||||
"@typescript-eslint/eslint-plugin": "^8.21.0",
|
||||
"@typescript-eslint/parser": "^8.21.0",
|
||||
"@vitejs/plugin-react-swc": "^3.7.2",
|
||||
"eslint": "^9.18.0",
|
||||
"eslint-plugin-react-hooks": "^5.1.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.18",
|
||||
"typescript": "^5.7.3",
|
||||
"vite": "^6.0.11"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
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 Generator from "./Generator";
|
||||
|
||||
@@ -17,6 +17,7 @@ export default function App() {
|
||||
showChannelName={searchParams.get("showChannelName") === "true"}
|
||||
hideNonTalking={searchParams.get("hideNonTalking") === "true"}
|
||||
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 Viewer from "./Viewer";
|
||||
|
||||
@@ -9,13 +9,14 @@ export default function Generator() {
|
||||
|
||||
const [remoteAppPort, setRemoteAppPort] = useState(5899);
|
||||
const [showChannelName, setShowChannelName] = useState(true);
|
||||
const [alignRight, setAlignRight] = useState(false);
|
||||
const [hideNonTalking, setHideNonTalking] = useState(false);
|
||||
const [clientLimit, setClientLimit] = useState(0);
|
||||
|
||||
// Effect to generate URL when dependencies change
|
||||
useEffect(() => {
|
||||
generateUrl();
|
||||
}, [remoteAppPort, showChannelName, hideNonTalking, clientLimit]);
|
||||
}, [remoteAppPort, showChannelName, hideNonTalking, clientLimit, alignRight]);
|
||||
|
||||
// Function to generate the output URL
|
||||
function generateUrl() {
|
||||
@@ -26,6 +27,7 @@ export default function Generator() {
|
||||
url.searchParams.set("showChannelName", showChannelName.toString());
|
||||
url.searchParams.set("hideNonTalking", hideNonTalking.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
|
||||
// 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">
|
||||
{/* Header */}
|
||||
<div className="headline">
|
||||
<h1>TS5-OBS-Overlay Generator</h1>
|
||||
<h1>TeamSpeak-OBS-Overlay Generator</h1>
|
||||
<h4>by DerTyp7</h4>
|
||||
</div>
|
||||
|
||||
@@ -62,7 +64,9 @@ export default function Generator() {
|
||||
<p>1. Customize your settings</p>
|
||||
<p>2. Copy the generated URL</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>
|
||||
|
||||
{/* Output Section */}
|
||||
@@ -98,18 +102,34 @@ export default function Generator() {
|
||||
<input type="checkbox" checked={hideNonTalking} />
|
||||
<label>Hide non talking clients</label>
|
||||
</div>
|
||||
|
||||
{/* Alignment Option */}
|
||||
<div className="option" onClick={() => setAlignRight(!alignRight)}>
|
||||
<input type="checkbox" checked={alignRight} />
|
||||
<label>Align Right</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
{/* Client Limit 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>
|
||||
</div>
|
||||
|
||||
{/* RemoteApp-Port 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>
|
||||
</div>
|
||||
</section>
|
||||
@@ -118,7 +138,13 @@ export default function Generator() {
|
||||
|
||||
{/* 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>
|
||||
|
||||
@@ -1,24 +1,26 @@
|
||||
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({
|
||||
remoteAppPort = 5899,
|
||||
showChannelName = false,
|
||||
hideNonTalking = false,
|
||||
clientLimit = 0,
|
||||
alignRight = false,
|
||||
}: {
|
||||
remoteAppPort?: number;
|
||||
showChannelName?: boolean;
|
||||
hideNonTalking?: boolean;
|
||||
clientLimit?: number;
|
||||
alignRight?: boolean;
|
||||
}) {
|
||||
const { clients, activeConnectionId, currentChannel } = useTSRemoteApp({
|
||||
remoteAppPort: remoteAppPort,
|
||||
auth: {
|
||||
identifier: "de.tealfire.obs",
|
||||
version: "2.0.9",
|
||||
name: "TS5 OBS Overlay",
|
||||
description: "A OBS overlay for TS5 by DerTyp7",
|
||||
version: "2.2.0",
|
||||
name: "TeamSpeak OBS Overlay",
|
||||
description: "A OBS overlay for TeamSpeak by DerTyp7",
|
||||
},
|
||||
logging: true,
|
||||
});
|
||||
@@ -30,8 +32,8 @@ export default function Viewer({
|
||||
}) as IClient[];
|
||||
|
||||
return (
|
||||
<div className="viewer">
|
||||
{showChannelName ? (
|
||||
<div className={`viewer ${alignRight ? "viewer--align-right" : ""}`}>
|
||||
{showChannelName && currentChannel ? (
|
||||
<div className="channelNameContainer">
|
||||
<h1>{currentChannel?.properties.name}</h1>
|
||||
</div>
|
||||
@@ -44,13 +46,19 @@ export default function Viewer({
|
||||
|
||||
if (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;
|
||||
}
|
||||
|
||||
//* Normal client
|
||||
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 ? (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
|
||||
<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"
|
||||
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>
|
||||
</svg>
|
||||
) : client.properties.outputMuted ? (
|
||||
@@ -146,6 +163,24 @@ export default function Viewer({
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App.tsx";
|
||||
import "@styles/index.scss";
|
||||
import { BrowserRouter, HashRouter } from "react-router-dom";
|
||||
import { HashRouter } from "react-router-dom";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||
<HashRouter>
|
||||
|
||||
@@ -7,6 +7,10 @@
|
||||
flex-direction: column;
|
||||
padding: 0.5rem;
|
||||
|
||||
&--align-right {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 5vw;
|
||||
}
|
||||
@@ -32,9 +36,12 @@
|
||||
.client {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0 0;
|
||||
gap: 0.5rem 0.5rem;
|
||||
align-items: center;
|
||||
margin: 0.5rem 0;
|
||||
|
||||
&--align-right {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
// icon styles
|
||||
svg {
|
||||
|
||||
@@ -41,6 +41,14 @@ h4 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
// Common styles for heading elements
|
||||
h1,
|
||||
h2,
|
||||
|
||||
Reference in New Issue
Block a user