(react-native-sdk) Adds `CONFERENCE_FOCUSED` and `CONFERENCE_BLURRED` events to the external and RN api (#13657)

* (react-native-sdk) Adds `CONFERENCE_FOCUSED` and `CONFERENCE_BLURRED` events to the external and RN API

android/sdk/src/main/java/org/jitsi/meet/sdk/BroadcastEvent.java

@@ -75,6 +75,8 @@ public class BroadcastEvent {
     }
 
     public enum Type {
+        CONFERENCE_BLURRED("org.jitsi.meet.CONFERENCE_BLURRED"),
+        CONFERENCE_FOCUSED("org.jitsi.meet.CONFERENCE_FOCUSED"),
         CONFERENCE_JOINED("org.jitsi.meet.CONFERENCE_JOINED"),
         CONFERENCE_TERMINATED("org.jitsi.meet.CONFERENCE_TERMINATED"),
         CONFERENCE_WILL_JOIN("org.jitsi.meet.CONFERENCE_WILL_JOIN"),
@@ -89,6 +91,8 @@ public class BroadcastEvent {
         VIDEO_MUTED_CHANGED("org.jitsi.meet.VIDEO_MUTED_CHANGED"),
         READY_TO_CLOSE("org.jitsi.meet.READY_TO_CLOSE");
 
+        private static final String CONFERENCE_BLURRED_NAME = "CONFERENCE_BLURRED";
+        private static final String CONFERENCE_FOCUSED_NAME = "CONFERENCE_FOCUSED";
         private static final String CONFERENCE_WILL_JOIN_NAME = "CONFERENCE_WILL_JOIN";
         private static final String CONFERENCE_JOINED_NAME = "CONFERENCE_JOINED";
         private static final String CONFERENCE_TERMINATED_NAME = "CONFERENCE_TERMINATED";
@@ -124,6 +128,10 @@ public class BroadcastEvent {
 
         private static Type buildTypeFromName(String name) {
             switch (name) {
+                case CONFERENCE_BLURRED_NAME:
+                    return CONFERENCE_BLURRED;
+                case CONFERENCE_FOCUSED_NAME:
+                    return CONFERENCE_FOCUSED;
                 case CONFERENCE_WILL_JOIN_NAME:
                     return CONFERENCE_WILL_JOIN;
                 case CONFERENCE_JOINED_NAME:

react-native-sdk/index.tsx

@@ -19,6 +19,8 @@ import { setAudioMuted, setVideoMuted } from './react/features/base/media/action
 
 
 interface IEventListeners {
+    onConferenceBlurred?: Function;
+    onConferenceFocused?: Function;
     onConferenceJoined?: Function;
     onConferenceLeft?: Function;
     onConferenceWillJoin?: Function;
@@ -105,6 +107,8 @@ export const JitsiMeeting = forwardRef((props: IAppProps, ref) => {
             setAppProps({
                 'flags': flags,
                 'rnSdkHandlers': {
+                    onConferenceBlurred: eventListeners?.onConferenceBlurred,
+                    onConferenceFocused: eventListeners?.onConferenceFocused,
                     onConferenceJoined: eventListeners?.onConferenceJoined,
                     onConferenceWillJoin: eventListeners?.onConferenceWillJoin,
                     onConferenceLeft: eventListeners?.onConferenceLeft,

react/features/base/conference/actionTypes.ts

@@ -53,6 +53,25 @@ export const CONFERENCE_JOIN_IN_PROGRESS = 'CONFERENCE_JOIN_IN_PROGRESS';
  */
 export const CONFERENCE_LEFT = 'CONFERENCE_LEFT';
 
+/**
+ * The type of (redux) action which signals that the conference is out of focus.
+ * For example, if the user navigates to the Chat screen.
+ * 
+ * {
+ *      type: CONFERENCE_BLURRED,
+ * }
+ */
+export const CONFERENCE_BLURRED = 'CONFERENCE_BLURRED';
+
+/**
+ * The type of (redux) action which signals that the conference is in focus.
+ * 
+ * {
+ *      type: CONFERENCE_FOCUSED,
+ * }
+ */
+export const CONFERENCE_FOCUSED = 'CONFERENCE_FOCUSED';
+
 /**
  * The type of (redux) action, which indicates conference local subject changes.
  *

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

@@ -1,5 +1,5 @@
-import { useIsFocused } from '@react-navigation/native';
-import React, { useEffect } from 'react';
+import { useFocusEffect } from '@react-navigation/native';
+import React, { useCallback } from 'react';
 import {
     BackHandler,
     NativeModules,
@@ -10,10 +10,11 @@ import {
     ViewStyle
 } from 'react-native';
 import { EdgeInsets, withSafeAreaInsets } from 'react-native-safe-area-context';
-import { connect } from 'react-redux';
+import { connect, useDispatch } from 'react-redux';
 
 import { appNavigate } from '../../../app/actions';
 import { IReduxState, IStore } from '../../../app/types';
+import { CONFERENCE_BLURRED, CONFERENCE_FOCUSED } from '../../../base/conference/actionTypes';
 import { FULLSCREEN_ENABLED, PIP_ENABLED } from '../../../base/flags/constants';
 import { getFeatureFlag } from '../../../base/flags/functions';
 import { getParticipantCount } from '../../../base/participants/functions';
@@ -60,7 +61,6 @@ 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}.
  */
@@ -608,18 +608,17 @@ function _mapStateToProps(state: IReduxState, _ownProps: any) {
 }
 
 export default withSafeAreaInsets(connect(_mapStateToProps)(props => {
-    const isFocused = useIsFocused();
+    const dispatch = useDispatch();
 
-    useEffect(() => {
-        if (isFocused) {
-            setPictureInPictureEnabled(true);
-        } else {
-            setPictureInPictureEnabled(false);
-        }
+    useFocusEffect(useCallback(() => {
+        dispatch({ type: CONFERENCE_FOCUSED });
+        setPictureInPictureEnabled(true);
 
-        // We also need to disable PiP when we are back on the WelcomePage
-        return () => setPictureInPictureEnabled(false);
-    }, [ isFocused ]);
+        return () => {
+            dispatch({ type: CONFERENCE_BLURRED });
+            setPictureInPictureEnabled(false);
+        };
+    }, []));
 
     return ( // @ts-ignore
         <Conference { ...props } />

react/features/mobile/external-api/middleware.ts

@@ -10,7 +10,9 @@ import { appNavigate } from '../../app/actions.native';
 import { IStore } from '../../app/types';
 import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../../base/app/actionTypes';
 import {
+    CONFERENCE_BLURRED,
     CONFERENCE_FAILED,
+    CONFERENCE_FOCUSED,
     CONFERENCE_JOINED,
     CONFERENCE_LEFT,
     CONFERENCE_WILL_JOIN,
@@ -151,6 +153,14 @@ externalAPIEnabled && MiddlewareRegistry.register(store => next => action => {
         _registerForEndpointTextMessages(store);
         break;
 
+    case CONFERENCE_BLURRED:
+        sendEvent(store, CONFERENCE_BLURRED, {});
+        break;
+
+    case CONFERENCE_FOCUSED:
+        sendEvent(store, CONFERENCE_FOCUSED, {});
+        break;
+
     case CONNECTION_DISCONNECTED: {
         // FIXME: This is a hack. See the description in the JITSI_CONNECTION_CONFERENCE_KEY constant definition.
         // Check if this connection was attached to any conference.

react/features/mobile/react-native-sdk/middleware.js

@@ -1,5 +1,7 @@
 import { getAppProp } from '../../base/app/functions';
 import {
+    CONFERENCE_BLURRED,
+    CONFERENCE_FOCUSED,
     CONFERENCE_JOINED,
     CONFERENCE_LEFT,
     CONFERENCE_WILL_JOIN
@@ -23,6 +25,12 @@ const externalAPIEnabled = isExternalAPIAvailable();
     const rnSdkHandlers = getAppProp(store, 'rnSdkHandlers');
 
     switch (type) {
+    case CONFERENCE_BLURRED:
+        rnSdkHandlers?.onConferenceBlurred && rnSdkHandlers?.onConferenceBlurred();
+        break;
+    case CONFERENCE_FOCUSED:
+        rnSdkHandlers?.onConferenceFocused && rnSdkHandlers?.onConferenceFocused();
+        break;
     case CONFERENCE_JOINED:
         rnSdkHandlers?.onConferenceJoined && rnSdkHandlers?.onConferenceJoined();
         break;