From 7900fad9ac90e00cbdb488ee2176c221f2577fff Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Fri, 11 Aug 2023 17:39:16 -0300 Subject: [PATCH] fix play 2 audios and play/pause properly --- .../message/Components/Audio/PlayButton.tsx | 43 ++++++++++++++ .../message/Components/Audio/index.tsx | 58 +++---------------- 2 files changed, 52 insertions(+), 49 deletions(-) create mode 100644 app/containers/message/Components/Audio/PlayButton.tsx diff --git a/app/containers/message/Components/Audio/PlayButton.tsx b/app/containers/message/Components/Audio/PlayButton.tsx new file mode 100644 index 000000000..57b386a51 --- /dev/null +++ b/app/containers/message/Components/Audio/PlayButton.tsx @@ -0,0 +1,43 @@ +import React from 'react'; + +import Touchable from '../../Touchable'; +import { CustomIcon } from '../../../CustomIcon'; +import { useTheme } from '../../../../theme'; +import styles from './styles'; +import Loading from './Loading'; + +interface IButton { + loading: boolean; + paused: boolean; + disabled?: boolean; + onPress: () => void; + cached: boolean; +} + +const BUTTON_HIT_SLOP = { top: 12, right: 12, bottom: 12, left: 12 }; + +const PlayButton = React.memo(({ loading, paused, onPress, disabled, cached }: IButton) => { + const { colors } = useTheme(); + + let customIconName: 'arrow-down' | 'play-shape-filled' | 'pause-shape-filled' = 'arrow-down'; + if (cached) { + customIconName = paused ? 'play-shape-filled' : 'pause-shape-filled'; + } + return ( + + {loading ? ( + + ) : ( + + )} + + ); +}); + +export default PlayButton; diff --git a/app/containers/message/Components/Audio/index.tsx b/app/containers/message/Components/Audio/index.tsx index a377b901b..0d3bfe00c 100644 --- a/app/containers/message/Components/Audio/index.tsx +++ b/app/containers/message/Components/Audio/index.tsx @@ -5,9 +5,7 @@ import { activateKeepAwakeAsync, deactivateKeepAwake } from 'expo-keep-awake'; import { Sound } from 'expo-av/build/Audio/Sound'; import { useSharedValue } from 'react-native-reanimated'; -import Touchable from '../../Touchable'; import Markdown from '../../../markdown'; -import { CustomIcon } from '../../../CustomIcon'; import MessageContext from '../../Context'; import { TGetCustomEmoji } from '../../../../definitions/IEmoji'; import { IAttachment, IUserMessage } from '../../../../definitions'; @@ -18,16 +16,8 @@ import { PAUSE_AUDIO } from '../../constants'; import { fetchAutoDownloadEnabled } from '../../../../lib/methods/autoDownloadPreference'; import styles from './styles'; import Slider from './Slider'; -import Loading from './Loading'; import AudioRate from './AudioRate'; - -interface IButton { - loading: boolean; - paused: boolean; - disabled?: boolean; - onPress: () => void; - cached: boolean; -} +import PlayButton from './PlayButton'; interface IMessageAudioProps { file: IAttachment; @@ -47,34 +37,6 @@ const mode = { interruptionModeAndroid: InterruptionModeAndroid.DoNotMix }; -const BUTTON_HIT_SLOP = { top: 12, right: 12, bottom: 12, left: 12 }; - -const Button = React.memo(({ loading, paused, onPress, disabled, cached }: IButton) => { - const { colors } = useTheme(); - - let customIconName: 'arrow-down' | 'play-shape-filled' | 'pause-shape-filled' = 'arrow-down'; - if (cached) { - customIconName = paused ? 'play-shape-filled' : 'pause-shape-filled'; - } - return ( - - {loading ? ( - - ) : ( - - )} - - ); -}); - -Button.displayName = 'MessageAudioButton'; - const MessageAudio = ({ file, getCustomEmoji, author, isReply, style }: IMessageAudioProps) => { const [loading, setLoading] = useState(true); const [paused, setPaused] = useState(true); @@ -124,7 +86,7 @@ const MessageAudio = ({ file, getCustomEmoji, author, isReply, style }: IMessage try { await sound.current?.stopAsync(); setPaused(true); - EventEmitter.removeListener(PAUSE_AUDIO, pauseSound); + EventEmitter.removeListener(PAUSE_AUDIO, pauseSound.current); currentTime.value = 0; } catch { // do nothing @@ -137,12 +99,11 @@ const MessageAudio = ({ file, getCustomEmoji, author, isReply, style }: IMessage await sound.current?.setPositionAsync(time); }; - const pauseSound = () => { - console.log('🚀🚀🚀🚀🚀🚀🚀 ~ file: index.tsx:141 ~ pauseSound ~ pauseSound:'); - EventEmitter.removeListener(PAUSE_AUDIO, pauseSound); + const pauseSound = useRef(() => { + EventEmitter.removeListener(PAUSE_AUDIO, pauseSound.current); setPaused(true); playPause(true); - }; + }); const getUrl = () => { let url = file.audio_url; @@ -153,7 +114,6 @@ const MessageAudio = ({ file, getCustomEmoji, author, isReply, style }: IMessage }; const togglePlayPause = () => { - console.log('🚀 ~ file: index.tsx:156 ~ togglePlayPause ~ paused:', paused); setPaused(!paused); playPause(!paused); }; @@ -162,10 +122,10 @@ const MessageAudio = ({ file, getCustomEmoji, author, isReply, style }: IMessage try { if (isPaused) { await sound.current?.pauseAsync(); - EventEmitter.removeListener(PAUSE_AUDIO, pauseSound); + EventEmitter.removeListener(PAUSE_AUDIO, pauseSound.current); } else { EventEmitter.emit(PAUSE_AUDIO); - EventEmitter.addEventListener(PAUSE_AUDIO, pauseSound); + EventEmitter.addEventListener(PAUSE_AUDIO, pauseSound.current); await Audio.setAudioModeAsync(mode); await sound.current?.playAsync(); } @@ -249,7 +209,7 @@ const MessageAudio = ({ file, getCustomEmoji, author, isReply, style }: IMessage handleCache(); return () => { - EventEmitter.removeListener(PAUSE_AUDIO, pauseSound); + EventEmitter.removeListener(PAUSE_AUDIO, pauseSound.current); const unloadAsync = async () => { try { await sound.current?.unloadAsync(); @@ -281,7 +241,7 @@ const MessageAudio = ({ file, getCustomEmoji, author, isReply, style }: IMessage { backgroundColor: colors.audioComponentBackground, borderColor: colors.audioBorderColor } ]} > -