verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

play/pause, track is working and onEnd

This commit is contained in:
Reinaldo Neto 2023-08-09 15:51:45 -03:00
parent 5bb14cb1e3
commit dfa368821a
2 changed files with 19 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/containers/message/Components/Audio/Slider.tsx
View File

@ -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
}
});

23
app/containers/message/Components/Audio/index.tsx
View File

@ -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,19 +97,14 @@ const MessageAudio = ({ file, getCustomEmoji, author, isReply, style }: IMessage
return url;
};
const onEnd = async (data: AVPlaybackStatus) => {
if (data.isLoaded) {
if (data.didJustFinish) {
const onEnd = async () => {
try {
await sound.current?.stopAsync();
setPaused(true);
setCurrentTime(0);
EventEmitter.removeListener(PAUSE_AUDIO, pauseSound);
} catch {
// do nothing
}
}
}
};
const togglePlayPause = () => {
@ -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;