diff --git a/virtweb_frontend/src/routes/VNCRoute.tsx b/virtweb_frontend/src/routes/VNCRoute.tsx index 4fd69f1..0695fd1 100644 --- a/virtweb_frontend/src/routes/VNCRoute.tsx +++ b/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(); const [counter, setCounter] = React.useState(1); + const vncRef = React.createRef(); + 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

Please wait, connecting to the machine...

; return ( -
- { - console.info("VNC disconnected " + token?.url); - disconnected(); +
+ {/* Controls */} +
+ + + + {!document.fullscreenElement ? ( + + + + ) : ( + + + + )} +
+ + {/* Screen */} +
+ > + { + console.info("VNC disconnected " + token?.url); + disconnected(); + }} + /> +
); }