diff --git a/react/features/base/environment/environment.js b/react/features/base/environment/environment.js index 6985f7f4f..c2eca0cf7 100644 --- a/react/features/base/environment/environment.js +++ b/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. diff --git a/react/features/deep-linking/components/DeepLinkingMobilePage.web.js b/react/features/deep-linking/components/DeepLinkingMobilePage.web.js index ceb23ba4b..bd60dcecb 100644 --- a/react/features/deep-linking/components/DeepLinkingMobilePage.web.js +++ b/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, + /** * The function to translate human-readable text. */ @@ -60,6 +68,7 @@ class DeepLinkingMobilePage extends Component { // 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 { { t(`${_TNS}.downloadApp`) } + { + isSupportedMobileBrowser() + && + + + } { renderPromotionalFooter() } { '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; /** diff --git a/react/features/deep-linking/functions.js b/react/features/deep-linking/functions.js index 42429c29f..c9f08f107 100644 --- a/react/features/deep-linking/functions.js +++ b/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);