react-native-ensys-camera-x 1.0.7

package/src/library/components/RecordAudioScreen.tsx

@@ -0,0 +1,845 @@
+/**
+ * RecordAudioScreen — a full-screen modal for recording audio.
+ *
+ * Handles the complete lifecycle:
+ *   1. Permission request (RECORD_AUDIO)
+ *   2. Start / pause / resume / stop recording
+ *   3. Cancel (deletes temp file)
+ *   4. On stop: validates → moves to Documents → returns finalized asset
+ *
+ * Reuses:
+ *   - checkMicrophonePermission / requestMicrophonePermission from permissions.ts
+ *   - startAudioRecording / stopAndPublishAudioRecording / cancelAudioRecording bridges
+ *   - onAudioAmplitude DeviceEvent for waveform visualisation
+ */
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Modal,
+  StatusBar,
+  Platform,
+  Animated,
+  Easing,
+  DeviceEventEmitter,
+  AppState,
+  Linking,
+  type AppStateStatus,
+} from 'react-native';
+import { wp, ms, fs } from '../responsive';
+import { useLibraryPalette, type LibraryPalette } from '../palette';
+import {
+  checkMicrophonePermission,
+  requestMicrophonePermission,
+} from '../../permissions';
+import {
+  startAudioRecording,
+  stopAndPublishAudioRecording,
+  cancelAudioRecording,
+  pauseAudioRecording,
+  resumeAudioRecording,
+} from '../../nativeActions';
+import { useCameraLocalization } from '../../localization';
+import { RenderIcon } from '../../icons';
+import type { CameraAsset } from '../../types';
+
+// ── Constants ──────────────────────────────────────────────────────
+const METERING_INTERVAL_MS = 60;
+const MIN_RECORDING_MS = 500; // Minimum 500ms recording to be valid
+const WAVEFORM_BARS = 48;
+const STATUS_BAR_INSET = Platform.OS === 'android' ? (StatusBar.currentHeight ?? 0) : 44;
+
+// ── Types ──────────────────────────────────────────────────────────
+type RecordingState = 'idle' | 'requesting-permission' | 'ready' | 'recording' | 'paused' | 'stopping' | 'error';
+
+export interface RecordAudioScreenProps {
+  visible: boolean;
+  onClose: () => void;
+  onRecorded: (asset: CameraAsset) => void;
+}
+
+// ── Helpers ────────────────────────────────────────────────────────
+function formatDuration(totalMs: number): string {
+  const totalSec = Math.floor(totalMs / 1000);
+  const h = Math.floor(totalSec / 3600);
+  const m = Math.floor((totalSec % 3600) / 60);
+  const s = totalSec % 60;
+  if (h > 0) {
+    return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+  }
+  return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+}
+
+// ── Component ──────────────────────────────────────────────────────
+export const RecordAudioScreen = ({
+  visible,
+  onClose,
+  onRecorded,
+}: RecordAudioScreenProps) => {
+  const { t } = useCameraLocalization();
+  const palette = useLibraryPalette();
+  const styles = useMemo(() => makeStyles(palette), [palette]);
+  const [state, setState] = useState<RecordingState>('idle');
+  const [durationMs, setDurationMs] = useState(0);
+  const [amplitudes, setAmplitudes] = useState<number[]>(() => new Array(WAVEFORM_BARS).fill(0));
+  const [isPauseSupported, setIsPauseSupported] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  // ── Derived states ───────────────────────────────────────────────
+  // Declared here, immediately after the state they derive from, because the
+  // lifecycle effects below list them in their dependency arrays — and a
+  // dependency array is evaluated DURING render, so a `const` declared further
+  // down would still be in its temporal dead zone and throw.
+  const isRecording = state === 'recording';
+  const isPaused = state === 'paused';
+  const isStopping = state === 'stopping';
+  const isActive = isRecording || isPaused;
+  const isBusy = isRecording || isPaused || isStopping;
+  const canRecord = state === 'ready';
+  const hasError = state === 'error';
+
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const startTimeRef = useRef(0);
+  const pausedDurationRef = useRef(0);
+  const pauseStartRef = useRef(0);
+  const amplitudeSubRef = useRef<any>(null);
+  const amplitudeBufferRef = useRef<number[]>(new Array(WAVEFORM_BARS).fill(0));
+  const amplitudeWriteIdx = useRef(0);
+  const pulseAnim = useRef(new Animated.Value(1)).current;
+  const pulseLoopRef = useRef<Animated.CompositeAnimation | null>(null);
+  // Guard to prevent double-stop from AppState + onAudioRecorderState firing together.
+  const stoppingRef = useRef(false);
+  // Ref for durationMs so handleStop doesn't depend on the rapidly-updating state.
+  const durationMsRef = useRef(0);
+
+  // ── Cleanup on unmount or close ──────────────────────────────────
+  const cleanup = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    if (amplitudeSubRef.current) {
+      amplitudeSubRef.current.remove();
+      amplitudeSubRef.current = null;
+    }
+    if (pulseLoopRef.current) {
+      pulseLoopRef.current.stop();
+      pulseLoopRef.current = null;
+    }
+    pulseAnim.setValue(1);
+    startTimeRef.current = 0;
+    pausedDurationRef.current = 0;
+    pauseStartRef.current = 0;
+    amplitudeBufferRef.current = new Array(WAVEFORM_BARS).fill(0);
+    amplitudeWriteIdx.current = 0;
+  }, [pulseAnim]);
+
+  // ── Permission ───────────────────────────────────────────────────
+  const ensurePermission = useCallback(async (): Promise<boolean> => {
+    setState('requesting-permission');
+    setErrorMessage(null);
+
+    try {
+      const granted = await checkMicrophonePermission();
+      if (granted) {
+        setState('ready');
+        return true;
+      }
+
+      const result = await requestMicrophonePermission({
+        title: t('permissionRationaleMicrophoneTitle'),
+        message: t('micRationaleMessage'),
+        buttonPositive: t('permissionGrant'),
+        buttonNegative: t('permissionDeny'),
+      });
+
+      if (result === 'granted') {
+        setState('ready');
+        return true;
+      }
+
+      if (result === 'never_ask_again') {
+        setErrorMessage(t('micPermanentlyDenied'));
+      } else {
+        setErrorMessage(t('micPermissionDenied'));
+      }
+      setState('error');
+      return false;
+    } catch (e: any) {
+      setErrorMessage(e?.message ?? t('micPermissionRequestFailed'));
+      setState('error');
+      return false;
+    }
+  }, [t]);
+
+  // ── Start recording ──────────────────────────────────────────────
+  const startRecording = useCallback(async () => {
+    setErrorMessage(null);
+
+    try {
+      // Throws on failure, so reaching the next line means the recorder is live.
+      // The resolved temp path isn't needed here — stopAndPublishAudioRecording
+      // looks it up natively.
+      await startAudioRecording({
+        outputFormat: 'mpeg4',
+        audioEncoder: 'aac',
+        audioSource: 'mic',
+        bitRate: 128000,
+        sampleRate: 44100,
+        meteringIntervalMs: METERING_INTERVAL_MS,
+      });
+
+      // Reset amplitude buffer from any previous session.
+      amplitudeBufferRef.current = new Array(WAVEFORM_BARS).fill(0);
+      amplitudeWriteIdx.current = 0;
+      setAmplitudes(new Array(WAVEFORM_BARS).fill(0));
+
+      // Start the elapsed-duration timer.
+      startTimeRef.current = Date.now();
+      pausedDurationRef.current = 0;
+      pauseStartRef.current = 0;
+      setDurationMs(0);
+
+      timerRef.current = setInterval(() => {
+        const now = Date.now();
+        const paused = pausedDurationRef.current + (pauseStartRef.current > 0 ? now - pauseStartRef.current : 0);
+        setDurationMs(now - startTimeRef.current - paused);
+      }, 50);
+
+      // Subscribe to amplitude events for waveform visualisation.
+      if (amplitudeSubRef.current) amplitudeSubRef.current.remove();
+      amplitudeSubRef.current = DeviceEventEmitter.addListener(
+        'onAudioAmplitude',
+        (amp: number) => {
+          const normalised = Math.min(1, Math.max(0, amp / 32768));
+          const buf = amplitudeBufferRef.current;
+          buf[amplitudeWriteIdx.current % WAVEFORM_BARS] = normalised;
+          amplitudeWriteIdx.current += 1;
+          setAmplitudes([...buf]);
+        }
+      );
+
+      // Start pulse animation on the record button.
+      pulseLoopRef.current = Animated.loop(
+        Animated.sequence([
+          Animated.timing(pulseAnim, {
+            toValue: 0.4,
+            duration: 800,
+            easing: Easing.inOut(Easing.ease),
+            useNativeDriver: true,
+          }),
+          Animated.timing(pulseAnim, {
+            toValue: 1,
+            duration: 800,
+            easing: Easing.inOut(Easing.ease),
+            useNativeDriver: true,
+          }),
+        ])
+      );
+      pulseLoopRef.current.start();
+
+      setState('recording');
+    } catch (e: any) {
+      const msg = e?.message ?? t('failedToStartRecording');
+      setErrorMessage(msg.includes('permission') ? t('micPermissionNotGranted') : msg);
+      setState('error');
+    }
+  }, [pulseAnim, t]);
+
+  // ── Pause ────────────────────────────────────────────────────────
+  const handlePause = useCallback(async () => {
+    try {
+      await pauseAudioRecording();
+      pauseStartRef.current = Date.now();
+      if (pulseLoopRef.current) pulseLoopRef.current.stop();
+      pulseAnim.setValue(0.4);
+      setState('paused');
+    } catch {
+      // Pause not supported on this device — ignore.
+    }
+  }, [pulseAnim]);
+
+  // ── Resume ───────────────────────────────────────────────────────
+  const handleResume = useCallback(async () => {
+    try {
+      await resumeAudioRecording();
+      if (pauseStartRef.current > 0) {
+        pausedDurationRef.current += Date.now() - pauseStartRef.current;
+        pauseStartRef.current = 0;
+      }
+      pulseLoopRef.current?.start();
+      setState('recording');
+    } catch {
+      // Resume not supported — ignore.
+    }
+  }, []);
+
+  // ── Stop & publish ───────────────────────────────────────────────
+  const handleStop = useCallback(async () => {
+    // Guard: prevent double-stop from AppState + onAudioRecorderState.
+    if (stoppingRef.current) return;
+    stoppingRef.current = true;
+
+    cleanup();
+    setState('stopping');
+
+    try {
+      // Check minimum duration (use ref so this callback is stable).
+      // Do this BEFORE the native call to avoid moving an invalid file.
+      if (durationMsRef.current < MIN_RECORDING_MS) {
+        setErrorMessage(t('recordingTooShort'));
+        setState('ready');
+        stoppingRef.current = false;
+        return;
+      }
+
+      const asset = await stopAndPublishAudioRecording();
+      onRecorded(asset);
+      onClose();
+    } catch (e: any) {
+      const msg = e?.message ?? t('failedToSaveRecording');
+      setErrorMessage(msg);
+      setState('ready');
+      stoppingRef.current = false;
+    }
+  }, [cleanup, onRecorded, onClose, t]);
+
+  // ── Cancel ───────────────────────────────────────────────────────
+  const handleCancel = useCallback(async () => {
+    if (stoppingRef.current) return;
+    stoppingRef.current = true;
+    cleanup();
+    try {
+      await cancelAudioRecording();
+    } catch {
+      // Best-effort cleanup.
+    }
+    onClose();
+  }, [cleanup, onClose]);
+
+  // ── Keep durationMsRef in sync with the state ───────────────────
+  useEffect(() => {
+    durationMsRef.current = durationMs;
+  }, [durationMs]);
+
+  // ── Request permission on first open ─────────────────────────────
+  useEffect(() => {
+    if (visible && state === 'idle') {
+      ensurePermission();
+    }
+  }, [visible, state, ensurePermission]);
+
+  // ── Reset state when modal closes ────────────────────────────────
+  useEffect(() => {
+    if (!visible) {
+      cleanup();
+      setState('idle');
+      setDurationMs(0);
+      setAmplitudes(new Array(WAVEFORM_BARS).fill(0));
+      setErrorMessage(null);
+    }
+  }, [visible, cleanup]);
+
+  // ── Check pause support on mount ─────────────────────────────────
+  useEffect(() => {
+    // Pause/resume is supported on API 24+. The native side exposes this via getAudioRecordingState.
+    // We set it optimistically and the native error on pause will be caught.
+    setIsPauseSupported(Platform.OS === 'android' && (Platform.Version as number) >= 24);
+  }, []);
+
+  // ── Lifecycle: auto-stop on background / screen lock ─────────────
+  useEffect(() => {
+    const handleAppState = (next: AppStateStatus) => {
+      // When the app moves to background while actively recording, stop and
+      // publish so the user doesn't lose their recording. The native
+      // MediaRecorder can be suspended or killed by the OS at any time the
+      // app is backgrounded, so it's safest to finalise immediately.
+      if (next !== 'active' && (isRecording || isPaused)) {
+        handleStop();
+      }
+    };
+    const sub = AppState.addEventListener('change', handleAppState);
+    return () => sub.remove();
+  }, [isRecording, isPaused, handleStop]);
+
+  // Reset the stopping guard when the modal closes so it can be used again.
+  useEffect(() => {
+    if (!visible) {
+      stoppingRef.current = false;
+    }
+  }, [visible]);
+
+  // ── Listen for unexpected native state changes ───────────────────
+  // The native side emits onAudioRecorderState when the recorder is
+  // interrupted externally (e.g. phone call, audio focus loss, mic
+  // conflict). React to these so the UI never gets out of sync.
+  useEffect(() => {
+    const sub = DeviceEventEmitter.addListener(
+      'onAudioRecorderState',
+      (event: { state: string }) => {
+        const nativeState = event.state;
+        // If the native side reports idle while we think we're recording,
+        // the recorder was taken away (phone call, audio focus loss, etc.).
+        // Auto-save whatever was recorded so the user doesn't lose data.
+        if (nativeState === 'idle' && isActive) {
+          handleStop();
+        }
+      }
+    );
+    return () => sub.remove();
+  }, [isActive, handleStop]);
+
+  // ── Waveform bars ────────────────────────────────────────────────
+  const waveformBars = useMemo(() => {
+    return amplitudes.map((amp, i) => {
+      // Each bar's height is proportional to the amplitude, with a minimum height.
+      const height = Math.max(ms(4), amp * ms(80));
+      const isActive = isRecording && amp > 0.05;
+      return (
+        <View
+          key={i}
+          style={[
+            styles.waveformBar,
+            {
+              height,
+              backgroundColor: isActive ? palette.primary : palette.surfaceMuted,
+            },
+          ]}
+        />
+      );
+    });
+  }, [amplitudes, isRecording, palette, styles]);
+
+  // ── Render ───────────────────────────────────────────────────────
+  return (
+    <Modal
+      visible={visible}
+      animationType="slide"
+      onRequestClose={isBusy ? undefined : handleCancel}
+      transparent={false}
+      statusBarTranslucent
+    >
+      <View style={styles.container}>
+        <StatusBar
+          barStyle={palette.isDark ? 'light-content' : 'dark-content'}
+          translucent
+          backgroundColor="transparent"
+        />
+
+        {/* ── Header ── */}
+        <View style={[styles.header, { paddingTop: STATUS_BAR_INSET + ms(12) }]}>
+          <TouchableOpacity
+            onPress={handleCancel}
+            style={styles.headerButton}
+            activeOpacity={0.7}
+            disabled={isBusy}
+          >
+            <Text style={styles.headerButtonText}>{t('cancel')}</Text>
+          </TouchableOpacity>
+          <Text style={styles.headerTitle}>{t('recordAudio')}</Text>
+          <View style={styles.headerButton} />
+        </View>
+
+        {/* ── Main Content ── */}
+        <View style={styles.content}>
+          {/* Permission requesting state */}
+          {state === 'requesting-permission' && (
+            <View style={styles.centerContent}>
+              <View style={styles.permissionIcon}>
+                <RenderIcon name="mic" size={ms(44)} color={palette.textBright} />
+              </View>
+              <Text style={styles.permissionTitle}>{t('requestingPermission')}</Text>
+              <Text style={styles.permissionSubtitle}>
+                {t('allowMicAccess')}
+              </Text>
+            </View>
+          )}
+
+          {/* Error state */}
+          {hasError && (
+            <View style={styles.centerContent}>
+              <View style={[styles.permissionIcon, { backgroundColor: palette.error + '20' }]}>
+                <RenderIcon name="warning" size={ms(44)} color={palette.error} />
+              </View>
+              <Text style={[styles.permissionTitle, { color: palette.error }]}>
+                {t('recordingError')}
+              </Text>
+              <Text style={styles.permissionSubtitle}>{errorMessage}</Text>
+              {errorMessage?.includes('Settings') ? (
+                <TouchableOpacity
+                  style={[styles.retryButton, { backgroundColor: palette.primary }]}
+                  onPress={() => {
+                    Linking.openSettings();
+                  }}
+                  activeOpacity={0.8}
+                >
+                  <Text style={styles.retryButtonText}>{t('openSettings')}</Text>
+                </TouchableOpacity>
+              ) : (
+                <TouchableOpacity
+                  style={[styles.retryButton, { backgroundColor: palette.primary }]}
+                  onPress={() => {
+                    setErrorMessage(null);
+                    ensurePermission();
+                  }}
+                  activeOpacity={0.8}
+                >
+                  <Text style={styles.retryButtonText}>{t('tryAgain')}</Text>
+                </TouchableOpacity>
+              )}
+            </View>
+          )}
+
+          {/* Ready / Recording / Paused / Stopping */}
+          {(canRecord || isRecording || isPaused || isStopping) && (
+            <>
+              {/* Duration */}
+              <View style={styles.durationContainer}>
+                <Text style={[
+                  styles.durationText,
+                  (isRecording || isPaused) && styles.durationTextActive,
+                ]}>
+                  {formatDuration(durationMs)}
+                </Text>
+                {isPaused && (
+                  <View style={styles.pausedBadge}>
+                    <Text style={styles.pausedBadgeText}>{t('pausedBadge')}</Text>
+                  </View>
+                )}
+              </View>
+
+              {/* Waveform */}
+              <View style={styles.waveformContainer}>
+                <View style={styles.waveformRow}>
+                  {waveformBars}
+                </View>
+              </View>
+
+              {/* Status text */}
+              <Text style={styles.statusText}>
+                {isStopping
+                  ? t('saving')
+                  : isRecording
+                  ? t('recording')
+                  : isPaused
+                  ? t('paused')
+                  : t('tapToStartRecording')}
+              </Text>
+
+              {/* Error message (inline, non-fatal) */}
+              {errorMessage && !hasError && (
+                <Text style={styles.inlineError}>{errorMessage}</Text>
+              )}
+
+              {/* Controls */}
+              <View style={styles.controls}>
+                {canRecord && (
+                  <TouchableOpacity
+                    style={styles.recordButton}
+                    onPress={startRecording}
+                    activeOpacity={0.8}
+                  >
+                    <View style={styles.recordButtonOuter}>
+                      <View style={styles.recordButtonInner} />
+                    </View>
+                  </TouchableOpacity>
+                )}
+
+                {isRecording && (
+                  <View style={styles.activeControls}>
+                    {/* Cancel / discard */}
+                    <TouchableOpacity
+                      style={styles.controlButton}
+                      onPress={handleCancel}
+                      activeOpacity={0.7}
+                    >
+                      <View style={[styles.controlIcon, { backgroundColor: palette.error }]}>
+                        <RenderIcon name="close" size={ms(22)} color={palette.white} strokeWidth={2.4} />
+                      </View>
+                      <Text style={styles.controlLabel}>{t('discard')}</Text>
+                    </TouchableOpacity>
+
+                    {/* Pause / Resume */}
+                    {isPauseSupported && (
+                      <TouchableOpacity
+                        style={styles.controlButton}
+                        onPress={handlePause}
+                        activeOpacity={0.7}
+                      >
+                        <View style={[styles.controlIcon, { backgroundColor: palette.accentOrange }]}>
+                          <RenderIcon name="pause" size={ms(22)} color={palette.white} />
+                        </View>
+                        <Text style={styles.controlLabel}>{t('pause')}</Text>
+                      </TouchableOpacity>
+                    )}
+
+                    {/* Stop & save */}
+                    <TouchableOpacity
+                      style={styles.controlButton}
+                      onPress={handleStop}
+                      activeOpacity={0.7}
+                    >
+                      <Animated.View style={[styles.controlIcon, { backgroundColor: palette.success, opacity: pulseAnim }]}>
+                        <RenderIcon name="stop" size={ms(20)} color={palette.white} />
+                      </Animated.View>
+                      <Text style={styles.controlLabel}>{t('save')}</Text>
+                    </TouchableOpacity>
+                  </View>
+                )}
+
+                {isPaused && (
+                  <View style={styles.activeControls}>
+                    {/* Cancel / discard */}
+                    <TouchableOpacity
+                      style={styles.controlButton}
+                      onPress={handleCancel}
+                      activeOpacity={0.7}
+                    >
+                      <View style={[styles.controlIcon, { backgroundColor: palette.error }]}>
+                        <RenderIcon name="close" size={ms(22)} color={palette.white} strokeWidth={2.4} />
+                      </View>
+                      <Text style={styles.controlLabel}>{t('discard')}</Text>
+                    </TouchableOpacity>
+
+                    {/* Resume */}
+                    <TouchableOpacity
+                      style={styles.controlButton}
+                      onPress={handleResume}
+                      activeOpacity={0.7}
+                    >
+                      <View style={[styles.controlIcon, { backgroundColor: palette.primary }]}>
+                        <RenderIcon name="play" size={ms(22)} color={palette.white} />
+                      </View>
+                      <Text style={styles.controlLabel}>{t('resume')}</Text>
+                    </TouchableOpacity>
+
+                    {/* Stop & save */}
+                    <TouchableOpacity
+                      style={styles.controlButton}
+                      onPress={handleStop}
+                      activeOpacity={0.7}
+                    >
+                      <View style={[styles.controlIcon, { backgroundColor: palette.success }]}>
+                        <RenderIcon name="stop" size={ms(20)} color={palette.white} />
+                      </View>
+                      <Text style={styles.controlLabel}>{t('save')}</Text>
+                    </TouchableOpacity>
+                  </View>
+                )}
+
+                {isStopping && (
+                  <View style={styles.stoppingIndicator}>
+                    <Text style={styles.stoppingText}>{t('savingRecording')}</Text>
+                  </View>
+                )}
+              </View>
+            </>
+          )}
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+// ── Styles ─────────────────────────────────────────────────────────
+const makeStyles = (palette: LibraryPalette) =>
+  StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: palette.appBackgroundDeepest,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: wp(16),
+    paddingBottom: ms(12),
+  },
+  headerButton: {
+    width: ms(72),
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: ms(8),
+  },
+  headerButtonText: {
+    color: palette.primary,
+    fontSize: fs(15),
+    fontWeight: '600',
+  },
+  headerTitle: {
+    color: palette.textBright,
+    fontSize: fs(17),
+    fontWeight: '700',
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: wp(24),
+  },
+  centerContent: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  permissionIcon: {
+    width: ms(96),
+    height: ms(96),
+    borderRadius: ms(48),
+    backgroundColor: palette.surface,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: ms(24),
+  },
+  permissionIconText: {
+    fontSize: ms(40),
+  },
+  permissionTitle: {
+    color: palette.textBright,
+    fontSize: fs(20),
+    fontWeight: '700',
+    marginBottom: ms(8),
+    textAlign: 'center',
+  },
+  permissionSubtitle: {
+    color: palette.textFaded,
+    fontSize: fs(14),
+    fontWeight: '400',
+    textAlign: 'center',
+    lineHeight: fs(20),
+    paddingHorizontal: wp(20),
+  },
+  retryButton: {
+    marginTop: ms(24),
+    paddingHorizontal: wp(32),
+    paddingVertical: ms(12),
+    borderRadius: ms(12),
+  },
+  retryButtonText: {
+    color: palette.white,
+    fontSize: fs(15),
+    fontWeight: '700',
+  },
+  durationContainer: {
+    alignItems: 'center',
+    marginBottom: ms(32),
+  },
+  durationText: {
+    color: palette.textDim,
+    fontSize: fs(44),
+    fontWeight: '200',
+    fontVariant: ['tabular-nums'],
+    letterSpacing: 2,
+  },
+  durationTextActive: {
+    color: palette.textBright,
+  },
+  pausedBadge: {
+    marginTop: ms(8),
+    paddingHorizontal: ms(12),
+    paddingVertical: ms(4),
+    borderRadius: ms(6),
+    backgroundColor: palette.accentOrange + '30',
+  },
+  pausedBadgeText: {
+    color: palette.accentOrange,
+    fontSize: fs(11),
+    fontWeight: '700',
+    letterSpacing: 1.5,
+  },
+  waveformContainer: {
+    width: '100%',
+    height: ms(100),
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: ms(24),
+  },
+  waveformRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: ms(3),
+    height: ms(80),
+  },
+  waveformBar: {
+    width: ms(4),
+    borderRadius: ms(2),
+    minHeight: ms(4),
+  },
+  statusText: {
+    color: palette.textFaded,
+    fontSize: fs(13),
+    fontWeight: '500',
+    textAlign: 'center',
+    marginBottom: ms(40),
+  },
+  inlineError: {
+    color: palette.error,
+    fontSize: fs(12),
+    fontWeight: '500',
+    textAlign: 'center',
+    marginBottom: ms(16),
+    paddingHorizontal: wp(20),
+  },
+  controls: {
+    alignItems: 'center',
+    width: '100%',
+  },
+  recordButton: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  recordButtonOuter: {
+    width: ms(80),
+    height: ms(80),
+    borderRadius: ms(40),
+    borderWidth: ms(4),
+    // Ring around the red dot — must contrast with the theme-flipping screen background.
+    borderColor: palette.textBright,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  recordButtonInner: {
+    width: ms(56),
+    height: ms(56),
+    borderRadius: ms(28),
+    backgroundColor: palette.error,
+  },
+  activeControls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: wp(32),
+  },
+  controlButton: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  controlIcon: {
+    width: ms(56),
+    height: ms(56),
+    borderRadius: ms(28),
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: ms(6),
+  },
+  controlIconText: {
+    color: palette.white,
+    fontSize: fs(20),
+    fontWeight: '700',
+  },
+  controlLabel: {
+    color: palette.textFaded,
+    fontSize: fs(11),
+    fontWeight: '600',
+  },
+  stoppingIndicator: {
+    alignItems: 'center',
+  },
+  stoppingText: {
+    color: palette.textFaded,
+    fontSize: fs(14),
+    fontWeight: '500',
+  },
+});