feat: show option to join via browser on supported mobile browsers

Currently Chromium based browsers and Firefox are supported on Android
Only Safari is supported on iOS

react/features/base/environment/environment.js

@@ -1,6 +1,7 @@
 // @flow
 
 import JitsiMeetJS from '../lib-jitsi-meet';
+import Platform from '../react/Platform';
 
 import { isMobileBrowser } from './utils';
 
@@ -82,6 +83,18 @@ export function isSupportedBrowser() {
     return isMobileBrowser() || JitsiMeetJS.isWebRtcSupported();
 }
 
+/**
+ * Returns whether or not the current environment is a supported
+ * browser on a mobile device.
+ *
+ * @returns {boolean}
+ */
+export function isSupportedMobileBrowser() {
+    return (Platform.OS === 'android' && browser.isChromiumBased())
+        || (Platform.OS === 'android' && browser.isFirefox())
+        || (Platform.OS === 'ios' && browser.isSafari());
+}
+
 /**
  * Runs various browser checks to know if the current browser is found within
  * the list.

react/features/deep-linking/components/DeepLinkingMobilePage.web.js

@@ -1,12 +1,15 @@
 // @flow
 
 import React, { Component } from 'react';
+import type { Dispatch } from 'redux';
 
 import { createDeepLinkingPageEvent, sendAnalytics } from '../../analytics';
+import { isSupportedMobileBrowser } from '../../base/environment';
 import { translate } from '../../base/i18n';
 import { Platform } from '../../base/react';
 import { connect } from '../../base/redux';
 import { DialInSummary } from '../../invite';
+import { openWebApp } from '../actions';
 import { _TNS } from '../constants';
 import { generateDeepLinkingURL } from '../functions';
 import { renderPromotionalFooter } from '../renderPromotionalFooter';
@@ -37,6 +40,11 @@ type Props = {
      */
     _room: string,
 
+    /**
+     * Used to dispatch actions from the buttons.
+     */
+    dispatch: Dispatch<any>,
+
     /**
      * The function to translate human-readable text.
      */
@@ -60,6 +68,7 @@ class DeepLinkingMobilePage extends Component<Props> {
 
         // Bind event handlers so they are only bound once per instance.
         this._onDownloadApp = this._onDownloadApp.bind(this);
+        this._onLaunchWeb = this._onLaunchWeb.bind(this);
         this._onOpenApp = this._onOpenApp.bind(this);
     }
 
@@ -146,6 +155,16 @@ class DeepLinkingMobilePage extends Component<Props> {
                             { t(`${_TNS}.downloadApp`) }
                         </button>
                     </a>
+                    {
+                        isSupportedMobileBrowser()
+                            && <a
+                                onClick = { this._onLaunchWeb }
+                                target = '_top'>
+                                <button className = { downloadButtonClassName }>
+                                    { t(`${_TNS}.launchWebButton`) }
+                                </button>
+                            </a>
+                    }
                     { renderPromotionalFooter() }
                     <DialInSummary
                         className = 'deep-linking-dial-in'
@@ -205,6 +224,20 @@ class DeepLinkingMobilePage extends Component<Props> {
                 'clicked', 'downloadAppButton', { isMobileBrowser: true }));
     }
 
+    _onLaunchWeb: () => void;
+
+    /**
+     * Handles launch web button clicks.
+     *
+     * @returns {void}
+     */
+    _onLaunchWeb() {
+        sendAnalytics(
+            createDeepLinkingPageEvent(
+                'clicked', 'launchWebButton', { isMobileBrowser: true }));
+        this.props.dispatch(openWebApp());
+    }
+
     _onOpenApp: () => void;
 
     /**

react/features/deep-linking/functions.js

@@ -50,9 +50,10 @@ export function generateDeepLinkingURL() {
  */
 export function getDeepLinkingPage(state) {
     const { room } = state['features/base/conference'];
+    const { launchInWeb } = state['features/deep-linking'];
 
     // Show only if we are about to join a conference.
-    if (!room || state['features/base/config'].disableDeepLinking) {
+    if (launchInWeb || !room || state['features/base/config'].disableDeepLinking) {
         return Promise.resolve();
     }
 
@@ -66,13 +67,6 @@ export function getDeepLinkingPage(state) {
                 ? DeepLinkingMobilePage : NoMobileApp);
     }
 
-    // desktop
-    const { launchInWeb } = state['features/deep-linking'];
-
-    if (launchInWeb) {
-        return Promise.resolve();
-    }
-
     return _openDesktopApp(state).then(
         // eslint-disable-next-line no-confusing-arrow
         result => result ? DeepLinkingDesktopPage : undefined);