play button works, just need to build out the controls

src/bin/BinPlayer.tsx

@@ -6,7 +6,7 @@ import moment, { Moment } from "moment";
 import { pond } from "protobuf-ts/pond";
 import { quack } from "protobuf-ts/quack";
 import { useComponentAPI } from "providers";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 const CHECKPOINT_COUNT = 10;
 
@@ -270,44 +270,55 @@ function buildStatusCheckpoints(
  * @returns a JSX Element
  */
 export default function BinPlayer(props: Props) {
-  const { bin, componentDevices } = props;
+  const { bin, componentDevices, setBin } = props;
   const componentAPI = useComponentAPI();
   const defaultDateRange = GetDefaultDateRange();
   const [startDate, setStartDate] = useState<Moment>(defaultDateRange.start);
   const [endDate, setEndDate] = useState<Moment>(defaultDateRange.end);
-  const [statusCheckpoints, setStatusCheckpoints] = useState<StatusCheckpoint[]>([]);
-
-  useEffect(()=>{
-    console.log(statusCheckpoints)
-  },[statusCheckpoints])
+//   const [statusCheckpoints, setStatusCheckpoints] = useState<StatusCheckpoint[]>([]);
+  const isPlaying = useRef(false);
+  const stopPlayer = () => { isPlaying.current = false; };
+  const originalBin = useRef<Bin | null>(null);
 
   /**
    * Fetches sampled unit measurements for every grain cable in the current bin status,
    * then builds `statusCheckpoints` for playback over [startDate, endDate].
    */
-  const startPlayer = () => {
+const startPlayer = async () => {
+  console.log(startDate.toISOString())
+  console.log(endDate.toISOString())
+  originalBin.current = cloneDeep(bin); // capture before async work begins
+  isPlaying.current = true;
+
   const sampleRequests = bin.status.grainCables.map(cable => {
     const deviceID = componentDevices.get(cable.key) ?? 0;
-      return componentAPI.sampleUnitMeasurements(
-        deviceID,
-        cable.key,
-        startDate,
-        endDate,
-        100
-      );
+    return componentAPI.sampleUnitMeasurements(deviceID, cable.key, startDate, endDate, 100);
   });
 
-    Promise.all(sampleRequests).then(responses => {
-      setStatusCheckpoints(
-        buildStatusCheckpoints(
+  const responses = await Promise.all(sampleRequests);
+  const checkpoints = buildStatusCheckpoints(
     bin.status.grainCables,
     responses.map(r => r.data),
     startDate,
     endDate
-        )
   );
-    });
-  };
+  console.log(responses)
+  console.log(checkpoints)
+
+  for (const checkpoint of checkpoints) {
+    if (!isPlaying.current) {
+      setBin(originalBin.current!);
+      return;
+    }
+    const newBin = cloneDeep(originalBin.current!);
+    newBin.status.grainCables = checkpoint.cables;
+    setBin(newBin);
+    await new Promise(res => setTimeout(res, 2000));
+    console.log("next step")
+  }
+  isPlaying.current = false;
+  setBin(originalBin.current!);
+};
 
   return (
     <React.Fragment>