show call screen on lock screen
This commit is contained in:
GleidsonDaniel
parent
752535b195
commit
987dc52441
119
app/call.tsx
119
app/call.tsx
|
|
@ -1,13 +1,116 @@
|
|||
import { View, Text } from 'react-native';
|
||||
import React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
import { Image, StatusBar, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
import RNBootSplash from 'react-native-bootsplash';
|
||||
import changeNavigationBarColor from 'react-native-navigation-bar-color';
|
||||
import * as Haptics from 'expo-haptics';
|
||||
|
||||
import { AnimatedRinger } from './containers/AnimatedRinger';
|
||||
import { CustomIcon, TIconsName } from './containers/CustomIcon';
|
||||
import { colors } from './lib/constants';
|
||||
import { getTheme, initialTheme } from './lib/methods/helpers/theme';
|
||||
import customStyle from './views/Styles';
|
||||
|
||||
const CallButton = ({
|
||||
backgroundColor,
|
||||
iconName,
|
||||
label,
|
||||
onPress
|
||||
}: {
|
||||
backgroundColor: string;
|
||||
iconName: TIconsName;
|
||||
label: string;
|
||||
onPress: () => void;
|
||||
}) => (
|
||||
<View style={{ alignItems: 'center' }}>
|
||||
<TouchableOpacity onPress={() => onPress()} style={{ ...styles.callButton, backgroundColor }}>
|
||||
<CustomIcon name={iconName} size={40} color='#FFF' />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.callButtonLabel}>{label}</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
const Call = () => {
|
||||
const iTheme = initialTheme();
|
||||
const theme = getTheme(iTheme);
|
||||
const color = colors[theme];
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
await RNBootSplash.hide({ fade: true });
|
||||
changeNavigationBarColor(color.callBackgroundColor, true, true);
|
||||
})();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let count = 0;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
|
||||
count++;
|
||||
if (count >= 10) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const call = () => {
|
||||
console.log('call');
|
||||
return (
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text>call</Text>
|
||||
</View>
|
||||
<>
|
||||
<StatusBar backgroundColor={color.callBackgroundColor} barStyle={'dark-content'} />
|
||||
<View style={{ flex: 1, backgroundColor: color.callBackgroundColor }}>
|
||||
<View style={{ flex: 2 }}>
|
||||
<View style={styles.topContainer}>
|
||||
<View style={styles.imageContainer}>
|
||||
<Image source={{ uri: 'https://i.ibb.co/VBsqb1k/download.jpg' }} style={styles.image} />
|
||||
</View>
|
||||
<Text style={styles.incomingCall}>Incoming Call</Text>
|
||||
<AnimatedRinger delay={0} />
|
||||
<AnimatedRinger delay={250} />
|
||||
<AnimatedRinger delay={500} />
|
||||
<AnimatedRinger delay={750} />
|
||||
<AnimatedRinger delay={1000} />
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.buttonsContainer}>
|
||||
<CallButton backgroundColor={color.cancelCallButton} iconName='phone-end' label='Reject' onPress={() => {}} />
|
||||
<CallButton backgroundColor={color.acceptCallButton} iconName='phone' label='Accept' onPress={() => {}} />
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default call;
|
||||
export const styles = StyleSheet.create({
|
||||
callButton: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: 80,
|
||||
width: 80,
|
||||
borderRadius: 40
|
||||
},
|
||||
callButtonLabel: {
|
||||
color: '#FFF',
|
||||
marginTop: 16,
|
||||
...customStyle.textMedium
|
||||
},
|
||||
incomingCall: {
|
||||
color: '#FFF',
|
||||
position: 'absolute',
|
||||
zIndex: 1000,
|
||||
bottom: 100,
|
||||
fontSize: 20,
|
||||
...customStyle.textMedium
|
||||
},
|
||||
topContainer: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'column'
|
||||
},
|
||||
buttonsContainer: { flex: 1, justifyContent: 'space-around', alignItems: 'center', flexDirection: 'row' },
|
||||
imageContainer: { overflow: 'hidden', borderRadius: 100, width: 200, height: 200, zIndex: 1000 },
|
||||
image: { width: 200, height: 200 }
|
||||
});
|
||||
|
||||
export default Call;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import notifee, { AndroidCategory, AndroidImportance, AndroidVisibility } from '@notifee/react-native';
|
||||
import messaging from '@react-native-firebase/messaging';
|
||||
import { Alert } from 'react-native';
|
||||
|
||||
import { INotification } from '../../definitions';
|
||||
import ejson from 'ejson';
|
||||
|
||||
export const backgroundNotificationHandler = async (): Promise<void> => {
|
||||
// 1. get info on the device and the Power Manager settings
|
||||
|
|
@ -52,62 +51,71 @@ export const backgroundNotificationHandler = async (): Promise<void> => {
|
|||
],
|
||||
{ cancelable: false }
|
||||
);
|
||||
|
||||
// videoConf channel
|
||||
await notifee.createChannel({
|
||||
id: 'call',
|
||||
name: 'Video Call',
|
||||
lights: true,
|
||||
vibration: true,
|
||||
importance: AndroidImportance.HIGH,
|
||||
vibrationPattern: [300, 500]
|
||||
});
|
||||
}
|
||||
|
||||
notifee.registerForegroundService(notification => new Promise(() => {}));
|
||||
// videoConf channel
|
||||
await notifee.createChannel({
|
||||
id: 'video-conf-call',
|
||||
name: 'Video Call',
|
||||
lights: true,
|
||||
vibration: true,
|
||||
importance: AndroidImportance.HIGH
|
||||
});
|
||||
|
||||
notifee.onBackgroundEvent(e => new Promise(() => {}));
|
||||
notifee.registerForegroundService(
|
||||
notification =>
|
||||
new Promise(() => {
|
||||
console.log('registerForegroundService', notification);
|
||||
})
|
||||
);
|
||||
|
||||
notifee.onBackgroundEvent(
|
||||
event =>
|
||||
new Promise(() => {
|
||||
console.log('onBackgroundEvent', event);
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const setBackgroundNotificationHandler = async (): Promise<void> => {
|
||||
messaging().setBackgroundMessageHandler(async (notification: INotification) => {
|
||||
console.log('backgroundMessageHandler', notification);
|
||||
await notifee.displayNotification({
|
||||
title: '(21) 1234-1234',
|
||||
body: 'Incoming call',
|
||||
android: {
|
||||
channelId: 'call',
|
||||
category: AndroidCategory.CALL,
|
||||
visibility: AndroidVisibility.PUBLIC,
|
||||
importance: AndroidImportance.HIGH,
|
||||
smallIcon: 'ic_launcher',
|
||||
timestamp: Date.now(),
|
||||
showTimestamp: true,
|
||||
pressAction: {
|
||||
id: 'default',
|
||||
launchActivity: 'chat.rocket.reactnative.CustomCallActivity'
|
||||
},
|
||||
actions: [
|
||||
{
|
||||
title: 'Accept',
|
||||
pressAction: {
|
||||
id: 'accept',
|
||||
launchActivity: 'default'
|
||||
messaging().setBackgroundMessageHandler(async (n: any) => {
|
||||
const notification = ejson.parse(n.data.ejson);
|
||||
console.log('setBackgroundMessageHandler', notification, n);
|
||||
if (notification) {
|
||||
await notifee.displayNotification({
|
||||
title: notification.sender?.name || notification.sender.username || 'Rocket.Chat',
|
||||
body: 'Incoming call',
|
||||
android: {
|
||||
channelId: 'video-conf-call',
|
||||
category: AndroidCategory.CALL,
|
||||
visibility: AndroidVisibility.PUBLIC,
|
||||
importance: AndroidImportance.HIGH,
|
||||
smallIcon: 'ic_notification',
|
||||
timestamp: Date.now(),
|
||||
color: '#F5455C',
|
||||
actions: [
|
||||
{
|
||||
title: 'Accept',
|
||||
pressAction: {
|
||||
id: 'accept',
|
||||
launchActivity: 'default'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Decline',
|
||||
pressAction: {
|
||||
id: 'reject'
|
||||
}
|
||||
}
|
||||
],
|
||||
fullScreenAction: {
|
||||
id: 'full-screen',
|
||||
launchActivity: 'chat.rocket.reactnative.CustomCallActivity'
|
||||
},
|
||||
{
|
||||
title: 'Decline',
|
||||
pressAction: {
|
||||
id: 'reject'
|
||||
}
|
||||
}
|
||||
],
|
||||
fullScreenAction: {
|
||||
id: 'default',
|
||||
launchActivity: 'chat.rocket.reactnative.CustomCallActivity'
|
||||
lightUpScreen: true
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue