Allow to force a layout when joining a room - client (#19173)

* enforce layout - client

* use graphql for enforceLayout

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

@@ -522,6 +522,7 @@ class App extends Component {
       setPushLayout,
       shouldShowScreenshare,
       shouldShowExternalVideo,
+      enforceLayout,
     } = this.props;
 
     return (
@@ -552,6 +553,7 @@ class App extends Component {
           setPushLayout,
           shouldShowScreenshare,
           shouldShowExternalVideo: !!shouldShowExternalVideo,
+          enforceLayout,
         }}
       />
     );

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

@@ -22,6 +22,8 @@ import {
   layoutDispatch,
 } from '../layout/context';
 import { isEqual } from 'radash';
+import useCurrentUser from '/imports/ui/core/hooks/useCurrentUser';
+import { LAYOUT_TYPE } from '/imports/ui/components/layout/enums';
 
 const ROLE_MODERATOR = Meteor.settings.public.user.role_moderator;
 
@@ -147,6 +149,16 @@ const AppContainer = (props) => {
     MediaService.buildLayoutWhenPresentationAreaIsDisabled(layoutContextDispatch)
   });
 
+  const validateEnforceLayout = (currentUserData) => {
+    const layoutTypes = Object.values(LAYOUT_TYPE);
+    const enforceLayout = currentUserData?.enforceLayout;
+    return enforceLayout && layoutTypes.includes(enforceLayout) ? enforceLayout : null;
+  };
+
+  const { data: currentUserData } = useCurrentUser((user) => ({
+    enforceLayout: user.enforceLayout,
+  }));
+
   return currentUserId
     ? (
       <App
@@ -185,6 +197,7 @@ const AppContainer = (props) => {
           setMountRandomUserModal,
           isPresenter,
           numCameras: cameraDockInput.numCameras,
+          enforceLayout: validateEnforceLayout(currentUserData),
         }}
         {...otherProps}
       />

bigbluebutton-html5/imports/ui/components/layout/push-layout/pushLayoutEngine.jsx

@@ -43,6 +43,7 @@ const propTypes = {
   setPushLayout: PropTypes.func,
   shouldShowScreenshare: PropTypes.bool,
   shouldShowExternalVideo: PropTypes.bool,
+  enforceLayout: PropTypes.string,
 };
 
 class PushLayoutEngine extends React.Component {
@@ -63,10 +64,11 @@ class PushLayoutEngine extends React.Component {
       meetingPresentationIsOpen,
       shouldShowScreenshare,
       shouldShowExternalVideo,
+      enforceLayout,
     } = this.props;
 
     const userLayout = LAYOUT_TYPE[getFromUserSettings('bbb_change_layout', false)];
-    Settings.application.selectedLayout = userLayout || meetingLayout;
+    Settings.application.selectedLayout = enforceLayout || userLayout || meetingLayout;
 
     let selectedLayout = Settings.application.selectedLayout;
     if (isMobile()) {
@@ -142,19 +144,22 @@ class PushLayoutEngine extends React.Component {
       selectedLayout,
       setMeetingLayout,
       setPushLayout,
+      enforceLayout,
     } = this.props;
 
     const meetingLayoutDidChange = meetingLayout !== prevProps.meetingLayout;
     const pushLayoutMeetingDidChange = pushLayoutMeeting !== prevProps.pushLayoutMeeting;
+    const enforceLayoutDidChange = enforceLayout !== prevProps.enforceLayout;
     const shouldSwitchLayout = isPresenter
-      ? meetingLayoutDidChange
-      : (meetingLayoutDidChange || pushLayoutMeetingDidChange) && pushLayoutMeeting;
+      ? meetingLayoutDidChange || enforceLayoutDidChange
+      : ((meetingLayoutDidChange || pushLayoutMeetingDidChange) && pushLayoutMeeting) || enforceLayoutDidChange;
 
     if (shouldSwitchLayout) {
-
-      let contextLayout = meetingLayout;
+      let contextLayout = enforceLayout || meetingLayout;
       if (isMobile()) {
-        contextLayout = meetingLayout === 'custom' ? 'smart' : meetingLayout;
+        if (contextLayout === 'custom') {
+          contextLayout = 'smart';
+        }
       }
 
       layoutContextDispatch({
@@ -170,7 +175,7 @@ class PushLayoutEngine extends React.Component {
       });
     }
 
-    if (pushLayoutMeetingDidChange) {
+    if (!enforceLayout && pushLayoutMeetingDidChange) {
       updateSettings({
         application: {
           ...Settings.application,
@@ -244,6 +249,7 @@ class PushLayoutEngine extends React.Component {
       || cameraIsResizing !== prevProps.cameraIsResizing
       || cameraPosition !== prevProps.cameraPosition
       || focusedCamera !== prevProps.focusedCamera
+      || enforceLayout !== prevProps.enforceLayout
       || !equalDouble(presentationVideoRate, prevProps.presentationVideoRate);
 
     if (pushLayout !== prevProps.pushLayout) { // push layout once after presenter toggles / special case where we set pushLayout to false in all viewers

bigbluebutton-html5/imports/ui/core/graphql/queries/currentUserSubscription.ts

@@ -6,6 +6,7 @@ subscription userCurrentSubscription {
     authed
     avatar
     banned
+    enforceLayout
     cameras {
     streamId
   }