Add a full screen button for the sakura view

src/components/sakura-static/SakuraControls.tsx

@@ -1,6 +1,9 @@
 import { useDevMode } from "@/hooks/useDevMode";
+import { useFullscreen } from "@/hooks/useFullscreen";
 import { useMusicPlayer } from "@/hooks/useMusicPlayer";
 import DeveloperBoardOffIcon from "@mui/icons-material/DeveloperBoardOff";
+import FullscreenIcon from "@mui/icons-material/Fullscreen";
+import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
 import LogoDevIcon from "@mui/icons-material/LogoDev";
 import MusicNoteIcon from "@mui/icons-material/MusicNote";
 import MusicOffIcon from "@mui/icons-material/MusicOff";
@@ -11,9 +14,15 @@ import { CanvasControls } from "../shared/CanvasControls";
 export const SakuraControls = () => {
   const [isDevMode, setDevMode] = useDevMode();
   const [showMusicPanel, setShowMusicPanel] = useMusicPlayer();
+  const [isFullscreen, toggleFullscreen] = useFullscreen();
 
   return (
     <CanvasControls>
+      <Tooltip title="Toggle Fullscreen" placement="left">
+        <IconButton onClick={async () => await toggleFullscreen()}>
+          {!isFullscreen ? <FullscreenIcon /> : <FullscreenExitIcon />}
+        </IconButton>
+      </Tooltip>
       <Tooltip title="Toggle Music Panel" placement="left">
         <IconButton onClick={() => setShowMusicPanel(!showMusicPanel)}>
           {!showMusicPanel ? <MusicNoteIcon /> : <MusicOffIcon />}

src/hooks/useFullscreen.ts

@@ -0,0 +1,46 @@
+import { useEffect, useState } from "react";
+
+/**
+ * Simple fullscreen hook implementation, does not work together with F11 => https://stackoverflow.com/a/21118401
+ */
+export function useFullscreen(): [boolean, () => Promise<void>] {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  const close = async () => {
+    if (
+      isFullscreen &&
+      document.fullscreenElement === document.documentElement
+    ) {
+      await document.exitFullscreen();
+    }
+  };
+
+  const open = async () => {
+    if (document.fullscreenEnabled && !isFullscreen) {
+      await document.documentElement.requestFullscreen();
+    }
+  };
+
+  const setFullscreen = async (state: boolean) => {
+    return state ? await open() : await close();
+  };
+
+  const toggleFullscreen = async () => {
+    await setFullscreen(!isFullscreen);
+  };
+
+  // Update the state of the hook if the full screenstate is changed outside of the React application.
+  useEffect(() => {
+    const handler = () => {
+      setIsFullscreen(document.fullscreenElement === document.documentElement);
+    };
+
+    document.addEventListener("fullscreenchange", handler);
+
+    return () => {
+      document.removeEventListener("fullscreenchange", handler);
+    };
+  }, []);
+
+  return [isFullscreen, toggleFullscreen];
+}