Improve loading etc

AceCentre · Nov 11, 2021 · b6d297a · b6d297a
1 parent 1907a7d
commit b6d297a
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 7 deletions.
diff --git a/src/react-app/blink-detection-with-sliders.jsx b/src/react-app/blink-detection-with-sliders.jsx
@@ -22,6 +22,7 @@ export const BlinkDetectionWithSliders = ({
   onBlink,
   children,
   sx = {},
+  paperSx = {},
 }) => {
   const distanceHistory = useRef(
     Array(KEEP_NUMBER_OF_VALUES).fill({ time: Infinity, value: 0 })
@@ -121,10 +122,11 @@ export const BlinkDetectionWithSliders = ({
 
       <Paper
         sx={{
-          display: "grid",
+          display: "flex",
           gap: "1rem",
           flexDirection: "column",
           padding: "1rem",
+          ...paperSx,
         }}
       >
         {!loadingBlinkThreshold && (

diff --git a/src/react-app/blink-training.jsx b/src/react-app/blink-training.jsx
@@ -97,8 +97,15 @@ export const BlinkTraining = ({ prevTask, forceReload }) => {
         sx={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem" }}
         faceInFrame={setAllowNext}
         onBlink={onBlink}
+        paperSx={{ minHeight: "296px" }}
       >
-        <Box sx={{ display: "flex", justifyContent: "space-between" }}>
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "space-between",
+            marginTop: "auto",
+          }}
+        >
           <Button onClick={prevTask} size="large">
             Previous step
           </Button>

diff --git a/src/react-app/camera-with-highlights.jsx b/src/react-app/camera-with-highlights.jsx
@@ -12,6 +12,8 @@ import { useFaceMesh } from "./hooks/use-face-mesh";
 import { SelectedWebcam } from "./selected-webcam.jsx";
 import { useStoreValue } from "./hooks/use-store";
 import { REVERSE_CAMERA } from "./lib/store-consts";
+import { CircularProgress } from "@mui/material";
+import { Box } from "@mui/system";
 
 const LOADING_TIME = 2000;
 
@@ -82,20 +84,36 @@ export const CameraWithHighlights = ({ onFrame = () => {} }) => {
 
   useFaceMesh({ loading: loading || reverseLoading, webcamRef }, onResults);
 
+  const showIndicator = loading || reverseLoading;
+
   return (
-    <>
+    <Box sx={{ position: "relative" }}>
       <SelectedWebcam sx={{ display: "none" }} webcamRef={webcamRef} />
+      <Box
+        sx={{
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        {showIndicator && <CircularProgress />}
+      </Box>
 
       <canvas
         style={{
           ...canvasFlip,
           width: "100%",
+          height: "100%",
           borderRadius: "4px",
+          background: "white",
           boxShadow:
             "0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)",
         }}
         ref={canvasRef}
-      />
-    </>
+      ></canvas>
+    </Box>
   );
 };
diff --git a/src/react-app/face-framer.jsx b/src/react-app/face-framer.jsx
@@ -40,6 +40,7 @@ export const FaceFramer = ({ nextTask, prevTask }) => {
           width: "100%",
           margin: "0 auto",
           maxWidth: "540px",
+          minHeight: "296px",
         }}
       >
         {!allowNext ? (

diff --git a/src/react-app/main-screen.jsx b/src/react-app/main-screen.jsx
@@ -30,7 +30,7 @@ export const MainScreen = () => {
   );
   const reloadTrigger = useReload([reloadPlaySound]);
   const [play] = useSound("./public/notif.mp3");
-  const [isFaceInFrame, setIsFaceInFrame] = useState(false);
+  const [isFaceInFrame, setIsFaceInFrame] = useState(true);
   const sendBlinkToBackend = useBlinkAction();
   const openSettings = useOpenSettings();
 
@@ -51,6 +51,7 @@ export const MainScreen = () => {
         onBlink={onBlink}
         faceInFrame={setIsFaceInFrame}
         sx={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}
+        paperSx={{ minHeight: "296px" }}
       >
         <>
           {!isFaceInFrame && (
@@ -59,7 +60,7 @@ export const MainScreen = () => {
               the screen and well lit.
             </Typography>
           )}
-          <Box>
+          <Box sx={{ marginTop: "auto" }}>
             <CustomWidthTooltip
               title="Change the settings including controlling the output."
               placement="bottom"

diff --git a/src/react-app/welcome-screen.jsx b/src/react-app/welcome-screen.jsx
@@ -112,6 +112,8 @@ const WebcamDeviceSelector = ({ nextTask }) => {
     >
       <Webcam
         style={{
+          minHeight: "242px",
+          background: "white",
           width: "100%",
           borderRadius: "4px",
           boxShadow: