Show VM screenshot

virtweb_frontend/src/widgets/vms/VMScreenshot.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { VMApi, VMInfo } from "../../api/VMApi";
+import { useSnackbar } from "../../hooks/providers/SnackbarProvider";
+
+export function VMScreenshot(p: { vm: VMInfo }): React.ReactElement {
+  const snackbar = useSnackbar();
+
+  const [screenshotURL, setScreenshotURL] = React.useState<
+    string | undefined
+  >();
+
+  const int = React.useRef<NodeJS.Timer | undefined>();
+
+  React.useEffect(() => {
+    const refresh = async () => {
+      try {
+        const screenshot = await VMApi.Screenshot(p.vm);
+        const u = URL.createObjectURL(screenshot);
+        setScreenshotURL(u);
+      } catch (e) {
+        console.error(e);
+        snackbar("Failed to get a screenshot of the VM!");
+      }
+    };
+
+    if (int.current === undefined) {
+      refresh();
+      int.current = setInterval(() => refresh(), 5000000);
+    }
+
+    return () => {
+      if (int.current !== undefined) {
+        clearInterval(int.current);
+        int.current = undefined;
+      }
+    };
+  }, [p.vm, snackbar]);
+
+  return (
+    <img src={screenshotURL} style={{ width: "100%" }} alt="VM screenshot" />
+  );
+}