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

43 lines
1.1 KiB
TypeScript
Raw Normal View History

2023-10-18 08:23:40 +00:00
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" />
);
}