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 }
]}>
- {/* */}
-
+ {/*
+ /> */}
{getDuration()}
>