play/pause, track is working and onEnd

app/containers/message/Components/Audio/Slider.tsx

@@ -18,13 +18,12 @@ import { useTheme } from '../../../../theme';
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
 
 interface ISlider {
-	currentTime: number;
-	duration: number;
 	thumbColor: string;
 	sound: Sound | null;
+	onEndCallback: () => void;
 }
 
-const Slider = ({ thumbColor = '', sound }: ISlider) => {
+const Slider = ({ thumbColor = '', sound, onEndCallback }: ISlider) => {
 	const [loaded, setLoaded] = useState(false);
 
 	const { colors } = useTheme();
@@ -39,7 +38,6 @@ const Slider = ({ thumbColor = '', sound }: ISlider) => {
 	const onEndGestureHandler = useSharedValue(false);
 
 	const onPlaybackStatusUpdate = (status: AVPlaybackStatus) => {
-		console.log('🚀 ~ file: Slider.tsx:42 ~ onPlaybackStatusUpdate ~ status:', status);
 		if (status) {
 			onLoad(status);
 			onProgress(status);
@@ -51,7 +49,7 @@ const Slider = ({ thumbColor = '', sound }: ISlider) => {
 		if (sound) {
 			sound.setOnPlaybackStatusUpdate(onPlaybackStatusUpdate);
 		}
-	}, [onPlaybackStatusUpdate, sound]);
+	}, [sound]);
 
 	const onLoad = (data: AVPlaybackStatus) => {
 		if (data.isLoaded && data.durationMillis) {
@@ -65,15 +63,18 @@ const Slider = ({ thumbColor = '', sound }: ISlider) => {
 		if (data.isLoaded) {
 			const currentSecond = data.positionMillis / 1000;
 			if (currentSecond <= duration.value) {
-				console.log('🚀 ~ file: Slider.tsx:68 ~ onProgress ~ duration.value:', duration.value);
-				console.log('🚀 ~ file: Slider.tsx:70 ~ onProgress ~ currentTime.value:', currentTime.value);
 				currentTime.value = currentSecond;
 			}
 		}
 	};
 
 	const onEnd = (data: AVPlaybackStatus) => {
-		// FIX HERE
+		if (data.isLoaded) {
+			if (data.didJustFinish) {
+				onEndCallback();
+				currentTime.value = 0;
+			}
+		}
 	};
 
 	const styleLine = useAnimatedStyle(() => ({
@@ -111,7 +112,6 @@ const Slider = ({ thumbColor = '', sound }: ISlider) => {
 			scale.value = 1;
 			isHandlePan.value = false;
 			onEndGestureHandler.value = true;
-			// SEND A CALLBACK TO CHANGE THE PROGRESS OF THE AUDIO
 		}
 	});
 

app/containers/message/Components/Audio/index.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { StyleProp, TextStyle, View } from 'react-native';
-import { Audio, AVPlaybackStatus, InterruptionModeAndroid, InterruptionModeIOS } from 'expo-av';
+import { Audio, InterruptionModeAndroid, InterruptionModeIOS } from 'expo-av';
 import { activateKeepAwakeAsync, deactivateKeepAwake } from 'expo-keep-awake';
 import { Sound } from 'expo-av/build/Audio/Sound';
 
@@ -76,7 +76,6 @@ Button.displayName = 'MessageAudioButton';
 
 const MessageAudio = ({ file, getCustomEmoji, author, isReply, style }: IMessageAudioProps) => {
 	const [loading, setLoading] = useState(true);
-	const [currentTime, setCurrentTime] = useState(0);
 	const [paused, setPaused] = useState(true);
 	const [cached, setCached] = useState(false);
 
@@ -90,14 +89,6 @@ const MessageAudio = ({ file, getCustomEmoji, author, isReply, style }: IMessage
 		togglePlayPause();
 	};
 
-	const onPlaybackStatusUpdate = (status: AVPlaybackStatus) => {
-		if (status) {
-			// onLoad(status);
-			// onProgress(status);
-			onEnd(status);
-		}
-	};
-
 	const getUrl = () => {
 		let url = file.audio_url;
 		if (url && !url.startsWith('http')) {
@@ -106,18 +97,13 @@ const MessageAudio = ({ file, getCustomEmoji, author, isReply, style }: IMessage
 		return url;
 	};
 
-	const onEnd = async (data: AVPlaybackStatus) => {
+	const onEnd = async () => {
-		if (data.isLoaded) {
+		try {
-			if (data.didJustFinish) {
+			await sound.current?.stopAsync();
-				try {
+			setPaused(true);
-					await sound.current?.stopAsync();
+			EventEmitter.removeListener(PAUSE_AUDIO, pauseSound);
-					setPaused(true);
+		} catch {
-					setCurrentTime(0);
+			// do nothing
-					EventEmitter.removeListener(PAUSE_AUDIO, pauseSound);
-				} catch {
-					// do nothing
-				}
-			}
 		}
 	};
 
@@ -190,7 +176,6 @@ const MessageAudio = ({ file, getCustomEmoji, author, isReply, style }: IMessage
 
 	useEffect(() => {
 		sound.current = new Audio.Sound();
-		sound.current?.setOnPlaybackStatusUpdate(onPlaybackStatusUpdate);
 
 		const handleCache = async () => {
 			const cachedAudioResult = await getMediaCache({
@@ -257,11 +242,11 @@ const MessageAudio = ({ file, getCustomEmoji, author, isReply, style }: IMessage
 				]}
 			>
 				<Button disabled={isReply} loading={loading} paused={paused} cached={cached} onPress={onPress} />
-				<Slider sound={sound.current} currentTime={currentTime} thumbColor={thumbColor} />
+				<Slider sound={sound.current} thumbColor={thumbColor} onEndCallback={onEnd} />
 				<View style={{ width: 36, height: 24, backgroundColor: '#999', borderRadius: 4, marginRight: 16 }} />
 			</View>
 		</>
 	);
-};;
+};
 
 export default MessageAudio;