Fix webcam position when drop on left or right sides

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

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import WebcamDraggable from './webcam-draggable-overlay/component';
-
 import { styles } from './styles';
 
 const propTypes = {
@@ -69,9 +68,6 @@ export default class Media extends Component {
       webcamPlacement,
     } = this.props;
 
-    console.log('Storage.getItemwebcamPlacement', webcamPlacement);
-
-
     const contentClassName = cx({
       [styles.content]: true,
     });

bigbluebutton-html5/imports/ui/components/media/styles.scss

@@ -1,5 +1,6 @@
 @import "../../stylesheets/variables/_all";
 @import "../../stylesheets/variables/video";
+@import "../video-provider/video-list/styles";
 
 $content-order: 2;
 $before-content-order: 1;
@@ -74,11 +75,19 @@ $after-content-order: 3;
   order: $after-content-order !important;
 }
 
+%overlayToRL {
+  min-width: 20%;
+  margin-left: 10px !important;
+  margin-right: 10px !important;
+}
+
 .overlayToRight {
+  @extend %overlayToRL;
   order: 2 !important;
 }
 
 .overlayToLeft {
+  @extend %overlayToRL;
   order: 0 !important;
 }
 
@@ -112,6 +121,10 @@ $after-content-order: 3;
 .autoWidth {
   min-width: calc(var(--video-height) * var(--video-ratio)) !important;
   max-width: 100%;
+
+  .videoCanvas{
+    position: relative;
+  }
 }
 
 .fullWidth {
@@ -153,16 +166,15 @@ $after-content-order: 3;
   z-index: 99;
   width: 100%;
   height: 100%;
+  &:hover {
+    background-color: rgba(255, 255, 255, .3);
+  }
 }
 
 %dropZoneBgTopBottom {
   z-index: 99;
   width: 100%;
   height: 100%;
-
-  &:hover {
-    background-color: rgba(255, 255, 255, .3);
-  }
 }
 
 .dropZoneTop {
@@ -205,14 +217,36 @@ $after-content-order: 3;
   right: 0;
 }
 
-.resizable {
+%resizableTopBottom {
   width: 100% !important;
+  &:hover{
+    background-color: rgba(255, 255, 255, .3);
+  }
 }
 
-span[class^=resizeWrapper] {
+%resizableLeftRight {
+  height: 100% !important;
+  &:hover{
+    background-color: rgba(255, 255, 255, .3);
+  }
+}
+
+.overlayToTop span[class^=resizeWrapper],
+.overlayToBottom span[class^=resizeWrapper] {
   div {
+    @extend %resizableTopBottom;
     height: 15px !important;
     z-index: 1;
     bottom: -10px !important;
   }
+}
+
+.overlayToLeft span[class^=resizeWrapper],
+.overlayToRight span[class^=resizeWrapper] {
+  div {
+    @extend %resizableLeftRight;
+    width: 15px !important;
+    z-index: 1;
+    bottom: -10px !important;
+  }
 }

bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/component.jsx

@@ -15,7 +15,6 @@ const BROWSER_ISMOBILE = browser().mobile;
 
 const propTypes = {
   swapLayout: PropTypes.bool,
-  singleWebcam: PropTypes.bool,
   hideOverlay: PropTypes.bool,
   disableVideo: PropTypes.bool,
   audioModalIsOpen: PropTypes.bool,
@@ -26,7 +25,6 @@ const propTypes = {
 
 const defaultProps = {
   swapLayout: false,
-  singleWebcam: true,
   hideOverlay: false,
   disableVideo: false,
   audioModalIsOpen: false,
@@ -58,12 +56,10 @@ class WebcamDraggable extends Component {
     if (prevProps.swapLayout !== swapLayout) {
       setTimeout(() => this.forceUpdate(), 500);
     }
-
     if (prevPlacement !== placement) {
       setTimeout(() => this.forceUpdate(), 200);
       setTimeout(() => window.dispatchEvent(new Event('resize')), 400);
     }
-    console.log('componentDidUpdate', this.props);
   }
 
   componentWillUnmount() {
@@ -80,7 +76,6 @@ class WebcamDraggable extends Component {
     const { mediaSize } = webcamDraggableState;
     const { width: stateWidth, height: stateHeight } = mediaSize;
     const { width, height } = this.getMediaBounds();
-
     if (stateWidth !== width || stateHeight !== height) {
       webcamDraggableDispatch(
         {
@@ -97,18 +92,14 @@ class WebcamDraggable extends Component {
 
   onResizeStop() {
     const { webcamDraggableState, webcamDraggableDispatch } = this.props;
-    const { videoListRef } = webcamDraggableState;
+    const { optimalGrid } = webcamDraggableState;
-    if (videoListRef) {
+    if (optimalGrid) {
-      const videoListRefRect = videoListRef.getBoundingClientRect();
-      const {
-        width, height,
-      } = videoListRefRect;
       webcamDraggableDispatch(
         {
           type: 'setVideoListSize',
           value: {
-            width,
+            width: optimalGrid.width,
-            height,
+            height: optimalGrid.height,
           },
         },
       );
@@ -122,14 +113,9 @@ class WebcamDraggable extends Component {
     const { current: mediaContainer } = refMediaContainer;
     if (mediaContainer) {
       const mediaContainerRect = mediaContainer.getBoundingClientRect();
-
-      console.log('mediaContainer.className', mediaContainer.className);
-
-
       const {
         top, left, width: newWidth, height: newHeight,
       } = mediaContainerRect;
-
       if ((mediaState.width === 0 || mediaState.height === 0) && (newWidth > 0 && newHeight > 0)) {
         webcamDraggableDispatch(
           {
@@ -153,7 +139,7 @@ class WebcamDraggable extends Component {
   }
 
   getWebcamsListBounds() {
-    const { webcamDraggableState, singleWebcam } = this.props;
+    const { webcamDraggableState } = this.props;
     const { videoListRef } = webcamDraggableState;
     if (videoListRef) {
       const videoListRefRect = videoListRef.getBoundingClientRect();
@@ -162,8 +148,8 @@ class WebcamDraggable extends Component {
       } = videoListRefRect;
       return {
         top: top - 10, // 10 = margin
-        left: left - (singleWebcam ? 10 : 0), // 10 = margin
+        left, // 10 = margin
-        width: width + (singleWebcam ? 20 : 0), // 20 = margin
+        width, // 20 = margin
         height: height + 20, // 20 = margin
       };
     }
@@ -181,52 +167,55 @@ class WebcamDraggable extends Component {
     };
   }
 
-  async handleWebcamDragStart() {
+  handleWebcamDragStart() {
-    const { webcamDraggableDispatch, singleWebcam } = this.props;
+    const { webcamDraggableDispatch } = this.props;
-    const { x, y } = await this.calculatePosition();
+    const { x, y } = this.calculatePosition();
-
     webcamDraggableDispatch({ type: 'dragStart' });
-
     webcamDraggableDispatch(
       {
         type: 'setTempPosition',
         value: {
-          x: singleWebcam ? x : 0,
+          x,
           y,
         },
       },
     );
   }
 
-  handleWebcamDragStop(e, position) {
+  handleWebcamDragStop(e) {
-    const { webcamDraggableDispatch, singleWebcam } = this.props;
+    const { webcamDraggableDispatch } = this.props;
     const targetClassname = JSON.stringify(e.target.className);
-    const { x, y } = position;
-
-    console.log('wwwwww', targetClassname);
 
     if (targetClassname) {
       if (targetClassname.includes('Top')) {
         webcamDraggableDispatch({ type: 'setplacementToTop' });
       } else if (targetClassname.includes('Right')) {
         webcamDraggableDispatch({ type: 'setplacementToRight' });
-      } else if (targetClassname.includes('Bottom')) {
-        webcamDraggableDispatch({ type: 'setplacementToBottom' });
-      } else if (targetClassname.includes('Left')) {
-        webcamDraggableDispatch({ type: 'setplacementToLeft' });
-      } else if (singleWebcam) {
         webcamDraggableDispatch(
           {
             type: 'setLastPosition',
             value: {
-              x,
+              x: 0,
-              y,
+              y: 0,
+            },
+          },
+        );
+      } else if (targetClassname.includes('Bottom')) {
+        webcamDraggableDispatch({ type: 'setplacementToBottom' });
+      } else if (targetClassname.includes('Left')) {
+        webcamDraggableDispatch({ type: 'setplacementToLeft' });
+        webcamDraggableDispatch(
+          {
+            type: 'setLastPosition',
+            value: {
+              x: 0,
+              y: 0,
             },
           },
         );
-        webcamDraggableDispatch({ type: 'setplacementToFloating' });
       }
     }
+    this.handleWebcamDragStart();
     webcamDraggableDispatch({ type: 'dragEnd' });
     window.dispatchEvent(new Event('resize'));
   }
@@ -234,7 +223,6 @@ class WebcamDraggable extends Component {
   render() {
     const {
       webcamDraggableState,
-      singleWebcam,
       swapLayout,
       hideOverlay,
       disableVideo,
@@ -242,7 +230,13 @@ class WebcamDraggable extends Component {
       refMediaContainer,
     } = this.props;
 
-    const { dragging, isCameraFullscreen, videoListSize } = webcamDraggableState;
+    const {
+      dragging,
+      isCameraFullscreen,
+      videoListSize,
+      videoRef,
+      optimalGrid,
+    } = webcamDraggableState;
     let placement = Storage.getItem('webcamPlacement');
     const lastPosition = Storage.getItem('webcamLastPosition') || { x: 0, y: 0 };
     let position = lastPosition;
@@ -250,9 +244,18 @@ class WebcamDraggable extends Component {
       placement = webcamsDefaultPlacement;
     }
 
+    let videoRefWidth;
+    if (videoRef) {
+      const videoRefRect = videoRef.getBoundingClientRect();
+      const {
+        width: vWidth,
+      } = videoRefRect;
+      videoRefWidth = vWidth;
+    }
+
     if (dragging) {
       position = webcamDraggableState.tempPosition;
-    } else if (!dragging && placement === 'floating' && singleWebcam) {
+    } else if (!dragging) {
       position = webcamDraggableState.lastPosition;
     } else {
       position = {
@@ -283,9 +286,9 @@ class WebcamDraggable extends Component {
 
     position = {
       x: isOverflowWidth
-        && !dragging && !swapLayout && singleWebcam && placement === 'floating' ? mediaWidth - webcamsWidth : position.x,
+        && !dragging && !swapLayout ? mediaWidth - webcamsWidth : position.x,
       y: isOverflowHeight
-        && !dragging && !swapLayout && singleWebcam && placement === 'floating' ? mediaHeight - (webcamsHeight + 1) : position.y,
+        && !dragging && !swapLayout ? mediaHeight - (webcamsHeight + 1) : position.y,
     };
 
     const contentClassName = cx({
@@ -309,13 +312,23 @@ class WebcamDraggable extends Component {
       [styles.overlay]: true,
       [styles.hideOverlay]: hideOverlay,
       [styles.floatingOverlay]: dragging,
-      // [styles.autoWidth]: singleWebcam,
+      [styles.autoWidth]: dragging,
       [styles.fullWidth]: (
-        (placement === 'top' || placement === 'bottom')
+        (
-        && !(placement === 'left' || placement === 'right')
+          placement === 'top'
+          || placement === 'bottom'
+        )
+        || swapLayout
       )
-        || swapLayout,
+        && !dragging,
-      [styles.fullHeight]: placement === 'right' || placement === 'left',
+      [styles.fullHeight]: (
+        (
+          placement === 'left'
+          && placement === 'right'
+        )
+        || swapLayout
+      )
+        && !dragging,
       [styles.overlayToTop]: placement === 'top' && !dragging,
       [styles.overlayToRight]: placement === 'right' && !dragging,
       [styles.overlayToBottom]: placement === 'bottom' && !dragging,
@@ -381,6 +394,20 @@ class WebcamDraggable extends Component {
       [styles.dropZoneBgRight]: true,
     });
 
+    let resizeWidth;
+    let resizeHeight;
+    if ((placement === 'top' || placement === 'bottom') && !dragging) {
+      resizeWidth = '100%';
+      resizeHeight = videoListSize.height;
+    }
+    if ((placement === 'left' || placement === 'right') && !dragging) {
+      resizeWidth = videoRefWidth;
+      resizeHeight = '100%';
+    }
+    if (dragging) {
+      resizeHeight = optimalGrid.height;
+      resizeWidth = optimalGrid.width;
+    }
     return (
       <Fragment>
         <div
@@ -402,7 +429,6 @@ class WebcamDraggable extends Component {
             className={dropZoneBgLeftClassName}
           />
         </div>
-
         <Draggable
           handle="video"
           bounds="#container"
@@ -414,24 +440,20 @@ class WebcamDraggable extends Component {
         >
           <Resizable
             size={
-              singleWebcam
+              {
-                ? {
+                height: resizeHeight,
-                  height: videoListSize.height,
+                width: resizeWidth,
-                  width: videoListSize.width,
+              }
-                }
-                : {
-                  height: videoListSize.height,
-                }
             }
             lockAspectRatio
             handleWrapperClass="resizeWrapper"
             onResize={dispatchResizeEvent}
             onResizeStop={this.onResizeStop}
             enable={{
-              top: !(placement === 'top') && !swapLayout,
+              top: (placement === 'bottom') && !swapLayout,
-              bottom: !(placement === 'bottom') && !swapLayout,
+              bottom: (placement === 'top') && !swapLayout,
-              left: false,
+              left: (placement === 'right') && !swapLayout,
-              right: false,
+              right: (placement === 'left') && !swapLayout,
               topLeft: false,
               topRight: false,
               bottomLeft: false,
@@ -442,14 +464,8 @@ class WebcamDraggable extends Component {
                 ? overlayClassName
                 : contentClassName}
             style={{
-              marginLeft: singleWebcam
+              marginLeft: 0,
-                && !(placement === 'bottom' || placement === 'top')
+              marginRight: 0,
-                ? 10
-                : 0,
-              marginRight: singleWebcam
-                && !(placement === 'bottom' || placement === 'top')
-                ? 10
-                : 0,
             }}
           >
             {
@@ -464,7 +480,6 @@ class WebcamDraggable extends Component {
             }
           </Resizable>
         </Draggable>
-
         <div
           className={dropZoneBottomClassName}
           style={{ height: '15vh' }}

bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/context.jsx

@@ -25,6 +25,7 @@ const initialState = {
     x: 0,
     y: 0,
   },
+  optimalGrid: {},
   dragging: false,
   videoRef: null,
   videoListRef: null,
@@ -126,6 +127,12 @@ const reducer = (state, action) => {
         videoListRef: action.value,
       };
     }
+    case 'setOptimalGrid': {
+      return {
+        ...state,
+        optimalGrid: action.value,
+      };
+    }
     case 'dragStart': {
       return {
         ...state,

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

@@ -113,7 +113,7 @@ class VideoList extends Component {
   }
 
   setOptimalGrid() {
-    const { users } = this.props;
+    const { users, webcamDraggableDispatch } = this.props;
     let numItems = users.length;
     if (numItems < 1 || !this.canvas || !this.grid) {
       return;
@@ -139,6 +139,12 @@ class VideoList extends Component {
         const betterThanCurrent = testGrid.filledArea > currentGrid.filledArea;
         return focusedConstraint && betterThanCurrent ? testGrid : currentGrid;
       }, { filledArea: 0 });
+    webcamDraggableDispatch(
+      {
+        type: 'setOptimalGrid',
+        value: optimalGrid,
+      },
+    );
     this.setState({
       optimalGrid,
     });