Merge pull request #7130 from capilkey/edge-html5-warnings

Add modal warnings for edge users

bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx

@@ -1,8 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import Modal from '/imports/ui/components/modal/simple/component';
 import Button from '/imports/ui/components/button/component';
-import { defineMessages, injectIntl, intlShape } from 'react-intl';
+import {
+  defineMessages, injectIntl, intlShape, FormattedMessage,
+} from 'react-intl';
 import { styles } from './styles';
 import PermissionsOverlay from '../permissions-overlay/component';
 import AudioSettings from '../audio-settings/component';
@@ -264,38 +267,53 @@ class AudioModal extends Component {
       skipCheck,
       audioLocked,
       isMobileNative,
+      isIEOrEdge,
     } = this.props;
 
     const showMicrophone = forceListenOnlyAttendee || audioLocked;
 
     return (
-      <span className={styles.audioOptions}>
-        {!showMicrophone && !isMobileNative
-          ? (
-            <Button
-              className={styles.audioBtn}
-              label={intl.formatMessage(intlMessages.microphoneLabel)}
-              icon="unmute"
-              circle
-              size="jumbo"
-              disabled={audioLocked}
-              onClick={skipCheck ? this.handleJoinMicrophone : this.handleGoToEchoTest}
+      <div>
+        <span className={styles.audioOptions}>
+          {!showMicrophone && !isMobileNative
+            ? (
+              <Button
+                className={styles.audioBtn}
+                label={intl.formatMessage(intlMessages.microphoneLabel)}
+                icon="unmute"
+                circle
+                size="jumbo"
+                disabled={audioLocked}
+                onClick={skipCheck ? this.handleJoinMicrophone : this.handleGoToEchoTest}
+              />
+            )
+            : null}
+          {listenOnlyMode
+            ? (
+              <Button
+                className={styles.audioBtn}
+                label={intl.formatMessage(intlMessages.listenOnlyLabel)}
+                icon="listen"
+                circle
+                size="jumbo"
+                onClick={this.handleJoinListenOnly}
+              />
+            )
+            : null}
+        </span>
+        {isIEOrEdge ? (
+          <p className={cx(styles.text, styles.browserWarning)}>
+            <FormattedMessage
+              id="app.audioModal.unsupportedBrowserLabel"
+              description="Warning when someone joins with a browser that isnt supported"
+              values={{
+                0: <a href="https://www.google.com/chrome/">Chrome</a>,
+                1: <a href="https://getfirefox.com">Firefox</a>,
+              }}
             />
-          )
-          : null}
-        {listenOnlyMode
-          ? (
-            <Button
-              className={styles.audioBtn}
-              label={intl.formatMessage(intlMessages.listenOnlyLabel)}
-              icon="listen"
-              circle
-              size="jumbo"
-              onClick={this.handleJoinListenOnly}
-            />
-          )
-          : null}
-      </span>
+          </p>
+        ) : null }
+      </div>
     );
   }
 

bigbluebutton-html5/imports/ui/components/audio/audio-modal/container.jsx

@@ -63,5 +63,6 @@ export default withModalMounter(withTracker(({ mountModal }) => {
     forceListenOnlyAttendee: listenOnlyMode && forceListenOnly && !Service.isUserModerator(),
     isIOSChrome: browser().name === 'crios',
     isMobileNative: navigator.userAgent.toLowerCase().includes('bbbnative'),
+    isIEOrEdge: browser().name === 'edge' || browser().name === 'ie',
   });
 })(AudioModalContainer));

bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss

@@ -33,6 +33,14 @@
   margin-top: auto;
   margin-bottom: auto;
   display: flex;
+  justify-content: center;
+}
+
+.browserWarning {
+  padding: 0.5rem;
+  border-width: 3px;
+  border-style: solid;
+  border-radius: 0.25rem;
 }
 
 .overlay {

bigbluebutton-html5/imports/ui/components/video-preview/component.jsx

@@ -1,12 +1,16 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { defineMessages, injectIntl, intlShape } from 'react-intl';
+import {
+  defineMessages, injectIntl, intlShape, FormattedMessage,
+} from 'react-intl';
 import Button from '/imports/ui/components/button/component';
 import { notify } from '/imports/ui/services/notification';
 import logger from '/imports/startup/client/logger';
 import Modal from '/imports/ui/components/modal/simple/component';
+import browser from 'browser-detect';
 import { styles } from './styles';
 
+
 const VIDEO_CONSTRAINTS = Meteor.settings.public.kurento.cameraConstraints;
 
 const propTypes = {
@@ -174,7 +178,6 @@ class VideoPreview extends Component {
       }
 
       constraints.video.deviceId = { exact: this.state.webcamDeviceId };
-
       try {
         await navigator.mediaDevices.getUserMedia(constraints);
       } catch (exception) {
@@ -209,13 +212,16 @@ class VideoPreview extends Component {
   }
 
   async webcamListener() {
-    const { cameraAllowed, isInitialDeviceSet } = this.state;
+    const { cameraAllowed, isInitialDeviceSet, isStartSharingDisabled } = this.state;
     const getDevices = await navigator.mediaDevices.enumerateDevices();
     const hasVideoInput = getDevices.filter(device => device.kind === 'videoinput').length > 0;
 
-    this.setState({
-      isStartSharingDisabled: !(hasVideoInput && cameraAllowed && isInitialDeviceSet),
-    });
+    const newSharingDisabled = !(hasVideoInput && cameraAllowed && isInitialDeviceSet);
+    if (newSharingDisabled !== isStartSharingDisabled) {
+      this.setState({
+        isStartSharingDisabled: newSharingDisabled,
+      });
+    }
   }
 
   handleJoinVideo() {
@@ -287,6 +293,18 @@ class VideoPreview extends Component {
               )}
           </div>
         </div>
+        {browser().name === 'edge' || browser().name === 'ie' ? (
+          <p className={styles.browserWarning}>
+            <FormattedMessage
+              id="app.audioModal.unsupportedBrowserLabel"
+              description="Warning when someone joins with a browser that isnt supported"
+              values={{
+                0: <a href="https://www.google.com/chrome/">Chrome</a>,
+                1: <a href="https://getfirefox.com">Firefox</a>,
+              }}
+            />
+          </p>
+        ) : null }
         <div className={styles.footer}>
           <div className={styles.actions}>
             <Button

bigbluebutton-html5/imports/ui/components/video-preview/styles.scss

@@ -90,3 +90,11 @@
   text-align: center;
 }
 
+.browserWarning {
+  padding: 0.5rem;
+  border-width: 3px;
+  border-style: solid;
+  border-radius: 0.25rem;
+  margin: var(--line-height-computed);
+  text-align: center;
+}

bigbluebutton-html5/private/locales/en.json

@@ -339,6 +339,7 @@
     "app.audioModal.iOSErrorDescription": "At this time audio and video are 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.unsupportedBrowserLabel": "It looks like you're using a browser that is not fully supported. Please use either {0} or {1} for full support.",
     "app.audioModal.closeLabel": "Close",
     "app.audioModal.yes": "Yes",
     "app.audioModal.no": "No",