Anable resize when single webcam

This commit is contained in:
Vitor Mateus 2019-09-10 16:41:11 -03:00
parent c0005b93c1
commit 67e6b90fae
2 changed files with 36 additions and 27 deletions

View File

@ -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{

View File

@ -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