From fe1dbb9fdf2485721d044aadd7758832e1e50950 Mon Sep 17 00:00:00 2001
From: Bobak Oftadeh <bobakoftadeh@outlook.com>
Date: Thu, 24 May 2018 12:39:17 -0700
Subject: [PATCH] Warning modal now displays for iOS Chrome users
---
.../audio/audio-modal/component.jsx | 56 ++++++++++++++-----
.../components/audio/audio-modal/styles.scss | 15 +++++
.../imports/utils/deviceInfo.js | 1 +
bigbluebutton-html5/private/locales/en.json | 3 +
4 files changed, 62 insertions(+), 13 deletions(-)
mode change 100644 => 100755 bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx
mode change 100644 => 100755 bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss
mode change 100644 => 100755 bigbluebutton-html5/imports/utils/deviceInfo.js
diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx
old mode 100644
new mode 100755
index 96da6fbb93..458b1b6949
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ModalBase from '/imports/ui/components/modal/base/component';
import Button from '/imports/ui/components/button/component';
+import deviceInfo from '/imports/utils/deviceInfo';
import { defineMessages, injectIntl, intlShape } from 'react-intl';
import { styles } from './styles';
import PermissionsOverlay from '../permissions-overlay/component';
@@ -9,6 +10,7 @@ import AudioSettings from '../audio-settings/component';
import EchoTest from '../echo-test/component';
import Help from '../help/component';
+
const propTypes = {
intl: intlShape.isRequired,
closeModal: PropTypes.func.isRequired,
@@ -54,6 +56,18 @@ const intlMessages = defineMessages({
id: 'app.audioModal.audioChoiceLabel',
description: 'Join audio modal title',
},
+ iOSError: {
+ id: 'app.audioModal.iOSBrowser',
+ description: 'Audio/Video Not supported warning',
+ },
+ iOSErrorDescription: {
+ id: 'app.audioModal.iOSErrorDescription',
+ description: 'Audio/Video not supported description',
+ },
+ iOSErrorRecommendation: {
+ id: 'app.audioModal.iOSErrorRecommendation',
+ description: 'Audio/Video recommended action',
+ },
echoTestTitle: {
id: 'app.audioModal.echoTestTitle',
description: 'Title for the echo test',
@@ -274,7 +288,7 @@ class AudioModal extends Component {
size="jumbo"
onClick={skipCheck ? this.handleJoinMicrophone : this.handleGoToEchoTest}
/>
- : null}
+ : null}
{listenOnlyMode ?
<Button
className={styles.audioBtn}
@@ -284,7 +298,7 @@ class AudioModal extends Component {
size="jumbo"
onClick={this.handleJoinListenOnly}
/>
- : null}
+ : null}
</span>
);
}
@@ -297,13 +311,23 @@ class AudioModal extends Component {
const { content } = this.state;
+ if (deviceInfo.osType().isIOSChrome) {
+ return (
+ <div>
+ <div className={styles.warning}>!</div>
+ <h4 className={styles.main}>{intl.formatMessage(intlMessages.iOSError)}</h4>
+ <div className={styles.text}>{intl.formatMessage(intlMessages.iOSErrorDescription)}</div>
+ <div className={styles.text}>{intl.formatMessage(intlMessages.iOSErrorRecommendation)}
+ </div>
+ </div>);
+ }
if (this.skipAudioOptions()) {
return (
<span className={styles.connecting} role="alert">
- { !isEchoTest ?
- intl.formatMessage(intlMessages.connecting) :
- intl.formatMessage(intlMessages.connectingEchoTest)
- }
+ {!isEchoTest ?
+ intl.formatMessage(intlMessages.connecting) :
+ intl.formatMessage(intlMessages.connectingEchoTest)
+ }
</span>
);
}
@@ -363,22 +387,28 @@ class AudioModal extends Component {
return (
<span>
- { showPermissionsOvelay ? <PermissionsOverlay /> : null}
+ {showPermissionsOvelay ? <PermissionsOverlay /> : null}
<ModalBase
overlayClassName={styles.overlay}
className={styles.modal}
onRequestClose={this.closeModal}
>
- { !this.skipAudioOptions() ?
+ {!this.skipAudioOptions() ?
+
<header
data-test="audioModalHeader"
className={styles.header}
- >
- <h3 className={styles.title}>
- { content ?
+ >{
+ (!deviceInfo.osType().isIOSChrome ?
+ <h3 className={styles.title}>
+ {content ?
this.contents[content].title :
intl.formatMessage(intlMessages.audioChoiceLabel)}
- </h3>
+ </h3> : <h3 className={styles.title} />
+ )
+ }
+
+
<Button
data-test="modalBaseCloseButton"
className={styles.closeBtn}
@@ -392,7 +422,7 @@ class AudioModal extends Component {
: null
}
<div className={styles.content}>
- { this.renderContent() }
+ {this.renderContent()}
</div>
</ModalBase>
</span>
diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss
old mode 100644
new mode 100755
index 0c91f1bd70..b6b40d1bdc
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss
@@ -61,7 +61,22 @@
}
}
}
+.warning{
+ text-align: center;
+ font-weight: $headings-font-weight;
+ font-size: 5rem;
+ white-space: normal;
+}
+.text{
+ margin: $line-height-computed;
+ text-align: center;
+}
+.main{
+ margin: $line-height-computed;
+ text-align: center;
+ font-size: $font-size-large;
+}
.audioBtn {
&:focus {
outline: none !important;
diff --git a/bigbluebutton-html5/imports/utils/deviceInfo.js b/bigbluebutton-html5/imports/utils/deviceInfo.js
old mode 100644
new mode 100755
index c24fc25750..c4bcbb2019
--- a/bigbluebutton-html5/imports/utils/deviceInfo.js
+++ b/bigbluebutton-html5/imports/utils/deviceInfo.js
@@ -27,6 +27,7 @@ const deviceInfo = {
isWindows: window.navigator.userAgent.indexOf('Windows') !== -1,
isMac: window.navigator.userAgent.indexOf('Mac') !== -1,
isLinux: window.navigator.userAgent.indexOf('Linux') !== -1,
+ isIOSChrome: navigator.userAgent.match('CriOS'),
};
},
diff --git a/bigbluebutton-html5/private/locales/en.json b/bigbluebutton-html5/private/locales/en.json
index 93133e6cde..f5ca225f98 100755
--- a/bigbluebutton-html5/private/locales/en.json
+++ b/bigbluebutton-html5/private/locales/en.json
@@ -247,6 +247,9 @@
"app.audioModal.microphoneLabel": "Microphone",
"app.audioModal.listenOnlyLabel": "Listen Only",
"app.audioModal.audioChoiceLabel": "How would you like to join the audio?",
+ "app.audioModal.iOSBrowser": "Audio/Video Not Supported",
+ "app.audioModal.iOSErrorDescription": "At this time audio and video is not supported on Chrome for iOS.",
+ "app.audioModal.iOSErrorRecommendation": "We recommend using Safari iOS.",
"app.audioModal.audioChoiceDesc": "Select how to join the audio in this meeting",
"app.audioModal.closeLabel": "Close",
"app.audioModal.yes": "Yes",
--
GitLab