refactor(webcam): cancellable button

Makes it possible to cancel webcam sharing while connecting.
Simplifies button state logic.

bigbluebutton-html5/imports/ui/components/video-provider/service.js

@@ -726,10 +726,15 @@ class VideoService {
     this.exitVideo();
   }
 
+  getStatus() {
+    if (this.isConnecting) return 'videoConnecting';
+    if (this.isConnected) return 'connected';
+    return 'disconnected';
+  }
+
   disableReason() {
     const locks = {
       videoLocked: this.isUserLocked(),
-      videoConnecting: this.isConnecting,
       camCapReached: this.hasCapReached() && !this.hasVideoStream(),
       meteorDisconnected: !Meteor.status().connected
     };
@@ -989,6 +994,7 @@ export default {
   getAuthenticatedURL: () => videoService.getAuthenticatedURL(),
   isLocalStream: cameraId => videoService.isLocalStream(cameraId),
   hasVideoStream: () => videoService.hasVideoStream(),
+  getStatus: () => videoService.getStatus(),
   disableReason: () => videoService.disableReason(),
   playStart: cameraId => videoService.playStart(cameraId),
   getCameraProfile: () => videoService.getCameraProfile(),

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

@@ -50,50 +50,62 @@ const JOIN_VIDEO_DELAY_MILLISECONDS = 500;
 const propTypes = {
   intl: PropTypes.object.isRequired,
   hasVideoStream: PropTypes.bool.isRequired,
+  status: PropTypes.string.isRequired,
   mountVideoPreview: PropTypes.func.isRequired,
-  forceMountVideoPreview: PropTypes.func.isRequired,
 };
 
 const JoinVideoButton = ({
   intl,
   hasVideoStream,
+  status,
   disableReason,
   mountVideoPreview,
-  forceMountVideoPreview,
 }) => {
   const { isMobile } = deviceInfo;
-  const shouldEnableWebcamSelectorButton = ENABLE_WEBCAM_SELECTOR_BUTTON
-    && hasVideoStream
-    && !isMobile;
-  const exitVideo = () => hasVideoStream
-    && !isMobile
-    && (!VideoService.isMultipleCamerasEnabled() || shouldEnableWebcamSelectorButton);
   const isMobileSharingCamera = hasVideoStream && isMobile;
+  const isDesktopSharingCamera = hasVideoStream && !isMobile;
+  const shouldEnableWebcamSelectorButton = ENABLE_WEBCAM_SELECTOR_BUTTON
+    && isDesktopSharingCamera;
+  const exitVideo = () => isDesktopSharingCamera && (!VideoService.isMultipleCamerasEnabled()
+    || shouldEnableWebcamSelectorButton);
 
   const handleOnClick = debounce(() => {
     if (!validIOSVersion()) {
       return VideoService.notify(intl.formatMessage(intlMessages.iOSWarning));
     }
 
-    if (exitVideo()) {
-      VideoService.exitVideo();
-    } else if (isMobileSharingCamera) {
-      forceMountVideoPreview();
-    } else {
-      mountVideoPreview();
+    switch (status) {
+      case 'videoConnecting':
+        VideoService.stopVideo();
+        break;
+      case 'connected':
+      default:
+        if (exitVideo()) {
+          VideoService.exitVideo();
+        } else {
+          mountVideoPreview(isMobileSharingCamera);
+        }
     }
   }, JOIN_VIDEO_DELAY_MILLISECONDS);
 
   const handleOpenAdvancedOptions = (e) => {
     e.stopPropagation();
-    forceMountVideoPreview();
+    mountVideoPreview(isMobileSharingCamera);
   };
 
-  let label = exitVideo()
-    ? intl.formatMessage(intlMessages.leaveVideo)
-    : intl.formatMessage(intlMessages.joinVideo);
+  const getMessageFromStatus = () => {
+    let statusMessage = status;
+    if (status !== 'videoConnecting') {
+      statusMessage = exitVideo() ? 'leaveVideo' : 'joinVideo';
+    }
+    return statusMessage;
+  };
 
-  if (disableReason) label = intl.formatMessage(intlMessages[disableReason]);
+  const label = disableReason
+    ? intl.formatMessage(intlMessages[disableReason])
+    : intl.formatMessage(intlMessages[getMessageFromStatus()]);
+
+  const isSharing = hasVideoStream || status === 'videoConnecting';
 
   const renderEmojiButton = () => (
     shouldEnableWebcamSelectorButton
@@ -114,9 +126,9 @@ const JoinVideoButton = ({
         data-test={hasVideoStream ? 'leaveVideo' : 'joinVideo'}
         onClick={handleOnClick}
         hideLabel
-        color={hasVideoStream ? 'primary' : 'default'}
-        icon={hasVideoStream ? 'video' : 'video_off'}
-        ghost={!hasVideoStream}
+        color={isSharing ? 'primary' : 'default'}
+        icon={isSharing ? 'video' : 'video_off'}
+        ghost={!isSharing}
         size="lg"
         circle
         disabled={!!disableReason}

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

@@ -10,17 +10,17 @@ const JoinVideoOptionsContainer = (props) => {
   const {
     hasVideoStream,
     disableReason,
+    status,
     intl,
     mountModal,
     ...restProps
   } = props;
 
-  const mountVideoPreview = () => { mountModal(<VideoPreviewContainer forceOpen={false} />); };
-  const forceMountVideoPreview = () => { mountModal(<VideoPreviewContainer forceOpen />); };
+  const mountVideoPreview = (force) => { mountModal(<VideoPreviewContainer forceOpen={force} />); };
 
   return (
     <JoinVideoButton {...{
-      mountVideoPreview, forceMountVideoPreview, hasVideoStream, disableReason, ...restProps,
+      mountVideoPreview, hasVideoStream, disableReason, status, ...restProps,
     }}
     />
   );
@@ -29,4 +29,5 @@ const JoinVideoOptionsContainer = (props) => {
 export default withModalMounter(injectIntl(withTracker(() => ({
   hasVideoStream: VideoService.hasVideoStream(),
   disableReason: VideoService.disableReason(),
+  status: VideoService.getStatus(),
 }))(JoinVideoOptionsContainer)));