VirtWeb/virtweb_frontend/src/widgets/vms/VMScreenshot.tsx

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.Timeout | undefined>(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();
      }, 5000);
    }

    return () => {
      if (int.current !== undefined) {
        clearInterval(int.current);
        int.current = undefined;
      }
    };
  }, [p.vm, snackbar]);

  return (
    <img src={screenshotURL} style={{ width: "100%" }} alt="VM screenshot" />
  );
}