@kernaq/verify-react-native 2.0.0 → 2.0.2

package/src/steps/LivenessStep.tsx

@@ -1,4 +1,9 @@
-import React, { useState, useEffect, useRef } from 'react'
+/**
+ * LivenessStep — randomised action challenges shown as an overlay on the camera feed.
+ * Tasks: blink twice, turn left, turn right, nod, open mouth.
+ * Instruction is overlaid at the bottom of the viewport (mirrors web v2).
+ */
+import React, { useState, useEffect, useRef, useMemo } from 'react'
 import {
   View,
   Text,
@@ -7,114 +12,216 @@ import {
   ActivityIndicator,
   Animated,
 } from 'react-native'
-import { Camera } from 'react-native-vision-camera'
+import { Camera, useCameraDevice } from 'react-native-vision-camera'
 import { useCamera } from '../hooks/useCamera'
 import type { ResolvedTheme } from '../theme'
-import type { VerifyLocale } from '../types'
+import type { VerifyLocale, LivenessTask } from '../types'
+
+interface TaskDef {
+  id:       LivenessTask
+  label:    string
+  duration: number
+}
+
+const TASK_POOL: TaskDef[] = [
+  { id: 'blink',       label: 'Blink twice',         duration: 3000 },
+  { id: 'turn-left',   label: 'Turn your head left',  duration: 3000 },
+  { id: 'turn-right',  label: 'Turn your head right', duration: 3000 },
+  { id: 'nod',         label: 'Nod your head',        duration: 3000 },
+  { id: 'open-mouth',  label: 'Open your mouth',      duration: 3000 },
+]
+
+function shuffle<T>(arr: T[]): T[] {
+  const a = [...arr]
+  for (let i = a.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1))
+    ;[a[i], a[j]] = [a[j]!, a[i]!]
+  }
+  return a
+}
 
 interface Props {
-  theme: ResolvedTheme
-  locale: VerifyLocale
-  duration: number       // ms
-  onCapture: (uri: string) => void
-  onBack: () => void
+  theme:         ResolvedTheme
+  locale:        VerifyLocale
+  duration:      number
+  taskCount?:    number
+  onCapture:     (uri: string) => void
 }
 
-export function LivenessStep({ theme, locale, duration, onCapture, onBack }: Props) {
-  const { cameraRef, device, startRecording, stopRecording } = useCamera('front')
-  const [recording, setRecording] = useState(false)
-  const [countdown, setCountdown] = useState(Math.ceil(duration / 1000))
-  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
-  const pulseAnim = useRef(new Animated.Value(1)).current
-  const s = styles(theme)
+export function LivenessStep({ theme, locale, duration, taskCount = 2, onCapture }: Props) {
+  const { cameraRef, startRecording, stopRecording } = useCamera('front')
+  const device = useCameraDevice('front')
+
+  const tasks = useMemo(() => shuffle(TASK_POOL).slice(0, Math.min(taskCount, TASK_POOL.length)), [taskCount])
 
-  // Pulse animation for recording indicator
+  const [taskIdx,    setTaskIdx]    = useState(0)
+  const [started,    setStarted]    = useState(false)   // task in progress
+  const [taskDone,   setTaskDone]   = useState(0)       // completed tasks count
+  const [progress,   setProgress]   = useState(0)       // 0–100 for current task bar
+  const [complete,   setComplete]   = useState(false)
+  const [recording,  setRecording]  = useState(false)
+
+  // Keep a ref in sync with taskIdx so setTimeout/setInterval closures always
+  // read the latest value and don't stall on a stale snapshot.
+  const taskIdxRef = useRef(0)
+  const setTaskIdxSynced = (n: number) => {
+    taskIdxRef.current = n
+    setTaskIdx(n)
+  }
+
+  const progressTimer = useRef<ReturnType<typeof setInterval> | null>(null)
+  const taskTimer     = useRef<ReturnType<typeof setTimeout>  | null>(null)
+  const pulseAnim     = useRef(new Animated.Value(1)).current
+
+  // Pulse REC dot
   useEffect(() => {
     if (recording) {
       Animated.loop(
         Animated.sequence([
-          Animated.timing(pulseAnim, { toValue: 0.3, duration: 600, useNativeDriver: true }),
-          Animated.timing(pulseAnim, { toValue: 1, duration: 600, useNativeDriver: true }),
+          Animated.timing(pulseAnim, { toValue: 0.2, duration: 600, useNativeDriver: true }),
+          Animated.timing(pulseAnim, { toValue: 1,   duration: 600, useNativeDriver: true }),
         ])
       ).start()
     } else {
+      pulseAnim.stopAnimation()
       pulseAnim.setValue(1)
     }
   }, [recording, pulseAnim])
 
-  const handleStart = () => {
-    if (!cameraRef.current) return
-    setRecording(true)
-    setCountdown(Math.ceil(duration / 1000))
-
-    startRecording(
-      (video) => {
-        setRecording(false)
-        onCapture(video.uri)
-      },
-      () => setRecording(false)
-    )
-
-    // Countdown tick
-    let remaining = duration / 1000
-    timerRef.current = setInterval(() => {
-      remaining -= 0.1
-      setCountdown(Math.max(0, Math.ceil(remaining)))
-      if (remaining <= 0) {
-        if (timerRef.current) clearInterval(timerRef.current)
-        stopRecording()
+  const startTask = () => {
+    if (!recording) {
+      startRecording(
+        (video: import('../hooks/useCamera').VideoResult) => { onCapture(video.uri) },
+        () => {}
+      )
+      setRecording(true)
+    }
+
+    const task = tasks[taskIdxRef.current]
+    if (!task) return
+    setStarted(true)
+    setProgress(0)
+
+    const start = Date.now()
+    progressTimer.current = setInterval(() => {
+      const elapsed = Date.now() - start
+      const pct = Math.min(100, (elapsed / task.duration) * 100)
+      setProgress(pct)
+      if (elapsed >= task.duration) {
+        clearInterval(progressTimer.current!)
+        progressTimer.current = null
+        nextTask()
       }
-    }, 100)
+    }, 80)
+  }
+
+  const nextTask = () => {
+    const next = taskIdxRef.current + 1
+    setTaskDone((prev: number) => prev + 1)
+    if (next >= tasks.length) {
+      finishLiveness()
+      return
+    }
+    setTaskIdxSynced(next)
+    setStarted(false)
+    setProgress(0)
+    // Use the ref-based startTask via the timer so it reads the fresh taskIdx
+    taskTimer.current = setTimeout(() => startTask(), 500)
+  }
+
+  const finishLiveness = () => {
+    setComplete(true)
+    taskTimer.current = setTimeout(() => {
+      stopRecording()
+    }, 1000)
   }
 
   useEffect(() => {
     return () => {
-      if (timerRef.current) clearInterval(timerRef.current)
+      if (progressTimer.current) clearInterval(progressTimer.current)
+      if (taskTimer.current)     clearTimeout(taskTimer.current)
     }
   }, [])
 
   if (!device) return <ActivityIndicator color={theme.accent} style={{ margin: 40 }} />
 
+  const currentTask = tasks[taskIdx]
+  const s = styles(theme)
+
   return (
     <View style={s.container}>
-      <Text style={s.title}>{locale.liveness_title}</Text>
-      <Text style={s.subtitle}>
-        {recording ? locale.liveness_recording : locale.liveness_instruction}
-      </Text>
+      <View style={s.heading}>
+        <Text style={s.title}>{complete ? locale.liveness_complete : locale.liveness_title}</Text>
+        {!complete && <Text style={s.subtitle}>{locale.liveness_ready}</Text>}
+      </View>
 
+      {/* Task progress dots */}
+      {!complete && (
+        <View style={s.taskDots}>
+          {tasks.map((_: TaskDef, i: number) => (
+            <View
+              key={i}
+              style={[
+                s.dot,
+                i < taskDone  && s.dotDone,
+                i === taskIdx && s.dotActive,
+              ]}
+            />
+          ))}
+        </View>
+      )}
+
+      {/* Camera with in-viewport overlay */}
       <View style={s.viewport}>
         <Camera
           ref={cameraRef}
           style={StyleSheet.absoluteFill}
           device={device}
-          isActive={true}
-          video={true}
-          audio={true}
+          isActive
+          video
+          audio={false}
         />
+
         <View style={s.ovalGuide} pointerEvents="none" />
 
+        {/* Recording badge */}
         {recording && (
-          <>
-            <View style={s.recBadge}>
-              <Animated.View style={[s.recDot, { opacity: pulseAnim }]} />
-              <Text style={s.recText}>REC</Text>
+          <View style={s.recBadge}>
+            <Animated.View style={[s.recDot, { opacity: pulseAnim }]} />
+            <Text style={s.recText}>REC</Text>
+          </View>
+        )}
+
+        {/* Instruction overlay — always visible on video */}
+        {currentTask && !complete && (
+          <View style={s.overlay}>
+            <View style={s.overlayPill}>
+              <Text style={s.overlayNum}>{taskIdx + 1}/{tasks.length}</Text>
+              <Text style={s.overlayLabel}>{currentTask.label}</Text>
             </View>
-            <View style={s.countdownBadge}>
-              <Text style={s.countdownText}>{countdown}</Text>
+            {started && (
+              <View style={s.barWrap}>
+                <View style={[s.barFill, { width: `${progress}%` }]} />
+              </View>
+            )}
+          </View>
+        )}
+
+        {complete && (
+          <View style={s.overlay}>
+            <View style={s.overlayPill}>
+              <Text style={s.overlayLabel}>{locale.liveness_complete}</Text>
             </View>
-          </>
+          </View>
         )}
       </View>
 
-      {!recording && (
-        <>
-          <TouchableOpacity style={s.btnPrimary} onPress={handleStart} activeOpacity={0.85}>
-            <Text style={s.btnText}>{locale.liveness_start_btn}</Text>
-          </TouchableOpacity>
-          <TouchableOpacity style={s.btnSecondary} onPress={onBack} activeOpacity={0.75}>
-            <Text style={s.btnSecondaryText}>{locale.selfie_retake_btn}</Text>
-          </TouchableOpacity>
-        </>
+      {/* Begin button — only shown before first task starts */}
+      {!started && !complete && currentTask && taskDone === 0 && (
+        <TouchableOpacity style={s.btn} onPress={startTask} activeOpacity={0.85}>
+          <Text style={s.btnText}>Begin</Text>
+          <Text style={s.btnArrow}> →</Text>
+        </TouchableOpacity>
       )}
     </View>
   )
@@ -122,76 +229,69 @@ export function LivenessStep({ theme, locale, duration, onCapture, onBack }: Pro
 
 const styles = (t: ResolvedTheme) =>
   StyleSheet.create({
-    container: { padding: 24 },
-    title: { fontSize: 20, fontWeight: '700', color: t.text, marginBottom: 8 },
-    subtitle: { fontSize: 14, color: t.subtext, lineHeight: 20, marginBottom: 16 },
+    container: { flex: 1, padding: 20, gap: 12 },
+    heading:   { gap: 4, alignItems: 'center' },
+    title: {
+      fontSize: 20, fontWeight: '700', color: t.text,
+      textAlign: 'center', letterSpacing: -0.3,
+    },
+    subtitle: {
+      fontSize: 13, color: t.subtext, lineHeight: 19, textAlign: 'center',
+    },
+    taskDots: { flexDirection: 'row', gap: 6 },
+    dot: {
+      flex: 1, height: 2.5, borderRadius: 999, backgroundColor: t.border,
+    },
+    dotDone:   { backgroundColor: t.accent, opacity: 0.35 },
+    dotActive: { backgroundColor: t.accent },
     viewport: {
-      width: '100%',
-      aspectRatio: 3 / 4,
-      borderRadius: t.radius,
-      overflow: 'hidden',
-      backgroundColor: '#000',
-      marginBottom: 16,
-      alignSelf: 'center',
-      maxWidth: 280,
-      position: 'relative',
+      flex: 1, borderRadius: t.radius - 4, overflow: 'hidden',
+      backgroundColor: '#000', position: 'relative',
     },
     ovalGuide: {
-      position: 'absolute',
-      top: '8%',
-      left: '12%',
-      right: '12%',
-      bottom: '8%',
-      borderWidth: 2,
-      borderColor: 'rgba(255,255,255,0.7)',
-      borderRadius: 999,
+      position: 'absolute', left: '21%', right: '21%', top: '6%', bottom: '6%',
+      borderWidth: 2, borderColor: 'rgba(255,255,255,0.75)', borderRadius: 999,
     },
     recBadge: {
-      position: 'absolute',
-      top: 10,
-      left: 10,
-      flexDirection: 'row',
-      alignItems: 'center',
-      backgroundColor: 'rgba(220,38,38,0.85)',
-      borderRadius: 999,
-      paddingHorizontal: 10,
-      paddingVertical: 4,
-      gap: 6,
+      position: 'absolute', top: 10, left: 10,
+      flexDirection: 'row', alignItems: 'center', gap: 5,
+      backgroundColor: 'rgba(0,0,0,0.65)',
+      borderWidth: 1, borderColor: 'rgba(239,68,68,0.5)',
+      borderRadius: 5, paddingHorizontal: 8, paddingVertical: 4,
     },
     recDot: {
-      width: 8,
-      height: 8,
-      borderRadius: 4,
-      backgroundColor: '#fff',
+      width: 7, height: 7, borderRadius: 3.5, backgroundColor: '#ef4444',
+    },
+    recText: { color: '#ef4444', fontSize: 11, fontWeight: '700', letterSpacing: 0.5 },
+    overlay: {
+      position: 'absolute', bottom: 0, left: 0, right: 0,
+      paddingHorizontal: 12, paddingTop: 10, paddingBottom: 12,
+      gap: 8,
+      backgroundColor: 'transparent',
+      // Gradient-like: darker at bottom via background trick
+    },
+    overlayPill: {
+      flexDirection: 'row', alignItems: 'center', gap: 8,
+    },
+    overlayNum: {
+      fontSize: 11, fontWeight: '700', color: 'rgba(255,255,255,0.55)',
+      textTransform: 'uppercase', letterSpacing: 0.5,
+    },
+    overlayLabel: {
+      fontSize: 15, fontWeight: '700', color: '#fff',
     },
-    recText: { color: '#fff', fontSize: 12, fontWeight: '700' },
-    countdownBadge: {
-      position: 'absolute',
-      bottom: 12,
-      alignSelf: 'center',
-      width: 44,
-      height: 44,
-      borderRadius: 22,
-      backgroundColor: 'rgba(0,0,0,0.5)',
-      alignItems: 'center',
-      justifyContent: 'center',
+    barWrap: {
+      height: 3, backgroundColor: 'rgba(255,255,255,0.2)',
+      borderRadius: 999, overflow: 'hidden',
     },
-    countdownText: { color: '#fff', fontSize: 18, fontWeight: '700' },
-    btnPrimary: {
-      backgroundColor: t.accent,
-      borderRadius: t.radius,
-      paddingVertical: 14,
-      alignItems: 'center',
-      marginBottom: 10,
+    barFill: {
+      height: '100%', backgroundColor: '#fff', borderRadius: 999,
     },
-    btnSecondary: {
-      backgroundColor: t.card,
-      borderRadius: t.radius,
-      paddingVertical: 14,
-      alignItems: 'center',
-      borderWidth: 1,
-      borderColor: t.border,
+    btn: {
+      backgroundColor: t.accent, borderRadius: t.radius - 4,
+      paddingVertical: 12, flexDirection: 'row',
+      alignItems: 'center', justifyContent: 'center',
     },
-    btnText: { color: '#fff', fontSize: 15, fontWeight: '600' },
-    btnSecondaryText: { color: t.text, fontSize: 15, fontWeight: '600' },
+    btnText: { color: t.accentInv, fontSize: 14, fontWeight: '600' },
+    btnArrow: { color: t.accentInv, fontSize: 14, fontWeight: '600' },
   })

package/src/steps/ProcessingStep.tsx

@@ -1,37 +1,20 @@
-import React, { useEffect, useRef } from 'react'
-import { View, Text, StyleSheet, Animated } from 'react-native'
+import React from 'react'
+import { View, Text, ActivityIndicator, StyleSheet } from 'react-native'
 import type { ResolvedTheme } from '../theme'
 import type { VerifyLocale } from '../types'
 
 interface Props {
-  theme: ResolvedTheme
+  theme:  ResolvedTheme
   locale: VerifyLocale
 }
 
 export function ProcessingStep({ theme, locale }: Props) {
-  const spinAnim = useRef(new Animated.Value(0)).current
   const s = styles(theme)
-
-  useEffect(() => {
-    Animated.loop(
-      Animated.timing(spinAnim, {
-        toValue: 1,
-        duration: 800,
-        useNativeDriver: true,
-      })
-    ).start()
-  }, [spinAnim])
-
-  const spin = spinAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
-  })
-
   return (
     <View style={s.container}>
-      <Animated.View style={[s.spinner, { transform: [{ rotate: spin }] }]} />
+      <ActivityIndicator color={theme.accent} size="large" />
       <Text style={s.title}>{locale.processing_title}</Text>
-      <Text style={s.subtitle}>{locale.processing_subtitle}</Text>
+      <Text style={s.subtitle}>This usually takes under 10 seconds.</Text>
     </View>
   )
 }
@@ -39,27 +22,20 @@ export function ProcessingStep({ theme, locale }: Props) {
 const styles = (t: ResolvedTheme) =>
   StyleSheet.create({
     container: {
-      padding: 48,
+      flex: 1,
       alignItems: 'center',
+      justifyContent: 'center',
       gap: 16,
-    },
-    spinner: {
-      width: 52,
-      height: 52,
-      borderRadius: 26,
-      borderWidth: 4,
-      borderColor: t.border,
-      borderTopColor: t.accent,
-      marginBottom: 8,
+      padding: 32,
     },
     title: {
-      fontSize: 18,
+      fontSize: 16,
       fontWeight: '700',
       color: t.text,
       textAlign: 'center',
     },
     subtitle: {
-      fontSize: 14,
+      fontSize: 13,
       color: t.subtext,
       textAlign: 'center',
     },