feat: fullscreen cameras and screenshare in new Layout Manager

bigbluebutton-html5/imports/ui/components/fullscreen-button/component.jsx

@@ -44,13 +44,15 @@ const FullscreenButtonComponent = ({
   dark,
   bottom,
   elementName,
+  elementId,
   className,
   fullscreenRef,
   handleToggleFullScreen,
   isIphone,
   isFullscreen,
   layoutManagerLoaded,
   newLayoutContextDispatch,
+  currentElement,
 }) => {
   if (isIphone) return null;
 
@@ -78,9 +80,11 @@ const FullscreenButtonComponent = ({
     if (layoutManagerLoaded === 'legacy') {
       handleToggleFullScreen(fullscreenRef);
     } else {
+      const newValue = (elementId === currentElement) ? '' : elementId;
+
       newLayoutContextDispatch({
-        type: ACTIONS.SET_PRESENTATION_IS_FULLSCREEN,
-        value: !isFullscreen,
+        type: ACTIONS.SET_FULLSCREEN_ELEMENT,
+        value: newValue,
       });
     }
   }

bigbluebutton-html5/imports/ui/components/fullscreen-button/container.jsx

@@ -3,27 +3,32 @@ import FullscreenButtonComponent from './component';
 import FullscreenService from './service';
 import { NLayoutContext } from '../layout/context/context';
 
-const FullscreenButtonContainer = props => <FullscreenButtonComponent {...props} />;
+const FullscreenButtonContainer = (props) => <FullscreenButtonComponent {...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 { presentation } = input;
-
-  const isFullscreen = layoutManagerLoaded === 'new' ? presentation.isFullscreen : props.isFullscreen;
+  const { fullscreen } = input;
+  const { element: currentElement } = fullscreen;
+  const isFullscreen = layoutManagerLoaded === 'new' ? !!currentElement : fullscreenProps;
 
   return (
-    <FullscreenButtonContainer {...props} {...{
-      handleToggleFullScreen,
-      isIphone,
-      layoutManagerLoaded,
-      isFullscreen,
-      newLayoutContextDispatch
-    }} />
+    <FullscreenButtonContainer
+      {...props}
+      {...{
+        handleToggleFullScreen,
+        isIphone,
+        layoutManagerLoaded,
+        isFullscreen,
+        currentElement,
+        newLayoutContextDispatch,
+      }}
+    />
   );
 };

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,
@@ -705,22 +689,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 +855,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;
@@ -935,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 {
@@ -953,6 +941,7 @@ const reducer = (state, action) => {
             height,
             top,
             left,
+            zIndex,
           },
         },
       };

bigbluebutton-html5/imports/ui/components/layout/context/initState.js

@@ -47,11 +47,9 @@ export const INITIAL_INPUT_STATE = {
     browserWidth: 0,
     browserHeight: 0,
     isDragging: false,
-    isFullscreen: false,
   },
   presentation: {
     isOpen: true,
-    isFullscreen: false,
     slidesLength: 0,
     currentSlide: {
       num: 0,
@@ -65,6 +63,9 @@ export const INITIAL_INPUT_STATE = {
     browserWidth: 0,
     browserHeight: 0,
   },
+  fullscreen: {
+    element: '',
+  },
   screenShare: {
     hasScreenShare: false,
     width: 0,

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',
 
@@ -73,11 +72,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',

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;
@@ -572,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.presentation.isFullscreen) {
+    if (fullscreenElement === 'Presentation' || fullscreenElement === 'Screenshare') {
       mediaBounds.width = this.mainWidth();
       mediaBounds.height = this.mainHeight();
       mediaBounds.top = 0;
@@ -800,6 +788,7 @@ class CustomLayout extends Component {
         height: mediaBounds.height,
         top: mediaBounds.top,
         left: mediaBounds.left,
+        zIndex: mediaBounds.zIndex,
       },
     });
 

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) {
@@ -395,8 +382,9 @@ class PresentationFocusLayout extends Component {
     const { newLayoutContextState } = this.props;
     const { deviceType, input } = newLayoutContextState;
     const mediaBounds = {};
+    const { element: fullscreenElement } = input.fullscreen;
 
-    if (input.presentation.isFullscreen) {
+    if (fullscreenElement === 'Presentation' || fullscreenElement === 'Screenshare') {
       mediaBounds.width = this.mainWidth();
       mediaBounds.height = this.mainHeight();
       mediaBounds.top = 0;
@@ -582,6 +570,7 @@ class PresentationFocusLayout extends Component {
         height: mediaBounds.height,
         top: mediaBounds.top,
         left: mediaBounds.left,
+        zIndex: mediaBounds.zIndex,
       },
     });
 

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;
@@ -407,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.presentation.isFullscreen) {
+    if (fullscreenElement === 'Presentation' || fullscreenElement === 'Screenshare') {
       mediaBounds.width = this.mainWidth();
       mediaBounds.height = this.mainHeight();
       mediaBounds.top = 0;
@@ -609,6 +597,7 @@ class SmartLayout extends Component {
         height: mediaBounds.height,
         top: mediaBounds.top,
         left: mediaBounds.left,
+        zIndex: mediaBounds.zIndex,
       },
     });
 

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;
@@ -418,8 +405,9 @@ class VideoFocusLayout extends Component {
     const { newLayoutContextState } = this.props;
     const { deviceType, input } = newLayoutContextState;
     const mediaBounds = {};
+    const { element: fullscreenElement } = input.fullscreen;
 
-    if (input.presentation.isFullscreen) {
+    if (fullscreenElement === 'Presentation' || fullscreenElement === 'Screenshare') {
       mediaBounds.width = this.mainWidth();
       mediaBounds.height = this.mainHeight();
       mediaBounds.top = 0;
@@ -621,6 +609,7 @@ class VideoFocusLayout extends Component {
         height: mediaBounds.height,
         top: mediaBounds.top,
         left: mediaBounds.left,
+        zIndex: mediaBounds.zIndex,
       },
     });