@ttt-productions/file-input 0.11.15 → 0.11.17

package/dist/react/components/record-dialog.js

@@ -1,25 +1,19 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { Camera, Video, Mic, X, RotateCcw, Check } from "lucide-react";
-import { startWaveformLoop } from "@ttt-productions/media-viewer";
-import { MediaPreview } from "@ttt-productions/media-viewer/react";
-import { ensureFileWithContentType } from "../../lib/infer-content-type.js";
-import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Spinner, useAsyncAction, } from "@ttt-productions/ui-core/react";
-// Explicit MediaRecorder container preferences, probed via isTypeSupported.
-// A no-argument MediaRecorder leaves the container to the browser (Chrome
-// reports "audio/webm;codecs=opus" for audio); requesting an explicit
-// supported type keeps the recorded container deterministic. Safari has no
-// webm support and falls through to mp4. When isTypeSupported is unavailable
-// or nothing matches (test environments), we fall back to the no-argument
-// constructor and normalize whatever the recorder produced.
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Camera, Video, Mic, X, RotateCcw, Check } from 'lucide-react';
+import { startWaveformLoop } from '@ttt-productions/media-viewer';
+import { MediaPreview } from '@ttt-productions/media-viewer/react';
+import { ensureFileWithContentType } from '../../lib/infer-content-type.js';
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Spinner, useAsyncAction, } from '@ttt-productions/ui-core/react';
+// An explicit supported container keeps mr.mimeType deterministic; Safari has no webm and falls
+// through to mp4.
 const RECORDER_MIME_CANDIDATES = {
-    audio: ["audio/webm;codecs=opus", "audio/webm", "audio/mp4"],
-    video: ["video/webm;codecs=vp9,opus", "video/webm", "video/mp4"],
+    audio: ['audio/webm;codecs=opus', 'audio/webm', 'audio/mp4'],
+    video: ['video/webm;codecs=vp9,opus', 'video/webm', 'video/mp4'],
 };
 function pickRecorderMimeType(kind) {
-    if (typeof MediaRecorder === "undefined" ||
-        typeof MediaRecorder.isTypeSupported !== "function") {
+    if (typeof MediaRecorder === 'undefined' || typeof MediaRecorder.isTypeSupported !== 'function') {
         return undefined;
     }
     for (const candidate of RECORDER_MIME_CANDIDATES[kind]) {
@@ -27,57 +21,26 @@ function pickRecorderMimeType(kind) {
             if (MediaRecorder.isTypeSupported(candidate))
                 return candidate;
         }
-        catch {
-            // Treat probe errors as "unsupported" and keep trying.
-        }
+        catch { }
     }
     return undefined;
 }
-// Name the recording after its actual container so the filename never
-// contradicts the emitted contentType (a webm-named mp4 would mislead any
-// extension-based fallback downstream). The mp4 container holds either audio
-// (.m4a → audio/mp4) or video (.mp4 → video/mp4), and — unlike webm/ogg — mp4
-// is NOT in the extension-inference ambiguous map (a user-picked .mp4 is trusted
-// as video). Here the RecordDialog's selected `kind` IS authoritative: an audio
-// recording uses an audio-only, `video: false` getUserMedia stream, so no video
-// track can exist. A surprising `video/mp4` mimeType on that audio recording is
-// therefore still named `.m4a`; ensureFileWithContentType distrusts the
-// kind-mismatched video/mp4 type and the `.m4a` extension yields audio/mp4.
+// mp4 is not in the ambiguous-extension map, so an audio recording is named .m4a whatever
+// container type the recorder reports.
 function recordingFileName(mime, kind) {
-    const base = mime.split(";")[0].trim().toLowerCase();
-    const ext = base === "audio/mp4" || base === "video/mp4"
-        ? kind === "audio"
-            ? "m4a"
-            : "mp4"
-        : base === "audio/ogg" || base === "video/ogg"
-            ? "ogg"
-            : "webm";
+    const base = mime.split(';')[0].trim().toLowerCase();
+    const ext = base === 'audio/mp4' || base === 'video/mp4'
+        ? kind === 'audio'
+            ? 'm4a'
+            : 'mp4'
+        : base === 'audio/ogg' || base === 'video/ogg'
+            ? 'ogg'
+            : 'webm';
     return `recording.${ext}`;
 }
-// A MediaRecorder blob is always a little LONGER than the wall-clock window
-// between start() and stop(). Three effects stack, all in the same direction:
-//   1. stop() flushes whatever the encoder/muxer still had buffered, so the
-//      last written packet extends past the stop() call (Chromium's webm muxer
-//      and Firefox's are both in the tens-to-low-hundreds of ms here; typical
-//      observed flush is well under 500ms).
-//   2. The container duration is the END of the final frame/packet, not the
-//      moment capture stopped — one video frame is ~33ms at 30fps and one Opus
-//      packet is 20ms, and both readers round that way (the client gate's
-//      seek-to-end duration and ffprobe on the server agree with the container).
-//   3. setTimeout fires LATE, never early — a busy main thread encoding video
-//      routinely adds tens of ms, more under load or in a hidden tab.
-//
-// Both duration gates are exact — the client upload gate (validateMediaDuration:
-// `duration <= maxDurationSec`) and the server processor
-// (media-processing-core validateDuration: `durationSec <= maxDurationSec`) —
-// with no tolerance. So stopping the recorder exactly AT the cap produced blobs
-// the product then rejected as its own "Media too long. Max N seconds." error.
-// Stopping early by 750ms clears all three effects above with headroom for
-// timer jitter, and costs 1.25% of the smallest real cap (60s).
+// A MediaRecorder blob runs a little longer than start() to stop() (muxer flush, frame-end
+// duration, late timers) and both duration gates are exact, so recording stops before the cap.
 const AUTO_STOP_SAFETY_MARGIN_MS = 750;
-// The auto-stop delay for a cap. The clamp keeps the margin from swallowing a
-// very short cap (a 1s cap would otherwise stop at 250ms); real caps are >= 60s,
-// where the clamp never applies.
 export function autoStopDelayMs(maxRecordDurationSec) {
     const capMs = Math.floor(maxRecordDurationSec * 1000);
     return Math.max(capMs - AUTO_STOP_SAFETY_MARGIN_MS, Math.ceil(capMs / 2));
@@ -86,11 +49,11 @@ function formatDuration(ms) {
     const totalSec = Math.max(0, Math.floor(ms / 1000));
     const m = Math.floor(totalSec / 60);
     const s = totalSec % 60;
-    return `${m}:${s.toString().padStart(2, "0")}`;
+    return `${m}:${s.toString().padStart(2, '0')}`;
 }
 export function RecordDialog({ open, onOpenChange, initialKind, canPhoto, canRecVideo, canRecAudio, cameraFacingMode, maxRecordDurationSec, disabled = false, isLoading = false, onRecorded, onRequestPhoto, }) {
     const [recordKind, setRecordKind] = useState(initialKind);
-    const [recorderState, setRecorderState] = useState("idle");
+    const [recorderState, setRecorderState] = useState('idle');
     const [recordPreviewUrl, setRecordPreviewUrl] = useState(null);
     const [recordedFile, setRecordedFile] = useState(null);
     const [elapsedMs, setElapsedMs] = useState(0);
@@ -104,8 +67,7 @@ export function RecordDialog({ open, onOpenChange, initialKind, canPhoto, canRec
     const lastRecordUrlRef = useRef(null);
     const livePreviewRef = useRef(null);
     const autoStopTimeoutRef = useRef(null);
-    // Bumped by every teardown. An acquisition that resolves after a teardown (dialog
-    // closed, kind switched, re-record) belongs to nobody and must not be attached.
+    // An acquisition that resolves after a teardown belongs to nobody and is never attached.
     const acquireGenRef = useRef(0);
     const previewReqRef = useRef(0);
     const startedAtRef = useRef(0);
@@ -115,11 +77,10 @@ export function RecordDialog({ open, onOpenChange, initialKind, canPhoto, canRec
     const audioSourceRef = useRef(null);
     const waveformStopRef = useRef(null);
     const waveformCanvasRef = useRef(null);
-    // Reset all transient state whenever the dialog opens.
     useEffect(() => {
         if (open) {
             setRecordKind(initialKind);
-            setRecorderState("idle");
+            setRecorderState('idle');
             setRecordedFile(null);
             setRecordPreviewUrl(null);
             setElapsedMs(0);
@@ -167,7 +128,7 @@ export function RecordDialog({ open, onOpenChange, initialKind, canPhoto, canRec
         audioAnalyserRef.current = null;
         const ctx = audioContextRef.current;
         audioContextRef.current = null;
-        if (ctx && ctx.state !== "closed") {
+        if (ctx && ctx.state !== 'closed') {
             ctx.close().catch(() => { });
         }
     }, []);
@@ -185,21 +146,14 @@ export function RecordDialog({ open, onOpenChange, initialKind, canPhoto, canRec
             audioContextRef.current = ctx;
             audioSourceRef.current = source;
             audioAnalyserRef.current = analyser;
-            // Draw loop is the shared media-viewer engine (the same one the
-            // playback AudioPlayer uses) in oscilloscope mode — one waveform
-            // implementation across recording and playback.
             waveformStopRef.current = startWaveformLoop({
                 analyser,
                 getCanvas: () => waveformCanvasRef.current,
-                mode: "line",
+                mode: 'line',
             });
         }
-        catch {
-            // Waveform is best-effort; silent failures are acceptable.
-        }
+        catch { }
     }, [stopWaveform]);
-    // Teardown MediaRecorder / MediaStream / auto-stop timeout / timer / waveform.
-    // Leaves recorderState alone — callers decide the next state.
     const teardownCapture = useCallback(() => {
         acquireGenRef.current += 1;
         if (autoStopTimeoutRef.current) {
@@ -219,11 +173,9 @@ export function RecordDialog({ open, onOpenChange, initialKind, canPhoto, canRec
         stopElapsedTimer();
         stopWaveform();
     }, [stopElapsedTimer, stopWaveform]);
-    // Acquire camera/mic and attach the live preview (video) or waveform (audio)
-    // WITHOUT starting the recorder. Returns the live stream for reuse on Start.
     const acquireStream = useCallback(async (kind) => {
-        const wantVideo = kind === "video";
-        const facingMode = cameraFacingMode ?? "user";
+        const wantVideo = kind === 'video';
+        const facingMode = cameraFacingMode ?? 'user';
         const gen = acquireGenRef.current;
         const stream = await navigator.mediaDevices.getUserMedia({
             audio: true,
@@ -249,8 +201,6 @@ export function RecordDialog({ open, onOpenChange, initialKind, canPhoto, canRec
         }
         return stream;
     }, [cameraFacingMode, startWaveform]);
-    // Start a live preview for the given kind (used on open and on kind switch),
-    // tearing down any existing stream first. Surfaces permission errors inline.
     const startLivePreview = useCallback(async (kind) => {
         teardownCapture();
         const req = ++previewReqRef.current;
@@ -259,16 +209,13 @@ export function RecordDialog({ open, onOpenChange, initialKind, canPhoto, canRec
             await acquireStream(kind);
         }
         catch (e) {
-            setError(e instanceof Error ? e.message : "Camera/microphone access denied.");
+            setError(e instanceof Error ? e.message : 'Camera/microphone access denied.');
         }
         finally {
             if (req === previewReqRef.current)
                 setAcquiring(false);
         }
     }, [teardownCapture, acquireStream]);
-    // Request camera/mic as soon as the dialog opens (parity with PhotoCaptureModal)
-    // so the permission prompt fires on open and the user sees a live preview before
-    // pressing Start. Release all devices when the dialog closes or unmounts.
     useEffect(() => {
         if (open) {
             void startLivePreview(initialKind);
@@ -279,29 +226,23 @@ export function RecordDialog({ open, onOpenChange, initialKind, canPhoto, canRec
         };
     }, [open, initialKind, startLivePreview, teardownCapture, revokeLastRecordUrl]);
     const startRecording = useCallback(async (kind) => {
-        // Discard any previous preview before starting fresh.
         revokeLastRecordUrl();
         setRecordPreviewUrl(null);
         setRecordedFile(null);
         setRecordKind(kind);
-        const wantVideo = kind === "video";
-        // Reuse the live-preview stream when it matches the requested kind;
-        // otherwise acquire a fresh one (also (re)triggers the permission prompt).
+        const wantVideo = kind === 'video';
         let stream = recordStreamRef.current;
         if (!stream || liveStreamKindRef.current !== kind) {
             try {
                 stream = await acquireStream(kind);
             }
             catch (e) {
-                setError(e instanceof Error ? e.message : "Camera/microphone access denied.");
+                setError(e instanceof Error ? e.message : 'Camera/microphone access denied.');
                 return;
             }
         }
         if (!stream)
             return;
-        // Request an explicit, supported container so mr.mimeType is
-        // deterministic; fall back to the browser default when the explicit
-        // request is unavailable or rejected.
         const preferredMimeType = pickRecorderMimeType(kind);
         let mr;
         try {
@@ -320,32 +261,23 @@ export function RecordDialog({ open, onOpenChange, initialKind, canPhoto, canRec
         };
         mr.onstop = () => {
             const blob = new Blob(recordChunksRef.current, {
-                type: mr.mimeType ||
-                    preferredMimeType ||
-                    (wantVideo ? "video/webm" : "audio/webm"),
+                type: mr.mimeType || preferredMimeType || (wantVideo ? 'video/webm' : 'audio/webm'),
             });
             const rawFile = new File([blob], recordingFileName(blob.type, kind), { type: blob.type });
-            // Normalize to the valid, parameter-less base type
-            // ("audio/webm;codecs=opus" → "audio/webm"). The chosen kind is
-            // authoritative: an audio recording must never emit a video/* type
-            // even if the recorder reports a surprising container.
-            const file = ensureFileWithContentType(rawFile, wantVideo ? "video" : "audio");
+            const file = ensureFileWithContentType(rawFile, wantVideo ? 'video' : 'audio');
             const url = makeRecordUrl(file);
             setRecordedFile(file);
             setRecordPreviewUrl(url);
-            setRecorderState("preview");
-            // Release devices but keep the recorded file/url in state.
+            setRecorderState('preview');
             teardownCapture();
         };
         mr.start();
-        setRecorderState("recording");
+        setRecorderState('recording');
         startElapsedTimer();
-        // Hard cap. Stops with deliberate headroom (autoStopDelayMs) so the blob
-        // this produces lands legally UNDER maxRecordDurationSec at both gates.
         if (maxRecordDurationSec && maxRecordDurationSec > 0) {
             autoStopTimeoutRef.current = setTimeout(() => {
                 try {
-                    if (mediaRecorderRef.current && mediaRecorderRef.current.state === "recording") {
+                    if (mediaRecorderRef.current && mediaRecorderRef.current.state === 'recording') {
                         mediaRecorderRef.current.stop();
                     }
                 }
@@ -362,18 +294,18 @@ export function RecordDialog({ open, onOpenChange, initialKind, canPhoto, canRec
     ]);
     const stopRecording = useCallback(() => {
         const mr = mediaRecorderRef.current;
-        if (mr && mr.state === "recording") {
+        if (mr && mr.state === 'recording') {
             try {
                 mr.stop();
             }
             catch {
                 teardownCapture();
-                setRecorderState("idle");
+                setRecorderState('idle');
             }
         }
         else {
             teardownCapture();
-            setRecorderState("idle");
+            setRecorderState('idle');
         }
     }, [teardownCapture]);
     const handleReRecord = useCallback(() => {
@@ -382,35 +314,29 @@ export function RecordDialog({ open, onOpenChange, initialKind, canPhoto, canRec
         setRecordedFile(null);
         setElapsedMs(0);
         setError(null);
-        setRecorderState("idle");
+        setRecorderState('idle');
         void startLivePreview(recordKind);
     }, [revokeLastRecordUrl, startLivePreview, recordKind]);
-    // Switching kind in idle restarts the live preview for the new kind so the
-    // correct device prompt/preview shows before recording.
     const handleSelectKind = useCallback((kind) => {
         setRecordKind(kind);
         setError(null);
         void startLivePreview(kind);
     }, [startLivePreview]);
     const reportError = useCallback((e) => {
-        setError(e instanceof Error ? e.message : "Something went wrong with the recording.");
+        setError(e instanceof Error ? e.message : 'Something went wrong with the recording.');
     }, []);
-    // Start may need to acquire a device first; pending covers that and a repeat click
-    // is ignored, so two clicks can never start two recorders.
-    const start = useAsyncAction((kind) => startRecording(kind), { onError: reportError });
-    // Save hands the recording off (the consumer validates and emits it). Pending covers
-    // the hand-off and a repeat click is ignored, so a double click can never emit twice.
+    const start = useAsyncAction((kind) => startRecording(kind), {
+        onError: reportError,
+    });
     const save = useAsyncAction(async () => {
         if (!recordedFile || !recordPreviewUrl)
             return;
         await onRecorded(recordedFile, recordPreviewUrl, recordKind);
         onOpenChange(false);
     }, { onError: reportError });
-    // Close the dialog for real (no confirmation). Used for idle/recording
-    // states and as the "Discard" action in the confirm AlertDialog.
     const closeDialogImmediately = useCallback(() => {
         const mr = mediaRecorderRef.current;
-        if (mr && mr.state === "recording") {
+        if (mr && mr.state === 'recording') {
             try {
                 mr.stop();
             }
@@ -421,34 +347,30 @@ export function RecordDialog({ open, onOpenChange, initialKind, canPhoto, canRec
         setRecordedFile(null);
         setRecordPreviewUrl(null);
         setElapsedMs(0);
-        setRecorderState("idle");
+        setRecorderState('idle');
         setDiscardConfirmOpen(false);
         onOpenChange(false);
     }, [teardownCapture, revokeLastRecordUrl, onOpenChange]);
-    // Dialog close requests. In "preview" state we ask for confirmation
-    // (the user has unsaved work). Other states close immediately.
     const handleDialogOpenChange = useCallback((v) => {
         if (v)
-            return; // opening is parent-driven via the `open` prop
+            return;
         if (save.pending)
-            return; // never drop a recording mid-hand-off
-        if (recorderState === "preview") {
+            return;
+        if (recorderState === 'preview') {
             setDiscardConfirmOpen(true);
             return;
         }
         closeDialogImmediately();
     }, [recorderState, save.pending, closeDialogImmediately]);
-    const isRecording = recorderState === "recording";
-    const isPreview = recorderState === "preview";
-    const isIdle = recorderState === "idle";
-    // The label shows the REAL cap ("0:42 / 1:00"), not the earlier auto-stop
-    // point — the promise to the user is the cap; the margin is internal.
+    const isRecording = recorderState === 'recording';
+    const isPreview = recorderState === 'preview';
+    const isIdle = recorderState === 'idle';
     const elapsedLabel = maxRecordDurationSec
         ? `${formatDuration(elapsedMs)} / ${formatDuration(maxRecordDurationSec * 1000)}`
         : formatDuration(elapsedMs);
-    return (_jsxs(_Fragment, { children: [_jsx(Dialog, { open: open, onOpenChange: handleDialogOpenChange, children: _jsxs(DialogContent, { className: "max-w-md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Record" }), _jsxs(DialogDescription, { children: [isIdle && "Choose audio or video, then press Start.", isRecording && "Recording…", isPreview && "Review your recording. Save to upload, or Re-record to try again."] })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [canRecVideo && (_jsx(Button, { type: "button", variant: recordKind === "video" ? "default" : "secondary", "aria-pressed": recordKind === "video", onClick: () => handleSelectKind("video"), disabled: !isIdle || acquiring, icon: _jsx(Video, { className: "icon-xs" }), children: "Video" })), canRecAudio && (_jsx(Button, { type: "button", variant: recordKind === "audio" ? "default" : "secondary", "aria-pressed": recordKind === "audio", onClick: () => handleSelectKind("audio"), disabled: !isIdle || acquiring, icon: _jsx(Mic, { className: "icon-xs" }), children: "Audio" })), canPhoto && onRequestPhoto && (_jsx(Button, { type: "button", variant: "secondary", onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(Dialog, { open: open, onOpenChange: handleDialogOpenChange, children: _jsxs(DialogContent, { className: "max-w-md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Record" }), _jsxs(DialogDescription, { children: [isIdle && 'Choose audio or video, then press Start.', isRecording && 'Recording…', isPreview && 'Review your recording. Save to upload, or Re-record to try again.'] })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [canRecVideo && (_jsx(Button, { type: "button", variant: recordKind === 'video' ? 'default' : 'secondary', "aria-pressed": recordKind === 'video', onClick: () => handleSelectKind('video'), disabled: !isIdle || acquiring, icon: _jsx(Video, { className: "icon-xs" }), children: "Video" })), canRecAudio && (_jsx(Button, { type: "button", variant: recordKind === 'audio' ? 'default' : 'secondary', "aria-pressed": recordKind === 'audio', onClick: () => handleSelectKind('audio'), disabled: !isIdle || acquiring, icon: _jsx(Mic, { className: "icon-xs" }), children: "Audio" })), canPhoto && onRequestPhoto && (_jsx(Button, { type: "button", variant: "secondary", onClick: () => {
                                         onRequestPhoto();
                                         onOpenChange(false);
-                                    }, disabled: !isIdle, icon: _jsx(Camera, { className: "icon-xs" }), children: "Photo" }))] }), recordKind === "video" && !isPreview && (_jsxs("div", { className: "relative mt-2 rounded-md overflow-hidden bg-[hsl(var(--neutral-black))] aspect-video", children: [_jsx("video", { ref: livePreviewRef, className: "w-full h-full object-contain", playsInline: true, muted: true }), acquiring && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx(Spinner, { size: "lg", label: "Starting camera" }) }))] })), recordKind === "audio" && !isPreview && (_jsxs("div", { className: "relative mt-2 rounded-md bg-muted p-2 text-primary", children: [_jsx("canvas", { ref: waveformCanvasRef, width: 480, height: 80, className: "w-full h-20", "aria-label": "Audio waveform" }), acquiring && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx(Spinner, { size: "lg", label: "Starting microphone" }) }))] })), error && (_jsx("p", { className: "text-sm text-destructive", role: "alert", children: error })), isRecording && (_jsxs("div", { className: "flex items-center gap-2 text-sm", "aria-live": "polite", children: [_jsx("span", { className: "inline-block h-2.5 w-2.5 rounded-full bg-[color:var(--recording-indicator)] animate-pulse", "aria-label": "Recording" }), _jsx("span", { className: "tabular-nums", children: elapsedLabel })] })), isPreview && recordPreviewUrl && (_jsx("div", { className: "mt-2", children: _jsx(MediaPreview, { url: recordPreviewUrl, type: recordKind, controls: true, priority: true, className: "w-full rounded-md" }) })), _jsxs(DialogFooter, { className: "flex-row justify-between gap-2", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => handleDialogOpenChange(false), disabled: save.pending, icon: _jsx(X, { className: "icon-xs" }), children: "Close" }), isIdle && (_jsx(Button, { type: "button", variant: "default", onClick: () => void start.run(recordKind), disabled: disabled || isLoading || acquiring, pending: start.pending, icon: recordKind === "video" ? _jsx(Video, { className: "icon-xs" }) : _jsx(Mic, { className: "icon-xs" }), children: "Start" })), isRecording && (_jsx(Button, { type: "button", variant: "default", onClick: stopRecording, children: "Stop" })), isPreview && (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: handleReRecord, disabled: save.pending, icon: _jsx(RotateCcw, { className: "icon-xs" }), children: "Re-record" }), _jsx(Button, { type: "button", variant: "default", onClick: () => void save.run(), disabled: disabled || isLoading, pending: save.pending, icon: _jsx(Check, { className: "icon-xs" }), children: "Save" })] }))] })] }) }), _jsx(AlertDialog, { open: discardConfirmOpen, onOpenChange: setDiscardConfirmOpen, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Discard recording?" }), _jsx(AlertDialogDescription, { children: "You have a recorded clip that hasn't been saved. Closing now will discard it." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Keep recording" }), _jsx(AlertDialogAction, { onClick: closeDialogImmediately, children: "Discard" })] })] }) })] }));
+                                    }, disabled: !isIdle, icon: _jsx(Camera, { className: "icon-xs" }), children: "Photo" }))] }), recordKind === 'video' && !isPreview && (_jsxs("div", { className: "relative mt-2 rounded-md overflow-hidden bg-[hsl(var(--neutral-black))] aspect-video", children: [_jsx("video", { ref: livePreviewRef, className: "w-full h-full object-contain", playsInline: true, muted: true }), acquiring && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx(Spinner, { size: "lg", label: "Starting camera" }) }))] })), recordKind === 'audio' && !isPreview && (_jsxs("div", { className: "relative mt-2 rounded-md bg-muted p-2 text-primary", children: [_jsx("canvas", { ref: waveformCanvasRef, width: 480, height: 80, className: "w-full h-20", "aria-label": "Audio waveform" }), acquiring && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx(Spinner, { size: "lg", label: "Starting microphone" }) }))] })), error && (_jsx("p", { className: "text-sm text-destructive", role: "alert", children: error })), isRecording && (_jsxs("div", { className: "flex items-center gap-2 text-sm", "aria-live": "polite", children: [_jsx("span", { className: "inline-block h-2.5 w-2.5 rounded-full bg-[color:var(--recording-indicator)] animate-pulse", "aria-label": "Recording" }), _jsx("span", { className: "tabular-nums", children: elapsedLabel })] })), isPreview && recordPreviewUrl && (_jsx("div", { className: "mt-2", children: _jsx(MediaPreview, { url: recordPreviewUrl, type: recordKind, controls: true, priority: true, className: "w-full rounded-md" }) })), _jsxs(DialogFooter, { className: "flex-row justify-between gap-2", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => handleDialogOpenChange(false), disabled: save.pending, icon: _jsx(X, { className: "icon-xs" }), children: "Close" }), isIdle && (_jsx(Button, { type: "button", variant: "default", onClick: () => void start.run(recordKind), disabled: disabled || isLoading || acquiring, pending: start.pending, icon: recordKind === 'video' ? (_jsx(Video, { className: "icon-xs" })) : (_jsx(Mic, { className: "icon-xs" })), children: "Start" })), isRecording && (_jsx(Button, { type: "button", variant: "default", onClick: stopRecording, children: "Stop" })), isPreview && (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: handleReRecord, disabled: save.pending, icon: _jsx(RotateCcw, { className: "icon-xs" }), children: "Re-record" }), _jsx(Button, { type: "button", variant: "default", onClick: () => void save.run(), disabled: disabled || isLoading, pending: save.pending, icon: _jsx(Check, { className: "icon-xs" }), children: "Save" })] }))] })] }) }), _jsx(AlertDialog, { open: discardConfirmOpen, onOpenChange: setDiscardConfirmOpen, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Discard recording?" }), _jsx(AlertDialogDescription, { children: "You have a recorded clip that hasn't been saved. Closing now will discard it." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Keep recording" }), _jsx(AlertDialogAction, { onClick: closeDialogImmediately, children: "Discard" })] })] }) })] }));
 }
 //# sourceMappingURL=record-dialog.js.map