Client: Camera as content as conent added to disabled features

bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx

@@ -35,6 +35,7 @@ const propTypes = {
   setMeetingLayout: PropTypes.func.isRequired,
   setPushLayout: PropTypes.func.isRequired,
   showPushLayout: PropTypes.bool.isRequired,
+  isCameraAsContentEnabled: PropTypes.bool.isRequired,
 };
 
 const defaultProps = {
@@ -193,33 +194,27 @@ class ActionsDropdown extends PureComponent {
       isCameraAsContentEnabled,
     } = this.props;
 
-    const {
+    const { pollBtnLabel, presentationLabel, takePresenter } = intlMessages;
-      pollBtnLabel,
-      presentationLabel,
-      takePresenter,
-    } = intlMessages;
 
-    const {
+    const { formatMessage } = intl;
-      formatMessage,
-    } = intl;
 
     const actions = [];
 
     if (amIPresenter && isPresentationEnabled()) {
       actions.push({
-        icon: "upload",
+        icon: 'upload',
-        dataTest: "managePresentations",
+        dataTest: 'managePresentations',
         label: formatMessage(presentationLabel),
         key: this.presentationItemId,
         onClick: handlePresentationClick,
         dividerTop: this.props?.presentations?.length > 1 ? true : false,
-      })
+      });
     }
 
     if (amIPresenter && isPollingEnabled) {
       actions.push({
-        icon: "polling",
+        icon: 'polling',
-        dataTest: "polling",
+        dataTest: 'polling',
         label: formatMessage(pollBtnLabel),
         key: this.pollId,
         onClick: () => {
@@ -236,12 +231,12 @@ class ActionsDropdown extends PureComponent {
           });
           Session.set('forcePollOpen', true);
         },
-      })
+      });
     }
 
     if (!amIPresenter && amIModerator) {
       actions.push({
-        icon: "presentation",
+        icon: 'presentation',
         label: formatMessage(takePresenter),
         key: this.takePresenterId,
         onClick: () => handleTakePresenter(),
@@ -250,29 +245,31 @@ class ActionsDropdown extends PureComponent {
 
     if (amIPresenter && allowExternalVideo) {
       actions.push({
-        icon: !isSharingVideo ? "external-video" : "external-video_off",
+        icon: !isSharingVideo ? 'external-video' : 'external-video_off',
-        label: !isSharingVideo ? intl.formatMessage(intlMessages.startExternalVideoLabel)
+        label: !isSharingVideo
+          ? intl.formatMessage(intlMessages.startExternalVideoLabel)
           : intl.formatMessage(intlMessages.stopExternalVideoLabel),
-        key: "external-video",
+        key: 'external-video',
         onClick: isSharingVideo ? stopExternalVideoShare : this.handleExternalVideoClick,
-        dataTest: "shareExternalVideo",
+        dataTest: 'shareExternalVideo',
-      })
+      });
     }
 
     if (amIPresenter && isSelectRandomUserEnabled) {
       actions.push({
-        icon: "user",
+        icon: 'user',
         label: intl.formatMessage(intlMessages.selectRandUserLabel),
         key: this.selectUserRandId,
         onClick: () => this.setRandomUserSelectModalIsOpen(true),
-        dataTest: "selectRandomUser",
+        dataTest: 'selectRandomUser',
-      })
+      });
     }
 
     if (amIModerator && isTimerEnabled && isTimerFeatureEnabled()) {
       actions.push({
         icon: 'time',
-        label: isTimerActive ? intl.formatMessage(intlMessages.deactivateTimerLabel)
+        label: isTimerActive
+          ? intl.formatMessage(intlMessages.deactivateTimerLabel)
           : intl.formatMessage(intlMessages.activateTimerLabel),
         key: this.timerId,
         onClick: () => this.handleTimerClick(),
@@ -289,7 +286,7 @@ class ActionsDropdown extends PureComponent {
       });
     }
 
-    if (isLayoutsEnabled()){
+    if (isLayoutsEnabled()) {
       actions.push({
         icon: 'send',
         label: intl.formatMessage(intlMessages.layoutModal),
@@ -300,6 +297,7 @@ class ActionsDropdown extends PureComponent {
     }
 
     if (isCameraAsContentEnabled && amIPresenter && !isMobile) {
+      console.log(isCameraAsContentEnabled);
       actions.push({
         icon: hasCameraAsContent ? 'video_off' : 'video',
         label: hasCameraAsContent
@@ -309,9 +307,9 @@ class ActionsDropdown extends PureComponent {
         onClick: hasCameraAsContent
           ? screenshareHasEnded
           : () => {
-            screenshareHasEnded();
+              screenshareHasEnded();
-            this.setCameraAsContentModalIsOpen(true);
+              this.setCameraAsContentModalIsOpen(true);
-          },
+            },
       });
     }
 
@@ -319,11 +317,7 @@ class ActionsDropdown extends PureComponent {
   }
 
   makePresentationItems() {
-    const {
+    const { presentations, setPresentation, podIds } = this.props;
-      presentations,
-      setPresentation,
-      podIds,
-    } = this.props;
 
     if (!podIds || podIds.length < 1) return [];
 
@@ -332,57 +326,57 @@ class ActionsDropdown extends PureComponent {
     const { podId } = podIds[0];
 
     const presentationItemElements = presentations
-      .sort((a, b) => (a.name.localeCompare(b.name)))
+      .sort((a, b) => a.name.localeCompare(b.name))
       .map((p) => {
         const customStyles = { color: colorPrimary };
 
-        return (
+        return {
-          {
+          customStyles: p.current ? customStyles : null,
-            customStyles: p.current ? customStyles : null,
+          icon: 'file',
-            icon: "file",
+          iconRight: p.current ? 'check' : null,
-            iconRight: p.current ? 'check' : null,
+          selected: p.current ? true : false,
-            selected: p.current ? true : false,
+          label: p.name,
-            label: p.name,
+          description: 'uploaded presentation file',
-            description: "uploaded presentation file",
+          key: `uploaded-presentation-${p.id}`,
-            key: `uploaded-presentation-${p.id}`,
+          onClick: () => {
-            onClick: () => {
+            setPresentation(p.id, podId);
-              setPresentation(p.id, podId);
+          },
-            },
+        };
-          }
-        );
       });
 
     return presentationItemElements;
   }
 
   setExternalVideoModalIsOpen(value) {
-    this.setState({isExternalVideoModalOpen: value});
+    this.setState({ isExternalVideoModalOpen: value });
   }
   setRandomUserSelectModalIsOpen(value) {
-    this.setState({isRandomUserSelectModalOpen: value});
+    this.setState({ isRandomUserSelectModalOpen: value });
   }
   setLayoutModalIsOpen(value) {
-    this.setState({isLayoutModalOpen: value});
+    this.setState({ isLayoutModalOpen: value });
   }
   setCameraAsContentModalIsOpen(value) {
-    this.setState({isCameraAsContentModalOpen: value});
+    this.setState({ isCameraAsContentModalOpen: value });
   }
   setPropsToPassModal(value) {
-    this.setState({propsToPassModal: value});
+    this.setState({ propsToPassModal: value });
   }
-  setForceOpen(value){
+  setForceOpen(value) {
-    this.setState({forceOpen: value});
+    this.setState({ forceOpen: value });
   }
 
   renderModal(isOpen, setIsOpen, priority, Component) {
-    return isOpen ? <Component 
+    return isOpen ? (
-      {...{
+      <Component
-        onRequestClose: () => setIsOpen(false),
+        {...{
-        priority,
+          onRequestClose: () => setIsOpen(false),
-        setIsOpen,
+          priority,
-        isOpen
+          setIsOpen,
-      }}
+          isOpen,
-    /> : null
+        }}
+      />
+    ) : null;
   }
 
   render() {
@@ -407,13 +401,14 @@ class ActionsDropdown extends PureComponent {
 
     const availableActions = this.getAvailableActions();
     const availablePresentations = this.makePresentationItems();
-    const children = availablePresentations.length > 1 && amIPresenter
+    const children =
-      ? availablePresentations.concat(availableActions) : availableActions;
+      availablePresentations.length > 1 && amIPresenter
+        ? availablePresentations.concat(availableActions)
+        : availableActions;
 
     const customStyles = { top: '-1rem' };
 
-    if (availableActions.length === 0
+    if (availableActions.length === 0 || !isMeteorConnected) {
-      || !isMeteorConnected) {
       return null;
     }
 
@@ -438,24 +433,41 @@ class ActionsDropdown extends PureComponent {
           }
           actions={children}
           opts={{
-            id: "actions-dropdown-menu",
+            id: 'actions-dropdown-menu',
             keepMounted: true,
             transitionDuration: 0,
             elevation: 3,
             getcontentanchorel: null,
-            fullwidth: "true",
+            fullwidth: 'true',
             anchorOrigin: { vertical: 'top', horizontal: isRTL ? 'right' : 'left' },
             transformOrigin: { vertical: 'bottom', horizontal: isRTL ? 'right' : 'left' },
           }}
         />
-        {this.renderModal(isExternalVideoModalOpen, this.setExternalVideoModalIsOpen, "low",
+        {this.renderModal(
-          ExternalVideoModal)}
+          isExternalVideoModalOpen,
-        {(amIPresenter && isSelectRandomUserEnabled) ? this.renderModal(isRandomUserSelectModalOpen, this.setRandomUserSelectModalIsOpen, 
+          this.setExternalVideoModalIsOpen,
-          "low", RandomUserSelectContainer) : null }
+          'low',
-        {this.renderModal(isLayoutModalOpen, this.setLayoutModalIsOpen,
+          ExternalVideoModal
-          "low", LayoutModalContainer)}
+        )}
-        {this.renderModal(isCameraAsContentModalOpen, this.setCameraAsContentModalIsOpen,
+        {amIPresenter && isSelectRandomUserEnabled
-          'low', () => (
+          ? this.renderModal(
+              isRandomUserSelectModalOpen,
+              this.setRandomUserSelectModalIsOpen,
+              'low',
+              RandomUserSelectContainer
+            )
+          : null}
+        {this.renderModal(
+          isLayoutModalOpen,
+          this.setLayoutModalIsOpen,
+          'low',
+          LayoutModalContainer
+        )}
+        {this.renderModal(
+          isCameraAsContentModalOpen,
+          this.setCameraAsContentModalIsOpen,
+          'low',
+          () => (
             <VideoPreviewContainer
               cameraAsContent
               amIPresenter
@@ -470,7 +482,8 @@ class ActionsDropdown extends PureComponent {
               }}
               {...propsToPassModal}
             />
-          ))}
+          )
+        )}
       </>
     );
   }

bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/container.jsx

@@ -6,6 +6,7 @@ import PresentationPodService from '/imports/ui/components/presentation-pod/serv
 import ActionsDropdown from './component';
 import { layoutSelectInput, layoutDispatch, layoutSelect } from '../../layout/context';
 import { SMALL_VIEWPORT_BREAKPOINT } from '../../layout/enums';
+import { isCameraAsContentEnabled } from '/imports/ui/services/features';
 
 const ActionsDropdownContainer = (props) => {
   const sidebarContent = layoutSelectInput((i) => i.sidebarContent);
@@ -16,27 +17,26 @@ const ActionsDropdownContainer = (props) => {
   const isRTL = layoutSelect((i) => i.isRTL);
 
   return (
-    <ActionsDropdown {...{
+    <ActionsDropdown
-      layoutContextDispatch,
+      {...{
-      sidebarContent,
+        layoutContextDispatch,
-      sidebarNavigation,
+        sidebarContent,
-      isMobile,
+        sidebarNavigation,
-      isRTL,
+        isMobile,
-      ...props,
+        isRTL,
-    }}
+        ...props,
+      }}
     />
   );
 };
 
-const ENABLE_CAMERA_AS_CONTENT = Meteor.settings.public.app.enableCameraAsContent;
-
 export default withTracker(() => {
   const presentations = Presentations.find({ 'conversion.done': true }).fetch();
-  return ({
+  return {
     presentations,
     isDropdownOpen: Session.get('dropdownOpen'),
     setPresentation: PresentationUploaderService.setPresentation,
     podIds: PresentationPodService.getPresentationPodIds(),
-    isCameraAsContentEnabled: ENABLE_CAMERA_AS_CONTENT,
+    isCameraAsContentEnabled: isCameraAsContentEnabled(),
-  });
+  };
 })(ActionsDropdownContainer);

bigbluebutton-html5/imports/ui/services/features/index.js

@@ -87,3 +87,10 @@ export function isReactionsEnabled() {
 export function isTimerFeatureEnabled() {
   return getDisabledFeatures().indexOf('timer') === -1;
 }
+
+export function isCameraAsContentEnabled() {
+  return (
+    getDisabledFeatures().indexOf('cameraAsContent') === -1 &&
+    Meteor.settings.public.app.enableCameraAsContent
+  );
+}

docs/docs/data/create.tsx

@@ -344,7 +344,7 @@ const createEndpointTableData = [
     "name": "disabledFeatures",
     "required": false,
     "type": "String",
-    "description": (<>List (comma-separated) of features to disable in a particular meeting. (added 2.5)<br /><br />Available options to disable:<br /><ul><li><code className="language-plaintext highlighter-rouge">breakoutRooms</code>- <b>Breakout Rooms</b> </li><li><code className="language-plaintext highlighter-rouge">captions</code>- <b>Closed Caption</b> </li><li><code className="language-plaintext highlighter-rouge">chat</code>- <b>Chat</b></li><li><code className="language-plaintext highlighter-rouge">downloadPresentationWithAnnotations</code>- <b>Annotated presentation download</b></li><li><code className="language-plaintext highlighter-rouge">snapshotOfCurrentSlide</code>- <b>Allow snapshot of the current slide</b></li><li><code className="language-plaintext highlighter-rouge">externalVideos</code>- <b>Share an external video</b> </li><li><code className="language-plaintext highlighter-rouge">importPresentationWithAnnotationsFromBreakoutRooms</code>- <b>Capture breakout presentation</b></li><li><code className="language-plaintext highlighter-rouge">importSharedNotesFromBreakoutRooms</code>- <b>Capture breakout shared notes</b></li><li><code className="language-plaintext highlighter-rouge">layouts</code>- <b>Layouts</b> (allow only default layout)</li><li><code className="language-plaintext highlighter-rouge">learningDashboard</code>- <b>Learning Analytics Dashboard</b></li><li><code className="language-plaintext highlighter-rouge">polls</code>- <b>Polls</b> </li><li><code className="language-plaintext highlighter-rouge">screenshare</code>- <b>Screen Sharing</b></li><li><code className="language-plaintext highlighter-rouge">sharedNotes</code>- <b>Shared Notes</b></li><li><code className="language-plaintext highlighter-rouge">virtualBackgrounds</code>- <b>Virtual Backgrounds</b></li><li><code className="language-plaintext highlighter-rouge">customVirtualBackgrounds</code>- <b>Virtual Backgrounds Upload</b></li><li><code className="language-plaintext highlighter-rouge">liveTranscription</code>- <b>Live Transcription</b></li><li><code className="language-plaintext highlighter-rouge">presentation</code>- <b>Presentation</b></li></ul></>)
+    "description": (<>List (comma-separated) of features to disable in a particular meeting. (added 2.5)<br /><br />Available options to disable:<br /><ul><li><code className="language-plaintext highlighter-rouge">breakoutRooms</code>- <b>Breakout Rooms</b> </li><li><code className="language-plaintext highlighter-rouge">captions</code>- <b>Closed Caption</b> </li><li><code className="language-plaintext highlighter-rouge">chat</code>- <b>Chat</b></li><li><code className="language-plaintext highlighter-rouge">downloadPresentationWithAnnotations</code>- <b>Annotated presentation download</b></li><li><code className="language-plaintext highlighter-rouge">snapshotOfCurrentSlide</code>- <b>Allow snapshot of the current slide</b></li><li><code className="language-plaintext highlighter-rouge">externalVideos</code>- <b>Share an external video</b> </li><li><code className="language-plaintext highlighter-rouge">importPresentationWithAnnotationsFromBreakoutRooms</code>- <b>Capture breakout presentation</b></li><li><code className="language-plaintext highlighter-rouge">importSharedNotesFromBreakoutRooms</code>- <b>Capture breakout shared notes</b></li><li><code className="language-plaintext highlighter-rouge">layouts</code>- <b>Layouts</b> (allow only default layout)</li><li><code className="language-plaintext highlighter-rouge">learningDashboard</code>- <b>Learning Analytics Dashboard</b></li><li><code className="language-plaintext highlighter-rouge">polls</code>- <b>Polls</b> </li><li><code className="language-plaintext highlighter-rouge">screenshare</code>- <b>Screen Sharing</b></li><li><code className="language-plaintext highlighter-rouge">sharedNotes</code>- <b>Shared Notes</b></li><li><code className="language-plaintext highlighter-rouge">virtualBackgrounds</code>- <b>Virtual Backgrounds</b></li><li><code className="language-plaintext highlighter-rouge">customVirtualBackgrounds</code>- <b>Virtual Backgrounds Upload</b></li><li><code className="language-plaintext highlighter-rouge">liveTranscription</code>- <b>Live Transcription</b></li><li><code className="language-plaintext highlighter-rouge">presentation</code>- <b>Presentation</b></li><li><code className="language-plaintext highlighter-rouge">enableCameraAsContent</code>-<b>Enables/Disables camera as a content</b></li></ul></>)
   },
   {
     "name": "disabledFeaturesExclude",