[feature] add remoteAppPort as query param

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.14.0",
         "sass": "^1.62.1"
       },
       "devDependencies": {
@@ -502,6 +503,14 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.0.tgz",
+      "integrity": "sha512-Eu1V3kz3mV0wUpVTiFHuaT8UD1gj/0VnoFHQYX35xlslQUpe8CuYoKFn9d4WZFHm3yDywz6ALZuGdnUPKrNeAw==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@swc/core": {
       "version": "1.3.62",
       "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.62.tgz",
@@ -2171,6 +2180,36 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.0.tgz",
+      "integrity": "sha512-OD+vkrcGbvlwkspUFDgMzsu1RXwdjNh83YgG/28lBnDzgslhCgxIqoExLlxsfTpIygp7fc+Hd3esloNwzkm2xA==",
+      "dependencies": {
+        "@remix-run/router": "1.7.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.14.0.tgz",
+      "integrity": "sha512-YEwlApKwzMMMbGbhh+Q7MsloTldcwMgHxUY/1g0uA62+B1hZo2jsybCWIDCL8zvIDB1FA0pBKY9chHbZHt+2dQ==",
+      "dependencies": {
+        "@remix-run/router": "1.7.0",
+        "react-router": "6.14.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.0",
     "sass": "^1.62.1"
   },
   "devDependencies": {

src/App.tsx

@@ -4,8 +4,11 @@ import { TS5Connection } from "./teamspeak5Handler";
 import { IChannel, IClient, IConnection } from "interfaces/teamspeak";
 import { useEffect, useState } from "react";
 import Viewer from "./Viewer";
+import { useSearchParams } from "react-router-dom";
 
 export default function App() {
+  const [searchParams] = useSearchParams();
+
   const [clients, setClients] = useState<IClient[]>([]);
   const [channels, setChannels] = useState<IChannel[]>([]);
   const [connections, setConnections] = useState<IConnection[]>([]);
@@ -33,8 +36,10 @@ export default function App() {
   }
 
   useEffect(() => {
+    const remoteAppPort = searchParams.get("remoteAppPort");
+
     const tsConnection: TS5Connection = new TS5Connection(
-      5899,
+      parseInt(remoteAppPort ?? "5899"),
       setConnections,
       setChannels,
       setClients,

src/main.tsx

@@ -1,10 +1,13 @@
 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";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
+    <BrowserRouter>
       <App />
+    </BrowserRouter>
   </React.StrictMode>
 );