Harden mobile recorder flush

src/hooks/useGuidedRecording.ts

@@ -23,6 +23,10 @@ const audioRecorderMimePriority = [
   'audio/mp4',
 ];
 
+const RECORDER_TIMESLICE_MS = 500;
+const MIN_VIDEO_BLOB_BYTES = 16 * 1024;
+const MIN_AUDIO_BLOB_BYTES = 4 * 1024;
+
 function pickRecorderMime(mediaType: 'video' | 'audio') {
   if (typeof MediaRecorder === 'undefined') return undefined;
   const mimes = mediaType === 'audio' ? audioRecorderMimePriority : recorderMimePriority;
@@ -36,13 +40,41 @@ function extFromMime(mime: string | undefined): 'webm' | 'mp4' | 'mov' {
   if (!mime) return 'webm';
   if (mime.includes('mp4')) return 'mp4';
   if (mime.includes('quicktime')) return 'mov';
-  return 'webm';
-}
-
-export type UseGuidedRecordingOptions = {
-  prompt: ClipPrompt;
-  /** Called once a recording finishes (either user-stopped or auto-stopped on hard cap). */
-  onClipReady: (clip: { blob: Blob; durationSeconds: number; ext: 'webm' | 'mp4' | 'mov' }) => void;
+  return 'webm';
+}
+
+async function canReadRecordedMedia(blob: Blob, mediaType: 'video' | 'audio') {
+  return await new Promise<boolean>((resolve) => {
+    const url = URL.createObjectURL(blob);
+    const media = document.createElement(mediaType);
+    let settled = false;
+
+    const finish = (ok: boolean) => {
+      if (settled) return;
+      settled = true;
+      URL.revokeObjectURL(url);
+      resolve(ok);
+    };
+
+    const timer = window.setTimeout(() => finish(false), 4000);
+    media.preload = 'metadata';
+    media.muted = true;
+    media.onloadedmetadata = () => {
+      window.clearTimeout(timer);
+      finish(true);
+    };
+    media.onerror = () => {
+      window.clearTimeout(timer);
+      finish(false);
+    };
+    media.src = url;
+  });
+}
+
+export type UseGuidedRecordingOptions = {
+  prompt: ClipPrompt;
+  /** Called once a recording finishes (either user-stopped or auto-stopped on hard cap). */
+  onClipReady: (clip: { blob: Blob; durationSeconds: number; ext: 'webm' | 'mp4' | 'mov' }) => void;
 };
 
 export function useGuidedRecording({ prompt, onClipReady }: UseGuidedRecordingOptions) {
@@ -57,10 +89,10 @@ export function useGuidedRecording({ prompt, onClipReady }: UseGuidedRecordingOp
   const chunksRef = useRef<BlobPart[]>([]);
   const startedAtRef = useRef<number>(0);
   const tickRef = useRef<number | null>(null);
-  const autoStopRef = useRef<number | null>(null);
-
-  const stopTicking = useCallback(() => {
-    if (tickRef.current !== null) {
+  const autoStopRef = useRef<number | null>(null);
+
+  const stopTicking = useCallback(() => {
+    if (tickRef.current !== null) {
       window.clearInterval(tickRef.current);
       tickRef.current = null;
     }
@@ -74,10 +106,33 @@ export function useGuidedRecording({ prompt, onClipReady }: UseGuidedRecordingOp
   }, []);
 
   const stopStream = useCallback(() => {
-    streamRef.current?.getTracks().forEach((t) => t.stop());
-    streamRef.current = null;
-  }, []);
-
+    streamRef.current?.getTracks().forEach((t) => t.stop());
+    streamRef.current = null;
+  }, []);
+
+  const stopActiveRecorder = useCallback(() => {
+    const recorder = recorderRef.current;
+    if (!recorder || recorder.state === 'inactive') return;
+
+    setState('finalizing');
+    stopTicking();
+    stopAutoStop();
+
+    try {
+      recorder.requestData();
+    } catch {
+      /* ignore */
+    }
+
+    window.setTimeout(() => {
+      try {
+        if (recorder.state !== 'inactive') recorder.stop();
+      } catch {
+        /* ignore */
+      }
+    }, 100);
+  }, [stopAutoStop, stopTicking]);
+
   const requestPermissionAndPreview = useCallback(async () => {
     setError(null);
     setState('requesting_permission');
@@ -111,15 +166,11 @@ export function useGuidedRecording({ prompt, onClipReady }: UseGuidedRecordingOp
   // shots should keep the same camera warm instead of tearing it down.
   useEffect(() => {
     void requestPermissionAndPreview();
-    return () => {
-      stopTicking();
-      stopAutoStop();
-      try {
-        recorderRef.current?.stop();
-      } catch {
-        /* ignore */
-      }
-      stopStream();
+    return () => {
+      stopTicking();
+      stopAutoStop();
+      stopActiveRecorder();
+      stopStream();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [prompt.camera, mediaType]);
@@ -140,55 +191,66 @@ export function useGuidedRecording({ prompt, onClipReady }: UseGuidedRecordingOp
     recorderRef.current = recorder;
     chunksRef.current = [];
 
-    recorder.ondataavailable = (e) => {
-      if (e.data && e.data.size > 0) chunksRef.current.push(e.data);
-    };
-
-    recorder.onstop = () => {
-      stopTicking();
-      stopAutoStop();
-      const elapsedSeconds = Math.max(
-        0,
-        Math.round((Date.now() - startedAtRef.current) / 1000),
-      );
-      const blobMime = mime ?? 'video/webm';
-      const blob = new Blob(chunksRef.current, { type: blobMime });
-      chunksRef.current = [];
-      setState('finalizing');
-      onClipReady({
-        blob,
-        durationSeconds: elapsedSeconds,
-        ext: extFromMime(mime),
-      });
+    recorder.ondataavailable = (e) => {
+      if (e.data && e.data.size > 0) chunksRef.current.push(e.data);
+    };
+
+    recorder.onerror = () => {
+      setError('Recording failed on this device. Please try this clip again.');
+      setState('ready');
+    };
+
+    recorder.onstop = async () => {
+      stopTicking();
+      stopAutoStop();
+      const elapsedSeconds = Math.max(
+        0,
+        Math.round((Date.now() - startedAtRef.current) / 1000),
+      );
+      const blobMime = mime ?? 'video/webm';
+      const chunks = chunksRef.current.filter((chunk) => {
+        if (chunk instanceof Blob) return chunk.size > 0;
+        return true;
+      });
+      chunksRef.current = [];
+      setState('finalizing');
+
+      const blob = new Blob(chunks, { type: blobMime });
+      const minBytes = mediaType === 'audio' ? MIN_AUDIO_BLOB_BYTES : MIN_VIDEO_BLOB_BYTES;
+      const readable = blob.size >= minBytes && (await canReadRecordedMedia(blob, mediaType));
+
+      if (!readable) {
+        setError('That clip did not finish saving cleanly. Please record this prompt again.');
+        setState('ready');
+        return;
+      }
+
+      onClipReady({
+        blob,
+        durationSeconds: elapsedSeconds,
+        ext: extFromMime(mime),
+      });
       // Brief finalize state for UX, then return to ready (parent may unmount).
       window.setTimeout(() => setState('ready'), 200);
     };
 
-    startedAtRef.current = Date.now();
-    setElapsedMs(0);
-    setState('recording');
-    recorder.start();
+    startedAtRef.current = Date.now();
+    setElapsedMs(0);
+    setState('recording');
+    recorder.start(RECORDER_TIMESLICE_MS);
 
     tickRef.current = window.setInterval(() => {
       setElapsedMs(Date.now() - startedAtRef.current);
     }, 100);
 
-    autoStopRef.current = window.setTimeout(() => {
-      try {
-        recorderRef.current?.stop();
-      } catch {
-        /* ignore */
-      }
-    }, prompt.maxSeconds * 1000);
-  }, [mediaType, onClipReady, prompt.maxSeconds, stopAutoStop, stopTicking]);
-
-  const stopRecording = useCallback(() => {
-    try {
-      recorderRef.current?.stop();
-    } catch {
-      /* ignore */
-    }
-  }, []);
+    autoStopRef.current = window.setTimeout(() => {
+      stopActiveRecorder();
+    }, prompt.maxSeconds * 1000);
+  }, [mediaType, onClipReady, prompt.maxSeconds, stopActiveRecorder, stopAutoStop, stopTicking]);
+
+  const stopRecording = useCallback(() => {
+    stopActiveRecorder();
+  }, [stopActiveRecorder]);
 
   const liveProgress = Math.min(1, elapsedMs / (prompt.maxSeconds * 1000));