Fixes for successful production build

src/app/page.tsx

@@ -44,19 +44,20 @@ export default function Home() {
           background: { default: "#000" },
           primary: { main: "#9d9d9d" },
           secondary: { main: "#262626" },
-          error: { main: "#cb0801",A700: "#fff" },
-          warning: {main:"#cb7c01"}
+          error: { main: "#cb0801", A700: "#fff" },
+          warning: { main: "#cb7c01" },
         },
       }),
     []
   );
+  let apiUrl: string;
   function sendApi(
     path: string,
     method: RequestInit["method"] = "GET",
     body?: any,
     fetchOptions?: RequestInit
   ) {
-    const url = new URL(path, "http://10.0.0.200:3001/");
+    const url = new URL(path, apiUrl);
     return fetch(url.toString(), {
       method,
       body: body !== undefined ? JSON.stringify(body) : undefined,
@@ -116,24 +117,23 @@ export default function Home() {
   }>();
   const [width, setWidth] = useState(1000);
   const [isLoaded, setIsLoaded] = useState(false);
-  // const eventCounter = useMemo(() => {
-  //   const eventCounter = new EventCounter<"emptySpaceClick">();
-  //   eventCounter.on({
-  //     callback: () => {
 
-  //     },
-  //     count: 3,
-  //     name: "emptySpaceClick",
-  //   });
-  //   return eventCounter;
-  // }, []);
   const isItMobileDevice = useMemo(
     () =>
       typeof window !== "undefined" ? isItMobile(navigator.userAgent) : "",
     []
   );
-
+  const toggleFullscreen = () => {
+    if (document.fullscreenElement === null)
+      document.documentElement.requestFullscreen();
+    else document.exitFullscreen();
+  };
+  let isFullscreen: boolean = false;
   useEffect(() => {
+    const _apiUrl = new URL(document.URL);
+    _apiUrl.port = "3001";
+    apiUrl = _apiUrl.toString();
+
     sendApi("/values")
       .then((v: Values) => {
         setValues({
@@ -152,18 +152,16 @@ export default function Home() {
       .catch((e) => console.error(e));
     setSnackBarVisibility(!isSnackBarHidden);
     setWidth(window.innerWidth);
+    window.onresize = () => {
+      setWidth(window.innerWidth);
+    };
+    isFullscreen = document.fullscreenElement !== null;
   }, []);
   const strips = { virtual: 3, physical: 5 };
   const buses = { virtual: 3, physical: 5 };
   const amountOfStrips = strips.physical + strips.virtual;
   const amountOfBuses = buses.physical + buses.virtual;
   const virtualInputNames = useMemo(() => ["VAIO", "AUX", "VAIO3"], []);
-  if (typeof document !== "undefined") {
-    // document.onclick = () => eventCounter.emit("emptySpaceClick");
-    window.onresize = () => {
-      setWidth(window.innerWidth);
-    };
-  }
 
   const snackBarActionButton = (
     <>
@@ -266,7 +264,7 @@ export default function Home() {
               <Typography variant={"button"} fontWeight={500}>
                 Double {isItMobileDevice ? "tap" : "click"}
               </Typography>{" "}
-              on any gain slider to reset it's value to 0 dB
+              on any gain slider to reset it&apos;s value to 0 dB
               <br />
             </Typography>
             {/* <Typography component={"span"}>
@@ -282,22 +280,15 @@ export default function Home() {
       <Fab
         size="medium"
         sx={{
-          position: "absolute",
+          position: "fixed",
           bottom: 15,
           right: 15,
+          zIndex: theme.zIndex.drawer + 2,
         }}
         color="secondary"
-        onClick={() => {
-          if (document.fullscreenElement === null)
-            document.documentElement.requestFullscreen();
-          else document.exitFullscreen();
-        }}
+        onClick={() => toggleFullscreen()}
       >
-        {document.fullscreenElement === null ? (
-          <FullscreenIcon />
-        ) : (
-          <FullscreenExit />
-        )}
+        {isFullscreen ? <FullscreenExit /> : <FullscreenIcon />}
       </Fab>
     </ThemeProvider>
   );