Merge pull request #12637 from vitormateusalmeida/layoutManagerNew

Add webcams component on new Layout Manager
bigbluebutton · Jun 28, 2021 · 0ded1f7 · 0ded1f7
2 parents 0e9f0b0 + 3599577
commit 0ded1f7
Show file tree

Hide file tree

Showing 13 changed files with 301 additions and 168 deletions.
diff --git a/bigbluebutton-html5/imports/ui/components/app/component.jsx b/bigbluebutton-html5/imports/ui/components/app/component.jsx
@@ -129,6 +129,10 @@ const LAYERED_BREAKPOINT = 640;
 const isLayeredView = window.matchMedia(`(max-width: ${LAYERED_BREAKPOINT}px)`);
 
 class App extends Component {
+  static renderWebcamsContainer() {
+    return <NewWebcamContainer />;
+  }
+
   constructor(props) {
     super(props);
     this.state = {
@@ -138,6 +142,7 @@ class App extends Component {
     this.handleWindowResize = throttle(this.handleWindowResize).bind(this);
     this.shouldAriaHide = this.shouldAriaHide.bind(this);
     this.renderMedia = withDraggableContext(this.renderMedia.bind(this));
+    this.renderWebcamsContainer = withDraggableContext(App.renderWebcamsContainer.bind(this));
 
     this.throttledDeviceType = throttle(() => this.setDeviceType(),
       50, { trailing: true, leading: true }).bind(this);
@@ -573,7 +578,7 @@ class App extends Component {
                 <NavBarContainer main="new" />
                 <SidebarNavigationContainer />
                 <SidebarContentContainer />
-                <NewWebcamContainer />
+                {this.renderWebcamsContainer()}
                 {shouldShowPresentation ? <PresentationAreaContainer /> : null}
                 {shouldShowScreenshare ? <ScreenshareContainer /> : null}
                 {shouldShowExternalVideo ? <ExternalVideoContainer isPresenter={isPresenter} /> : null}

diff --git a/bigbluebutton-html5/imports/ui/components/app/container.jsx b/bigbluebutton-html5/imports/ui/components/app/container.jsx
@@ -31,7 +31,7 @@ import MediaContainer from '../media/container';
 const propTypes = {
   actionsbar: PropTypes.node,
   media: PropTypes.node,
-  meetingLayout: PropTypes.string.isRequired
+  meetingLayout: PropTypes.string.isRequired,
 };
 
 const defaultProps = {
@@ -134,8 +134,20 @@ export default injectIntl(withModalMounter(withTracker(({ intl, baseControls })
     },
   );
   const currentMeeting = Meetings.findOne({ meetingId: Auth.meetingID },
-    { fields: { publishedPoll: 1, voiceProp: 1, randomlySelectedUser: 1, layout: 1 } });
-  const { publishedPoll, voiceProp, randomlySelectedUser, layout } = currentMeeting;
+    {
+      fields: {
+        publishedPoll: 1,
+        voiceProp: 1,
+        randomlySelectedUser: 1,
+        layout: 1,
+      },
+    });
+  const {
+    publishedPoll,
+    voiceProp,
+    randomlySelectedUser,
+    layout,
+  } = currentMeeting;
 
   if (!currentUser.approved) {
     baseControls.updateLoadingState(intl.formatMessage(intlMessages.waitingApprovalMessage));
@@ -179,7 +191,7 @@ export default injectIntl(withModalMounter(withTracker(({ intl, baseControls })
     shouldShowScreenshare,
     shouldShowPresentation: !shouldShowScreenshare && !shouldShowExternalVideo,
     shouldShowExternalVideo,
-    isLargeFont: Session.get('isLargeFont')
+    isLargeFont: Session.get('isLargeFont'),
   };
 })(AppContainer)));
 

diff --git a/bigbluebutton-html5/imports/ui/components/media/container.jsx b/bigbluebutton-html5/imports/ui/components/media/container.jsx
@@ -23,7 +23,9 @@ const LAYOUT_CONFIG = Meteor.settings.public.layout;
 
 const propTypes = {
   isScreensharing: PropTypes.bool.isRequired,
-  intl: PropTypes.object.isRequired,
+  intl: PropTypes.shape({
+    formatMessage: PropTypes.func.isRequired,
+  }).isRequired,
 };
 
 const intlMessages = defineMessages({

diff --git a/bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/context.jsx b/bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/context.jsx
@@ -104,9 +104,9 @@ const reducer = (state, action) => {
   }
 };
 
-const ContextConsumer = Component => props => (
+const ContextConsumer = (Component) => (props) => (
   <WebcamDraggableContext.Consumer>
-    {contexts => <Component {...props} {...contexts} />}
+    {(contexts) => <Component {...props} {...contexts} />}
   </WebcamDraggableContext.Consumer>
 );
 
@@ -142,15 +142,15 @@ const ContextProvider = (props) => {
   );
 };
 
-const withProvider = Component => props => (
+const withProvider = (Component) => (props) => (
   <ContextProvider {...props}>
     <Component />
   </ContextProvider>
 );
 
-const withDraggableConsumer = Component => ContextConsumer(Component);
+const withDraggableConsumer = (Component) => ContextConsumer(Component);
 
-const withDraggableContext = Component => withProvider(withDraggableConsumer(Component));
+const withDraggableContext = (Component) => withProvider(withDraggableConsumer(Component));
 
 export {
   withProvider,

diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-area/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-area/component.jsx
@@ -2,8 +2,6 @@ import React from 'react';
 import PresentationPodsContainer from '../../presentation-pod/container';
 
 const PresentationArea = ({
-  top,
-  left,
   width,
   height,
 }) => {
@@ -12,16 +10,7 @@ const PresentationArea = ({
     presentationAreaHeight: height,
   };
   return (
-    <div
-      style={{
-        top,
-        left,
-        width,
-        height,
-      }}
-    >
-      <PresentationPodsContainer {...{ presentationAreaSize }} />
-    </div>
+    <PresentationPodsContainer {...{ presentationAreaSize }} />
   );
 };
 

diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/component.jsx b/bigbluebutton-html5/imports/ui/components/video-provider/component.jsx
@@ -386,7 +386,7 @@ class VideoProvider extends Component {
     }
   }
 
-  clearRestartTimers (stream) {
+  clearRestartTimers(stream) {
     if (this.restartTimeout[stream]) {
       clearTimeout(this.restartTimeout[stream]);
       delete this.restartTimeout[stream];
@@ -703,7 +703,7 @@ class VideoProvider extends Component {
     this.sendMessage(message);
   }
 
-  _handleIceConnectionStateChange (stream, isLocal) {
+  _handleIceConnectionStateChange(stream, isLocal) {
     const { intl } = this.props;
     const peer = this.webRtcPeers[stream];
     const role = VideoService.getRole(isLocal);
@@ -860,15 +860,23 @@ class VideoProvider extends Component {
   }
 
   render() {
-    const { swapLayout, currentVideoPageIndex, streams } = this.props;
+    const {
+      swapLayout,
+      currentVideoPageIndex,
+      streams,
+      cameraDockBounds,
+    } = this.props;
 
     return (
       <VideoListContainer
-        streams={streams}
+        {...{
+          streams,
+          swapLayout,
+          currentVideoPageIndex,
+          cameraDockBounds,
+        }}
         onVideoItemMount={this.createVideoTag}
         onVideoItemUnmount={this.destroyVideoTag}
-        swapLayout={swapLayout}
-        currentVideoPageIndex={currentVideoPageIndex}
       />
     );
   }

diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/container.jsx b/bigbluebutton-html5/imports/ui/components/video-provider/container.jsx
@@ -9,22 +9,23 @@ const VideoProviderContainer = ({ children, ...props }) => {
   return (!streams.length ? null : <VideoProvider {...props}>{children}</VideoProvider>);
 };
 
-export default withTracker(props => {
+export default withTracker(({ swapLayout, ...rest }) => {
   // getVideoStreams returns a dictionary consisting of:
   // {
   //  streams: array of mapped streams
   //  totalNumberOfStreams: total number of shared streams in the server
   // }
   const {
     streams,
-    totalNumberOfStreams
+    totalNumberOfStreams,
   } = VideoService.getVideoStreams();
 
   return {
-    swapLayout: props.swapLayout,
+    swapLayout,
     streams,
     totalNumberOfStreams,
     isUserLocked: VideoService.isUserLocked(),
     currentVideoPageIndex: VideoService.getCurrentVideoPageIndex(),
+    ...rest,
   };
-})( withLayoutContext(VideoProviderContainer));
+})(withLayoutContext(VideoProviderContainer));