update version

Merge branch 'main' of https://github.com/DerTyp7/ts5-obs-overlay
add link for detailed instructions
2026-07-31 08:39:04 +02:00 · 2023-11-12 19:26:26 +01:00 · 2023-11-12 19:25:52 +01:00 · 2023-11-12 19:25:50 +01:00 · 2023-11-12 19:24:46 +01:00 · 2023-11-12 19:24:20 +01:00
9 changed files with 51 additions and 22 deletions
--- 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://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

 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

@@ -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)
--- a/index.html
+++ b/index.html
@@ -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>
--- 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.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",
+  "homepage": "https://dertyp7.github.io/ts5-obs-overlay/#",
  "repository": {
    "type": "git",
    "url": "https://github.com/DerTyp7/ts5-obs-overlay"
--- a/public/logo.svg
+++ b/public/logo.svg
@@ -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>
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -21,7 +21,6 @@ export default function App() {
        }
      />
      <Route path="/generate" element={<Generator />} />
-      <Route path="*" element={<Navigate to="/generate" replace />} />
    </Routes>
  );
 }
--- 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() {
        <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 */}
--- 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.8",
      name: "TS5 OBS Overlay",
      description: "A OBS overlay for TS5 by DerTyp7",
    },
--- 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(
-  <BrowserRouter>
+  <HashRouter>
    <App />
-  </BrowserRouter>
+  </HashRouter>
 );
--- 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;
    }
  }
 }
Author	SHA1	Message	Date
Janis	f0761c40b7	update version	2023-11-12 19:26:26 +01:00
Janis	ef442f10e0	Merge branch 'main' of https://github.com/DerTyp7/ts5-obs-overlay	2023-11-12 19:25:52 +01:00
Janis	ce7bd90362	add link for detailed instructions	2023-11-12 19:25:50 +01:00
Janis	61f6651a57	Merge pull request #90 from DerTyp7/DerTyp7-patch-1 Update README.md	2023-11-12 19:24:46 +01:00
Janis	1d9b6de814	Update README.md	2023-11-12 19:24:20 +01:00
Janis	751fad72f4	Update README.md	2023-11-12 19:22:30 +01:00
Janis	4eb61d3b96	fix viewer font size	2023-11-12 19:19:33 +01:00
Janis	7fd2e2aafa	Merge pull request #89 from DerTyp7/DerTyp7-patch-2 Update README.md	2023-11-12 19:04:09 +01:00
Janis	33786d7366	Update README.md	2023-11-12 19:03:18 +01:00
Janis	1a5b231d1e	fix hashruter generator	2023-11-12 19:01:01 +01:00
Janis	232bca2bbc	remove doubled pathname issue	2023-11-12 18:52:24 +01:00
Janis	0b74390d2e	update version	2023-11-12 18:50:13 +01:00
Janis	d16e80a48d	fix pathname in generator	2023-11-12 18:49:49 +01:00
Janis	c5009271c4	update version	2023-11-12 18:43:57 +01:00
Janis	e9f3fa28f9	remove auto reroute	2023-11-12 18:43:24 +01:00
Janis	8b23a8cca7	update version	2023-11-12 18:41:36 +01:00
Janis	87dd069dec	fix url generation for gh pages	2023-11-12 18:41:12 +01:00
Janis	1a5f0b8e6e	update version	2023-11-12 18:35:34 +01:00
Janis	8db32153d2	Use Hashrouter because of ghpages	2023-11-12 18:34:40 +01:00