fix(webcam): unresponsive webcam selector button

Video preview modal opens when user clicks on the webcam selector
button/chevron even if the client is set to skip video preview
(userdata-bbb_skip_video_preview=true).

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

@@ -217,6 +217,7 @@ class VideoPreview extends Component {
   componentDidMount() {
     const {
       webcamDeviceId,
+      forceOpen,
     } = this.props;
 
     this._isMounted = true;
@@ -225,7 +226,7 @@ class VideoPreview extends Component {
       navigator.mediaDevices.enumerateDevices().then((devices) => {
         VideoService.updateNumberOfDevices(devices);
         // Video preview skip is activated, short circuit via a simpler procedure
-        if (PreviewService.getSkipVideoPreview()) return this.skipVideoPreview();
+        if (PreviewService.getSkipVideoPreview() && !forceOpen) return this.skipVideoPreview();
         // Late enumerateDevices resolution, stop.
         if (!this._isMounted) return;
 
@@ -717,6 +718,7 @@ class VideoPreview extends Component {
       intl,
       sharedDevices,
       hasVideoStream,
+      forceOpen,
     } = this.props;
 
     const {
@@ -725,7 +727,9 @@ class VideoPreview extends Component {
       deviceError,
       previewError,
     } = this.state;
-    const shouldDisableButtons = PreviewService.getSkipVideoPreview() && !(deviceError || previewError);
+    const shouldDisableButtons = PreviewService.getSkipVideoPreview()
+    && !forceOpen
+    && !(deviceError || previewError);
 
     const shared = sharedDevices.includes(webcamDeviceId);
 
@@ -785,6 +789,7 @@ class VideoPreview extends Component {
     const {
       intl,
       isCamLocked,
+      forceOpen,
     } = this.props;
 
     if (isCamLocked === true) {
@@ -792,7 +797,7 @@ class VideoPreview extends Component {
       return null;
     }
 
-    if (PreviewService.getSkipVideoPreview()) {
+    if (PreviewService.getSkipVideoPreview() && !forceOpen) {
       return null;
     }
 
@@ -801,7 +806,9 @@ class VideoPreview extends Component {
       previewError,
     } = this.state;
 
-    const allowCloseModal = !!(deviceError || previewError) || !PreviewService.getSkipVideoPreview();
+    const allowCloseModal = !!(deviceError || previewError)
+    || !PreviewService.getSkipVideoPreview()
+    || forceOpen;
 
     return (
       <Modal

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

@@ -49,6 +49,7 @@ const propTypes = {
   intl: PropTypes.object.isRequired,
   hasVideoStream: PropTypes.bool.isRequired,
   mountVideoPreview: PropTypes.func.isRequired,
+  forceMountVideoPreview: PropTypes.func.isRequired,
 };
 
 const JoinVideoButton = ({
@@ -56,6 +57,7 @@ const JoinVideoButton = ({
   hasVideoStream,
   disableReason,
   mountVideoPreview,
+  forceMountVideoPreview,
 }) => {
   const { isMobile } = deviceInfo;
   const shouldEnableWebcamSelectorButton = ENABLE_WEBCAM_SELECTOR_BUTTON
@@ -79,7 +81,7 @@ const JoinVideoButton = ({
 
   const handleOpenAdvancedOptions = (e) => {
     e.stopPropagation();
-    mountVideoPreview();
+    forceMountVideoPreview();
   };
 
   let label = exitVideo()

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

@@ -15,11 +15,12 @@ const JoinVideoOptionsContainer = (props) => {
     ...restProps
   } = props;
 
-  const mountVideoPreview = () => { mountModal(<VideoPreviewContainer />); };
+  const mountVideoPreview = () => { mountModal(<VideoPreviewContainer forceOpen={false} />); };
+  const forceMountVideoPreview = () => { mountModal(<VideoPreviewContainer forceOpen />); };
 
   return (
     <JoinVideoButton {...{
-      mountVideoPreview, hasVideoStream, disableReason, ...restProps,
+      mountVideoPreview, forceMountVideoPreview, hasVideoStream, disableReason, ...restProps,
     }}
     />
   );