43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
|
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" />
|
||
|
|
);
|
||
|
|
}
|