Add Audio Interruption Handling for Camera Recording

android/app/src/main/AndroidManifest.xml

@@ -2,6 +2,7 @@
   <uses-permission android:name="android.permission.ACCESS_MEDIA_LOCATION"/>
   <uses-permission android:name="android.permission.CAMERA"/>
   <uses-permission android:name="android.permission.INTERNET"/>
+  <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
   <uses-permission android:name="android.permission.RECORD_AUDIO"/>
   <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

app.json

@@ -62,6 +62,13 @@
           "recordAudioAndroid": true
         }
       ],
+      [
+        "expo-audio",
+        {
+          "microphonePermission": "$(PRODUCT_NAME) needs microphone access to record audio with your videos and manage audio sessions. This allows the app to capture your voice narration during recordings and handle interruptions from phone calls or other apps gracefully.",
+          "recordAudioAndroid": true
+        }
+      ],
       "expo-video",
       "expo-web-browser"
     ],
@@ -76,4 +83,4 @@
     },
     "owner": "morepriyam"
   }
-}
+}

app/(camera)/shorts.tsx

@@ -1,7 +1,7 @@
 import CameraControls from "@/components/CameraControls";
 import CloseButton from "@/components/CloseButton";
 import UploadCloseButton from "@/components/UploadCloseButton";
-import RecordButton from "@/components/RecordButton";
+import RecordButton, { RecordButtonRef } from "@/components/RecordButton";
 import RecordingProgressBar, {
   RecordingSegment,
 } from "@/components/RecordingProgressBar";
@@ -26,12 +26,15 @@
 import * as React from "react";
 import {
   Alert,
+  AppState,
+  AppStateStatus,
   Platform,
   StyleSheet,
   TouchableOpacity,
   View,
 } from "react-native";
 import { useFocusEffect } from "@react-navigation/native";
+import { setIsAudioActiveAsync } from "expo-audio";
 import { DraftStorage } from "@/utils/draftStorage";
 import { fileStore } from "@/utils/fileStore";
 import {
@@ -81,6 +84,7 @@
     storeConfig();
   }, [server, token]);
   const cameraRef = React.useRef<CameraView>(null);
+  const recordButtonRef = React.useRef<RecordButtonRef>(null);
 
   // Use a stable ref callback to avoid CameraView remounting on every render
   // This prevents the camera from being recreated on each state update
@@ -154,12 +158,12 @@
   useDerivedValue(() => {
     // Read all shared values to create listeners
     // This prevents warnings when values are updated from JS
     isHoldRecording.value;
     recordingModeShared.value;
     currentZoom.value;
     savedZoom.value;
     currentTouchY.value;
     initialTouchY.value;
     return 0; // Return dummy value
   });
 
@@ -264,8 +268,83 @@
       isHoldRecording.value = false;
       recordingModeShared.value = "";
     }
   }, [isRecording]);
 
+  // Track previous app state for Android (to detect genuine background transitions)
+  const appStateRef = React.useRef<AppStateStatus>(AppState.currentState);
+  const lastBackgroundTimeRef = React.useRef<number>(0);
+
+  // Handle app state changes during recording (background/foreground interruptions)
+  React.useEffect(() => {
+    if (!isRecording) return;
+
+    const handleAppStateChange = async (nextAppState: AppStateStatus) => {
+      const prevState = appStateRef.current;
+
+      // On Android, ignore rapid state changes (less than 500ms in background)
+      // This prevents false triggers from permission dialogs, file pickers, etc.
+      if (Platform.OS === "android") {
+        if (nextAppState === "background" || nextAppState === "inactive") {
+          lastBackgroundTimeRef.current = Date.now();
+        } else if (nextAppState === "active" && prevState !== "active") {
+          const timeInBackground = Date.now() - lastBackgroundTimeRef.current;
+          if (timeInBackground < 500) {
+            console.log(`[ShortsScreen] Ignoring rapid state change (${timeInBackground}ms in background)`);
+            appStateRef.current = nextAppState;
+            return;
+          }
+        }
+      }
+
+      console.log("[ShortsScreen] AppState:", prevState, "->", nextAppState);
+
+      // Only act on genuine transitions
+      if (prevState === nextAppState) {
+        return;
+      }
+
+      if (nextAppState === "background" || nextAppState === "inactive") {
+        // Stop recording immediately when app goes to background
+        if (cameraRef.current) {
+          try {
+            cameraRef.current.stopRecording();
+            // Disable audio when going to background
+            await setIsAudioActiveAsync(false);
+          } catch (error) {
+            console.warn("[ShortsScreen] Error stopping recording on background:", error);
+          }
+        }
+      } else if (nextAppState === "active" && prevState.match(/inactive|background/)) {
+        // Re-enable audio when app becomes active again (only from genuine background)
+        try {
+          await setIsAudioActiveAsync(true);
+        } catch (error) {
+          console.warn("[ShortsScreen] Error re-enabling audio:", error);
+        }
+
+        // Reset all animations and button states to initial state
+        recordButtonRef.current?.reset();
+
+        // Reset zoom and touch states
+        setZoom(0);
+        savedZoom.value = 0;
+        currentZoom.value = 0;
+        setScreenTouchActive(false);
+        isHoldRecording.value = false;
+        recordingModeShared.value = "";
+
+        console.log("[ShortsScreen] 🔄 Reset all animations and states");
+      }
+
+      appStateRef.current = nextAppState;
+    };
+
+    // Use 'focus' event on Android to avoid false triggers, 'change' on iOS
+    const eventType = Platform.OS === "android" ? "focus" : "change";
+    const subscription = AppState.addEventListener(eventType, handleAppStateChange);
+    return () => subscription.remove();
+  }, [isRecording]);
+
   useFocusEffect(
     React.useCallback(() => {
       // On Android, force camera remount ONLY when returning from a screen that uses video
@@ -353,6 +432,29 @@
     updateVideoStabilizationMode(mode);
   };
 
+  const handleCameraMountError = (error: { message: string }) => {
+    console.error("[ShortsScreen] ❌ Camera mount error:", error);
+    Alert.alert(
+      "Camera Error",
+      "Failed to start camera. Please try again.",
+      [
+        {
+          text: "Retry",
+          onPress: () => {
+            console.log("[ShortsScreen] 🔄 Retrying camera mount...");
+            // Force camera remount
+            setCameraKey((prev) => prev + 1);
+          },
+        },
+        { text: "OK" },
+      ]
+    );
+  };
+
+  const handleCameraReady = () => {
+    console.log("[ShortsScreen] ✅ Camera ready");
+  };
+
   const handlePreview = () => {
     if (currentDraftId && recordingSegments.length > 0) {
       // Mark that we need to remount camera when returning (video player will be used)
@@ -574,6 +676,8 @@
             facing={cameraFacing}
             enableTorch={torchEnabled}
             zoom={zoom}
+            onMountError={handleCameraMountError}
+            onCameraReady={handleCameraReady}
             {...(Platform.OS === "ios"
               ? {
                   videoStabilizationMode: mapToNativeVideoStabilization(
@@ -642,6 +746,7 @@
           </View>
 
           <RecordButton
+            ref={recordButtonRef}
             cameraRef={cameraRef}
             maxDuration={180}
             totalDuration={maxDurationLimitSeconds}

components/RecordButton.tsx

@@ -1,8 +1,13 @@
 import { CameraView } from "expo-camera";
+import { setAudioModeAsync } from "expo-audio";
 import * as React from "react";
 import { Animated, StyleSheet, TouchableOpacity, View } from "react-native";
 import VideoConcatModule from "@/modules/video-concat";
 
+export interface RecordButtonRef {
+  reset: () => void;
+}
+
 interface RecordButtonProps {
   cameraRef: React.RefObject<CameraView | null>;
   maxDuration?: number;
@@ -26,7 +31,7 @@
   screenTouchActive?: boolean;
 }
 
-export default function RecordButton({
+const RecordButton = React.forwardRef<RecordButtonRef, RecordButtonProps>(({
   cameraRef,
   maxDuration = 180,
   onRecordingStart,
@@ -40,7 +45,7 @@
   onButtonTouchStart,
   onButtonTouchEnd,
   screenTouchActive = false,
-}: RecordButtonProps) {
+}, ref) => {
   const [isRecording, setIsRecording] = React.useState(false);
   const [recordingMode, setRecordingMode] = React.useState<
     "tap" | "hold" | null
@@ -105,9 +110,23 @@
     }
   }, [screenTouchActive, buttonInitiatedRecording, isRecording, recordingMode]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const startRecording = (mode: "tap" | "hold") => {
+  const startRecording = async (mode: "tap" | "hold") => {
     if (!cameraRef.current || isRecording || remainingTime <= 0) return;
 
+    // Configure audio session for better interruption handling
+    try {
+      await setAudioModeAsync({
+        allowsRecording: true,
+        playsInSilentMode: true,
+        interruptionMode: "doNotMix", // Request exclusive audio focus
+        shouldPlayInBackground: false, // Don't play in background
+      });
+      console.log("[RecordButton] ✅ Audio session configured successfully");
+    } catch (error) {
+      console.warn("[RecordButton] ⚠️ Failed to configure audio session:", error);
+      // Continue with recording even if audio session config fails
+    }
+
     setIsRecording(true);
     setRecordingMode(mode);
     setButtonInitiatedRecording(true);
@@ -180,8 +199,17 @@
       .catch(async (error) => {
         const recordingDuration = (Date.now() - recordingStartTimeRef.current) / 1000;
 
-        if (!error.message?.includes("stopped")) {
-          console.log("[RecordButton] Recording failed");
+        // Check for specific error types
+        if (
+          error.message?.includes("interrupted") ||
+          error.message?.includes("stopped") ||
+          error.message?.includes("background") ||
+          error.message?.includes("cancelled")
+        ) {
+          console.warn("[RecordButton] ⚠️ Recording interrupted (expected):", error.message);
+          // Don't show error alert for expected interruptions
+        } else {
+          console.error("[RecordButton] ❌ Recording failed (unexpected):", error);
         }
         onRecordingComplete?.(null, mode, recordingDuration);
         return null;
@@ -245,6 +273,43 @@
     }).start();
   };
 
+  // Reset all animations and states to initial values
+  const reset = React.useCallback(() => {
+    // Stop any ongoing animations
+    if (pulsingRef.current) {
+      pulsingRef.current.stop();
+    }
+    if (progressIntervalRef.current) {
+      clearInterval(progressIntervalRef.current);
+      progressIntervalRef.current = null;
+    }
+    if (holdTimeoutRef.current) {
+      clearTimeout(holdTimeoutRef.current);
+      holdTimeoutRef.current = null;
+    }
+
+    // Reset animation values to initial state
+    scaleAnim.setValue(1);
+    borderRadiusAnim.setValue(30);
+    outerBorderScaleAnim.setValue(1);
+
+    // Reset state
+    setIsHoldingForRecord(false);
+    setIsRecording(false);
+    setRecordingMode(null);
+    setButtonInitiatedRecording(false);
+    isHoldingRef.current = false;
+    manuallyStoppedRef.current = false;
+    recordingPromiseRef.current = null;
+
+    console.log("[RecordButton] 🔄 Reset all animations and states");
+  }, []);
+
+  // Expose reset method via ref
+  React.useImperativeHandle(ref, () => ({
+    reset,
+  }));
+
   const stopRecording = async () => {
     if (!cameraRef.current || !isRecording) return;
 
@@ -420,7 +485,11 @@
       </View>
     </View>
   );
-}
+});
+
+RecordButton.displayName = "RecordButton";
+
+export default RecordButton;
 
 const styles = StyleSheet.create({
   buttonContainer: {

ios/Podfile.lock

@@ -35,6 +35,8 @@ PODS:
     - Yoga
   - ExpoAsset (11.1.7):
     - ExpoModulesCore
+  - ExpoAudio (0.4.9):
+    - ExpoModulesCore
   - ExpoBlur (14.1.5):
     - ExpoModulesCore
   - ExpoCamera (16.1.11):
@@ -2199,6 +2201,7 @@ DEPENDENCIES:
   - EXImageLoader (from `../node_modules/expo-image-loader/ios`)
   - Expo (from `../node_modules/expo`)
   - ExpoAsset (from `../node_modules/expo-asset/ios`)
+  - ExpoAudio (from `../node_modules/expo-audio/ios`)
   - ExpoBlur (from `../node_modules/expo-blur/ios`)
   - ExpoCamera (from `../node_modules/expo-camera/ios`)
   - ExpoCrypto (from `../node_modules/expo-crypto/ios`)
@@ -2323,6 +2326,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/expo"
   ExpoAsset:
     :path: "../node_modules/expo-asset/ios"
+  ExpoAudio:
+    :path: "../node_modules/expo-audio/ios"
   ExpoBlur:
     :path: "../node_modules/expo-blur/ios"
   ExpoCamera:
@@ -2524,6 +2529,7 @@ SPEC CHECKSUMS:
   EXImageLoader: 4d3d3284141f1a45006cc4d0844061c182daf7ee
   Expo: dd7f49380001a55ea776f905f8b3c1c540160b09
   ExpoAsset: ef06e880126c375f580d4923fdd1cdf4ee6ee7d6
+  ExpoAudio: d98f922b17a945cd33f8462d086278dbd810c537
   ExpoBlur: 3c8885b9bf9eef4309041ec87adec48b5f1986a9
   ExpoCamera: e1879906d41184e84b57d7643119f8509414e318
   ExpoCrypto: a9f1d75baeea6ef8b03c1660621585196c382e85

package.json

@@ -17,6 +17,7 @@
     "@react-navigation/elements": "^2.3.8",
     "@react-navigation/native": "^7.1.6",
     "expo": "~53.0.23",
+    "expo-audio": "~0.4.9",
     "expo-blur": "~14.1.5",
     "expo-camera": "~16.1.11",
     "expo-constants": "~17.1.6",