change version to 1.3.1

Bump @types/node from 20.8.0 to 20.8.3

.github/dependabot.yml

@@ -7,4 +7,4 @@ updates:
   - package-ecosystem: "npm" # See documentation for possible values
     directory: "/" # Location of package manifests
     schedule:
-      interval: "weekly"
+      interval: "monthly"

.github/workflows/deploy.yml

@@ -0,0 +1,31 @@
+name: Deploy to GitHub Pages on Release
+
+on:
+  release:
+    types:
+      - created
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3.9.3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist

README.md

@@ -1,53 +1,86 @@
 # Teamspeak5-OBS-Overlay
 
-This is a overlay for OBS to show the current talking clients in your Teamspeak 5 Channel.  
+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 overlay uses the [Teamspeak 5 Remote App API](https://github.com/DerTyp7/react-ts5-remote-app-api).
+
 ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/d0ab06f2-1a36-479d-826f-bd4bd3d405b7)
 
 - [Teamspeak5-OBS-Overlay](#teamspeak5-obs-overlay)
-  - [Setup](#setup)
-    - [Customization (Parameters)](#customization-parameters)
+  - [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)
   - [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)
 
-## Setup
+## Usage
 
-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. Go into the Teamspeak 5 Settings and enable "Remote Apps"  
+### Quick instructions (online usage only)
+
+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.
+
+### Instructions
+
+1. Go into the Teamspeak 5 Settings and enable "Remote Apps"  
    ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/b31bc553-fde2-46ab-b07c-d3c81339cc7d)
 
-3. Add a new Browser Source to your OBS Scene  
+2. 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)
 
-4. Tick the checkbox "Local File" and select the downloaded `ts5-overlay-{version}.html`  
-    4.1. Set the width and height to your desired size (e.g. 1920x1080 OR 1280x720)  
-   ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/5ad8ce69-645b-45e7-acc3-ce7ba8d7f8ab)
+3. Configure **Browser Source** (Use **ONE** of the following methods)
 
+   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`
+
+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)  
    ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/40faa435-e128-415f-98eb-a9e8809e8f65)
 
-### Customization (Parameters)
+## Settings (Parameters)
 
-You can customize the overlay by adding parameters to the URL of the Browser Source.
+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 below
+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: `file://C:/Users/.../ts5-overlay-{version}.html?parameter1=value1&parameter2=value2`  
-Real example: `file://C:/Users/.../ts5-overlay-{version}.html?remoteAppPort=5899&hideNonTalking=true&clientLimit=5`
+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`_
 
-This is a list of all available parameters (all parameters are optional):
+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         |
 | ----------------- | ---------------------------------------- | ------- | --------------- |

package.json

@@ -1,7 +1,9 @@
 {
   "name": "ts5-obs-overlay",
   "private": true,
-  "version": "1.2.0",
+  "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",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -10,26 +12,25 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@types/node": "^20.4.2",
-    "jest": "^29.6.1",
+    "@types/node": "^20.8.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.14.1",
-    "react-ts5-remote-app-api": "^1.0.5",
-    "sass": "^1.63.6"
+    "react-router-dom": "^6.14.2",
+    "react-ts5-remote-app-api": "^1.1.1",
+    "sass": "^1.68.0"
   },
   "devDependencies": {
     "@types/jest": "^29.5.2",
-    "@types/react": "^18.2.14",
+    "@types/react": "^18.2.23",
     "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.62.0",
+    "@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.4",
+    "vite": "^4.4.7",
     "vite-plugin-singlefile": "^0.13.5"
   }
 }

src/App.tsx

@@ -1,13 +1,21 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import "@styles/App.scss";
-import Viewer from "./Viewer";
+
 import { useSearchParams } from "react-router-dom";
 import useTSRemoteApp, { IClient } from "react-ts5-remote-app-api";
+import Viewer from "./Viewer";
 
 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 (