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, { useEffect } from 'react';
|
||||||
import React 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 (
|
return (
|
||||||
<View style={{ flex: 1 }}>
|
<>
|
||||||
<Text>call</Text>
|
<StatusBar backgroundColor={color.callBackgroundColor} barStyle={'dark-content'} />
|
||||||
</View>
|
<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 notifee, { AndroidCategory, AndroidImportance, AndroidVisibility } from '@notifee/react-native';
|
||||||
import messaging from '@react-native-firebase/messaging';
|
import messaging from '@react-native-firebase/messaging';
|
||||||
import { Alert } from 'react-native';
|
import { Alert } from 'react-native';
|
||||||
|
import ejson from 'ejson';
|
||||||
import { INotification } from '../../definitions';
|
|
||||||
|
|
||||||
export const backgroundNotificationHandler = async (): Promise<void> => {
|
export const backgroundNotificationHandler = async (): Promise<void> => {
|
||||||
// 1. get info on the device and the Power Manager settings
|
// 1. get info on the device and the Power Manager settings
|
||||||
|
|
@ -52,62 +51,71 @@ export const backgroundNotificationHandler = async (): Promise<void> => {
|
||||||
],
|
],
|
||||||
{ cancelable: false }
|
{ 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> => {
|
const setBackgroundNotificationHandler = async (): Promise<void> => {
|
||||||
messaging().setBackgroundMessageHandler(async (notification: INotification) => {
|
messaging().setBackgroundMessageHandler(async (n: any) => {
|
||||||
console.log('backgroundMessageHandler', notification);
|
const notification = ejson.parse(n.data.ejson);
|
||||||
await notifee.displayNotification({
|
console.log('setBackgroundMessageHandler', notification, n);
|
||||||
title: '(21) 1234-1234',
|
if (notification) {
|
||||||
body: 'Incoming call',
|
await notifee.displayNotification({
|
||||||
android: {
|
title: notification.sender?.name || notification.sender.username || 'Rocket.Chat',
|
||||||
channelId: 'call',
|
body: 'Incoming call',
|
||||||
category: AndroidCategory.CALL,
|
android: {
|
||||||
visibility: AndroidVisibility.PUBLIC,
|
channelId: 'video-conf-call',
|
||||||
importance: AndroidImportance.HIGH,
|
category: AndroidCategory.CALL,
|
||||||
smallIcon: 'ic_launcher',
|
visibility: AndroidVisibility.PUBLIC,
|
||||||
timestamp: Date.now(),
|
importance: AndroidImportance.HIGH,
|
||||||
showTimestamp: true,
|
smallIcon: 'ic_notification',
|
||||||
pressAction: {
|
timestamp: Date.now(),
|
||||||
id: 'default',
|
color: '#F5455C',
|
||||||
launchActivity: 'chat.rocket.reactnative.CustomCallActivity'
|
actions: [
|
||||||
},
|
{
|
||||||
actions: [
|
title: 'Accept',
|
||||||
{
|
pressAction: {
|
||||||
title: 'Accept',
|
id: 'accept',
|
||||||
pressAction: {
|
launchActivity: 'default'
|
||||||
id: 'accept',
|
}
|
||||||
launchActivity: 'default'
|
},
|
||||||
|
{
|
||||||
|
title: 'Decline',
|
||||||
|
pressAction: {
|
||||||
|
id: 'reject'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
fullScreenAction: {
|
||||||
|
id: 'full-screen',
|
||||||
|
launchActivity: 'chat.rocket.reactnative.CustomCallActivity'
|
||||||
},
|
},
|
||||||
{
|
lightUpScreen: true
|
||||||
title: 'Decline',
|
|
||||||
pressAction: {
|
|
||||||
id: 'reject'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
fullScreenAction: {
|
|
||||||
id: 'default',
|
|
||||||
launchActivity: 'chat.rocket.reactnative.CustomCallActivity'
|
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
});
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue