Show VM screenshot, if possible

remote_frontend/src/widgets/VirtualMachinesWidget.tsx

@@ -8,6 +8,8 @@ import {
   CardPreview,
   Spinner,
   Tooltip,
+  makeStyles,
+  typographyStyles,
 } from "@fluentui/react-components";
 import {
   ArrowResetRegular,
@@ -22,6 +24,11 @@ import { VMApi, VMInfo, VMState } from "../api/VMApi";
 import { useToast } from "../hooks/providers/ToastProvider";
 import { AsyncWidget } from "./AsyncWidget";
 import { SectionContainer } from "./SectionContainer";
+import { VMLiveScreenshot } from "./VMLiveScreenshot";
+
+const useStyles = makeStyles({
+  body1Stronger: typographyStyles.body1Stronger,
+});
 
 export function VirtualMachinesWidget(): React.ReactElement {
   const [list, setList] = React.useState<VMInfo[] | undefined>();
@@ -86,13 +93,15 @@ function VMWidget(p: { vm: VMInfo }): React.ReactElement {
       style={{
         width: "400px",
         maxWidth: "49%",
-        height: "250px",
+        height: "350px",
         margin: "10px",
         display: "flex",
         flexDirection: "column",
       }}
     >
-      <CardPreview>TODO preview</CardPreview>
+      <CardPreview style={{ height: "150px", display: "flex" }}>
+        <VMPreview {...p} state={state} />
+      </CardPreview>
 
       <CardHeader
         image={<DesktopRegular fontSize={32} />}
@@ -183,6 +192,26 @@ function VMWidget(p: { vm: VMInfo }): React.ReactElement {
   );
 }
 
+function VMPreview(p: { vm: VMInfo; state?: VMState }): React.ReactElement {
+  const styles = useStyles();
+  if (!p.vm.can_screenshot || p.state !== "Running") {
+    return (
+      <div
+        style={{
+          flex: "1",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <span className={styles.body1Stronger}>{p.vm.name}</span>
+      </div>
+    );
+  }
+
+  return <VMLiveScreenshot {...p} />;
+}
+
 function VMAction(p: {
   vm: VMInfo;
   label: string;
@@ -194,6 +223,7 @@ function VMAction(p: {
   onClick: (vm: VMInfo) => Promise<void>;
 }): React.ReactElement {
   const toast = useToast();
+
   const [loading, setLoading] = React.useState(false);
 
   const onClick = async () => {