[Android] Allow multiple JitsiMeetViews

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

@@ -30,6 +30,10 @@ import com.facebook.react.ReactRootView;
 import com.facebook.react.common.LifecycleState;
 
 import java.net.URL;
+import java.util.Collections;
+import java.util.Set;
+import java.util.UUID;
+import java.util.WeakHashMap;
 
 public class JitsiMeetView extends FrameLayout {
     /**
@@ -39,18 +43,131 @@ public class JitsiMeetView extends FrameLayout {
     private static final int BACKGROUND_COLOR = 0xFF111111;
 
     /**
-     * Reference to the single instance of this class we currently allow. It's
-     * currently used for fetching the instance from the listener's callbacks.
+     * React Native bridge. The instance manager allows embedding applications
+     * to create multiple root views off the same JavaScript bundle.
+     */
+    private static ReactInstanceManager reactInstanceManager;
+
+    private static final Set<JitsiMeetView> views
+        = Collections.newSetFromMap(new WeakHashMap<JitsiMeetView, Boolean>());
+
+    public static JitsiMeetView findViewByExternalAPIScope(
+            String externalAPIScope) {
+        for (JitsiMeetView view : views) {
+            if (view.externalAPIScope.equals(externalAPIScope)) {
+                return view;
+            }
+        }
+
+        return null;
+    }
+
+    /**
+     * Internal method to initialize the React Native instance manager. We
+     * create a single instance in order to load the JavaScript bundle a single
+     * time. All <tt>ReactRootView</tt> instances will be tied to the one and
+     * only <tt>ReactInstanceManager</tt>.
      *
-     * TODO: Lift this limitation.
+     * @param application - <tt>Application</tt> instance which is running.
      */
-    private static JitsiMeetView instance;
+    private static void initReactInstanceManager(Application application) {
+        reactInstanceManager
+            = ReactInstanceManager.builder()
+                .setApplication(application)
+                .setBundleAssetName("index.android.bundle")
+                .setJSMainModuleName("index.android")
+                .addPackage(new com.corbt.keepawake.KCKeepAwakePackage())
+                .addPackage(new com.facebook.react.shell.MainReactPackage())
+                .addPackage(new com.oblador.vectoricons.VectorIconsPackage())
+                .addPackage(new com.ocetnik.timer.BackgroundTimerPackage())
+                .addPackage(new com.oney.WebRTCModule.WebRTCModulePackage())
+                .addPackage(new com.rnimmersive.RNImmersivePackage())
+                .addPackage(new org.jitsi.meet.sdk.audiomode.AudioModePackage())
+                .addPackage(
+                        new org.jitsi.meet.sdk.externalapi.ExternalAPIPackage())
+                .addPackage(new org.jitsi.meet.sdk.proximity.ProximityPackage())
+                .setUseDeveloperSupport(BuildConfig.DEBUG)
+                .setInitialLifecycleState(LifecycleState.RESUMED)
+                .build();
+    }
 
     /**
-     * React Native bridge. The instance manager allows embedding applications
-     * to create multiple root views off the same JavaScript bundle.
+     * Activity lifecycle method which should be called from
+     * <tt>Activity.onBackPressed</tt> so we can do the required internal
+     * processing.
+     *
+     * @return - true if the back-press was processed, false otherwise. In case
+     * false is returned the application should call the parent's
+     * implementation.
      */
-    private static ReactInstanceManager reactInstanceManager;
+    public static boolean onBackPressed() {
+        if (reactInstanceManager != null) {
+            reactInstanceManager.onBackPressed();
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    /**
+     * Activity lifecycle method which should be called from
+     * <tt>Activity.onDestroy</tt> so we can do the required internal
+     * processing.
+     *
+     * @param activity - <tt>Activity</tt> being destroyed.
+     */
+    public static void onHostDestroy(Activity activity) {
+        if (reactInstanceManager != null) {
+            reactInstanceManager.onHostDestroy(activity);
+        }
+    }
+
+    /**
+     * Activity lifecycle method which should be called from
+     * <tt>Activity.onPause</tt> so we can do the required internal processing.
+     *
+     * @param activity - <tt>Activity</tt> being paused.
+     */
+    public static void onHostPause(Activity activity) {
+        if (reactInstanceManager != null) {
+            reactInstanceManager.onHostPause(activity);
+        }
+    }
+
+    /**
+     * Activity lifecycle method which should be called from
+     * <tt>Activity.onResume</tt> so we can do the required internal processing.
+     *
+     * @param activity - <tt>Activity</tt> being resumed.
+     */
+    public static void onHostResume(Activity activity) {
+        if (reactInstanceManager != null) {
+            reactInstanceManager.onHostResume(activity, null);
+        }
+    }
+
+    /**
+     * Activity lifecycle method which should be called from
+     * <tt>Activity.onNewIntent</tt> so we can do the required internal
+     * processing. Note that this is only needed if the activity's "launchMode"
+     * was set to "singleTask". This is required for deep linking to work once
+     * the application is already running.
+     *
+     * @param intent - <tt>Intent</tt> instance which was received.
+     */
+    public static void onNewIntent(Intent intent) {
+        if (reactInstanceManager != null) {
+            reactInstanceManager.onNewIntent(intent);
+        }
+    }
+
+    /**
+     * The unique identifier of this {@code JitsiMeetView} within the process
+     * for the purposes of {@link ExternalAPI}. The name scope was inspired by
+     * postis which we use on Web for the similar purposes of the iframe-based
+     * external API.
+     */
+    private final String externalAPIScope;
 
     /**
      * {@link JitsiMeetViewListener} instance for reporting events occurring in
@@ -71,33 +188,15 @@ public class JitsiMeetView extends FrameLayout {
     public JitsiMeetView(@NonNull Context context) {
         super(context);
 
-        if (instance != null) {
-            throw new RuntimeException(
-                    "Only a single instance is currently allowed");
-        }
-
-        /*
-         * TODO: Only allow a single instance for now. All React Native modules
-         * are kinda singletons so global state would be broken since we have a
-         * single bridge. Once we have that sorted out multiple instances of
-         * JitsiMeetView will be allowed.
-         */
-        instance = this;
-
         setBackgroundColor(BACKGROUND_COLOR);
 
         if (reactInstanceManager == null) {
             initReactInstanceManager(((Activity) context).getApplication());
         }
-    }
 
-    /**
-     * Returns the only instance of this class we currently allow creating.
-     *
-     * @return The {@code JitsiMeetView} instance.
-     */
-    public static JitsiMeetView getInstance() {
-        return instance;
+        // Hook this JitsiMeetView into ExternalAPI.
+        externalAPIScope = UUID.randomUUID().toString();
+        views.add(this);
     }
 
     /**
@@ -121,33 +220,6 @@ public class JitsiMeetView extends FrameLayout {
         return welcomePageEnabled;
     }
 
-    /**
-     * Internal method to initialize the React Native instance manager. We
-     * create a single instance in order to load the JavaScript bundle a single
-     * time. All <tt>ReactRootView</tt> instances will be tied to the one and
-     * only <tt>ReactInstanceManager</tt>.
-     *
-     * @param application - <tt>Application</tt> instance which is running.
-     */
-    private static void initReactInstanceManager(Application application) {
-        reactInstanceManager = ReactInstanceManager.builder()
-            .setApplication(application)
-            .setBundleAssetName("index.android.bundle")
-            .setJSMainModuleName("index.android")
-            .addPackage(new com.corbt.keepawake.KCKeepAwakePackage())
-            .addPackage(new com.facebook.react.shell.MainReactPackage())
-            .addPackage(new com.oblador.vectoricons.VectorIconsPackage())
-            .addPackage(new com.ocetnik.timer.BackgroundTimerPackage())
-            .addPackage(new com.oney.WebRTCModule.WebRTCModulePackage())
-            .addPackage(new com.rnimmersive.RNImmersivePackage())
-            .addPackage(new org.jitsi.meet.sdk.audiomode.AudioModePackage())
-            .addPackage(new org.jitsi.meet.sdk.externalapi.ExternalAPIPackage())
-            .addPackage(new org.jitsi.meet.sdk.proximity.ProximityPackage())
-            .setUseDeveloperSupport(BuildConfig.DEBUG)
-            .setInitialLifecycleState(LifecycleState.RESUMED)
-            .build();
-    }
-
     /**
      * Loads the given URL and displays the conference. If the specified URL is
      * null, the welcome page is displayed instead.
@@ -157,6 +229,8 @@ public class JitsiMeetView extends FrameLayout {
     public void loadURL(@Nullable URL url) {
         Bundle props = new Bundle();
 
+        // externalAPIScope
+        props.putString("externalAPIScope", externalAPIScope);
         // url
         if (url != null) {
             props.putString("url", url.toString());
@@ -199,74 +273,4 @@ public class JitsiMeetView extends FrameLayout {
     public void setWelcomePageEnabled(boolean welcomePageEnabled) {
         this.welcomePageEnabled = welcomePageEnabled;
     }
-
-    /**
-     * Activity lifecycle method which should be called from
-     * <tt>Activity.onBackPressed</tt> so we can do the required internal
-     * processing.
-     *
-     * @return - true if the back-press was processed, false otherwise. In case
-     * false is returned the application should call the parent's
-     * implementation.
-     */
-    public static boolean onBackPressed() {
-        if (reactInstanceManager != null) {
-            reactInstanceManager.onBackPressed();
-            return true;
-        } else {
-            return false;
-        }
-    }
-
-    /**
-     * Activity lifecycle method which should be called from
-     * <tt>Activity.onDestroy</tt> so we can do the required internal
-     * processing.
-     *
-     * @param activity - <tt>Activity</tt> being destroyed.
-     */
-    public static void onHostDestroy(Activity activity) {
-        if (reactInstanceManager != null) {
-            reactInstanceManager.onHostDestroy(activity);
-        }
-    }
-
-    /**
-     * Activity lifecycle method which should be called from
-     * <tt>Activity.onPause</tt> so we can do the required internal processing.
-     *
-     * @param activity - <tt>Activity</tt> being paused.
-     */
-    public static void onHostPause(Activity activity) {
-        if (reactInstanceManager != null) {
-            reactInstanceManager.onHostPause(activity);
-        }
-    }
-
-    /**
-     * Activity lifecycle method which should be called from
-     * <tt>Activity.onResume</tt> so we can do the required internal processing.
-     *
-     * @param activity - <tt>Activity</tt> being resumed.
-     */
-    public static void onHostResume(Activity activity) {
-        if (reactInstanceManager != null) {
-            reactInstanceManager.onHostResume(activity, null);
-        }
-    }
-
-    /**
-     * Activity lifecycle method which should be called from
-     * <tt>Activity.onNewIntent</tt> so we can do the required internal
-     * processing. Note that this is only needed if the activity's "launchMode"
-     * was set to "singleTask". This is required for deep linking to work once
-     * the application is already running.
-     *
-     * @param intent - <tt>Intent</tt> instance which was received.
-     */
-    public static void onNewIntent(Intent intent) {
-        if (reactInstanceManager != null) {
-            reactInstanceManager.onNewIntent(intent);
-        }
-    }
 }

android/sdk/src/main/java/org/jitsi/meet/sdk/externalapi/ExternalAPIModule.java

@@ -62,22 +62,31 @@ public class ExternalAPIModule extends ReactContextBaseJavaModule {
     /**
      * Dispatches an event that occurred on JavaScript to the view's listener.
      *
-     * @param name - Event name.
-     * @param data - Ancillary data for the event.
+     * @param name The name of the event.
+     * @param data The details/specifics of the event to send determined
+     * by/associated with the specified {@code name}.
+     * @param scope
      */
     @ReactMethod
-    public void sendEvent(final String name, ReadableMap data) {
-        JitsiMeetView view = JitsiMeetView.getInstance();
-        JitsiMeetViewListener listener
-            = view != null ? view.getListener() : null;
+    public void sendEvent(String name, ReadableMap data, String scope) {
+        // The JavaScript App needs to provide uniquely identifying information
+        // to the native ExternalAPI module so that the latter may match the
+        // former to the native JitsiMeetView which hosts it.
+        JitsiMeetView view = JitsiMeetView.findViewByExternalAPIScope(scope);
+
+        if (view == null) {
+            return;
+        }
+
+        JitsiMeetViewListener listener = view.getListener();
 
         if (listener == null) {
             return;
         }
 
-        // TODO: Sigh, converting a ReadableMap to a HashMap is not supported
-        // until React Native 0.46.
-        final HashMap<String, Object> dataMap = new HashMap<>();
+        // TODO Converting a ReadableMap to a HashMap is not supported until
+        // React Native 0.46.
+        HashMap<String, Object> dataMap = new HashMap<>();
 
         switch (name) {
         case "CONFERENCE_FAILED":

ios/sdk/src/ExternalAPI.m

@@ -29,8 +29,10 @@ RCT_EXPORT_MODULE();
 /**
  * Dispatches an event that occurred on JavaScript to the view's delegate.
  *
- * - name: name of the event.
- * - data: dictionary (JSON object in JS) with data associated with the event.
+ * @param name The name of the event.
+ * @param data The details/specifics of the event to send determined
+ * by/associated with the specified {@code name}.
+ * @param scope
  */
 RCT_EXPORT_METHOD(sendEvent:(NSString *)name
                        data:(NSDictionary *)data

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

@@ -2,7 +2,6 @@
 
 import { NativeModules } from 'react-native';
 
-import { Platform } from '../../base/react';
 import {
     CONFERENCE_FAILED,
     CONFERENCE_JOINED,
@@ -102,13 +101,8 @@ function _sendEvent(store: Object, name: string, data: Object) {
     if (app) {
         const { externalAPIScope } = app.props;
 
-        // TODO Lift the restriction on the JitsiMeetView instance count on
-        // Android as well.
         if (externalAPIScope) {
             NativeModules.ExternalAPI.sendEvent(name, data, externalAPIScope);
-        } else if (Platform.OS === 'android') {
-            NativeModules.ExternalAPI.sendEvent(name, data);
-            console.warn(name);
         }
     }
 }