From 8db32153d22591627f588b849b71cf2dde80fee0 Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 12 Nov 2023 18:34:40 +0100 Subject: [PATCH 01/25] Use Hashrouter because of ghpages --- package.json | 2 +- src/Generator.tsx | 2 +- src/main.tsx | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 8533d8a..eb5728b 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "2.0.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/src/Generator.tsx b/src/Generator.tsx index d83a3a1..51de983 100644 --- a/src/Generator.tsx +++ b/src/Generator.tsx @@ -19,7 +19,7 @@ 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.replace("/#/generate", "")); url.searchParams.set("remoteAppPort", remoteAppPort.toString()); url.searchParams.set("showChannelName", showChannelName.toString()); url.searchParams.set("hideNonTalking", hideNonTalking.toString()); diff --git a/src/main.tsx b/src/main.tsx index 8eedfe1..7e3b701 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 { BrowserRouter, HashRouter } from "react-router-dom"; ReactDOM.createRoot(document.getElementById("root")!).render( - + - + ); From 1a5f0b8e6e45b3363c773a89f993406257362eb3 Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 12 Nov 2023 18:35:34 +0100 Subject: [PATCH 02/25] update version --- package.json | 4 ++-- src/Viewer.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index eb5728b..fee3e89 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "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.0.1", + "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/#", "repository": { diff --git a/src/Viewer.tsx b/src/Viewer.tsx index 44d6945..f1006db 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.0.1", name: "TS5 OBS Overlay", description: "A OBS overlay for TS5 by DerTyp7", }, From 87dd069dec86e01026f73155dc4e70a24182fc98 Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 12 Nov 2023 18:41:12 +0100 Subject: [PATCH 03/25] fix url generation for gh pages --- src/Generator.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/Generator.tsx b/src/Generator.tsx index 51de983..0959a7a 100644 --- a/src/Generator.tsx +++ b/src/Generator.tsx @@ -19,12 +19,18 @@ 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()); + if (url.hostname === "dertyp7.github.io") { + url.pathname = url.pathname + "ts5-obs-overlay/"; + } + setOutputUrl(url.toString()); } From 8b23a8cca71267baabb1cd66ad8f3cd05d2c035d Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 12 Nov 2023 18:41:36 +0100 Subject: [PATCH 04/25] update version --- package.json | 2 +- src/Viewer.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index fee3e89..0f7a611 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ts5-obs-overlay", "private": false, - "version": "2.0.1", + "version": "2.0.2", "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/#", diff --git a/src/Viewer.tsx b/src/Viewer.tsx index f1006db..e13ad56 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.1", + version: "2.0.2", name: "TS5 OBS Overlay", description: "A OBS overlay for TS5 by DerTyp7", }, From e9f3fa28f92a4ff3f7d0b5da7f97cfa9574f925b Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 12 Nov 2023 18:43:24 +0100 Subject: [PATCH 05/25] remove auto reroute --- src/App.tsx | 1 - 1 file changed, 1 deletion(-) 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() { } /> } /> - } /> ); } From c5009271c4f4f3fdd03787dfecadd0e203fbb4f4 Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 12 Nov 2023 18:43:57 +0100 Subject: [PATCH 06/25] update version --- package.json | 2 +- src/Viewer.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 0f7a611..1c2a09d 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ts5-obs-overlay", "private": false, - "version": "2.0.2", + "version": "2.0.3", "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/#", diff --git a/src/Viewer.tsx b/src/Viewer.tsx index e13ad56..4d4e62c 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.2", + version: "2.0.3", name: "TS5 OBS Overlay", description: "A OBS overlay for TS5 by DerTyp7", }, From d16e80a48dd6f69cf547ba6b524030ecd4b44481 Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 12 Nov 2023 18:49:49 +0100 Subject: [PATCH 07/25] fix pathname in generator --- src/Generator.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Generator.tsx b/src/Generator.tsx index 0959a7a..45364e7 100644 --- a/src/Generator.tsx +++ b/src/Generator.tsx @@ -27,7 +27,7 @@ export default function Generator() { url.searchParams.set("hideNonTalking", hideNonTalking.toString()); url.searchParams.set("clientLimit", clientLimit.toString()); - if (url.hostname === "dertyp7.github.io") { + if (url.hostname.includes("dertyp7.github.io")) { url.pathname = url.pathname + "ts5-obs-overlay/"; } From 0b74390d2e7222ff2e001185ab325f77a3af854b Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 12 Nov 2023 18:50:13 +0100 Subject: [PATCH 08/25] update version --- package.json | 2 +- src/Viewer.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 1c2a09d..38c7100 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ts5-obs-overlay", "private": false, - "version": "2.0.3", + "version": "2.0.4", "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/#", diff --git a/src/Viewer.tsx b/src/Viewer.tsx index 4d4e62c..1c26902 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.3", + version: "2.0.4", name: "TS5 OBS Overlay", description: "A OBS overlay for TS5 by DerTyp7", }, From 232bca2bbcc4407c0bc59a0baa1b52c39aea19eb Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 12 Nov 2023 18:52:24 +0100 Subject: [PATCH 09/25] remove doubled pathname issue --- index.html | 6 ++---- package.json | 2 +- public/logo.svg | 23 +++++++++++++++++++++++ src/Generator.tsx | 4 ---- src/Viewer.tsx | 2 +- 5 files changed, 27 insertions(+), 10 deletions(-) create mode 100644 public/logo.svg 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.json b/package.json index 38c7100..456d4bf 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ts5-obs-overlay", "private": false, - "version": "2.0.4", + "version": "2.0.5", "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/#", 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/Generator.tsx b/src/Generator.tsx index 45364e7..f6042ad 100644 --- a/src/Generator.tsx +++ b/src/Generator.tsx @@ -27,10 +27,6 @@ export default function Generator() { url.searchParams.set("hideNonTalking", hideNonTalking.toString()); url.searchParams.set("clientLimit", clientLimit.toString()); - if (url.hostname.includes("dertyp7.github.io")) { - url.pathname = url.pathname + "ts5-obs-overlay/"; - } - setOutputUrl(url.toString()); } diff --git a/src/Viewer.tsx b/src/Viewer.tsx index 1c26902..dcb85ea 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.4", + version: "2.0.5", name: "TS5 OBS Overlay", description: "A OBS overlay for TS5 by DerTyp7", }, From 1a5b231d1e8abe9a05cfc1944a50dd124253b4ad Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 12 Nov 2023 19:01:01 +0100 Subject: [PATCH 10/25] fix hashruter generator --- package.json | 2 +- src/Generator.tsx | 4 +++- src/Viewer.tsx | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 456d4bf..91c480a 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ts5-obs-overlay", "private": false, - "version": "2.0.5", + "version": "2.0.6", "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/#", diff --git a/src/Generator.tsx b/src/Generator.tsx index f6042ad..d3ef071 100644 --- a/src/Generator.tsx +++ b/src/Generator.tsx @@ -27,7 +27,9 @@ export default function Generator() { 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 diff --git a/src/Viewer.tsx b/src/Viewer.tsx index dcb85ea..d7705ff 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.5", + version: "2.0.6", name: "TS5 OBS Overlay", description: "A OBS overlay for TS5 by DerTyp7", }, From 33786d7366261871030d70ba38fe151baceaad66 Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 12 Nov 2023 19:03:18 +0100 Subject: [PATCH 11/25] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index cc5e403..3c1de0f 100644 --- a/README.md +++ b/README.md @@ -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://dertyp7.github.io/ts5-obs-overlay/#/generate](https://dertyp7.github.io/ts5-obs-overlay/#/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) From 4eb61d3b96c9176b4d564c39a7ed6a0c29bcde3f Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 12 Nov 2023 19:19:33 +0100 Subject: [PATCH 12/25] fix viewer font size --- README.md | 2 +- package.json | 2 +- src/Viewer.tsx | 2 +- src/styles/Viewer.scss | 9 +++++++-- 4 files changed, 10 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 3c1de0f..2545fec 100644 --- a/README.md +++ b/README.md @@ -43,7 +43,7 @@ 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 ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/50b755f9-d4b4-469f-9136-e2b18f226547) -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/package.json b/package.json index 91c480a..2b6d7fd 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ts5-obs-overlay", "private": false, - "version": "2.0.6", + "version": "2.0.7", "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/#", diff --git a/src/Viewer.tsx b/src/Viewer.tsx index d7705ff..672ce7d 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.6", + version: "2.0.7", name: "TS5 OBS Overlay", description: "A OBS overlay for TS5 by DerTyp7", }, 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; } } } From 751fad72f45cc1699e418c0d87435be723c7fd93 Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 12 Nov 2023 19:22:30 +0100 Subject: [PATCH 13/25] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 2545fec..a8259d3 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ This overlay uses the [TeamSpeak5 Remote App API](https://github.com/DerTyp7/rea 1. Open this link in your Browser: [https://dertyp7.github.io/ts5-obs-overlay/#/generate](https://dertyp7.github.io/ts5-obs-overlay/#/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 @@ -41,7 +41,7 @@ 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 width of 1000px and the height is determined of how many clients are expected (play around with these values) From 1d9b6de814b37efe1cf1acdc0137b19bc9559e70 Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 12 Nov 2023 19:24:20 +0100 Subject: [PATCH 14/25] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2545fec..09028f2 100644 --- a/README.md +++ b/README.md @@ -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://dertyp7.github.io/ts5-obs-overlay/#/generate](https://dertyp7.github.io/ts5-obs-overlay/#/generate) 2. Follow the instructions on the website From ce7bd903625d441dae8d979308f4a36ef6d9aaf3 Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 12 Nov 2023 19:25:50 +0100 Subject: [PATCH 15/25] add link for detailed instructions --- src/Generator.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Generator.tsx b/src/Generator.tsx index d3ef071..99fd8e9 100644 --- a/src/Generator.tsx +++ b/src/Generator.tsx @@ -62,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 */} From f0761c40b72cc33f6bfceb7ea0c8cba26eff8060 Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 12 Nov 2023 19:26:26 +0100 Subject: [PATCH 16/25] update version --- package.json | 2 +- src/Viewer.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 2b6d7fd..af8355e 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ts5-obs-overlay", "private": false, - "version": "2.0.7", + "version": "2.0.8", "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/#", diff --git a/src/Viewer.tsx b/src/Viewer.tsx index 672ce7d..ccbedf3 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.7", + version: "2.0.8", name: "TS5 OBS Overlay", description: "A OBS overlay for TS5 by DerTyp7", }, From f30cd26393861f9156614846a5226a9b4b41c9f7 Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 12 Nov 2023 19:57:10 +0100 Subject: [PATCH 17/25] fix generator font size --- src/styles/Generator.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) 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; + } + } } } } From 442e8f05e60b643cc9351b931776662f06c10389 Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 12 Nov 2023 19:57:28 +0100 Subject: [PATCH 18/25] update version --- package.json | 2 +- src/Viewer.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index af8355e..d6e4c71 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ts5-obs-overlay", "private": false, - "version": "2.0.8", + "version": "2.0.9", "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/#", diff --git a/src/Viewer.tsx b/src/Viewer.tsx index ccbedf3..8bc7e1b 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.8", + version: "2.0.9", name: "TS5 OBS Overlay", description: "A OBS overlay for TS5 by DerTyp7", }, From 6d7ee8905b3d3abfab01f314dc56446bb8484b7d Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 12 Nov 2023 23:12:37 +0100 Subject: [PATCH 19/25] show instructions when client cant connect --- src/Viewer.tsx | 18 ++++++++++++++++++ src/main.tsx | 2 +- src/styles/index.scss | 8 ++++++++ 3 files changed, 27 insertions(+), 1 deletion(-) diff --git a/src/Viewer.tsx b/src/Viewer.tsx index 8bc7e1b..fbebcd4 100644 --- a/src/Viewer.tsx +++ b/src/Viewer.tsx @@ -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 7e3b701..fea0b5e 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,7 +2,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( 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, From 34ffedc29401b8d3c8713238f26c1451ed7de15a Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 12 Nov 2023 23:13:08 +0100 Subject: [PATCH 20/25] update version --- package.json | 2 +- src/Viewer.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index d6e4c71..23c0353 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ts5-obs-overlay", "private": false, - "version": "2.0.9", + "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/#", diff --git a/src/Viewer.tsx b/src/Viewer.tsx index fbebcd4..bf6f2c9 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.9", + version: "2.1.0", name: "TS5 OBS Overlay", description: "A OBS overlay for TS5 by DerTyp7", }, From 3e5ec1862e8de90553bed3987a1f8b6d5836c921 Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 12 Nov 2023 23:18:25 +0100 Subject: [PATCH 21/25] fix remove emtpy channelname --- src/Viewer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Viewer.tsx b/src/Viewer.tsx index bf6f2c9..620a6e9 100644 --- a/src/Viewer.tsx +++ b/src/Viewer.tsx @@ -31,7 +31,7 @@ export default function Viewer({ return (
- {showChannelName ? ( + {showChannelName && currentChannel ? (

{currentChannel?.properties.name}

From cf5c0ae70530509f6b8722a2920b0ecac71533a7 Mon Sep 17 00:00:00 2001 From: Janis Date: Thu, 25 Jan 2024 00:32:09 +0100 Subject: [PATCH 22/25] Change to GH-Pages custom url --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index df977d9..be1ecc1 100644 --- a/README.md +++ b/README.md @@ -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://dertyp7.tealfire.de/#/generate](https://dertyp7.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/aa83b07d-3dea-461f-9487-f9e6a299f2f3) @@ -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://dertyp7.tealfire.de/#/generate](https://dertyp7.tealfire.de/#/generate) 2. Follow the instructions on the website From d3cc20d58b27a4d63dc3d5031ea0d1ddf6016674 Mon Sep 17 00:00:00 2001 From: Janis Date: Thu, 25 Jan 2024 00:41:47 +0100 Subject: [PATCH 23/25] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index be1ecc1..74246cd 100644 --- a/README.md +++ b/README.md @@ -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.tealfire.de/#/generate](https://dertyp7.tealfire.de/#/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/aa83b07d-3dea-461f-9487-f9e6a299f2f3) From 337c39935c37303663cff704fd8040198996ff8e Mon Sep 17 00:00:00 2001 From: Janis Date: Thu, 25 Jan 2024 00:43:12 +0100 Subject: [PATCH 24/25] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 74246cd..6485aa8 100644 --- a/README.md +++ b/README.md @@ -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.tealfire.de/#/generate](https://dertyp7.tealfire.de/#/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 From 13f621f17b2946a4561e35d1fc1aa5dd8f667e36 Mon Sep 17 00:00:00 2001 From: dertyp7 Date: Thu, 25 Jan 2024 19:44:27 +0100 Subject: [PATCH 25/25] Update package-lock.json version to 2.1.0 --- package-lock.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3cd4a27..aeb998a 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",