Improve VNC route

virtweb_frontend/src/routes/VNCRoute.tsx

@@ -1,5 +1,9 @@
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import FullscreenIcon from "@mui/icons-material/Fullscreen";
+import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
+import { IconButton } from "@mui/material";
 import React, { useEffect } from "react";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { VncScreen } from "react-vnc";
 import { ServerApi } from "../api/ServerApi";
 import { VMApi, VMInfo } from "../api/VMApi";
@@ -33,10 +37,13 @@ export function VNCRoute(): React.ReactElement {
 
 function VNCInner(p: { vm: VMInfo }): React.ReactElement {
   const snackbar = useSnackbar();
+  const navigate = useNavigate();
 
   const [token, setToken] = React.useState<VNCTokenInfo | undefined>();
   const [counter, setCounter] = React.useState(1);
 
+  const vncRef = React.createRef<HTMLDivElement>();
+
   const connect = async (force: boolean) => {
     try {
       if (force) setCounter(counter + 1);
@@ -63,14 +70,48 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
     connect(true);
   };
 
+  const goBack = () => {
+    navigate(p.vm.ViewURL);
+  };
+
+  const goFullScreen = () => {
+    if (vncRef.current) vncRef.current.requestFullscreen();
+  };
+
+  const exitFullScreen = () => {
+    document.exitFullscreen();
+  };
+
   useEffect(() => {
     connect(false);
+
+    if (vncRef.current) {
+      vncRef.current.onfullscreenchange = () => setCounter(counter + 1);
+    }
   });
 
   if (token === undefined)
     return <p>Please wait, connecting to the machine...</p>;
 
   return (
+    <div ref={vncRef}>
+      {/* Controls */}
+      <div>
+        <IconButton onClick={goBack}>
+          <ArrowBackIcon />
+        </IconButton>
+        {!document.fullscreenElement ? (
+          <IconButton onClick={goFullScreen}>
+            <FullscreenIcon />
+          </IconButton>
+        ) : (
+          <IconButton onClick={exitFullScreen}>
+            <FullscreenExitIcon />
+          </IconButton>
+        )}
+      </div>
+
+      {/* Screen */}
       <div
         style={{
           display: "flex",
@@ -87,5 +128,6 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
           }}
         />
       </div>
+    </div>
   );
 }