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

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

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