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,29 +70,64 @@ 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
+    <div ref={vncRef}>
-      style={{
+      {/* Controls */}
-        display: "flex",
+      <div>
-        alignItems: "center",
+        <IconButton onClick={goBack}>
-        justifyContent: "center",
+          <ArrowBackIcon />
-        height: "100%",
+        </IconButton>
-      }}
+        {!document.fullscreenElement ? (
-    >
+          <IconButton onClick={goFullScreen}>
-      <VncScreen
+            <FullscreenIcon />
-        url={token.url}
+          </IconButton>
-        onDisconnect={() => {
+        ) : (
-          console.info("VNC disconnected " + token?.url);
+          <IconButton onClick={exitFullScreen}>
-          disconnected();
+            <FullscreenExitIcon />
+          </IconButton>
+        )}
+      </div>
+
+      {/* Screen */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
         }}
-      />
+      >
+        <VncScreen
+          url={token.url}
+          onDisconnect={() => {
+            console.info("VNC disconnected " + token?.url);
+            disconnected();
+          }}
+        />
+      </div>
     </div>
   );
 }