From 88244be1391ed80ccadbf2b3be6cda4e38ee09d9 Mon Sep 17 00:00:00 2001
From: Vitor Mateus <vitormateusalmeida@gmail.com>
Date: Mon, 24 Jun 2019 15:37:17 -0300
Subject: [PATCH] Fix webcams size when minimize presentation
---
.../imports/ui/components/media/styles.scss | 3 +-
.../webcam-draggable-overlay/component.jsx | 90 ++++++++-----------
.../video-provider/video-list/component.jsx | 9 +-
.../video-provider/video-list/styles.scss | 19 +---
.../video-list/video-list-item/component.jsx | 9 +-
.../ui/stylesheets/variables/video.scss | 10 +--
6 files changed, 47 insertions(+), 93 deletions(-)
diff --git a/bigbluebutton-html5/imports/ui/components/media/styles.scss b/bigbluebutton-html5/imports/ui/components/media/styles.scss
index 40c3e77170..7ebd8e002e 100644
--- a/bigbluebutton-html5/imports/ui/components/media/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/media/styles.scss
@@ -31,10 +31,12 @@
z-index: 2;
align-items: center;
max-height: var(--video-height);
+ min-height: var(--video-height);
}
.overlayRelative{
position: relative;
+ width: 100%;
}
.overlayAbsoluteSingle{
@@ -65,7 +67,6 @@
.floatingOverlay {
margin-top: 10px;
margin-bottom: 10px;
- //max-width: calc(var(--video-height) * var(--video-ratio));
@include mq($medium-up) {
z-index: 999;
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 78a6f863cc..3f91328475 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
@@ -104,9 +104,10 @@ export default class WebcamDraggableOverlay extends Component {
isFullScreen: false,
isVideoLoaded: false,
isMinWidth: false,
- shouldUpdatePosition: true,
};
+ this.shouldUpdatePosition = true;
+
this.updateWebcamPositionByResize = this.updateWebcamPositionByResize.bind(this);
this.eventVideoFocusChangeListener = this.eventVideoFocusChangeListener.bind(this);
@@ -165,13 +166,33 @@ export default class WebcamDraggableOverlay extends Component {
}
componentDidUpdate(prevProps, prevState) {
- const { swapLayout, usersVideo } = this.props;
+ const { swapLayout, usersVideo, mediaContainer } = this.props;
const { lastPosition } = this.state;
const { y } = lastPosition;
const userLength = usersVideo.length;
- // if (prevProps.swapLayout && !swapLayout && userLength === 1) {
- // this.setShouldUpdatePosition(false);
- // }
+
+ if (prevProps.mediaContainer && mediaContainer) {
+ const mediaContainerRect = mediaContainer.getBoundingClientRect();
+ const {
+ left: mediaLeft,
+ top: mediaTop,
+ } = mediaContainerRect;
+ const prevMediaContainerRect = prevProps.mediaContainer.getBoundingClientRect();
+ const {
+ left: prevMediaLeft,
+ top: prevMediaTop,
+ } = mediaContainerRect;
+
+ if (mediaLeft !== prevMediaLeft || mediaTop !== prevMediaTop) {
+ this.shouldUpdatePosition = false;
+ } else if (this.shouldUpdatePosition === false) {
+ this.shouldUpdatePosition = true;
+ }
+ }
+
+ if (prevProps.swapLayout && !swapLayout && userLength === 1) {
+ this.shouldUpdatePosition = false;
+ }
if (prevProps.swapLayout && !swapLayout && userLength > 1) {
this.setLastPosition(0, y);
}
@@ -213,13 +234,12 @@ export default class WebcamDraggableOverlay extends Component {
setInitialReferencePoint() {
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 (webcamBySelector && mediaContainer && this.shouldUpdatePosition) {
const webcamBySelectorRect = webcamBySelector.getBoundingClientRect();
const {
width: webcamWidth,
@@ -252,18 +272,15 @@ export default class WebcamDraggableOverlay extends Component {
}
setLastWebcamPosition() {
- console.log('%c setLastWebcamPosition',
- 'background:orange;color:#fff;font-size:12px;');
-
- const { refMediaContainer, usersVideo } = this.props;
+ const { refMediaContainer, usersVideo, floatingOverlay } = this.props;
const { current: mediaContainer } = refMediaContainer;
- const { initialRectPosition, shouldUpdatePosition } = this.state;
+ const { initialRectPosition, dragging } = this.state;
const userLength = usersVideo.length;
const { x: initX, y: initY } = initialRectPosition;
const webcamBySelector = WebcamDraggableOverlay.getWebcamBySelector();
- if (webcamBySelector && mediaContainer && shouldUpdatePosition) {
+ if (webcamBySelector && mediaContainer && this.shouldUpdatePosition) {
const webcamBySelectorRect = webcamBySelector.getBoundingClientRect();
const {
left: webcamLeft,
@@ -282,38 +299,13 @@ export default class WebcamDraggableOverlay extends Component {
const webcamYByMedia = webcamTop - mediaTop;
let x = -(initX - webcamXByMedia);
- let y = -(initY - webcamYByMedia);
+ x = floatingOverlay ? -((initX - webcamXByMedia) + 10) : x;
+ x = userLength > 1 && floatingOverlay ? 0 : x;
- // 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);
+ x = !dragging && webcamXByMedia < 0 ? -initX : x;
+
+ let y = -(initY - webcamYByMedia);
+ y = webcamYByMedia < 0 ? -initY : y;
this.setLastPosition(x, y);
}
@@ -324,9 +316,6 @@ 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 });
@@ -377,8 +366,6 @@ export default class WebcamDraggableOverlay extends Component {
}
handleWebcamDragStart(e, position) {
- console.log('%c handleWebcamDragStart',
- 'background:red;color:#fff;font-size:14px;');
const { floatingOverlay } = this.props;
const {
dragging,
@@ -392,13 +379,12 @@ export default class WebcamDraggableOverlay extends Component {
if (!floatingOverlay && dropOnTop) WebcamDraggableOverlay.getOverlayBySelector().style.top = 0;
+ if (!dragging) this.setState({ dragging: 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'));
}
handleWebcamDragStop(e, position) {
@@ -413,7 +399,7 @@ export default class WebcamDraggableOverlay extends Component {
if (showDropZones) this.setState({ showDropZones: false });
this.setLastPosition(x, y);
- // window.dispatchEvent(new Event('resize'));
+ window.dispatchEvent(new Event('resize'));
}
dropZoneTopEnterHandler() {
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 f1b0ca53db..b43fe69716 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
@@ -165,8 +165,7 @@ class VideoList extends Component {
<div
key={user.id}
className={cx({
- [styles.videoListItem]: !swapLayout,
- [styles.videoListItemSwapLayout]: swapLayout,
+ [styles.videoListItem]: true,
[styles.focused]: focusedId === user.id && users.length > 2,
})}
style={{
@@ -197,13 +196,11 @@ class VideoList extends Component {
const { optimalGrid } = this.state;
const canvasClassName = cx({
- [styles.videoCanvas]: !swapLayout,
- [styles.videoCanvasSwapLayout]: swapLayout,
+ [styles.videoCanvas]: true,
});
const videoListClassName = cx({
- [styles.videoList]: !swapLayout,
- [styles.videoListSwapLayout]: swapLayout,
+ [styles.videoList]: true,
});
return (
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 2082875a1f..88edd08c26 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
@@ -9,9 +9,9 @@
--cam-dropdown-width: 70%;
--audio-indicator-width: 1.12rem;
--audio-indicator-fs: 75%;
- position: relative;
+ position: absolute;
width: 100%;
- min-height: calc(var(--video-height));
+ min-height: var(--video-height);
height: 100%;
top: 0;
left: 0;
@@ -22,21 +22,6 @@
justify-content: center;
}
-.videoCanvasSwapLayout {
- --cam-dropdown-width: 70%;
- --audio-indicator-width: 1.12rem;
- --audio-indicator-fs: 75%;
- position: relative;
- width: 100%;
- min-height: calc(var(--video-height));
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- align-items: center;
- justify-content: center;
-}
-
.videoList {
display: grid;
border-radius: 5px;
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 7564f1a462..e55d606108 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
@@ -140,22 +140,15 @@ class VideoListItem extends Component {
return (
<div className={cx({
- [styles.content]: !swapLayout,
- [styles.contentSwapLayout]: swapLayout,
+ [styles.content]: true,
[styles.talking]: user.isTalking,
- // [styles.contentLoading]: !videoIsReady && !swapLayout,
- // [styles.contentLoadingSwapLayout]: !videoIsReady && swapLayout,
})}
>
{!videoIsReady && <div className={styles.connecting} />}
<video
- style={{
- maxHeight: mediaHeight - 20, // 20 is margin
- }}
muted
className={cx({
[styles.media]: true,
- // [styles.contentLoading]: !videoIsReady,
})}
ref={(ref) => { this.videoTag = ref; }}
autoPlay
diff --git a/bigbluebutton-html5/imports/ui/stylesheets/variables/video.scss b/bigbluebutton-html5/imports/ui/stylesheets/variables/video.scss
index 579e0be996..af5c507bbc 100644
--- a/bigbluebutton-html5/imports/ui/stylesheets/variables/video.scss
+++ b/bigbluebutton-html5/imports/ui/stylesheets/variables/video.scss
@@ -1,14 +1,6 @@
@import "../../stylesheets/variables/_all";
:root {
- //--video-width: 10vw;
- --video-height: calc(20vh - calc(var(--navbar-height) + var(--actionsbar-height)));
+ --video-height: calc((100vh - calc(var(--navbar-height) + var(--actionsbar-height))) * 0.2);
--video-ratio: calc(4 / 3);
}
-
-
-//@include mq($small-only) {
-// :root {
-// --video-width: 20vw;
-// }
-//}
--
GitLab