diff --git a/bigbluebutton-html5/imports/ui/components/media/styles.scss b/bigbluebutton-html5/imports/ui/components/media/styles.scss
index 7ebd8e002e2c5cf64aa88c0dc56d2f15f88f71bb..8090bab56298d26b0aab5cd46a91fa84cb80f510 100644
--- a/bigbluebutton-html5/imports/ui/components/media/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/media/styles.scss
@@ -24,7 +24,6 @@
.overlay {
display: flex;
- width: fit-content;
border: 0;
margin-top: 10px;
margin-bottom: 10px;
@@ -32,6 +31,7 @@
align-items: center;
max-height: var(--video-height);
min-height: var(--video-height);
+ overflow: hidden;
}
.overlayRelative{
@@ -40,11 +40,12 @@
}
.overlayAbsoluteSingle{
- position: absolute;
+ width: fit-content;
}
.overlayAbsoluteMult{
- position: absolute;
+ width: 100%;
+ max-width: 100%;
}
.overlayToTop {
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 3f913284758ea0d2b74a4c6c3cdfaa761a47ae3b..84c2efeca595d8fe9915073a64cb15c7311f7694 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
@@ -29,33 +29,18 @@ const fullscreenChangedEvents = [
const BROWSER_ISMOBILE = browser().mobile;
export default class WebcamDraggableOverlay extends Component {
- static getWebcamBySelector() {
- return document.querySelector('div[class^="videoList"]');
+ static getWebcamGridBySelector() {
+ return document.querySelector('div[class*="videoList"]');
}
- static getWebcamListBySelector() {
- return document.querySelector('div[class^="videoList"]');
- }
-
- static getVideoCanvasBySelector() {
- return document.querySelector('div[class^="videoCanvas"]');
+ static getVideoCountBySelector() {
+ return document.querySelectorAll('video[class*="media"]').length;
}
static getOverlayBySelector() {
return document.querySelector('div[class*="overlay"]');
}
- static isOverlayAbsolute() {
- return !!(document.querySelector('div[class*="overlayAbsolute"]'));
- }
-
- static getIsOverlayChanged() {
- const overlayToTop = document.querySelector('div[class*="overlayToTop"]');
- const overlayToBottom = document.querySelector('div[class*="overlayToBottom"]');
-
- return !!(overlayToTop || overlayToBottom);
- }
-
static getGridLineNum(numCams, camWidth, containerWidth) {
let used = (camWidth + 10) * numCams;
let countLines = 0;
@@ -170,6 +155,7 @@ export default class WebcamDraggableOverlay extends Component {
const { lastPosition } = this.state;
const { y } = lastPosition;
const userLength = usersVideo.length;
+ const prevUserLength = prevProps.usersVideo.length;
if (prevProps.mediaContainer && mediaContainer) {
const mediaContainerRect = mediaContainer.getBoundingClientRect();
@@ -181,7 +167,7 @@ export default class WebcamDraggableOverlay extends Component {
const {
left: prevMediaLeft,
top: prevMediaTop,
- } = mediaContainerRect;
+ } = prevMediaContainerRect;
if (mediaLeft !== prevMediaLeft || mediaTop !== prevMediaTop) {
this.shouldUpdatePosition = false;
@@ -196,9 +182,15 @@ export default class WebcamDraggableOverlay extends Component {
if (prevProps.swapLayout && !swapLayout && userLength > 1) {
this.setLastPosition(0, y);
}
- if (prevProps.userLength === 1 && userLength > 1) {
- this.setDropOnTop(true);
+ if (prevUserLength === 1 && userLength > 1) {
this.setResetPosition(true);
+ this.setDropOnTop(true);
+ }
+ if (prevUserLength > 1 && userLength === 1) {
+ WebcamDraggableOverlay.waitFor(
+ () => WebcamDraggableOverlay.getVideoCountBySelector() === 1,
+ this.updateWebcamPositionByResize,
+ );
}
}
@@ -237,7 +229,7 @@ export default class WebcamDraggableOverlay extends Component {
const { current: mediaContainer } = refMediaContainer;
const userLength = usersVideo.length;
- const webcamBySelector = WebcamDraggableOverlay.getWebcamBySelector();
+ const webcamBySelector = WebcamDraggableOverlay.getWebcamGridBySelector();
if (webcamBySelector && mediaContainer && this.shouldUpdatePosition) {
const webcamBySelectorRect = webcamBySelector.getBoundingClientRect();
@@ -278,15 +270,13 @@ export default class WebcamDraggableOverlay extends Component {
const userLength = usersVideo.length;
const { x: initX, y: initY } = initialRectPosition;
- const webcamBySelector = WebcamDraggableOverlay.getWebcamBySelector();
+ const webcamBySelector = WebcamDraggableOverlay.getWebcamGridBySelector();
if (webcamBySelector && mediaContainer && this.shouldUpdatePosition) {
const webcamBySelectorRect = webcamBySelector.getBoundingClientRect();
const {
left: webcamLeft,
top: webcamTop,
- width: webcamWidth,
- height: webcamHeight,
} = webcamBySelectorRect;
const mediaContainerRect = mediaContainer.getBoundingClientRect();
@@ -295,12 +285,12 @@ export default class WebcamDraggableOverlay extends Component {
top: mediaTop,
} = mediaContainerRect;
- const webcamXByMedia = userLength > 1 ? 0 : webcamLeft - mediaLeft;
+ const webcamXByMedia = webcamLeft - mediaLeft;
const webcamYByMedia = webcamTop - mediaTop;
let x = -(initX - webcamXByMedia);
x = floatingOverlay ? -((initX - webcamXByMedia) + 10) : x;
- x = userLength > 1 && floatingOverlay ? 0 : x;
+ x = userLength > 1 ? 0 : x;
x = !dragging && webcamXByMedia < 0 ? -initX : x;
@@ -375,8 +365,6 @@ export default class WebcamDraggableOverlay extends Component {
resetPosition,
} = this.state;
- const { x, y } = position;
-
if (!floatingOverlay && dropOnTop) WebcamDraggableOverlay.getOverlayBySelector().style.top = 0;
if (!dragging) this.setState({ dragging: true });
@@ -468,7 +456,11 @@ export default class WebcamDraggableOverlay extends Component {
disableVideo,
audioModalIsOpen,
refMediaContainer,
+ usersVideo,
} = this.props;
+
+ const userLength = usersVideo.length;
+
const { current: mediaContainer } = refMediaContainer;
let mediaContainerRect;
@@ -503,6 +495,7 @@ export default class WebcamDraggableOverlay extends Component {
const overlayClassName = cx({
[styles.overlay]: true,
[styles.overlayRelative]: (dropOnTop || dropOnBottom),
+ [styles.overlayAbsoluteMult]: (!dropOnTop && !dropOnBottom) && userLength > 1,
[styles.hideOverlay]: hideOverlay,
[styles.floatingOverlay]: floatingOverlay && (!dropOnTop && !dropOnBottom),
[styles.overlayToTop]: dropOnTop,
@@ -550,11 +543,11 @@ export default class WebcamDraggableOverlay extends Component {
onMouseLeave={this.dropZoneTopLeaveHandler}
onMouseUp={this.dropZoneTopMouseUpHandler}
role="presentation"
- style={{ height: '100px' }}
+ style={{ height: userLength > 1 ? '50%' : '20%' }}
/>
<div
className={dropZoneBgTopClassName}
- style={{ height: '100px' }}
+ style={{ height: userLength > 1 ? '50%' : '20%' }}
/>
<Draggable
@@ -568,6 +561,9 @@ export default class WebcamDraggableOverlay extends Component {
>
<div
className={!swapLayout ? overlayClassName : contentClassName}
+ style={{
+ maxHeight: mediaHeight,
+ }}
>
{
!disableVideo && !audioModalIsOpen
@@ -575,7 +571,6 @@ export default class WebcamDraggableOverlay extends Component {
<VideoProviderContainer
cursor={cursor()}
swapLayout={swapLayout}
- mediaHeight={mediaHeight}
onMount={this.videoMounted}
/>
) : null}
@@ -588,11 +583,11 @@ export default class WebcamDraggableOverlay extends Component {
onMouseLeave={this.dropZoneBottomLeaveHandler}
onMouseUp={this.dropZoneBottomMouseUpHandler}
role="presentation"
- style={{ height: '100px' }}
+ style={{ height: userLength > 1 ? '50%' : '20%' }}
/>
<div
className={dropZoneBgBottomClassName}
- style={{ height: '100px' }}
+ style={{ height: userLength > 1 ? '50%' : '20%' }}
/>
</Fragment>
);
diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/container.jsx b/bigbluebutton-html5/imports/ui/components/video-provider/container.jsx
index 00b68f9b2e1f9719982c05fe367095c2dad732ab..065e3e7549caf229b11f8a46c05116b22a92481a 100755
--- a/bigbluebutton-html5/imports/ui/components/video-provider/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/video-provider/container.jsx
@@ -12,7 +12,6 @@ const VideoProviderContainer = ({ children, ...props }) => {
export default withTracker(props => ({
cursor: props.cursor,
swapLayout: props.swapLayout,
- mediaHeight: props.mediaHeight,
meetingId: VideoService.meetingId(),
users: VideoService.getAllUsersVideo(),
userId: VideoService.userId(),
diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/component.jsx b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/component.jsx
index b43fe69716e7ac695f01d8fcf9fd3c835d2d4a28..e0c23e436d1c094fd9ec1c55c912db66f566c858 100644
--- a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/component.jsx
@@ -144,7 +144,6 @@ class VideoList extends Component {
enableVideoStats,
cursor,
swapLayout,
- mediaHeight,
} = this.props;
const { focusedId } = this.state;
@@ -184,7 +183,6 @@ class VideoList extends Component {
stopGettingStats={() => stopGettingStats(user.id)}
enableVideoStats={enableVideoStats}
swapLayout={swapLayout}
- mediaHeight={mediaHeight}
/>
</div>
);
@@ -192,7 +190,7 @@ class VideoList extends Component {
}
render() {
- const { users, swapLayout } = this.props;
+ const { users } = this.props;
const { optimalGrid } = this.state;
const canvasClassName = cx({
diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/component.jsx b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/component.jsx
index e55d606108a6a5f3ff8e4b9ac5cbe4d1fd31a9a4..5a67965a6d067c6494b3661b704d12ab7384ef6e 100755
--- a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/component.jsx
@@ -130,7 +130,7 @@ class VideoListItem extends Component {
render() {
const { showStats, stats, videoIsReady } = this.state;
const {
- user, numOfUsers, swapLayout, mediaHeight,
+ user, numOfUsers,
} = this.props;
const availableActions = this.getAvailableActions();
const enableVideoMenu = Meteor.settings.public.kurento.enableVideoMenu || false;