feat(conference/native): created helper for handling notification/exa…

…mple

react/features/conference/components/functions.native.ts

@@ -1,4 +1,6 @@
 import { IReduxState } from '../../app/types';
+import notifee, { AndroidImportance, AndroidVisibility, AuthorizationStatus } from '@notifee/react-native';
+import logger from "../../app/logger";
 
 export * from './functions.any';
 
@@ -30,3 +32,61 @@ export const isConnecting = (state: IReduxState) => {
         connecting || (connection && (!membersOnly && (joining || (!conference && !leaving))))
     );
 };
+
+export async function displayNotificationAsForegroundService() {
+
+    // Foreground service needs to be registered first
+    notifee.registerForegroundService(() => {
+        return new Promise(() => {
+            logger.warn('Foreground service running');
+        });
+    });
+
+    // Request permissions
+    const currentPermissions = await notifee.getNotificationSettings();
+
+    if (currentPermissions.authorizationStatus !== AuthorizationStatus.AUTHORIZED) {
+        await notifee.requestPermission();
+    }
+
+    // Create notification channel
+    const channelId = await notifee.createChannel({
+        id: 'ongoing-channel',
+        name: 'Ongoing channel',
+        visibility: AndroidVisibility.PUBLIC
+    });
+
+    // Display notification
+    await notifee.displayNotification({
+        title: '<p style="color: #4caf50;"><b>Ongoing conference</span></p></b></p> &#128576;',
+        subtitle: '&#129395;',
+        body:
+            'Meeting <p style="text-decoration: line-through">you are </p> participating <p style="color: #ffffff; background-color: #9c27b0"><i>is ongoing</i></p> &#127881;!',
+        android: {
+            asForegroundService: true,
+            autoCancel: false,
+            channelId,
+            importance: AndroidImportance.HIGH,
+            color: '#4caf50',
+            ongoing: true,
+            actions: [
+                {
+                    title: '<b>Dance</b> &#128111;',
+                    pressAction: { id: 'dance' },
+                },
+                {
+                    title: '<p style="color: #f44336;"><b>Cry</b> &#128557;</p>',
+                    pressAction: { id: 'cry' },
+                },
+            ],
+        },
+    } as Notification);
+}
+
+export async function stopForegroundService() {
+    try {
+        await notifee.stopForegroundService();
+    } catch (err) {
+        console.log(err);
+    }
+}

react/features/conference/components/native/Conference.tsx

@@ -48,7 +48,7 @@ import {
     abstractMapStateToProps
 } from '../AbstractConference';
 import type { AbstractProps } from '../AbstractConference';
-import { isConnecting } from '../functions.native';
+import {displayNotificationAsForegroundService, isConnecting, stopForegroundService} from '../functions.native';
 
 import AlwaysOnLabels from './AlwaysOnLabels';
 import ExpandedLabelPopup from './ExpandedLabelPopup';
@@ -57,6 +57,7 @@ import TitleBar from './TitleBar';
 import { EXPANDED_LABEL_TIMEOUT } from './constants';
 import styles from './styles';
 
+
 /**
  * The type of the React {@code Component} props of {@link Conference}.
  */
@@ -212,6 +213,8 @@ class Conference extends AbstractConference<IProps, State> {
 
         BackHandler.addEventListener('hardwareBackPress', this._onHardwareBackPress);
 
+        displayNotificationAsForegroundService();
+
         if (_audioOnlyEnabled && _startCarMode) {
             navigation.navigate(screen.conference.carmode);
         }
@@ -254,6 +257,8 @@ class Conference extends AbstractConference<IProps, State> {
         // Tear handling any hardware button presses for back navigation down.
         BackHandler.removeEventListener('hardwareBackPress', this._onHardwareBackPress);
 
+        stopForegroundService();
+
         clearTimeout(this._expandedLabelTimeout.current ?? 0);
     }