From 408b596ed0d56f77f5f0c34d838976b1a45e6030 Mon Sep 17 00:00:00 2001 From: Ramon Souza Date: Mon, 5 Jul 2021 13:52:25 -0300 Subject: [PATCH 1/6] remove fullscreen from presentation (context) and add generic fullscreen information --- .../fullscreen-button/component.jsx | 7 ++-- .../fullscreen-button/container.jsx | 7 ++-- .../ui/components/layout/context/context.jsx | 34 ++++++++++--------- .../ui/components/layout/context/initState.js | 4 ++- .../imports/ui/components/layout/enums.js | 3 +- .../layout/layout-manager/customLayout.jsx | 2 +- .../ui/components/presentation/container.jsx | 3 +- 7 files changed, 35 insertions(+), 25 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/fullscreen-button/component.jsx b/bigbluebutton-html5/imports/ui/components/fullscreen-button/component.jsx index b5b44565413a..70b31ee25197 100755 --- a/bigbluebutton-html5/imports/ui/components/fullscreen-button/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/fullscreen-button/component.jsx @@ -51,6 +51,7 @@ const FullscreenButtonComponent = ({ isFullscreen, layoutManagerLoaded, newLayoutContextDispatch, + element, }) => { if (isIphone) return null; @@ -78,9 +79,11 @@ const FullscreenButtonComponent = ({ if (layoutManagerLoaded === 'legacy') { handleToggleFullScreen(fullscreenRef); } else { + const newValue = (elementName === element) ? '' : elementName; + newLayoutContextDispatch({ - type: ACTIONS.SET_PRESENTATION_IS_FULLSCREEN, - value: !isFullscreen, + type: ACTIONS.SET_FULLSCREEN_ELEMENT, + value: newValue, }); } } diff --git a/bigbluebutton-html5/imports/ui/components/fullscreen-button/container.jsx b/bigbluebutton-html5/imports/ui/components/fullscreen-button/container.jsx index 15cc294ce530..5752d8cc1e7e 100644 --- a/bigbluebutton-html5/imports/ui/components/fullscreen-button/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/fullscreen-button/container.jsx @@ -13,9 +13,9 @@ export default (props) => { const { newLayoutContextState, newLayoutContextDispatch } = newLayoutContext; const { layoutLoaded: layoutManagerLoaded } = newLayoutContextState; const { input } = newLayoutContextState; - const { presentation } = input; - - const isFullscreen = layoutManagerLoaded === 'new' ? presentation.isFullscreen : props.isFullscreen; + const { fullscreen } = input; + const { element } = fullscreen; + const isFullscreen = layoutManagerLoaded === 'new' ? !!element : props.isFullscreen; return ( { isIphone, layoutManagerLoaded, isFullscreen, + element, newLayoutContextDispatch }} /> ); diff --git a/bigbluebutton-html5/imports/ui/components/layout/context/context.jsx b/bigbluebutton-html5/imports/ui/components/layout/context/context.jsx index 038b12522f5a..e049d546f81f 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/context/context.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/context/context.jsx @@ -705,22 +705,6 @@ const reducer = (state, action) => { }, }; } - case ACTIONS.SET_PRESENTATION_IS_FULLSCREEN: { - const { presentation } = state.input; - if (presentation.isFullscreen === action.value) { - return state; - } - return { - ...state, - input: { - ...state.input, - presentation: { - ...presentation, - isFullscreen: action.value, - }, - }, - }; - } case ACTIONS.SET_PRESENTATION_SLIDES_LENGTH: { const { presentation } = state.input; if (presentation.slidesLength === action.value) { @@ -887,6 +871,24 @@ const reducer = (state, action) => { }; } + // FULLSCREEN + case ACTIONS.SET_FULLSCREEN_ELEMENT: { + const { fullscreen } = state.input; + if (fullscreen.element === action.value) { + return state; + } + return { + ...state, + input: { + ...state.input, + fullscreen: { + ...fullscreen, + element: action.value, + }, + }, + }; + } + // SCREEN SHARE case ACTIONS.SET_HAS_SCREEN_SHARE: { const { screenShare } = state.input; diff --git a/bigbluebutton-html5/imports/ui/components/layout/context/initState.js b/bigbluebutton-html5/imports/ui/components/layout/context/initState.js index 0b53e7ed65bd..c0fc844fe0dd 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/context/initState.js +++ b/bigbluebutton-html5/imports/ui/components/layout/context/initState.js @@ -51,7 +51,6 @@ export const INITIAL_INPUT_STATE = { }, presentation: { isOpen: true, - isFullscreen: false, slidesLength: 0, currentSlide: { num: 0, @@ -65,6 +64,9 @@ export const INITIAL_INPUT_STATE = { browserWidth: 0, browserHeight: 0, }, + fullscreen: { + element: '', + }, screenShare: { hasScreenShare: false, width: 0, diff --git a/bigbluebutton-html5/imports/ui/components/layout/enums.js b/bigbluebutton-html5/imports/ui/components/layout/enums.js index 7449af2a8ada..ea3b13c1e418 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/enums.js +++ b/bigbluebutton-html5/imports/ui/components/layout/enums.js @@ -73,11 +73,12 @@ export const ACTIONS = { SET_PRESENTATION_NUM_CURRENT_SLIDE: 'setPresentationNumCurrentSlide', SET_PRESENTATION_SLIDES_LENGTH: 'setPresentationSlideslength', SET_PRESENTATION_SIZE: 'setPresentationSize', - SET_PRESENTATION_IS_FULLSCREEN: 'setPresentationIsFullscreen', SET_PRESENTATION_OUTPUT: 'setPresentationOutput', SET_PRESENTATION_IS_RESIZABLE: 'setPresentationIsResizable', SET_PRESENTATION_RESIZABLE_EDGE: 'setPresentationResizableEdge', + SET_FULLSCREEN_ELEMENT: 'setFullscreenElement', + SET_HAS_SCREEN_SHARE: 'setHasScreenShare', SET_SCREEN_SHARE_SIZE: 'setScreenShareSize', SET_SCREEN_SHARE_OUTPUT: 'setScreenShareOutput', diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx index 200ec29e03b8..fd8c3be9c945 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx @@ -573,7 +573,7 @@ class CustomLayout extends Component { const mediaAreaWidth = this.mainWidth() - (sidebarNavWidth + sidebarContentWidth); const mediaBounds = {}; - if (input.presentation.isFullscreen) { + if (input.fullscreen.element === 'Presentation') { mediaBounds.width = this.mainWidth(); mediaBounds.height = this.mainHeight(); mediaBounds.top = 0; diff --git a/bigbluebutton-html5/imports/ui/components/presentation/container.jsx b/bigbluebutton-html5/imports/ui/components/presentation/container.jsx index c0de64e0d1dd..6a957d34dce3 100755 --- a/bigbluebutton-html5/imports/ui/components/presentation/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/container.jsx @@ -21,7 +21,8 @@ const PresentationContainer = ({ presentationPodIds, mountPresentation, ...props const { newLayoutContextState, newLayoutContextDispatch } = newLayoutContext; const { input, output, layoutLoaded } = newLayoutContextState; const { presentation } = output; - const { isFullscreen: fullscreenContext } = input.presentation; + const { element } = input.fullscreen; + const fullscreenContext = (element === 'Presentation'); const { layoutSwapped, podId } = props; const usingUsersContext = useContext(UsersContext); From df2b7958f340ea52f8aa4ceffcd755a7b85405ff Mon Sep 17 00:00:00 2001 From: Ramon Souza Date: Mon, 5 Jul 2021 13:58:27 -0300 Subject: [PATCH 2/6] adapt fullscreen all layouts --- .../layout/layout-manager/presentationFocusLayout.jsx | 2 +- .../imports/ui/components/layout/layout-manager/smartLayout.jsx | 2 +- .../ui/components/layout/layout-manager/videoFocusLayout.jsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx index 5a0b3f0d5695..637f35832c4f 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx @@ -396,7 +396,7 @@ class PresentationFocusLayout extends Component { const { deviceType, input } = newLayoutContextState; const mediaBounds = {}; - if (input.presentation.isFullscreen) { + if (input.fullscreen.element === 'Presentation') { mediaBounds.width = this.mainWidth(); mediaBounds.height = this.mainHeight(); mediaBounds.top = 0; diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx index 7e5ebfa0f054..42b1c846ddd2 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx @@ -410,7 +410,7 @@ class SmartLayout extends Component { // TODO Adicionar min e max para a apresentação - if (input.presentation.isFullscreen) { + if (input.fullscreen.element === 'Presentation') { mediaBounds.width = this.mainWidth(); mediaBounds.height = this.mainHeight(); mediaBounds.top = 0; diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx index 753d2ef0ffbf..d9f62811d635 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx @@ -419,7 +419,7 @@ class VideoFocusLayout extends Component { const { deviceType, input } = newLayoutContextState; const mediaBounds = {}; - if (input.presentation.isFullscreen) { + if (input.fullscreen.element === 'Presentation') { mediaBounds.width = this.mainWidth(); mediaBounds.height = this.mainHeight(); mediaBounds.top = 0; From 8bf637129b23101e56bcb2ccb9f9b7fae704c3c7 Mon Sep 17 00:00:00 2001 From: Ramon Souza Date: Tue, 6 Jul 2021 08:28:17 -0300 Subject: [PATCH 3/6] fullscreen camera --- .../fullscreen-button/component.jsx | 5 +++-- .../fullscreen-button/container.jsx | 6 ++--- .../ui/components/presentation/component.jsx | 4 ++++ .../ui/components/presentation/container.jsx | 4 +++- .../presentation-toolbar/component.jsx | 2 ++ .../video-provider/video-list/styles.scss | 9 ++++++++ .../video-list/video-list-item/component.jsx | 10 ++++++--- .../video-list/video-list-item/container.jsx | 22 +++++++++++++++++-- 8 files changed, 51 insertions(+), 11 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/fullscreen-button/component.jsx b/bigbluebutton-html5/imports/ui/components/fullscreen-button/component.jsx index 70b31ee25197..8b0fe16bf333 100755 --- a/bigbluebutton-html5/imports/ui/components/fullscreen-button/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/fullscreen-button/component.jsx @@ -44,6 +44,7 @@ const FullscreenButtonComponent = ({ dark, bottom, elementName, + elementId, className, fullscreenRef, handleToggleFullScreen, @@ -51,7 +52,7 @@ const FullscreenButtonComponent = ({ isFullscreen, layoutManagerLoaded, newLayoutContextDispatch, - element, + currentElement, }) => { if (isIphone) return null; @@ -79,7 +80,7 @@ const FullscreenButtonComponent = ({ if (layoutManagerLoaded === 'legacy') { handleToggleFullScreen(fullscreenRef); } else { - const newValue = (elementName === element) ? '' : elementName; + const newValue = (elementId === currentElement) ? '' : elementId; newLayoutContextDispatch({ type: ACTIONS.SET_FULLSCREEN_ELEMENT, diff --git a/bigbluebutton-html5/imports/ui/components/fullscreen-button/container.jsx b/bigbluebutton-html5/imports/ui/components/fullscreen-button/container.jsx index 5752d8cc1e7e..bc343ef7aee3 100644 --- a/bigbluebutton-html5/imports/ui/components/fullscreen-button/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/fullscreen-button/container.jsx @@ -14,8 +14,8 @@ export default (props) => { const { layoutLoaded: layoutManagerLoaded } = newLayoutContextState; const { input } = newLayoutContextState; const { fullscreen } = input; - const { element } = fullscreen; - const isFullscreen = layoutManagerLoaded === 'new' ? !!element : props.isFullscreen; + const { element: currentElement } = fullscreen; + const isFullscreen = layoutManagerLoaded === 'new' ? !!currentElement : props.isFullscreen; return ( { isIphone, layoutManagerLoaded, isFullscreen, - element, + currentElement, newLayoutContextDispatch }} /> ); diff --git a/bigbluebutton-html5/imports/ui/components/presentation/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/component.jsx index 391883ddd3cc..1a6914d0fa03 100755 --- a/bigbluebutton-html5/imports/ui/components/presentation/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/component.jsx @@ -703,6 +703,7 @@ class Presentation extends PureComponent { const { currentSlide, podId, + fullscreenElementId, } = this.props; const { zoom, fitToWidth, isFullscreen } = this.state; @@ -715,6 +716,7 @@ class Presentation extends PureComponent { zoom, podId, currentSlide, + fullscreenElementId }} isFullscreen={isFullscreen} fullscreenRef={this.refPresentationContainer} @@ -759,6 +761,7 @@ class Presentation extends PureComponent { const { intl, userIsPresenter, + fullscreenElementId, } = this.props; const { isFullscreen } = this.state; @@ -768,6 +771,7 @@ class Presentation extends PureComponent { { + const fullscreenElementId = 'Presentation'; const newLayoutContext = useContext(NLayoutContext); const { newLayoutContextState, newLayoutContextDispatch } = newLayoutContext; const { input, output, layoutLoaded } = newLayoutContextState; const { presentation } = output; const { element } = input.fullscreen; - const fullscreenContext = (element === 'Presentation'); + const fullscreenContext = (element === fullscreenElementId); const { layoutSwapped, podId } = props; const usingUsersContext = useContext(UsersContext); @@ -43,6 +44,7 @@ const PresentationContainer = ({ presentationPodIds, mountPresentation, ...props presentationBounds: presentation, layoutLoaded, fullscreenContext, + fullscreenElementId, } } /> diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx index 11eeab3ec6d2..92b2a168a1e7 100755 --- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx @@ -223,6 +223,7 @@ class PresentationToolbar extends PureComponent { parseCurrentSlideContent, startPoll, currentSlide, + fullscreenElementId, } = this.props; const { isMobile } = deviceInfo; @@ -355,6 +356,7 @@ class PresentationToolbar extends PureComponent { isFullscreen={isFullscreen} elementName={intl.formatMessage(intlMessages.presentationLabel)} className={styles.presentationBtn} + elementId={fullscreenElementId} /> ) : null 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 36b5d6772972..04e07a1cfef2 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 @@ -275,3 +275,12 @@ background-color: transparent; color: var(--color-white); } + +.fullscreen { + position: fixed; + top: 0; + left: 0; + width: 100vh; + height: 100vh; + z-index: 99; +} 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 8e199394e78f..570ce008a31c 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 @@ -146,7 +146,7 @@ class VideoListItem extends Component { } renderFullscreenButton() { - const { name } = this.props; + const { name, cameraId } = this.props; const { isFullscreen } = this.state; if (!ALLOW_FULLSCREEN) return null; @@ -156,6 +156,7 @@ class VideoListItem extends Component { data-test="presentationFullscreenButton" fullscreenRef={this.videoContainer} elementName={name} + elementId={cameraId} isFullscreen={isFullscreen} dark /> @@ -176,6 +177,8 @@ class VideoListItem extends Component { swapLayout, mirrored, webcamDraggableState, + isFullscreenContext, + layoutLoaded, } = this.props; const availableActions = this.getAvailableActions(); const enableVideoMenu = Meteor.settings.public.kurento.enableVideoMenu || false; @@ -191,6 +194,7 @@ class VideoListItem extends Component { className={cx({ [styles.content]: true, [styles.talking]: voiceUser.talking, + [styles.fullscreen]: layoutLoaded === 'new' && isFullscreenContext, })} > { @@ -225,9 +229,9 @@ class VideoListItem extends Component { className={cx({ [styles.media]: true, [styles.cursorGrab]: !webcamDraggableState.dragging - && !isFullscreen && !swapLayout, + && !isFullscreen && !isFullscreenContext && !swapLayout, [styles.cursorGrabbing]: webcamDraggableState.dragging - && !isFullscreen && !swapLayout, + && !isFullscreen && !isFullscreenContext && !swapLayout, [styles.mirroredVideo]: (this.mirrorOwnWebcam && !mirrored) || (!this.mirrorOwnWebcam && mirrored), [styles.unhealthyStream]: shouldRenderReconnect, diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/container.jsx b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/container.jsx index d7fd23c60769..7521f1cc398c 100755 --- a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/container.jsx @@ -1,9 +1,27 @@ -import React from 'react'; +import React, { useContext } from 'react'; import { withTracker } from 'meteor/react-meteor-data'; import VoiceUsers from '/imports/api/voice-users/'; import VideoListItem from './component'; +import { NLayoutContext } from '/imports/ui/components/layout/context/context'; -const VideoListItemContainer = (props) => (); +const VideoListItemContainer = (props) => { + const { cameraId } = props; + const newLayoutContext = useContext(NLayoutContext); + const { newLayoutContextState, newLayoutContextDispatch } = newLayoutContext; + const { layoutLoaded: layoutManagerLoaded } = newLayoutContextState; + const { input, layoutLoaded } = newLayoutContextState; + const { element } = input.fullscreen; + const isFullscreenContext = (element === cameraId); + + return ( + + ); +}; export default withTracker((props) => { const { From 21eea858c1bd23a4ce49671a5794d30fe8b8b1ff Mon Sep 17 00:00:00 2001 From: Ramon Souza Date: Tue, 6 Jul 2021 11:17:00 -0300 Subject: [PATCH 4/6] code format --- .../fullscreen-button/container.jsx | 28 +++++++++++-------- .../video-list/video-list-item/component.jsx | 2 +- .../video-list/video-list-item/container.jsx | 20 +++++++++---- 3 files changed, 31 insertions(+), 19 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/fullscreen-button/container.jsx b/bigbluebutton-html5/imports/ui/components/fullscreen-button/container.jsx index bc343ef7aee3..74a8e617906b 100644 --- a/bigbluebutton-html5/imports/ui/components/fullscreen-button/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/fullscreen-button/container.jsx @@ -3,28 +3,32 @@ import FullscreenButtonComponent from './component'; import FullscreenService from './service'; import { NLayoutContext } from '../layout/context/context'; -const FullscreenButtonContainer = props => ; +const FullscreenButtonContainer = (props) => ; export default (props) => { - const handleToggleFullScreen = ref => FullscreenService.toggleFullScreen(ref); - const isIphone = (navigator.userAgent.match(/iPhone/i)) ? true : false; + const handleToggleFullScreen = (ref) => FullscreenService.toggleFullScreen(ref); + const isIphone = !!(navigator.userAgent.match(/iPhone/i)); + const { isFullscreen: fullscreenProps } = props; const newLayoutContext = useContext(NLayoutContext); const { newLayoutContextState, newLayoutContextDispatch } = newLayoutContext; const { layoutLoaded: layoutManagerLoaded } = newLayoutContextState; const { input } = newLayoutContextState; const { fullscreen } = input; const { element: currentElement } = fullscreen; - const isFullscreen = layoutManagerLoaded === 'new' ? !!currentElement : props.isFullscreen; + const isFullscreen = layoutManagerLoaded === 'new' ? !!currentElement : fullscreenProps; return ( - + ); }; 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 570ce008a31c..0560532413b5 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 @@ -229,7 +229,7 @@ class VideoListItem extends Component { className={cx({ [styles.media]: true, [styles.cursorGrab]: !webcamDraggableState.dragging - && !isFullscreen && !isFullscreenContext && !swapLayout, + && !isFullscreen && !isFullscreenContext && !swapLayout, [styles.cursorGrabbing]: webcamDraggableState.dragging && !isFullscreen && !isFullscreenContext && !swapLayout, [styles.mirroredVideo]: (this.mirrorOwnWebcam && !mirrored) diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/container.jsx b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/container.jsx index 7521f1cc398c..67af7b2093b4 100755 --- a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/container.jsx @@ -1,4 +1,5 @@ import React, { useContext } from 'react'; +import PropTypes from 'prop-types'; import { withTracker } from 'meteor/react-meteor-data'; import VoiceUsers from '/imports/api/voice-users/'; import VideoListItem from './component'; @@ -14,12 +15,15 @@ const VideoListItemContainer = (props) => { const isFullscreenContext = (element === cameraId); return ( - + ); }; @@ -33,3 +37,7 @@ export default withTracker((props) => { { fields: { muted: 1, listenOnly: 1, talking: 1 } }), }; })(VideoListItemContainer); + +VideoListItemContainer.propTypes = { + cameraId: PropTypes.string.isRequired, +}; From 166b7386836319f7f5f31636a4b675468aeeee9b Mon Sep 17 00:00:00 2001 From: Ramon Souza Date: Tue, 6 Jul 2021 14:45:27 -0300 Subject: [PATCH 5/6] remove cameradock fullscreen --- .../ui/components/layout/context/context.jsx | 16 ---------------- .../ui/components/layout/context/initState.js | 1 - .../imports/ui/components/layout/enums.js | 1 - .../layout/layout-manager/customLayout.jsx | 13 ------------- .../layout-manager/presentationFocusLayout.jsx | 13 ------------- .../layout/layout-manager/smartLayout.jsx | 13 ------------- .../layout/layout-manager/videoFocusLayout.jsx | 15 +-------------- 7 files changed, 1 insertion(+), 71 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/layout/context/context.jsx b/bigbluebutton-html5/imports/ui/components/layout/context/context.jsx index e049d546f81f..cb65e914fd61 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/context/context.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/context/context.jsx @@ -629,22 +629,6 @@ const reducer = (state, action) => { }, }; } - case ACTIONS.SET_CAMERA_DOCK_IS_FULLSCREEN: { - const { cameraDock } = state.input; - if (cameraDock.isFullscreen === action.value) { - return state; - } - return { - ...state, - input: { - ...state.input, - cameraDock: { - ...cameraDock, - isFullscreen: action.value, - }, - }, - }; - } case ACTIONS.SET_CAMERA_DOCK_RESIZABLE_EDGE: { const { top, right, bottom, left, diff --git a/bigbluebutton-html5/imports/ui/components/layout/context/initState.js b/bigbluebutton-html5/imports/ui/components/layout/context/initState.js index c0fc844fe0dd..0fbac4af4996 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/context/initState.js +++ b/bigbluebutton-html5/imports/ui/components/layout/context/initState.js @@ -47,7 +47,6 @@ export const INITIAL_INPUT_STATE = { browserWidth: 0, browserHeight: 0, isDragging: false, - isFullscreen: false, }, presentation: { isOpen: true, diff --git a/bigbluebutton-html5/imports/ui/components/layout/enums.js b/bigbluebutton-html5/imports/ui/components/layout/enums.js index ea3b13c1e418..f39ff877f7c5 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/enums.js +++ b/bigbluebutton-html5/imports/ui/components/layout/enums.js @@ -62,7 +62,6 @@ export const ACTIONS = { SET_CAMERA_DOCK_SIZE: 'setCameraDockSize', SET_CAMERA_DOCK_OUTPUT: 'setCameraDockOutput', SET_CAMERA_DOCK_IS_DRAGGABLE: 'setCameraDockIsDraggable', - SET_CAMERA_DOCK_IS_FULLSCREEN: 'setCameraDockIsFullscreen', SET_CAMERA_DOCK_IS_RESIZABLE: 'setCameraDockIsResizable', SET_CAMERA_DOCK_RESIZABLE_EDGE: 'setCameraDockResizableEdge', diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx index fd8c3be9c945..0dd4a19ef385 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx @@ -401,19 +401,6 @@ class CustomLayout extends Component { const cameraDockBounds = {}; - if (input.cameraDock.isFullscreen) { - cameraDockBounds.width = this.mainWidth(); - cameraDockBounds.minWidth = this.mainWidth(); - cameraDockBounds.maxWidth = this.mainWidth(); - cameraDockBounds.height = this.mainHeight(); - cameraDockBounds.minHeight = this.mainHeight(); - cameraDockBounds.maxHeight = this.mainHeight(); - cameraDockBounds.top = 0; - cameraDockBounds.left = 0; - cameraDockBounds.zIndex = 99; - return cameraDockBounds; - } - if (input.cameraDock.numCameras > 0) { let cameraDockLeft = 0; let cameraDockHeight = 0; diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx index 637f35832c4f..5be51de09b08 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx @@ -338,19 +338,6 @@ class PresentationFocusLayout extends Component { const { deviceType, input } = newLayoutContextState; const cameraDockBounds = {}; - if (input.cameraDock.isFullscreen) { - cameraDockBounds.width = this.mainWidth(); - cameraDockBounds.minWidth = this.mainWidth(); - cameraDockBounds.maxWidth = this.mainWidth(); - cameraDockBounds.height = this.mainHeight(); - cameraDockBounds.minHeight = this.mainHeight(); - cameraDockBounds.maxHeight = this.mainHeight(); - cameraDockBounds.top = 0; - cameraDockBounds.left = 0; - cameraDockBounds.zIndex = 99; - return cameraDockBounds; - } - if (input.cameraDock.numCameras > 0) { let cameraDockHeight = 0; if (deviceType === DEVICE_TYPE.MOBILE) { diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx index 42b1c846ddd2..53a618fb643a 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx @@ -333,19 +333,6 @@ class SmartLayout extends Component { const cameraDockBounds = {}; - if (input.cameraDock.isFullscreen) { - cameraDockBounds.width = this.mainWidth(); - cameraDockBounds.minWidth = this.mainWidth(); - cameraDockBounds.maxWidth = this.mainWidth(); - cameraDockBounds.height = this.mainHeight(); - cameraDockBounds.minHeight = this.mainHeight(); - cameraDockBounds.maxHeight = this.mainHeight(); - cameraDockBounds.top = 0; - cameraDockBounds.left = 0; - cameraDockBounds.zIndex = 99; - return cameraDockBounds; - } - if (input.cameraDock.numCameras > 0) { cameraDockBounds.top = mediaAreaBounds.top; cameraDockBounds.left = mediaAreaBounds.left; diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx index d9f62811d635..d767ef316d22 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx @@ -362,23 +362,10 @@ class VideoFocusLayout extends Component { const { newLayoutContextState } = this.props; const { deviceType, input } = newLayoutContextState; const { cameraDock } = input; - const { isFullscreen, numCameras } = cameraDock; + const { numCameras } = cameraDock; const cameraDockBounds = {}; - if (isFullscreen) { - cameraDockBounds.width = this.mainWidth(); - cameraDockBounds.minWidth = this.mainWidth(); - cameraDockBounds.maxWidth = this.mainWidth(); - cameraDockBounds.height = this.mainHeight(); - cameraDockBounds.minHeight = this.mainHeight(); - cameraDockBounds.maxHeight = this.mainHeight(); - cameraDockBounds.top = 0; - cameraDockBounds.left = 0; - cameraDockBounds.zIndex = 99; - return cameraDockBounds; - } - if (numCameras > 0) { if (deviceType === DEVICE_TYPE.MOBILE) { cameraDockBounds.minHeight = mediaAreaBounds.height * 0.7; From 07ab688a4a4b6e625f694c946b787155b8b1bd1e Mon Sep 17 00:00:00 2001 From: Ramon Souza Date: Tue, 6 Jul 2021 16:27:28 -0300 Subject: [PATCH 6/6] fullscreen screenshare --- .../ui/components/layout/context/context.jsx | 5 +++- .../layout/layout-manager/customLayout.jsx | 4 +++- .../presentationFocusLayout.jsx | 4 +++- .../layout/layout-manager/smartLayout.jsx | 4 +++- .../layout-manager/videoFocusLayout.jsx | 4 +++- .../ui/components/screenshare/component.jsx | 16 +++++++++++-- .../ui/components/screenshare/container.jsx | 24 +++++++++++++++---- 7 files changed, 50 insertions(+), 11 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/layout/context/context.jsx b/bigbluebutton-html5/imports/ui/components/layout/context/context.jsx index cb65e914fd61..b3fae7b7a6e3 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/context/context.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/context/context.jsx @@ -921,12 +921,14 @@ const reducer = (state, action) => { height, top, left, + zIndex, } = action.value; const { screenShare } = state.output; if (screenShare.width === width && screenShare.height === height && screenShare.top === top - && screenShare.left === left) { + && screenShare.left === left + && screenShare.zIndex === zIndex) { return state; } return { @@ -939,6 +941,7 @@ const reducer = (state, action) => { height, top, left, + zIndex, }, }, }; diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx index 0dd4a19ef385..a0ccc74dbb84 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx @@ -559,8 +559,9 @@ class CustomLayout extends Component { - (DEFAULT_VALUES.navBarHeight + DEFAULT_VALUES.actionBarHeight); const mediaAreaWidth = this.mainWidth() - (sidebarNavWidth + sidebarContentWidth); const mediaBounds = {}; + const { element: fullscreenElement } = input.fullscreen; - if (input.fullscreen.element === 'Presentation') { + if (fullscreenElement === 'Presentation' || fullscreenElement === 'Screenshare') { mediaBounds.width = this.mainWidth(); mediaBounds.height = this.mainHeight(); mediaBounds.top = 0; @@ -787,6 +788,7 @@ class CustomLayout extends Component { height: mediaBounds.height, top: mediaBounds.top, left: mediaBounds.left, + zIndex: mediaBounds.zIndex, }, }); diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx index 5be51de09b08..43a1377e849f 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx @@ -382,8 +382,9 @@ class PresentationFocusLayout extends Component { const { newLayoutContextState } = this.props; const { deviceType, input } = newLayoutContextState; const mediaBounds = {}; + const { element: fullscreenElement } = input.fullscreen; - if (input.fullscreen.element === 'Presentation') { + if (fullscreenElement === 'Presentation' || fullscreenElement === 'Screenshare') { mediaBounds.width = this.mainWidth(); mediaBounds.height = this.mainHeight(); mediaBounds.top = 0; @@ -569,6 +570,7 @@ class PresentationFocusLayout extends Component { height: mediaBounds.height, top: mediaBounds.top, left: mediaBounds.left, + zIndex: mediaBounds.zIndex, }, }); diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx index 53a618fb643a..261b9ad09467 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx @@ -394,10 +394,11 @@ class SmartLayout extends Component { const { newLayoutContextState } = this.props; const { input } = newLayoutContextState; const mediaBounds = {}; + const { element: fullscreenElement } = input.fullscreen; // TODO Adicionar min e max para a apresentação - if (input.fullscreen.element === 'Presentation') { + if (fullscreenElement === 'Presentation' || fullscreenElement === 'Screenshare') { mediaBounds.width = this.mainWidth(); mediaBounds.height = this.mainHeight(); mediaBounds.top = 0; @@ -596,6 +597,7 @@ class SmartLayout extends Component { height: mediaBounds.height, top: mediaBounds.top, left: mediaBounds.left, + zIndex: mediaBounds.zIndex, }, }); diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx index d767ef316d22..ac9c43138172 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx @@ -405,8 +405,9 @@ class VideoFocusLayout extends Component { const { newLayoutContextState } = this.props; const { deviceType, input } = newLayoutContextState; const mediaBounds = {}; + const { element: fullscreenElement } = input.fullscreen; - if (input.fullscreen.element === 'Presentation') { + if (fullscreenElement === 'Presentation' || fullscreenElement === 'Screenshare') { mediaBounds.width = this.mainWidth(); mediaBounds.height = this.mainHeight(); mediaBounds.top = 0; @@ -608,6 +609,7 @@ class VideoFocusLayout extends Component { height: mediaBounds.height, top: mediaBounds.top, left: mediaBounds.left, + zIndex: mediaBounds.zIndex, }, }); diff --git a/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx b/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx index 11f4103fa074..131c3c220990 100755 --- a/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx @@ -170,7 +170,7 @@ class ScreenshareComponent extends React.Component { } renderFullscreenButton() { - const { intl } = this.props; + const { intl, fullscreenElementId } = this.props; const { isFullscreen } = this.state; if (!ALLOW_FULLSCREEN) return null; @@ -180,6 +180,7 @@ class ScreenshareComponent extends React.Component { key={_.uniqueId('fullscreenButton-')} elementName={intl.formatMessage(intlMessages.screenShareLabel)} fullscreenRef={this.screenshareContainer} + elementId={fullscreenElementId} isFullscreen={isFullscreen} dark /> @@ -285,7 +286,16 @@ class ScreenshareComponent extends React.Component { render() { const { loaded, autoplayBlocked, isStreamHealthy } = this.state; - const { isPresenter, isGloballyBroadcasting, top, left, width, height, layoutLoaded } = this.props; + const { + isPresenter, + isGloballyBroadcasting, + top, + left, + width, + height, + zIndex, + layoutLoaded, + } = this.props; // Conditions to render the (re)connecting spinner and the unhealthy stream // grayscale: @@ -307,6 +317,8 @@ class ScreenshareComponent extends React.Component { left, height, width, + zIndex, + backgroundColor: '#06172A', } : { height: '100%', diff --git a/bigbluebutton-html5/imports/ui/components/screenshare/container.jsx b/bigbluebutton-html5/imports/ui/components/screenshare/container.jsx index b9a6b8e0ebfc..9b7b0b010d81 100755 --- a/bigbluebutton-html5/imports/ui/components/screenshare/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/screenshare/container.jsx @@ -11,13 +11,29 @@ import ScreenshareComponent from './component'; import { NLayoutContext } from '../layout/context/context'; const ScreenshareContainer = (props) => { - const NewLayoutManager = useContext(NLayoutContext); - const { newLayoutContextState } = NewLayoutManager; - const { output, layoutLoaded } = newLayoutContextState; + const fullscreenElementId = 'Screenshare'; + const newLayoutContext = useContext(NLayoutContext); + const { newLayoutContextState, newLayoutContextDispatch } = newLayoutContext; + const { output, input, layoutLoaded } = newLayoutContextState; const { screenShare } = output; + const { element } = input.fullscreen; + const fullscreenContext = (element === fullscreenElementId); if (isVideoBroadcasting()) { - return ; + return ( + + ); } return null; };