diff --git a/README.md b/README.md index cc5e403..6485aa8 100644 --- a/README.md +++ b/README.md @@ -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) diff --git a/index.html b/index.html index df04aa3..c794ea7 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,9 @@ - + + TS5-OBS-Overlay diff --git a/package-lock.json b/package-lock.json index 190db85..3d761d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 2fe732e..100ed26 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..9c9cdc7 --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,23 @@ + + + + + + + + diff --git a/src/App.tsx b/src/App.tsx index eded429..ee78e43 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -21,7 +21,6 @@ export default function App() { } /> } /> - } /> ); } diff --git a/src/Generator.tsx b/src/Generator.tsx index d83a3a1..99fd8e9 100644 --- a/src/Generator.tsx +++ b/src/Generator.tsx @@ -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() {

1. Customize your settings

2. Copy the generated URL

3. Paste the URL into the BrowserSource URL field in OBS

- Click here for detailed instructions + Click here for detailed instructions {/* Output Section */} diff --git a/src/Viewer.tsx b/src/Viewer.tsx index 44d6945..620a6e9 100644 --- a/src/Viewer.tsx +++ b/src/Viewer.tsx @@ -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 (
- {showChannelName ? ( + {showChannelName && currentChannel ? (

{currentChannel?.properties.name}

@@ -146,6 +146,24 @@ export default function Viewer({ return
; } })} + {currentChannel == null ? ( + <> +

Overlay couldn't connect to the client:

+
+
+
1. Make sure to accept the overlay in your TS5-Client via the notifications
+
+
2. Enable remote apps inside the the TS5-Settings
+
+
3. Make sure to match the configuration port with the port in the TS5 remote app settings
+
+
4. Refresh this page/BrowserSource (Select BrowserSource & click "Refresh" in OBS)
+
+
If non of this worked refer to the GitHub and write an issue with your problem
+ + ) : ( + "" + )}
); } diff --git a/src/main.tsx b/src/main.tsx index 8eedfe1..fea0b5e 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -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( - + - + ); diff --git a/src/styles/Generator.scss b/src/styles/Generator.scss index cde0957..97312c0 100644 --- a/src/styles/Generator.scss +++ b/src/styles/Generator.scss @@ -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; + } + } } } } diff --git a/src/styles/Viewer.scss b/src/styles/Viewer.scss index 0b3a269..a8ed941 100644 --- a/src/styles/Viewer.scss +++ b/src/styles/Viewer.scss @@ -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; } } } diff --git a/src/styles/index.scss b/src/styles/index.scss index 8406e2b..b2ccd24 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -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,