diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 4020bcb..ec84c4e 100644
--- 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",
},
-}
+};
diff --git a/.prettierrc b/.prettierrc
index f86d44a..944da1a 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,7 +1,7 @@
{
"tabWidth": 2,
"useTabs": false,
- "printWidth": 120,
+ "printWidth": 180,
"singleQuote": false,
"semi": true
}
diff --git a/README.md b/README.md
index 978bdf3..cc5e403 100644
--- a/README.md
+++ b/README.md
@@ -1,107 +1,59 @@
-# 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 [TeamSpeak5 Remote App API](https://github.com/DerTyp7/react-ts5-remote-app-api).
-- [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://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
+ 
-### 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://dertyp7.github.io/ts5-obs-overlay/generate](https://dertyp7.github.io/ts5-obs-overlay/generate)
+
+2. Follow the instructions on the website
+
+3. Go into the TeamSpeak5 Settings and enable "Remote Apps"
-2. Add a new Browser Source to your OBS Scene
+4. Add a new Browser Source to your OBS Scene
-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
+ 
- 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)
- 
- 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 ratio of 1:1 or 1:2 (e.g. 1500x3000 OR 1000x2000)
-4. Set the width and height to your desired size. Recommended is a ratio of 1:1 or 1:2 (e.g. 1500x3000 OR 1000x2000)
-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)
-## 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
- 
-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¶meter2=value2`_
-**Offline:** _`file://C:/Users/.../ts5-overlay-{version}.html?parameter1=value1¶meter2=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 notifiaction in your Teamspeak Client.
+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.
@@ -118,3 +70,13 @@ Possible fixes:
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.
diff --git a/package-lock.json b/package-lock.json
index dbf056d..3cd4a27 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,8 +26,7 @@
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"typescript": "^5.2.2",
- "vite": "^4.5.0",
- "vite-plugin-singlefile": "^0.13.5"
+ "vite": "^4.5.0"
}
},
"node_modules/@aashutoshrathi/word-wrap": {
@@ -1026,9 +1025,9 @@
"devOptional": true
},
"node_modules/@types/react": {
- "version": "18.2.35",
- "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.35.tgz",
- "integrity": "sha512-LG3xpFZ++rTndV+/XFyX5vUP7NI9yxyk+MQvBDq+CVs8I9DLSc3Ymwb1Vmw5YDoeNeHN4PDZa3HylMKJYT9PNQ==",
+ "version": "18.2.37",
+ "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.37.tgz",
+ "integrity": "sha512-RGAYMi2bhRgEXT3f4B92WTohopH6bIXw05FuGlmJEnv/omEn190+QYEIYxIAuIBdKgboYYdVved2p1AxZVQnaw==",
"devOptional": true,
"dependencies": {
"@types/prop-types": "*",
@@ -1037,9 +1036,9 @@
}
},
"node_modules/@types/react-dom": {
- "version": "18.2.14",
- "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.14.tgz",
- "integrity": "sha512-V835xgdSVmyQmI1KLV2BEIUgqEuinxp9O4G6g3FqO/SqLac049E53aysv0oEFD2kHfejeKU+ZqL2bcFWj9gLAQ==",
+ "version": "18.2.15",
+ "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.15.tgz",
+ "integrity": "sha512-HWMdW+7r7MR5+PZqJF6YFNSCtjz1T0dsvo/f1BV6HkV+6erD/nA7wd9NM00KVG83zf2nJ7uATPO9ttdIPvi3gg==",
"dev": true,
"dependencies": {
"@types/react": "*"
@@ -1114,15 +1113,15 @@
}
},
"node_modules/@typescript-eslint/parser": {
- "version": "6.9.1",
- "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.9.1.tgz",
- "integrity": "sha512-C7AK2wn43GSaCUZ9do6Ksgi2g3mwFkMO3Cis96kzmgudoVaKyt62yNzJOktP0HDLb/iO2O0n2lBOzJgr6Q/cyg==",
+ "version": "6.10.0",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.10.0.tgz",
+ "integrity": "sha512-+sZwIj+s+io9ozSxIWbNB5873OSdfeBEH/FR0re14WLI6BaKuSOnnwCJ2foUiu8uXf4dRp1UqHP0vrZ1zXGrog==",
"dev": true,
"dependencies": {
- "@typescript-eslint/scope-manager": "6.9.1",
- "@typescript-eslint/types": "6.9.1",
- "@typescript-eslint/typescript-estree": "6.9.1",
- "@typescript-eslint/visitor-keys": "6.9.1",
+ "@typescript-eslint/scope-manager": "6.10.0",
+ "@typescript-eslint/types": "6.10.0",
+ "@typescript-eslint/typescript-estree": "6.10.0",
+ "@typescript-eslint/visitor-keys": "6.10.0",
"debug": "^4.3.4"
},
"engines": {
@@ -1142,13 +1141,13 @@
}
},
"node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/scope-manager": {
- "version": "6.9.1",
- "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.9.1.tgz",
- "integrity": "sha512-38IxvKB6NAne3g/+MyXMs2Cda/Sz+CEpmm+KLGEM8hx/CvnSRuw51i8ukfwB/B/sESdeTGet1NH1Wj7I0YXswg==",
+ "version": "6.10.0",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.10.0.tgz",
+ "integrity": "sha512-TN/plV7dzqqC2iPNf1KrxozDgZs53Gfgg5ZHyw8erd6jd5Ta/JIEcdCheXFt9b1NYb93a1wmIIVW/2gLkombDg==",
"dev": true,
"dependencies": {
- "@typescript-eslint/types": "6.9.1",
- "@typescript-eslint/visitor-keys": "6.9.1"
+ "@typescript-eslint/types": "6.10.0",
+ "@typescript-eslint/visitor-keys": "6.10.0"
},
"engines": {
"node": "^16.0.0 || >=18.0.0"
@@ -1159,9 +1158,9 @@
}
},
"node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/types": {
- "version": "6.9.1",
- "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.9.1.tgz",
- "integrity": "sha512-BUGslGOb14zUHOUmDB2FfT6SI1CcZEJYfF3qFwBeUrU6srJfzANonwRYHDpLBuzbq3HaoF2XL2hcr01c8f8OaQ==",
+ "version": "6.10.0",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.10.0.tgz",
+ "integrity": "sha512-36Fq1PWh9dusgo3vH7qmQAj5/AZqARky1Wi6WpINxB6SkQdY5vQoT2/7rW7uBIsPDcvvGCLi4r10p0OJ7ITAeg==",
"dev": true,
"engines": {
"node": "^16.0.0 || >=18.0.0"
@@ -1172,13 +1171,13 @@
}
},
"node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/typescript-estree": {
- "version": "6.9.1",
- "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.9.1.tgz",
- "integrity": "sha512-U+mUylTHfcqeO7mLWVQ5W/tMLXqVpRv61wm9ZtfE5egz7gtnmqVIw9ryh0mgIlkKk9rZLY3UHygsBSdB9/ftyw==",
+ "version": "6.10.0",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.10.0.tgz",
+ "integrity": "sha512-ek0Eyuy6P15LJVeghbWhSrBCj/vJpPXXR+EpaRZqou7achUWL8IdYnMSC5WHAeTWswYQuP2hAZgij/bC9fanBg==",
"dev": true,
"dependencies": {
- "@typescript-eslint/types": "6.9.1",
- "@typescript-eslint/visitor-keys": "6.9.1",
+ "@typescript-eslint/types": "6.10.0",
+ "@typescript-eslint/visitor-keys": "6.10.0",
"debug": "^4.3.4",
"globby": "^11.1.0",
"is-glob": "^4.0.3",
@@ -1199,12 +1198,12 @@
}
},
"node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/visitor-keys": {
- "version": "6.9.1",
- "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.9.1.tgz",
- "integrity": "sha512-MUaPUe/QRLEffARsmNfmpghuQkW436DvESW+h+M52w0coICHRfD6Np9/K6PdACwnrq1HmuLl+cSPZaJmeVPkSw==",
+ "version": "6.10.0",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.10.0.tgz",
+ "integrity": "sha512-xMGluxQIEtOM7bqFCo+rCMh5fqI+ZxV5RUUOa29iVPz1OgCZrtc7rFnz5cLUazlkPKYqX+75iuDq7m0HQ48nCg==",
"dev": true,
"dependencies": {
- "@typescript-eslint/types": "6.9.1",
+ "@typescript-eslint/types": "6.10.0",
"eslint-visitor-keys": "^3.4.1"
},
"engines": {
@@ -3253,22 +3252,6 @@
}
}
},
- "node_modules/vite-plugin-singlefile": {
- "version": "0.13.5",
- "resolved": "https://registry.npmjs.org/vite-plugin-singlefile/-/vite-plugin-singlefile-0.13.5.tgz",
- "integrity": "sha512-y/aRGh8qHmw2f1IhaI/C6PJAaov47ESYDvUv1am1YHMhpY+19B5k5Odp8P+tgs+zhfvak6QB1ykrALQErEAo7g==",
- "dev": true,
- "dependencies": {
- "micromatch": "^4.0.5"
- },
- "engines": {
- "node": "^14.18.0 || >=16.0.0"
- },
- "peerDependencies": {
- "rollup": ">=2.79.0",
- "vite": ">=3.2.0"
- }
- },
"node_modules/which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 6f6cfff..8533d8a 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,6 @@
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"typescript": "^5.2.2",
- "vite": "^4.5.0",
- "vite-plugin-singlefile": "^0.13.5"
+ "vite": "^4.5.0"
}
}
diff --git a/public/images/viewer_example_background.png b/public/images/viewer_example_background.png
new file mode 100644
index 0000000..870f3b3
Binary files /dev/null and b/public/images/viewer_example_background.png differ
diff --git a/src/App.tsx b/src/App.tsx
index d9ceb0b..eded429 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,21 +1,11 @@
import "@styles/App.scss";
-import { Route, Routes, useSearchParams } from "react-router-dom";
-import useTSRemoteApp, { IClient } from "react-ts5-remote-app-api";
+import { Navigate, 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: "2.0.0",
- name: "TS5 OBS Overlay",
- description: "A OBS overlay for TS5 by DerTyp7",
- },
- logging: true,
- });
return (
@@ -23,20 +13,15 @@ export default function App() {
path="/"
element={
{
- if (client.channel?.id === currentChannel?.id && client.channel.connection.id === activeConnectionId) {
- return client;
- }
- }) as IClient[]
- }
- channel={currentChannel}
/>
}
/>
+ } />
+ } />
);
}
diff --git a/src/Generator.tsx b/src/Generator.tsx
new file mode 100644
index 0000000..d83a3a1
--- /dev/null
+++ b/src/Generator.tsx
@@ -0,0 +1,122 @@
+import React, { ChangeEvent, useRef, useState, useEffect } from "react";
+import "@styles/Generator.scss";
+import Viewer from "./Viewer";
+
+export default function Generator() {
+ // State variables
+ const [outputUrl, setOutputUrl] = useState(() => new URL(window.location.href).toString());
+ const copiedTooltipRef = useRef(null);
+
+ const [remoteAppPort, setRemoteAppPort] = useState(5899);
+ const [showChannelName, setShowChannelName] = useState(true);
+ const [hideNonTalking, setHideNonTalking] = useState(false);
+ const [clientLimit, setClientLimit] = useState(0);
+
+ // Effect to generate URL when dependencies change
+ useEffect(() => {
+ generateUrl();
+ }, [remoteAppPort, showChannelName, hideNonTalking, clientLimit]);
+
+ // Function to generate the output URL
+ function generateUrl() {
+ const url = new URL(window.location.href.replace("/generate", ""));
+ url.searchParams.set("remoteAppPort", remoteAppPort.toString());
+ url.searchParams.set("showChannelName", showChannelName.toString());
+ url.searchParams.set("hideNonTalking", hideNonTalking.toString());
+ url.searchParams.set("clientLimit", clientLimit.toString());
+
+ setOutputUrl(url.toString());
+ }
+
+ // 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 (
+
+ {/* Header */}
+
+
TS5-OBS-Overlay Generator
+
by DerTyp7
+
+
+ {/* Instructions */}
+
+
1. Customize your settings
+
2. Copy the generated URL
+
3. Paste the URL into the BrowserSource URL field in OBS