small fixes and improvements

src/app/page.tsx

@@ -6,7 +6,7 @@ import BusControlTabs from "@/app/components/BusControlTabs";
 import MainMix from "@/app/components/MainMix";
 
 // initialize global websocket connection
-import {initConnection} from "@/app/lib/x32CommunicationManager";
+import {initConnection, isConnected} from "@/app/lib/x32CommunicationManager";
 
 const WEBSOCKET_PORT = 3001;
 
@@ -14,6 +14,8 @@ const Page = () => {
     const [appConfig, setAppConfig] = useState(null);
     const [activeTab, setActiveTab] = useState("mainMix");
 
+    const [webSocketConnected, setWebSocketConnected] = useState(false);
+
     useEffect(() => {
         initConnection(`ws://${window.location.hostname}:${WEBSOCKET_PORT}`);
         fetchConfig().then(config => {
@@ -21,6 +23,18 @@ const Page = () => {
         });
     }, []);
 
+    // periodically check if the websocket connection is still alive
+    useEffect(() => {
+        const interval = setInterval(() => {
+            if (!isConnected) {
+                initConnection(`ws://${window.location.hostname}:${WEBSOCKET_PORT}`);
+            }
+            setWebSocketConnected(isConnected);
+        }, 1000);
+        return () => clearInterval(interval);
+    }, []);
+
+
     const tabComponents = useMemo(() => {
             return [
                 {
@@ -45,6 +59,10 @@ const Page = () => {
         return <p>Error fetching config</p>;
     }
 
+    if (!webSocketConnected) {
+        return <p>WebSocket or Mixer not connected</p>;
+    }
+
     return (
         <div>
             <div className="p-4">