@vanira/sdk-react-native 0.0.2

package/src/presets/CameraModal.tsx

@@ -0,0 +1,576 @@
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  Switch,
+  Text,
+  View,
+} from 'react-native';
+import {RTCView} from 'react-native-webrtc';
+import ViewShot from 'react-native-view-shot';
+import {CallSpeakerToggle} from './call/CallSpeakerToggle';
+import {ensureCameraPermission} from './camera/cameraPermissions';
+import {closeCameraStream, openCameraStream} from './camera/cameraStream';
+import {
+  buildCaptureFileName,
+  parseFacingMode,
+  parseLivenessDefault,
+  type FacingMode,
+} from './camera/cameraUtils';
+import {useLivenessFlow} from './camera/useLivenessFlow';
+import type {RNUploadFile} from './upload/uploadUtils';
+import {PresetShellModal} from './PresetShellModal';
+import type {PresetClient, PresetContext} from './types';
+
+type Props = {
+  visible: boolean;
+  ctx: PresetContext;
+  client: PresetClient | null;
+  onClose: () => void;
+  onCancel: (reason?: string) => void;
+  onComplete: (payload: Record<string, unknown>) => void;
+};
+
+const SUCCESS_DELAY_MS = 400;
+
+type CameraPhase = 'opening' | 'live' | 'capturing' | 'error';
+
+export function CameraModal({
+  visible,
+  ctx,
+  client,
+  onClose,
+  onCancel,
+  onComplete,
+}: Props) {
+  const merged = useMemo(
+    () => ({...ctx.args, ...ctx.clientFields}),
+    [ctx.args, ctx.clientFields],
+  );
+
+  const title = String(merged.title ?? 'Take a Photo');
+  const description = String(
+    merged.description ?? 'Point your camera at the subject, then tap capture.',
+  );
+  const initialFacing = parseFacingMode(merged.facing_mode ?? ctx.args.facing_mode);
+  const reason = String(merged.reason ?? ctx.args.reason ?? 'camera_capture');
+  const defaultLiveness = parseLivenessDefault(ctx.clientFields, ctx.args);
+
+  const [phase, setPhase] = useState<CameraPhase>('opening');
+  const [activeFacing, setActiveFacing] = useState<FacingMode>(initialFacing);
+  const [livenessEnabled, setLivenessEnabled] = useState(defaultLiveness);
+  const [captureReady, setCaptureReady] = useState(!defaultLiveness);
+  const [streamUrl, setStreamUrl] = useState<string | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [statusMessage, setStatusMessage] = useState<string | null>(null);
+
+  const streamRef = useRef<import('react-native-webrtc').MediaStream | null>(
+    null,
+  );
+  const viewShotRef = useRef<ViewShot>(null);
+
+  const stopStream = useCallback(() => {
+    closeCameraStream(streamRef.current);
+    streamRef.current = null;
+    setStreamUrl(null);
+  }, []);
+
+  const {phase: livenessPhase, progress, guideText, reset: resetLiveness} =
+    useLivenessFlow({
+      enabled: livenessEnabled && phase === 'live',
+      onVerified: () => setCaptureReady(true),
+    });
+
+  useEffect(() => {
+    if (!visible) {
+      stopStream();
+      return;
+    }
+    setActiveFacing(initialFacing);
+    setLivenessEnabled(defaultLiveness);
+    setCaptureReady(!defaultLiveness);
+    resetLiveness();
+  }, [defaultLiveness, initialFacing, resetLiveness, stopStream, visible, ctx.toolCallId]);
+
+  useEffect(() => {
+    if (!visible) {
+      return;
+    }
+
+    let cancelled = false;
+    setPhase('opening');
+    setErrorMessage(null);
+    setStatusMessage(null);
+    stopStream();
+
+    (async () => {
+      const cameraOk = await ensureCameraPermission();
+      if (!cameraOk) {
+        if (!cancelled) {
+          setPhase('error');
+          setErrorMessage('Camera access denied. Please allow camera permissions.');
+        }
+        return;
+      }
+
+      try {
+        const stream = await openCameraStream(activeFacing);
+        if (cancelled) {
+          closeCameraStream(stream);
+          return;
+        }
+        streamRef.current = stream;
+        setStreamUrl(stream.toURL());
+        setPhase('live');
+        if (livenessEnabled) {
+          setCaptureReady(false);
+          resetLiveness();
+        }
+      } catch (err: unknown) {
+        if (!cancelled) {
+          const message =
+            err instanceof Error
+              ? err.message
+              : 'Camera access denied. Please allow camera permissions.';
+          setPhase('error');
+          setErrorMessage(message);
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      stopStream();
+    };
+  }, [
+    activeFacing,
+    livenessEnabled,
+    resetLiveness,
+    stopStream,
+    visible,
+    ctx.toolCallId,
+  ]);
+
+  const switchFacing = useCallback(
+    (next: FacingMode) => {
+      if (next === activeFacing || phase === 'capturing') {
+        return;
+      }
+      setActiveFacing(next);
+      if (livenessEnabled) {
+        setCaptureReady(false);
+      }
+    },
+    [activeFacing, livenessEnabled, phase],
+  );
+
+  const handleLivenessToggle = useCallback(
+    (value: boolean) => {
+      setLivenessEnabled(value);
+      setCaptureReady(!value);
+      resetLiveness();
+    },
+    [resetLiveness],
+  );
+
+  const handleCapture = useCallback(async () => {
+    if (!captureReady || phase !== 'live' || !viewShotRef.current) {
+      return;
+    }
+    if (!client?.uploadMedia) {
+      setErrorMessage('Upload is not available — start a voice call first.');
+      return;
+    }
+
+    setPhase('capturing');
+    setStatusMessage('Sending photo…');
+    setErrorMessage(null);
+
+    try {
+      const uri = await viewShotRef.current.capture?.();
+      if (!uri) {
+        throw new Error('Capture failed');
+      }
+
+      stopStream();
+
+      const fileName = buildCaptureFileName();
+      const file: RNUploadFile = {
+        uri,
+        type: 'image/jpeg',
+        name: fileName,
+      };
+
+      const response = await client.uploadMedia(
+        file,
+        reason,
+        'User captured a photo via camera',
+      );
+
+      setStatusMessage('✓ Photo sent!');
+      setTimeout(() => {
+        onComplete({
+          file_name: fileName,
+          file_type: 'image/jpeg',
+          file_size: file.size ?? 0,
+          media_id: response.media_id,
+          url: response.url,
+          message: 'User captured and sent a photo.',
+        });
+      }, SUCCESS_DELAY_MS);
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Capture failed';
+      setPhase('live');
+      setStatusMessage(null);
+      setErrorMessage(message);
+    }
+  }, [captureReady, client, onComplete, phase, reason, stopStream]);
+
+  const handleClose = useCallback(() => {
+    stopStream();
+    onCancel('User closed');
+  }, [onCancel, stopStream]);
+
+  const handleCancelPress = useCallback(() => {
+    stopStream();
+    onCancel('User cancelled');
+  }, [onCancel, stopStream]);
+
+  const showGuide = livenessEnabled && phase === 'live';
+  const livenessVerified = livenessPhase === 'verified';
+  const canSwitchCamera = phase === 'live' || phase === 'opening';
+
+  return (
+    <PresetShellModal
+      visible={visible}
+      title={title}
+      subtitle={description}
+      onClose={handleClose}
+      hideDefaultClose>
+      <CallSpeakerToggle compact disabled={phase === 'capturing'} />
+
+      <View style={styles.facingRow}>
+        <Pressable
+          style={[
+            styles.facingChip,
+            activeFacing === 'environment' && styles.facingChipActive,
+            !canSwitchCamera && styles.facingChipDisabled,
+          ]}
+          onPress={() => switchFacing('environment')}
+          disabled={!canSwitchCamera || activeFacing === 'environment'}>
+          <Text
+            style={[
+              styles.facingChipText,
+              activeFacing === 'environment' && styles.facingChipTextActive,
+            ]}>
+            Back camera
+          </Text>
+        </Pressable>
+        <Pressable
+          style={[
+            styles.facingChip,
+            activeFacing === 'user' && styles.facingChipActive,
+            !canSwitchCamera && styles.facingChipDisabled,
+          ]}
+          onPress={() => switchFacing('user')}
+          disabled={!canSwitchCamera || activeFacing === 'user'}>
+          <Text
+            style={[
+              styles.facingChipText,
+              activeFacing === 'user' && styles.facingChipTextActive,
+            ]}>
+            Front camera
+          </Text>
+        </Pressable>
+      </View>
+
+      <View style={styles.livenessRow}>
+        <Text style={styles.livenessLabel}>Liveness Verification</Text>
+        <Switch
+          value={livenessEnabled}
+          onValueChange={handleLivenessToggle}
+          disabled={phase === 'capturing'}
+        />
+      </View>
+
+      <View style={styles.videoWrap}>
+        {phase === 'opening' ? (
+          <View style={styles.overlay}>
+            <ActivityIndicator color="#fff" size="large" />
+            <Text style={styles.overlayText}>Opening camera…</Text>
+          </View>
+        ) : null}
+
+        {phase === 'error' ? (
+          <View style={styles.overlay}>
+            <Text style={styles.errorOverlayText}>{errorMessage}</Text>
+          </View>
+        ) : null}
+
+        {streamUrl && phase !== 'error' ? (
+          <ViewShot
+            ref={viewShotRef}
+            style={styles.viewShot}
+            options={{format: 'jpg', quality: 0.85}}>
+            <RTCView
+              streamURL={streamUrl}
+              style={styles.video}
+              objectFit="cover"
+              mirror={activeFacing === 'user'}
+            />
+          </ViewShot>
+        ) : null}
+
+        {phase === 'live' ? (
+          <View style={styles.liveBadge}>
+            <View style={styles.liveDot} />
+            <Text style={styles.liveText}>LIVE</Text>
+          </View>
+        ) : null}
+
+        {showGuide ? (
+          <View
+            style={[
+              styles.faceGuide,
+              livenessVerified && styles.faceGuideVerified,
+            ]}
+            pointerEvents="none">
+            <Text
+              style={[
+                styles.guideText,
+                livenessVerified && styles.guideTextVerified,
+              ]}>
+              {guideText}
+            </Text>
+          </View>
+        ) : null}
+      </View>
+
+      {showGuide ? (
+        <View style={styles.progressBlock}>
+          <View style={styles.progressHeader}>
+            <Text style={styles.progressLabel}>LIVENESS ANALYSIS</Text>
+            <Text
+              style={[
+                styles.progressPct,
+                livenessVerified && styles.progressPctVerified,
+              ]}>
+              {progress}%
+            </Text>
+          </View>
+          <View style={styles.progressTrack}>
+            <View
+              style={[
+                styles.progressFill,
+                {width: `${progress}%`},
+                livenessVerified && styles.progressFillVerified,
+              ]}
+            />
+          </View>
+        </View>
+      ) : null}
+
+      {statusMessage ? (
+        <View style={styles.statusRow}>
+          {phase === 'capturing' ? <ActivityIndicator color="#4f46e5" /> : null}
+          <Text style={styles.statusText}>{statusMessage}</Text>
+        </View>
+      ) : null}
+      {errorMessage && phase !== 'error' ? (
+        <Text style={styles.errorText}>{errorMessage}</Text>
+      ) : null}
+
+      <View style={styles.actions}>
+        <Pressable
+          style={styles.cancelBtn}
+          onPress={handleCancelPress}
+          disabled={phase === 'capturing'}>
+          <Text style={styles.cancelBtnText}>Cancel</Text>
+        </Pressable>
+        <Pressable
+          style={[
+            styles.captureBtn,
+            (!captureReady || phase !== 'live') && styles.captureDisabled,
+          ]}
+          onPress={handleCapture}
+          disabled={!captureReady || phase !== 'live'}>
+          {phase === 'capturing' ? (
+            <ActivityIndicator color="#fff" />
+          ) : (
+            <Text style={styles.captureBtnText}>Capture & Send</Text>
+          )}
+        </Pressable>
+      </View>
+    </PresetShellModal>
+  );
+}
+
+const styles = StyleSheet.create({
+  facingRow: {
+    flexDirection: 'row',
+    gap: 8,
+    marginBottom: 10,
+  },
+  facingChip: {
+    flex: 1,
+    paddingVertical: 9,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: '#e5e7eb',
+    backgroundColor: '#f9fafb',
+    alignItems: 'center',
+  },
+  facingChipActive: {
+    backgroundColor: '#4f46e5',
+    borderColor: '#4f46e5',
+  },
+  facingChipDisabled: {opacity: 0.6},
+  facingChipText: {fontSize: 12, fontWeight: '600', color: '#374151'},
+  facingChipTextActive: {color: '#fff'},
+  livenessRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: '#f9fafb',
+    borderWidth: 1,
+    borderColor: '#e5e7eb',
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    marginBottom: 12,
+  },
+  livenessLabel: {fontSize: 12, fontWeight: '600', color: '#374151'},
+  videoWrap: {
+    position: 'relative',
+    borderRadius: 12,
+    overflow: 'hidden',
+    backgroundColor: '#0f172a',
+    minHeight: 240,
+    aspectRatio: 4 / 3,
+  },
+  viewShot: {flex: 1},
+  video: {flex: 1, minHeight: 240},
+  overlay: {
+    ...StyleSheet.absoluteFill,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 12,
+    backgroundColor: '#0f172a',
+    zIndex: 2,
+  },
+  overlayText: {color: '#94a3b8', fontSize: 13},
+  errorOverlayText: {
+    color: '#f87171',
+    fontSize: 13,
+    textAlign: 'center',
+    paddingHorizontal: 24,
+  },
+  liveBadge: {
+    position: 'absolute',
+    top: 10,
+    left: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    backgroundColor: 'rgba(15,23,42,0.75)',
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 6,
+    zIndex: 3,
+  },
+  liveDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: '#ef4444',
+  },
+  liveText: {color: '#fff', fontSize: 11, fontWeight: '700'},
+  faceGuide: {
+    position: 'absolute',
+    alignSelf: 'center',
+    top: '18%',
+    width: 140,
+    height: 180,
+    borderWidth: 3,
+    borderColor: 'rgba(255,255,255,0.45)',
+    borderRadius: 90,
+    borderStyle: 'dashed',
+    zIndex: 3,
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    paddingBottom: 8,
+  },
+  faceGuideVerified: {borderColor: '#10b981'},
+  guideText: {
+    position: 'absolute',
+    bottom: -42,
+    left: -40,
+    right: -40,
+    textAlign: 'center',
+    color: '#fff',
+    fontSize: 11,
+    fontWeight: '600',
+    backgroundColor: 'rgba(15,23,42,0.85)',
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 6,
+  },
+  guideTextVerified: {color: '#10b981'},
+  progressBlock: {marginTop: 12},
+  progressHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 6,
+  },
+  progressLabel: {
+    fontSize: 11,
+    fontWeight: '700',
+    color: '#6b7280',
+    letterSpacing: 0.5,
+  },
+  progressPct: {fontSize: 11, fontWeight: '700', color: '#6366f1'},
+  progressPctVerified: {color: '#10b981'},
+  progressTrack: {
+    height: 6,
+    backgroundColor: '#f3f4f6',
+    borderRadius: 3,
+    overflow: 'hidden',
+  },
+  progressFill: {height: '100%', backgroundColor: '#6366f1'},
+  progressFillVerified: {backgroundColor: '#10b981'},
+  statusRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginTop: 12,
+    justifyContent: 'center',
+  },
+  statusText: {fontSize: 13, color: '#22c55e', fontWeight: '600'},
+  errorText: {
+    fontSize: 13,
+    color: '#ef4444',
+    textAlign: 'center',
+    marginTop: 12,
+  },
+  actions: {flexDirection: 'row', gap: 10, marginTop: 14},
+  cancelBtn: {
+    flex: 1,
+    paddingVertical: 12,
+    borderRadius: 10,
+    backgroundColor: '#f3f4f6',
+    alignItems: 'center',
+  },
+  cancelBtnText: {color: '#111', fontWeight: '600'},
+  captureBtn: {
+    flex: 1,
+    paddingVertical: 12,
+    borderRadius: 10,
+    backgroundColor: '#4f46e5',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 44,
+  },
+  captureDisabled: {opacity: 0.5},
+  captureBtnText: {color: '#fff', fontWeight: '700'},
+});