janis/teamspeak-obs-overlay
1
0
Fork 0
mirror of https://github.com/DerTyp7/teamspeak-obs-overlay.git synced 2025-10-29 12:52:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into dev

Browse Source
This commit is contained in:
dertyp7
2024-01-25 19:57:38 +01:00
parent 71fb6c565e 13f621f17b
commit cf0f472c70
12 changed files with 92 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@@ -20,16 +20,16 @@ This overlay uses the [TeamSpeak5 Remote App API](https://github.com/DerTyp7/rea
### Quick instructions ### Quick instructions
1. Open this link in your Browser: [https://dertyp7.github.io/ts5-obs-overlay/generate](https://dertyp7.github.io/ts5-obs-overlay/generate) 1. Open this link in your Browser: [https://ts5-overlay.tealfire.de/#/generate](https://ts5-overlay.tealfire.de/#/generate)
2. Follow the instructions on the website 2. Follow the instructions on the website
3. Accept overlay inside TeamSpeak5 3. Accept overlay inside TeamSpeak5
![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/40faa435-e128-415f-98eb-a9e8809e8f65) ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/aa83b07d-3dea-461f-9487-f9e6a299f2f3)
### Detailed instructions ### Detailed instructions
Try this instruction if you have problems with the quick instructions above. Try this instruction if you have problems with the quick instructions above.
1. Open this link in your Browser: [https://dertyp7.github.io/ts5-obs-overlay/generate](https://dertyp7.github.io/ts5-obs-overlay/generate) 1. Open this link in your Browser: [https://ts5-overlay.tealfire.de/#/generate](https://ts5-overlay.tealfire.de/#/generate)
2. Follow the instructions on the website 2. Follow the instructions on the website
@@ -41,9 +41,9 @@ Try this instruction if you have problems with the quick instructions above.
![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/58ad399f-5344-456f-b243-6e267b489fd5) ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/58ad399f-5344-456f-b243-6e267b489fd5)
5. Enter the in step 1 generated URL into the URL field of the Browser Source 5. Enter the in step 1 generated URL into the URL field of the Browser Source
![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/50b755f9-d4b4-469f-9136-e2b18f226547) ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/e8fd4a1b-be70-4123-8d28-4dc7ebc8c2bd)
6. Set the width and height to your desired size. Recommended is a ratio of 1:1 or 1:2 (e.g. 1500x3000 OR 1000x2000) 6. Set the width and height to your desired size. Recommended is a width of 1000px and the height is determined of how many clients are expected (play around with these values)
7. You should now receive a notification in TeamSpeak5 that the app is allowed to connect to your TeamSpeak5 client. Allow it. (If you don't get a notification, restart TeamSpeak5 and OBS -> try again) 7. You should now receive a notification in TeamSpeak5 that the app is allowed to connect to your TeamSpeak5 client. Allow it. (If you don't get a notification, restart TeamSpeak5 and OBS -> try again)
![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/40faa435-e128-415f-98eb-a9e8809e8f65) ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/40faa435-e128-415f-98eb-a9e8809e8f65)

6
index.html
View File

@@ -3,11 +3,9 @@
<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 <meta name="description" content="An OBS overlay for TeamSpeak5, so your audience can see who is talking. https://github.com/DerTyp7/ts5-obs-overlay" />
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="author" content="DerTyp7" /> <meta name="author" content="DerTyp7" />
<link rel="icon" href="/logo.svg" type="image/x-icon" />
<title>TS5-OBS-Overlay</title> <title>TS5-OBS-Overlay</title>
</head> </head>
<body> <body>

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "ts5-obs-overlay", "name": "ts5-obs-overlay",
"version": "2.0.0", "version": "2.1.0",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "ts5-obs-overlay", "name": "ts5-obs-overlay",
"version": "2.0.0", "version": "2.1.0",
"dependencies": { "dependencies": {
"@types/node": "^20.8.3", "@types/node": "^20.8.3",
"react": "^18.2.0", "react": "^18.2.0",

6
package.json
View File

@@ -1,10 +1,10 @@
{ {
"name": "ts5-obs-overlay", "name": "ts5-obs-overlay",
"private": false, "private": false,
"version": "2.0.0", "version": "2.1.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 5 Channel",
"author": "DerTyp7", "author": "DerTyp7",
"homepage": "https://dertyp7.github.io/ts5-obs-overlay", "homepage": "https://dertyp7.github.io/ts5-obs-overlay/#",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://github.com/DerTyp7/ts5-obs-overlay" "url": "https://github.com/DerTyp7/ts5-obs-overlay"

23
public/logo.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 1.3 KiB

1
src/App.tsx
View File

@@ -21,7 +21,6 @@ export default function App() {
} }
/> />
<Route path="/generate" element={<Generator />} /> <Route path="/generate" element={<Generator />} />
<Route path="*" element={<Navigate to="/generate" replace />} />
</Routes> </Routes>
); );
} }

10
src/Generator.tsx
View File

@@ -19,13 +19,17 @@ export default function Generator() {
// Function to generate the output URL // Function to generate the output URL
function generateUrl() { function generateUrl() {
const url = new URL(window.location.href.replace("/generate", "")); const url = new URL(window.location.href);
url.hash = "";
url.searchParams.set("remoteAppPort", remoteAppPort.toString()); url.searchParams.set("remoteAppPort", remoteAppPort.toString());
url.searchParams.set("showChannelName", showChannelName.toString()); url.searchParams.set("showChannelName", showChannelName.toString());
url.searchParams.set("hideNonTalking", hideNonTalking.toString()); url.searchParams.set("hideNonTalking", hideNonTalking.toString());
url.searchParams.set("clientLimit", clientLimit.toString()); url.searchParams.set("clientLimit", clientLimit.toString());
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
@@ -58,7 +62,7 @@ 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 */}

22
src/Viewer.tsx
View File

@@ -16,7 +16,7 @@ export default function Viewer({
remoteAppPort: remoteAppPort, remoteAppPort: remoteAppPort,
auth: { auth: {
identifier: "de.tealfire.obs", identifier: "de.tealfire.obs",
version: "2.0.0", version: "2.1.0",
name: "TS5 OBS Overlay", name: "TS5 OBS Overlay",
description: "A OBS overlay for TS5 by DerTyp7", description: "A OBS overlay for TS5 by DerTyp7",
}, },
@@ -31,7 +31,7 @@ export default function Viewer({
return ( return (
<div className="viewer"> <div className="viewer">
{showChannelName ? ( {showChannelName && currentChannel ? (
<div className="channelNameContainer"> <div className="channelNameContainer">
<h1>{currentChannel?.properties.name}</h1> <h1>{currentChannel?.properties.name}</h1>
</div> </div>
@@ -146,6 +146,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 TS5-Client via the notifications</h5>
<br />
<h5>2. Enable remote apps inside the the TS5-Settings</h5>
<br />
<h5>3. Make sure to match the configuration port with the port in the TS5 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>
); );
} }

6
src/main.tsx
View File

@@ -2,10 +2,10 @@ 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 } from "react-router-dom"; import { HashRouter } from "react-router-dom";
ReactDOM.createRoot(document.getElementById("root")!).render( ReactDOM.createRoot(document.getElementById("root")!).render(
<BrowserRouter> <HashRouter>
<App /> <App />
</BrowserRouter> </HashRouter>
); );

12
src/styles/Generator.scss
View File

@@ -211,6 +211,18 @@ $breakpoint-3: 600px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
min-height: 500px; min-height: 500px;
h1 {
font-size: 2rem;
}
.client {
svg {
width: 2rem;
}
p {
font-size: 2rem;
}
}
} }
} }
} }

9
src/styles/Viewer.scss
View File

@@ -7,6 +7,10 @@
flex-direction: column; flex-direction: column;
padding: 0.5rem; padding: 0.5rem;
h1 {
font-size: 5vw;
}
h1, h1,
p { p {
background-color: #2f313680; background-color: #2f313680;
@@ -34,14 +38,15 @@
// 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;
} }
} }
} }

8
src/styles/index.scss
View File

@@ -41,6 +41,14 @@ h4 {
font-size: 1.1rem; font-size: 1.1rem;
} }
h5 {
font-size: 1rem;
}
h6 {
font-size: 0.9rem;
}
// Common styles for heading elements // Common styles for heading elements
h1, h1,
h2, h2,