From 35a5b45b1c339b42cc29544c3262c592c33edf70 Mon Sep 17 00:00:00 2001
From: Vitor Mateus <vitormateusalmeida@gmail.com>
Date: Thu, 23 Jan 2020 15:09:39 -0300
Subject: [PATCH] Fixes resizing bar appearing while there are no webcams
shared #8531
---
.../imports/ui/components/media/component.jsx | 37 ++++++++++++-------
.../imports/ui/components/media/container.jsx | 5 ++-
.../imports/ui/components/media/styles.scss | 2 -
.../webcam-draggable-overlay/context.jsx | 2 +-
.../private/config/settings.yml | 1 +
5 files changed, 29 insertions(+), 18 deletions(-)
diff --git a/bigbluebutton-html5/imports/ui/components/media/component.jsx b/bigbluebutton-html5/imports/ui/components/media/component.jsx
index 543d91fe2d..0c2894a3b7 100644
--- a/bigbluebutton-html5/imports/ui/components/media/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/media/component.jsx
@@ -4,6 +4,7 @@ import cx from 'classnames';
import { isMobile, isIPad13 } from 'react-device-detect';
import WebcamDraggable from './webcam-draggable-overlay/component';
import { styles } from './styles';
+import Storage from '../../services/storage/session';
const BROWSER_ISMOBILE = isMobile || isIPad13;
@@ -15,7 +16,7 @@ const propTypes = {
swapLayout: PropTypes.bool,
disableVideo: PropTypes.bool,
audioModalIsOpen: PropTypes.bool,
- webcamPlacement: PropTypes.string,
+ webcamDraggableState: PropTypes.instanceOf(Object).isRequired,
};
const defaultProps = {
@@ -24,7 +25,6 @@ const defaultProps = {
swapLayout: false,
disableVideo: false,
audioModalIsOpen: false,
- webcamPlacement: 'top',
};
@@ -47,9 +47,13 @@ export default class Media extends Component {
children,
audioModalIsOpen,
usersVideo,
- webcamPlacement,
+ webcamDraggableState,
} = this.props;
+ const { placement } = webcamDraggableState;
+ const placementStorage = Storage.getItem('webcamPlacement');
+ const webcamPlacement = placement || placementStorage;
+
const contentClassName = cx({
[styles.content]: true,
});
@@ -61,6 +65,7 @@ export default class Media extends Component {
});
const containerClassName = cx({
+ [styles.container]: true,
[styles.containerV]: webcamPlacement === 'top' || webcamPlacement === 'bottom' || webcamPlacement === 'floating',
[styles.containerH]: webcamPlacement === 'left' || webcamPlacement === 'right',
});
@@ -102,16 +107,22 @@ export default class Media extends Component {
>
{children}
</div>
- <WebcamDraggable
- refMediaContainer={this.refContainer}
- swapLayout={swapLayout}
- singleWebcam={singleWebcam}
- usersVideoLenght={usersVideo.length}
- hideOverlay={hideOverlay}
- disableVideo={disableVideo}
- audioModalIsOpen={audioModalIsOpen}
- usersVideo={usersVideo}
- />
+ {
+ usersVideo.length > 0
+ ? (
+ <WebcamDraggable
+ refMediaContainer={this.refContainer}
+ swapLayout={swapLayout}
+ singleWebcam={singleWebcam}
+ usersVideoLenght={usersVideo.length}
+ hideOverlay={hideOverlay}
+ disableVideo={disableVideo}
+ audioModalIsOpen={audioModalIsOpen}
+ usersVideo={usersVideo}
+ />
+ )
+ : null
+ }
</div>
);
}
diff --git a/bigbluebutton-html5/imports/ui/components/media/container.jsx b/bigbluebutton-html5/imports/ui/components/media/container.jsx
index cafb2652c6..18393e340b 100755
--- a/bigbluebutton-html5/imports/ui/components/media/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/media/container.jsx
@@ -15,6 +15,7 @@ import ScreenshareContainer from '../screenshare/container';
import DefaultContent from '../presentation/default-content/component';
import ExternalVideoContainer from '../external-video-player/container';
import Storage from '../../services/storage/session';
+import { withDraggableConsumer } from './webcam-draggable-overlay/context';
const LAYOUT_CONFIG = Meteor.settings.public.layout;
const KURENTO_CONFIG = Meteor.settings.public.kurento;
@@ -102,7 +103,7 @@ class MediaContainer extends Component {
}
}
-export default withModalMounter(withTracker(() => {
+export default withDraggableConsumer(withModalMounter(withTracker(() => {
const { dataSaving } = Settings;
const { viewParticipantsWebcams, viewScreenshare } = dataSaving;
const hidePresentation = getFromUserSettings('bbb_hide_presentation', LAYOUT_CONFIG.hidePresentation);
@@ -152,4 +153,4 @@ export default withModalMounter(withTracker(() => {
MediaContainer.propTypes = propTypes;
return data;
-})(injectIntl(MediaContainer)));
+})(injectIntl(MediaContainer))));
diff --git a/bigbluebutton-html5/imports/ui/components/media/styles.scss b/bigbluebutton-html5/imports/ui/components/media/styles.scss
index 7eae08d37a..89f11ab0b9 100644
--- a/bigbluebutton-html5/imports/ui/components/media/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/media/styles.scss
@@ -20,8 +20,6 @@ $after-content-order: 3;
display: flex;
align-items: center;
justify-content: center;
- flex-direction: column;
- overflow: hidden;
}
.container {
diff --git a/bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/context.jsx b/bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/context.jsx
index 155886dcaf..a0981de896 100644
--- a/bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/context.jsx
+++ b/bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/context.jsx
@@ -6,7 +6,7 @@ const { webcamsDefaultPlacement } = Meteor.settings.public.layout;
export const WebcamDraggableContext = createContext();
const initialState = {
- placement: webcamsDefaultPlacement,
+ placement: webcamsDefaultPlacement || 'top',
lastPlacementLandscape: 'top',
lastPlacementPortrait: 'left',
orientation: null,
diff --git a/bigbluebutton-html5/private/config/settings.yml b/bigbluebutton-html5/private/config/settings.yml
index 266723178b..1b12cc0f22 100755
--- a/bigbluebutton-html5/private/config/settings.yml
+++ b/bigbluebutton-html5/private/config/settings.yml
@@ -169,6 +169,7 @@ public:
layout:
autoSwapLayout: false
hidePresentation: false
+ webcamsDefaultPlacement: "top"
media:
stunTurnServersFetchAddress: "/bigbluebutton/api/stuns"
mediaTag: "#remote-media"
--
GitLab