diff --git a/bigbluebutton-html5/imports/ui/components/media/component.jsx b/bigbluebutton-html5/imports/ui/components/media/component.jsx
index 6f62dcae77d5266fda714827db9cd4d8a234daa1..f6b431ab256bff9ae71e5e79158b23770171f34e 100644
--- a/bigbluebutton-html5/imports/ui/components/media/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/media/component.jsx
@@ -55,8 +55,6 @@ export default class Media extends Component {
usersVideo,
} = this.props;
- console.log(children);
-
const contentClassName = cx({
[styles.content]: true,
});
diff --git a/bigbluebutton-html5/imports/ui/components/media/styles.scss b/bigbluebutton-html5/imports/ui/components/media/styles.scss
index 3437a6221576cd6b7bd902993683b0fca03e2ee7..40c3e77170d06b8fb72c6804c93312cb6c850d01 100644
--- a/bigbluebutton-html5/imports/ui/components/media/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/media/styles.scss
@@ -24,7 +24,7 @@
.overlay {
display: flex;
- width: 100%;
+ width: fit-content;
border: 0;
margin-top: 10px;
margin-bottom: 10px;
@@ -63,18 +63,19 @@
}
.floatingOverlay {
- margin: 10px;
- max-width: calc(var(--video-height) * var(--video-ratio));
+ margin-top: 10px;
+ margin-bottom: 10px;
+ //max-width: calc(var(--video-height) * var(--video-ratio));
@include mq($medium-up) {
z-index: 999;
position: absolute;
bottom: 0;
right: 0;
- width: calc(var(--video-height) * var(--video-ratio));
+ width: fit-content;
min-width: calc(var(--video-height) * var(--video-ratio));
- max-width: calc(var(--video-height) * var(--video-ratio));
- height: var(--video-height);
+ max-width: fit-content;
+ height: fit-content;
min-height: var(--video-height);
}
}
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 1ec605c91187c26db331ce9f0abb1ee9c4a29b1f..78a6f863cc16db7397ac12c025a7739407020c7d 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
@@ -30,11 +30,7 @@ const BROWSER_ISMOBILE = browser().mobile;
export default class WebcamDraggableOverlay extends Component {
static getWebcamBySelector() {
- return document.querySelector('video[class^="media"]');
- }
-
- static getWebcamBySelectorCount() {
- return document.querySelectorAll('video[class^="media"]').length;
+ return document.querySelector('div[class^="videoList"]');
}
static getWebcamListBySelector() {
@@ -90,16 +86,24 @@ export default class WebcamDraggableOverlay extends Component {
showDropZones: false,
showBgDropZoneTop: false,
showBgDropZoneBottom: false,
- dropOnTop: BROWSER_ISMOBILE,
- dropOnBottom: !BROWSER_ISMOBILE,
- initialPosition: { x: 0, y: 0 },
- initialRectPosition: { x: 0, y: 0 },
- lastPosition: { x: 0, y: 0 },
+ dropOnTop: true,
+ dropOnBottom: false,
+ initialPosition: {
+ x: 0,
+ y: 0,
+ },
+ initialRectPosition: {
+ x: 0,
+ y: 0,
+ },
+ lastPosition: {
+ x: 0,
+ y: 0,
+ },
resetPosition: false,
isFullScreen: false,
isVideoLoaded: false,
isMinWidth: false,
- userLength: 0,
shouldUpdatePosition: true,
};
@@ -122,15 +126,13 @@ export default class WebcamDraggableOverlay extends Component {
this.handleFullscreenChange = this.handleFullscreenChange.bind(this);
this.fullscreenButtonChange = this.fullscreenButtonChange.bind(this);
- this.getVideoListUsersChange = this.getVideoListUsersChange.bind(this);
this.setIsFullScreen = this.setIsFullScreen.bind(this);
this.setResetPosition = this.setResetPosition.bind(this);
this.setInitialReferencePoint = this.setInitialReferencePoint.bind(this);
this.setLastPosition = this.setLastPosition.bind(this);
- this.setShouldUpdatePosition = this.setShouldUpdatePosition.bind(this);
this.setLastWebcamPosition = this.setLastWebcamPosition.bind(this);
this.setisMinWidth = this.setisMinWidth.bind(this);
- this.setDropOnBottom = this.setDropOnBottom.bind(this);
+ this.setDropOnTop = this.setDropOnTop.bind(this);
this.dropZoneTopEnterHandler = this.dropZoneTopEnterHandler.bind(this);
this.dropZoneTopLeaveHandler = this.dropZoneTopLeaveHandler.bind(this);
@@ -147,7 +149,9 @@ export default class WebcamDraggableOverlay extends Component {
const { resetPosition } = this.state;
if (!floatingOverlay
- && !resetPosition) this.setResetPosition(true);
+ && !resetPosition) {
+ this.setResetPosition(true);
+ }
window.addEventListener('resize', this.eventResizeListener);
window.addEventListener('videoFocusChange', this.eventVideoFocusChangeListener);
@@ -158,41 +162,34 @@ export default class WebcamDraggableOverlay extends Component {
// Ensures that the event will be called before the resize
document.addEventListener('webcamFullscreenButtonChange', this.fullscreenButtonChange);
-
- window.addEventListener('videoListUsersChange', this.getVideoListUsersChange);
}
componentDidUpdate(prevProps, prevState) {
- const { swapLayout } = this.props;
- const { userLength, lastPosition } = this.state;
+ const { swapLayout, usersVideo } = this.props;
+ const { lastPosition } = this.state;
const { y } = lastPosition;
+ const userLength = usersVideo.length;
// if (prevProps.swapLayout && !swapLayout && userLength === 1) {
// this.setShouldUpdatePosition(false);
// }
if (prevProps.swapLayout && !swapLayout && userLength > 1) {
this.setLastPosition(0, y);
}
- if (prevState.userLength === 1 && userLength > 1) {
- this.setDropOnBottom(true);
+ if (prevProps.userLength === 1 && userLength > 1) {
+ this.setDropOnTop(true);
this.setResetPosition(true);
}
}
componentWillUnmount() {
fullscreenChangedEvents.forEach((event) => {
- document.removeEventListener(event, this.fullScreenToggleCallback);
+ document.removeEventListener(event, this.handleFullscreenChange);
});
document.removeEventListener('webcamFullscreenButtonChange', this.fullscreenButtonChange);
- document.removeEventListener('videoListUsersChange', this.getVideoListUsersChange);
document.removeEventListener('videoFocusChange', this.eventVideoFocusChangeListener);
}
- getVideoListUsersChange() {
- const userLength = WebcamDraggableOverlay.getWebcamBySelectorCount();
- this.setState({ userLength });
- }
-
setIsFullScreen(isFullScreen) {
this.setState({ isFullScreen });
}
@@ -202,30 +199,27 @@ export default class WebcamDraggableOverlay extends Component {
}
setLastPosition(x, y) {
- this.setState({ lastPosition: { x, y } });
- }
-
- setShouldUpdatePosition(shouldUpdatePosition) {
- this.setState({ shouldUpdatePosition });
+ this.setState({
+ lastPosition: {
+ x,
+ y,
+ },
+ });
}
- setDropOnBottom(dropOnBottom) {
- this.setState({ dropOnBottom });
+ setDropOnTop(dropOnTop) {
+ this.setState({ dropOnTop });
}
setInitialReferencePoint() {
- const { refMediaContainer } = this.props;
- const { userLength, shouldUpdatePosition } = this.state;
+ const { refMediaContainer, usersVideo } = this.props;
+ const { shouldUpdatePosition } = this.state;
const { current: mediaContainer } = refMediaContainer;
+ const userLength = usersVideo.length;
const webcamBySelector = WebcamDraggableOverlay.getWebcamBySelector();
if (webcamBySelector && mediaContainer && shouldUpdatePosition) {
- if (userLength === 0) this.getVideoListUsersChange();
-
- let x = 0;
- let y = 0;
-
const webcamBySelectorRect = webcamBySelector.getBoundingClientRect();
const {
width: webcamWidth,
@@ -241,21 +235,30 @@ export default class WebcamDraggableOverlay extends Component {
const lineNum = WebcamDraggableOverlay
.getGridLineNum(userLength, webcamWidth, mediaWidth);
- x = mediaWidth - ((webcamWidth + 10) * userLength); // 10 is margin
- y = mediaHeight - ((webcamHeight + 10) * lineNum); // 10 is margin
+ const x = mediaWidth - ((webcamWidth + 10) * userLength); // 10 is margin
+ const y = mediaHeight - ((webcamHeight + 10) * lineNum); // 10 is margin
if (x === 0 && y === 0) return false;
- this.setState({ initialRectPosition: { x, y } });
+ this.setState({
+ initialRectPosition: {
+ x,
+ y,
+ },
+ });
return true;
}
return false;
}
setLastWebcamPosition() {
- const { refMediaContainer } = this.props;
+ console.log('%c setLastWebcamPosition',
+ 'background:orange;color:#fff;font-size:12px;');
+
+ const { refMediaContainer, usersVideo } = this.props;
const { current: mediaContainer } = refMediaContainer;
- const { initialRectPosition, userLength, shouldUpdatePosition } = this.state;
+ const { initialRectPosition, shouldUpdatePosition } = this.state;
+ const userLength = usersVideo.length;
const { x: initX, y: initY } = initialRectPosition;
const webcamBySelector = WebcamDraggableOverlay.getWebcamBySelector();
@@ -265,6 +268,8 @@ export default class WebcamDraggableOverlay extends Component {
const {
left: webcamLeft,
top: webcamTop,
+ width: webcamWidth,
+ height: webcamHeight,
} = webcamBySelectorRect;
const mediaContainerRect = mediaContainer.getBoundingClientRect();
@@ -276,25 +281,39 @@ export default class WebcamDraggableOverlay extends Component {
const webcamXByMedia = userLength > 1 ? 0 : webcamLeft - mediaLeft;
const webcamYByMedia = webcamTop - mediaTop;
- let x = 0;
- let y = 0;
-
- if (webcamXByMedia > 0) {
- x = webcamXByMedia - initX;
- } else {
- x = 0 - initX;
- }
- if (userLength > 1) x = 0;
-
- if (webcamYByMedia > 0) {
- y = webcamYByMedia - initY;
- } else {
- y = 0 - initY;
- }
-
- if (webcamYByMedia > initY) {
- y = -10;
- }
+ let x = -(initX - webcamXByMedia);
+ let y = -(initY - webcamYByMedia);
+
+ // if (webcamXByMedia > 0) {
+ // x = webcamXByMedia - initX;
+ // } else {
+ // x = 0 - initX;
+ // }
+ // if (userLength > 1) x = 0;
+
+ // if (webcamYByMedia > 0) {
+ // y = webcamYByMedia - (initY - 10);
+ // } else {
+ // y = 0 - (initY - 10);
+ // }
+
+ // if (webcamYByMedia > initY) {
+ // y = -10;
+ // }
+
+ console.log('%c initX: %s',
+ 'background:purple;color:#fff;font-size:12px;',
+ initX);
+ console.log('%c initY: %s',
+ 'background:purple;color:#fff;font-size:12px;',
+ initY);
+
+ console.log('%c X: %s',
+ 'background:black;color:#fff;font-size:12px;',
+ x);
+ console.log('%c Y: %s',
+ 'background:black;color:#fff;font-size:12px;',
+ y);
this.setLastPosition(x, y);
}
@@ -305,6 +324,9 @@ export default class WebcamDraggableOverlay extends Component {
}
videoMounted() {
+ console.log('%c Montou!',
+ 'background:green;color:#fff;font-size:14px;');
+
this.setResetPosition(true);
WebcamDraggableOverlay.waitFor(this.setInitialReferencePoint, this.setLastWebcamPosition);
this.setState({ isVideoLoaded: true });
@@ -327,7 +349,7 @@ export default class WebcamDraggableOverlay extends Component {
if (window.innerWidth < 641) {
this.setisMinWidth(true);
- this.setState({ dropOnBottom: true });
+ this.setState({ dropOnTop: true });
this.setResetPosition(true);
} else if (isMinWidth) {
this.setisMinWidth(false);
@@ -354,7 +376,9 @@ export default class WebcamDraggableOverlay extends Component {
}
}
- handleWebcamDragStart() {
+ handleWebcamDragStart(e, position) {
+ console.log('%c handleWebcamDragStart',
+ 'background:red;color:#fff;font-size:14px;');
const { floatingOverlay } = this.props;
const {
dragging,
@@ -364,14 +388,17 @@ export default class WebcamDraggableOverlay extends Component {
resetPosition,
} = this.state;
- if (!floatingOverlay) WebcamDraggableOverlay.getOverlayBySelector().style.bottom = 0;
+ const { x, y } = position;
+
+ if (!floatingOverlay && dropOnTop) WebcamDraggableOverlay.getOverlayBySelector().style.top = 0;
- if (!dragging) this.setState({ dragging: true });
- if (!showDropZones) this.setState({ showDropZones: true });
if (dropOnTop) this.setState({ dropOnTop: false });
if (dropOnBottom) this.setState({ dropOnBottom: false });
+ if (!showDropZones) this.setState({ showDropZones: true });
+ if (!dragging) this.setState({ dragging: true });
+
if (resetPosition) this.setState({ resetPosition: false });
- window.dispatchEvent(new Event('resize'));
+ // window.dispatchEvent(new Event('resize'));
}
handleWebcamDragStop(e, position) {
@@ -386,6 +413,7 @@ export default class WebcamDraggableOverlay extends Component {
if (showDropZones) this.setState({ showDropZones: false });
this.setLastPosition(x, y);
+ // window.dispatchEvent(new Event('resize'));
}
dropZoneTopEnterHandler() {
@@ -482,8 +510,6 @@ export default class WebcamDraggableOverlay extends Component {
isMinWidth,
} = this.state;
- const webcamBySelectorCount = WebcamDraggableOverlay.getWebcamBySelectorCount();
-
const contentClassName = cx({
[styles.content]: true,
});
@@ -491,8 +517,6 @@ export default class WebcamDraggableOverlay extends Component {
const overlayClassName = cx({
[styles.overlay]: true,
[styles.overlayRelative]: (dropOnTop || dropOnBottom),
- [styles.overlayAbsoluteSingle]: (!dropOnTop && !dropOnBottom && webcamBySelectorCount <= 1),
- [styles.overlayAbsoluteMult]: (!dropOnTop && !dropOnBottom && webcamBySelectorCount > 1),
[styles.hideOverlay]: hideOverlay,
[styles.floatingOverlay]: floatingOverlay && (!dropOnTop && !dropOnBottom),
[styles.overlayToTop]: dropOnTop,
@@ -567,7 +591,6 @@ export default class WebcamDraggableOverlay extends Component {
swapLayout={swapLayout}
mediaHeight={mediaHeight}
onMount={this.videoMounted}
- onUpdate={this.videoUpdated}
/>
) : null}
</div>
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 a1bbce95f6a6f59a13ab58331843d4d7b7dd2de3..f1b0ca53dba835e8bba165c86f0062894a14f755 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
@@ -68,7 +68,11 @@ class VideoList extends Component {
this.ticking = false;
this.grid = null;
this.canvas = null;
- this.handleCanvasResize = _.throttle(this.handleCanvasResize.bind(this), 66);
+ this.handleCanvasResize = _.throttle(this.handleCanvasResize.bind(this), 66,
+ {
+ leading: true,
+ trailing: true,
+ });
this.setOptimalGrid = this.setOptimalGrid.bind(this);
}
diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss
index dbf94895673f5ca5e8243542ae46eaa38eb58247..2082875a1f7c9e6bdded6271cb99834f7f22505a 100755
--- a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss
@@ -11,7 +11,7 @@
--audio-indicator-fs: 75%;
position: relative;
width: 100%;
- min-height: calc(var(--video-width) / var(--video-ratio));
+ min-height: calc(var(--video-height));
height: 100%;
top: 0;
left: 0;
@@ -28,7 +28,7 @@
--audio-indicator-fs: 75%;
position: relative;
width: 100%;
- min-height: calc(var(--video-width) / var(--video-ratio));
+ min-height: calc(var(--video-height));
top: 0;
left: 0;
right: 0;
@@ -52,24 +52,6 @@
}
}
-.videoListSwapLayout {
- display: grid;
- padding: 10px;
- border-radius: 5px;
- min-height: calc(var(--video-width) / var(--video-ratio));
- grid-template-columns: repeat(auto-fit, minmax(var(--video-width), 1fr));
- grid-auto-columns: minmax(var(--video-width), 1fr);
- grid-auto-rows: 1fr;
- grid-gap: 5px;
- align-items: center;
- justify-content: center;
- grid-auto-flow: row;
-
- @include mq($medium-up) {
- grid-gap: 10px;
- }
-}
-
.videoListItem {
display: flex;
@@ -79,15 +61,6 @@
}
}
-.videoListItemSwapLayout {
- display: flex;
-
- &.focused {
- grid-column: 1 / span 2;
- grid-row: 1 / span 2;
- }
-}
-
.content {
position: relative;
display: flex;
@@ -117,39 +90,6 @@
}
}
-.contentSwapLayout {
- position: relative;
- min-width: 100%;
- height: 100%;
- min-height: 100%;
- border-radius: 5px;
-
- background-color: var(--color-gray);
-
- width: 100%;
-
- &::after {
- content: "";
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- border: 5px solid var(--color-white-with-transparency);
- border-radius: 5px;
- opacity: 0;
- pointer-events: none;
-
- :global(.animationsEnabled) & {
- transition: opacity .1s;
- }
- }
-
- &.talking::after {
- opacity: 1;
- }
-}
-
%media-area {
position: relative;
height: 100%;
diff --git a/bigbluebutton-html5/imports/ui/stylesheets/variables/video.scss b/bigbluebutton-html5/imports/ui/stylesheets/variables/video.scss
index 6be7b05f6ef28328aeb3d69cb0f4a6d466269a29..579e0be996713f809a08d90f1ad7999eb5360670 100644
--- a/bigbluebutton-html5/imports/ui/stylesheets/variables/video.scss
+++ b/bigbluebutton-html5/imports/ui/stylesheets/variables/video.scss
@@ -2,7 +2,7 @@
:root {
//--video-width: 10vw;
- --video-height: 20%;
+ --video-height: calc(20vh - calc(var(--navbar-height) + var(--actionsbar-height)));
--video-ratio: calc(4 / 3);
}