updated api version

Bump react-router-dom from 6.14.1 to 6.14.2

README.md

@@ -3,6 +3,8 @@
 This is a 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)

package-lock.json

@@ -1,32 +1,33 @@
 {
   "name": "ts5-obs-overlay",
-  "version": "0.0.0",
+  "version": "1.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ts5-obs-overlay",
-      "version": "0.0.0",
+      "version": "1.2.0",
       "dependencies": {
-        "@types/node": "^20.4.1",
+        "@types/node": "^20.4.5",
         "jest": "^29.6.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.14.1",
+        "react-router-dom": "^6.14.2",
-        "sass": "^1.63.6"
+        "react-ts5-remote-app-api": "^1.1.0",
+        "sass": "^1.64.1"
       },
       "devDependencies": {
         "@types/jest": "^29.5.2",
         "@types/react": "^18.2.14",
-        "@types/react-dom": "^18.0.11",
+        "@types/react-dom": "^18.2.7",
-        "@typescript-eslint/eslint-plugin": "^5.59.0",
+        "@typescript-eslint/eslint-plugin": "^6.2.0",
-        "@typescript-eslint/parser": "^5.59.0",
+        "@typescript-eslint/parser": "^6.2.1",
         "@vitejs/plugin-react-swc": "^3.0.0",
-        "eslint": "^8.44.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.2",
+        "vite": "^4.4.7",
         "vite-plugin-singlefile": "^0.13.5"
       }
     },
@@ -586,6 +587,26 @@
       "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
     },
+    "node_modules/@cspotcode/source-map-support": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
+      "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "0.3.9"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+      "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.18.11",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.11.tgz",
@@ -1482,13 +1503,59 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.7.1",
+      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.1.tgz",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.2.tgz",
-      "integrity": "sha512-bgVQM4ZJ2u2CM8k1ey70o1ePFXsEzYVZoWghh6WjM8p59jQ7HxzbHW4SbnWFG7V9ig9chLawQxDTZ3xzOF8MkQ==",
+      "integrity": "sha512-7Lcn7IqGMV+vizMPoEl5F0XDshcdDYtMI6uJLQdQz5CfZAwy3vvGKYSUk789qndt5dEC4HfSjviSYlSoHGL2+A==",
       "engines": {
         "node": ">=14"
       }
     },
+    "node_modules/@rollup/plugin-typescript": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-11.1.2.tgz",
+      "integrity": "sha512-0ghSOCMcA7fl1JM+0gYRf+Q/HWyg+zg7/gDSc+fRLmlJWcW5K1I+CLRzaRhXf4Y3DRyPnnDo4M2ktw+a6JcDEg==",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.1",
+        "resolve": "^1.22.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.14.0||^3.0.0",
+        "tslib": "*",
+        "typescript": ">=3.7.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        },
+        "tslib": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
+      "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.8",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
@@ -1514,7 +1581,7 @@
       "version": "1.3.62",
       "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.62.tgz",
       "integrity": "sha512-J58hWY+/G8vOr4J6ZH9hLg0lMSijZtqIIf4HofZezGog/pVX6sJyBJ40dZ1ploFkDIlWTWvJyqtpesBKS73gkQ==",
-      "dev": true,
+      "devOptional": true,
       "hasInstallScript": true,
       "engines": {
         "node": ">=10"
@@ -1704,6 +1771,26 @@
         "node": ">=10"
       }
     },
+    "node_modules/@tsconfig/node10": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
+      "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA=="
+    },
+    "node_modules/@tsconfig/node12": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag=="
+    },
+    "node_modules/@tsconfig/node14": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow=="
+    },
+    "node_modules/@tsconfig/node16": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
+      "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA=="
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.1",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.1.tgz",
@@ -1741,6 +1828,11 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/estree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
+      "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA=="
+    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.6.tgz",
@@ -1787,9 +1879,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "20.4.1",
+      "version": "20.4.5",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.5.tgz",
-      "integrity": "sha512-JIzsAvJeA/5iY6Y/OxZbv1lUcc8dNSE77lb2gnBH+/PJ3lFR1Ccvgwl5JWnHAkNHcRsT0TbpVOsiMKZ1F/yyJg=="
+      "integrity": "sha512-rt40Nk13II9JwQBdeYqmbn2Q6IVTA5uPhvSO+JVqdXw/6/4glI6oR9ezty/A9Hg5u7JH4OmYmuQ+XvjKm0Datg=="
     },
     "node_modules/@types/prettier": {
       "version": "2.7.3",
@@ -1800,13 +1892,13 @@
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
       "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/react": {
-      "version": "18.2.14",
+      "version": "18.2.15",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.14.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.15.tgz",
-      "integrity": "sha512-A0zjq+QN/O0Kpe30hA1GidzyFjatVvrpIvWLxD+xv67Vt91TWWgco9IvrJBkeyHm1trGaFS/FSGqPlhyeZRm0g==",
+      "integrity": "sha512-oEjE7TQt1fFTFSbf8kkNuc798ahTUzn3Le67/PWjE8MAfYAD/qB7O8hSTcromLFqHCt9bcdOg5GXMokzTjJ5SA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -1814,9 +1906,9 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.2.4",
+      "version": "18.2.7",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.4.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz",
-      "integrity": "sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==",
+      "integrity": "sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==",
       "dev": true,
       "dependencies": {
         "@types/react": "*"
@@ -1826,7 +1918,7 @@
       "version": "0.16.3",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
       "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/semver": {
       "version": "7.5.0",
@@ -1853,32 +1945,34 @@
       "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA=="
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "5.59.8",
+      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.8.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.2.0.tgz",
-      "integrity": "sha512-JDMOmhXteJ4WVKOiHXGCoB96ADWg9q7efPWHRViT/f09bA8XOMLAVHHju3l0MkZnG1izaWXYmgvQcUjTRcpShQ==",
+      "integrity": "sha512-rClGrMuyS/3j0ETa1Ui7s6GkLhfZGKZL3ZrChLeAiACBE/tRc1wq8SNZESUuluxhLj9FkUefRs2l6bCIArWBiQ==",
       "dev": true,
       "dependencies": {
-        "@eslint-community/regexpp": "^4.4.0",
+        "@eslint-community/regexpp": "^4.5.1",
-        "@typescript-eslint/scope-manager": "5.59.8",
+        "@typescript-eslint/scope-manager": "6.2.0",
-        "@typescript-eslint/type-utils": "5.59.8",
+        "@typescript-eslint/type-utils": "6.2.0",
-        "@typescript-eslint/utils": "5.59.8",
+        "@typescript-eslint/utils": "6.2.0",
+        "@typescript-eslint/visitor-keys": "6.2.0",
         "debug": "^4.3.4",
-        "grapheme-splitter": "^1.0.4",
+        "graphemer": "^1.4.0",
-        "ignore": "^5.2.0",
+        "ignore": "^5.2.4",
+        "natural-compare": "^1.4.0",
         "natural-compare-lite": "^1.4.0",
-        "semver": "^7.3.7",
+        "semver": "^7.5.4",
-        "tsutils": "^3.21.0"
+        "ts-api-utils": "^1.0.1"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^16.0.0 || >=18.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^5.0.0",
+        "@typescript-eslint/parser": "^6.0.0 || ^6.0.0-alpha",
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+        "eslint": "^7.0.0 || ^8.0.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -1887,25 +1981,26 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "5.59.8",
+      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.59.8.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.2.1.tgz",
-      "integrity": "sha512-AnR19RjJcpjoeGojmwZtCwBX/RidqDZtzcbG3xHrmz0aHHoOcbWnpDllenRDmDvsV0RQ6+tbb09/kyc+UT9Orw==",
+      "integrity": "sha512-Ld+uL1kYFU8e6btqBFpsHkwQ35rw30IWpdQxgOqOh4NfxSDH6uCkah1ks8R/RgQqI5hHPXMaLy9fbFseIe+dIg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.59.8",
+        "@typescript-eslint/scope-manager": "6.2.1",
-        "@typescript-eslint/types": "5.59.8",
+        "@typescript-eslint/types": "6.2.1",
-        "@typescript-eslint/typescript-estree": "5.59.8",
+        "@typescript-eslint/typescript-estree": "6.2.1",
+        "@typescript-eslint/visitor-keys": "6.2.1",
         "debug": "^4.3.4"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^16.0.0 || >=18.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+        "eslint": "^7.0.0 || ^8.0.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -1913,17 +2008,91 @@
         }
       }
     },
-    "node_modules/@typescript-eslint/scope-manager": {
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.59.8",
+      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.59.8.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.2.1.tgz",
-      "integrity": "sha512-/w08ndCYI8gxGf+9zKf1vtx/16y8MHrZs5/tnjHhMLNSixuNcJavSX4wAiPf4aS5x41Es9YPCn44MIe4cxIlig==",
+      "integrity": "sha512-UCqBF9WFqv64xNsIEPfBtenbfodPXsJ3nPAr55mGPkQIkiQvgoWNo+astj9ZUfJfVKiYgAZDMnM6dIpsxUMp3Q==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.59.8",
+        "@typescript-eslint/types": "6.2.1",
-        "@typescript-eslint/visitor-keys": "5.59.8"
+        "@typescript-eslint/visitor-keys": "6.2.1"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/types": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.2.1.tgz",
+      "integrity": "sha512-528bGcoelrpw+sETlyM91k51Arl2ajbNT9L4JwoXE2dvRe1yd8Q64E4OL7vHYw31mlnVsf+BeeLyAZUEQtqahQ==",
+      "dev": true,
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.2.1.tgz",
+      "integrity": "sha512-G+UJeQx9AKBHRQBpmvr8T/3K5bJa485eu+4tQBxFq0KoT22+jJyzo1B50JDT9QdC1DEmWQfdKsa8ybiNWYsi0Q==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "6.2.1",
+        "@typescript-eslint/visitor-keys": "6.2.1",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "semver": "^7.5.4",
+        "ts-api-utils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.2.1.tgz",
+      "integrity": "sha512-iTN6w3k2JEZ7cyVdZJTVJx2Lv7t6zFA8DCrJEHD2mwfc16AEvvBWVhbFh34XyG2NORCd0viIgQY1+u7kPI0WpA==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "6.2.1",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.2.0.tgz",
+      "integrity": "sha512-1ZMNVgm5nnHURU8ZSJ3snsHzpFeNK84rdZjluEVBGNu7jDymfqceB3kdIZ6A4xCfEFFhRIB6rF8q/JIqJd2R0Q==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "6.2.0",
+        "@typescript-eslint/visitor-keys": "6.2.0"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -1931,25 +2100,25 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "5.59.8",
+      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.59.8.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.2.0.tgz",
-      "integrity": "sha512-+5M518uEIHFBy3FnyqZUF3BMP+AXnYn4oyH8RF012+e7/msMY98FhGL5SrN29NQ9xDgvqCgYnsOiKp1VjZ/fpA==",
+      "integrity": "sha512-DnGZuNU2JN3AYwddYIqrVkYW0uUQdv0AY+kz2M25euVNlujcN2u+rJgfJsBFlUEzBB6OQkUqSZPyuTLf2bP5mw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "5.59.8",
+        "@typescript-eslint/typescript-estree": "6.2.0",
-        "@typescript-eslint/utils": "5.59.8",
+        "@typescript-eslint/utils": "6.2.0",
         "debug": "^4.3.4",
-        "tsutils": "^3.21.0"
+        "ts-api-utils": "^1.0.1"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^16.0.0 || >=18.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "*"
+        "eslint": "^7.0.0 || ^8.0.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -1958,12 +2127,12 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "5.59.8",
+      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.8.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.2.0.tgz",
-      "integrity": "sha512-+uWuOhBTj/L6awoWIg0BlWy0u9TyFpCHrAuQ5bNfxDaZ1Ppb3mx6tUigc74LHcbHpOHuOTOJrBoAnhdHdaea1w==",
+      "integrity": "sha512-1nRRaDlp/XYJQLvkQJG5F3uBTno5SHPT7XVcJ5n1/k2WfNI28nJsvLakxwZRNY5spuatEKO7d5nZWsQpkqXwBA==",
       "dev": true,
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^16.0.0 || >=18.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -1971,21 +2140,21 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.59.8",
+      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.8.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.2.0.tgz",
-      "integrity": "sha512-Jy/lPSDJGNow14vYu6IrW790p7HIf/SOV1Bb6lZ7NUkLc2iB2Z9elESmsaUtLw8kVqogSbtLH9tut5GCX1RLDg==",
+      "integrity": "sha512-Mts6+3HQMSM+LZCglsc2yMIny37IhUgp1Qe8yJUYVyO6rHP7/vN0vajKu3JvHCBIy8TSiKddJ/Zwu80jhnGj1w==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.59.8",
+        "@typescript-eslint/types": "6.2.0",
-        "@typescript-eslint/visitor-keys": "5.59.8",
+        "@typescript-eslint/visitor-keys": "6.2.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
-        "semver": "^7.3.7",
+        "semver": "^7.5.4",
-        "tsutils": "^3.21.0"
+        "ts-api-utils": "^1.0.1"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^16.0.0 || >=18.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -1998,42 +2167,41 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "5.59.8",
+      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.59.8.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.2.0.tgz",
-      "integrity": "sha512-Tr65630KysnNn9f9G7ROF3w1b5/7f6QVCJ+WK9nhIocWmx9F+TmCAcglF26Vm7z8KCTwoKcNEBZrhlklla3CKg==",
+      "integrity": "sha512-RCFrC1lXiX1qEZN8LmLrxYRhOkElEsPKTVSNout8DMzf8PeWoQG7Rxz2SadpJa3VSh5oYKGwt7j7X/VRg+Y3OQ==",
       "dev": true,
       "dependencies": {
-        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/eslint-utils": "^4.4.0",
-        "@types/json-schema": "^7.0.9",
+        "@types/json-schema": "^7.0.12",
-        "@types/semver": "^7.3.12",
+        "@types/semver": "^7.5.0",
-        "@typescript-eslint/scope-manager": "5.59.8",
+        "@typescript-eslint/scope-manager": "6.2.0",
-        "@typescript-eslint/types": "5.59.8",
+        "@typescript-eslint/types": "6.2.0",
-        "@typescript-eslint/typescript-estree": "5.59.8",
+        "@typescript-eslint/typescript-estree": "6.2.0",
-        "eslint-scope": "^5.1.1",
+        "semver": "^7.5.4"
-        "semver": "^7.3.7"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^16.0.0 || >=18.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+        "eslint": "^7.0.0 || ^8.0.0"
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.59.8",
+      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.8.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.2.0.tgz",
-      "integrity": "sha512-pJhi2ms0x0xgloT7xYabil3SGGlojNNKjK/q6dB3Ey0uJLMjK2UDGJvHieiyJVW/7C3KI+Z4Q3pEHkm4ejA+xQ==",
+      "integrity": "sha512-QbaYUQVKKo9bgCzpjz45llCfwakyoxHetIy8CAvYCtd16Zu1KrpzNHofwF8kGkpPOxZB2o6kz+0nqH8ZkIzuoQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.59.8",
+        "@typescript-eslint/types": "6.2.0",
-        "eslint-visitor-keys": "^3.3.0"
+        "eslint-visitor-keys": "^3.4.1"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^16.0.0 || >=18.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -2056,7 +2224,6 @@
       "version": "8.10.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
       "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
-      "dev": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2073,6 +2240,14 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/acorn-walk": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
+      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -2148,6 +2323,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/arg": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -2493,6 +2673,11 @@
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
     },
+    "node_modules/create-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ=="
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -2510,7 +2695,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/debug": {
       "version": "4.3.4",
@@ -2555,6 +2740,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/diff": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
     "node_modules/diff-sequences": {
       "version": "29.4.3",
       "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.4.3.tgz",
@@ -2674,9 +2867,9 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.44.0",
+      "version": "8.45.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.44.0.tgz",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.45.0.tgz",
-      "integrity": "sha512-0wpHoUbDUHgNCyvFB5aXLiQVfK9B0at6gUvzy83k4kAsQ/u769TQDX6iKC+aO4upIHO9WSaA3QoXYQDHbNwf1A==",
+      "integrity": "sha512-pd8KSxiQpdYRfYa9Wufvdoct3ZPQQuVuU5O6scNgMuOMYuxvH0IGaYK0wUFjo4UYYQQCUndlXiMbnxopwvvTiw==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
@@ -2704,7 +2897,6 @@
         "globals": "^13.19.0",
         "graphemer": "^1.4.0",
         "ignore": "^5.2.0",
-        "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
         "is-path-inside": "^3.0.3",
@@ -2716,7 +2908,6 @@
         "natural-compare": "^1.4.0",
         "optionator": "^0.9.3",
         "strip-ansi": "^6.0.1",
-        "strip-json-comments": "^3.1.0",
         "text-table": "^0.2.0"
       },
       "bin": {
@@ -2750,19 +2941,6 @@
         "eslint": ">=7"
       }
     },
-    "node_modules/eslint-scope": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "dev": true,
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^4.1.1"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
     "node_modules/eslint-visitor-keys": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz",
@@ -2871,14 +3049,10 @@
         "node": ">=4.0"
       }
     },
-    "node_modules/estraverse": {
+    "node_modules/estree-walker": {
-      "version": "4.3.0",
+      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
-      "dev": true,
-      "engines": {
-        "node": ">=4.0"
-      }
     },
     "node_modules/esutils": {
       "version": "2.0.3",
@@ -3184,12 +3358,6 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
-    "node_modules/grapheme-splitter": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
-      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
-      "dev": true
-    },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -4145,6 +4313,11 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
+    },
     "node_modules/makeerror": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
@@ -4488,9 +4661,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.24",
+      "version": "8.4.26",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.26.tgz",
-      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
+      "integrity": "sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==",
       "dev": true,
       "funding": [
         {
@@ -4633,11 +4806,11 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/react-router": {
-      "version": "6.14.1",
+      "version": "6.14.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.2.tgz",
-      "integrity": "sha512-U4PfgvG55LdvbQjg5Y9QRWyVxIdO1LlpYT7x+tMAxd9/vmiPuJhIwdxZuIQLN/9e3O4KFDHYfR9gzGeYMasW8g==",
+      "integrity": "sha512-09Zss2dE2z+T1D03IheqAFtK4UzQyX8nFPWx6jkwdYzGLXd5ie06A6ezS2fO6zJfEb/SpG6UocN2O1hfD+2urQ==",
       "dependencies": {
-        "@remix-run/router": "1.7.1"
+        "@remix-run/router": "1.7.2"
       },
       "engines": {
         "node": ">=14"
@@ -4647,12 +4820,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.14.1",
+      "version": "6.14.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.14.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.14.2.tgz",
-      "integrity": "sha512-ssF6M5UkQjHK70fgukCJyjlda0Dgono2QGwqGvuk7D+EDGHdacEN3Yke2LTMjkrpHuFwBfDFsEjGVXBDmL+bWw==",
+      "integrity": "sha512-5pWX0jdKR48XFZBuJqHosX3AAHjRAzygouMTyimnBPOLdY3WjzUSKhus2FVMihUFWzeLebDgr4r8UeQFAct7Bg==",
       "dependencies": {
-        "@remix-run/router": "1.7.1",
+        "@remix-run/router": "1.7.2",
-        "react-router": "6.14.1"
+        "react-router": "6.14.2"
       },
       "engines": {
         "node": ">=14"
@@ -4662,6 +4835,34 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-ts5-remote-app-api": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/react-ts5-remote-app-api/-/react-ts5-remote-app-api-1.1.0.tgz",
+      "integrity": "sha512-H7Y7sLkZ8cgT+gWRbf3uBR4HqhT9EFuSyaHM86WXYcirjppEy1fO3vxAG/jm9o7sV6JZ8wkxgc9oHoByeOuplw==",
+      "dependencies": {
+        "@rollup/plugin-typescript": "^11.1.2",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "rollup-plugin-typescript-paths": "^1.4.0",
+        "ts-node": "^10.9.1",
+        "tslib": "^2.6.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-ts5-remote-app-api/node_modules/tslib": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz",
+      "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA=="
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -4762,7 +4963,7 @@
       "version": "3.26.2",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.26.2.tgz",
       "integrity": "sha512-6umBIGVz93er97pMgQO08LuH3m6PUb3jlDUUGFsNJB6VgTCUaDFpupf5JfU30529m/UKOgmiX+uY6Sx8cOYpLA==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -4774,6 +4975,14 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rollup-plugin-typescript-paths": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-typescript-paths/-/rollup-plugin-typescript-paths-1.4.0.tgz",
+      "integrity": "sha512-6EgeLRjTVmymftEyCuYu91XzY5XMB5lR0YrJkeT0D7OG2RGSdbNL+C/hfPIdc/sjMa9Sl5NLsxIr6C/+/5EUpA==",
+      "peerDependencies": {
+        "typescript": ">=3.4"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -4798,9 +5007,9 @@
       }
     },
     "node_modules/sass": {
-      "version": "1.63.6",
+      "version": "1.64.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.63.6.tgz",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.64.1.tgz",
-      "integrity": "sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==",
+      "integrity": "sha512-16rRACSOFEE8VN7SCgBu1MpYCyN7urj9At898tyzdXFhC+a+yOX5dXwAR7L8/IdPJ1NB8OYoXmD55DM30B2kEQ==",
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -5049,26 +5258,66 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/ts-api-utils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.1.tgz",
+      "integrity": "sha512-lC/RGlPmwdrIBFTX59wwNzqh7aR2otPNPR/5brHZm/XKFYKsfqxihXUe9pU3JI+3vGkl+vyCoNNnPhJn3aLK1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=16.13.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.2.0"
+      }
+    },
+    "node_modules/ts-node": {
+      "version": "10.9.1",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
+      "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==",
+      "dependencies": {
+        "@cspotcode/source-map-support": "^0.8.0",
+        "@tsconfig/node10": "^1.0.7",
+        "@tsconfig/node12": "^1.0.7",
+        "@tsconfig/node14": "^1.0.0",
+        "@tsconfig/node16": "^1.0.2",
+        "acorn": "^8.4.1",
+        "acorn-walk": "^8.1.1",
+        "arg": "^4.1.0",
+        "create-require": "^1.1.0",
+        "diff": "^4.0.1",
+        "make-error": "^1.1.1",
+        "v8-compile-cache-lib": "^3.0.1",
+        "yn": "3.1.1"
+      },
+      "bin": {
+        "ts-node": "dist/bin.js",
+        "ts-node-cwd": "dist/bin-cwd.js",
+        "ts-node-esm": "dist/bin-esm.js",
+        "ts-node-script": "dist/bin-script.js",
+        "ts-node-transpile-only": "dist/bin-transpile.js",
+        "ts-script": "dist/bin-script-deprecated.js"
+      },
+      "peerDependencies": {
+        "@swc/core": ">=1.2.50",
+        "@swc/wasm": ">=1.2.50",
+        "@types/node": "*",
+        "typescript": ">=2.7"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "@swc/wasm": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/tslib": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
+      "optional": true,
-    },
+      "peer": true
-    "node_modules/tsutils": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
-      "dev": true,
-      "dependencies": {
-        "tslib": "^1.8.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      },
-      "peerDependencies": {
-        "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
-      }
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -5106,7 +5355,6 @@
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
       "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
-      "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -5153,6 +5401,11 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/v8-compile-cache-lib": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
+      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg=="
+    },
     "node_modules/v8-to-istanbul": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.1.0.tgz",
@@ -5172,13 +5425,13 @@
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
     },
     "node_modules/vite": {
-      "version": "4.4.2",
+      "version": "4.4.7",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.7.tgz",
-      "integrity": "sha512-zUcsJN+UvdSyHhYa277UHhiJ3iq4hUBwHavOpsNUGsTgjBeoBlK8eDt+iT09pBq0h9/knhG/SPrZiM7cGmg7NA==",
+      "integrity": "sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.18.10",
-        "postcss": "^8.4.24",
+        "postcss": "^8.4.26",
         "rollup": "^3.25.2"
       },
       "bin": {
@@ -5335,6 +5588,14 @@
         "node": ">=12"
       }
     },
+    "node_modules/yn": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+      "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ts5-obs-overlay",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.2.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -10,25 +10,26 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@types/node": "^20.4.1",
+    "@types/node": "^20.4.5",
     "jest": "^29.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.14.1",
+    "react-router-dom": "^6.14.2",
-    "sass": "^1.63.6"
+    "react-ts5-remote-app-api": "^1.1.0",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@types/jest": "^29.5.2",
     "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.0.11",
+    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.0",
-    "@typescript-eslint/parser": "^5.59.0",
+    "@typescript-eslint/parser": "^6.2.1",
     "@vitejs/plugin-react-swc": "^3.0.0",
-    "eslint": "^8.44.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.2",
+    "vite": "^4.4.7",
     "vite-plugin-singlefile": "^0.13.5"
   }
 }

src/App.tsx

@@ -1,57 +1,21 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import "@styles/App.scss";
-import { IChannel, IClient, IConnection, ITS5ConnectionHandler } from "@interfaces/teamspeak";
+
-import { useEffect, useState } from "react";
-import Viewer from "./Viewer";
 import { useSearchParams } from "react-router-dom";
-import { TS5ConnectionHandler } from "@handlers/teamspeak/connectionHandler";
+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({
-  const [clients, setClients] = useState<IClient[]>([]);
+    remoteAppPort: parseInt(searchParams.get("remoteAppPort") ?? "5899"),
-  const [channels, setChannels] = useState<IChannel[]>([]);
+    auth: {
-  const [connections, setConnections] = useState<IConnection[]>([]);
+      identifier: "de.tealfire.obs",
-  const [activeConnectionId, setActiveConnectionId] = useState<number>(1);
+      version: "1.2.1",
-
+      name: "TS5 OBS Overlay",
-  const [currentConnection, setCurrentConnection] = useState<IConnection | undefined>(undefined);
+      description: "A OBS overlay for TS5 by DerTyp876",
-  const [currentChannel, setCurrentChannel] = useState<IChannel | undefined>(undefined);
+    },
-  const [currentClient, setCurrentClient] = useState<IClient | undefined>(undefined);
+  });
-
-  function setCurrentStates() {
-    const currentConnection = connections.find((connection) => connection.id === activeConnectionId);
-    setCurrentConnection(currentConnection);
-
-    if (currentConnection) {
-      const currentClient = clients.find((client) => client.id === currentConnection.clientId);
-      setCurrentClient(currentClient);
-      if (currentClient) {
-        const currentChannel = channels.find((channel) => channel.id === currentClient.channel?.id);
-        setCurrentChannel(currentChannel);
-        if (currentChannel) {
-          return currentChannel;
-        }
-      }
-    }
-  }
-
-  useEffect(() => {
-    const remoteAppPort = searchParams.get("remoteAppPort");
-
-    console.log(searchParams.get("hideNonTalking"));
-    const tsConnection: ITS5ConnectionHandler = new TS5ConnectionHandler(
-      parseInt(remoteAppPort ?? "5899"),
-      setConnections,
-      setChannels,
-      setClients,
-      setActiveConnectionId
-    );
-    tsConnection.connect();
-  }, []);
-
-  useEffect(() => {
-    setCurrentStates();
-  }, [clients, channels, connections, activeConnectionId]);
 
   return (
     <div className="App">

src/Viewer.tsx

@@ -1,5 +1,5 @@
-import { IChannel, IClient } from "@interfaces/teamspeak";
 import "@styles/Viewer.scss";
+import { IChannel, IClient } from "react-ts5-remote-app-api";
 
 export default function Viewer({
   clients,

src/handlers/teamspeak/connectionHandler.ts

@@ -1,132 +0,0 @@
-import { IAuthSenderPayload, IChannel, IClient, IConnection, ITS5ConnectionHandler, ITS5DataHandler, ITS5MessageHandler } from "@interfaces/teamspeak";
-import { TS5DataHandler } from "./dataHandler";
-import { TS5MessageHandler } from "./messageHandler";
-import Logger from "@/utils/logger";
-
-
-// Establish connection to TS5 client
-// Main class
-export class TS5ConnectionHandler implements ITS5ConnectionHandler {
-  ws: WebSocket; // Websocket connection to TS5 client
-  authenticated = false; // Is the connection authenticated?
-  remoteAppPort: number; // Port of TS5 client
-  dataHandler: ITS5DataHandler; // Handles data/lists and states
-  messageHandler: ITS5MessageHandler; // Handles messages received from TS5 client
-
-  constructor(
-    // Port of TS5 client
-    remoteAppPort: number,
-
-    // State setters for dataHandler
-    setConnections: React.Dispatch<React.SetStateAction<IConnection[]>>,
-    setChannels: React.Dispatch<React.SetStateAction<IChannel[]>>,
-    setClients: React.Dispatch<React.SetStateAction<IClient[]>>,
-    setActiveConnectionStateId: React.Dispatch<React.SetStateAction<number>>,
-  ) {
-
-
-    // Create websocket connection to TS5 client
-    this.remoteAppPort = remoteAppPort;
-    this.ws = new WebSocket(`ws://localhost:${this.remoteAppPort}`);
-
-    // Create dataHandler and messageHandler
-    this.dataHandler = new TS5DataHandler(setConnections, setChannels, setClients);
-    this.messageHandler = new TS5MessageHandler(this.ws, this.dataHandler, setActiveConnectionStateId);
-  }
-
-  reconnect() {
-    Logger.log("Reconnecting...")
-    this.ws.close();
-
-    this.ws = new WebSocket(`ws://localhost:${this.remoteAppPort}`);
-
-    this.dataHandler.clearAll();
-    this.authenticated = false;
-    this.connect();
-  }
-
-  // Connect to TS5 client
-  connect() {
-    Logger.log('Connecting to TS5 client...');
-
-    // Create authentication payload
-    const initalPayload: IAuthSenderPayload = {
-      type: "auth",
-      payload: {
-        identifier: "de.tealfire.obs",
-        version: "1.1.2",
-        name: "TS5 OBS Overlay",
-        description: "A OBS overlay for TS5 by DerTyp876",
-        content: {
-          apiKey: localStorage.getItem("apiKey") ?? "",
-        },
-      },
-    };
-
-    this.ws.onopen = () => {
-      // Send authentication payload to TS5 client
-      this.ws.send(JSON.stringify(initalPayload));
-      Logger.wsSent(initalPayload);
-    };
-
-    this.ws.onclose = (event) => {
-      Logger.log("WebSocket connection closed", event);
-
-      // If the connection was closed before authentication, remove the API key from local storage
-      // OBS weirdly caches the localstorage and is very stubborn about clearing it (even when clicken "Clear Cache")
-      if (!this.authenticated) {
-        Logger.log("WebSocket connection closed before authentication");
-        localStorage.removeItem("apiKey");
-      }
-
-      setTimeout(() => {
-        this.reconnect();
-      }, 2000);
-    };
-
-    // Handle messages received from TS5 client
-    // See TS5MessageHandler class
-    this.ws.onmessage = (event) => {
-      const data = JSON.parse(event.data);
-
-      Logger.wsReceived(data)
-
-      switch (data.type) {
-        case "auth":
-          this.messageHandler.handleAuthMessage(data);
-          this.authenticated = true;
-          break;
-        case "clientMoved":
-          this.messageHandler.handleClientMovedMessage(data);
-          break;
-        case "clientPropertiesUpdated":
-          this.messageHandler.handleClientPropertiesUpdatedMessage(data);
-          break;
-        case "talkStatusChanged":
-          this.messageHandler.handleTalkStatusChangedMessage(data);
-          break;
-        case "serverPropertiesUpdated":
-          this.messageHandler.handleServerPropertiesUpdatedMessage(data);
-          break;
-        case "connectStatusChanged":
-          this.messageHandler.handleConnectStatusChangedMessage(data);
-          break;
-        case "clientSelfPropertyUpdated":
-          this.messageHandler.handleClientSelfPropertyUpdatedMessage(data);
-          break;
-        case "channels":
-          this.messageHandler.handleChannelsMessage(data);
-          break;
-        default:
-          Logger.log(`No handler for event type: ${data.type}`);
-          break;
-      }
-    };
-  }
-}
-
-
-
-
-
-

src/handlers/teamspeak/dataHandler.ts

@@ -1,205 +0,0 @@
-import Logger from "@/utils/logger";
-import { IConnection, IChannel, IClient, ITS5DataHandler } from "@interfaces/teamspeak";
-
-
-/**
- * Handles data received from TS5 client (list of connections, channels and clients)
- * Updates the states of App.tsx
- */
-export class TS5DataHandler implements ITS5DataHandler {
-  // Local lists of connections, channels and clients
-  // These lists are used to keep track of the data, independent of the App.tsx state
-  localConnections: IConnection[];
-  localChannels: IChannel[];
-  localClients: IClient[];
-
-  // State setters for App.tsx
-  setConnections: React.Dispatch<React.SetStateAction<IConnection[]>>;
-  setChannels: React.Dispatch<React.SetStateAction<IChannel[]>>;
-  setClients: React.Dispatch<React.SetStateAction<IClient[]>>;
-
-  constructor(
-    // State setters for App.tsx
-    setConnections: React.Dispatch<React.SetStateAction<IConnection[]>>,
-    setChannels: React.Dispatch<React.SetStateAction<IChannel[]>>,
-    setClients: React.Dispatch<React.SetStateAction<IClient[]>>
-  ) {
-    this.setConnections = setConnections;
-    this.setChannels = setChannels;
-    this.setClients = setClients;
-
-    this.localConnections = [];
-    this.localChannels = [];
-    this.localClients = [];
-  }
-
-  // Update App.tsx states
-  private updateConnectionsState() {
-    this.setConnections([...this.localConnections]);
-  }
-
-  private updateChannelsState() {
-    this.setChannels([...this.localChannels]);
-  }
-
-  private updateClientsState() {
-    this.setClients([...this.localClients]);
-  }
-
-  // Clear all data
-  clearAll() {
-    this.localConnections = [];
-    this.localChannels = [];
-    this.localClients = [];
-
-    this.updateConnectionsState();
-    this.updateChannelsState();
-    this.updateClientsState();
-  }
-
-  // Add data to local lists and update states
-  addConnection(connection: IConnection) {
-    Logger.log("Adding connection...", connection)
-
-    const existingConnection: IConnection | undefined = this.localConnections.find((localConnection: IConnection) => localConnection.id === connection.id);
-
-    if (existingConnection == undefined) {
-      this.localConnections.push(connection);
-      this.updateConnectionsState();
-      Logger.log("Connection added")
-    } else {
-      Logger.log("Connection already exists")
-    }
-  }
-
-  addChannel(channel: IChannel) {
-    Logger.log("Adding channel...", channel)
-    const existingChannel: IChannel | undefined = this.localChannels.find((localChannel: IChannel) => localChannel.id === channel.id && localChannel.connection.id === channel.connection.id);
-
-    if (existingChannel == undefined) {
-      this.localChannels.push(channel);
-      this.updateChannelsState();
-      Logger.log("Channel added")
-    } else {
-      Logger.log("Channel already exists")
-    }
-  }
-
-  addClient(client: IClient) {
-    Logger.log("Adding client...", client)
-    const existingClient: IClient | undefined = this.localClients.find((localClient: IClient) => localClient.id === client.id && localClient.channel?.connection.id === client.channel?.connection.id);
-
-    if (existingClient == undefined) {
-      this.localClients.push(client);
-      this.updateClientsState();
-      Logger.log("Client added")
-    } else {
-      Logger.log("Client already exists")
-    }
-  }
-
-  // Update data in local lists and update states
-  updateConnection(connection: IConnection) {
-    Logger.log("Updating connection...", connection)
-    const existingConnection: IConnection | undefined = this.localConnections.find((localConnection: IConnection) => localConnection.id === connection.id);
-
-    if (existingConnection !== undefined) {
-      this.localConnections[this.localConnections.indexOf(existingConnection)] = connection;
-      this.updateConnectionsState();
-      Logger.log("Connection updated")
-    } else {
-      Logger.log("Connection does not exist")
-    }
-  }
-
-  updateChannel(channel: IChannel) {
-    Logger.log("Updating channel...", channel)
-    const existingChannel: IChannel | undefined = this.localChannels.find((localChannel: IChannel) => localChannel.id === channel.id && localChannel.connection.id === channel.connection.id);
-
-    if (existingChannel !== undefined) {
-      this.localChannels[this.localChannels.indexOf(existingChannel)] = channel;
-      this.updateChannelsState();
-      Logger.log("Channel updated")
-    } else {
-      Logger.log("Channel does not exist")
-    }
-  }
-
-  updateClient(client: IClient) {
-    Logger.log("Updating client...", client)
-    const existingClient: IClient | undefined = this.localClients.find((localClient: IClient) => localClient.id === client.id && localClient.channel?.connection.id === client.channel?.connection.id);
-
-    if (existingClient !== undefined) {
-      this.localClients[this.localClients.indexOf(existingClient)] = client;
-      this.updateClientsState();
-      Logger.log("Client updated")
-    } else {
-      Logger.log("Client does not exist")
-    }
-  }
-
-  // Remove data from local lists and update states
-  removeConnection(connection: IConnection) {
-    Logger.log("Removing connection...", connection)
-    const existingConnection: IConnection | undefined = this.localConnections.find((localConnection: IConnection) => localConnection.id === connection.id);
-
-    if (existingConnection !== undefined) {
-      this.localConnections.splice(this.localConnections.indexOf(existingConnection), 1);
-
-      // Remove all channels and clients associated with the connection
-      this.localChannels = this.localChannels.filter((localChannel: IChannel) => localChannel.connection.id !== connection.id);
-      this.localClients = this.localClients.filter((localClient: IClient) => localClient.channel?.connection.id !== connection.id);
-
-      this.updateChannelsState();
-      this.updateClientsState();
-      this.updateConnectionsState();
-      Logger.log("Connection removed")
-    } else {
-      Logger.log("Connection does not exist")
-    }
-  }
-
-  removeChannel(channel: IChannel) {
-    Logger.log("Removing channel...", channel)
-    const existingChannel: IChannel | undefined = this.localChannels.find((localChannel: IChannel) => localChannel.id === channel.id && localChannel.connection.id === channel.connection.id);
-
-    if (existingChannel !== undefined) {
-      this.localChannels.splice(this.localChannels.indexOf(existingChannel), 1);
-
-      // Remove all clients associated with the channel
-      this.localClients = this.localClients.filter((localClient: IClient) => localClient.channel?.id !== channel.id);
-
-      this.updateClientsState();
-      this.updateChannelsState();
-      Logger.log("Channel removed")
-    } else {
-      Logger.log("Channel does not exist")
-    }
-  }
-
-  removeClient(client: IClient) {
-    Logger.log("Removing client...", client)
-    const existingClient: IClient | undefined = this.localClients.find((localClient: IClient) => localClient.id === client.id && localClient.channel?.connection.id === client.channel?.connection.id);
-
-    if (existingClient !== undefined) {
-      this.localClients.splice(this.localClients.indexOf(existingClient), 1);
-      this.updateClientsState();
-      Logger.log("Client removed")
-    } else {
-      Logger.log("Client does not exist")
-    }
-  }
-
-  // Helper functions
-  getConnectionById(id: number): IConnection | undefined {
-    return this.localConnections.find((connection: IConnection) => connection.id === id);
-  }
-
-  getChannelById(id: number, connectionId: number): IChannel | undefined {
-    return this.localChannels.find((channel: IChannel) => channel.id === id && channel.connection?.id === connectionId);
-  }
-
-  getClientById(id: number, connectionId: number): IClient | undefined {
-    return this.localClients.find((client: IClient) => client.id === id && client.channel?.connection.id === connectionId);
-  }
-}

src/handlers/teamspeak/messageHandler.ts

@@ -1,197 +0,0 @@
-import Logger from "@/utils/logger";
-import { IChannelInfos, IConnection, IChannel, IAuthMessage, IClientInfo, IClientMovedMessage, IClient, IClientPropertiesUpdatedMessage, ITalkStatusChangedMessage, IClientSelfPropertyUpdatedMessage, IServerPropertiesUpdatedMessage, IConnectStatusChangedMessage, IChannelsMessage, ITS5MessageHandler, ITS5DataHandler } from "@interfaces/teamspeak";
-
-// Handle incoming messages from TS5 client
-export class TS5MessageHandler implements ITS5MessageHandler {
-  ws: WebSocket;
-  dataHandler: ITS5DataHandler;
-
-  setActiveConnectionStateId: React.Dispatch<React.SetStateAction<number>>;
-  activeConnectionId = 0;
-
-  constructor(ws: WebSocket, dataHandler: ITS5DataHandler, setActiveConnectionStateId: React.Dispatch<React.SetStateAction<number>>) {
-    this.ws = ws;
-    this.dataHandler = dataHandler;
-    this.setActiveConnectionStateId = setActiveConnectionStateId;
-  }
-
-  setActiveConnection(connectionId: number) {
-    this.activeConnectionId = connectionId;
-    this.setActiveConnectionStateId(connectionId);
-  }
-
-  parseChannelInfos(channelInfos: IChannelInfos, connection: IConnection) {
-    channelInfos.rootChannels.forEach((channel: IChannel) => {
-      this.dataHandler.addChannel({ ...channel, connection: connection });
-
-      if (channelInfos) {
-        if (channelInfos.subChannels !== null && channel.id in channelInfos.subChannels) {
-          channelInfos.subChannels[channel.id].forEach((subChannel: IChannel) => {
-            this.dataHandler.addChannel({ ...subChannel, connection: connection });
-          });
-        }
-      }
-    });
-  }
-
-  // This message is sent by the TS5 server when the client is connected
-  // It contains the initial data
-  handleAuthMessage(data: IAuthMessage) {
-    localStorage.setItem("apiKey", data.payload.apiKey);
-
-    // Process auth payload and add initial data
-    data.payload.connections.forEach((connection: IConnection) => {
-      this.dataHandler.addConnection(connection);
-
-      // Add channels
-      if (connection.channelInfos !== undefined) {
-        this.parseChannelInfos(connection.channelInfos, connection);
-      }
-
-      // Add clients
-      connection.clientInfos?.forEach((clientInfo: IClientInfo) => {
-        const clientChannel: IChannel | undefined = this.dataHandler.getChannelById(clientInfo.channelId, connection.id);
-
-        if (clientChannel !== undefined) {
-          this.dataHandler.addClient({
-            id: clientInfo.id,
-            talkStatus: 0,
-            channel: { ...clientChannel, connection: connection },
-            properties: clientInfo.properties,
-          });
-        }
-      });
-    });
-  }
-
-  // This message is sent by the TS5 server when a client moves a channel OR joins/leaves the server
-  handleClientMovedMessage(data: IClientMovedMessage) {
-    const client: IClient | undefined = this.dataHandler.getClientById(data.payload.clientId, data.payload.connectionId);
-
-
-    //* This gets called when we are connecting to the server and the new clients get loaded
-    if (+data.payload.oldChannelId == 0) { // Create new client(when connecting to server)
-      //set timout to wait for channels to be created
-      setTimeout(() => {
-        const newChannel = this.dataHandler.getChannelById(data.payload.newChannelId, data.payload.connectionId);
-        if (newChannel !== undefined) {
-          this.dataHandler.addClient(
-            {
-              id: data.payload.clientId,
-              talkStatus: 0,
-              channel: newChannel,
-              properties: data.payload.properties,
-            });
-          Logger.ts(`New Client found (${data.payload.connectionId} - ${data.payload.clientId} - ${data.payload.properties.nickname})`)
-        }
-      }, 2000);
-
-    } else {//* This gets called when a client moves a channel OR joins/leaves the server
-      const newChannel: IChannel | undefined = this.dataHandler.getChannelById(data.payload.newChannelId, data.payload.connectionId);
-
-      if (newChannel === undefined || newChannel.id === 0) {
-        Logger.ts(`Client left (${data.payload.connectionId} - ${data.payload.clientId} - ${data.payload.properties.nickname})`)
-        if (client !== undefined) {
-          this.dataHandler.removeClient(client);
-        }
-        return;
-      }
-
-      if (client !== undefined) { // Client already exists
-        Logger.ts(`Client moved (${client.channel.connection.id} - ${client.id} - ${client.properties.nickname})`)
-
-        this.dataHandler.updateClient({
-          ...client,
-          channel: newChannel,
-        });
-
-      } else { // Client does not exist
-        // Client joined
-        Logger.ts(`Client joined (${data.payload.connectionId} - ${data.payload.clientId} - ${data.payload.properties.nickname})`)
-
-        this.dataHandler.addClient(
-          {
-            id: data.payload.clientId,
-            talkStatus: 0,
-            channel: newChannel,
-            properties: data.payload.properties,
-          }
-        );
-      }
-    }
-  }
-
-  handleClientPropertiesUpdatedMessage(data: IClientPropertiesUpdatedMessage) {
-    const client: IClient | undefined = this.dataHandler.getClientById(data.payload.clientId, data.payload.connectionId);
-
-    if (client !== undefined) {
-      this.dataHandler.updateClient({
-        ...client,
-        properties: data.payload.properties,
-      });
-    }
-  }
-
-  handleTalkStatusChangedMessage(data: ITalkStatusChangedMessage) {
-    const client: IClient | undefined = this.dataHandler.getClientById(data.payload.clientId, data.payload.connectionId);
-
-    if (client !== undefined) {
-      this.dataHandler.updateClient({
-        ...client,
-        talkStatus: data.payload.status,
-      });
-    }
-
-    // console.log(this.dataHandler.localConnections)
-    // console.log(this.dataHandler.localChannels)
-    // console.log(this.dataHandler.localClients)
-
-  }
-  handleClientSelfPropertyUpdatedMessage(data: IClientSelfPropertyUpdatedMessage) {
-    const connection: IConnection | undefined = this.dataHandler.getConnectionById(this.activeConnectionId);
-
-    if (data.payload.flag == "inputHardware" || connection == undefined) { // sadly thats the only way to detect if a server is active or not
-      this.setActiveConnection(data.payload.connectionId);
-    }
-  }
-
-  handleServerPropertiesUpdatedMessage(data: IServerPropertiesUpdatedMessage) {
-    const connection: IConnection | undefined = this.dataHandler.getConnectionById(data.payload.connectionId);
-
-    if (connection !== undefined) { // Update existing connection
-      this.dataHandler.updateConnection({
-        ...connection,
-        properties: data.payload.properties,
-      });
-    }
-  }
-
-  handleConnectStatusChangedMessage(data: IConnectStatusChangedMessage) {
-    if (data.payload.status === 0) { // Disconnected from server
-      const connection: IConnection | undefined = this.dataHandler.getConnectionById(data.payload.connectionId);
-
-      if (connection !== undefined) {
-        this.dataHandler.removeConnection(connection);
-      }
-    }
-
-    // Status 1-3 are the connection steps (connecting, authenticating, etc.) (i guess)
-
-    if (data.payload.status === 4) { // Connected to server
-      this.dataHandler.addConnection({
-        id: data.payload.connectionId,
-        clientId: data.payload.info.clientId,
-      });
-    }
-  }
-
-  handleChannelsMessage(data: IChannelsMessage) {
-    // Wait a bit for the connection to be added
-    setTimeout(() => {
-      const connection: IConnection | undefined = this.dataHandler.getConnectionById(data.payload.connectionId);
-      if (connection !== undefined) {
-        this.parseChannelInfos(data.payload.info, connection);
-      }
-    }, 1000);
-  }
-}

src/interfaces/teamspeak.ts

@@ -1,341 +0,0 @@
-// Classes
-export interface ITS5ConnectionHandler {
-  ws: WebSocket;
-  authenticated: boolean;
-  remoteAppPort: number;
-  dataHandler: ITS5DataHandler;
-  messageHandler: ITS5MessageHandler;
-  reconnect(): void;
-  connect(): void;
-}
-
-export interface ITS5DataHandler {
-  localConnections: IConnection[];
-  localChannels: IChannel[];
-  localClients: IClient[];
-  setConnections: React.Dispatch<React.SetStateAction<IConnection[]>>;
-  setChannels: React.Dispatch<React.SetStateAction<IChannel[]>>;
-  setClients: React.Dispatch<React.SetStateAction<IClient[]>>;
-  clearAll(): void;
-  addConnection(connection: IConnection): void;
-  addChannel(channel: IChannel): void;
-  addClient(client: IClient): void;
-  updateConnection(connection: IConnection): void;
-  updateChannel(channel: IChannel): void;
-  updateClient(client: IClient): void;
-  removeConnection(connection: IConnection): void;
-  removeChannel(channel: IChannel): void;
-  removeClient(client: IClient): void;
-  getConnectionById(id: number): IConnection | undefined;
-  getChannelById(id: number, connectionId: number): IChannel | undefined;
-  getClientById(id: number, connectionId: number): IClient | undefined;
-}
-
-export interface ITS5MessageHandler {
-  ws: WebSocket;
-  dataHandler: ITS5DataHandler;
-  setActiveConnectionStateId: React.Dispatch<React.SetStateAction<number>>;
-  activeConnectionId: number;
-  setActiveConnection(connectionId: number): void;
-  parseChannelInfos(channelInfos: IChannelInfos, connection: IConnection): void;
-  handleAuthMessage(data: IAuthMessage): void;
-  handleClientMovedMessage(data: IClientMovedMessage): void;
-  handleClientPropertiesUpdatedMessage(data: IClientPropertiesUpdatedMessage): void;
-  handleTalkStatusChangedMessage(data: ITalkStatusChangedMessage): void;
-  handleClientSelfPropertyUpdatedMessage(data: IClientSelfPropertyUpdatedMessage): void;
-  handleServerPropertiesUpdatedMessage(data: IServerPropertiesUpdatedMessage): void;
-  handleConnectStatusChangedMessage(data: IConnectStatusChangedMessage): void;
-  handleChannelsMessage(data: IChannelsMessage): void;
-}
-
-// Remote App
-export interface IAuthSenderPayload {
-  type: "auth";
-  payload: {
-    identifier: string;
-    version: string;
-    name: string;
-    description: string;
-    content: {
-      apiKey: string;
-    };
-  };
-}
-
-export interface IClient {
-  id: number;
-  talkStatus: number;
-  channel: IChannel;
-  properties: IClientProperties;
-}
-
-export interface IChannel {
-  id: number;
-  connection: IConnection;
-  order: string;
-  parentId: string;
-  properties: IChannelProperties;
-}
-
-export interface IConnection {
-  channelInfos?: IChannelInfos;
-  clientId: number;
-  clientInfos?: IClientInfo[];
-  id: number;
-  properties?: IServerProperties;
-}
-
-
-export interface IChannelProperties {
-  bannerGfxUrl: string;
-  bannerMode: number;
-  codec: number;
-  codecIsUnencrypted: boolean;
-  codecLatencyFactor: number;
-  codecQuality: number;
-  deleteDelay: number;
-  description: string;
-  flagAreSubscribed: boolean;
-  flagDefault: boolean;
-  flagMaxclientsUnlimited: boolean;
-  flagMaxfamilyclientsInherited: boolean;
-  flagMaxfamilyclientsUnlimited: boolean;
-  flagPassword: boolean;
-  flagPermanent: boolean;
-  flagSemiPermanent: boolean;
-  forcedSilence: boolean;
-  iconId: number;
-  maxclients: number;
-  maxfamilyclients: number;
-  name: string;
-  namePhonetic: string;
-  neededTalkPower: number;
-  order: string;
-  permissionHints: number;
-  storageQuota: number;
-  topic: string;
-  uniqueIdentifier: string;
-}
-
-
-export interface IChannelInfos {
-  rootChannels: IChannel[];
-  subChannels: { [key: number]: IChannel[] };
-}
-
-export interface IClientInfo {
-  channelId: number;
-  id: number;
-  properties: IClientProperties;
-}
-
-export interface IClientProperties {
-  away: boolean;
-  awayMessage: string;
-  badges: string;
-  channelGroupId: string;
-  channelGroupInheritedChannelId: string;
-  country: string;
-  created: number;
-  databaseId: string;
-  defaultChannel: string;
-  defaultChannelPassword: string;
-  defaultToken: string;
-  description: string;
-  flagAvatar: string;
-  flagTalking: boolean;
-  iconId: number;
-  idleTime: number;
-  inputDeactivated: boolean;
-  inputHardware: boolean;
-  inputMuted: boolean;
-  integrations: string;
-  isChannelCommander: boolean;
-  isMuted: boolean;
-  isPrioritySpeaker: boolean;
-  isRecording: boolean;
-  isTalker: boolean;
-  lastConnected: number;
-  metaData: string;
-  monthBytesDownloaded: number;
-  monthBytesUploaded: number;
-  myteamspeakAvatar: string;
-  myteamspeakId: string;
-  neededServerQueryViewPower: number;
-  nickname: string;
-  nicknamePhonetic: string;
-  outputHardware: boolean;
-  outputMuted: boolean;
-  outputOnlyMuted: boolean;
-  permissionHints: number;
-  platform: string;
-  serverGroups: string;
-  serverPassword: string;
-  signedBadges: string;
-  talkPower: number;
-  talkRequest: number;
-  talkRequestMsg: string;
-  totalBytesDownloaded: number;
-  totalBytesUploaded: number;
-  totalConnections: number;
-  type: number;
-  uniqueIdentifier: string;
-  unreadMessages: number;
-  userTag: string;
-  version: string;
-  volumeModificator: number;
-}
-
-export interface IServerProperties {
-  antiFloodPointsNeededCommandBlock: number;
-  antiFloodPointsNeededIpBlock: number;
-  antiFloodPointsNeededPluginBlock: number;
-  antiFloodPointsTickReduce: number;
-  askForPrivilegeKeyAfterNickname: boolean;
-  askForPrivilegeKeyForChannelCreation: boolean;
-  askForPrivilegeKeyForModify: boolean;
-  awayMessage: string;
-  badges: string;
-  channelGroupId: string;
-  channelGroupInheritedChannelId: string;
-  clientType: number;
-  connectionBandwidthReceived: number;
-  connectionBandwidthSent: number;
-  connectionClientIp: string;
-  connectionConnectedTime: number;
-  connectionFiletransferBandwidthReceived: number;
-  connectionFiletransferBandwidthSent: number;
-  connectionPacketloss: number;
-  connectionPing: number;
-  connectionPacketsReceived: number;
-  connectionPacketsSent: number;
-  connectionPort: number;
-  connectionQueryBandwidthReceived: number;
-  connectionQueryBandwidthSent: number;
-  connectionServerIp: string;
-  connectionServerPort: number;
-  connectionThrottleBandwidthReceived: number;
-  connectionThrottleBandwidthSent: number;
-  country: string;
-  created: number;
-  defaultChannel: string;
-  defaultChannelPassword: string;
-  defaultServerGroup: string;
-  defaultToken: string;
-  flagAvatar: string;
-  iconId: number;
-  inputHardware: boolean;
-  inputMuted: boolean;
-  isChannelCommander: boolean;
-  isMuted: boolean;
-  isPrioritySpeaker: boolean;
-  isRecording: boolean;
-  isTalker: boolean;
-  isTts: boolean;
-  metaData: string;
-  monthBytesDownloaded: number;
-  monthBytesUploaded: number;
-  myteamspeakAvatar: string;
-  myteamspeakId: string;
-  neededServerQueryViewPower: number;
-  nickname: string;
-  nicknamePhonetic: string;
-  outputHardware: boolean;
-  outputMuted: boolean;
-  outputOnlyMuted: boolean;
-  permissionHints: number;
-  platform: string;
-  serverPassword: string;
-  signedBadges: string;
-  talkPower: number;
-  talkRequest: number;
-  talkRequestMsg: string;
-  totalBytesDownloaded: number;
-  totalBytesUploaded: number;
-  totalConnections: number;
-  type: number;
-  uniqueIdentifier: string;
-  unreadMessages: number;
-  userTag: string;
-  version: string;
-  volumeModificator: number;
-}
-
-
-export interface IClientPropertiesUpdatedMessage {
-  type: "clientPropertiesUpdated";
-  payload: {
-    clientId: number;
-    connectionId: number;
-    properties: IClientProperties;
-  };
-}
-
-export interface IClientMovedMessage {
-  type: "clientMoved";
-  payload: {
-    properties: IClientProperties;
-    clientId: number;
-    connectionId: number;
-    newChannelId: number;
-    oldChannelId: number;
-    type: number;
-    visibility: number;
-  };
-}
-
-export interface ITalkStatusChangedMessage {
-  type: "talkStatusChanged";
-  payload: {
-    clientId: number;
-    connectionId: number;
-    isWhisper: boolean;
-    status: number;
-  };
-}
-
-export interface IClientSelfPropertyUpdatedMessage {
-  type: "clientSelfPropertyUpdated";
-  payload: {
-    connectionId: number;
-    flag: string;
-    newValue: boolean;
-    oldValue: boolean;
-  };
-}
-
-export interface IAuthMessage {
-  type: "auth";
-  payload: {
-    apiKey: string;
-    connections: IConnection[];
-  };
-}
-
-export interface IServerPropertiesUpdatedMessage {
-  type: "serverPropertiesUpdated";
-  payload: {
-    connectionId: number;
-    properties: IServerProperties;
-  };
-}
-
-export interface IConnectStatusChangedMessage {
-  type: "connectStatusChanged";
-  payload: {
-    connectionId: number;
-    error: number;
-    info: {
-      clientId: number;
-    }
-    status: number;
-  };
-}
-
-export interface IChannelsMessage {
-  type: "channels";
-  payload: {
-    connectionId: number;
-    info: IChannelInfos
-  }
-}