Merge pull request #12683 from ramonlsouza/sidebar-resize-video-focus

feat: sidebar vertical resize - focus on video layout
bigbluebutton · Jun 29, 2021 · e0c7720 · e0c7720
2 parents 0ded1f7 + d8b4981
commit e0c7720
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 35 deletions.
diff --git a/bigbluebutton-html5/imports/ui/components/layout/context/context.jsx b/bigbluebutton-html5/imports/ui/components/layout/context/context.jsx
@@ -362,10 +362,12 @@ const reducer = (state, action) => {
       };
     }
     case ACTIONS.SET_SIDEBAR_CONTENT_SIZE: {
-      const { width, browserWidth } = action.value;
+      const { width, browserWidth, height, browserHeight } = action.value;
       const { sidebarContent } = state.input;
       if (sidebarContent.width === width
-        && sidebarContent.browserWidth === browserWidth) {
+        && sidebarContent.browserWidth === browserWidth
+        && sidebarContent.height === height
+        && sidebarContent.browserHeight === browserHeight) {
         return state;
       }
       return {
@@ -376,6 +378,8 @@ const reducer = (state, action) => {
             ...sidebarContent,
             width,
             browserWidth,
+            height,
+            browserHeight,
           },
         },
       };

diff --git a/bigbluebutton-html5/imports/ui/components/layout/defaultValues.js b/bigbluebutton-html5/imports/ui/components/layout/defaultValues.js
@@ -35,6 +35,7 @@ const DEFAULT_VALUES = {
 
   sidebarContentMaxWidth: 350,
   sidebarContentMinWidth: 150,
+  sidebarContentMinHeight: 200,
   sidebarContentHeight: '100%',
   sidebarContentTop: 0,
   sidebarContentTabOrder: 2,

diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx
@@ -267,20 +267,43 @@ class VideoFocusLayout extends Component {
     };
   }
 
-  calculatesSidebarContentHeight(presentationHeight) {
+  calculatesSidebarContentHeight() {
     const { newLayoutContextState } = this.props;
-    const { deviceType, input } = newLayoutContextState;
-    let sidebarContentHeight = 0;
-    if (input.sidebarContent.isOpen) {
+    const { deviceType, input, output } = newLayoutContextState;
+    const { sidebarContentMinHeight } = DEFAULT_VALUES;
+    const { sidebarContent: inputContent } = input;
+    const { sidebarContent: outputContent } = output;
+    let minHeight = 0;
+    let height = 0;
+    let maxHeight = 0;
+    if (inputContent.isOpen) {
       if (deviceType === DEVICE_TYPE.MOBILE) {
-        sidebarContentHeight = this.mainHeight() - DEFAULT_VALUES.navBarHeight;
-      } else if (input.cameraDock.numCameras > 0) {
-        sidebarContentHeight = this.mainHeight() - presentationHeight;
+        height = this.mainHeight() - DEFAULT_VALUES.navBarHeight;
+        minHeight = this.mainHeight();
+        maxHeight = this.mainHeight();
       } else {
-        sidebarContentHeight = this.mainHeight();
+        if (input.cameraDock.numCameras > 0) {
+          if (inputContent.height > 0 && inputContent.height < this.mainHeight()) {
+            height = inputContent.height;
+            maxHeight = this.mainHeight();
+          } else {
+            const { size: slideSize } = input.presentation.currentSlide;
+            const calculatedHeight = slideSize.height * outputContent.width / slideSize.width;
+            height = this.mainHeight() - calculatedHeight;
+            maxHeight = height;
+          }
+        } else {
+          height = this.mainHeight();
+          maxHeight = height;
+        }
+        minHeight = sidebarContentMinHeight;
       }
     }
-    return sidebarContentHeight;
+    return {
+      minHeight,
+      height,
+      maxHeight,
+    };
   }
 
   calculatesSidebarContentBounds(sidebarNavWidth) {
@@ -390,6 +413,7 @@ class VideoFocusLayout extends Component {
     cameraDockBounds,
     sidebarNavWidth,
     sidebarContentWidth,
+    sidebarContentHeight,
   ) {
     const { newLayoutContextState } = this.props;
     const { deviceType, input } = newLayoutContextState;
@@ -410,19 +434,9 @@ class VideoFocusLayout extends Component {
       mediaBounds.top = mediaAreaBounds.top + cameraDockBounds.height;
       mediaBounds.width = mediaAreaBounds.width;
     } else if (input.cameraDock.numCameras > 0) {
-      if (input.presentation.height === 0) {
-        mediaBounds.height = min(
-          max(this.mainHeight() * 0.2, DEFAULT_VALUES.presentationMinHeight),
-          this.mainHeight() - DEFAULT_VALUES.presentationMinHeight,
-        );
-      } else {
-        mediaBounds.height = min(
-          max(input.presentation.height, DEFAULT_VALUES.presentationMinHeight),
-          this.mainHeight() - DEFAULT_VALUES.presentationMinHeight,
-        );
-      }
+      mediaBounds.height = this.mainHeight() - sidebarContentHeight;
       mediaBounds.left = sidebarNavWidth;
-      mediaBounds.top = this.mainHeight() - mediaBounds.height;
+      mediaBounds.top = sidebarContentHeight;
       mediaBounds.width = sidebarContentWidth;
       mediaBounds.zIndex = 1;
     } else {
@@ -455,12 +469,15 @@ class VideoFocusLayout extends Component {
     const navbarBounds = this.calculatesNavbarBounds(mediaAreaBounds);
     const actionbarBounds = this.calculatesActionbarBounds(mediaAreaBounds);
     const cameraDockBounds = this.calculatesCameraDockBounds(mediaAreaBounds);
+    const sidebarContentHeight = this.calculatesSidebarContentHeight();
     const mediaBounds = this.calculatesMediaBounds(
-      mediaAreaBounds, cameraDockBounds, sidebarNavWidth.width, sidebarContentWidth.width,
-    );
-    const sidebarContentHeight = this.calculatesSidebarContentHeight(
-      mediaBounds.height,
+      mediaAreaBounds,
+      cameraDockBounds,
+      sidebarNavWidth.width,
+      sidebarContentWidth.width,
+      sidebarContentHeight.height,
     );
+    const isBottomResizable = input.cameraDock.numCameras > 0;
 
     newLayoutContextDispatch({
       type: ACTIONS.SET_NAVBAR_OUTPUT,
@@ -522,7 +539,9 @@ class VideoFocusLayout extends Component {
         minWidth: sidebarContentWidth.minWidth,
         width: sidebarContentWidth.width,
         maxWidth: sidebarContentWidth.maxWidth,
-        height: sidebarContentHeight,
+        minHeight: sidebarContentHeight.minHeight,
+        height: sidebarContentHeight.height,
+        maxHeight: sidebarContentHeight.maxHeight,
         top: sidebarContentBounds.top,
         left: sidebarContentBounds.left,
         currentPanelType: input.currentPanelType,
@@ -538,7 +557,7 @@ class VideoFocusLayout extends Component {
       value: {
         top: false,
         right: true,
-        bottom: false,
+        bottom: isBottomResizable,
         left: false,
       },
     });

diff --git a/bigbluebutton-html5/imports/ui/components/sidebar-content/component.jsx b/bigbluebutton-html5/imports/ui/components/sidebar-content/component.jsx
@@ -25,40 +25,49 @@ const propTypes = {
 
 const SidebarContent = (props) => {
   const {
-    // display,
     top,
     left,
     zIndex,
     minWidth,
     width,
     maxWidth,
+    minHeight,
     height,
+    maxHeight,
     isResizable,
     resizableEdge,
     contextDispatch,
     sidebarContentPanel,
   } = props;
 
   const [resizableWidth, setResizableWidth] = useState(width);
+  const [resizableHeight, setResizableHeight] = useState(height);
   const [isResizing, setIsResizing] = useState(false);
   const [resizeStartWidth, setResizeStartWidth] = useState(0);
+  const [resizeStartHeight, setResizeStartHeight] = useState(0);
 
   useEffect(() => {
-    if (!isResizing) setResizableWidth(width);
-  }, [width]);
+    if (!isResizing) {
+      setResizableWidth(width);
+      setResizableHeight(height);
+    }
+  }, [width, height]);
 
   useEffect(() => {
-  }, [resizeStartWidth]);
+  }, [resizeStartWidth, resizeStartHeight]);
 
-  const setSidebarContentWidth = (dWidth) => {
+  const setSidebarContentSize = (dWidth, dHeight) => {
     const newWidth = resizeStartWidth + dWidth;
+    const newHeight = resizeStartHeight + dHeight;
 
     setResizableWidth(newWidth);
+    setResizableHeight(newHeight);
 
     contextDispatch({
       type: ACTIONS.SET_SIDEBAR_CONTENT_SIZE,
       value: {
         width: newWidth,
+        height: newHeight,
         browserWidth: window.innerWidth,
         browserHeight: window.innerHeight,
       },
@@ -69,6 +78,8 @@ const SidebarContent = (props) => {
     <Resizable
       minWidth={minWidth}
       maxWidth={maxWidth}
+      minHeight={minHeight}
+      maxHeight={maxHeight}
       size={{
         width,
         height,
@@ -83,11 +94,13 @@ const SidebarContent = (props) => {
       onResizeStart={() => {
         setIsResizing(true);
         setResizeStartWidth(resizableWidth);
+        setResizeStartHeight(resizableHeight);
       }}
-      onResize={(...[, , , delta]) => setSidebarContentWidth(delta.width)}
+      onResize={(...[, , , delta]) => setSidebarContentSize(delta.width, delta.height)}
       onResizeStop={() => {
         setIsResizing(false);
         setResizeStartWidth(0);
+        setResizeStartHeight(0);
       }}
       style={{
         position: 'absolute',