Show VM screenshot, if possible

remote_frontend/src/widgets/VMLiveScreenshot.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { VMApi, VMInfo } from "../api/VMApi";
+import { useToast } from "../hooks/providers/ToastProvider";
+
+export function VMLiveScreenshot(p: { vm: VMInfo }): React.ReactElement {
+  const toast = useToast();
+
+  const [screenshotURL, setScreenshotURL] = React.useState<
+    string | undefined
+  >();
+
+  const int = React.useRef<number | 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);
+        toast(p.vm.name, "Failed to get a screenshot of the VM!", "error");
+      }
+    };
+
+    if (int.current === undefined) {
+      refresh();
+      int.current = setInterval(() => refresh(), 5000);
+    }
+
+    return () => {
+      if (int.current !== undefined) {
+        clearInterval(int.current);
+        int.current = undefined;
+      }
+    };
+  }, [p.vm, toast]);
+
+  return (
+    <img src={screenshotURL} style={{ width: "100%" }} alt="VM screenshot" />
+  );
+}