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

fix: ringer audio playing on background (#5453) 

* feat: refactor Ringer component to improve sound loading and playing

* chore: add audio state to IncomingCallNotification

* Update app/containers/InAppNotification/IncomingCallNotification/index.tsx

Co-authored-by: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com>

---------

Co-authored-by: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com>
This commit is contained in:
Gleidson Daniel Silva 2024-01-09 14:18:24 -03:00 committed by GitHub
parent cda528ba40
commit 35cb39a2f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/containers/InAppNotification/IncomingCallNotification/index.tsx
View File

@ -36,6 +36,7 @@ const IncomingCallHeader = React.memo(
({ uid, callId, avatar, roomName }: { callId: string; avatar: string; uid: string; roomName: string }) => { ({ uid, callId, avatar, roomName }: { callId: string; avatar: string; uid: string; roomName: string }) => {
const [mic, setMic] = useState(true); const [mic, setMic] = useState(true);
const [cam, setCam] = useState(false); const [cam, setCam] = useState(false);
const [audio, setAudio] = useState(true);
const dispatch = useDispatch(); const dispatch = useDispatch();
const isMasterDetail = useAppSelector(state => state.app.isMasterDetail); const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
const styles = useStyle(); const styles = useStyle();
@ -64,12 +65,20 @@ const IncomingCallHeader = React.memo(
direct={true} direct={true}
/> />
<View style={styles.row}> <View style={styles.row}>
<Touchable hitSlop={BUTTON_HIT_SLOP} onPress={hideNotification} style={styles.closeButton}> <Touchable
hitSlop={BUTTON_HIT_SLOP}
onPress={() => {
setAudio(!audio);
hideNotification();
}}
style={styles.closeButton}
>
<CustomIcon name='close' size={20} color={colors.gray300} /> <CustomIcon name='close' size={20} color={colors.gray300} />
</Touchable> </Touchable>
<Touchable <Touchable
hitSlop={BUTTON_HIT_SLOP} hitSlop={BUTTON_HIT_SLOP}
onPress={() => { onPress={() => {
setAudio(!audio);
hideNotification(); hideNotification();
dispatch(cancelCall({ callId })); dispatch(cancelCall({ callId }));
}} }}
@ -80,6 +89,7 @@ const IncomingCallHeader = React.memo(
<Touchable <Touchable
hitSlop={BUTTON_HIT_SLOP} hitSlop={BUTTON_HIT_SLOP}
onPress={() => { onPress={() => {
setAudio(!audio);
hideNotification(); hideNotification();
dispatch(acceptCall({ callId })); dispatch(acceptCall({ callId }));
}} }}
@ -88,7 +98,7 @@ const IncomingCallHeader = React.memo(
<Text style={styles.buttonText}>{i18n.t('accept')}</Text> <Text style={styles.buttonText}>{i18n.t('accept')}</Text>
</Touchable> </Touchable>
</View> </View>
<Ringer ringer={ERingerSounds.RINGTONE} /> {audio ? <Ringer ringer={ERingerSounds.RINGTONE} /> : null}
</View> </View>
); );
} }

41
app/containers/Ringer/index.tsx
View File

@ -1,6 +1,5 @@
import { Audio } from 'expo-av'; import { Audio } from 'expo-av';
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import { View } from 'react-native';
export enum ERingerSounds { export enum ERingerSounds {
DIALTONE = 'dialtone', DIALTONE = 'dialtone',
@ -8,34 +7,28 @@ export enum ERingerSounds {
} }
const Ringer = React.memo(({ ringer }: { ringer: ERingerSounds }) => { const Ringer = React.memo(({ ringer }: { ringer: ERingerSounds }) => {
const sound = useRef<Audio.Sound | null>(null); const sound = useRef(new Audio.Sound());
useEffect(() => { useEffect(() => {
(async () => { const loadAndPlay = async () => {
let expo = null; try {
switch (ringer) { const soundFile = ringer === ERingerSounds.DIALTONE ? require(`./dialtone.mp3`) : require(`./ringtone.mp3`);
case ERingerSounds.DIALTONE: await sound.current.loadAsync(soundFile);
expo = await Audio.Sound.createAsync(require(`./dialtone.mp3`));
break;
case ERingerSounds.RINGTONE:
expo = await Audio.Sound.createAsync(require(`./ringtone.mp3`));
break;
default:
expo = await Audio.Sound.createAsync(require(`./dialtone.mp3`));
break;
}
sound.current = expo.sound;
await sound.current.playAsync(); await sound.current.playAsync();
await sound.current.setIsLoopingAsync(true); await sound.current.setIsLoopingAsync(true);
})(); } catch (error) {
}, []); console.error('Error loading sound:', error);
}
useEffect(() => () => stopSound(), []);
const stopSound = () => {
sound?.current?.unloadAsync();
}; };
return <View />; loadAndPlay();
return () => {
sound.current?.unloadAsync();
};
}, []);
return null;
}); });
export default Ringer; export default Ringer;