From 67e6b90fae682121002e7f3b2d57ae136d1d3ca5 Mon Sep 17 00:00:00 2001
From: Vitor Mateus <vitormateusalmeida@gmail.com>
Date: Tue, 10 Sep 2019 16:41:11 -0300
Subject: [PATCH] Anable resize when single webcam

---
 .../imports/ui/components/media/styles.scss   | 44 ++++++++++++-------
 .../webcam-draggable-overlay/component.jsx    | 19 ++++----
 2 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/media/styles.scss b/bigbluebutton-html5/imports/ui/components/media/styles.scss
index 13e1e45afe..9101e93916 100644
--- a/bigbluebutton-html5/imports/ui/components/media/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/media/styles.scss
@@ -80,16 +80,13 @@
   min-height: var(--video-height) !important;
 }
 
-.fit {
-  width: fit-content !important;
-  height: fit-content !important;
-  max-width: fit-content !important;
+.minWidth {
+  min-width: calc(var(--video-height) * var(--video-ratio)) !important;
 }
 
 .full {
-  min-width: 100% !important;
   width: 100% !important;
-  max-width: 100% !important;
+  min-width: 100% !important;
 }
 
 .hide {
@@ -104,34 +101,47 @@
   opacity: .5 !important;
 }
 
-.dropZoneTop,
-.dropZoneBottom {
+%dropZoneTopBottom {
   border: 1px dashed var(--color-gray-light);
   position: absolute;
   width: 100%;
   z-index: 9999;
+  background-color: rgba(255, 255, 255, .3);
+
+  &:hover {
+    background-color: rgba(255, 255, 255, .3);
+  }
 }
 
-.dropZoneBgTop,
-.dropZoneBgBottom {
+%dropZoneBgTopBottom {
   z-index: 99;
   width: 100%;
   height: 100%;
+  background-color: rgba(255, 255, 255, .3);
+
+  &:hover {
+    background-color: rgba(255, 255, 255, .3);
+  }
 }
 
-.dropZoneTop,
-.dropZoneBgTop {
+.dropZoneTop {
+  @extend %dropZoneTopBottom;
   top: 0;
 }
 
-.dropZoneBottom,
-.dropZoneBgBottom {
+.dropZoneBottom {
+  @extend %dropZoneTopBottom;
   bottom: 0;
 }
 
-.dropZoneTop:hover .dropZoneBgTop,
-.dropZoneBottom:hover .dropZoneBgBottom {
-  background-color: rgba(255, 255, 255, .3);
+.dropZoneBgTop {
+  @extend %dropZoneBgTopBottom;
+  top: 0;
+}
+
+.dropZoneBgBottom {
+  @extend %dropZoneBgTopBottom;
+  bottom: 0;
 }
 
 .resizable{
diff --git a/bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/component.jsx b/bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/component.jsx
index 4e8300bc13..a6bea13a4f 100644
--- a/bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/component.jsx
@@ -251,10 +251,8 @@ class WebcamDraggable extends Component {
       [styles.overlay]: true,
       [styles.hideOverlay]: hideOverlay,
       [styles.floatingOverlay]: (singleWebcam && placement === 'floating') || dragging,
-      [styles.fit]: singleWebcam && (placement === 'floating' || dragging),
-      [styles.full]: (singleWebcam && (placement === 'top' || placement === 'bottom')
-        && !dragging)
-        || !singleWebcam,
+      [styles.minWidth]: singleWebcam,
+      [styles.full]: !singleWebcam,
       [styles.overlayToTop]: (placement === 'floating' && !singleWebcam)
         || (placement === 'top' && !dragging),
       [styles.overlayToBottom]: placement === 'bottom' && !dragging,
@@ -306,15 +304,16 @@ class WebcamDraggable extends Component {
           <Resizable
             onResize={dispatchResizeEvent}
             enable={{
-              top: !singleWebcam && placement === 'bottom',
+              top: placement === 'bottom' && !singleWebcam,
               right: false,
-              bottom: !singleWebcam && placement === 'top',
+              bottom: placement === 'top' && !singleWebcam,
               left: false,
-              topRight: false,
-              bottomRight: false,
-              bottomLeft: false,
-              topLeft: false,
+              topRight: singleWebcam && !(placement === 'top'),
+              bottomRight: singleWebcam && !(placement === 'bottom'),
+              bottomLeft: singleWebcam && !(placement === 'bottom'),
+              topLeft: singleWebcam && !(placement === 'top'),
             }}
+            lockAspectRatio="true"
             className={
               !swapLayout
                 ? overlayClassName