diff --git a/app/containers/message/Components/Audio/index.tsx b/app/containers/message/Components/Audio/index.tsx index 0c01840b4..691d9e9fb 100644 --- a/app/containers/message/Components/Audio/index.tsx +++ b/app/containers/message/Components/Audio/index.tsx @@ -2,7 +2,7 @@ import React, { useContext, useEffect, useState } from 'react'; import { StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native'; import moment from 'moment'; import { activateKeepAwake, deactivateKeepAwake } from 'expo-keep-awake'; -import Slider from '@react-native-community/slider'; +// import Slider from '@react-native-community/slider'; import TrackPlayer, { Event, useTrackPlayerEvents, State, useProgress } from 'react-native-track-player'; import Touchable from '../../Touchable'; @@ -11,8 +11,7 @@ import { CustomIcon } from '../../../CustomIcon'; import sharedStyles from '../../../../views/Styles'; import { themes } from '../../../../lib/constants'; import { - isAndroid, - isIOS + isAndroid // isIOS } from '../../../../lib/methods/helpers'; import MessageContext from '../../Context'; @@ -21,7 +20,7 @@ import { TGetCustomEmoji } from '../../../../definitions/IEmoji'; import { IAttachment } from '../../../../definitions'; import { TSupportedThemes } from '../../../../theme'; import { setupService } from './services'; -// import Slider from './Slider'; +import Slider from './Slider'; interface IButton { loading: boolean; @@ -93,14 +92,26 @@ const Button = React.memo(({ loading, paused, onPress, disabled, theme }: IButto Button.displayName = 'MessageAudioButton'; -const MessageAudio = ({ file, isReply, style, theme, getCustomEmoji, scale }: IMessageAudioProps) => { +const MessageAudio = ({ + file, + isReply, + style, + theme, + getCustomEmoji +}: // scale +IMessageAudioProps) => { const [loading, setLoading] = useState(false); const [paused, setPaused] = useState(true); + const [currentTime, setCurrentTime] = useState(0); const { baseUrl, user } = useContext(MessageContext); const { position, duration } = useProgress(); + useEffect(() => { + setCurrentTime(position); + }, [position]); + useEffect(() => { const setup = async () => { setupService(); @@ -115,7 +126,6 @@ const MessageAudio = ({ file, isReply, style, theme, getCustomEmoji, scale }: IM } catch { // Do nothing } - setLoading(false); }; setup(); return () => { @@ -133,7 +143,7 @@ const MessageAudio = ({ file, isReply, style, theme, getCustomEmoji, scale }: IM } else { activateKeepAwake(); } - }, [paused, position, duration, file, loading, theme]); + }, [paused, currentTime, duration, file, loading, theme]); useTrackPlayerEvents([Event.PlaybackState], ({ state }) => { if (state === State.Stopped) { @@ -144,9 +154,10 @@ const MessageAudio = ({ file, isReply, style, theme, getCustomEmoji, scale }: IM // do nothing } } + if (state === State.Ready) setLoading(false); }); - const getDuration = () => formatTime(position || duration); + const getDuration = () => formatTime(currentTime || duration); const togglePlayPause = () => { setPaused(!paused); @@ -166,6 +177,7 @@ const MessageAudio = ({ file, isReply, style, theme, getCustomEmoji, scale }: IM const onValueChange = async (value: number) => { try { + setCurrentTime(value); await TrackPlayer.seekTo(value); } catch { // Do nothing @@ -201,17 +213,17 @@ const MessageAudio = ({ file, isReply, style, theme, getCustomEmoji, scale }: IM { backgroundColor: themes[theme].chatComponentBackground, borderColor: themes[theme].borderColor } ]}>