added recoding and settings tab

src/app/page.tsx

@@ -4,35 +4,78 @@ import {useEffect, useMemo, useState} from "react";
 import {fetchConfig} from "@/app/utils/fetchConfig";
 import BusControlTabs from "@/app/components/BusControlTabs";
 import MainMix from "@/app/components/MainMix";
+import Settings from "@/app/components/Settings";
+import {Config} from "@/app/types/config";
 
 // initialize global websocket connection
-import {initConnection, isConnected} from "@/app/lib/x32CommunicationManager";
+import {fetchValue, initConnection, isConnected} from "@/app/lib/x32CommunicationManager";
 
-const WEBSOCKET_PORT = 3001;
+
+function withTimeout<T>(promise: Promise<T>, timeoutMs: number): Promise<T> {
+    return new Promise<T>((resolve, reject) => {
+        const timeout = setTimeout(() => {
+            reject(new Error("Request timed out"));
+        }, timeoutMs);
+
+        promise
+            .then((result) => {
+                clearTimeout(timeout);
+                resolve(result);
+            })
+            .catch((error) => {
+                clearTimeout(timeout);
+                reject(error);
+            });
+    });
+}
 
 const Page = () => {
     const [appConfig, setAppConfig] = useState(null);
     const [activeTab, setActiveTab] = useState("mainMix");
 
     const [webSocketConnected, setWebSocketConnected] = useState(false);
+    const [mixerConnected, setMixerConnected] = useState(false);
+
 
     useEffect(() => {
-        initConnection(`ws://${window.location.hostname}:${WEBSOCKET_PORT}`);
-        fetchConfig().then(config => {
+        fetchConfig().then((config: Config) => {
             setAppConfig(config);
+            initConnection(`ws://${window.location.hostname}:${config.webserver.port}`);
         });
     }, []);
 
     // periodically check if the websocket connection is still alive
     useEffect(() => {
         const interval = setInterval(() => {
-            if (!isConnected) {
-                initConnection(`ws://${window.location.hostname}:${WEBSOCKET_PORT}`);
+            // wait for appConfig to be fetched
+            if (!appConfig) {
+                console.log("AppConfig not fetched yet");
+                return;
             }
             setWebSocketConnected(isConnected);
-        }, 1000);
+            if (!isConnected) {
+                console.log("Reconnecting to WebSocket");
+                initConnection(`ws://${window.location.hostname}:${appConfig.webserver.port}`);
+            } else {
+                // check if mixer is connected
+                withTimeout(fetchValue("/info"), 1500)
+                    .then((response) => {
+                        // response is a string starting with "V", which is the API version, if the mixer is connected
+                        if (response.startsWith("V")) {
+                            setMixerConnected(true);
+                        } else {
+                            setMixerConnected(false);
+                        }
+                    })
+                    .catch((error) => {
+                        console.log("Mixer connection check failed:", error.message);
+                        setMixerConnected(false);
+                    });
+
+            }
+        }, 2000);
         return () => clearInterval(interval);
-    }, []);
+    }, [appConfig]);
 
 
     const tabComponents = useMemo(() => {
@@ -50,6 +93,23 @@ const Page = () => {
                     content: (
                         <BusControlTabs/>
                     ),
+                },
+                {
+                    id: "recording",
+                    label: "Recording",
+                    content: (
+                        <div>
+                            <h2>Recording</h2>
+                            <p>Coming soon...</p>
+                        </div>
+                    ),
+                },
+                {
+                    id: "settings",
+                    label: "Settings",
+                    content: (
+                        <Settings/>
+                    ),
                 }
             ]
         }
@@ -60,7 +120,11 @@ const Page = () => {
     }
 
     if (!webSocketConnected) {
-        return <p>WebSocket or Mixer not connected</p>;
+        return <p>WebSocket not connected</p>;
+    }
+
+    if (!mixerConnected) {
+        return <p>Mixer not connected</p>;
     }
 
     return (