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

4
package-lock.json generated
View File

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

6
package.json
View File

@@ -1,10 +1,10 @@
{
"name": "ts5-obs-overlay",
"private": false,
"version": "2.0.0",
"description": "Overlay for OBS to show the current talking clients in your Teamspeak 5 Channel",
"version": "2.1.0",
"description": "Overlay for OBS to show the current talking clients in your TeamSpeak 5 Channel",
"author": "DerTyp7",
"homepage": "https://dertyp7.github.io/ts5-obs-overlay",
"homepage": "https://dertyp7.github.io/ts5-obs-overlay/#",
"repository": {
"type": "git",
"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="*" element={<Navigate to="/generate" replace />} />
</Routes>
);
}

10
src/Generator.tsx
View File

@@ -19,13 +19,17 @@ export default function Generator() {
// Function to generate the output URL
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("showChannelName", showChannelName.toString());
url.searchParams.set("hideNonTalking", hideNonTalking.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
@@ -58,7 +62,7 @@ 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="#">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 */}

22
src/Viewer.tsx
View File

@@ -16,7 +16,7 @@ export default function Viewer({
remoteAppPort: remoteAppPort,
auth: {
identifier: "de.tealfire.obs",
version: "2.0.0",
version: "2.1.0",
name: "TS5 OBS Overlay",
description: "A OBS overlay for TS5 by DerTyp7",
},
@@ -31,7 +31,7 @@ export default function Viewer({
return (
<div className="viewer">
{showChannelName ? (
{showChannelName && currentChannel ? (
<div className="channelNameContainer">
<h1>{currentChannel?.properties.name}</h1>
</div>
@@ -146,6 +146,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 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>
);
}

6
src/main.tsx
View File

@@ -2,10 +2,10 @@ import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "@styles/index.scss";
import { BrowserRouter } from "react-router-dom";
import { HashRouter } from "react-router-dom";
ReactDOM.createRoot(document.getElementById("root")!).render(
<BrowserRouter>
<HashRouter>
<App />
</BrowserRouter>
</HashRouter>
);

12
src/styles/Generator.scss
View File

@@ -211,6 +211,18 @@ $breakpoint-3: 600px;
background-repeat: no-repeat;
background-size: cover;
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;
padding: 0.5rem;
h1 {
font-size: 5vw;
}
h1,
p {
background-color: #2f313680;
@@ -34,14 +38,15 @@
// icon styles
svg {
width: 2.1rem;
width: 5vw;
aspect-ratio: 1/1;
margin-right: 0.5rem;
filter: drop-shadow(0 0 0.75rem rgba(15, 15, 15, 0.1));
}
// client name styles
p {
font-size: 1.4rem;
font-size: 5vw;
}
}
}

8
src/styles/index.scss
View File

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