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 9a4eb63d5d..97a64b4e8b 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 @@ -50,24 +50,17 @@ class WebcamDraggable extends PureComponent { this.onFullscreenChange = this.onFullscreenChange.bind(this); this.onResizeStop = this.onResizeStop.bind(this); this.onResizeStart = this.onResizeStart.bind(this); + this.handleLayoutSizesSets = this.handleLayoutSizesSets.bind(this); } componentDidMount() { document.addEventListener('fullscreenchange', this.onFullscreenChange); - } - - componentDidUpdate(prevProps) { - const { layoutContextState } = this.props; - const { webcamsAreaSize } = layoutContextState; - // if ((webcamsAreaSize.width !== prevProps.layoutContextState.webcamsAreaSize.width - // || webcamsAreaSize.height !== prevProps.layoutContextState.webcamsAreaSize.height)) { - // this.setWebcamsAreaResizable(webcamsAreaSize.width, webcamsAreaSize.height); - // } + window.addEventListener('layoutSizesSets', this.handleLayoutSizesSets); } componentWillUnmount() { - window.removeEventListener('resize', this.debouncedOnResize); document.removeEventListener('fullscreenchange', this.onFullscreenChange); + window.removeEventListener('layoutSizesSets', this.handleLayoutSizesSets); } onFullscreenChange() { @@ -201,6 +194,13 @@ class WebcamDraggable extends PureComponent { return false; } + handleLayoutSizesSets() { + const { layoutContextState } = this.props; + const { webcamsAreaSize } = layoutContextState; + + this.setWebcamsAreaResizable(webcamsAreaSize.width, webcamsAreaSize.height); + } + calculatePosition() { const { layoutContextState } = this.props; const { mediaBounds } = layoutContextState;