chore: migrate from expo-av to expo-audio and expo-video

app/containers/AudioPlayer/Seek.tsx

@@ -20,7 +20,7 @@ interface ISeek {
 	duration: SharedValue<number>;
 	currentTime: SharedValue<number>;
 	loaded: boolean;
-	onChangeTime: (time: number) => Promise<void>;
+	onChangeTime: (time: number) => void;
 }
 
 function clamp(value: number, min: number, max: number) {
@@ -49,6 +49,8 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) =>
 	const scale = useSharedValue(1);
 	const isPanning = useSharedValue(false);
 	const contextX = useSharedValue(0);
+	const savedTranslateX = useSharedValue(0);
+	const savedCurrentTime = useSharedValue(0);
 
 	const styleLine = useAnimatedStyle(() => ({
 		width: translateX.value
@@ -69,23 +71,24 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) =>
 		.onStart(() => {
 			isPanning.value = true;
 			contextX.value = translateX.value;
+			savedTranslateX.value = translateX.value;
+			savedCurrentTime.value = currentTime.value;
 			scale.value = withTiming(1.3, { duration: 150 });
 		})
 		.onUpdate(event => {
 			const newX = contextX.value + event.translationX;
 			translateX.value = clamp(newX, 0, maxWidth.value);
 		})
 		.onEnd(() => {
-			scheduleOnRN(onChangeTime, Math.round(currentTime.value * 1000));
+			scheduleOnRN(onChangeTime, currentTime.value);
 		})
-		.onFinalize((_, didSucceed) => {
-			if (isPanning.value && !didSucceed) {
-				translateX.value = contextX.value;
-				currentTime.value = (contextX.value * duration.value) / maxWidth.value || 0;
-			}
-
+		.onFinalize(didSucceed => {
 			isPanning.value = false;
 			scale.value = withTiming(1, { duration: 150 });
+			if (!didSucceed) {
+				translateX.value = savedTranslateX.value;
+				currentTime.value = savedCurrentTime.value;
+			}
 		});
 
 	useDerivedValue(() => {

app/containers/AudioPlayer/index.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useRef, useState } from 'react';
 import { InteractionManager, View } from 'react-native';
-import { type AVPlaybackStatus } from 'expo-av';
 import { activateKeepAwake, deactivateKeepAwake } from 'expo-keep-awake';
 import { useSharedValue } from 'react-native-reanimated';
 import { useNavigation } from '@react-navigation/native';
+import type { AudioStatus } from 'expo-audio';
 
 import { useTheme } from '../../theme';
 import styles from './styles';
@@ -47,35 +47,34 @@
 	const audioUri = useRef<string>('');
 	const navigation = useNavigation();
 
-	const onPlaybackStatusUpdate = (status: AVPlaybackStatus) => {
+	const onPlaybackStatusUpdate = (status: AudioStatus) => {
 		if (status) {
 			onPlaying(status);
 			handlePlaybackStatusUpdate(status);
 			onEnd(status);
 		}
 	};
 
-	const onPlaying = (data: AVPlaybackStatus) => {
-		if (data.isLoaded && data.isPlaying) {
+	const onPlaying = (data: AudioStatus) => {
+		if (data.isLoaded && data.playing) {
 			setPaused(false);
 		} else {
 			setPaused(true);
 		}
 	};
 
-	const handlePlaybackStatusUpdate = (data: AVPlaybackStatus) => {
-		if (data.isLoaded && data.durationMillis) {
-			const durationSeconds = data.durationMillis / 1000;
-			duration.value = durationSeconds > 0 ? durationSeconds : 0;
-			const currentSecond = data.positionMillis / 1000;
-			if (currentSecond <= durationSeconds) {
-				currentTime.value = currentSecond;
-			}
+	const handlePlaybackStatusUpdate = (data: AudioStatus) => {
+		if (!data.isLoaded) return;
+		const durationSeconds = data.duration ?? 0;
+		duration.value = durationSeconds > 0 ? durationSeconds : 0;
+		const currentSecond = data.currentTime ?? 0;
+		if (currentSecond <= durationSeconds) {
+			currentTime.value = currentSecond;
 		}
 	};
 
-	const onEnd = (data: AVPlaybackStatus) => {
-		if (data.isLoaded && data.didJustFinish) {
+	const onEnd = (data: AudioStatus) => {
+		if (data.isLoaded && data.playbackState === 'ended') {
 			try {
 				setPaused(true);
 				currentTime.value = 0;
@@ -85,8 +84,8 @@
 		}
 	};
 
-	const setPosition = async (time: number) => {
-		await AudioManager.setPositionAsync(audioUri.current, time);
+	const setPosition = (time: number) => {
+		AudioManager.setPositionAsync(audioUri.current, time);
 	};
 
 	const togglePlayPause = async () => {
@@ -128,7 +127,7 @@
 			});
 			return () => task.cancel();
 		}
 	}, [fileUri, isDownloaded]);
 
 	useEffect(() => {
 		if (paused) {
@@ -151,7 +150,7 @@
 			unsubscribeFocus();
 			unsubscribeBlur();
 		};
 	}, [navigation]);
 
 	useEffect(() => {
 		const audioFocusedEventHandler = (audioFocused: string) => {

app/containers/MessageComposer/components/Buttons/MicOrSendButton.tsx

@@ -1,4 +1,4 @@
-import { Audio } from 'expo-av';
+import { requestRecordingPermissionsAsync, getRecordingPermissionsAsync } from 'expo-audio';
 import { useContext, type ReactElement } from 'react';
 import { Alert } from 'react-native';
 import { PermissionStatus } from 'expo-camera';
@@ -25,12 +25,12 @@ export const MicOrSendButton = (): ReactElement | null => {
 	const { setRecordingAudio } = useMessageComposerApi();
 
 	const requestPermissionAndStartToRecordAudio = () =>
-		Audio.requestPermissionsAsync()
+		requestRecordingPermissionsAsync()
 			.then(({ granted }) => setRecordingAudio(granted))
 			.catch(() => {});
 
 	const startRecording = async () => {
-		const { status, granted, canAskAgain } = await Audio.getPermissionsAsync();
+		const { status, granted, canAskAgain } = await getRecordingPermissionsAsync();
 		if (granted) return setRecordingAudio(true);
 		if (status === PermissionStatus.UNDETERMINED) return requestPermissionAndStartToRecordAudio();
 		if (canAskAgain) return requestPermissionAndStartToRecordAudio();

app/containers/MessageComposer/components/RecordAudio/Duration.tsx

@@ -1,13 +1,13 @@
 import { forwardRef, useImperativeHandle, useState } from 'react';
 import { type FontVariant, Text } from 'react-native';
-import { type Audio } from 'expo-av';
+import type { RecorderState } from 'expo-audio';
 
 import sharedStyles from '../../../../views/Styles';
 import { useTheme } from '../../../../theme';
 import { formatTime } from './utils';
 
 export interface IDurationRef {
-	onRecordingStatusUpdate: (status: Audio.RecordingStatus) => void;
+	onRecordingStatusUpdate: (status: RecorderState) => void;
 }
 
 export const Duration = forwardRef<IDurationRef>((_, ref) => {
@@ -18,7 +18,7 @@ export const Duration = forwardRef<IDurationRef>((_, ref) => {
 		onRecordingStatusUpdate
 	}));
 
-	const onRecordingStatusUpdate = (status: Audio.RecordingStatus) => {
+	const onRecordingStatusUpdate = (status: RecorderState) => {
 		if (!status.isRecording) {
 			return;
 		}

app/containers/MessageComposer/components/RecordAudio/RecordAudio.tsx

@@ -1,6 +1,12 @@
 import { View, Text } from 'react-native';
 import { useEffect, useRef, useState, type ReactElement } from 'react';
-import { Audio } from 'expo-av';
+import {
+	RecordingPresets,
+	requestRecordingPermissionsAsync,
+	setAudioModeAsync,
+	useAudioRecorder,
+	useAudioRecorderState
+} from 'expo-audio';
 import { getInfoAsync } from 'expo-file-system/legacy';
 import { useKeepAwake } from 'expo-keep-awake';
 import { shallowEqual } from 'react-redux';
@@ -12,7 +18,7 @@
 import { ReviewButton } from './ReviewButton';
 import { useMessageComposerApi } from '../../context';
 import { sendFileMessage } from '../../../../lib/methods/sendFileMessage';
-import { RECORDING_EXTENSION, RECORDING_MODE, RECORDING_SETTINGS } from '../../../../lib/constants/audio';
+import { RECORDING_EXTENSION } from '../../../../lib/constants/audio';
 import { useAppSelector } from '../../../../lib/hooks/useAppSelector';
 import log from '../../../../lib/methods/helpers/log';
 import { type IUpload } from '../../../../definitions';
@@ -25,9 +31,11 @@
 
 export const RecordAudio = (): ReactElement | null => {
 	const [styles, colors] = useStyle();
-	const recordingRef = useRef<Audio.Recording | null>(null);
+	const audioRecorder = useAudioRecorder(RecordingPresets.HIGH_QUALITY);
+	const recorderState = useAudioRecorderState(audioRecorder);
+
 	const durationRef = useRef<IDurationRef>({} as IDurationRef);
 	const numberOfTriesRef = useRef(0);
 	const [status, setStatus] = useState<'recording' | 'reviewing'>('recording');
 	const { setRecordingAudio } = useMessageComposerApi();
 	const { rid, tmid } = useRoomContext();
@@ -36,45 +44,44 @@
 	const permissionToUpload = useCanUploadFile(rid);
 	useKeepAwake();
 
+	async function doRecording() {
+		const permissions = await requestRecordingPermissionsAsync();
+		if (!permissions.granted) {
+			setRecordingAudio(false);
+			return;
+		}
+
+		await setAudioModeAsync({
+			playsInSilentMode: true,
+			allowsRecording: true
+		});
+
+		await audioRecorder.prepareToRecordAsync();
+		await audioRecorder.record();
+	}
+
 	useEffect(() => {
-		const record = async () => {
-			try {
-				await Audio.setAudioModeAsync(RECORDING_MODE);
-				recordingRef.current = new Audio.Recording();
-				await recordingRef.current.prepareToRecordAsync(RECORDING_SETTINGS);
-				recordingRef.current.setOnRecordingStatusUpdate(durationRef.current.onRecordingStatusUpdate);
-				await recordingRef.current.startAsync();
-			} catch (error: any) {
-				// error only occurs on iOS devices
-				if (error?.code === 'E_AUDIO_RECORDERNOTCREATED') {
-					if (numberOfTriesRef.current <= 5) {
-						recordingRef.current = null;
-						numberOfTriesRef.current += 1;
-						setTimeout(() => {
-							record();
-						}, 100);
-					} else {
-						console.error(error);
-					}
-				} else {
-					console.error(error);
-				}
-			}
-		};
-		record();
+		doRecording().catch(error => {
+			log(error);
+			setRecordingAudio(false);
+		});
 
 		return () => {
-			try {
-				recordingRef.current?.stopAndUnloadAsync();
-			} catch {
+			audioRecorder.stop().catch(() => {
 				// Do nothing
-			}
+			});
 		};
 	}, []);
 
+	useEffect(() => {
+		if (!durationRef.current) return;
+
+		durationRef.current.onRecordingStatusUpdate?.(recorderState);
+	}, [recorderState]);
+
 	const cancelRecording = async () => {
 		try {
-			await recordingRef.current?.stopAndUnloadAsync();
+			await audioRecorder.stop();
 		} catch {
 			// Do nothing
 		} finally {
@@ -84,7 +91,7 @@
 
 	const goReview = async () => {
 		try {
-			await recordingRef.current?.stopAndUnloadAsync();
+			await audioRecorder.stop();
 			setStatus('reviewing');
 		} catch {
 			// Do nothing
@@ -95,14 +102,13 @@
 		try {
 			if (!rid) return;
 			setRecordingAudio(false);
-			const fileURI = recordingRef.current?.getURI();
-			const fileData = await getInfoAsync(fileURI as string);
+			const fileData = await getInfoAsync(audioRecorder.uri as string);
 			const fileInfo = {
 				name: `${Date.now()}${RECORDING_EXTENSION}`,
 				mime: 'audio/aac',
 				type: 'audio/aac',
 				store: 'Uploads',
-				path: fileURI,
+				path: audioRecorder.uri,
 				size: fileData.exists ? fileData.size : null
 			} as IUpload;
 
@@ -124,7 +130,7 @@
 		return (
 			<View style={styles.review}>
 				<View style={styles.audioPlayer}>
-					<AudioPlayer fileUri={recordingRef.current?.getURI() ?? ''} rid={rid} downloadState='downloaded' />
+					<AudioPlayer fileUri={recorderState.url ?? ''} rid={rid} downloadState='downloaded' />
 				</View>
 				<View style={styles.buttons}>
 					<CancelButton onPress={cancelRecording} />

app/containers/Ringer/index.tsx

@@ -1,32 +1,27 @@
-import { Audio } from 'expo-av';
-import { useEffect, useRef, memo } from 'react';
+import { useAudioPlayer } from 'expo-audio';
+import { useEffect, memo } from 'react';
 
 export enum ERingerSounds {
 	DIALTONE = 'dialtone',
 	RINGTONE = 'ringtone'
 }
 
+const RINGER_SOUND_FILES = {
+	[ERingerSounds.DIALTONE]: require('./dialtone.mp3'),
+	[ERingerSounds.RINGTONE]: require('./ringtone.mp3')
+} as const;
+
 const Ringer = memo(({ ringer }: { ringer: ERingerSounds }) => {
-	const sound = useRef(new Audio.Sound());
+	const player = useAudioPlayer(RINGER_SOUND_FILES[ringer]);
 
 	useEffect(() => {
-		const loadAndPlay = async () => {
-			try {
-				const soundFile = ringer === ERingerSounds.DIALTONE ? require(`./dialtone.mp3`) : require(`./ringtone.mp3`);
-				await sound.current.loadAsync(soundFile);
-				await sound.current.playAsync();
-				await sound.current.setIsLoopingAsync(true);
-			} catch (error) {
-				console.error('Error loading sound:', error);
-			}
-		};
-
-		loadAndPlay();
-
-		return () => {
-			sound.current?.unloadAsync();
-		};
-	}, []);
+		try {
+			player.loop = true;
+			player.play();
+		} catch (error) {
+			console.error('Error loading sound:', error);
+		}
+	}, [player]);
 
 	return null;
 });