Seek using left/right buttons. Also add key bindings

Author: ch1bo

ui/src/components/Sim/modules/Playback.tsx

@@ -2,6 +2,8 @@ import { useSimContext } from "@/contexts/SimContext/context";
 import { FC, useCallback, useEffect, useRef } from "react";
 import { Button } from "@/components/Button";
 
+const SPEED_OPTIONS = [0.01, 0.1, 0.25, 0.5, 1, 2, 4, 8];
+
 export const Playback: FC = () => {
   const {
     state: { events, isPlaying, speedMultiplier, currentTime, maxTime },
@@ -13,6 +15,10 @@ export const Playback: FC = () => {
   const lastUpdateRef = useRef<number>(0);
   const currentTimeRef = useRef<number>(currentTime);
 
+  // Refs for seeking functionality
+  const eventsRef = useRef(events);
+  const maxTimeRef = useRef(maxTime);
+
   const handleSpeedChange = useCallback(
     (event: React.ChangeEvent<HTMLSelectElement>) => {
       const newSpeed = parseFloat(event.target.value);
@@ -25,17 +31,54 @@ export const Playback: FC = () => {
     dispatch({ type: "SET_TIMELINE_PLAYING", payload: !isPlaying });
   }, [dispatch, isPlaying]);
 
+  // Press-to-seek refs
+  const stepIntervalRef = useRef<number | null>(null);
+  const stepTimeoutRef = useRef<number | null>(null);
+
+  const stopSeeking = useCallback(() => {
+    if (stepTimeoutRef.current) {
+      clearTimeout(stepTimeoutRef.current);
+      stepTimeoutRef.current = null;
+    }
+    if (stepIntervalRef.current) {
+      clearInterval(stepIntervalRef.current);
+      stepIntervalRef.current = null;
+    }
+  }, []);
+
   const handleStep = useCallback(
     (stepAmount: number) => {
       const maxEventTime =
-        events.length > 0 ? events[events.length - 1].time_s : maxTime;
+        eventsRef.current.length > 0
+          ? eventsRef.current[eventsRef.current.length - 1].time_s
+          : maxTimeRef.current;
+      const currentTime = currentTimeRef.current;
       const newTime = Math.max(
         0,
         Math.min(currentTime + stepAmount, maxEventTime),
       );
+      currentTimeRef.current = newTime;
       dispatch({ type: "SET_TIMELINE_TIME", payload: newTime });
     },
-    [dispatch, currentTime, events, maxTime],
+    [dispatch],
+  );
+
+  const startSeeking = useCallback(
+    (stepAmount: number) => {
+      // Clear any existing seeking first
+      stopSeeking();
+
+      // Initial step using current ref values
+      handleStep(stepAmount);
+
+      // Start continuous seeking after delay
+      stepTimeoutRef.current = window.setTimeout(() => {
+        stepIntervalRef.current = window.setInterval(() => {
+          handleStep(stepAmount);
+        }, 33); // ~30 FPS smooth seeking
+      }, 300); // initial delay
+    },
+    [handleStep, stopSeeking],
   );
 
   // Timeline playback effect - handles automatic advancement when playing
@@ -81,81 +124,182 @@ export const Playback: FC = () => {
         intervalRef.current = null;
       }
     }
+  }, [
+    isPlaying,
+    events.length,
+    currentTime,
+    speedMultiplier,
+    dispatch,
+    stopSeeking,
+  ]);
 
-    // Cleanup on unmount
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-      }
-    };
-  }, [isPlaying, events.length, currentTime, speedMultiplier, dispatch]);
-
-  // Keep currentTimeRef in sync when currentTime changes externally (e.g., slider)
+  // Keep refs in sync when values change externally
   useEffect(() => {
     currentTimeRef.current = currentTime;
     lastUpdateRef.current = performance.now();
   }, [currentTime]);
 
+  useEffect(() => {
+    eventsRef.current = events;
+  }, [events]);
+
+  useEffect(() => {
+    maxTimeRef.current = maxTime;
+  }, [maxTime]);
+
   const disabled = events.length === 0;
 
+  // Keyboard event handler
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (disabled) return;
+
+      switch (event.code) {
+        case "Space":
+          event.preventDefault();
+          handlePlayPause();
+          break;
+        case "ArrowRight":
+          event.preventDefault();
+          if (event.ctrlKey) {
+            handleStep(1.0 * speedMultiplier); // 10x forward (big step)
+          } else {
+            handleStep(0.1 * speedMultiplier); // 1x forward (small step)
+          }
+          break;
+        case "ArrowLeft":
+          event.preventDefault();
+          if (event.ctrlKey) {
+            handleStep(-1.0 * speedMultiplier); // 10x backward (big step)
+          } else {
+            handleStep(-0.1 * speedMultiplier); // 1x backward (small step)
+          }
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          // Increase speed to next available option
+          {
+            const currentIndex = SPEED_OPTIONS.indexOf(speedMultiplier);
+            if (currentIndex < SPEED_OPTIONS.length - 1) {
+              dispatch({
+                type: "SET_TIMELINE_SPEED",
+                payload: SPEED_OPTIONS[currentIndex + 1],
+              });
+            }
+          }
+          break;
+        case "ArrowDown":
+          event.preventDefault();
+          // Decrease speed to previous available option
+          {
+            const currentIndex = SPEED_OPTIONS.indexOf(speedMultiplier);
+            if (currentIndex > 0) {
+              dispatch({
+                type: "SET_TIMELINE_SPEED",
+                payload: SPEED_OPTIONS[currentIndex - 1],
+              });
+            }
+          }
+          break;
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [disabled, handlePlayPause, handleStep, speedMultiplier, dispatch]);
+
   return (
     <div className="flex items-center gap-2">
-      {/* Play/Pause button */}
       <Button
         onClick={handlePlayPause}
         disabled={disabled}
         variant="primary"
         className="w-20"
+        title={isPlaying ? "Pause (Space)" : "Play (Space)"}
       >
         {isPlaying ? "Pause" : "Play"}
       </Button>
 
-      {/* Step controls: << < > >> */}
       <Button
-        onClick={() => handleStep(-0.01)}
+        onClick={() => handleStep(-1.0 * speedMultiplier)}
+        onMouseDown={(e) => {
+          e.preventDefault();
+          startSeeking(-1.0 * speedMultiplier);
+        }}
+        onMouseUp={(e) => {
+          e.preventDefault();
+          stopSeeking();
+        }}
+        onMouseLeave={stopSeeking}
         disabled={disabled}
         variant="secondary"
         size="sm"
         className="px-2"
-        title="Step backward 10ms"
+        title={`Step backward ${1.0 * speedMultiplier}s (Ctrl + ←)`}
       >
         &lt;&lt;
       </Button>
 
       <Button
-        onClick={() => handleStep(-0.001)}
+        onClick={() => handleStep(-0.1 * speedMultiplier)}
+        onMouseDown={(e) => {
+          e.preventDefault();
+          startSeeking(-0.1 * speedMultiplier);
+        }}
+        onMouseUp={(e) => {
+          e.preventDefault();
+          stopSeeking();
+        }}
+        onMouseLeave={stopSeeking}
         disabled={disabled}
         variant="secondary"
         size="sm"
         className="px-2"
-        title="Step backward 1ms"
+        title={`Step backward ${0.1 * speedMultiplier}s (←)`}
       >
         &lt;
       </Button>
 
       <Button
-        onClick={() => handleStep(0.001)}
+        onClick={() => handleStep(0.1 * speedMultiplier)}
+        onMouseDown={(e) => {
+          e.preventDefault();
+          startSeeking(0.1 * speedMultiplier);
+        }}
+        onMouseUp={(e) => {
+          e.preventDefault();
+          stopSeeking();
+        }}
+        onMouseLeave={stopSeeking}
         disabled={disabled}
         variant="secondary"
         size="sm"
         className="px-2"
-        title="Step forward 1ms"
+        title={`Step forward ${0.1 * speedMultiplier}s (→)`}
       >
         &gt;
       </Button>
 
       <Button
-        onClick={() => handleStep(0.01)}
+        onClick={() => handleStep(1.0 * speedMultiplier)}
+        onMouseDown={(e) => {
+          e.preventDefault();
+          startSeeking(1.0 * speedMultiplier);
+        }}
+        onMouseUp={(e) => {
+          e.preventDefault();
+          stopSeeking();
+        }}
+        onMouseLeave={stopSeeking}
         disabled={disabled}
         variant="secondary"
         size="sm"
         className="px-2"
-        title="Step forward 10ms"
+        title={`Step forward ${1.0 * speedMultiplier}s (Ctrl + →)`}
       >
         &gt;&gt;
       </Button>
 
-      {/* Speed control */}
       <div className="min-w-16">
         <label htmlFor="timelineSpeed" className="block text-xs text-gray-600">
           Speed
@@ -166,15 +310,13 @@ export const Playback: FC = () => {
           value={speedMultiplier}
           onChange={handleSpeedChange}
           disabled={disabled}
+          title="Change speed (↑ / ↓)"
         >
-          <option value={0.01}>0.01x</option>
-          <option value={0.1}>0.1x</option>
-          <option value={0.25}>0.25x</option>
-          <option value={0.5}>0.5x</option>
-          <option value={1}>1x</option>
-          <option value={2}>2x</option>
-          <option value={4}>4x</option>
-          <option value={8}>8x</option>
+          {SPEED_OPTIONS.map((speed) => (
+            <option key={speed} value={speed}>
+              {speed}x
+            </option>
+          ))}
         </select>
       </div>
     </div>