Merge pull request #7250 from KDSBrowne/2.2-suggest-ios-update

Add toast indicating to upgrade iOS version (12.2+)

bigbluebutton-html5/imports/ui/components/app/component.jsx

@@ -42,6 +42,10 @@ const intlMessages = defineMessages({
     id: 'app.actionsBar.label',
     description: 'Aria-label for ActionsBar Section',
   },
+  iOSWarning: {
+    id: 'app.iOSWarning.label',
+    description: 'message indicating to upgrade ios version',
+  },
 });
 
 const propTypes = {
@@ -77,7 +81,9 @@ class App extends Component {
   }
 
   componentDidMount() {
-    const { locale } = this.props;
+    const {
+      locale, notify, intl, validIOSVersion,
+    } = this.props;
     const BROWSER_RESULTS = browser();
     const isMobileBrowser = BROWSER_RESULTS.mobile || BROWSER_RESULTS.os.includes('Android');
 
@@ -93,6 +99,14 @@ class App extends Component {
       body.classList.add(`os-${BROWSER_RESULTS.os.split(' ').shift().toLowerCase()}`);
     }
 
+    if (!validIOSVersion()) {
+      notify(
+        intl.formatMessage(intlMessages.iOSWarning),
+        'error',
+        'warning',
+      );
+    }
+
     this.handleWindowResize();
     window.addEventListener('resize', this.handleWindowResize, false);
 

bigbluebutton-html5/imports/ui/components/app/container.jsx

@@ -4,7 +4,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import Auth from '/imports/ui/services/auth';
 import Users from '/imports/api/users';
-
+import { notify } from '/imports/ui/services/notification';
 import ClosedCaptionsContainer from '/imports/ui/components/closed-captions/container';
 import getFromUserSettings from '/imports/ui/services/users-settings';
 
@@ -14,6 +14,7 @@ import {
   getFontSize,
   getCaptionsStatus,
   getBreakoutRooms,
+  validIOSVersion,
 } from './service';
 
 import { withModalMounter } from '../modal/service';
@@ -99,6 +100,8 @@ export default injectIntl(withModalMounter(withTracker(({ intl, baseControls })
     openPanel: Session.get('openPanel'),
     userListIsOpen: !Session.equals('openPanel', ''),
     UserInfo,
+    notify,
+    validIOSVersion,
   };
 })(AppContainer)));
 

bigbluebutton-html5/imports/ui/components/app/service.js

@@ -25,10 +25,22 @@ function meetingIsBreakout() {
   return (meeting && meeting.meetingProp.isBreakout);
 }
 
+const validIOSVersion = () => {
+  const SUPPORTED_OS_VERSION = 12.2;
+  const iosMatch = navigator.userAgent.match(/OS (\d+)_(\d+) /);
+  if (iosMatch) {
+    const versionNumber = iosMatch[0].split(' ')[1].replace('_', '.');
+    const isInvalid = parseFloat(versionNumber) < SUPPORTED_OS_VERSION;
+    if (isInvalid) return false;
+  }
+  return true;
+};
+
 export {
   getCaptionsStatus,
   getFontSize,
   meetingIsBreakout,
   getBreakoutRooms,
   getMeeting,
+  validIOSVersion,
 };

bigbluebutton-html5/imports/ui/components/video-provider/video-button/component.jsx

@@ -22,9 +22,12 @@ const intlMessages = defineMessages({
     id: 'app.video.videoLocked',
     description: 'video disabled label',
   },
+  iOSWarning: {
+    id: 'app.iOSWarning.label',
+    description: 'message indicating to upgrade ios version',
+  },
 });
 
-
 const propTypes = {
   intl: intlShape.isRequired,
   isSharingVideo: PropTypes.bool.isRequired,
@@ -39,27 +42,42 @@ const JoinVideoButton = ({
   isDisabled,
   handleJoinVideo,
   handleCloseVideo,
-}) => (
-  <Button
-    label={isDisabled
-      ? intl.formatMessage(intlMessages.videoLocked)
-      : (isSharingVideo
-        ? intl.formatMessage(intlMessages.leaveVideo)
-        : intl.formatMessage(intlMessages.joinVideo)
-      )
+  notify,
+  validIOSVersion,
+}) => {
+  const verifyIOS = () => {
+    if (!validIOSVersion()) {
+      return notify(
+        intl.formatMessage(intlMessages.iOSWarning),
+        'error',
+        'warning',
+      );
+    }
+    handleJoinVideo();
+  };
+
+  return (
+    <Button
+      label={isDisabled
+        ? intl.formatMessage(intlMessages.videoLocked)
+        : (isSharingVideo
+          ? intl.formatMessage(intlMessages.leaveVideo)
+          : intl.formatMessage(intlMessages.joinVideo)
+        )
       }
-    className={cx(styles.button, isSharingVideo || styles.btn)}
-    onClick={isSharingVideo ? handleCloseVideo : handleJoinVideo}
-    hideLabel
-    aria-label={intl.formatMessage(intlMessages.videoButtonDesc)}
-    color={isSharingVideo ? 'primary' : 'default'}
-    icon={isSharingVideo ? 'video' : 'video_off'}
-    ghost={!isSharingVideo}
-    size="lg"
-    circle
-    disabled={isDisabled}
-  />
-);
+      className={cx(styles.button, isSharingVideo || styles.btn)}
+      onClick={isSharingVideo ? handleCloseVideo : verifyIOS}
+      hideLabel
+      aria-label={intl.formatMessage(intlMessages.videoButtonDesc)}
+      color={isSharingVideo ? 'primary' : 'default'}
+      icon={isSharingVideo ? 'video' : 'video_off'}
+      ghost={!isSharingVideo}
+      size="lg"
+      circle
+      disabled={isDisabled}
+    />
+  );
+};
 
 JoinVideoButton.propTypes = propTypes;
 export default injectIntl(JoinVideoButton);

bigbluebutton-html5/imports/ui/components/video-provider/video-button/container.jsx

@@ -3,9 +3,14 @@ import { withTracker } from 'meteor/react-meteor-data';
 import { injectIntl } from 'react-intl';
 import { withModalMounter } from '/imports/ui/components/modal/service';
 import VideoPreviewContainer from '/imports/ui/components/video-preview/container';
+import { notify } from '/imports/ui/services/notification';
 import JoinVideoButton from './component';
 import VideoButtonService from './service';
 
+import {
+  validIOSVersion,
+} from '/imports/ui/components/app/service';
+
 const JoinVideoOptionsContainer = (props) => {
   const {
     isSharingVideo,
@@ -21,7 +26,12 @@ const JoinVideoOptionsContainer = (props) => {
 
   const mountPreview = () => { mountModal(<VideoPreviewContainer />); };
 
-  return !isMobileNative && <JoinVideoButton {...{ handleJoinVideo: mountPreview, handleCloseVideo, isSharingVideo, isDisabled, ...restProps }} />;
+  return !isMobileNative && (
+  <JoinVideoButton {...{
+    handleJoinVideo: mountPreview, handleCloseVideo, isSharingVideo, isDisabled, ...restProps,
+  }}
+  />
+  );
 };
 
 export default withModalMounter(injectIntl(withTracker(() => ({
@@ -30,4 +40,6 @@ export default withModalMounter(injectIntl(withTracker(() => ({
   isDisabled: VideoButtonService.isDisabled(),
   videoShareAllowed: VideoButtonService.videoShareAllowed(),
   isMobileNative: navigator.userAgent.toLowerCase().includes('bbbnative'),
+  notify,
+  validIOSVersion,
 }))(JoinVideoOptionsContainer)));

bigbluebutton-html5/private/locales/en.json

@@ -580,5 +580,6 @@
     "app.externalVideo.close": "Close",
     "app.externalVideo.noteLabel": "Note: Shared YouTube videos will not appear in the recording",
     "app.actionsBar.actionsDropdown.shareExternalVideo": "Share YouTube video",
-    "app.actionsBar.actionsDropdown.stopShareExternalVideo": "Stop sharing YouTube video"
+    "app.actionsBar.actionsDropdown.stopShareExternalVideo": "Stop sharing YouTube video",
+    "app.iOSWarning.label": "Please upgrade to iOS 12.2 or higher"
 }