Stop webcams when open audio modal

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

@@ -3,6 +3,7 @@ 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 { Session } from 'meteor/session';
 import {
   defineMessages, injectIntl, intlShape, FormattedMessage,
 } from 'react-intl';
@@ -135,7 +136,7 @@ class AudioModal extends Component {
     };
   }
 
-  componentWillMount() {
+  componentDidMount() {
     const {
       joinFullAudioImmediately,
       joinFullAudioEchoTest,
@@ -154,6 +155,7 @@ class AudioModal extends Component {
     if (forceListenOnlyAttendee || audioLocked) {
       this.handleJoinListenOnly();
     }
+    Session.set('audioModalIsOpen', true);
   }
 
   componentWillUnmount() {
@@ -165,6 +167,7 @@ class AudioModal extends Component {
     if (isEchoTest) {
       exitAudio();
     }
+    Session.set('audioModalIsOpen', false);
   }
 
   handleGoToAudioOptions() {

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

@@ -22,9 +22,31 @@ export default class Media extends Component {
     window.dispatchEvent(new Event('resize'));
   }
 
+  componentDidUpdate(prevProps) {
+    const {
+      userWasInWebcam,
+      audioModalIsOpen,
+      joinVideo,
+    } = this.props;
+
+    const {
+      audioModalIsOpen: oldAudioModalIsOpen,
+    } = prevProps;
+
+    if ((!audioModalIsOpen && oldAudioModalIsOpen) && userWasInWebcam) {
+      Session.set('userWasInWebcam', false);
+      joinVideo();
+    }
+  }
+
   render() {
     const {
-      swapLayout, floatingOverlay, hideOverlay, disableVideo, children,
+      swapLayout,
+      floatingOverlay,
+      hideOverlay,
+      disableVideo,
+      children,
+      audioModalIsOpen,
     } = this.props;
 
     const contentClassName = cx({
@@ -43,7 +65,7 @@ export default class Media extends Component {
           {children}
         </div>
         <div className={!swapLayout ? overlayClassName : contentClassName}>
-          { !disableVideo ? <VideoProviderContainer /> : null }
+          { !disableVideo && !audioModalIsOpen ? <VideoProviderContainer /> : null }
         </div>
       </div>
     );

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

@@ -3,6 +3,7 @@ import { withTracker } from 'meteor/react-meteor-data';
 import Settings from '/imports/ui/services/settings';
 import { defineMessages, injectIntl, intlShape } from 'react-intl';
 import PropTypes from 'prop-types';
+import { Session } from 'meteor/session';
 import { notify } from '/imports/ui/services/notification';
 import VideoService from '/imports/ui/components/video-provider/service';
 import getFromUserSettings from '/imports/ui/services/users-settings';
@@ -104,10 +105,12 @@ class MediaContainer extends Component {
 export default withModalMounter(withTracker(() => {
   const { dataSaving } = Settings;
   const { viewParticipantsWebcams, viewScreenshare } = dataSaving;
-
   const hidePresentation = getFromUserSettings('hidePresentation', LAYOUT_CONFIG.hidePresentation);
   const data = {
     children: <DefaultContent />,
+    audioModalIsOpen: Session.get('audioModalIsOpen'),
+    userWasInWebcam: Session.get('userWasInWebcam'),
+    joinVideo: VideoService.joinVideo,
   };
 
   if (MediaService.shouldShowWhiteboard() && !hidePresentation) {
@@ -137,7 +140,6 @@ export default withModalMounter(withTracker(() => {
   if (data.isScreensharing) {
     data.floatingOverlay = false;
   }
-
   if (MediaService.shouldShowExternalVideo()) {
     data.children = (
       <ExternalVideoContainer

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

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
+import { Session } from 'meteor/session';
 import { notify } from '/imports/ui/services/notification';
 import VisibilityEvent from '/imports/utils/visibilityEvent';
 import { fetchWebRTCMappedStunTurnServers } from '/imports/utils/fetchStunTurnServers';
 import ReconnectingWebSocket from 'reconnecting-websocket';
 import logger from '/imports/startup/client/logger';
-import { Session } from 'meteor/session';
 import browser from 'browser-detect';
 import { tryGenerateIceCandidates } from '../../../utils/safari-webrtc';
 import Auth from '/imports/ui/services/auth';
@@ -187,6 +187,7 @@ class VideoProvider extends Component {
     // Unshare user webcam
     if (this.sharedWebcam) {
       this.unshareWebcam();
+      Session.set('userWasInWebcam', true);
     }
 
     Object.keys(this.webRtcPeers).forEach((id) => {