feat: allow toggle stream-view play/pause

js/src/hooks/use-playback-keys.ts

@@ -1,8 +1,11 @@
-import { useEffect, useState, type RefObject } from "react";
+import { useEffect, useRef, useState, type RefObject } from "react";
 import type { MediaParticleHandle } from "@/features/particles/media-particle-view";
 import { useSuspendPlayback } from "@/hooks/use-suspend-playback";
 import { selectIsPaused, usePlaybackPauseStore } from "@/stores/playback-pause-store";
 import { isTypingTarget } from "@/lib/keyboard";
+import { set } from "zod";
+
+const SPACE_TAP_THRESHOLD_MS = 250;
 
 interface UsePlaybackKeysOptions {
   mediaRef: RefObject<MediaParticleHandle | null>;
@@ -20,6 +23,7 @@ interface UsePlaybackKeysResult {
 export function usePlaybackKeys({ mediaRef }: UsePlaybackKeysOptions): UsePlaybackKeysResult {
   const [spaceHeld, setSpaceHeld] = useState(false);
   const [fastPlayback, setFastPlayback] = useState(false);
+  const spaceStartRef = useRef(0);
 
   useSuspendPlayback(spaceHeld, "hold-space");
 
@@ -32,7 +36,15 @@ export function usePlaybackKeys({ mediaRef }: UsePlaybackKeysOptions): UsePlayba
 
       if (e.key === " ") {
         e.preventDefault();
-        if (!e.repeat) setSpaceHeld(true);
+        if (!e.repeat) {
+          if (spaceHeld) {
+            setSpaceHeld(false);
+            spaceStartRef.current = 0;
+          } else {
+            setSpaceHeld(true);
+            spaceStartRef.current = Date.now();
+          }
+        }
         return;
       }
 
@@ -49,7 +61,14 @@ export function usePlaybackKeys({ mediaRef }: UsePlaybackKeysOptions): UsePlayba
 
       if (e.key === " ") {
         e.preventDefault();
+
+        // keep space-held if it was a quick tap, to allow for space-to-toggle behavior
+        if (Date.now() - spaceStartRef.current < SPACE_TAP_THRESHOLD_MS) {
+          return;
+        }
+
         setSpaceHeld(false);
+        spaceStartRef.current = 0;
         return;
       }