Merge pull request #103 from DerTyp7/dev

Version 2.1.1

.eslintrc.cjs

@@ -1,14 +1,11 @@
 module.exports = {
   env: { browser: true, es2020: true },
-  extends: [
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended"],
-    'eslint:recommended',
+  parser: "@typescript-eslint/parser",
-    'plugin:@typescript-eslint/recommended',
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
-    'plugin:react-hooks/recommended',
+  plugins: ["react-refresh"],
-  ],
-  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",
   },
-}
+};

.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]

.github/dependabot.yml

@@ -8,3 +8,4 @@ updates:
     directory: "/" # Location of package manifests
     schedule:
       interval: "monthly"
+    target-branch: "dev"

.prettierrc

@@ -1,5 +1,7 @@
 {
   "tabWidth": 2,
   "useTabs": false,
-  "printWidth": 120
+  "printWidth": 180,
+  "singleQuote": false,
+  "semi": true
 }

README.md

@@ -1,73 +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 is an overlay for OBS to show the current talking clients in your TeamSpeak5 Channel.  
-This App uses the new "Remote Apps" feature of Teamspeak 5.
+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).
 
 ![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)
-  - [Setup](#setup)
+  - [Usage](#usage)
-    - [Customization (Parameters)](#customization-parameters)
+    - [Quick instructions](#quick-instructions)
-  - [Setup (Developer)](#setup-developer)
+    - [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)
 
-## Setup
+## Usage
 
-1. Download the `ts5-overlay-{version}.html` of the latest release from [here](https://github.com/DerTyp7/ts5-obs-overlay/releases/latest)
+### Quick instructions
-   ![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`
+1. Open this link in your Browser: [https://ts5-overlay.tealfire.de/#/generate](https://ts5-overlay.tealfire.de/#/generate)
-2. Go into the Teamspeak 5 Settings and enable "Remote Apps"  
+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)
+
+### Detailed instructions
+
+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)
 
-3. 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)
 
-4. Tick the checkbox "Local File" and select the downloaded `ts5-overlay-{version}.html`  
+5. Enter the in step 1 generated URL into the URL field of the Browser Source
-    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/e8fd4a1b-be70-4123-8d28-4dc7ebc8c2bd)
-   ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/5ad8ce69-645b-45e7-acc3-ce7ba8d7f8ab)
 
-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)  
+6. Set the width and height to your desired size. Recommended is a width of 1000px and the height is determined of how many clients are expected (play around with these values)
+
+7. You should now receive a notification in TeamSpeak5 that the app is allowed to connect to your TeamSpeak5 client. Allow it. (If you don't get a notification, restart TeamSpeak5 and OBS -> try again)  
    ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/40faa435-e128-415f-98eb-a9e8809e8f65)
 
-### Customization (Parameters)
-
-You can customize the overlay by adding parameters to the URL of the Browser Source.
-
-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
-
-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`
-
-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.
 
@@ -77,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.

index.html

@@ -1,12 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
+  <head>
-		<meta charset="UTF-8" />
+    <meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>TS5-OBS-Overlay</title>
+    <meta name="description" content="An OBS overlay for TeamSpeak5, so your audience can see who is talking. https://github.com/DerTyp7/ts5-obs-overlay" />
-	</head>
+    <meta name="author" content="DerTyp7" />
-	<body>
+    <link rel="icon" href="/logo.svg" type="image/x-icon" />
-		<div id="root"></div>
+    <title>TS5-OBS-Overlay</title>
-		<script type="module" src="/src/main.tsx"></script>
+  </head>
-	</body>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>

package-lock.json

@@ -1,33 +1,32 @@
 {
   "name": "ts5-obs-overlay",
-  "version": "1.2.4",
+  "version": "2.1.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ts5-obs-overlay",
-      "version": "1.2.4",
+      "version": "2.1.1",
       "dependencies": {
         "@types/node": "^20.8.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.14.2",
+        "react-router-dom": "^6.18.0",
         "react-ts5-remote-app-api": "^1.1.1",
         "sass": "^1.68.0"
       },
       "devDependencies": {
         "@types/jest": "^29.5.2",
-        "@types/react": "^18.2.23",
+        "@types/react": "^18.2.35",
-        "@types/react-dom": "^18.2.7",
+        "@types/react-dom": "^18.2.14",
         "@typescript-eslint/eslint-plugin": "^6.7.4",
-        "@typescript-eslint/parser": "^6.2.1",
+        "@typescript-eslint/parser": "^6.9.1",
-        "@vitejs/plugin-react-swc": "^3.0.0",
+        "@vitejs/plugin-react-swc": "^3.5.0",
-        "eslint": "^8.45.0",
+        "eslint": "^8.56.0",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.3",
-        "typescript": "^5.1.6",
+        "typescript": "^5.2.2",
-        "vite": "^4.4.7",
+        "vite": "^4.5.2"
-        "vite-plugin-singlefile": "^0.13.5"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -533,18 +532,18 @@
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.5.1",
+      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.0.tgz",
-      "integrity": "sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==",
+      "integrity": "sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==",
       "dev": true,
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "2.1.0",
+      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
-      "integrity": "sha512-Lj7DECXqIVCqnqjjHMPna4vn6GJcMgul/wuS0je9OZ9gsL0zzDpKPVtcG1HaDVc+9y+qgXneTeUMbCqXJNpH1A==",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
       "dev": true,
       "dependencies": {
         "ajv": "^6.12.4",
@@ -565,21 +564,21 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.44.0",
+      "version": "8.56.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.44.0.tgz",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.56.0.tgz",
-      "integrity": "sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==",
+      "integrity": "sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
     "node_modules/@humanwhocodes/config-array": {
-      "version": "0.11.10",
+      "version": "0.11.13",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
-      "integrity": "sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==",
+      "integrity": "sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==",
       "dev": true,
       "dependencies": {
-        "@humanwhocodes/object-schema": "^1.2.1",
+        "@humanwhocodes/object-schema": "^2.0.1",
         "debug": "^4.1.1",
         "minimatch": "^3.0.5"
       },
@@ -601,9 +600,9 @@
       }
     },
     "node_modules/@humanwhocodes/object-schema": {
-      "version": "1.2.1",
+      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz",
-      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
+      "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
       "dev": true
     },
     "node_modules/@jest/expect-utils": {
@@ -696,11 +695,11 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.7.2",
+      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.2.tgz",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.1.tgz",
-      "integrity": "sha512-7Lcn7IqGMV+vizMPoEl5F0XDshcdDYtMI6uJLQdQz5CfZAwy3vvGKYSUk789qndt5dEC4HfSjviSYlSoHGL2+A==",
+      "integrity": "sha512-Qg4DMQsfPNAs88rb2xkdk03N3bjK4jgX5fR24eHCTR9q6PrhZQZ4UJBPzCHJkIpTRN1UKxx2DzjZmnC+7Lj0Ow==",
       "engines": {
-        "node": ">=14"
+        "node": ">=14.0.0"
       }
     },
     "node_modules/@rollup/plugin-typescript": {
@@ -756,11 +755,15 @@
       "dev": true
     },
     "node_modules/@swc/core": {
-      "version": "1.3.62",
+      "version": "1.3.106",
-      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.62.tgz",
+      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.106.tgz",
-      "integrity": "sha512-J58hWY+/G8vOr4J6ZH9hLg0lMSijZtqIIf4HofZezGog/pVX6sJyBJ40dZ1ploFkDIlWTWvJyqtpesBKS73gkQ==",
+      "integrity": "sha512-++QPSPkFq2qELYVScxNHJC42hKQChjiTWS2P0QQ5JWT4NHb9lmNSfrc1ylFIyImwRnxsW2MTBALLYLf95EFAsg==",
       "devOptional": true,
       "hasInstallScript": true,
+      "dependencies": {
+        "@swc/counter": "^0.1.1",
+        "@swc/types": "^0.1.5"
+      },
       "engines": {
         "node": ">=10"
       },
@@ -769,16 +772,16 @@
         "url": "https://opencollective.com/swc"
       },
       "optionalDependencies": {
-        "@swc/core-darwin-arm64": "1.3.62",
+        "@swc/core-darwin-arm64": "1.3.106",
-        "@swc/core-darwin-x64": "1.3.62",
+        "@swc/core-darwin-x64": "1.3.106",
-        "@swc/core-linux-arm-gnueabihf": "1.3.62",
+        "@swc/core-linux-arm-gnueabihf": "1.3.106",
-        "@swc/core-linux-arm64-gnu": "1.3.62",
+        "@swc/core-linux-arm64-gnu": "1.3.106",
-        "@swc/core-linux-arm64-musl": "1.3.62",
+        "@swc/core-linux-arm64-musl": "1.3.106",
-        "@swc/core-linux-x64-gnu": "1.3.62",
+        "@swc/core-linux-x64-gnu": "1.3.106",
-        "@swc/core-linux-x64-musl": "1.3.62",
+        "@swc/core-linux-x64-musl": "1.3.106",
-        "@swc/core-win32-arm64-msvc": "1.3.62",
+        "@swc/core-win32-arm64-msvc": "1.3.106",
-        "@swc/core-win32-ia32-msvc": "1.3.62",
+        "@swc/core-win32-ia32-msvc": "1.3.106",
-        "@swc/core-win32-x64-msvc": "1.3.62"
+        "@swc/core-win32-x64-msvc": "1.3.106"
       },
       "peerDependencies": {
         "@swc/helpers": "^0.5.0"
@@ -790,9 +793,9 @@
       }
     },
     "node_modules/@swc/core-darwin-arm64": {
-      "version": "1.3.62",
+      "version": "1.3.106",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.62.tgz",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.106.tgz",
-      "integrity": "sha512-MmGilibITz68LEje6vJlKzc2gUUSgzvB3wGLSjEORikTNeM7P8jXVxE4A8fgZqDeudJUm9HVWrxCV+pHDSwXhA==",
+      "integrity": "sha512-XYcbViNyHnnm7RWOAO1YipMmthM7m2aXF32b0y+JMLYFBEyFpjVX9btLkzeL7wRx/5B3I35yJNhE+xyx0Q1Gkw==",
       "cpu": [
         "arm64"
       ],
@@ -806,9 +809,9 @@
       }
     },
     "node_modules/@swc/core-darwin-x64": {
-      "version": "1.3.62",
+      "version": "1.3.106",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.62.tgz",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.106.tgz",
-      "integrity": "sha512-Xl93MMB3sCWVlYWuQIB+v6EQgzoiuQYK5tNt9lsHoIEVu2zLdkQjae+5FUHZb1VYqCXIiWcULFfVz0R4Sjb7JQ==",
+      "integrity": "sha512-YKDPhUdfuwhmOUS9+CaIwl/0Tp+f1b73BH2EIESuxSNsogZf18a8HQ8O0fQEwdiwmA5LEqw47cj+kfOWV/0+kw==",
       "cpu": [
         "x64"
       ],
@@ -822,9 +825,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm-gnueabihf": {
-      "version": "1.3.62",
+      "version": "1.3.106",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.62.tgz",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.106.tgz",
-      "integrity": "sha512-nJsp6O7kCtAjTTMcIjVB0g5y1JNiYAa5q630eiwrnaHUusEFoANDdORI3Z9vXeikMkng+6yIv9/V8Rb093xLjQ==",
+      "integrity": "sha512-bHxxJXogvFfocLL5inZxxtx/x/WgKozigp80Vbx0viac1fPDJrqKBw2X4MzpMiuTRAGVQ03jJI6pDwbSBf+yDw==",
       "cpu": [
         "arm"
       ],
@@ -838,9 +841,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm64-gnu": {
-      "version": "1.3.62",
+      "version": "1.3.106",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.62.tgz",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.106.tgz",
-      "integrity": "sha512-XGsV93vpUAopDt5y6vPwbK1Nc/MlL55L77bAZUPIiosWD1cWWPHNtNSpriE6+I+JiMHe0pqtfS/SSTk6ZkFQVw==",
+      "integrity": "sha512-c7jue++CHLgtpeaakEukoCLT9eNrImizbleE9Y7Is8CHqLq/7DG4s+7ma9DFKXIzW2MpTg9byIEQfpqSphVW6A==",
       "cpu": [
         "arm64"
       ],
@@ -854,9 +857,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm64-musl": {
-      "version": "1.3.62",
+      "version": "1.3.106",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.62.tgz",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.106.tgz",
-      "integrity": "sha512-ESUmJjSlTTkoBy9dMG49opcNn8BmviqStMhwyeD1G8XRnmRVCZZgoBOKdvCXmJhw8bQXDhZumeaTUB+OFUKVXg==",
+      "integrity": "sha512-51EaC3Q8qAhLtWVnAVqoYX/gk3tK31cCBzUpwCcmhianhEBM2/WtKRAS4MqPhE8VVZuN3WjO2c2JaF2mX0yuoA==",
       "cpu": [
         "arm64"
       ],
@@ -870,9 +873,9 @@
       }
     },
     "node_modules/@swc/core-linux-x64-gnu": {
-      "version": "1.3.62",
+      "version": "1.3.106",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.62.tgz",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.106.tgz",
-      "integrity": "sha512-wnHJkt3ZBrax3SFnUHDcncG6mrSg9ZZjMhQV9Mc3JL1x1s1Gy9rGZCoBNnV/BUZWTemxIBcQbANRSDut/WO+9A==",
+      "integrity": "sha512-tOUi8BB6jAeCXgx7ESLNnX7nrbMVKQ/XajK77v7Ad4SXf9HYArnimBJpXUUyVFJTXLSv4e6c7s6XHHqXb5Lwcg==",
       "cpu": [
         "x64"
       ],
@@ -886,9 +889,9 @@
       }
     },
     "node_modules/@swc/core-linux-x64-musl": {
-      "version": "1.3.62",
+      "version": "1.3.106",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.62.tgz",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.106.tgz",
-      "integrity": "sha512-9oRbuTC/VshB66Rgwi3pTq3sPxSTIb8k9L1vJjES+dDMKa29DAjPtWCXG/pyZ00ufpFZgkGEuAHH5uqUcr1JQg==",
+      "integrity": "sha512-binLw4Lbd83NPy4/m/teH2nbaifxveSD+sKDvpxywRbvYW2I0w/iCBpUBcbnl16TQF4TPOGpq5YwG9lVxPVw5g==",
       "cpu": [
         "x64"
       ],
@@ -902,9 +905,9 @@
       }
     },
     "node_modules/@swc/core-win32-arm64-msvc": {
-      "version": "1.3.62",
+      "version": "1.3.106",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.62.tgz",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.106.tgz",
-      "integrity": "sha512-zv14vlF2VRrxS061XkfzGjCYnOrEo5glKJjLK5PwUKysIoVrx/L8nAbFxjkX5cObdlyoqo+ekelyBPAO+4bS0w==",
+      "integrity": "sha512-n4ttBWr8tM7DPzwcEOIBTyTMHZTzCmbic/HTtxEsPyMAf/Daen+yrTKzjPP6k2usfSrjkxA780RSJJxI1N8r2w==",
       "cpu": [
         "arm64"
       ],
@@ -918,9 +921,9 @@
       }
     },
     "node_modules/@swc/core-win32-ia32-msvc": {
-      "version": "1.3.62",
+      "version": "1.3.106",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.62.tgz",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.106.tgz",
-      "integrity": "sha512-8MC/PZQSsOP2iA/81tAfNRqMWyEqTS/8zKUI67vPuLvpx6NAjRn3E9qBv7iFqH79iqZNzqSMo3awnLrKZyFbcw==",
+      "integrity": "sha512-GhDNIwxE5FhkujESI6h/4ysT3wxwmrzTUlZYaR8rRui6a6SdX9feIPUHPEE5o5hpyp+xqlmvRxKkRxOnwsq8iA==",
       "cpu": [
         "ia32"
       ],
@@ -934,9 +937,9 @@
       }
     },
     "node_modules/@swc/core-win32-x64-msvc": {
-      "version": "1.3.62",
+      "version": "1.3.106",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.62.tgz",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.106.tgz",
-      "integrity": "sha512-GJSmUJ95HKHZXAxiuPUmrcm/S3ivQvEzXhOZaIqYBIwUsm02vFZkClsV7eIKzWjso1t0+I/8MjrnUNaSWqh1rQ==",
+      "integrity": "sha512-2M6yWChuMS1+/MPo3Dor0SOMkvmiugonWlzsZBAu/oZboH2xKrHSRv7brsBujb2Oe47r+NsbV+vq9tnnP9Vl1Q==",
       "cpu": [
         "x64"
       ],
@@ -949,6 +952,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/@swc/counter": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.2.tgz",
+      "integrity": "sha512-9F4ys4C74eSTEUNndnER3VJ15oru2NumfQxS8geE+f3eB5xvfxpWyqE5XlVnxb/R14uoXi6SLbBwwiDSkv+XEw==",
+      "devOptional": true
+    },
+    "node_modules/@swc/types": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.5.tgz",
+      "integrity": "sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==",
+      "devOptional": true
+    },
     "node_modules/@tsconfig/node10": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
@@ -999,9 +1014,9 @@
       }
     },
     "node_modules/@types/jest": {
-      "version": "29.5.2",
+      "version": "29.5.11",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.11.tgz",
-      "integrity": "sha512-mSoZVJF5YzGVCk+FsDxzDuH7s+SCkzrgKZzf0Z0T2WudhBUPoF6ktoTPC4R0ZoCPCV5xUvuU6ias5NvxcBcMMg==",
+      "integrity": "sha512-S2mHmYIVe13vrm6q4kN6fLYYAka15ALQki/vgDC3mIukEOx8WJlv0kQPM+d4w8Gp6u0uSdKND04IlTXBv0rwnQ==",
       "dev": true,
       "dependencies": {
         "expect": "^29.0.0",
@@ -1026,9 +1041,9 @@
       "devOptional": true
     },
     "node_modules/@types/react": {
-      "version": "18.2.23",
+      "version": "18.2.37",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.23.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.37.tgz",
-      "integrity": "sha512-qHLW6n1q2+7KyBEYnrZpcsAmU/iiCh9WGCKgXvMxx89+TYdJWRjZohVIo9XTcoLhfX3+/hP0Pbulu3bCZQ9PSA==",
+      "integrity": "sha512-RGAYMi2bhRgEXT3f4B92WTohopH6bIXw05FuGlmJEnv/omEn190+QYEIYxIAuIBdKgboYYdVved2p1AxZVQnaw==",
       "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
@@ -1037,9 +1052,9 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.2.7",
+      "version": "18.2.15",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.15.tgz",
-      "integrity": "sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==",
+      "integrity": "sha512-HWMdW+7r7MR5+PZqJF6YFNSCtjz1T0dsvo/f1BV6HkV+6erD/nA7wd9NM00KVG83zf2nJ7uATPO9ttdIPvi3gg==",
       "dev": true,
       "dependencies": {
         "@types/react": "*"
@@ -1114,15 +1129,15 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "6.2.1",
+      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.10.0.tgz",
-      "integrity": "sha512-Ld+uL1kYFU8e6btqBFpsHkwQ35rw30IWpdQxgOqOh4NfxSDH6uCkah1ks8R/RgQqI5hHPXMaLy9fbFseIe+dIg==",
+      "integrity": "sha512-+sZwIj+s+io9ozSxIWbNB5873OSdfeBEH/FR0re14WLI6BaKuSOnnwCJ2foUiu8uXf4dRp1UqHP0vrZ1zXGrog==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "6.2.1",
+        "@typescript-eslint/scope-manager": "6.10.0",
-        "@typescript-eslint/types": "6.2.1",
+        "@typescript-eslint/types": "6.10.0",
-        "@typescript-eslint/typescript-estree": "6.2.1",
+        "@typescript-eslint/typescript-estree": "6.10.0",
-        "@typescript-eslint/visitor-keys": "6.2.1",
+        "@typescript-eslint/visitor-keys": "6.10.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -1142,13 +1157,13 @@
       }
     },
     "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/scope-manager": {
-      "version": "6.2.1",
+      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.10.0.tgz",
-      "integrity": "sha512-UCqBF9WFqv64xNsIEPfBtenbfodPXsJ3nPAr55mGPkQIkiQvgoWNo+astj9ZUfJfVKiYgAZDMnM6dIpsxUMp3Q==",
+      "integrity": "sha512-TN/plV7dzqqC2iPNf1KrxozDgZs53Gfgg5ZHyw8erd6jd5Ta/JIEcdCheXFt9b1NYb93a1wmIIVW/2gLkombDg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.2.1",
+        "@typescript-eslint/types": "6.10.0",
-        "@typescript-eslint/visitor-keys": "6.2.1"
+        "@typescript-eslint/visitor-keys": "6.10.0"
       },
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
@@ -1159,9 +1174,9 @@
       }
     },
     "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/types": {
-      "version": "6.2.1",
+      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.10.0.tgz",
-      "integrity": "sha512-528bGcoelrpw+sETlyM91k51Arl2ajbNT9L4JwoXE2dvRe1yd8Q64E4OL7vHYw31mlnVsf+BeeLyAZUEQtqahQ==",
+      "integrity": "sha512-36Fq1PWh9dusgo3vH7qmQAj5/AZqARky1Wi6WpINxB6SkQdY5vQoT2/7rW7uBIsPDcvvGCLi4r10p0OJ7ITAeg==",
       "dev": true,
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
@@ -1172,13 +1187,13 @@
       }
     },
     "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/typescript-estree": {
-      "version": "6.2.1",
+      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.10.0.tgz",
-      "integrity": "sha512-G+UJeQx9AKBHRQBpmvr8T/3K5bJa485eu+4tQBxFq0KoT22+jJyzo1B50JDT9QdC1DEmWQfdKsa8ybiNWYsi0Q==",
+      "integrity": "sha512-ek0Eyuy6P15LJVeghbWhSrBCj/vJpPXXR+EpaRZqou7achUWL8IdYnMSC5WHAeTWswYQuP2hAZgij/bC9fanBg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.2.1",
+        "@typescript-eslint/types": "6.10.0",
-        "@typescript-eslint/visitor-keys": "6.2.1",
+        "@typescript-eslint/visitor-keys": "6.10.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -1199,12 +1214,12 @@
       }
     },
     "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/visitor-keys": {
-      "version": "6.2.1",
+      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.10.0.tgz",
-      "integrity": "sha512-iTN6w3k2JEZ7cyVdZJTVJx2Lv7t6zFA8DCrJEHD2mwfc16AEvvBWVhbFh34XyG2NORCd0viIgQY1+u7kPI0WpA==",
+      "integrity": "sha512-xMGluxQIEtOM7bqFCo+rCMh5fqI+ZxV5RUUOa29iVPz1OgCZrtc7rFnz5cLUazlkPKYqX+75iuDq7m0HQ48nCg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.2.1",
+        "@typescript-eslint/types": "6.10.0",
         "eslint-visitor-keys": "^3.4.1"
       },
       "engines": {
@@ -1341,16 +1356,22 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
+      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
+      "dev": true
+    },
     "node_modules/@vitejs/plugin-react-swc": {
-      "version": "3.3.2",
+      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-3.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-3.5.0.tgz",
-      "integrity": "sha512-VJFWY5sfoZerQRvJrh518h3AcQt6f/yTuWn4/TRB+dqmYU0NX1qz7qM5Wfd+gOQqUzQW4gxKqKN3KpE/P3+zrA==",
+      "integrity": "sha512-1PrOvAaDpqlCV+Up8RkAh9qaiUjoDUcjtttyhXDKw53XA6Ve16SOp6cCOpRs8Dj8DqUQs6eTW5YkLcLJjrXAig==",
       "dev": true,
       "dependencies": {
-        "@swc/core": "^1.3.61"
+        "@swc/core": "^1.3.96"
       },
       "peerDependencies": {
-        "vite": "^4"
+        "vite": "^4 || ^5"
       }
     },
     "node_modules/acorn": {
@@ -1728,27 +1749,28 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.45.0",
+      "version": "8.56.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.45.0.tgz",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.56.0.tgz",
-      "integrity": "sha512-pd8KSxiQpdYRfYa9Wufvdoct3ZPQQuVuU5O6scNgMuOMYuxvH0IGaYK0wUFjo4UYYQQCUndlXiMbnxopwvvTiw==",
+      "integrity": "sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.4.0",
+        "@eslint-community/regexpp": "^4.6.1",
-        "@eslint/eslintrc": "^2.1.0",
+        "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.44.0",
+        "@eslint/js": "8.56.0",
-        "@humanwhocodes/config-array": "^0.11.10",
+        "@humanwhocodes/config-array": "^0.11.13",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
-        "ajv": "^6.10.0",
+        "@ungap/structured-clone": "^1.2.0",
+        "ajv": "^6.12.4",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
         "debug": "^4.3.2",
         "doctrine": "^3.0.0",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.2.0",
+        "eslint-scope": "^7.2.2",
-        "eslint-visitor-keys": "^3.4.1",
+        "eslint-visitor-keys": "^3.4.3",
-        "espree": "^9.6.0",
+        "espree": "^9.6.1",
         "esquery": "^1.4.2",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
@@ -1802,22 +1824,10 @@
         "eslint": ">=7"
       }
     },
-    "node_modules/eslint-visitor-keys": {
+    "node_modules/eslint-scope": {
-      "version": "3.4.1",
+      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
-      "integrity": "sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
-      "dev": true,
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/eslint/node_modules/eslint-scope": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",
-      "integrity": "sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==",
       "dev": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
@@ -1830,19 +1840,22 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint/node_modules/estraverse": {
+    "node_modules/eslint-visitor-keys": {
-      "version": "5.3.0",
+      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "dev": true,
       "engines": {
-        "node": ">=4.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
     "node_modules/espree": {
-      "version": "9.6.0",
+      "version": "9.6.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
-      "integrity": "sha512-1FH/IiruXZ84tpUlm0aCUEwMl2Ho5ilqVh0VvQXw+byAz/4SAciyHLlfmL5WYqsvD38oymdUwBss0LtK8m4s/A==",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
       "dev": true,
       "dependencies": {
         "acorn": "^8.9.0",
@@ -1868,15 +1881,6 @@
         "node": ">=0.10"
       }
     },
-    "node_modules/esquery/node_modules/estraverse": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
     "node_modules/esrecurse": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
@@ -1889,7 +1893,7 @@
         "node": ">=4.0"
       }
     },
-    "node_modules/esrecurse/node_modules/estraverse": {
+    "node_modules/estraverse": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
@@ -2099,9 +2103,9 @@
       }
     },
     "node_modules/globals": {
-      "version": "13.20.0",
+      "version": "13.24.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
       "dev": true,
       "dependencies": {
         "type-fest": "^0.20.2"
@@ -2713,9 +2717,9 @@
       }
     },
     "node_modules/punycode": {
-      "version": "2.3.0",
+      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
-      "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
       "dev": true,
       "engines": {
         "node": ">=6"
@@ -2771,29 +2775,29 @@
       "dev": true
     },
     "node_modules/react-router": {
-      "version": "6.14.2",
+      "version": "6.21.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.2.tgz",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.1.tgz",
-      "integrity": "sha512-09Zss2dE2z+T1D03IheqAFtK4UzQyX8nFPWx6jkwdYzGLXd5ie06A6ezS2fO6zJfEb/SpG6UocN2O1hfD+2urQ==",
+      "integrity": "sha512-W0l13YlMTm1YrpVIOpjCADJqEUpz1vm+CMo47RuFX4Ftegwm6KOYsL5G3eiE52jnJpKvzm6uB/vTKTPKM8dmkA==",
       "dependencies": {
-        "@remix-run/router": "1.7.2"
+        "@remix-run/router": "1.14.1"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=14.0.0"
       },
       "peerDependencies": {
         "react": ">=16.8"
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.14.2",
+      "version": "6.21.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.14.2.tgz",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.1.tgz",
-      "integrity": "sha512-5pWX0jdKR48XFZBuJqHosX3AAHjRAzygouMTyimnBPOLdY3WjzUSKhus2FVMihUFWzeLebDgr4r8UeQFAct7Bg==",
+      "integrity": "sha512-QCNrtjtDPwHDO+AO21MJd7yIcr41UetYt5jzaB9Y1UYaPTCnVuJq6S748g1dE11OQlCFIQg+RtAA1SEZIyiBeA==",
       "dependencies": {
-        "@remix-run/router": "1.7.2",
+        "@remix-run/router": "1.14.1",
-        "react-router": "6.14.2"
+        "react-router": "6.21.1"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=14.0.0"
       },
       "peerDependencies": {
         "react": ">=16.8",
@@ -2890,9 +2894,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "3.26.2",
+      "version": "3.29.4",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.26.2.tgz",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
-      "integrity": "sha512-6umBIGVz93er97pMgQO08LuH3m6PUb3jlDUUGFsNJB6VgTCUaDFpupf5JfU30529m/UKOgmiX+uY6Sx8cOYpLA==",
+      "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
       "devOptional": true,
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -3184,9 +3188,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.1.6",
+      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
-      "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
+      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -3210,14 +3214,14 @@
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg=="
     },
     "node_modules/vite": {
-      "version": "4.4.7",
+      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.7.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
-      "integrity": "sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==",
+      "integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.18.10",
-        "postcss": "^8.4.26",
+        "postcss": "^8.4.27",
-        "rollup": "^3.25.2"
+        "rollup": "^3.27.1"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -3264,22 +3268,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",

package.json

@@ -1,9 +1,27 @@
 {
   "name": "ts5-obs-overlay",
-  "private": true,
+  "private": false,
-  "version": "1.2.5",
+  "version": "2.1.1",
-  "description": "Overlay for OBS to show the current talking clients in your Teamspeak 5 Channel",
+  "description": "Overlay for OBS to show the current talking clients in your TeamSpeak 5 Channel",
-  "homepage": "https://dertyp7.github.io/ts5-obs-overlay",
+  "author": "DerTyp7",
+  "homepage": "https://dertyp7.github.io/ts5-obs-overlay/#",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/DerTyp7/ts5-obs-overlay"
+  },
+  "keywords": [
+    "ts5",
+    "teamspeak",
+    "overlay",
+    "remote app",
+    "obs",
+    "typescript",
+    "react",
+    "vite"
+  ],
+  "bugs": {
+    "url": "https://github.com/DerTyp7/ts5-obs-overlay/issues"
+  },
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -15,22 +33,21 @@
     "@types/node": "^20.8.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.14.2",
+    "react-router-dom": "^6.18.0",
     "react-ts5-remote-app-api": "^1.1.1",
     "sass": "^1.68.0"
   },
   "devDependencies": {
     "@types/jest": "^29.5.2",
-    "@types/react": "^18.2.23",
+    "@types/react": "^18.2.35",
-    "@types/react-dom": "^18.2.7",
+    "@types/react-dom": "^18.2.14",
     "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@typescript-eslint/parser": "^6.2.1",
+    "@typescript-eslint/parser": "^6.9.1",
-    "@vitejs/plugin-react-swc": "^3.0.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
-    "eslint": "^8.45.0",
+    "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
-    "vite": "^4.4.7",
+    "vite": "^4.5.2"
-    "vite-plugin-singlefile": "^0.13.5"
   }
 }

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>

src/App.tsx

@@ -1,38 +1,26 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import "@styles/App.scss";
 
-import { useSearchParams } from "react-router-dom";
+import { Navigate, Route, Routes, useSearchParams } from "react-router-dom";
-import useTSRemoteApp, { IClient } from "react-ts5-remote-app-api";
 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.2.5",
-      name: "TS5 OBS Overlay",
-      description: "A OBS overlay for TS5 by DerTyp876",
-    },
-    logging: true,
-  });
 
   return (
-    <div className="App">
+    <Routes>
-      <Viewer
+      <Route
-        showChannelName={searchParams.get("showChannelName") === "true"}
+        path="/"
-        hideNonTalking={searchParams.get("hideNonTalking") === "true"}
+        element={
-        clientLimit={searchParams.get("clientLimit") ? parseInt(searchParams.get("clientLimit") ?? "0") : 0}
+          <Viewer
-        clients={
+            remoteAppPort={parseInt(searchParams.get("remoteAppPort") ?? "5899")}
-          clients.map((client) => {
+            showChannelName={searchParams.get("showChannelName") === "true"}
-            if (client.channel?.id === currentChannel?.id && client.channel.connection.id === activeConnectionId) {
+            hideNonTalking={searchParams.get("hideNonTalking") === "true"}
-              return client;
+            clientLimit={searchParams.get("clientLimit") ? parseInt(searchParams.get("clientLimit") ?? "0") : 0}
-            }
+          />
-          }) as IClient[]
         }
-        channel={currentChannel}
       />
-    </div>
+      <Route path="/generate" element={<Generator />} />
+    </Routes>
   );
 }

src/Generator.tsx

@@ -0,0 +1,126 @@
+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<HTMLDivElement>(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);
+    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.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>TS5-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" checked={showChannelName} />
+                <label>Show channel name</label>
+              </div>
+
+              {/* Hide Non-Talking Clients Option */}
+              <div className="option" onClick={() => setHideNonTalking(!hideNonTalking)}>
+                <input type="checkbox" checked={hideNonTalking} />
+                <label>Hide non talking clients</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">
+          <Viewer remoteAppPort={remoteAppPort} showChannelName={showChannelName} hideNonTalking={hideNonTalking} clientLimit={clientLimit} />
+        </div>
+      </div>
+    </div>
+  );
+}

src/Viewer.tsx

@@ -1,27 +1,42 @@
 import "@styles/Viewer.scss";
-import { IChannel, IClient } from "react-ts5-remote-app-api";
+import useTSRemoteApp, { IClient } from "react-ts5-remote-app-api";
 
 export default function Viewer({
-  clients,
+  remoteAppPort = 5899,
-  channel,
   showChannelName = false,
   hideNonTalking = false,
   clientLimit = 0,
 }: {
-  clients: IClient[] | undefined;
+  remoteAppPort?: number;
-  channel: IChannel | undefined;
   showChannelName?: boolean;
   hideNonTalking?: boolean;
   clientLimit?: number;
 }) {
+  const { clients, activeConnectionId, currentChannel } = useTSRemoteApp({
+    remoteAppPort: remoteAppPort,
+    auth: {
+      identifier: "de.tealfire.obs",
+      version: "2.1.1",
+      name: "TS5 OBS Overlay",
+      description: "A OBS overlay for TS5 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 ? (
+      {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;
@@ -29,10 +44,7 @@ export default function Viewer({
 
         if (client) {
           //* Non-talking client
-          if (
+          if (hideNonTalking && (client.properties.inputMuted || client.properties.outputMuted || client.talkStatus == 0)) {
-            hideNonTalking &&
-            (client.properties.inputMuted || client.properties.outputMuted || client.talkStatus == 0)
-          ) {
             return null;
           }
 
@@ -73,16 +85,7 @@ export default function Viewer({
                       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
+                    <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" />
-                      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 ? (
@@ -143,6 +146,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 TS5-Client via the notifications</h5>
+          <br />
+          <h5>2. Enable remote apps inside the the TS5-Settings</h5>
+          <br />
+          <h5>3. Make sure to match the configuration port with the port in the TS5 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>
   );
 }

src/main.tsx

@@ -1,11 +1,11 @@
 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(
+ReactDOM.createRoot(document.getElementById("root")!).render(
-  <BrowserRouter>
+  <HashRouter>
     <App />
-  </BrowserRouter>
+  </HashRouter>
 );

src/styles/Generator.scss

@@ -0,0 +1,271 @@
+// 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 {
+      flex: 1;
+      border: 2px solid #31f39973;
+
+      // Viewer styles (see src/styles/Viewer.scss)
+      .viewer {
+        background-image: url("/images/viewer_example_background.png");
+        background-repeat: no-repeat;
+        background-size: cover;
+        min-height: 500px;
+        h1 {
+          font-size: 2rem;
+        }
+        .client {
+          svg {
+            width: 2rem;
+          }
+
+          p {
+            font-size: 2rem;
+          }
+        }
+      }
+    }
+  }
+
+  // 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;
+          }
+        }
+      }
+    }
+  }
+}

src/styles/Viewer.scss

@@ -1,22 +1,32 @@
+//* 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: 0.5rem;
-  padding: 1rem;
+
+  h1 {
+    font-size: 5vw;
+  }
+
+  h1,
+  p {
+    background-color: #2f313680;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    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 {
@@ -26,23 +36,17 @@
     align-items: center;
     margin: 0.5rem 0;
 
+    // icon styles
     svg {
-      width: 2.8rem;
+      width: 5vw;
-      height: 2.8rem;
+      aspect-ratio: 1/1;
       margin-right: 0.5rem;
+      filter: drop-shadow(0 0 0.75rem rgba(15, 15, 15, 0.1));
     }
-    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
+    // client name styles
-      white-space: nowrap;
+    p {
-      overflow: hidden;
+      font-size: 5vw;
-      text-overflow: ellipsis;
-      max-width: 20ch;
     }
   }
 }

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;
+  }
 }

tsconfig.json

@@ -18,7 +18,8 @@
     },
 
     /* Bundler mode */
-    "moduleResolution": "bundler",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true,
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,

vite.config.ts

@@ -1,6 +1,5 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
-import { viteSingleFile } from "vite-plugin-singlefile"
 import path from 'path';
 
 // https://vitejs.dev/config/
@@ -21,5 +20,5 @@ export default defineConfig({
     outDir: 'dist',
     emptyOutDir: true,
   },
-  plugins: [react(), viteSingleFile({ useRecommendedBuildConfig: false })],
+  plugins: [react()],
 })