fix: live journal camera save on Android

Use native camera picker on mobile, add preview-and-save step, and
harden canvas capture with toDataURL fallback when toBlob fails.

Co-authored-by: Cursor <cursoragent@cursor.com>

client/src/components/LiveCameraCapture.tsx

@@ -1,6 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Camera, X } from 'lucide-react'
+import {
+  captureVideoFrame,
+  preferNativeCameraPicker
+} from '../utils/captureVideoFrame.js'
 
 interface LiveCameraCaptureProps {
   open: boolean
@@ -11,6 +15,8 @@ interface LiveCameraCaptureProps {
   onCapture: (blob: Blob) => void
 }
 
+type Phase = 'live' | 'preview' | 'native'
+
 export default function LiveCameraCapture({
   open,
   busy = false,
@@ -21,9 +27,26 @@ export default function LiveCameraCapture({
 }: LiveCameraCaptureProps) {
   const { t } = useTranslation()
   const videoRef = useRef<HTMLVideoElement | null>(null)
+  const fileInputRef = useRef<HTMLInputElement | null>(null)
   const streamRef = useRef<MediaStream | null>(null)
+  const previewUrlRef = useRef<string | null>(null)
+
   const [cameraError, setCameraError] = useState<string | null>(null)
   const [ready, setReady] = useState(false)
+  const [capturing, setCapturing] = useState(false)
+  const [phase, setPhase] = useState<Phase>(() => (preferNativeCameraPicker() ? 'native' : 'live'))
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null)
+  const [previewBlob, setPreviewBlob] = useState<Blob | null>(null)
+  const [streamGeneration, setStreamGeneration] = useState(0)
+
+  const clearPreview = useCallback(() => {
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current)
+      previewUrlRef.current = null
+    }
+    setPreviewUrl(null)
+    setPreviewBlob(null)
+  }, [])
 
   const stopStream = useCallback(() => {
     for (const track of streamRef.current?.getTracks() ?? []) {
@@ -36,10 +59,44 @@ export default function LiveCameraCapture({
     setReady(false)
   }, [])
 
+  const enterPreview = useCallback((blob: Blob) => {
+    stopStream()
+    clearPreview()
+    const url = URL.createObjectURL(blob)
+    previewUrlRef.current = url
+    setPreviewBlob(blob)
+    setPreviewUrl(url)
+    setPhase('preview')
+  }, [stopStream, clearPreview])
+
+  const resetToLive = useCallback(() => {
+    clearPreview()
+    setCameraError(null)
+    setCapturing(false)
+    if (preferNativeCameraPicker()) {
+      setPhase('native')
+    } else {
+      setPhase('live')
+      setStreamGeneration((n) => n + 1)
+    }
+  }, [clearPreview])
+
   useEffect(() => {
     if (!open) {
       stopStream()
+      clearPreview()
       setCameraError(null)
+      setCapturing(false)
+      setPhase(preferNativeCameraPicker() ? 'native' : 'live')
+      return
+    }
+    setPhase(preferNativeCameraPicker() ? 'native' : 'live')
+    clearPreview()
+  }, [open, stopStream, clearPreview])
+
+  useEffect(() => {
+    if (!open || phase !== 'live') {
+      stopStream()
       return
     }
 
@@ -68,11 +125,19 @@ export default function LiveCameraCapture({
         }
         streamRef.current = stream
         const video = videoRef.current
-        if (video) {
-          video.srcObject = stream
-          await video.play()
-          setReady(true)
+        if (!video) return
+
+        const markReady = () => {
+          if (cancelled) return
+          if (video.videoWidth > 0 && video.videoHeight > 0) {
+            setReady(true)
+          }
         }
+
+        video.onloadedmetadata = markReady
+        video.srcObject = stream
+        await video.play()
+        markReady()
       } catch (err) {
         console.error('Camera access failed:', err)
         if (!cancelled) {
@@ -86,34 +151,58 @@ export default function LiveCameraCapture({
       cancelled = true
       stopStream()
     }
-  }, [open, stopStream, t])
+  }, [open, phase, streamGeneration, stopStream, t])
 
-  const handleCapture = () => {
+  const handleCapture = async () => {
     const video = videoRef.current
-    if (!video || !ready || busy) return
+    if (!video || !ready || busy || capturing) return
 
-    const width = video.videoWidth
-    const height = video.videoHeight
-    if (!width || !height) return
+    setCapturing(true)
+    setCameraError(null)
+    try {
+      const blob = await captureVideoFrame(video)
+      enterPreview(blob)
+    } catch (err) {
+      console.error('Live camera capture failed:', err)
+      setCameraError(t('logs.live_photo_capture_failed'))
+    } finally {
+      setCapturing(false)
+    }
+  }
 
-    const canvas = document.createElement('canvas')
-    canvas.width = width
-    canvas.height = height
-    const ctx = canvas.getContext('2d')
-    if (!ctx) return
-    ctx.drawImage(video, 0, 0, width, height)
+  const handleNativeFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    e.target.value = ''
+    if (!file || busy) return
 
-    canvas.toBlob(
-      (blob) => {
-        if (blob) onCapture(blob)
-      },
-      'image/jpeg',
-      0.92
-    )
+    setCameraError(null)
+    try {
+      enterPreview(file)
+    } catch (err) {
+      console.error('Live camera file pick failed:', err)
+      setCameraError(t('logs.live_photo_capture_failed'))
+    }
+  }
+
+  const handleSave = () => {
+    if (!previewBlob || busy) return
+    onCapture(previewBlob)
+  }
+
+  const handleRetake = () => {
+    if (busy) return
+    resetToLive()
+  }
+
+  const openNativePicker = () => {
+    if (busy) return
+    fileInputRef.current?.click()
   }
 
   if (!open) return null
 
+  const showPreview = phase === 'preview' && previewUrl
+
   return (
     <div
       className="live-log-modal-backdrop live-camera-backdrop"
@@ -133,9 +222,41 @@ export default function LiveCameraCapture({
           </button>
         </div>
 
-        {cameraError ? (
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          capture="environment"
+          className="live-camera-file-input"
+          onChange={(e) => void handleNativeFile(e)}
+        />
+
+        {cameraError && (
           <p className="live-log-modal-hint auth-error">{cameraError}</p>
-        ) : (
+        )}
+
+        {showPreview ? (
+          <div className="live-camera-preview-wrap">
+            <img
+              src={previewUrl}
+              alt=""
+              className="live-camera-preview live-camera-preview-still"
+            />
+          </div>
+        ) : phase === 'native' ? (
+          <div className="live-camera-native-prompt">
+            <p className="live-log-modal-hint">{t('logs.live_photo_native_hint')}</p>
+            <button
+              type="button"
+              className="btn primary live-camera-open-native"
+              onClick={openNativePicker}
+              disabled={busy}
+            >
+              <Camera size={18} />
+              {t('logs.live_photo_open_camera_btn')}
+            </button>
+          </div>
+        ) : cameraError && !ready ? null : (
           <div className="live-camera-preview-wrap">
             <video
               ref={videoRef}
@@ -168,15 +289,33 @@ export default function LiveCameraCapture({
           <button type="button" className="btn secondary" onClick={onClose} disabled={busy}>
             {t('logs.confirm_no')}
           </button>
-          <button
-            type="button"
-            className="btn primary live-camera-shutter"
-            onClick={handleCapture}
-            disabled={busy || !ready || !!cameraError}
-          >
-            <Camera size={18} />
-            {busy ? t('logs.photo_processing') : t('logs.live_photo_capture_btn')}
-          </button>
+
+          {showPreview ? (
+            <>
+              <button type="button" className="btn secondary" onClick={handleRetake} disabled={busy}>
+                {t('logs.live_photo_retake_btn')}
+              </button>
+              <button
+                type="button"
+                className="btn primary live-camera-shutter"
+                onClick={handleSave}
+                disabled={busy || !previewBlob}
+              >
+                <Camera size={18} />
+                {busy ? t('logs.photo_processing') : t('logs.live_photo_save_btn')}
+              </button>
+            </>
+          ) : phase === 'native' ? null : (
+            <button
+              type="button"
+              className="btn primary live-camera-shutter"
+              onClick={() => void handleCapture()}
+              disabled={busy || capturing || !ready || !!cameraError}
+            >
+              <Camera size={18} />
+              {capturing ? t('logs.photo_processing') : t('logs.live_photo_capture_btn')}
+            </button>
+          )}
         </div>
       </div>
     </div>