Anable resize when single webcam
This commit is contained in:
parent
c0005b93c1
commit
67e6b90fae
@ -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{
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user