diff --git a/app/containers/message/Components/Audio/Slider.tsx b/app/containers/message/Components/Audio/Slider.tsx index 50d789141..6674bb97d 100644 --- a/app/containers/message/Components/Audio/Slider.tsx +++ b/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 } }); diff --git a/app/containers/message/Components/Audio/index.tsx b/app/containers/message/Components/Audio/index.tsx index 5ab983a3c..f4d5619ff 100644 --- a/app/containers/message/Components/Audio/index.tsx +++ b/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) => { - if (data.isLoaded) { - if (data.didJustFinish) { - try { - await sound.current?.stopAsync(); - setPaused(true); - setCurrentTime(0); - EventEmitter.removeListener(PAUSE_AUDIO, pauseSound); - } catch { - // do nothing - } - } + const onEnd = async () => { + try { + await sound.current?.stopAsync(); + setPaused(true); + 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 ]} >