@trustchex/react-native-sdk 1.409.0 → 1.464.0

package/lib/module/Screens/Dynamic/VerbalConsentScreen.js

@@ -0,0 +1,1079 @@
+"use strict";
+
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Easing, Platform, SafeAreaView, StatusBar, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import LottieView from 'lottie-react-native';
+import RNFS from 'react-native-fs';
+import Video from 'react-native-video';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTranslation } from 'react-i18next';
+import FaceCamera from "../../Shared/Components/FaceCamera.js";
+import NativeCircularProgress from "../../Shared/Components/NativeCircularProgress.js";
+import StyledButton from "../../Shared/Components/StyledButton.js";
+import NavigationManager from "../../Shared/Components/NavigationManager.js";
+import AppContext from "../../Shared/Contexts/AppContext.js";
+import { useStatusBarWhiteBackground } from "../../Shared/Libs/status-bar.utils.js";
+import { trackError, trackVerificationComplete, trackVerificationStart, useScreenTracking } from "../../Shared/Libs/analytics.utils.js";
+import { useKeepAwake } from "../../Shared/Libs/native-keep-awake.utils.js";
+import { speak, stopSpeaking } from "../../Shared/Libs/tts.utils.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const PREVIEW_EDGE_OFFSET = 10;
+const PREVIEW_SIZE_RATIO = 0.95;
+const TITLE_ROW_MIN_HEIGHT = 52;
+const INSTRUCTION_ROW_MIN_HEIGHT = 80;
+const ACTIONS_RESERVED_HEIGHT_IDLE = 72;
+const ALIGNMENT_CONFIRM_FRAMES = 3;
+const ALIGNMENT_LOST_FRAMES = 4;
+const CONSENT_LINE_HEIGHT = 44;
+const CONSENT_CIRCLE_INSET = 2;
+const AUTO_SCROLL_MIN_INTERVAL_MS = 2200;
+const HORIZONTAL_SCROLL_START_DELAY_MS = 5000;
+const AUTO_STOP_SPEECH_BUFFER_MS = 1000;
+const TARGET_WORDS_PER_SECOND = 1;
+// Constant scroll speed (pixels per second) so rate is identical regardless of text length.
+const SCROLL_PIXELS_PER_SECOND = 80;
+const VerbalConsentScreen = () => {
+  useKeepAwake();
+  useScreenTracking('verbal_consent_video');
+  useStatusBarWhiteBackground();
+  const appContext = useContext(AppContext);
+  const insets = useSafeAreaInsets();
+  const {
+    width: screenWidth
+  } = useWindowDimensions();
+  const {
+    t
+  } = useTranslation();
+  const cameraRef = useRef(null);
+  const navigationManagerRef = useRef(null);
+  const [hasGuideShown, setHasGuideShown] = useState(false);
+  const [isRecording, setIsRecording] = useState(false);
+  const [recordingPath, setRecordingPath] = useState('');
+  const [recordedSeconds, setRecordedSeconds] = useState(0);
+  const [isFaceInsideCircle, setIsFaceInsideCircle] = useState(false);
+  const [multipleFacesDetected, setMultipleFacesDetected] = useState(false);
+  const [cameraLayout, setCameraLayout] = useState({
+    width: 0,
+    height: 0
+  });
+  const [currentLineIndex, setCurrentLineIndex] = useState(0);
+  const [isStoppingRecording, setIsStoppingRecording] = useState(false);
+  const [activeLineViewportWidth, setActiveLineViewportWidth] = useState(0);
+  const [measuredTextWidth, setMeasuredTextWidth] = useState(0);
+  const [hasTextScrollStarted, setHasTextScrollStarted] = useState(false);
+  const [isAutoScrollPausedByTouch, setIsAutoScrollPausedByTouch] = useState(false);
+  const autoStartTriggeredRef = useRef(false);
+  const intervalRef = useRef(null);
+  const activeLineTranslateX = useRef(new Animated.Value(0)).current;
+  const recordingDotOpacity = useRef(new Animated.Value(1)).current;
+  const activeLineTranslateXRef = useRef(0);
+  const [scrollProgressPercent, setScrollProgressPercent] = useState(0);
+  const autoStoppingRef = useRef(false);
+  const stopReasonRef = useRef(null);
+  const stopInProgressRef = useRef(false);
+  const autoStopTimeoutRef = useRef(null);
+  const isFaceInsideCircleRef = useRef(false);
+  const insideFrameStreakRef = useRef(0);
+  const outsideFrameStreakRef = useRef(0);
+  const scrollNeedsInitRef = useRef(true);
+  const initialDelayAppliedRef = useRef(false);
+  const workflowConsentText = appContext.currentWorkflowStep?.data?.verbalConsentText?.trim() || '';
+  const workflowConsentTitle = appContext.currentWorkflowStep?.data?.verbalConsentTitle?.trim() || '';
+  const consentText = workflowConsentText || t('verbalConsentVideoScreen.defaultConsentText');
+  const consentTitle = workflowConsentTitle || t('verbalConsentVideoScreen.title');
+  const normalizedConsentText = consentText.replace(/\s+/g, ' ').trim();
+
+  // Keep the full consent text as a single horizontally scrolling line.
+  const consentLines = useMemo(() => {
+    return normalizedConsentText ? [normalizedConsentText] : [];
+  }, [normalizedConsentText]);
+  const consentWords = useMemo(() => normalizedConsentText.split(' ').filter(Boolean), [normalizedConsentText]);
+  const consentWordCount = Math.max(1, consentWords.length);
+  // Conservative read pace to avoid suggesting stop too early.
+  const estimatedReadSeconds = Math.max(6, Math.ceil(consentWordCount / TARGET_WORDS_PER_SECOND));
+  const autoScrollIntervalMs = Math.max(AUTO_SCROLL_MIN_INTERVAL_MS, Math.round(estimatedReadSeconds * 1000 / Math.max(1, consentLines.length)));
+  const currentLineText = consentLines[currentLineIndex] || '';
+  // Use measured width as soon as available to keep visual text end and
+  // progress completion tightly aligned.
+  const estimatedLineContentWidth = measuredTextWidth > 0 ? measuredTextWidth : currentLineText.length * 24;
+  const isConsentComplete = scrollProgressPercent >= 99;
+  const currentInstructionKey = (() => {
+    if (multipleFacesDetected) {
+      return 'livenessDetectionScreen.multipleFacesDetected';
+    }
+    if (!isFaceInsideCircle) {
+      return 'livenessDetectionScreen.placeFaceInsideCircle';
+    }
+    return 'verbalConsentVideoScreen.readNowPrompt';
+  })();
+
+  // Circle stage uses relative layout: title -> circle -> instruction.
+  const containerWidth = cameraLayout.width || screenWidth;
+  const previewSize = containerWidth * PREVIEW_SIZE_RATIO;
+  const titleTopPadding = Math.max(insets.top, 8);
+  const previewRect = {
+    minX: (containerWidth - previewSize) / 2,
+    minY: 0,
+    width: previewSize,
+    height: previewSize
+  };
+  const circleStrokeColor = 'rgba(255, 255, 255, 0.5)';
+  const circleDiameter = previewRect.width - CONSENT_CIRCLE_INSET * 2;
+  const circleLeft = previewRect.minX + CONSENT_CIRCLE_INSET;
+  useEffect(() => {
+    if (hasGuideShown) {
+      // Camera view uses dark background, keep status text readable.
+      StatusBar.setBarStyle('light-content', true);
+    } else {
+      // Guide screen uses white background.
+      StatusBar.setBarStyle('dark-content', true);
+      if (Platform.OS === 'android') {
+        StatusBar.setBackgroundColor('#ffffff', true);
+      }
+    }
+  }, [hasGuideShown]);
+  useEffect(() => {
+    if (isRecording) {
+      const pulse = Animated.loop(Animated.sequence([Animated.timing(recordingDotOpacity, {
+        toValue: 0.2,
+        duration: 600,
+        easing: Easing.inOut(Easing.ease),
+        useNativeDriver: true
+      }), Animated.timing(recordingDotOpacity, {
+        toValue: 1,
+        duration: 600,
+        easing: Easing.inOut(Easing.ease),
+        useNativeDriver: true
+      })]));
+      pulse.start();
+      return () => pulse.stop();
+    } else {
+      recordingDotOpacity.setValue(1);
+    }
+  }, [isRecording, recordingDotOpacity]);
+  const clearTimer = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+  const clearAutoStopTimer = useCallback(() => {
+    if (autoStopTimeoutRef.current) {
+      clearTimeout(autoStopTimeoutRef.current);
+      autoStopTimeoutRef.current = null;
+    }
+  }, []);
+  const handleStartRecording = useCallback(() => {
+    if (!cameraRef.current || isRecording || !isFaceInsideCircle || multipleFacesDetected) {
+      return;
+    }
+    setRecordingPath('');
+    setRecordedSeconds(0);
+    setCurrentLineIndex(0);
+    setIsAutoScrollPausedByTouch(false);
+    setHasTextScrollStarted(false);
+    setScrollProgressPercent(0);
+    clearAutoStopTimer();
+    stopReasonRef.current = null;
+    stopInProgressRef.current = false;
+    scrollNeedsInitRef.current = true;
+    initialDelayAppliedRef.current = false;
+    activeLineTranslateX.stopAnimation();
+    activeLineTranslateX.setValue(0);
+    activeLineTranslateXRef.current = 0;
+    trackVerificationStart('VERBAL_CONSENT');
+    cameraRef.current.startRecording({
+      onRecordingFinished: video => {
+        stopInProgressRef.current = false;
+        setIsStoppingRecording(false);
+        const stopReason = stopReasonRef.current;
+        stopReasonRef.current = null;
+        if (stopReason === 'manual') {
+          setRecordingPath(video.path);
+        } else {
+          // Recording was discarded - reset state for retry
+          setRecordingPath('');
+          setRecordedSeconds(0);
+          setCurrentLineIndex(0);
+          setHasTextScrollStarted(false);
+          setScrollProgressPercent(0);
+          scrollNeedsInitRef.current = true;
+          initialDelayAppliedRef.current = false;
+          autoStartTriggeredRef.current = false;
+          if (video.path) {
+            RNFS.unlink(video.path).catch(() => {
+              // Best-effort cleanup for canceled recordings.
+            });
+          }
+        }
+        setIsRecording(false);
+        clearTimer();
+      },
+      onRecordingError: error => {
+        stopInProgressRef.current = false;
+        stopReasonRef.current = null;
+        setIsRecording(false);
+        setIsStoppingRecording(false);
+        setCurrentLineIndex(0);
+        setHasTextScrollStarted(false);
+        autoStartTriggeredRef.current = false;
+        clearTimer();
+        trackError('VERBAL_CONSENT_RECORDING_ERROR', error.error || t('verbalConsentVideoScreen.analytics.recordingFailed'), 'verbal_consent_video', 'medium', {
+          recoverable: true
+        });
+      }
+    });
+    setIsRecording(true);
+    clearTimer();
+    intervalRef.current = setInterval(() => {
+      setRecordedSeconds(prev => prev + 1);
+    }, 1000);
+  }, [isRecording, isFaceInsideCircle, multipleFacesDetected, clearAutoStopTimer, activeLineTranslateX, clearTimer, t]);
+  const updateStableAlignment = useCallback(isInsideCurrentFrame => {
+    if (isInsideCurrentFrame) {
+      insideFrameStreakRef.current += 1;
+      outsideFrameStreakRef.current = 0;
+      if (!isFaceInsideCircleRef.current && insideFrameStreakRef.current >= ALIGNMENT_CONFIRM_FRAMES) {
+        isFaceInsideCircleRef.current = true;
+        setIsFaceInsideCircle(true);
+      }
+      return;
+    }
+    outsideFrameStreakRef.current += 1;
+    insideFrameStreakRef.current = 0;
+    if (isFaceInsideCircleRef.current && outsideFrameStreakRef.current >= ALIGNMENT_LOST_FRAMES) {
+      isFaceInsideCircleRef.current = false;
+      setIsFaceInsideCircle(false);
+    }
+  }, []);
+  const onFacesDetected = useCallback((faces, _image, _isImageBright, frameWidth, frameHeight) => {
+    if (!faces.length) {
+      if (isRecording) {
+        if (stopReasonRef.current === 'manual') {
+          return;
+        }
+
+        // Requirement: stop recording as soon as no face is detected.
+        isFaceInsideCircleRef.current = false;
+        setIsFaceInsideCircle(false);
+        insideFrameStreakRef.current = 0;
+        outsideFrameStreakRef.current = ALIGNMENT_LOST_FRAMES;
+      } else {
+        updateStableAlignment(false);
+      }
+      setMultipleFacesDetected(false);
+      return;
+    }
+    const multipleFaces = faces.length > 1;
+    setMultipleFacesDetected(multipleFaces);
+    const face = faces[0];
+    // Camera uses FILL_CENTER / resizeAspectFill (cover): uniform scale filling
+    // the container, cropping overflow symmetrically. Map the on-screen circle
+    // into frame coordinates accounting for that crop.
+    const containerHeight = Math.max(1, cameraLayout.height || previewSize);
+    const coverScale = Math.max(containerWidth / frameWidth, containerHeight / frameHeight);
+    const offsetX = (frameWidth - containerWidth / coverScale) / 2;
+    const offsetY = (frameHeight - containerHeight / coverScale) / 2;
+    const previewRectInFrame = {
+      minX: previewRect.minX / coverScale + offsetX,
+      minY: previewRect.minY / coverScale + offsetY,
+      width: previewRect.width / coverScale,
+      height: previewRect.height / coverScale
+    };
+
+    // Check containment using face center + yaw-stable core radius.
+    // When the head turns, the bounding box grows wider but height stays constant,
+    // so min(width, height)/2 is a stable representative size.
+    const faceCenterX = face.bounds.x + face.bounds.width / 2;
+    const faceCenterY = face.bounds.y + face.bounds.height / 2;
+    const faceCoreRadius = Math.max(0, Math.min(face.bounds.width, face.bounds.height) / 2 - PREVIEW_EDGE_OFFSET / 2);
+    const circleCX = previewRectInFrame.minX + previewRectInFrame.width / 2;
+    const circleCY = previewRectInFrame.minY + previewRectInFrame.height / 2;
+    const circleR = previewRectInFrame.width / 2 - CONSENT_CIRCLE_INSET / coverScale;
+    const faceDx = faceCenterX - circleCX;
+    const faceDy = faceCenterY - circleCY;
+    const previewContainsFace = faceDx * faceDx + faceDy * faceDy <= (circleR - faceCoreRadius) * (circleR - faceCoreRadius);
+    if (isRecording) {
+      if (stopReasonRef.current === 'manual') {
+        return;
+      }
+      if (!previewContainsFace || multipleFaces) {
+        // During recording, cancel immediately when alignment is lost.
+        isFaceInsideCircleRef.current = false;
+        setIsFaceInsideCircle(false);
+        insideFrameStreakRef.current = 0;
+        outsideFrameStreakRef.current = ALIGNMENT_LOST_FRAMES;
+        return;
+      }
+      isFaceInsideCircleRef.current = true;
+      setIsFaceInsideCircle(true);
+      insideFrameStreakRef.current = ALIGNMENT_CONFIRM_FRAMES;
+      outsideFrameStreakRef.current = 0;
+      return;
+    }
+    updateStableAlignment(previewContainsFace && !multipleFaces);
+  }, [cameraLayout.height, containerWidth, previewRect.minX, previewRect.minY, previewRect.width, previewRect.height, previewSize, isRecording, updateStableAlignment]);
+  const onCameraContainerLayout = useCallback(event => {
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    setCameraLayout({
+      width,
+      height
+    });
+  }, []);
+  const handleStopRecording = useCallback(async (discard = false) => {
+    if (!cameraRef.current || !isRecording) {
+      return;
+    }
+    if (stopInProgressRef.current) {
+      // If stop is already in progress, allow manual button press to take precedence.
+      if (!discard) {
+        stopReasonRef.current = 'manual';
+      }
+      return;
+    }
+
+    // Set immediate visual feedback
+    if (!discard) {
+      setIsStoppingRecording(true);
+    }
+    stopReasonRef.current = discard ? 'discard' : 'manual';
+    stopInProgressRef.current = true;
+    await cameraRef.current.stopRecording();
+    // Do NOT setIsRecording(false) here — let onRecordingFinished handle it
+    // atomically together with setRecordingPath to avoid a flash of the
+    // start-recording UI between stop and preview.
+  }, [isRecording]);
+  const handleTryAgain = useCallback(() => {
+    clearTimer();
+    clearAutoStopTimer();
+    setIsRecording(false);
+    setRecordingPath('');
+    setRecordedSeconds(0);
+    setCurrentLineIndex(0);
+    setIsStoppingRecording(false);
+    setMultipleFacesDetected(false);
+    setIsFaceInsideCircle(false);
+    setScrollProgressPercent(0);
+    autoStartTriggeredRef.current = false;
+    stopReasonRef.current = null;
+    stopInProgressRef.current = false;
+    isFaceInsideCircleRef.current = false;
+    insideFrameStreakRef.current = 0;
+    outsideFrameStreakRef.current = 0;
+    scrollNeedsInitRef.current = true;
+    initialDelayAppliedRef.current = false;
+  }, [clearAutoStopTimer, clearTimer]);
+  const persistVerbalConsentData = useCallback(() => {
+    if (!recordingPath) {
+      return;
+    }
+    const existingVideos = appContext.identificationInfo.verbalConsentVideos || [];
+    appContext.identificationInfo.verbalConsentVideos = [...existingVideos, {
+      title: consentTitle,
+      text: consentText,
+      videoPath: recordingPath,
+      recordedSeconds
+    }];
+  }, [appContext.identificationInfo, consentText, consentTitle, recordedSeconds, recordingPath]);
+  const submitVerbalConsent = useCallback(() => {
+    if (!recordingPath) {
+      return;
+    }
+    persistVerbalConsentData();
+    trackVerificationComplete('VERBAL_CONSENT', true, 1);
+    navigationManagerRef.current?.navigateToNextStep();
+  }, [persistVerbalConsentData, recordingPath]);
+  const canSubmit = !!recordingPath && !isRecording;
+  const isPreviewAvailable = !!recordingPath && !isRecording;
+  // Show text as soon as face is inside circle so user can read what to say.
+  const shouldShowTextOverlay = isFaceInsideCircle && hasGuideShown;
+
+  // Auto-start recording when face is aligned
+  useEffect(() => {
+    if (!hasGuideShown) {
+      return;
+    }
+    if (isRecording || isPreviewAvailable || autoStartTriggeredRef.current) {
+      return;
+    }
+    if (isFaceInsideCircle && !multipleFacesDetected) {
+      autoStartTriggeredRef.current = true;
+      handleStartRecording();
+    }
+  }, [isFaceInsideCircle, isRecording, isPreviewAvailable, multipleFacesDetected, handleStartRecording, hasGuideShown]);
+  useEffect(() => {
+    if (!isRecording) {
+      autoStoppingRef.current = false;
+      return;
+    }
+    if (stopReasonRef.current === 'manual') {
+      return;
+    }
+    if (isFaceInsideCircle && !multipleFacesDetected) {
+      return;
+    }
+    if (autoStoppingRef.current) {
+      return;
+    }
+
+    // Immediately reset scroll and progress so the UI is clean before the
+    // async stopRecording resolves.
+    activeLineTranslateX.stopAnimation();
+    activeLineTranslateX.setValue(0);
+    activeLineTranslateXRef.current = 0;
+    scrollNeedsInitRef.current = true;
+    initialDelayAppliedRef.current = false;
+    setScrollProgressPercent(0);
+    clearAutoStopTimer();
+    stopReasonRef.current = 'discard';
+    autoStoppingRef.current = true;
+    handleStopRecording(true).finally(() => {
+      autoStoppingRef.current = false;
+    });
+  }, [activeLineTranslateX, clearAutoStopTimer, handleStopRecording, isFaceInsideCircle, isRecording, multipleFacesDetected]);
+  useEffect(() => {
+    const startX = Math.max(0, activeLineViewportWidth);
+    // Complete when the full text has moved out of view to the left.
+    const endX = -Math.max(1, estimatedLineContentWidth);
+    const totalDistance = Math.max(1, startX - endX);
+    const listenerId = activeLineTranslateX.addListener(({
+      value
+    }) => {
+      activeLineTranslateXRef.current = value;
+      // value goes from startX (offscreen right) to endX (offscreen left)
+      // traveled = startX - value, so 0 at start and totalDistance at end
+      const traveled = Math.max(0, startX - value);
+      const pct = Math.min(100, traveled / totalDistance * 100);
+      setScrollProgressPercent(pct);
+    });
+    return () => {
+      activeLineTranslateX.removeListener(listenerId);
+    };
+  }, [activeLineTranslateX, estimatedLineContentWidth, activeLineViewportWidth, isRecording]);
+  useEffect(() => {
+    if (!isRecording) {
+      setHasTextScrollStarted(false);
+    }
+  }, [isRecording]);
+  useEffect(() => {
+    if (!isRecording || activeLineViewportWidth <= 0) {
+      activeLineTranslateX.stopAnimation();
+      activeLineTranslateX.setValue(0);
+      activeLineTranslateXRef.current = 0;
+      scrollNeedsInitRef.current = true;
+      setHasTextScrollStarted(false);
+      return;
+    }
+    const contentWidth = Math.max(1, estimatedLineContentWidth);
+    if (isAutoScrollPausedByTouch) {
+      activeLineTranslateX.stopAnimation(value => {
+        activeLineTranslateXRef.current = value;
+      });
+      return;
+    }
+    const maxX = activeLineViewportWidth;
+    const minX = -contentWidth;
+
+    // First start after reset: position text at the right edge of the circle
+    if (scrollNeedsInitRef.current) {
+      scrollNeedsInitRef.current = false;
+      activeLineTranslateX.setValue(maxX);
+      activeLineTranslateXRef.current = maxX;
+    }
+    const clampedCurrentX = Math.max(minX, Math.min(maxX, activeLineTranslateXRef.current));
+    const remainingDistance = Math.abs(minX - clampedCurrentX);
+    if (remainingDistance <= 0.5) {
+      activeLineTranslateX.setValue(minX);
+      activeLineTranslateXRef.current = minX;
+      return;
+    }
+    const totalRange = maxX - minX;
+    const lineDurationMs = Math.max(3000, Math.round(totalRange / SCROLL_PIXELS_PER_SECOND * 1000));
+    const progressRatio = totalRange > 0 ? Math.min(1, (maxX - clampedCurrentX) / totalRange) : 0;
+    const remainingDurationMs = Math.max(500, Math.round(lineDurationMs * (1 - progressRatio)));
+    activeLineTranslateX.stopAnimation();
+    activeLineTranslateX.setValue(clampedCurrentX);
+    const shouldApplyDelay = !initialDelayAppliedRef.current && clampedCurrentX >= maxX - 1;
+    if (shouldApplyDelay) {
+      initialDelayAppliedRef.current = true;
+      // Show text only when animation is about to actually start moving
+      setTimeout(() => {
+        setHasTextScrollStarted(true);
+      }, HORIZONTAL_SCROLL_START_DELAY_MS);
+    } else {
+      // No delay, show immediately
+      setHasTextScrollStarted(true);
+    }
+    Animated.timing(activeLineTranslateX, {
+      toValue: minX,
+      duration: remainingDurationMs,
+      delay: shouldApplyDelay ? HORIZONTAL_SCROLL_START_DELAY_MS : 0,
+      easing: Easing.linear,
+      useNativeDriver: false
+    }).start(result => {
+      if (result.finished) {
+        setScrollProgressPercent(100);
+      }
+    });
+  }, [activeLineTranslateX, activeLineViewportWidth, currentLineIndex, currentLineText, estimatedLineContentWidth, isAutoScrollPausedByTouch, isRecording, shouldShowTextOverlay, consentLines]);
+  useEffect(() => {
+    if (!isRecording || !shouldShowTextOverlay || isAutoScrollPausedByTouch) {
+      return;
+    }
+    if (currentLineIndex >= consentLines.length - 1 || consentLines.length <= 1) {
+      return;
+    }
+    const intervalId = setInterval(() => {
+      setCurrentLineIndex(prev => {
+        if (prev >= consentLines.length - 1) {
+          return prev;
+        }
+        return prev + 1;
+      });
+    }, autoScrollIntervalMs);
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [autoScrollIntervalMs, consentLines.length, currentLineIndex, isAutoScrollPausedByTouch, isRecording, shouldShowTextOverlay]);
+  useEffect(() => {
+    if (!isRecording || consentLines.length === 0 || isStoppingRecording) {
+      clearAutoStopTimer();
+      return;
+    }
+    if (!isConsentComplete) {
+      clearAutoStopTimer();
+      return;
+    }
+    if (autoStopTimeoutRef.current || stopInProgressRef.current) {
+      return;
+    }
+
+    // Give a brief tail buffer so users can finish the final spoken word.
+    autoStopTimeoutRef.current = setTimeout(() => {
+      autoStopTimeoutRef.current = null;
+      handleStopRecording(false);
+    }, AUTO_STOP_SPEECH_BUFFER_MS);
+    return () => {
+      clearAutoStopTimer();
+    };
+  }, [clearAutoStopTimer, handleStopRecording, isConsentComplete, isRecording, isStoppingRecording, consentLines.length]);
+  useEffect(() => {
+    return () => {
+      clearAutoStopTimer();
+    };
+  }, [clearAutoStopTimer]);
+  useEffect(() => {
+    if (!hasGuideShown) {
+      return;
+    }
+    if (!appContext.currentWorkflowStep?.data?.voiceGuidanceActive) {
+      return;
+    }
+    if (!currentInstructionKey) {
+      return;
+    }
+    speak(t(currentInstructionKey));
+  }, [appContext.currentWorkflowStep?.data?.voiceGuidanceActive, currentInstructionKey, hasGuideShown, t]);
+  useEffect(() => {
+    return () => {
+      stopSpeaking().catch(() => {});
+    };
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [!hasGuideShown ? /*#__PURE__*/_jsxs(View, {
+      style: [styles.guide, {
+        paddingTop: insets.top,
+        paddingBottom: insets.bottom
+      }],
+      children: [/*#__PURE__*/_jsx(LottieView, {
+        source: require('../../Shared/Animations/recording.json'),
+        style: styles.guideAnimation,
+        loop: true,
+        autoPlay: true
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.guideHeader,
+        children: t('verbalConsentVideoScreen.guideHeader')
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.guidePoints,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.guideText,
+          children: t('verbalConsentVideoScreen.guideText')
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.guideText,
+          children: ["\u2022 ", t('verbalConsentVideoScreen.guidePoint1')]
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.guideText,
+          children: ["\u2022 ", t('verbalConsentVideoScreen.guidePoint2')]
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.guideText,
+          children: ["\u2022 ", t('verbalConsentVideoScreen.guidePoint3')]
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.guideText,
+          children: ["\u2022 ", t('verbalConsentVideoScreen.guidePoint4')]
+        })]
+      }), /*#__PURE__*/_jsx(StyledButton, {
+        mode: "contained",
+        onPress: () => {
+          setHasGuideShown(true);
+        },
+        children: t('general.letsGo')
+      })]
+    }) : /*#__PURE__*/_jsxs(SafeAreaView, {
+      style: styles.container,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.cameraContainer, isPreviewAvailable ? styles.cameraContainerPreview : styles.cameraContainerPreview],
+        children: isPreviewAvailable ? /*#__PURE__*/_jsxs(View, {
+          style: [styles.previewContainer, {
+            paddingTop: Math.max(insets.top, 12),
+            paddingLeft: 16 + insets.left,
+            paddingRight: 16 + insets.right,
+            paddingBottom: Math.max(insets.bottom, 12)
+          }],
+          children: [/*#__PURE__*/_jsx(Video, {
+            source: {
+              uri: recordingPath
+            },
+            resizeMode: "contain",
+            style: styles.previewVideo,
+            controls: true,
+            muted: false
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.previewActionsContainer,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.previewActionHint,
+              children: t('verbalConsentVideoScreen.previewTitle')
+            }), /*#__PURE__*/_jsx(StyledButton, {
+              mode: "contained",
+              onPress: handleTryAgain,
+              children: t('verbalConsentVideoScreen.tryAgain')
+            }), /*#__PURE__*/_jsx(StyledButton, {
+              mode: "outlined",
+              onPress: submitVerbalConsent,
+              disabled: !canSubmit,
+              children: t('verbalConsentVideoScreen.submit')
+            })]
+          })]
+        }) : /*#__PURE__*/_jsx(View, {
+          style: [styles.captureSection, {
+            paddingLeft: insets.left,
+            paddingRight: insets.right
+          }],
+          onTouchStart: () => {
+            if (isRecording && shouldShowTextOverlay && !isAutoScrollPausedByTouch) {
+              setIsAutoScrollPausedByTouch(true);
+            }
+          },
+          onTouchEnd: () => {
+            if (isRecording && shouldShowTextOverlay && isAutoScrollPausedByTouch) {
+              setIsAutoScrollPausedByTouch(false);
+            }
+          },
+          onTouchCancel: () => {
+            if (isRecording && shouldShowTextOverlay && isAutoScrollPausedByTouch) {
+              setIsAutoScrollPausedByTouch(false);
+            }
+          },
+          children: /*#__PURE__*/_jsxs(View, {
+            style: styles.groupedContentContainer,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: [styles.titleRow, {
+                paddingTop: titleTopPadding
+              }],
+              children: isRecording ? /*#__PURE__*/_jsxs(View, {
+                style: styles.recordingIndicator,
+                children: [/*#__PURE__*/_jsx(Animated.View, {
+                  style: [styles.recordingDot, {
+                    opacity: recordingDotOpacity
+                  }]
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: styles.recordingText,
+                  children: "REC"
+                })]
+              }) : /*#__PURE__*/_jsx(Text, {
+                style: styles.topTitleText,
+                numberOfLines: 2,
+                ellipsizeMode: "tail",
+                children: consentTitle
+              })
+            }), /*#__PURE__*/_jsxs(View, {
+              style: [styles.circleStage, {
+                height: previewSize
+              }],
+              onLayout: onCameraContainerLayout,
+              children: [/*#__PURE__*/_jsx(View, {
+                style: [styles.cameraCircle, {
+                  width: circleDiameter,
+                  height: circleDiameter,
+                  left: circleLeft,
+                  top: CONSENT_CIRCLE_INSET,
+                  borderRadius: circleDiameter / 2
+                }],
+                children: /*#__PURE__*/_jsx(FaceCamera, {
+                  onCameraInitialized: camera => {
+                    cameraRef.current = camera;
+                  },
+                  onFacesDetected: onFacesDetected
+                })
+              }), /*#__PURE__*/_jsx(NativeCircularProgress, {
+                style: [styles.circleProgress, {
+                  left: previewRect.minX
+                }],
+                size: previewRect.width,
+                width: 8,
+                backgroundWidth: 8,
+                fill: isRecording ? scrollProgressPercent : 0,
+                tintColor: isRecording ? appContext.branding.primaryColor : 'transparent',
+                backgroundColor: shouldShowTextOverlay ? 'rgba(255, 255, 255, 0.3)' : circleStrokeColor
+              }), /*#__PURE__*/_jsx(View, {
+                style: [styles.textSingleLineContainer, {
+                  width: circleDiameter,
+                  height: circleDiameter,
+                  left: circleLeft,
+                  top: CONSENT_CIRCLE_INSET,
+                  borderRadius: circleDiameter / 2
+                }, (!shouldShowTextOverlay || !hasTextScrollStarted) && styles.hiddenOffscreen],
+                children: /*#__PURE__*/_jsx(View, {
+                  style: styles.textSingleLineInner,
+                  onLayout: event => {
+                    setActiveLineViewportWidth(event.nativeEvent.layout.width);
+                  },
+                  children: /*#__PURE__*/_jsx(View, {
+                    style: [styles.textLineContainer, styles.textLineHighlighted],
+                    children: /*#__PURE__*/_jsx(View, {
+                      style: styles.activeLineViewport,
+                      children: /*#__PURE__*/_jsx(Animated.View, {
+                        style: [styles.activeLineTrack, {
+                          transform: [{
+                            translateX: activeLineTranslateX
+                          }]
+                        }],
+                        children: /*#__PURE__*/_jsx(Text, {
+                          style: [styles.consentTextLine, styles.consentTextLineActive],
+                          numberOfLines: 1,
+                          children: consentLines[currentLineIndex] || ''
+                        })
+                      })
+                    })
+                  })
+                })
+              })]
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.instructionRow,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.circleInstructionText, !currentInstructionKey && styles.hidden],
+                numberOfLines: 2,
+                ellipsizeMode: "tail",
+                children: currentInstructionKey ? t(currentInstructionKey) : ' '
+              })
+            })]
+          })
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.consentTextLine, styles.consentTextLineActive, styles.offscreenMeasure],
+        numberOfLines: 1,
+        onTextLayout: e => {
+          const lineWidth = e.nativeEvent.lines[0]?.width ?? 0;
+          if (lineWidth > 0) {
+            setMeasuredTextWidth(Math.ceil(lineWidth));
+          }
+        },
+        children: consentLines[currentLineIndex] || ''
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.footer, {
+        bottom: insets.bottom
+      }],
+      children: /*#__PURE__*/_jsx(NavigationManager, {
+        ref: navigationManagerRef
+      })
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#ffffff'
+  },
+  footer: {
+    position: 'absolute',
+    flex: 0,
+    bottom: 0,
+    width: '100%',
+    zIndex: 1
+  },
+  guide: {
+    flex: 1,
+    display: 'flex',
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+    gap: 10,
+    backgroundColor: 'white'
+  },
+  guideAnimation: {
+    width: 250,
+    height: 250,
+    alignSelf: 'center'
+  },
+  guideHeader: {
+    color: 'black',
+    fontSize: 18,
+    textAlign: 'center',
+    fontWeight: 'bold'
+  },
+  guidePoints: {
+    display: 'flex',
+    gap: 10,
+    padding: 10
+  },
+  guideText: {
+    color: 'black',
+    fontSize: 14
+  },
+  cameraContainer: {
+    width: '100%'
+  },
+  cameraContainerPreview: {
+    flex: 1
+  },
+  captureSection: {
+    flex: 1,
+    overflow: 'hidden',
+    backgroundColor: '#ffffff',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  groupedContentContainer: {
+    width: '100%',
+    alignItems: 'center'
+  },
+  titleRow: {
+    minHeight: TITLE_ROW_MIN_HEIGHT,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    marginBottom: 16
+  },
+  recordingIndicator: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    paddingVertical: 6,
+    paddingHorizontal: 14,
+    borderRadius: 20
+  },
+  recordingDot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: '#ef4444'
+  },
+  recordingText: {
+    color: '#ffffff',
+    fontSize: 14,
+    fontWeight: '700',
+    letterSpacing: 1
+  },
+  circleStage: {
+    position: 'relative',
+    width: '100%',
+    backgroundColor: '#ffffff'
+  },
+  cameraCircle: {
+    position: 'absolute',
+    overflow: 'hidden'
+  },
+  instructionRow: {
+    height: INSTRUCTION_ROW_MIN_HEIGHT,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingTop: 10,
+    marginTop: 16,
+    overflow: 'hidden'
+  },
+  instructionRowHidden: {
+    opacity: 0
+  },
+  topTitleText: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#111827',
+    textAlign: 'center',
+    backgroundColor: 'rgba(255,255,255,0.95)',
+    paddingVertical: 6,
+    paddingHorizontal: 10,
+    borderRadius: 10
+  },
+  circleInstructionText: {
+    color: '#111827',
+    fontSize: 18,
+    fontWeight: '700',
+    textAlign: 'center',
+    backgroundColor: 'rgba(255,255,255,0.92)',
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    borderRadius: 8,
+    lineHeight: 24
+  },
+  previewContainer: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+    paddingHorizontal: 16,
+    paddingTop: 16,
+    paddingBottom: 12,
+    justifyContent: 'flex-start'
+  },
+  previewActionsContainer: {
+    paddingTop: 10,
+    gap: 8
+  },
+  previewVideo: {
+    width: '100%',
+    height: '64%',
+    borderRadius: 8,
+    backgroundColor: '#000000',
+    alignSelf: 'center',
+    borderWidth: 1,
+    borderColor: '#e5e7eb'
+  },
+  actionsContainerNearCircle: {
+    gap: 8,
+    paddingTop: 8,
+    paddingHorizontal: 20,
+    minHeight: ACTIONS_RESERVED_HEIGHT_IDLE
+  },
+  actionsContainerHidden: {
+    opacity: 0,
+    pointerEvents: 'none'
+  },
+  actionsContainerNearCircleRecording: {
+    minHeight: ACTIONS_RESERVED_HEIGHT_IDLE,
+    paddingTop: 8
+  },
+  arrowButtonCircle: {
+    position: 'absolute',
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    backgroundColor: '#ffffff',
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.15,
+    shadowRadius: 6,
+    elevation: 4,
+    borderWidth: 2,
+    borderColor: '#e5e7eb'
+  },
+  arrowTextCircle: {
+    fontSize: 26,
+    color: '#1f2937',
+    fontWeight: '700'
+  },
+  textSingleLineContainer: {
+    position: 'absolute',
+    backgroundColor: 'rgba(255, 255, 255, 0.5)',
+    overflow: 'hidden',
+    justifyContent: 'center'
+  },
+  textSingleLineInner: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 0
+  },
+  textLineContainer: {
+    height: CONSENT_LINE_HEIGHT,
+    paddingHorizontal: 0,
+    marginVertical: 0,
+    borderRadius: 0,
+    backgroundColor: 'transparent',
+    justifyContent: 'center'
+  },
+  textLineHighlighted: {
+    backgroundColor: 'transparent'
+  },
+  activeLineViewport: {
+    width: '100%',
+    height: CONSENT_LINE_HEIGHT,
+    overflow: 'hidden'
+  },
+  activeLineTrack: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    width: 9999,
+    justifyContent: 'center'
+  },
+  consentTextLine: {
+    fontSize: 14,
+    color: 'rgba(156, 163, 175, 0.6)',
+    lineHeight: 22,
+    fontWeight: '400',
+    textAlign: 'left'
+  },
+  consentTextLineActive: {
+    fontSize: 32,
+    color: '#111827',
+    fontWeight: '900',
+    lineHeight: 44
+  },
+  circleProgress: {
+    position: 'absolute',
+    top: 0,
+    zIndex: 2,
+    pointerEvents: 'none'
+  },
+  offscreenMeasure: {
+    position: 'absolute',
+    top: -9999,
+    left: 0,
+    opacity: 0,
+    width: 9999
+  },
+  hidden: {
+    opacity: 0
+  },
+  hiddenOffscreen: {
+    opacity: 0,
+    transform: [{
+      translateY: -10000
+    }]
+  },
+  arrowButtonDisabled: {
+    backgroundColor: '#e5e7eb',
+    shadowOpacity: 0,
+    elevation: 0
+  },
+  arrowTextDisabled: {
+    color: '#9ca3af'
+  },
+  previewActionHint: {
+    fontSize: 13,
+    color: '#4b5563',
+    textAlign: 'center'
+  },
+  recordingBlockedContainer: {
+    borderRadius: 10,
+    backgroundColor: '#ffffff',
+    borderWidth: 1,
+    borderColor: '#d1d5db',
+    paddingVertical: 16,
+    paddingHorizontal: 14
+  },
+  recordingBlockedText: {
+    fontSize: 16,
+    color: '#111827',
+    fontWeight: '600',
+    textAlign: 'center',
+    lineHeight: 22
+  }
+});
+export default VerbalConsentScreen;