Add SVG icons and integrate vite-plugin-svgr for improved asset handling

Add option to align right (#124 )
Merge branch 'main' into dev
2026-07-31 16:49:04 +02:00 · 2025-01-24 16:14:03 +01:00 · 2025-01-24 14:39:17 +01:00 · 2025-01-24 13:41:41 +01:00 · 2025-01-24 13:39:35 +01:00 · 2025-01-24 13:39:06 +01:00
28 changed files with 3531 additions and 1464 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,14 +1,11 @@
 module.exports = {
  env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
-  parser: '@typescript-eslint/parser',
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  plugins: ['react-refresh'],
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  plugins: ["react-refresh"],
  rules: {
-    'react-refresh/only-export-components': 'warn',
+    "react-refresh/only-export-components": "warn",
+    "react-hooks/exhaustive-deps": "ignore",
  },
-}
+};
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -17,6 +17,10 @@ Example or explanation to reproduce the issue.
 ## Expected behavior
 A clear and concise description of what you expected to happen.

+**Do you use the local or online version?**
+- [x] Online version with URL: `https://dertyp7.github.io/ts5-obs-overlay`
+- [ ] The version named below locally downloaded on my device
+
 **Your environment:**
 - OS: [e.g. Windows 11]
 - OBS version: [e.g. 29.1.3]
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -8,3 +8,4 @@ updates:
    directory: "/" # Location of package manifests
    schedule:
      interval: "monthly"
+    target-branch: "dev"
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,7 @@
 {
  "tabWidth": 2,
  "useTabs": false,
-  "printWidth": 120
+  "printWidth": 120,
+  "singleQuote": false,
+  "semi": true
 }
--- a/README.md
+++ b/README.md
@@ -1,104 +1,61 @@
-# Teamspeak5-OBS-Overlay
+# TeamSpeak5-OBS-Overlay

-This is an overlay for OBS to show the current talking clients in your Teamspeak 5 Channel.  
-This App uses the new "Remote Apps" feature of Teamspeak 5.
+This is an overlay for OBS to show the current talking clients in your TeamSpeak5 Channel.  
+This App uses the new "Remote Apps" feature of TeamSpeak5.

-This overlay uses the [Teamspeak 5 Remote App API](https://github.com/DerTyp7/react-ts5-remote-app-api).
+This overlay uses the [TeamSpeak Remote App API](https://github.com/DerTyp7/react-teamspeak-remote-app-api).

 ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/d0ab06f2-1a36-479d-826f-bd4bd3d405b7)

- [Teamspeak5-OBS-Overlay](#teamspeak5-obs-overlay)
+- [TeamSpeak5-OBS-Overlay](#teamspeak5-obs-overlay)
  - [Usage](#usage)
-    - [Quick instructions (online usage only)](#quick-instructions-online-usage-only)
-    - [Instructions](#instructions)
-  - [Settings (Parameters)](#settings-parameters)
-    - [Are you using the **online** version (recommended version)?](#are-you-using-the-online-version-recommended-version)
-    - [Are you using the **offline** version?](#are-you-using-the-offline-version)
-    - [Adding Parameters](#adding-parameters)
-  - [Setup (Developer)](#setup-developer)
+    - [Quick instructions](#quick-instructions)
+    - [Detailed instructions](#detailed-instructions)
  - [Common Issues](#common-issues)
-    - [The overlay is empty, but i'm connected to a Teamspeak 5 server](#the-overlay-is-empty-but-im-connected-to-a-teamspeak-5-server)
+    - [The overlay is empty, but i'm connected to a TeamSpeak5 server](#the-overlay-is-empty-but-im-connected-to-a-teamspeak5-server)
+    - [OBS doesn't show the latest version of the overlay](#obs-doesnt-show-the-latest-version-of-the-overlay)
+  - [Setup (Developer)](#setup-developer)

 ## Usage

-### Quick instructions (online usage only)
+### Quick instructions

-1. Go into the Teamspeak 5 Settings and enable "Remote Apps"
-2. Add a new Browser Source to your OBS Scene and enter `https://dertyp7.github.io/ts5-obs-overlay/` as URL
-3. Set the width and height to your desired size (e.g. 1920x1080 OR 1280x720)
-4. You should now receive a notification in Teamspeak 5 that the app is allowed to connect to your Teamspeak 5 client. Allow it.
+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)

-### Instructions
+### Detailed instructions

-1. Go into the Teamspeak 5 Settings and enable "Remote Apps"  
+Try this instruction if you have problems with the quick instructions above.
+
+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. Go into the TeamSpeak5 Settings and enable "Remote Apps"  
   ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/b31bc553-fde2-46ab-b07c-d3c81339cc7d)

-2. Add a new Browser Source to your OBS Scene  
+4. Add a new Browser Source to your OBS Scene  
   ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/0198b468-bb96-4b65-bdd4-3d6bb3ef7d25)  
   ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/58ad399f-5344-456f-b243-6e267b489fd5)

-3. Configure **Browser Source** (Use **ONE** of the following methods)
+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/e8fd4a1b-be70-4123-8d28-4dc7ebc8c2bd)

-   1. **Online Usage (recommended):** Enter **`https://dertyp7.github.io/ts5-obs-overlay/`** as URL
-   2. **Offline Usage (ignore this if you use the online usage above):**
-      1. Download the `ts5-overlay-{version}.html` of the latest release from [here](https://github.com/DerTyp7/ts5-obs-overlay/releases/latest)
-         ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/04dc3a66-c493-429b-b4ae-44bade473ad6)  
-         1.1. (optional) You can rename the file. Just remember using the new file name in the future instead of `ts5-overlay-{version}.html`
-      2. Tick the checkbox "Local File" and select the downloaded `ts5-overlay-{version}.html`
+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)

-4. Set the width and height to your desired size (e.g. 1920x1080 OR 1280x720)
-5. You should now receive a notification in Teamspeak 5 that the app is allowed to connect to your Teamspeak 5 client. Allow it. (If you don't get a notification, restart Teamspeak 5 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)

-## Settings (Parameters)
-
-You can customize the overlay by **adding parameters** to the URL of the **Browser Source**.
-
-### Are you using the **online** version (recommended version)?
-
-1. Open your Browser Source settings
-2. Start adding parameters like discribed in [Adding Parameters](#adding-parameters)
-
-### Are you using the **offline** version?
-
-1. Open your Browser Source settings
-2. **Untick** the checkbox "Local File"
-3. Add `file://` to the beginning of the URL  
-   ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/87985b4c-4397-4681-9635-239d1e382c24)
-4. Start adding parameters like discribed in [Adding Parameters](#adding-parameters)
-
-### Adding Parameters
-
-Start by adding a `?` to the end of the URL and then add the parameters.
-To add multiple parameters, you have to seperate them with a `&`.
-
-Like this:  
-**Online:** _`https://dertyp7.github.io/ts5-obs-overlay/?parameter1=value1&parameter2=value2`_  
-**Offline:** _`file://C:/Users/.../ts5-overlay-{version}.html?parameter1=value1&parameter2=value2`_
-
-Real example:  
-**Online:** _`https://dertyp7.github.io/ts5-obs-overlay/?remoteAppPort=5899&hideNonTalking=true&clientLimit=5&showChannelName=true`_  
-**Offline:** _`file://C:/Users/.../ts5-overlay-{version}.html?remoteAppPort=5899&hideNonTalking=true&clientLimit=5&showChannelName=true`_
-
-This is a **list** of **all available parameters** (all parameters are optional):
-
-| Parameter         | Description                              | Type    | Default         |
-| ----------------- | ---------------------------------------- | ------- | --------------- |
-| `remoteAppPort`   | The port of the Teamspeak 5 remote app   | number  | `5899`          |
-| `hideNonTalking`  | Hide all non-talking clients             | boolean | `false`         |
-| `clientLimit`     | Count of how many client should be shown | number  | `0` (unlimited) |
-| `showChannelName` | Display the channel name                 | boolean | `false`         |
-
-## Setup (Developer)
-
-1. Clone this repository
-2. Run `npm install`
-3. To start the development server run `npm run dev`
-
 ## Common Issues

-### The overlay is empty, but i'm connected to a Teamspeak 5 server
+### The overlay is empty, but i'm connected to a TeamSpeak5 server

+**Fix 1**  
+Make sure you accepted the notification in your TeamSpeak Client.
+
+**Fix 2**  
 Sadly TeamSpeak5 does not give us any information about the current active server tab.  
 So we try currently use a workaround, where the active server tab is determined by looking on which server the your hardware input was unmuted the latest, since the non-active server tabs in TS5 usually mute the client’s microphone.

@@ -108,3 +65,18 @@ Possible fixes:

 - Unmute and mute yourself in the active server tab (Just a normal unmute and mute, not the hardware mute)
 - Reconnect to the TS5 server while the overlay is open
+
+### OBS doesn't show the latest version of the overlay
+
+This can happen if the OBS Browser Source is caching the overlay.  
+To fix this, open the Browser Source settings and click on "Refresh cache of current page".
+
+## Setup (Developer)
+
+1. Clone this repository
+2. Run `npm install`
+3. To start the development server run `npm run dev`
+
+> **Note:** Pull requests are welcome, but please be consistent with the code style.  
+> This project uses [Prettier](https://prettier.io/) to format the code.  
+> Pull requests always in the `dev` branch.
--- a/index.html
+++ b/index.html
@@ -1,12 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>TS5-OBS-Overlay</title>
-	</head>
-	<body>
-		<div id="root"></div>
-		<script type="module" src="/src/main.tsx"></script>
-	</body>
+  <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/6, so your audience can see who is talking. https://github.com/DerTyp7/teamspeak-obs-overlay"
+    />
+    <meta name="author" content="DerTyp7" />
+    <link rel="icon" href="/logo.svg" type="image/x-icon" />
+    <title>TeamSpeak-OBS-Overlay</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,9 +1,30 @@
 {
-  "name": "ts5-obs-overlay",
-  "private": true,
-  "version": "1.3.1",
-  "description": "Overlay for OBS to show the current talking clients in your Teamspeak 5 Channel",
-  "homepage": "https://dertyp7.github.io/ts5-obs-overlay",
+  "name": "teamspeak-obs-overlay",
+  "private": false,
+  "version": "2.2.0",
+  "description": "Overlay for OBS to show the current talking clients in your TeamSpeak Channel",
+  "author": "DerTyp7",
+  "homepage": "https://dertyp7.github.io/teamspeak-obs-overlay/#",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/DerTyp7/teamspeak-obs-overlay"
+  },
+  "keywords": [
+    "ts5",
+    "ts6",
+    "teamspeak6",
+    "teamspeak",
+    "teamspeak5",
+    "overlay",
+    "remote app",
+    "obs",
+    "typescript",
+    "react",
+    "vite"
+  ],
+  "bugs": {
+    "url": "https://github.com/DerTyp7/teamspeak-obs-overlay/issues"
+  },
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -12,25 +33,25 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@types/node": "^20.8.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.14.2",
-    "react-ts5-remote-app-api": "^1.1.1",
-    "sass": "^1.68.0"
+    "@types/node": "^22.10.10",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.1.3",
+    "react-teamspeak-remote-app-api": "^2.0.0",
+    "sass": "^1.83.4"
  },
  "devDependencies": {
-    "@types/jest": "^29.5.2",
-    "@types/react": "^18.2.23",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@typescript-eslint/parser": "^6.2.1",
-    "@vitejs/plugin-react-swc": "^3.0.0",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.7",
-    "vite-plugin-singlefile": "^0.13.5"
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@typescript-eslint/eslint-plugin": "^8.21.0",
+    "@typescript-eslint/parser": "^8.21.0",
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "eslint": "^9.18.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.11",
+    "vite-plugin-svgr": "^4.3.0"
  }
 }
--- a/public/images/viewer_example_background.png
+++ b/public/images/viewer_example_background.png
--- 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
@@ -1,38 +1,28 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import "@styles/App.scss";

-import { useSearchParams } from "react-router-dom";
-import useTSRemoteApp, { IClient } from "react-ts5-remote-app-api";
+import { Route, Routes, useSearchParams } from "react-router-dom";
 import Viewer from "./Viewer";
+import Generator from "./Generator";

 export default function App() {
  const [searchParams] = useSearchParams();
-  const { clients, activeConnectionId, currentChannel } = useTSRemoteApp({
-    remoteAppPort: parseInt(searchParams.get("remoteAppPort") ?? "5899"),
-    auth: {
-      identifier: "de.tealfire.obs",
-      version: "1.3.1",
-      name: "TS5 OBS Overlay",
-      description: "A OBS overlay for TS5 by DerTyp7",
-    },
-    logging: true,
-  });

  return (
-    <div className="App">
-      <Viewer
-        showChannelName={searchParams.get("showChannelName") === "true"}
-        hideNonTalking={searchParams.get("hideNonTalking") === "true"}
-        clientLimit={searchParams.get("clientLimit") ? parseInt(searchParams.get("clientLimit") ?? "0") : 0}
-        clients={
-          clients.map((client) => {
-            if (client.channel?.id === currentChannel?.id && client.channel.connection.id === activeConnectionId) {
-              return client;
-            }
-          }) as IClient[]
+    <Routes>
+      <Route
+        path="/"
+        element={
+          <Viewer
+            remoteAppPort={parseInt(searchParams.get("remoteAppPort") ?? "5899")}
+            showChannelName={searchParams.get("showChannelName") === "true"}
+            hideNonTalking={searchParams.get("hideNonTalking") === "true"}
+            clientLimit={searchParams.get("clientLimit") ? parseInt(searchParams.get("clientLimit") ?? "0") : 0}
+            alignRight={searchParams.get("alignRight") === "true"}
+            showTsAvatar={searchParams.get("showTsAvatar") === "true"}
+          />
        }
-        channel={currentChannel}
      />
-    </div>
+      <Route path="/generate" element={<Generator />} />
+    </Routes>
  );
 }
--- a/src/Generator.tsx
+++ b/src/Generator.tsx
@@ -0,0 +1,155 @@
+import { ChangeEvent, useRef, useState, useEffect } from "react";
+import "@styles/Generator.scss";
+import Viewer from "./Viewer";
+import { url } from "inspector";
+
+export default function Generator() {
+  // State variables
+  const [outputUrl, setOutputUrl] = useState(() => new URL(window.location.href).toString());
+  const copiedTooltipRef = useRef<HTMLDivElement>(null);
+
+  const [remoteAppPort, setRemoteAppPort] = useState(5899);
+  const [showChannelName, setShowChannelName] = useState(true);
+  const [alignRight, setAlignRight] = useState(false);
+  const [hideNonTalking, setHideNonTalking] = useState(false);
+  const [clientLimit, setClientLimit] = useState(0);
+  const [showTsAvatar, setShowTsAvatar] = useState(false);
+
+  // Effect to generate URL when dependencies change
+  useEffect(() => {
+    generateUrl();
+  }, [remoteAppPort, showChannelName, hideNonTalking, clientLimit, alignRight, showTsAvatar]);
+
+  // Function to generate the output URL
+  function generateUrl() {
+    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());
+    url.searchParams.set("alignRight", alignRight.toString());
+    url.searchParams.set("showTsAvatar", showTsAvatar.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 copy() {
+    navigator.clipboard.writeText(outputUrl);
+
+    if (copiedTooltipRef.current) {
+      copiedTooltipRef.current.style.animation = "tooltipAnimation 200ms";
+      copiedTooltipRef.current.style.opacity = "1";
+
+      setTimeout(() => {
+        if (copiedTooltipRef.current) {
+          copiedTooltipRef.current.style.opacity = "0";
+          copiedTooltipRef.current.style.animation = "";
+        }
+      }, 1000);
+    }
+  }
+
+  return (
+    <div className="generator">
+      {/* Header */}
+      <div className="headline">
+        <h1>TeamSpeak-OBS-Overlay Generator</h1>
+        <h4>by DerTyp7</h4>
+      </div>
+
+      {/* Instructions */}
+      <div className="instructions">
+        <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="https://github.com/DerTyp7/ts5-obs-overlay#detailed-instructions">
+          Click here for detailed instructions
+        </a>
+      </div>
+
+      {/* Output Section */}
+      <div className="output">
+        <p className="url">
+          <code>{outputUrl}</code>
+        </p>
+        <button onClick={copy} className="copy">
+          Copy
+        </button>
+        <div ref={copiedTooltipRef} className="copiedTooltip">
+          Copied!
+        </div>
+      </div>
+
+      {/* Generator Content */}
+      <div className="generatorContent">
+        {/* Configurations */}
+        <div className="configurations">
+          <h2>Configurations</h2>
+
+          <div className="options">
+            {/* Option Sections */}
+            <section>
+              {/* Show Channel Name Option */}
+              <div className="option" onClick={() => setShowChannelName(!showChannelName)}>
+                <input type="checkbox" defaultChecked={showChannelName} />
+                <label>Show channel name</label>
+              </div>
+
+              {/* Hide Non-Talking Clients Option */}
+              <div className="option" onClick={() => setHideNonTalking(!hideNonTalking)}>
+                <input type="checkbox" defaultChecked={hideNonTalking} />
+                <label>Hide non talking clients</label>
+              </div>
+
+              {/* Alignment Option */}
+              <div className="option" onClick={() => setAlignRight(!alignRight)}>
+                <input type="checkbox" defaultChecked={alignRight} />
+                <label>Align Right</label>
+              </div>
+
+              {/* Show TeamSpeak Avatar */}
+              <div className="option" onClick={() => setShowTsAvatar(!showTsAvatar)}>
+                <input type="checkbox" defaultChecked={showTsAvatar} />
+                <label>Show TeamSpeak Avatar</label>
+              </div>
+            </section>
+
+            <section>
+              {/* Client Limit Option */}
+              <div className="option">
+                <input
+                  type="number"
+                  value={clientLimit}
+                  min={0}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) => setClientLimit(parseInt(e.target.value))}
+                />
+                <label>Client Limit</label>
+              </div>
+
+              {/* RemoteApp-Port Option */}
+              <div className="option">
+                <input
+                  type="number"
+                  value={remoteAppPort}
+                  min={0}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) => setRemoteAppPort(parseInt(e.target.value))}
+                />
+                <label>RemoteApp-Port</label>
+              </div>
+            </section>
+          </div>
+        </div>
+
+        {/* Preview */}
+        <div className="preview">
+          <iframe src={outputUrl}></iframe>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/Viewer.tsx
+++ b/src/Viewer.tsx
@@ -1,27 +1,47 @@
 import "@styles/Viewer.scss";
-import { IChannel, IClient } from "react-ts5-remote-app-api";
+import useTSRemoteApp, { IClient } from "react-teamspeak-remote-app-api";
+import TalkStatus from "@/components/TalkStatus";

 export default function Viewer({
-  clients,
-  channel,
+  remoteAppPort = 5899,
  showChannelName = false,
  hideNonTalking = false,
  clientLimit = 0,
+  alignRight = false,
+  showTsAvatar = false,
 }: {
-  clients: IClient[] | undefined;
-  channel: IChannel | undefined;
+  remoteAppPort?: number;
  showChannelName?: boolean;
  hideNonTalking?: boolean;
  clientLimit?: number;
+  alignRight?: boolean;
+  showTsAvatar?: boolean;
 }) {
+  const { clients, activeConnectionId, currentChannel } = useTSRemoteApp({
+    remoteAppPort: remoteAppPort,
+    auth: {
+      identifier: "de.tealfire.obs",
+      version: "2.2.0",
+      name: "TeamSpeak OBS Overlay",
+      description: "A OBS overlay for TeamSpeak by DerTyp7",
+    },
+    logging: true,
+  });
+
+  const currentClients = clients.map((client) => {
+    if (client.channel?.id === currentChannel?.id && client.channel.connection.id === activeConnectionId) {
+      return client;
+    }
+  }) as IClient[];
+
  return (
-    <div className="viewer">
-      {showChannelName ? (
+    <div className={`viewer ${alignRight ? "viewer--align-right" : ""}`}>
+      {showChannelName && currentChannel ? (
        <div className="channelNameContainer">
-          <h3>{channel?.properties.name}</h3>
+          <h1>{currentChannel?.properties.name}</h1>
        </div>
      ) : null}
-      {clients?.map((client, i) => {
+      {currentClients?.map((client, i) => {
        //* Client limit
        if (clientLimit != 0 && i >= clientLimit) {
          return null;
@@ -38,104 +58,11 @@ export default function Viewer({

          //* Normal client
          return (
-            <div className="client" key={`${client.id}-${client.channel?.connection.id}`}>
-              {client.properties.outputHardware == false ? (
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
-                  <title>muted_hardware_output</title>
-                  <g id="muted_hardware_output.svg">
-                    <path
-                      d="M116.62,39a4.78,4.78,0,0,1-1.59.3l-6.29,3.63a45.42,45.42,0,0,1-13.33,57.64,49.4,49.4,0,0,1-5.82,3.62c-1.06.57-2.2.92-3.19,1.49-1.7,1-2.77,2.13-2.77,4.18a4.57,4.57,0,0,0,4.54,4.54,5.33,5.33,0,0,0,1.84-.35,54.49,54.49,0,0,0,26.94-75c-.12,0-.22,0-.34,0M88.18,13.58a4.57,4.57,0,0,0-4.54,4.54c0,2.06,1.06,3.19,2.77,4.18,1,.57,2.13.92,3.19,1.49a49.4,49.4,0,0,1,5.82,3.62,45.68,45.68,0,0,1,8.19,7.78l7-4a2.63,2.63,0,0,1,1.11-.34A54.31,54.31,0,0,0,90,13.94a5.33,5.33,0,0,0-1.84-.35"
-                      fill="#d8d8d8"
-                    />
-                    <path
-                      d="M59.46,71.4,32.77,86.81l19,19a4.51,4.51,0,0,0,3.19,1.35,4.57,4.57,0,0,0,4.54-4.54V71.4M54.92,20.88a4.51,4.51,0,0,0-3.19,1.35L28.12,45.85H9.54A4.57,4.57,0,0,0,5,50.38V77.62a4.57,4.57,0,0,0,4.54,4.54H22.26l37.2-21.48V25.42a4.57,4.57,0,0,0-4.54-4.54"
-                      fill="#d8d8d8"
-                    />
-                    <path
-                      d="M85.11,56.6l-7.87,4.54A10,10,0,0,1,77.62,64c0,8.58-8.23,7.09-8.23,12.48A4.53,4.53,0,0,0,73.93,81a4,4,0,0,0,1.77-.35A18.13,18.13,0,0,0,86.69,64a18.34,18.34,0,0,0-1.59-7.4M73.93,47a4.52,4.52,0,0,0-4.54,4.54,3.92,3.92,0,0,0,1.08,2.8l8.76-5.06a16.14,16.14,0,0,0-3.52-1.93A4,4,0,0,0,73.93,47"
-                      fill="#d8d8d8"
-                    />
-                    <path
-                      d="M100.87,47.49,93,52a27.15,27.15,0,0,1-8.36,33.87A36.79,36.79,0,0,1,79.25,89a4.54,4.54,0,0,0,1.84,8.72,5.24,5.24,0,0,0,1.77-.35,36.34,36.34,0,0,0,18-49.91M81,30.25A4.54,4.54,0,0,0,79.25,39a36.82,36.82,0,0,1,5.39,3.12,27,27,0,0,1,2.86,2.4l8.14-4.7A35.37,35.37,0,0,0,82.86,30.6,5.31,5.31,0,0,0,81,30.25"
-                      fill="#d8d8d8"
-                    />
-                    <path
-                      d="M126.57,43.71,10.42,110.77a2.88,2.88,0,0,1-3.93-1.05L4.33,106A2.88,2.88,0,0,1,5.38,102L121.53,35A2.88,2.88,0,0,1,125.46,36l2.16,3.75A2.88,2.88,0,0,1,126.57,43.71Z"
-                      fill="#c9070a"
-                    />
-                  </g>
-                </svg>
-              ) : client.properties.inputHardware == false ? (
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
-                  <title>muted_hardware_input</title>
-                  <g id="muted_hardware_input.svg">
-                    <path
-                      d="M88.62,54.15V64A24.69,24.69,0,0,1,64,88.62a25.26,25.26,0,0,1-8.38-1.46l-7.39,7.39A34,34,0,0,0,64,98.46,34.5,34.5,0,0,0,98.46,64V54.15a4.92,4.92,0,1,1,9.85,0V64a44.31,44.31,0,0,1-39.38,44v10.15H88.62a4.92,4.92,0,0,1,0,9.85H39.38a4.92,4.92,0,1,1,0-9.85H59.08V108A43.3,43.3,0,0,1,41,101.77L21.46,121.31a2.46,2.46,0,0,1-3.54,0L11.62,115a2.46,2.46,0,0,1,0-3.54l94.92-94.92a2.46,2.46,0,0,1,3.54,0l6.31,6.31a2.46,2.46,0,0,1,0,3.54ZM22.92,80.46A43.3,43.3,0,0,1,19.69,64V54.15a4.92,4.92,0,1,1,9.85,0V64a35.94,35.94,0,0,0,1.15,8.69ZM39.38,64V24.62a24.62,24.62,0,0,1,47.77-8.38Z"
-                      fill="#d8d8d8"
-                    />
-                    <rect
-                      x="-5.93"
-                      y="61.89"
-                      width="139.87"
-                      height="14.02"
-                      rx="2.87"
-                      ry="2.87"
-                      transform="translate(-29.97 65.43) rotate(-45)"
-                      fill="#c9070a"
-                    />
-                  </g>
-                </svg>
-              ) : client.properties.outputMuted ? (
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
-                  <title>muted_output</title>
-                  <g id="muted_output">
-                    <path
-                      d="M116.62,39a4.78,4.78,0,0,1-1.59.3l-6.29,3.63a45.42,45.42,0,0,1-13.33,57.64,49.4,49.4,0,0,1-5.82,3.62c-1.06.57-2.2.92-3.19,1.49-1.7,1-2.77,2.13-2.77,4.18a4.57,4.57,0,0,0,4.54,4.54,5.33,5.33,0,0,0,1.84-.35,54.49,54.49,0,0,0,26.94-75c-.12,0-.22,0-.34,0M88.18,13.58a4.57,4.57,0,0,0-4.54,4.54c0,2.06,1.06,3.19,2.77,4.18,1,.57,2.13.92,3.19,1.49a49.4,49.4,0,0,1,5.82,3.62,45.68,45.68,0,0,1,8.19,7.78l7-4a2.63,2.63,0,0,1,1.11-.34A54.31,54.31,0,0,0,90,13.94a5.33,5.33,0,0,0-1.84-.35"
-                      fill="#c9070a"
-                    />
-                    <path
-                      d="M59.46,71.4,32.77,86.81l19,19a4.51,4.51,0,0,0,3.19,1.35,4.57,4.57,0,0,0,4.54-4.54V71.4M54.92,20.88a4.51,4.51,0,0,0-3.19,1.35L28.11,45.85H9.53A4.57,4.57,0,0,0,5,50.38V77.62a4.57,4.57,0,0,0,4.54,4.54H22.25l37.2-21.48V25.42a4.57,4.57,0,0,0-4.54-4.54"
-                      fill="#c9070a"
-                    />
-                    <path
-                      d="M85.1,56.6l-7.87,4.54A10,10,0,0,1,77.61,64c0,8.58-8.23,7.09-8.23,12.48A4.53,4.53,0,0,0,73.92,81a4,4,0,0,0,1.77-.35A18.13,18.13,0,0,0,86.69,64a18.34,18.34,0,0,0-1.59-7.4M73.92,47a4.52,4.52,0,0,0-4.54,4.54,3.92,3.92,0,0,0,1.08,2.8l8.76-5.06a16.14,16.14,0,0,0-3.52-1.93A4,4,0,0,0,73.92,47"
-                      fill="#c9070a"
-                    />
-                    <path
-                      d="M100.87,47.49,93,52a27.15,27.15,0,0,1-8.36,33.87A36.79,36.79,0,0,1,79.24,89a4.54,4.54,0,0,0,1.84,8.72,5.24,5.24,0,0,0,1.77-.35,36.34,36.34,0,0,0,18-49.91M81,30.25A4.54,4.54,0,0,0,79.24,39a36.82,36.82,0,0,1,5.39,3.12,27,27,0,0,1,2.86,2.4l8.14-4.7A35.37,35.37,0,0,0,82.86,30.6,5.31,5.31,0,0,0,81,30.25"
-                      fill="#c9070a"
-                    />
-                    <path
-                      d="M126.57,43.71,10.42,110.77a2.88,2.88,0,0,1-3.93-1.05L4.33,106A2.88,2.88,0,0,1,5.38,102L121.53,35A2.88,2.88,0,0,1,125.46,36l2.16,3.75A2.88,2.88,0,0,1,126.57,43.71Z"
-                      fill="#c9070a"
-                    />
-                  </g>
-                </svg>
-              ) : client.properties.inputMuted ? (
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
-                  <title>muted_input</title>
-                  <g id="muted_input.svg">
-                    <path
-                      d="M88.62,54.15V64A24.69,24.69,0,0,1,64,88.62a25.26,25.26,0,0,1-8.38-1.46l-7.39,7.39A34,34,0,0,0,64,98.46,34.5,34.5,0,0,0,98.46,64V54.15a4.92,4.92,0,1,1,9.85,0V64a44.31,44.31,0,0,1-39.38,44v10.15H88.62a4.92,4.92,0,0,1,0,9.85H39.38a4.92,4.92,0,1,1,0-9.85H59.08V108A43.3,43.3,0,0,1,41,101.77L21.46,121.31a2.46,2.46,0,0,1-3.54,0L11.62,115a2.46,2.46,0,0,1,0-3.54l94.92-94.92a2.46,2.46,0,0,1,3.54,0l6.31,6.31a2.46,2.46,0,0,1,0,3.54ZM22.92,80.46A43.3,43.3,0,0,1,19.69,64V54.15a4.92,4.92,0,1,1,9.85,0V64a35.94,35.94,0,0,0,1.15,8.69ZM39.38,64V24.62a24.62,24.62,0,0,1,47.77-8.38Z"
-                      fill="#c9070a"
-                    />
-                  </g>
-                </svg>
-              ) : client.talkStatus == 1 ? (
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
-                  <title>player_on_v2</title>
-                  <g id="player_on_v2.svg">
-                    <path d="M64,128a64,64,0,1,1,64-64A64,64,0,0,1,64,128Z" fill="#00b4df" />
-                  </g>
-                </svg>
-              ) : (
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
-                  <title>player_off_v2</title>
-                  <g id="player_off_v2.svg">
-                    <path d="M64,128a64,64,0,1,1,64-64A64,64,0,0,1,64,128Z" fill="#3e4f5e" />
-                  </g>
-                </svg>
-              )}
+            <div
+              className={`client ${alignRight ? "client--align-right" : ""}`}
+              key={`${client.id}-${client.channel?.connection.id}`}
+            >
+              <TalkStatus client={client} showTsAvatar={showTsAvatar} />
              <p>{client.properties.nickname}</p>
            </div>
          );
@@ -143,6 +70,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 TeamSpeak-Client via the notifications</h5>
+          <br />
+          <h5>2. Enable remote apps inside the the TeamSpeak-Settings</h5>
+          <br />
+          <h5>3. Make sure to match the configuration port with the port in the TeamSpeak 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>
  );
 }
--- a/src/assets/icons/input_hardware.svg
+++ b/src/assets/icons/input_hardware.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <title>muted_hardware_input</title>
+  <g id="muted_hardware_input.svg">
+    <path
+      d="M88.62,54.15V64A24.69,24.69,0,0,1,64,88.62a25.26,25.26,0,0,1-8.38-1.46l-7.39,7.39A34,34,0,0,0,64,98.46,34.5,34.5,0,0,0,98.46,64V54.15a4.92,4.92,0,1,1,9.85,0V64a44.31,44.31,0,0,1-39.38,44v10.15H88.62a4.92,4.92,0,0,1,0,9.85H39.38a4.92,4.92,0,1,1,0-9.85H59.08V108A43.3,43.3,0,0,1,41,101.77L21.46,121.31a2.46,2.46,0,0,1-3.54,0L11.62,115a2.46,2.46,0,0,1,0-3.54l94.92-94.92a2.46,2.46,0,0,1,3.54,0l6.31,6.31a2.46,2.46,0,0,1,0,3.54ZM22.92,80.46A43.3,43.3,0,0,1,19.69,64V54.15a4.92,4.92,0,1,1,9.85,0V64a35.94,35.94,0,0,0,1.15,8.69ZM39.38,64V24.62a24.62,24.62,0,0,1,47.77-8.38Z"
+      fill="#d8d8d8"
+    />
+    <rect
+      x="-5.93"
+      y="61.89"
+      width="139.87"
+      height="14.02"
+      rx="2.87"
+      ry="2.87"
+      transform="translate(-29.97 65.43) rotate(-45)"
+      fill="#c9070a"
+    />
+  </g>
+</svg>
--- a/src/assets/icons/input_muted.svg
+++ b/src/assets/icons/input_muted.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <title>muted_input</title>
+  <g id="muted_input.svg">
+    <path
+      d="M88.62,54.15V64A24.69,24.69,0,0,1,64,88.62a25.26,25.26,0,0,1-8.38-1.46l-7.39,7.39A34,34,0,0,0,64,98.46,34.5,34.5,0,0,0,98.46,64V54.15a4.92,4.92,0,1,1,9.85,0V64a44.31,44.31,0,0,1-39.38,44v10.15H88.62a4.92,4.92,0,0,1,0,9.85H39.38a4.92,4.92,0,1,1,0-9.85H59.08V108A43.3,43.3,0,0,1,41,101.77L21.46,121.31a2.46,2.46,0,0,1-3.54,0L11.62,115a2.46,2.46,0,0,1,0-3.54l94.92-94.92a2.46,2.46,0,0,1,3.54,0l6.31,6.31a2.46,2.46,0,0,1,0,3.54ZM22.92,80.46A43.3,43.3,0,0,1,19.69,64V54.15a4.92,4.92,0,1,1,9.85,0V64a35.94,35.94,0,0,0,1.15,8.69ZM39.38,64V24.62a24.62,24.62,0,0,1,47.77-8.38Z"
+      fill="#c9070a"
+    />
+  </g>
+</svg>
--- a/src/assets/icons/muted_hardware_output.svg
+++ b/src/assets/icons/muted_hardware_output.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <title>muted_hardware_output</title>
+  <g id="muted_hardware_output.svg">
+    <path
+      d="M116.62,39a4.78,4.78,0,0,1-1.59.3l-6.29,3.63a45.42,45.42,0,0,1-13.33,57.64,49.4,49.4,0,0,1-5.82,3.62c-1.06.57-2.2.92-3.19,1.49-1.7,1-2.77,2.13-2.77,4.18a4.57,4.57,0,0,0,4.54,4.54,5.33,5.33,0,0,0,1.84-.35,54.49,54.49,0,0,0,26.94-75c-.12,0-.22,0-.34,0M88.18,13.58a4.57,4.57,0,0,0-4.54,4.54c0,2.06,1.06,3.19,2.77,4.18,1,.57,2.13.92,3.19,1.49a49.4,49.4,0,0,1,5.82,3.62,45.68,45.68,0,0,1,8.19,7.78l7-4a2.63,2.63,0,0,1,1.11-.34A54.31,54.31,0,0,0,90,13.94a5.33,5.33,0,0,0-1.84-.35"
+      fill="#d8d8d8"
+    />
+    <path
+      d="M59.46,71.4,32.77,86.81l19,19a4.51,4.51,0,0,0,3.19,1.35,4.57,4.57,0,0,0,4.54-4.54V71.4M54.92,20.88a4.51,4.51,0,0,0-3.19,1.35L28.12,45.85H9.54A4.57,4.57,0,0,0,5,50.38V77.62a4.57,4.57,0,0,0,4.54,4.54H22.26l37.2-21.48V25.42a4.57,4.57,0,0,0-4.54-4.54"
+      fill="#d8d8d8"
+    />
+    <path
+      d="M85.11,56.6l-7.87,4.54A10,10,0,0,1,77.62,64c0,8.58-8.23,7.09-8.23,12.48A4.53,4.53,0,0,0,73.93,81a4,4,0,0,0,1.77-.35A18.13,18.13,0,0,0,86.69,64a18.34,18.34,0,0,0-1.59-7.4M73.93,47a4.52,4.52,0,0,0-4.54,4.54,3.92,3.92,0,0,0,1.08,2.8l8.76-5.06a16.14,16.14,0,0,0-3.52-1.93A4,4,0,0,0,73.93,47"
+      fill="#d8d8d8"
+    />
+    <path
+      d="M100.87,47.49,93,52a27.15,27.15,0,0,1-8.36,33.87A36.79,36.79,0,0,1,79.25,89a4.54,4.54,0,0,0,1.84,8.72,5.24,5.24,0,0,0,1.77-.35,36.34,36.34,0,0,0,18-49.91M81,30.25A4.54,4.54,0,0,0,79.25,39a36.82,36.82,0,0,1,5.39,3.12,27,27,0,0,1,2.86,2.4l8.14-4.7A35.37,35.37,0,0,0,82.86,30.6,5.31,5.31,0,0,0,81,30.25"
+      fill="#d8d8d8"
+    />
+    <path
+      d="M126.57,43.71,10.42,110.77a2.88,2.88,0,0,1-3.93-1.05L4.33,106A2.88,2.88,0,0,1,5.38,102L121.53,35A2.88,2.88,0,0,1,125.46,36l2.16,3.75A2.88,2.88,0,0,1,126.57,43.71Z"
+      fill="#c9070a"
+    />
+  </g>
+</svg>
--- a/src/assets/icons/not_talk.svg
+++ b/src/assets/icons/not_talk.svg
@@ -0,0 +1,6 @@
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <title>player_off_v2</title>
+  <g id="player_off_v2.svg">
+    <path d="M64,128a64,64,0,1,1,64-64A64,64,0,0,1,64,128Z" fill="#3e4f5e" />
+  </g>
+</svg>
--- a/src/assets/icons/output_muted.svg
+++ b/src/assets/icons/output_muted.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <title>muted_output</title>
+  <g id="muted_output">
+    <path
+      d="M116.62,39a4.78,4.78,0,0,1-1.59.3l-6.29,3.63a45.42,45.42,0,0,1-13.33,57.64,49.4,49.4,0,0,1-5.82,3.62c-1.06.57-2.2.92-3.19,1.49-1.7,1-2.77,2.13-2.77,4.18a4.57,4.57,0,0,0,4.54,4.54,5.33,5.33,0,0,0,1.84-.35,54.49,54.49,0,0,0,26.94-75c-.12,0-.22,0-.34,0M88.18,13.58a4.57,4.57,0,0,0-4.54,4.54c0,2.06,1.06,3.19,2.77,4.18,1,.57,2.13.92,3.19,1.49a49.4,49.4,0,0,1,5.82,3.62,45.68,45.68,0,0,1,8.19,7.78l7-4a2.63,2.63,0,0,1,1.11-.34A54.31,54.31,0,0,0,90,13.94a5.33,5.33,0,0,0-1.84-.35"
+      fill="#c9070a"
+    />
+    <path
+      d="M59.46,71.4,32.77,86.81l19,19a4.51,4.51,0,0,0,3.19,1.35,4.57,4.57,0,0,0,4.54-4.54V71.4M54.92,20.88a4.51,4.51,0,0,0-3.19,1.35L28.11,45.85H9.53A4.57,4.57,0,0,0,5,50.38V77.62a4.57,4.57,0,0,0,4.54,4.54H22.25l37.2-21.48V25.42a4.57,4.57,0,0,0-4.54-4.54"
+      fill="#c9070a"
+    />
+    <path
+      d="M85.1,56.6l-7.87,4.54A10,10,0,0,1,77.61,64c0,8.58-8.23,7.09-8.23,12.48A4.53,4.53,0,0,0,73.92,81a4,4,0,0,0,1.77-.35A18.13,18.13,0,0,0,86.69,64a18.34,18.34,0,0,0-1.59-7.4M73.92,47a4.52,4.52,0,0,0-4.54,4.54,3.92,3.92,0,0,0,1.08,2.8l8.76-5.06a16.14,16.14,0,0,0-3.52-1.93A4,4,0,0,0,73.92,47"
+      fill="#c9070a"
+    />
+    <path
+      d="M100.87,47.49,93,52a27.15,27.15,0,0,1-8.36,33.87A36.79,36.79,0,0,1,79.24,89a4.54,4.54,0,0,0,1.84,8.72,5.24,5.24,0,0,0,1.77-.35,36.34,36.34,0,0,0,18-49.91M81,30.25A4.54,4.54,0,0,0,79.24,39a36.82,36.82,0,0,1,5.39,3.12,27,27,0,0,1,2.86,2.4l8.14-4.7A35.37,35.37,0,0,0,82.86,30.6,5.31,5.31,0,0,0,81,30.25"
+      fill="#c9070a"
+    />
+    <path
+      d="M126.57,43.71,10.42,110.77a2.88,2.88,0,0,1-3.93-1.05L4.33,106A2.88,2.88,0,0,1,5.38,102L121.53,35A2.88,2.88,0,0,1,125.46,36l2.16,3.75A2.88,2.88,0,0,1,126.57,43.71Z"
+      fill="#c9070a"
+    />
+  </g>
+</svg>
--- a/src/assets/icons/talk.svg
+++ b/src/assets/icons/talk.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <title>player_on_v2</title>
+  <g id="player_on_v2.svg">
+    <path d="M64,128a64,64,0,1,1,64-64A64,64,0,0,1,64,128Z" fill="#00b4df" />
+  </g>
+</svg>
--- a/src/components/TalkStatus.tsx
+++ b/src/components/TalkStatus.tsx
@@ -0,0 +1,47 @@
+import "@styles/TalkStatus.scss";
+import { IClient } from "react-teamspeak-remote-app-api";
+import MutedHardwareOutputSvg from "@assets/icons/muted_hardware_output.svg?react";
+import InputHardwareSvg from "@assets/icons/input_hardware.svg?react";
+import OutputMutedSvg from "@assets/icons/output_muted.svg?react";
+import InputMutedSvg from "@assets/icons/input_muted.svg?react";
+import TalkingSvg from "@assets/icons/talk.svg?react";
+import NotTalkingSvg from "@assets/icons/not_talk.svg?react";
+
+// TODO outsource svg to files
+export default function TalkStatus({ client, showTsAvatar }: { client: IClient; showTsAvatar: boolean }) {
+  function getTeamSpeakAvatarUrl(): string {
+    // MyTeamSpeak avatar property looks like this:
+    // 1,https://storage.googleapis.com/ts-sys-myts-avatars/d4864285-0b77-4f2d-b0c5-1ae585e66ee5/258947109;2,https://storage.googleapis.com/ts-sys-myts-avatars/d4864285-0b77-4f2d-b0c5-1ae585e66ee5/71073868;4,https://storage.googleapis.com/ts-sys-myts-avatars/d4864285-0b77-4f2d-b0c5-1ae585e66ee5/1260429936
+    // 2, is the avatar we want to use. The other ones are away and busy avatars.
+    return (
+      client.properties.myteamspeakAvatar.split("2,")[1] ??
+      client.properties.myteamspeakAvatar.split(";")[0].split(",")[1]
+    );
+  }
+
+  return (
+    <div className={`talkStatus ${showTsAvatar ? "talkStatus--avatar" : ""} `}>
+      {showTsAvatar ? (
+        <div className={`avatar ${client.talkStatus === 1 ? "avatar--talk" : ""}`}>
+          <img src={getTeamSpeakAvatarUrl()} alt="" />
+        </div>
+      ) : null}
+
+      {client.properties.outputHardware === false ? (
+        <MutedHardwareOutputSvg />
+      ) : client.properties.inputHardware === false ? (
+        <InputHardwareSvg />
+      ) : client.properties.outputMuted ? (
+        <OutputMutedSvg />
+      ) : client.properties.inputMuted ? (
+        <InputMutedSvg />
+      ) : client.talkStatus === 1 && !showTsAvatar ? (
+        <TalkingSvg />
+      ) : !showTsAvatar ? (
+        <NotTalkingSvg />
+      ) : (
+        <svg></svg>
+      )}
+    </div>
+  );
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,11 +1,10 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
 import App from "./App.tsx";
 import "@styles/index.scss";
+import { HashRouter } from "react-router-dom";

-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <BrowserRouter>
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <HashRouter>
    <App />
-  </BrowserRouter>
+  </HashRouter>
 );
--- a/src/styles/Generator.scss
+++ b/src/styles/Generator.scss
@@ -0,0 +1,261 @@
+// Breakpoints
+$breakpoint-1: 1200px;
+$breakpoint-2: 790px;
+$breakpoint-3: 600px;
+
+// Tooltip animation keyframes
+@keyframes tooltipAnimation {
+  0% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.generator {
+  background-color: #232528;
+  color: #fff;
+  width: 100%;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  gap: 50px;
+  padding: 50px 0;
+
+  .headline {
+    text-align: center;
+    letter-spacing: 1.8px;
+  }
+
+  .instructions {
+    border-bottom: 2px solid #75797773;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 10px 50px;
+    flex-wrap: wrap;
+    padding-bottom: 10px;
+
+    p,
+    a {
+      font-size: 0.8rem;
+    }
+
+    p {
+      color: #b4b4b4;
+    }
+  }
+
+  .output {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    column-gap: 20px;
+    position: relative;
+    height: 50px;
+
+    .url {
+      white-space: nowrap;
+      overflow: auto;
+      font-weight: bold;
+      width: 500px;
+      padding: 5px 10px;
+      background-color: #313136;
+      border-radius: 5px;
+      text-align: center;
+    }
+
+    .copy {
+      padding: 5px 10px;
+      border: 2px solid #31f39973;
+      transition: all 100ms ease-in-out;
+
+      &:hover {
+        border-color: #42d486;
+        background-color: transparent;
+        color: #fff;
+      }
+    }
+
+    .copiedTooltip {
+      opacity: 0;
+      position: absolute;
+      right: -90px;
+      background-color: #31f399;
+      color: #202024;
+      padding: 5px 10px;
+      border-radius: 5px;
+      font-size: 0.8rem;
+      font-weight: bold;
+    }
+  }
+
+  .generatorContent {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 0 50px;
+    gap: 30px;
+    width: 100%;
+
+    .configurations {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      height: 100%;
+      flex: 1;
+      gap: 50px;
+
+      .options {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 100px;
+        user-select: none;
+
+        section {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: left;
+          gap: 10px;
+        }
+
+        .option {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: left;
+          column-gap: 10px;
+          width: 100%;
+
+          input {
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border: 2px solid #31f399;
+            border-radius: 5px;
+            background-color: #202024;
+            outline: none;
+            transition: all 200ms ease-in-out;
+            position: relative;
+            color: #fff;
+            text-align: center;
+
+            &::-webkit-outer-spin-button,
+            &::-webkit-inner-spin-button {
+              -webkit-appearance: none;
+              margin: 0;
+            }
+
+            // Cross when checked styles
+            &:checked {
+              &:after {
+                content: "";
+                position: absolute;
+                width: 10px;
+                height: 2px;
+                background-color: #31f399;
+                transform: rotate(45deg);
+              }
+              &:before {
+                content: "";
+                position: absolute;
+                width: 10px;
+                height: 2px;
+                background-color: #31f399;
+                transform: rotate(-45deg);
+              }
+
+              &:after,
+              &:before {
+                top: 7px;
+                left: 3px;
+              }
+            }
+            cursor: pointer;
+          }
+
+          input[type="number"] {
+            width: 50px;
+            height: 25px;
+            cursor: text;
+            -moz-appearance: textfield;
+            appearance: textfield;
+          }
+
+          label {
+            cursor: pointer;
+          }
+        }
+      }
+    }
+
+    // Preview styles
+    .preview {
+      display: flex;
+      flex: 1;
+      background-image: url("/images/viewer_example_background.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+      border: 2px solid #31f39973;
+
+      iframe {
+        width: 100%;
+        min-height: 500px;
+        border: none;
+      }
+    }
+  }
+
+  // Responsive styles
+  @media screen and (max-width: $breakpoint-1) {
+    .generatorContent {
+      flex-direction: column;
+
+      .preview {
+        width: 80%;
+      }
+    }
+  }
+
+  @media screen and (max-width: $breakpoint-2) {
+    .output {
+      .url {
+        width: 300px;
+      }
+    }
+
+    .generatorContent {
+      .preview {
+        width: 100%;
+      }
+    }
+  }
+
+  @media screen and (max-width: $breakpoint-3) {
+    .output {
+      .url {
+        width: 200px;
+      }
+
+      .generatorContent {
+        .configurations {
+          .options {
+            flex-direction: column;
+            gap: 30px;
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/styles/TalkStatus.scss
+++ b/src/styles/TalkStatus.scss
@@ -0,0 +1,42 @@
+.talkStatus {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &--avatar {
+    margin-right: 4rem;
+
+    svg {
+      width: 6rem !important;
+      margin-left: -9.5rem;
+    }
+  }
+
+  svg {
+    width: 5rem;
+    aspect-ratio: 1/1;
+    margin-right: 0.5rem;
+    filter: drop-shadow(0 0 0.75rem rgba(15, 15, 15, 0.1));
+  }
+}
+
+.avatar {
+  $border-radius: 100rem;
+  $border-width: 0.7rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1/1;
+  border: $border-width solid transparent;
+  border-radius: $border-radius;
+
+  img {
+    width: 10rem;
+    border-radius: $border-radius;
+  }
+
+  &--talk {
+    border: $border-width solid rgb(0, 195, 255);
+  }
+}
--- a/src/styles/Viewer.scss
+++ b/src/styles/Viewer.scss
@@ -1,48 +1,52 @@
+//* Viewer styles
+// this file contains styles for the viewer component
+// styles for the viewer component should not be modified somewhere else
+
 .viewer {
  display: flex;
  flex-direction: column;
-  gap: 0 0;
-  padding: 1rem;
+  padding: 0.3rem;
+  gap: 0.3rem;
+
+  &--align-right {
+    align-items: flex-end;
+  }
+
+  h1 {
+    font-size: 4.5rem;
+  }
+
+  h1,
+  p {
+    background-color: #2f313680;
+    padding: 0.25rem 1.2rem;
+    border-radius: 1rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 20ch;
+    user-select: none;
+  }

  .channelNameContainer {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
-    h3 {
-      font-size: 1.7rem;
-      font-weight: 500;
-      margin: 0;
-      background-color: rgba(47, 49, 54, 0.5);
-      padding: 0.25rem 0.5rem;
-      border-radius: 0.25rem;
-      color: white;
-    }
  }

  .client {
    display: flex;
    flex-direction: row;
-    gap: 0 0;
+    gap: 0.5rem 0.5rem;
    align-items: center;
-    margin: 0.5rem 0;

-    svg {
-      width: 2.8rem;
-      height: 2.8rem;
-      margin-right: 0.5rem;
+    &--align-right {
+      flex-direction: row-reverse;
    }
-    p {
-      margin: 0;
-      color: white;
-      background-color: rgba(47, 49, 54, 0.5);
-      padding: 0.25rem 0.5rem;
-      border-radius: 0.25rem;

-      // ellipsis after 22 characters
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: 20ch;
+    // client name styles
+    p {
+      font-size: 4rem;
    }
  }
 }
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,5 +1,109 @@
+// Reset styles for all elements
 * {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
-  font-size: 3rem;
+  font-size: 1rem;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+// Set up basic styles for the entire page
+body,
+html {
+  min-height: 100vh;
+  min-width: 100%;
+  display: flex;
+  overflow-x: hidden;
+  color: #fff;
+}
+
+// Ensure the root element takes up the full viewport
+#root {
+  height: 100%;
+  min-width: 100%;
+}
+
+// Headline styles
+h1 {
+  font-size: 1.8rem;
+}
+
+h2 {
+  font-size: 1.5rem;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+h4 {
+  font-size: 1.1rem;
+}
+
+h5 {
+  font-size: 1rem;
+}
+
+h6 {
+  font-size: 0.9rem;
+}
+
+// Common styles for heading elements
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: bold;
+}
+
+// Text styles
+a {
+  color: #3abe78;
+  font-weight: bold;
+  text-decoration: none;
+  transition: all 100ms ease-in-out;
+
+  &:hover {
+    color: #31f399;
+  }
+}
+
+// Button styles
+button {
+  background-color: #202024;
+  color: #fff;
+  font-weight: bold;
+  border: 2px solid #31f399;
+  border-radius: 5px;
+  padding: 10px 20px;
+  cursor: pointer;
+  transition: all 300ms ease-in-out;
+
+  &:hover {
+    background-color: #42d486;
+    color: #202024;
+  }
+}
+
+// Custom dark-themed scrollbar
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background: #363638;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #31f39973;
+  border-radius: 10px;
+
+  &:hover {
+    background: #48ee95;
+  }
 }
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,8 @@
    },

    /* Bundler mode */
-    "moduleResolution": "bundler",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true,
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
-import { viteSingleFile } from "vite-plugin-singlefile"
 import path from 'path';
+import svgr from "vite-plugin-svgr";

 // https://vitejs.dev/config/
 export default defineConfig({
@@ -21,5 +21,5 @@ export default defineConfig({
    outDir: 'dist',
    emptyOutDir: true,
  },
-  plugins: [react(), viteSingleFile({ useRecommendedBuildConfig: false })],
+  plugins: [react(), svgr()],
 })
Author	SHA1	Message	Date
DerTyp7	7f5f253c21	Add SVG icons and integrate vite-plugin-svgr for improved asset handling	2025-01-24 16:14:03 +01:00
Janis	9c94a351ee	Add option to align right (#124 )	2025-01-24 14:39:17 +01:00
Janis	9de39752f3	Merge branch 'main' into dev	2025-01-24 13:41:41 +01:00
DerTyp7	2499582f66	Update header title in Generator component to reflect TeamSpeak branding	2025-01-24 13:39:35 +01:00
DerTyp7	ad26dd62ad	Update Viewer component to reflect TeamSpeak branding in names and descriptions	2025-01-24 13:39:06 +01:00
DerTyp7	0a026baa9b	Rename project to teamspeak-obs-overlay and update related references	2025-01-24 13:37:20 +01:00
DerTyp7	a2b8f3620a	Update package-lock.json to version 2.2.0 and replace react-ts5-remote-app-api with react-teamspeak-remote-app-api	2025-01-24 13:32:42 +01:00
DerTyp7	06b940b7c9	Fix README and package.json to update API name from TeamSpeak5 to TeamSpeak	2025-01-24 13:31:50 +01:00
DerTyp7	c75d81eb43	Update dependencies and version to 2.2.0	2025-01-24 01:53:56 +01:00
Janis	529d1acbb6	Merge pull request #113 from DerTyp7/dependabot/npm_and_yarn/dev/typescript-eslint/eslint-plugin-7.0.0 Bump @typescript-eslint/eslint-plugin from 6.20.0 to 7.0.0	2025-01-24 00:08:32 +01:00
dependabot[bot]	e7e295cad1	Bump @types/jest from 29.5.11 to 29.5.12 Bumps [@types/jest](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/jest) from 29.5.11 to 29.5.12. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/jest) --- updated-dependencies: - dependency-name: "@types/jest" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2025-01-24 00:06:12 +01:00
Janis	10e8752bca	Merge pull request #111 from DerTyp7/dependabot/npm_and_yarn/dev/types/jest-29.5.12 Bump @types/jest from 29.5.11 to 29.5.12	2025-01-24 00:02:22 +01:00
dependabot[bot]	6eb5785bfd	Bump @typescript-eslint/eslint-plugin from 6.20.0 to 7.0.0 Bumps [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin) from 6.20.0 to 7.0.0. - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v7.0.0/packages/eslint-plugin) --- updated-dependencies: - dependency-name: "@typescript-eslint/eslint-plugin" dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com>	2024-03-01 01:54:49 +00:00
dependabot[bot]	6c912c37e4	Bump @types/jest from 29.5.11 to 29.5.12 Bumps [@types/jest](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/jest) from 29.5.11 to 29.5.12. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/jest) --- updated-dependencies: - dependency-name: "@types/jest" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2024-03-01 01:54:09 +00:00
Janis	d37c7326c3	Merge pull request #109 from DerTyp7/dev update packages	2024-02-05 17:34:39 +01:00
Janis	4c1a6f92b9	Merge pull request #104 from DerTyp7/dependabot/npm_and_yarn/dev/typescript-eslint/eslint-plugin-6.20.0 Bump @typescript-eslint/eslint-plugin from 6.7.4 to 6.20.0	2024-02-05 17:31:41 +01:00
dependabot[bot]	1f3868fc3a	Bump @typescript-eslint/eslint-plugin from 6.7.4 to 6.20.0 Bumps [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin) from 6.7.4 to 6.20.0. - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v6.20.0/packages/eslint-plugin) --- updated-dependencies: - dependency-name: "@typescript-eslint/eslint-plugin" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>	2024-02-05 16:30:35 +00:00
Janis	632b2ad1ef	Merge pull request #105 from DerTyp7/dependabot/npm_and_yarn/dev/types/react-dom-18.2.18 Bump @types/react-dom from 18.2.15 to 18.2.18	2024-02-05 17:29:54 +01:00
Janis	9519a19b5c	Merge pull request #106 from DerTyp7/dependabot/npm_and_yarn/dev/eslint-plugin-react-refresh-0.4.5 Bump eslint-plugin-react-refresh from 0.4.3 to 0.4.5	2024-02-05 17:29:34 +01:00
dependabot[bot]	a438f81c72	Bump eslint-plugin-react-refresh from 0.4.3 to 0.4.5 Bumps [eslint-plugin-react-refresh](https://github.com/ArnaudBarre/eslint-plugin-react-refresh) from 0.4.3 to 0.4.5. - [Release notes](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/releases) - [Changelog](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/blob/main/CHANGELOG.md) - [Commits](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/compare/v0.4.3...v0.4.5) --- updated-dependencies: - dependency-name: eslint-plugin-react-refresh dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2024-02-05 16:29:16 +00:00
Janis	6b3d44796f	Merge pull request #107 from DerTyp7/dependabot/npm_and_yarn/dev/react-router-dom-6.21.3 Bump react-router-dom from 6.21.1 to 6.21.3	2024-02-05 17:29:03 +01:00
Janis	c272df6397	Merge pull request #108 from DerTyp7/dependabot/npm_and_yarn/dev/vitejs/plugin-react-swc-3.6.0 Bump @vitejs/plugin-react-swc from 3.5.0 to 3.6.0	2024-02-05 17:28:37 +01:00
dependabot[bot]	1eae9e0017	Bump @vitejs/plugin-react-swc from 3.5.0 to 3.6.0 Bumps [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) from 3.5.0 to 3.6.0. - [Release notes](https://github.com/vitejs/vite-plugin-react-swc/releases) - [Changelog](https://github.com/vitejs/vite-plugin-react-swc/blob/main/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite-plugin-react-swc/compare/v3.5.0...v3.6.0) --- updated-dependencies: - dependency-name: "@vitejs/plugin-react-swc" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>	2024-02-01 02:00:07 +00:00
dependabot[bot]	94c5a822fe	Bump react-router-dom from 6.21.1 to 6.21.3 Bumps [react-router-dom](https://github.com/remix-run/react-router/tree/HEAD/packages/react-router-dom) from 6.21.1 to 6.21.3. - [Release notes](https://github.com/remix-run/react-router/releases) - [Changelog](https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/CHANGELOG.md) - [Commits](https://github.com/remix-run/react-router/commits/react-router-dom@6.21.3/packages/react-router-dom) --- updated-dependencies: - dependency-name: react-router-dom dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2024-02-01 01:59:59 +00:00
dependabot[bot]	509ca975bd	Bump @types/react-dom from 18.2.15 to 18.2.18 Bumps [@types/react-dom](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react-dom) from 18.2.15 to 18.2.18. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react-dom) --- updated-dependencies: - dependency-name: "@types/react-dom" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2024-02-01 01:59:44 +00:00
Janis	43f3c4f4ac	Merge pull request #103 from DerTyp7/dev Version 2.1.1	2024-01-25 21:44:36 +01:00
Janis	171a64da44	Update version numbers	2024-01-25 21:41:47 +01:00
dertyp7	01aaf66e55	Update dependencies in package.json	2024-01-25 20:10:04 +01:00
Janis	0e456bee91	Merge pull request #97 from DerTyp7/dependabot/npm_and_yarn/dev/types/jest-29.5.11 Bump @types/jest from 29.5.2 to 29.5.11	2024-01-25 20:07:10 +01:00
Janis	6bc2994a91	Merge pull request #98 from DerTyp7/dependabot/npm_and_yarn/dev/react-router-dom-6.21.1 Bump react-router-dom from 6.18.0 to 6.21.1	2024-01-25 20:06:55 +01:00
Janis	716d306a87	Merge pull request #99 from DerTyp7/dependabot/npm_and_yarn/dev/typescript-5.3.3 Bump typescript from 5.2.2 to 5.3.3	2024-01-25 20:06:32 +01:00
dertyp7	cf0f472c70	Merge branch 'main' into dev	2024-01-25 19:57:38 +01:00
dependabot[bot]	3159a86e8f	Bump typescript from 5.2.2 to 5.3.3 Bumps [typescript](https://github.com/Microsoft/TypeScript) from 5.2.2 to 5.3.3. - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Commits](https://github.com/Microsoft/TypeScript/compare/v5.2.2...v5.3.3) --- updated-dependencies: - dependency-name: typescript dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>	2024-01-25 18:52:29 +00:00
Janis	71fb6c565e	Merge pull request #100 from DerTyp7/dependabot/npm_and_yarn/dev/eslint-8.56.0 Bump eslint from 8.53.0 to 8.56.0	2024-01-25 19:51:37 +01:00
Janis	254d29fe6d	Merge pull request #101 from DerTyp7/dependabot/npm_and_yarn/vite-4.5.2 Bump vite from 4.5.0 to 4.5.2	2024-01-25 19:49:04 +01:00
dertyp7	13f621f17b	Update package-lock.json version to 2.1.0	2024-01-25 19:44:27 +01:00
Janis	337c39935c	Update README.md	2024-01-25 00:43:12 +01:00
Janis	d3cc20d58b	Update README.md	2024-01-25 00:41:47 +01:00
Janis	cf5c0ae705	Change to GH-Pages custom url	2024-01-25 00:32:09 +01:00
dependabot[bot]	69db8c5bcc	Bump vite from 4.5.0 to 4.5.2 Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 4.5.0 to 4.5.2. - [Release notes](https://github.com/vitejs/vite/releases) - [Changelog](https://github.com/vitejs/vite/blob/v4.5.2/packages/vite/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite/commits/v4.5.2/packages/vite) --- updated-dependencies: - dependency-name: vite dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com>	2024-01-20 05:11:49 +00:00
dependabot[bot]	fd2863b355	Bump eslint from 8.53.0 to 8.56.0 Bumps [eslint](https://github.com/eslint/eslint) from 8.53.0 to 8.56.0. - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](https://github.com/eslint/eslint/compare/v8.53.0...v8.56.0) --- updated-dependencies: - dependency-name: eslint dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>	2024-01-01 01:17:15 +00:00
dependabot[bot]	8ffbe023eb	Bump react-router-dom from 6.18.0 to 6.21.1 Bumps [react-router-dom](https://github.com/remix-run/react-router/tree/HEAD/packages/react-router-dom) from 6.18.0 to 6.21.1. - [Release notes](https://github.com/remix-run/react-router/releases) - [Changelog](https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/CHANGELOG.md) - [Commits](https://github.com/remix-run/react-router/commits/react-router-dom@6.21.1/packages/react-router-dom) --- updated-dependencies: - dependency-name: react-router-dom dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>	2024-01-01 01:14:26 +00:00
dependabot[bot]	a9edeec900	Bump @types/jest from 29.5.2 to 29.5.11 Bumps [@types/jest](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/jest) from 29.5.2 to 29.5.11. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/jest) --- updated-dependencies: - dependency-name: "@types/jest" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2024-01-01 01:14:13 +00:00
Janis	3e5ec1862e	fix remove emtpy channelname	2023-11-12 23:18:25 +01:00
Janis	34ffedc294	update version	2023-11-12 23:13:08 +01:00
Janis	6d7ee8905b	show instructions when client cant connect	2023-11-12 23:12:37 +01:00
Janis	442e8f05e6	update version	2023-11-12 19:57:28 +01:00
Janis	f30cd26393	fix generator font size	2023-11-12 19:57:10 +01:00
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
Janis	b1da52ad1d	Merge pull request #88 from DerTyp7/dev Implement generator to simplify customization	2023-11-12 18:24:08 +01:00
Janis	dbc2bd422d	Merge pull request #87 from DerTyp7/feature_implement-url-generator Feature implement URL generator	2023-11-12 18:21:44 +01:00
Janis	86d2eb4c50	remove vite-plugin-singlefile	2023-11-12 18:19:14 +01:00
Janis	63bef6e11d	update readme	2023-11-12 18:16:18 +01:00
Janis	e65eb5b3c4	Update README.md	2023-11-12 18:14:30 +01:00
Janis	e847dde41d	update readme	2023-11-12 18:14:08 +01:00
Janis	5f0ca2c209	clean up	2023-11-12 18:03:20 +01:00
Janis	a4f64c3781	add instructions	2023-11-12 17:24:34 +01:00
Janis	9870fdcdb4	add responsive design	2023-11-12 17:16:58 +01:00
Janis	ce7aee8481	fix viewer style	2023-11-12 16:41:09 +01:00
Janis	5ef2facfec	better generator	2023-11-12 16:28:42 +01:00
DerTyp7	bbd10af0dc	add basic generator structure	2023-11-10 11:20:58 +01:00
Janis	e2a8472cf9	add generator url	2023-11-05 17:40:16 +01:00
Janis	ed78b23bb1	add router	2023-11-05 17:32:27 +01:00
Janis	58fa81eb71	change version to 2.0.0	2023-11-05 17:20:01 +01:00
Janis	3a75c91bbd	use moduleResolution node	2023-11-05 17:19:14 +01:00
Janis	fa64de9666	update vite	2023-11-05 17:16:22 +01:00
Janis	847cb76bca	Merge pull request #83 from DerTyp7/dependabot/npm_and_yarn/dev/eslint-8.53.0 Bump eslint from 8.45.0 to 8.53.0	2023-11-05 17:10:25 +01:00
Janis	6a7dd4455e	Merge pull request #84 from DerTyp7/dependabot/npm_and_yarn/dev/typescript-eslint/parser-6.9.1 Bump @typescript-eslint/parser from 6.2.1 to 6.9.1	2023-11-05 17:10:19 +01:00
dependabot[bot]	61678b3ed4	Bump eslint from 8.45.0 to 8.53.0 Bumps [eslint](https://github.com/eslint/eslint) from 8.45.0 to 8.53.0. - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](https://github.com/eslint/eslint/compare/v8.45.0...v8.53.0) --- updated-dependencies: - dependency-name: eslint dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>	2023-11-05 16:10:14 +00:00
Janis	fea7f03d20	Merge pull request #85 from DerTyp7/dependabot/npm_and_yarn/dev/types/react-dom-18.2.14 Bump @types/react-dom from 18.2.7 to 18.2.14	2023-11-05 17:10:12 +01:00
dependabot[bot]	7551dd421c	Bump @typescript-eslint/parser from 6.2.1 to 6.9.1 Bumps [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/parser) from 6.2.1 to 6.9.1. - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/parser/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v6.9.1/packages/parser) --- updated-dependencies: - dependency-name: "@typescript-eslint/parser" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>	2023-11-05 16:10:00 +00:00
dependabot[bot]	18b4c0c67d	Bump @types/react-dom from 18.2.7 to 18.2.14 Bumps [@types/react-dom](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react-dom) from 18.2.7 to 18.2.14. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react-dom) --- updated-dependencies: - dependency-name: "@types/react-dom" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2023-11-05 16:09:55 +00:00
Janis	e75116d6c9	Merge pull request #86 from DerTyp7/dependabot/npm_and_yarn/dev/types/react-18.2.35 Bump @types/react from 18.2.23 to 18.2.35	2023-11-05 17:09:20 +01:00
dependabot[bot]	176cdc79ed	Bump @types/react from 18.2.23 to 18.2.35 Bumps [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react) from 18.2.23 to 18.2.35. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react) --- updated-dependencies: - dependency-name: "@types/react" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2023-11-05 16:08:39 +00:00
Janis	6ca724bd77	Merge pull request #82 from DerTyp7/dependabot/npm_and_yarn/react-router-dom-6.18.0 Bump react-router-dom from 6.14.2 to 6.18.0	2023-11-05 17:07:53 +01:00
Janis	3bd6c60987	dependabot should target dev branch	2023-11-05 17:06:49 +01:00
dependabot[bot]	eb73c51ee1	Bump react-router-dom from 6.14.2 to 6.18.0 Bumps [react-router-dom](https://github.com/remix-run/react-router/tree/HEAD/packages/react-router-dom) from 6.14.2 to 6.18.0. - [Release notes](https://github.com/remix-run/react-router/releases) - [Changelog](https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/CHANGELOG.md) - [Commits](https://github.com/remix-run/react-router/commits/react-router-dom@6.18.0/packages/react-router-dom) --- updated-dependencies: - dependency-name: react-router-dom dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>	2023-11-01 01:11:44 +00:00
Janis	945c3ec582	Update bug_report.md	2023-10-23 15:12:11 +02:00
Janis	2c24379bbb	Update README.md	2023-10-21 16:28:24 +02:00
Janis	d67a243c5d	Update README	2023-10-07 23:04:42 +02:00
Janis	3174145067	update package.json	2023-10-07 22:59:51 +02:00
Janis	c40b33de2b	update prettier config	2023-10-07 22:53:39 +02:00
Janis	7974a08b24	remove old eslint comment	2023-10-07 22:50:45 +02:00
Janis	ab38a1b1fe	add . to meta	2023-10-07 22:48:23 +02:00
Janis	bb7d2d61c6	add meta tags	2023-10-07 22:46:04 +02:00
Janis	81eed1e0ab	Delete .github/workflows/eslint.yml	2023-10-07 22:39:04 +02:00
Janis	d75e11f3cd	Create eslint.yml	2023-10-07 22:36:17 +02:00
Janis	c5a8f484b7	Update README.md	2023-10-07 20:32:00 +02:00
Janis	c5b801d3d5	Update README.md	2023-10-07 17:29:33 +02:00
Janis	c86618f78f	add better readability	2023-10-07 17:26:20 +02:00
Janis	2f1e91c199	add new common issue	2023-10-07 17:24:26 +02:00