Pierre HUBERT
4c6608bf55
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #146
50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import React from "react";
|
|
import { GroupApi } from "../api/GroupApi";
|
|
import { VMGroup } from "../api/ServerApi";
|
|
import { VMApi, VMInfo } from "../api/VMApi";
|
|
import { useToast } from "../hooks/providers/ToastProvider";
|
|
|
|
export function VMLiveScreenshot(p: {
|
|
vm: VMInfo;
|
|
group?: VMGroup;
|
|
}): 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 = p.group
|
|
? await GroupApi.ScreenshotVM(p.group, p.vm)
|
|
: 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" />
|
|
);
|
|
}
|