BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #18129 from Scroody/I-179382

Browse Source 
Fix: White squares displayed when rotating to mobile orientation
This commit is contained in:
Ramón Souza 2023-06-12 15:49:47 -03:00 committed by GitHub
commit 3576eb1a01
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 482 additions and 402 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bigbluebutton-html5/imports/ui/components/chat/component.jsx
View File

@ -1,4 +1,4 @@
import React, { memo } from 'react';
import React, { memo, useState } from 'react';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import injectWbResizeEvent from '/imports/ui/components/presentation/resize-wrapper/component';

5
bigbluebutton-html5/imports/ui/components/chat/styles.js
View File

@ -1,7 +1,7 @@
import styled from 'styled-components';
import {
colorWhite,
colorPrimary
colorPrimary,
} from '/imports/ui/stylesheets/styled-components/palette';
import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints';
import { mdPaddingX } from '/imports/ui/stylesheets/styled-components/general';
@ -52,6 +52,9 @@ const Chat = styled.div`
@media ${smallOnly} {
transform: none !important;
&.no-padding {
padding: 0;
}
}
`;

302
bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx
View File

@ -1,12 +1,15 @@
import { useEffect, useRef } from 'react';
import _ from 'lodash';
import { layoutSelect, layoutSelectInput, layoutDispatch } from '/imports/ui/components/layout/context';
import {
layoutSelect,
layoutSelectInput,
layoutDispatch,
} from '/imports/ui/components/layout/context';
import DEFAULT_VALUES from '/imports/ui/components/layout/defaultValues';
import { INITIAL_INPUT_STATE } from '/imports/ui/components/layout/initState';
import { ACTIONS, CAMERADOCK_POSITION, PANELS } from '../enums';
import Storage from '/imports/ui/services/storage/session';
import { isPresentationEnabled } from '/imports/ui/services/features';
import Draggable from 'react-draggable';
const windowWidth = () => window.document.documentElement.clientWidth;
const windowHeight = () => window.document.documentElement.clientHeight;
@ -48,8 +51,10 @@ const CustomLayout = (props) => {
const prevDeviceType = usePrevious(deviceType);
const prevIsResizing = usePrevious(isResizing);
const throttledCalculatesLayout = _.throttle(() => calculatesLayout(),
50, { trailing: true, leading: true });
const throttledCalculatesLayout = _.throttle(() => calculatesLayout(), 50, {
trailing: true,
leading: true,
});
useEffect(() => {
window.addEventListener('resize', () => {
@ -77,8 +82,7 @@ const CustomLayout = (props) => {
const calculatesDropAreas = (sidebarNavWidth, sidebarContentWidth, cameraDockBounds) => {
const { height: actionBarHeight } = calculatesActionbarHeight();
const mediaAreaHeight = windowHeight()
- (DEFAULT_VALUES.navBarHeight + actionBarHeight);
const mediaAreaHeight = windowHeight() - (DEFAULT_VALUES.navBarHeight + actionBarHeight);
const mediaAreaWidth = windowWidth() - (sidebarNavWidth + sidebarContentWidth);
const DROP_ZONE_DEFAUL_SIZE = 100;
const dropZones = {};
@ -96,16 +100,13 @@ const CustomLayout = (props) => {
dropZones[CAMERADOCK_POSITION.CONTENT_RIGHT] = {
top: DEFAULT_VALUES.navBarHeight + DROP_ZONE_DEFAUL_SIZE,
left: !isRTL ? windowWidth() - DROP_ZONE_DEFAUL_SIZE : 0,
height: mediaAreaHeight
- (2 * DROP_ZONE_DEFAUL_SIZE),
height: mediaAreaHeight - 2 * DROP_ZONE_DEFAUL_SIZE,
width: DROP_ZONE_DEFAUL_SIZE,
zIndex: cameraDockBounds.zIndex,
};
dropZones[CAMERADOCK_POSITION.CONTENT_BOTTOM] = {
top: DEFAULT_VALUES.navBarHeight
+ mediaAreaHeight
- DROP_ZONE_DEFAUL_SIZE,
top: DEFAULT_VALUES.navBarHeight + mediaAreaHeight - DROP_ZONE_DEFAUL_SIZE,
left: !isRTL ? sidebarSize : null,
right: isRTL ? sidebarSize : null,
width: mediaAreaWidth,
@ -117,8 +118,7 @@ const CustomLayout = (props) => {
top: DEFAULT_VALUES.navBarHeight + DROP_ZONE_DEFAUL_SIZE,
left: !isRTL ? sidebarSize : null,
right: isRTL ? sidebarSize : null,
height: mediaAreaHeight
- (2 * DROP_ZONE_DEFAUL_SIZE),
height: mediaAreaHeight - 2 * DROP_ZONE_DEFAUL_SIZE,
width: DROP_ZONE_DEFAUL_SIZE,
zIndex: cameraDockBounds.zIndex,
};
@ -136,82 +136,90 @@ const CustomLayout = (props) => {
};
const init = () => {
const { sidebarContentPanel } = sidebarContentInput;
if (isMobile) {
layoutContextDispatch({
type: ACTIONS.SET_LAYOUT_INPUT,
value: _.defaultsDeep({
sidebarNavigation: {
isOpen: false,
sidebarNavPanel: sidebarNavigationInput.sidebarNavPanel,
},
sidebarContent: {
isOpen: false,
sidebarContentPanel: sidebarContentInput.sidebarContentPanel,
},
sidebarContentHorizontalResizer: {
isOpen: false,
},
presentation: {
isOpen: presentationInput.isOpen,
slidesLength: presentationInput.slidesLength,
currentSlide: {
...presentationInput.currentSlide,
value: _.defaultsDeep(
{
sidebarNavigation: {
isOpen:
input.sidebarNavigation.isOpen || sidebarContentPanel !== PANELS.NONE || false,
sidebarNavPanel: sidebarNavigationInput.sidebarNavPanel,
},
sidebarContent: {
isOpen: sidebarContentPanel !== PANELS.NONE,
sidebarContentPanel: sidebarContentInput.sidebarContentPanel,
},
sidebarContentHorizontalResizer: {
isOpen: false,
},
presentation: {
isOpen: presentationInput.isOpen,
slidesLength: presentationInput.slidesLength,
currentSlide: {
...presentationInput.currentSlide,
},
},
cameraDock: {
numCameras: cameraDockInput.numCameras,
},
externalVideo: {
hasExternalVideo: input.externalVideo.hasExternalVideo,
},
screenShare: {
hasScreenShare: input.screenShare.hasScreenShare,
width: input.screenShare.width,
height: input.screenShare.height,
},
sharedNotes: {
isPinned: sharedNotesInput.isPinned,
},
},
cameraDock: {
numCameras: cameraDockInput.numCameras,
},
externalVideo: {
hasExternalVideo: input.externalVideo.hasExternalVideo,
},
screenShare: {
hasScreenShare: input.screenShare.hasScreenShare,
width: input.screenShare.width,
height: input.screenShare.height,
},
sharedNotes: {
isPinned: sharedNotesInput.isPinned,
},
}, INITIAL_INPUT_STATE),
INITIAL_INPUT_STATE
),
});
} else {
const { sidebarContentPanel } = sidebarContentInput;
layoutContextDispatch({
type: ACTIONS.SET_LAYOUT_INPUT,
value: _.defaultsDeep({
sidebarNavigation: {
isOpen: input.sidebarNavigation.isOpen || sidebarContentPanel !== PANELS.NONE || false,
},
sidebarContent: {
isOpen: sidebarContentPanel !== PANELS.NONE,
sidebarContentPanel,
},
sidebarContentHorizontalResizer: {
isOpen: false,
},
presentation: {
isOpen: presentationInput.isOpen,
slidesLength: presentationInput.slidesLength,
currentSlide: {
...presentationInput.currentSlide,
value: _.defaultsDeep(
{
sidebarNavigation: {
isOpen:
input.sidebarNavigation.isOpen || sidebarContentPanel !== PANELS.NONE || false,
},
sidebarContent: {
isOpen: sidebarContentPanel !== PANELS.NONE,
sidebarContentPanel,
},
sidebarContentHorizontalResizer: {
isOpen: false,
},
presentation: {
isOpen: presentationInput.isOpen,
slidesLength: presentationInput.slidesLength,
currentSlide: {
...presentationInput.currentSlide,
},
},
cameraDock: {
numCameras: cameraDockInput.numCameras,
},
externalVideo: {
hasExternalVideo: input.externalVideo.hasExternalVideo,
},
screenShare: {
hasScreenShare: input.screenShare.hasScreenShare,
width: input.screenShare.width,
height: input.screenShare.height,
},
sharedNotes: {
isPinned: sharedNotesInput.isPinned,
},
},
cameraDock: {
numCameras: cameraDockInput.numCameras,
},
externalVideo: {
hasExternalVideo: input.externalVideo.hasExternalVideo,
},
screenShare: {
hasScreenShare: input.screenShare.hasScreenShare,
width: input.screenShare.width,
height: input.screenShare.height,
},
sharedNotes: {
isPinned: sharedNotesInput.isPinned,
},
}, INITIAL_INPUT_STATE),
INITIAL_INPUT_STATE
),
});
}
Session.set('layoutReady', true);
@ -224,16 +232,20 @@ const CustomLayout = (props) => {
const { hasScreenShare } = screenShareInput;
const { isPinned: isSharedNotesPinned } = sharedNotesInput;
const hasPresentation = isPresentationEnabled() && slidesLength !== 0
const isGeneralMediaOff = !hasPresentation && !hasExternalVideo && !hasScreenShare && !isSharedNotesPinned;
const hasPresentation = isPresentationEnabled() && slidesLength !== 0;
const isGeneralMediaOff =
!hasPresentation && !hasExternalVideo && !hasScreenShare && !isSharedNotesPinned;
let sidebarContentHeight = 0;
if (sidebarContentInput.isOpen) {
if (isMobile) {
sidebarContentHeight = windowHeight() - DEFAULT_VALUES.navBarHeight;
} else if (cameraDockInput.numCameras > 0
&& cameraDockInput.position === CAMERADOCK_POSITION.SIDEBAR_CONTENT_BOTTOM
&& isOpen && !isGeneralMediaOff) {
} else if (
cameraDockInput.numCameras > 0 &&
cameraDockInput.position === CAMERADOCK_POSITION.SIDEBAR_CONTENT_BOTTOM &&
isOpen &&
!isGeneralMediaOff
) {
sidebarContentHeight = windowHeight() - cameraDockHeight;
} else {
sidebarContentHeight = windowHeight();
@ -281,14 +293,13 @@ const CustomLayout = (props) => {
const stoppedResizing = prevIsResizing && !isResizing;
if (stoppedResizing) {
const isCameraTopOrBottom = cameraDockInput.position === CAMERADOCK_POSITION.CONTENT_TOP
|| cameraDockInput.position === CAMERADOCK_POSITION.CONTENT_BOTTOM;
const isCameraTopOrBottom =
cameraDockInput.position === CAMERADOCK_POSITION.CONTENT_TOP ||
cameraDockInput.position === CAMERADOCK_POSITION.CONTENT_BOTTOM;
Storage.setItem('webcamSize', {
width: isCameraTopOrBottom || isCameraSidebar
? lastWidth : cameraDockInput.width,
height: isCameraTopOrBottom || isCameraSidebar
? cameraDockInput.height : lastHeight,
width: isCameraTopOrBottom || isCameraSidebar ? lastWidth : cameraDockInput.width,
height: isCameraTopOrBottom || isCameraSidebar ? cameraDockInput.height : lastHeight,
});
const updatedLastSize = Storage.getItem('webcamSize');
@ -299,14 +310,14 @@ const CustomLayout = (props) => {
if (isCameraTop || isCameraBottom) {
if ((lastHeight === 0 && !isResizing) || (isCameraTop && isMobile)) {
cameraDockHeight = min(
max((mediaAreaBounds.height * 0.2), cameraDockMinHeight),
(mediaAreaBounds.height - cameraDockMinHeight),
max(mediaAreaBounds.height * 0.2, cameraDockMinHeight),
mediaAreaBounds.height - cameraDockMinHeight
);
} else {
const height = isResizing ? cameraDockInput.height : lastHeight;
cameraDockHeight = min(
max(height, cameraDockMinHeight),
(mediaAreaBounds.height - cameraDockMinHeight),
mediaAreaBounds.height - cameraDockMinHeight
);
}
@ -321,7 +332,7 @@ const CustomLayout = (props) => {
cameraDockBounds.maxHeight = mediaAreaBounds.height * 0.8;
if (isCameraBottom) {
cameraDockBounds.top += (mediaAreaBounds.height - cameraDockHeight);
cameraDockBounds.top += mediaAreaBounds.height - cameraDockHeight;
}
return cameraDockBounds;
@ -330,14 +341,14 @@ const CustomLayout = (props) => {
if (isCameraLeft || isCameraRight) {
if (lastWidth === 0 && !isResizing) {
cameraDockWidth = min(
max((mediaAreaBounds.width * 0.2), cameraDockMinWidth),
(mediaAreaBounds.width - cameraDockMinWidth),
max(mediaAreaBounds.width * 0.2, cameraDockMinWidth),
mediaAreaBounds.width - cameraDockMinWidth
);
} else {
const width = isResizing ? cameraDockInput.width : lastWidth;
cameraDockWidth = min(
max(width, cameraDockMinWidth),
(mediaAreaBounds.width - cameraDockMinWidth),
mediaAreaBounds.width - cameraDockMinWidth
);
}
@ -345,9 +356,8 @@ const CustomLayout = (props) => {
cameraDockBounds.minWidth = cameraDockMinWidth;
cameraDockBounds.width = cameraDockWidth;
cameraDockBounds.maxWidth = mediaAreaBounds.width * 0.8;
cameraDockBounds.presenterMaxWidth = mediaAreaBounds.width
- presentationToolbarMinWidth
- camerasMargin;
cameraDockBounds.presenterMaxWidth =
mediaAreaBounds.width - presentationToolbarMinWidth - camerasMargin;
cameraDockBounds.minHeight = cameraDockMinHeight;
cameraDockBounds.height = mediaAreaBounds.height;
cameraDockBounds.maxHeight = mediaAreaBounds.height;
@ -355,12 +365,12 @@ const CustomLayout = (props) => {
cameraDockBounds.height -= 20;
if (isCameraRight) {
const sizeValue = (mediaAreaBounds.left + mediaAreaBounds.width) - cameraDockWidth;
const sizeValue = mediaAreaBounds.left + mediaAreaBounds.width - cameraDockWidth;
cameraDockBounds.left = !isRTL ? sizeValue - camerasMargin : 0;
cameraDockBounds.right = isRTL ? sizeValue + sidebarSize - camerasMargin : null;
} else if (isCameraLeft) {
cameraDockBounds.left = mediaAreaBounds.left + camerasMargin;
cameraDockBounds.right = isRTL ? sidebarSize + (camerasMargin * 2) : null;
cameraDockBounds.right = isRTL ? sidebarSize + camerasMargin * 2 : null;
}
return cameraDockBounds;
@ -369,14 +379,14 @@ const CustomLayout = (props) => {
if (isCameraSidebar) {
if (lastHeight === 0 && !isResizing) {
cameraDockHeight = min(
max((windowHeight() * 0.2), cameraDockMinHeight),
(windowHeight() - cameraDockMinHeight),
max(windowHeight() * 0.2, cameraDockMinHeight),
windowHeight() - cameraDockMinHeight
);
} else {
const height = isResizing ? cameraDockInput.height : lastHeight;
cameraDockHeight = min(
max(height, cameraDockMinHeight),
(windowHeight() - cameraDockMinHeight),
windowHeight() - cameraDockMinHeight
);
}
@ -400,15 +410,16 @@ const CustomLayout = (props) => {
const { isPinned: isSharedNotesPinned } = sharedNotesInput;
const { height: actionBarHeight } = calculatesActionbarHeight();
const mediaAreaHeight = windowHeight()
- (DEFAULT_VALUES.navBarHeight + actionBarHeight + bannerAreaHeight());
const mediaAreaHeight =
windowHeight() - (DEFAULT_VALUES.navBarHeight + actionBarHeight + bannerAreaHeight());
const mediaAreaWidth = windowWidth() - (sidebarNavWidth + sidebarContentWidth);
const mediaBounds = {};
const { element: fullscreenElement } = fullscreen;
const { navBarHeight, camerasMargin } = DEFAULT_VALUES;
const hasPresentation = isPresentationEnabled() && slidesLength !== 0
const isGeneralMediaOff = !hasPresentation && !hasExternalVideo && !hasScreenShare && !isSharedNotesPinned;
const hasPresentation = isPresentationEnabled() && slidesLength !== 0;
const isGeneralMediaOff =
!hasPresentation && !hasExternalVideo && !hasScreenShare && !isSharedNotesPinned;
if (!isOpen || isGeneralMediaOff) {
mediaBounds.width = 0;
@ -420,7 +431,11 @@ const CustomLayout = (props) => {
return mediaBounds;
}
if (fullscreenElement === 'Presentation' || fullscreenElement === 'Screenshare' || fullscreenElement === 'ExternalVideo') {
if (
fullscreenElement === 'Presentation' ||
fullscreenElement === 'Screenshare' ||
fullscreenElement === 'ExternalVideo'
) {
mediaBounds.width = windowWidth();
mediaBounds.height = windowHeight();
mediaBounds.top = 0;
@ -437,17 +452,18 @@ const CustomLayout = (props) => {
case CAMERADOCK_POSITION.CONTENT_TOP: {
mediaBounds.width = mediaAreaWidth;
mediaBounds.height = mediaAreaHeight - cameraDockBounds.height - camerasMargin;
mediaBounds.top = navBarHeight + cameraDockBounds.height + camerasMargin + bannerAreaHeight();
mediaBounds.top =
navBarHeight + cameraDockBounds.height + camerasMargin + bannerAreaHeight();
mediaBounds.left = !isRTL ? sidebarSize : null;
mediaBounds.right = isRTL ? sidebarSize : null;
break;
}
case CAMERADOCK_POSITION.CONTENT_RIGHT: {
mediaBounds.width = mediaAreaWidth - cameraDockBounds.width - (camerasMargin * 2);
mediaBounds.width = mediaAreaWidth - cameraDockBounds.width - camerasMargin * 2;
mediaBounds.height = mediaAreaHeight;
mediaBounds.top = navBarHeight + bannerAreaHeight();
mediaBounds.left = !isRTL ? sidebarSize : null;
mediaBounds.right = isRTL ? sidebarSize - (camerasMargin * 2) : null;
mediaBounds.right = isRTL ? sidebarSize - camerasMargin * 2 : null;
break;
}
case CAMERADOCK_POSITION.CONTENT_BOTTOM: {
@ -459,11 +475,11 @@ const CustomLayout = (props) => {
break;
}
case CAMERADOCK_POSITION.CONTENT_LEFT: {
mediaBounds.width = mediaAreaWidth - cameraDockBounds.width - (camerasMargin * 2);
mediaBounds.width = mediaAreaWidth - cameraDockBounds.width - camerasMargin * 2;
mediaBounds.height = mediaAreaHeight;
mediaBounds.top = navBarHeight + bannerAreaHeight();
const sizeValue = sidebarNavWidth
+ sidebarContentWidth + mediaAreaWidth - mediaBounds.width;
const sizeValue =
sidebarNavWidth + sidebarContentWidth + mediaAreaWidth - mediaBounds.width;
mediaBounds.left = !isRTL ? sizeValue : null;
mediaBounds.right = isRTL ? sidebarSize : null;
break;
@ -490,7 +506,7 @@ const CustomLayout = (props) => {
}
return mediaBounds;
}
};
const calculatesLayout = () => {
const {
@ -512,16 +528,27 @@ const CustomLayout = (props) => {
const sidebarContentWidth = calculatesSidebarContentWidth();
const sidebarNavBounds = calculatesSidebarNavBounds();
const sidebarContentBounds = calculatesSidebarContentBounds(sidebarNavWidth.width);
const mediaAreaBounds = calculatesMediaAreaBounds(sidebarNavWidth.width, sidebarContentWidth.width);
const mediaAreaBounds = calculatesMediaAreaBounds(
sidebarNavWidth.width,
sidebarContentWidth.width
);
const navbarBounds = calculatesNavbarBounds(mediaAreaBounds);
const actionbarBounds = calculatesActionbarBounds(mediaAreaBounds);
const cameraDockBounds = calculatesCameraDockBounds(
sidebarNavWidth.width, sidebarContentWidth.width, mediaAreaBounds,
sidebarNavWidth.width,
sidebarContentWidth.width,
mediaAreaBounds
);
const dropZoneAreas = calculatesDropAreas(
sidebarNavWidth.width,
sidebarContentWidth.width,
cameraDockBounds
);
const dropZoneAreas = calculatesDropAreas(sidebarNavWidth.width, sidebarContentWidth.width, cameraDockBounds);
const sidebarContentHeight = calculatesSidebarContentHeight(cameraDockBounds.height);
const mediaBounds = calculatesMediaBounds(
sidebarNavWidth.width, sidebarContentWidth.width, cameraDockBounds,
sidebarNavWidth.width,
sidebarContentWidth.width,
cameraDockBounds
);
const sidebarSize = sidebarContentWidth.width + sidebarNavWidth.width;
const { height: actionBarHeight } = calculatesActionbarHeight();
@ -529,7 +556,7 @@ const CustomLayout = (props) => {
let horizontalCameraDiff = 0;
if (cameraPosition === CAMERADOCK_POSITION.CONTENT_LEFT) {
horizontalCameraDiff = cameraDockBounds.width + (camerasMargin * 2);
horizontalCameraDiff = cameraDockBounds.width + camerasMargin * 2;
}
if (cameraPosition === CAMERADOCK_POSITION.CONTENT_RIGHT) {
@ -567,9 +594,9 @@ const CustomLayout = (props) => {
layoutContextDispatch({
type: ACTIONS.SET_CAPTIONS_OUTPUT,
value: {
left: !isRTL ? (sidebarSize + captionsMargin) : null,
right: isRTL ? (sidebarSize + captionsMargin) : null,
maxWidth: mediaAreaBounds.width - (captionsMargin * 2),
left: !isRTL ? sidebarSize + captionsMargin : null,
right: isRTL ? sidebarSize + captionsMargin : null,
maxWidth: mediaAreaBounds.width - captionsMargin * 2,
},
});
@ -654,14 +681,17 @@ const CustomLayout = (props) => {
tabOrder: 4,
isDraggable: !isMobile && !isTablet && presentationInput.isOpen,
resizableEdge: {
top: (input.cameraDock.position === CAMERADOCK_POSITION.CONTENT_BOTTOM)
|| (input.cameraDock.position === CAMERADOCK_POSITION.SIDEBAR_CONTENT_BOTTOM
&& input.sidebarContent.isOpen),
right: (!isRTL && input.cameraDock.position === CAMERADOCK_POSITION.CONTENT_LEFT)
|| (isRTL && input.cameraDock.position === CAMERADOCK_POSITION.CONTENT_RIGHT),
top:
input.cameraDock.position === CAMERADOCK_POSITION.CONTENT_BOTTOM ||
(input.cameraDock.position === CAMERADOCK_POSITION.SIDEBAR_CONTENT_BOTTOM &&
input.sidebarContent.isOpen),
right:
(!isRTL && input.cameraDock.position === CAMERADOCK_POSITION.CONTENT_LEFT) ||
(isRTL && input.cameraDock.position === CAMERADOCK_POSITION.CONTENT_RIGHT),
bottom: input.cameraDock.position === CAMERADOCK_POSITION.CONTENT_TOP,
left: (!isRTL && input.cameraDock.position === CAMERADOCK_POSITION.CONTENT_RIGHT)
|| (isRTL && input.cameraDock.position === CAMERADOCK_POSITION.CONTENT_LEFT),
left:
(!isRTL && input.cameraDock.position === CAMERADOCK_POSITION.CONTENT_RIGHT) ||
(isRTL && input.cameraDock.position === CAMERADOCK_POSITION.CONTENT_LEFT),
},
zIndex: cameraDockBounds.zIndex,
focusedId: input.cameraDock.focusedId,
@ -681,7 +711,7 @@ const CustomLayout = (props) => {
height: mediaBounds.height,
top: mediaBounds.top,
left: mediaBounds.left,
right: isRTL ? (mediaBounds.right + horizontalCameraDiff) : null,
right: isRTL ? mediaBounds.right + horizontalCameraDiff : null,
tabOrder: DEFAULT_VALUES.presentationTabOrder,
isResizable: false,
zIndex: mediaBounds.zIndex,
@ -695,7 +725,7 @@ const CustomLayout = (props) => {
height: mediaBounds.height,
top: mediaBounds.top,
left: mediaBounds.left,
right: isRTL ? (mediaBounds.right + horizontalCameraDiff) : null,
right: isRTL ? mediaBounds.right + horizontalCameraDiff : null,
zIndex: mediaBounds.zIndex,
},
});
@ -707,7 +737,7 @@ const CustomLayout = (props) => {
height: mediaBounds.height,
top: mediaBounds.top,
left: mediaBounds.left,
right: isRTL ? (mediaBounds.right + horizontalCameraDiff) : null,
right: isRTL ? mediaBounds.right + horizontalCameraDiff : null,
},
});
@ -718,7 +748,7 @@ const CustomLayout = (props) => {
height: mediaBounds.height,
top: mediaBounds.top,
left: mediaBounds.left,
right: isRTL ? (mediaBounds.right + horizontalCameraDiff) : null,
right: isRTL ? mediaBounds.right + horizontalCameraDiff : null,
},
});
};
@ -726,4 +756,4 @@ const CustomLayout = (props) => {
return null;
};
export default CustomLayout;
export default CustomLayout;

187
bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx
View File

@ -1,13 +1,13 @@
import { useEffect, useRef } from 'react';
import _ from 'lodash';
import { layoutDispatch, layoutSelect, layoutSelectInput } from '/imports/ui/components/layout/context';
import {
layoutDispatch,
layoutSelect,
layoutSelectInput,
} from '/imports/ui/components/layout/context';
import DEFAULT_VALUES from '/imports/ui/components/layout/defaultValues';
import { INITIAL_INPUT_STATE } from '/imports/ui/components/layout/initState';
import {
ACTIONS,
PANELS,
CAMERADOCK_POSITION,
} from '/imports/ui/components/layout/enums';
import { ACTIONS, PANELS, CAMERADOCK_POSITION } from '/imports/ui/components/layout/enums';
import { isPresentationEnabled } from '/imports/ui/services/features';
const windowWidth = () => window.document.documentElement.clientWidth;
@ -47,8 +47,10 @@ const PresentationFocusLayout = (props) => {
const prevDeviceType = usePrevious(deviceType);
const throttledCalculatesLayout = _.throttle(() => calculatesLayout(),
50, { trailing: true, leading: true });
const throttledCalculatesLayout = _.throttle(() => calculatesLayout(), 50, {
trailing: true,
leading: true,
});
useEffect(() => {
window.addEventListener('resize', () => {
@ -75,76 +77,82 @@ const PresentationFocusLayout = (props) => {
}, [input, deviceType, isRTL, fontSize, fullscreen]);
const init = () => {
const { sidebarContentPanel } = sidebarContentInput;
if (isMobile) {
layoutContextDispatch({
type: ACTIONS.SET_LAYOUT_INPUT,
value: _.defaultsDeep({
sidebarNavigation: {
isOpen: false,
sidebarNavPanel: sidebarNavigationInput.sidebarNavPanel,
},
sidebarContent: {
isOpen: false,
sidebarContentPanel: sidebarContentInput.sidebarContentPanel,
},
SidebarContentHorizontalResizer: {
isOpen: false,
},
presentation: {
isOpen: presentationInput.isOpen,
slidesLength: presentationInput.slidesLength,
currentSlide: {
...presentationInput.currentSlide,
value: _.defaultsDeep(
{
sidebarNavigation: {
isOpen:
input.sidebarNavigation.isOpen || sidebarContentPanel !== PANELS.NONE || false,
},
sidebarContent: {
isOpen: sidebarContentPanel !== PANELS.NONE,
sidebarContentPanel,
},
SidebarContentHorizontalResizer: {
isOpen: false,
},
presentation: {
isOpen: presentationInput.isOpen,
slidesLength: presentationInput.slidesLength,
currentSlide: {
...presentationInput.currentSlide,
},
},
cameraDock: {
numCameras: cameraDockInput.numCameras,
},
externalVideo: {
hasExternalVideo: input.externalVideo.hasExternalVideo,
},
screenShare: {
hasScreenShare: input.screenShare.hasScreenShare,
width: input.screenShare.width,
height: input.screenShare.height,
},
},
cameraDock: {
numCameras: cameraDockInput.numCameras,
},
externalVideo: {
hasExternalVideo: input.externalVideo.hasExternalVideo,
},
screenShare: {
hasScreenShare: input.screenShare.hasScreenShare,
width: input.screenShare.width,
height: input.screenShare.height,
},
}, INITIAL_INPUT_STATE),
INITIAL_INPUT_STATE
),
});
} else {
const { sidebarContentPanel } = sidebarContentInput;
layoutContextDispatch({
type: ACTIONS.SET_LAYOUT_INPUT,
value: _.defaultsDeep({
sidebarNavigation: {
isOpen: input.sidebarNavigation.isOpen || sidebarContentPanel !== PANELS.NONE || false,
},
sidebarContent: {
isOpen: sidebarContentPanel !== PANELS.NONE,
sidebarContentPanel,
},
SidebarContentHorizontalResizer: {
isOpen: false,
},
presentation: {
isOpen: presentationInput.isOpen,
slidesLength: presentationInput.slidesLength,
currentSlide: {
...presentationInput.currentSlide,
value: _.defaultsDeep(
{
sidebarNavigation: {
isOpen:
input.sidebarNavigation.isOpen || sidebarContentPanel !== PANELS.NONE || false,
},
sidebarContent: {
isOpen: sidebarContentPanel !== PANELS.NONE,
sidebarContentPanel,
},
SidebarContentHorizontalResizer: {
isOpen: false,
},
presentation: {
isOpen: presentationInput.isOpen,
slidesLength: presentationInput.slidesLength,
currentSlide: {
...presentationInput.currentSlide,
},
},
cameraDock: {
numCameras: cameraDockInput.numCameras,
},
externalVideo: {
hasExternalVideo: input.externalVideo.hasExternalVideo,
},
screenShare: {
hasScreenShare: input.screenShare.hasScreenShare,
width: input.screenShare.width,
height: input.screenShare.height,
},
},
cameraDock: {
numCameras: cameraDockInput.numCameras,
},
externalVideo: {
hasExternalVideo: input.externalVideo.hasExternalVideo,
},
screenShare: {
hasScreenShare: input.screenShare.hasScreenShare,
width: input.screenShare.width,
height: input.screenShare.height,
},
}, INITIAL_INPUT_STATE),
INITIAL_INPUT_STATE
),
});
}
Session.set('layoutReady', true);
@ -157,13 +165,11 @@ const PresentationFocusLayout = (props) => {
const { hasScreenShare } = screenShareInput;
const { isPinned: isSharedNotesPinned } = sharedNotesInput;
const hasPresentation = isPresentationEnabled() && slidesLength !== 0
const isGeneralMediaOff = !hasPresentation && !hasExternalVideo && !hasScreenShare && !isSharedNotesPinned;
const hasPresentation = isPresentationEnabled() && slidesLength !== 0;
const isGeneralMediaOff =
!hasPresentation && !hasExternalVideo && !hasScreenShare && !isSharedNotesPinned;
const {
navBarHeight,
sidebarContentMinHeight,
} = DEFAULT_VALUES;
const { navBarHeight, sidebarContentMinHeight } = DEFAULT_VALUES;
let height = 0;
let minHeight = 0;
let maxHeight = 0;
@ -174,10 +180,9 @@ const PresentationFocusLayout = (props) => {
maxHeight = height;
} else if (cameraDockInput.numCameras > 0 && isOpen && !isGeneralMediaOff) {
if (sidebarContentInput.height === 0) {
height = (windowHeight() * 0.75) - bannerAreaHeight();
height = windowHeight() * 0.75 - bannerAreaHeight();
} else {
height = min(max(sidebarContentInput.height, sidebarContentMinHeight),
windowHeight());
height = min(max(sidebarContentInput.height, sidebarContentMinHeight), windowHeight());
}
minHeight = windowHeight() * 0.25 - bannerAreaHeight();
maxHeight = windowHeight() * 0.75 - bannerAreaHeight();
@ -199,7 +204,7 @@ const PresentationFocusLayout = (props) => {
mediaAreaBounds,
sidebarNavWidth,
sidebarContentWidth,
sidebarContentHeight,
sidebarContentHeight
) => {
const { baseCameraDockBounds } = props;
const sidebarSize = sidebarNavWidth + sidebarContentWidth;
@ -230,15 +235,16 @@ const PresentationFocusLayout = (props) => {
} else {
if (cameraDockInput.height === 0) {
cameraDockHeight = min(
max((windowHeight() - sidebarContentHeight), cameraDockMinHeight),
(windowHeight() - cameraDockMinHeight),
max(windowHeight() - sidebarContentHeight, cameraDockMinHeight),
windowHeight() - cameraDockMinHeight
);
const bannerAreaDiff = windowHeight() - sidebarContentHeight - cameraDockHeight - bannerAreaHeight();
const bannerAreaDiff =
windowHeight() - sidebarContentHeight - cameraDockHeight - bannerAreaHeight();
cameraDockHeight += bannerAreaDiff;
} else {
cameraDockHeight = min(
max(cameraDockInput.height, cameraDockMinHeight),
(windowHeight() - cameraDockMinHeight),
windowHeight() - cameraDockMinHeight
);
}
cameraDockBounds.top = windowHeight() - cameraDockHeight - bannerAreaHeight();
@ -259,7 +265,11 @@ const PresentationFocusLayout = (props) => {
const mediaBounds = {};
const { element: fullscreenElement } = fullscreen;
if (fullscreenElement === 'Presentation' || fullscreenElement === 'Screenshare' || fullscreenElement === 'ExternalVideo') {
if (
fullscreenElement === 'Presentation' ||
fullscreenElement === 'Screenshare' ||
fullscreenElement === 'ExternalVideo'
) {
mediaBounds.width = windowWidth();
mediaBounds.height = windowHeight();
mediaBounds.top = 0;
@ -303,7 +313,8 @@ const PresentationFocusLayout = (props) => {
const sidebarNavBounds = calculatesSidebarNavBounds();
const sidebarContentBounds = calculatesSidebarContentBounds(sidebarNavWidth.width);
const mediaAreaBounds = calculatesMediaAreaBounds(
sidebarNavWidth.width, sidebarContentWidth.width,
sidebarNavWidth.width,
sidebarContentWidth.width
);
const navbarBounds = calculatesNavbarBounds(mediaAreaBounds);
const actionbarBounds = calculatesActionbarBounds(mediaAreaBounds);
@ -315,7 +326,7 @@ const PresentationFocusLayout = (props) => {
mediaAreaBounds,
sidebarNavWidth.width,
sidebarContentWidth.width,
sidebarContentHeight.height,
sidebarContentHeight.height
);
const { isOpen } = presentationInput;
@ -350,9 +361,9 @@ const PresentationFocusLayout = (props) => {
layoutContextDispatch({
type: ACTIONS.SET_CAPTIONS_OUTPUT,
value: {
left: !isRTL ? (sidebarSize + captionsMargin) : null,
right: isRTL ? (sidebarSize + captionsMargin) : null,
maxWidth: mediaAreaBounds.width - (captionsMargin * 2),
left: !isRTL ? sidebarSize + captionsMargin : null,
right: isRTL ? sidebarSize + captionsMargin : null,
maxWidth: mediaAreaBounds.width - captionsMargin * 2,
},
});
@ -501,4 +512,4 @@ const PresentationFocusLayout = (props) => {
return null;
};
export default PresentationFocusLayout;
export default PresentationFocusLayout;

215
bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx
View File

@ -1,6 +1,10 @@
import { useEffect, useRef } from 'react';
import _ from 'lodash';
import { layoutDispatch, layoutSelect, layoutSelectInput } from '/imports/ui/components/layout/context';
import {
layoutDispatch,
layoutSelect,
layoutSelectInput,
} from '/imports/ui/components/layout/context';
import DEFAULT_VALUES from '/imports/ui/components/layout/defaultValues';
import { INITIAL_INPUT_STATE } from '/imports/ui/components/layout/initState';
import { ACTIONS, PANELS, CAMERADOCK_POSITION } from '/imports/ui/components/layout/enums';
@ -40,8 +44,10 @@ const SmartLayout = (props) => {
const prevDeviceType = usePrevious(deviceType);
const throttledCalculatesLayout = _.throttle(() => calculatesLayout(),
50, { trailing: true, leading: true });
const throttledCalculatesLayout = _.throttle(() => calculatesLayout(), 50, {
trailing: true,
leading: true,
});
useEffect(() => {
window.addEventListener('resize', () => {
@ -68,82 +74,89 @@ const SmartLayout = (props) => {
}, [input, deviceType, isRTL, fontSize, fullscreen]);
const init = () => {
const { sidebarContentPanel } = sidebarContentInput;
if (isMobile) {
layoutContextDispatch({
type: ACTIONS.SET_LAYOUT_INPUT,
value: _.defaultsDeep({
sidebarNavigation: {
isOpen: false,
sidebarNavPanel: sidebarNavigationInput.sidebarNavPanel,
},
sidebarContent: {
isOpen: false,
sidebarContentPanel: sidebarContentInput.sidebarContentPanel,
},
SidebarContentHorizontalResizer: {
isOpen: false,
},
presentation: {
isOpen: presentationInput.isOpen,
slidesLength: presentationInput.slidesLength,
currentSlide: {
...presentationInput.currentSlide,
value: _.defaultsDeep(
{
sidebarNavigation: {
isOpen:
input.sidebarNavigation.isOpen || sidebarContentPanel !== PANELS.NONE || false,
},
sidebarContent: {
isOpen: sidebarContentPanel !== PANELS.NONE,
sidebarContentPanel,
},
SidebarContentHorizontalResizer: {
isOpen: false,
},
presentation: {
isOpen: presentationInput.isOpen,
slidesLength: presentationInput.slidesLength,
currentSlide: {
...presentationInput.currentSlide,
},
},
cameraDock: {
numCameras: cameraDockInput.numCameras,
},
externalVideo: {
hasExternalVideo: externalVideoInput.hasExternalVideo,
},
screenShare: {
hasScreenShare: screenShareInput.hasScreenShare,
width: screenShareInput.width,
height: screenShareInput.height,
},
sharedNotes: {
isPinned: sharedNotesInput.isPinned,
},
},
cameraDock: {
numCameras: cameraDockInput.numCameras,
},
externalVideo: {
hasExternalVideo: externalVideoInput.hasExternalVideo,
},
screenShare: {
hasScreenShare: screenShareInput.hasScreenShare,
width: screenShareInput.width,
height: screenShareInput.height,
},
sharedNotes: {
isPinned: sharedNotesInput.isPinned,
},
}, INITIAL_INPUT_STATE),
INITIAL_INPUT_STATE
),
});
} else {
const { sidebarContentPanel } = sidebarContentInput;
layoutContextDispatch({
type: ACTIONS.SET_LAYOUT_INPUT,
value: _.defaultsDeep({
sidebarNavigation: {
isOpen: input.sidebarNavigation.isOpen || sidebarContentPanel !== PANELS.NONE || false,
},
sidebarContent: {
isOpen: sidebarContentPanel !== PANELS.NONE,
sidebarContentPanel,
},
SidebarContentHorizontalResizer: {
isOpen: false,
},
presentation: {
isOpen: presentationInput.isOpen,
slidesLength: presentationInput.slidesLength,
currentSlide: {
...presentationInput.currentSlide,
value: _.defaultsDeep(
{
sidebarNavigation: {
isOpen:
input.sidebarNavigation.isOpen || sidebarContentPanel !== PANELS.NONE || false,
},
sidebarContent: {
isOpen: sidebarContentPanel !== PANELS.NONE,
sidebarContentPanel,
},
SidebarContentHorizontalResizer: {
isOpen: false,
},
presentation: {
isOpen: presentationInput.isOpen,
slidesLength: presentationInput.slidesLength,
currentSlide: {
...presentationInput.currentSlide,
},
},
cameraDock: {
numCameras: cameraDockInput.numCameras,
},
externalVideo: {
hasExternalVideo: externalVideoInput.hasExternalVideo,
},
screenShare: {
hasScreenShare: screenShareInput.hasScreenShare,
width: screenShareInput.width,
height: screenShareInput.height,
},
sharedNotes: {
isPinned: sharedNotesInput.isPinned,
},
},
cameraDock: {
numCameras: cameraDockInput.numCameras,
},
externalVideo: {
hasExternalVideo: externalVideoInput.hasExternalVideo,
},
screenShare: {
hasScreenShare: screenShareInput.hasScreenShare,
width: screenShareInput.width,
height: screenShareInput.height,
},
sharedNotes: {
isPinned: sharedNotesInput.isPinned,
},
}, INITIAL_INPUT_STATE),
INITIAL_INPUT_STATE
),
});
}
Session.set('layoutReady', true);
@ -180,13 +193,14 @@ const SmartLayout = (props) => {
cameraDockBounds.isCameraHorizontal = false;
const mediaBoundsWidth = (mediaBounds.width > presentationToolbarMinWidth && !isMobile)
? mediaBounds.width
: presentationToolbarMinWidth;
const mediaBoundsWidth =
mediaBounds.width > presentationToolbarMinWidth && !isMobile
? mediaBounds.width
: presentationToolbarMinWidth;
cameraDockBounds.top = navBarHeight;
cameraDockBounds.left = mediaAreaBounds.left;
cameraDockBounds.right = isRTL ? sidebarSize + (camerasMargin * 2) : null;
cameraDockBounds.right = isRTL ? sidebarSize + camerasMargin * 2 : null;
cameraDockBounds.zIndex = 1;
if (mediaBounds.width < mediaAreaBounds.width) {
@ -196,7 +210,7 @@ const SmartLayout = (props) => {
cameraDockBounds.height = mediaAreaBounds.height;
cameraDockBounds.maxHeight = mediaAreaBounds.height;
cameraDockBounds.left += camerasMargin;
cameraDockBounds.width -= (camerasMargin * 2);
cameraDockBounds.width -= camerasMargin * 2;
cameraDockBounds.isCameraHorizontal = true;
cameraDockBounds.position = CAMERADOCK_POSITION.CONTENT_LEFT;
// button size in vertical position
@ -207,7 +221,7 @@ const SmartLayout = (props) => {
cameraDockBounds.height = mediaAreaBounds.height - mediaBounds.height;
cameraDockBounds.maxHeight = mediaAreaBounds.height * 0.8;
cameraDockBounds.top += camerasMargin;
cameraDockBounds.height -= (camerasMargin * 2);
cameraDockBounds.height -= camerasMargin * 2;
cameraDockBounds.position = CAMERADOCK_POSITION.CONTENT_TOP;
}
@ -264,16 +278,17 @@ const SmartLayout = (props) => {
width: screeShareWidth,
height: screeShareHeight,
};
}
};
const calculatesMediaBounds = (mediaAreaBounds, slideSize, sidebarSize, screenShareSize) => {
const { isOpen, slidesLength } = presentationInput;
const { hasExternalVideo } = externalVideoInput;
const { hasScreenShare } = screenShareInput;
const { isPinned: isSharedNotesPinned } = sharedNotesInput;
const hasPresentation = isPresentationEnabled() && slidesLength !== 0
const isGeneralMediaOff = !hasPresentation && !hasExternalVideo && !hasScreenShare && !isSharedNotesPinned;
const hasPresentation = isPresentationEnabled() && slidesLength !== 0;
const isGeneralMediaOff =
!hasPresentation && !hasExternalVideo && !hasScreenShare && !isSharedNotesPinned;
const mediaBounds = {};
const { element: fullscreenElement } = fullscreen;
@ -288,7 +303,11 @@ const SmartLayout = (props) => {
return mediaBounds;
}
if (fullscreenElement === 'Presentation' || fullscreenElement === 'Screenshare' || fullscreenElement === 'ExternalVideo') {
if (
fullscreenElement === 'Presentation' ||
fullscreenElement === 'Screenshare' ||
fullscreenElement === 'ExternalVideo'
) {
mediaBounds.width = windowWidth();
mediaBounds.height = windowHeight();
mediaBounds.top = 0;
@ -303,26 +322,24 @@ const SmartLayout = (props) => {
if (cameraDockInput.numCameras > 0 && !cameraDockInput.isDragging) {
if (mediaContentSize.width !== 0 && mediaContentSize.height !== 0 && !hasExternalVideo) {
if (mediaContentSize.width < mediaAreaBounds.width && !isMobile) {
if (mediaContentSize.width < (mediaAreaBounds.width * 0.8)) {
if (mediaContentSize.width < mediaAreaBounds.width * 0.8) {
mediaBounds.width = mediaContentSize.width;
} else {
mediaBounds.width = mediaAreaBounds.width * 0.8;
}
mediaBounds.height = mediaAreaBounds.height;
mediaBounds.top = mediaAreaBounds.top;
const sizeValue = mediaAreaBounds.left
+ (mediaAreaBounds.width - mediaBounds.width);
const sizeValue = mediaAreaBounds.left + (mediaAreaBounds.width - mediaBounds.width);
mediaBounds.left = !isRTL ? sizeValue : null;
mediaBounds.right = isRTL ? sidebarSize : null;
} else {
if (mediaContentSize.height < (mediaAreaBounds.height * 0.8)) {
if (mediaContentSize.height < mediaAreaBounds.height * 0.8) {
mediaBounds.height = mediaContentSize.height;
} else {
mediaBounds.height = mediaAreaBounds.height * 0.8;
}
mediaBounds.width = mediaAreaBounds.width;
mediaBounds.top = mediaAreaBounds.top
+ (mediaAreaBounds.height - mediaBounds.height);
mediaBounds.top = mediaAreaBounds.top + (mediaAreaBounds.height - mediaBounds.height);
const sizeValue = mediaAreaBounds.left;
mediaBounds.left = !isRTL ? sizeValue : null;
mediaBounds.right = isRTL ? sidebarSize : null;
@ -330,8 +347,7 @@ const SmartLayout = (props) => {
} else {
mediaBounds.width = mediaAreaBounds.width;
mediaBounds.height = mediaAreaBounds.height * 0.8;
mediaBounds.top = mediaAreaBounds.top
+ (mediaAreaBounds.height - mediaBounds.height);
mediaBounds.top = mediaAreaBounds.top + (mediaAreaBounds.height - mediaBounds.height);
const sizeValue = mediaAreaBounds.left;
mediaBounds.left = !isRTL ? sizeValue : null;
mediaBounds.right = isRTL ? sidebarSize : null;
@ -369,7 +385,10 @@ const SmartLayout = (props) => {
const sidebarContentHeight = calculatesSidebarContentHeight();
const sidebarNavBounds = calculatesSidebarNavBounds();
const sidebarContentBounds = calculatesSidebarContentBounds(sidebarNavWidth.width);
const mediaAreaBounds = calculatesMediaAreaBounds(sidebarNavWidth.width, sidebarContentWidth.width);
const mediaAreaBounds = calculatesMediaAreaBounds(
sidebarNavWidth.width,
sidebarContentWidth.width
);
const navbarBounds = calculatesNavbarBounds(mediaAreaBounds);
const actionbarBounds = calculatesActionbarBounds(mediaAreaBounds);
const slideSize = calculatesSlideSize(mediaAreaBounds);
@ -379,11 +398,11 @@ const SmartLayout = (props) => {
mediaAreaBounds,
slideSize,
sidebarSize,
screenShareSize,
screenShareSize
);
const cameraDockBounds = calculatesCameraDockBounds(mediaAreaBounds, mediaBounds, sidebarSize);
const horizontalCameraDiff = cameraDockBounds.isCameraHorizontal
? cameraDockBounds.width + (camerasMargin * 2)
? cameraDockBounds.width + camerasMargin * 2
: 0;
layoutContextDispatch({
@ -417,9 +436,9 @@ const SmartLayout = (props) => {
layoutContextDispatch({
type: ACTIONS.SET_CAPTIONS_OUTPUT,
value: {
left: !isRTL ? (sidebarSize + captionsMargin) : null,
right: isRTL ? (sidebarSize + captionsMargin) : null,
maxWidth: mediaAreaBounds.width - (captionsMargin * 2),
left: !isRTL ? sidebarSize + captionsMargin : null,
right: isRTL ? sidebarSize + captionsMargin : null,
maxWidth: mediaAreaBounds.width - captionsMargin * 2,
},
});
@ -521,7 +540,7 @@ const SmartLayout = (props) => {
height: mediaBounds.height,
top: mediaBounds.top,
left: mediaBounds.left,
right: isRTL ? (mediaBounds.right + horizontalCameraDiff) : null,
right: isRTL ? mediaBounds.right + horizontalCameraDiff : null,
tabOrder: DEFAULT_VALUES.presentationTabOrder,
isResizable: false,
zIndex: mediaBounds.zIndex,
@ -535,7 +554,7 @@ const SmartLayout = (props) => {
height: mediaBounds.height,
top: mediaBounds.top,
left: mediaBounds.left,
right: isRTL ? (mediaBounds.right + horizontalCameraDiff) : null,
right: isRTL ? mediaBounds.right + horizontalCameraDiff : null,
zIndex: mediaBounds.zIndex,
},
});
@ -547,7 +566,7 @@ const SmartLayout = (props) => {
height: mediaBounds.height,
top: mediaBounds.top,
left: mediaBounds.left,
right: isRTL ? (mediaBounds.right + horizontalCameraDiff) : null,
right: isRTL ? mediaBounds.right + horizontalCameraDiff : null,
},
});
@ -558,7 +577,7 @@ const SmartLayout = (props) => {
height: mediaBounds.height,
top: mediaBounds.top,
left: mediaBounds.left,
right: isRTL ? (mediaBounds.right + horizontalCameraDiff) : null,
right: isRTL ? mediaBounds.right + horizontalCameraDiff : null,
},
});
};
@ -566,4 +585,4 @@ const SmartLayout = (props) => {
return null;
};
export default SmartLayout;
export default SmartLayout;

120
bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx
View File

@ -1,10 +1,10 @@
import { useEffect, useRef } from 'react';
import _ from 'lodash';
import {
import {
layoutDispatch,
layoutSelect,
layoutSelectInput,
layoutSelectOutput
layoutSelectOutput,
} from '/imports/ui/components/layout/context';
import DEFAULT_VALUES from '/imports/ui/components/layout/defaultValues';
import { INITIAL_INPUT_STATE } from '/imports/ui/components/layout/initState';
@ -48,8 +48,10 @@ const VideoFocusLayout = (props) => {
const prevDeviceType = usePrevious(deviceType);
const throttledCalculatesLayout = _.throttle(() => calculatesLayout(),
50, { trailing: true, leading: true });
const throttledCalculatesLayout = _.throttle(() => calculatesLayout(), 50, {
trailing: true,
leading: true,
});
useEffect(() => {
window.addEventListener('resize', () => {
@ -76,53 +78,15 @@ const VideoFocusLayout = (props) => {
}, [input, deviceType, isRTL, fontSize, fullscreen]);
const init = () => {
const { sidebarContentPanel } = sidebarContentInput;
if (isMobile) {
layoutContextDispatch({
type: ACTIONS.SET_LAYOUT_INPUT,
value: _.defaultsDeep(
{
sidebarNavigation: {
isOpen: false,
sidebarNavPanel: sidebarNavigationInput.sidebarNavPanel,
},
sidebarContent: {
isOpen: false,
sidebarContentPanel: sidebarContentInput.sidebarContentPanel,
},
SidebarContentHorizontalResizer: {
isOpen: false,
},
presentation: {
isOpen: presentationInput.isOpen,
slidesLength: presentationInput.slidesLength,
currentSlide: {
...presentationInput.currentSlide,
},
},
cameraDock: {
numCameras: cameraDockInput.numCameras,
},
externalVideo: {
hasExternalVideo: input.externalVideo.hasExternalVideo,
},
screenShare: {
hasScreenShare: input.screenShare.hasScreenShare,
width: input.screenShare.width,
height: input.screenShare.height,
},
},
INITIAL_INPUT_STATE,
),
});
} else {
const { sidebarContentPanel } = sidebarContentInput;
layoutContextDispatch({
type: ACTIONS.SET_LAYOUT_INPUT,
value: _.defaultsDeep(
{
sidebarNavigation: {
isOpen: input.sidebarNavigation.isOpen || sidebarContentPanel !== PANELS.NONE || false,
isOpen:
input.sidebarNavigation.isOpen || sidebarContentPanel !== PANELS.NONE || false,
},
sidebarContent: {
isOpen: sidebarContentPanel !== PANELS.NONE,
@ -150,7 +114,45 @@ const VideoFocusLayout = (props) => {
height: input.screenShare.height,
},
},
INITIAL_INPUT_STATE,
INITIAL_INPUT_STATE
),
});
} else {
layoutContextDispatch({
type: ACTIONS.SET_LAYOUT_INPUT,
value: _.defaultsDeep(
{
sidebarNavigation: {
isOpen:
input.sidebarNavigation.isOpen || sidebarContentPanel !== PANELS.NONE || false,
},
sidebarContent: {
isOpen: sidebarContentPanel !== PANELS.NONE,
sidebarContentPanel,
},
SidebarContentHorizontalResizer: {
isOpen: false,
},
presentation: {
isOpen: presentationInput.isOpen,
slidesLength: presentationInput.slidesLength,
currentSlide: {
...presentationInput.currentSlide,
},
},
cameraDock: {
numCameras: cameraDockInput.numCameras,
},
externalVideo: {
hasExternalVideo: input.externalVideo.hasExternalVideo,
},
screenShare: {
hasScreenShare: input.screenShare.hasScreenShare,
width: input.screenShare.width,
height: input.screenShare.height,
},
},
INITIAL_INPUT_STATE
),
});
}
@ -164,8 +166,9 @@ const VideoFocusLayout = (props) => {
const { hasScreenShare } = screenShareInput;
const { isPinned: isSharedNotesPinned } = sharedNotesInput;
const hasPresentation = isPresentationEnabled() && slidesLength !== 0
const isGeneralMediaOff = !hasPresentation && !hasExternalVideo && !hasScreenShare && !isSharedNotesPinned;
const hasPresentation = isPresentationEnabled() && slidesLength !== 0;
const isGeneralMediaOff =
!hasPresentation && !hasExternalVideo && !hasScreenShare && !isSharedNotesPinned;
let minHeight = 0;
let height = 0;
@ -249,13 +252,17 @@ const VideoFocusLayout = (props) => {
cameraDockBounds,
sidebarNavWidth,
sidebarContentWidth,
sidebarContentHeight,
sidebarContentHeight
) => {
const mediaBounds = {};
const { element: fullscreenElement } = fullscreen;
const sidebarSize = sidebarNavWidth + sidebarContentWidth;
if (fullscreenElement === 'Presentation' || fullscreenElement === 'Screenshare' || fullscreenElement === 'ExternalVideo') {
if (
fullscreenElement === 'Presentation' ||
fullscreenElement === 'Screenshare' ||
fullscreenElement === 'ExternalVideo'
) {
mediaBounds.width = windowWidth();
mediaBounds.height = windowHeight();
mediaBounds.top = 0;
@ -314,7 +321,8 @@ const VideoFocusLayout = (props) => {
const sidebarNavBounds = calculatesSidebarNavBounds();
const sidebarContentBounds = calculatesSidebarContentBounds(sidebarNavWidth.width);
const mediaAreaBounds = calculatesMediaAreaBounds(
sidebarNavWidth.width, sidebarContentWidth.width,
sidebarNavWidth.width,
sidebarContentWidth.width
);
const navbarBounds = calculatesNavbarBounds(mediaAreaBounds);
const actionbarBounds = calculatesActionbarBounds(mediaAreaBounds);
@ -326,7 +334,7 @@ const VideoFocusLayout = (props) => {
cameraDockBounds,
sidebarNavWidth.width,
sidebarContentWidth.width,
sidebarContentHeight.height,
sidebarContentHeight.height
);
const isBottomResizable = cameraDockInput.numCameras > 0;
@ -361,9 +369,9 @@ const VideoFocusLayout = (props) => {
layoutContextDispatch({
type: ACTIONS.SET_CAPTIONS_OUTPUT,
value: {
left: !isRTL ? (sidebarSize + captionsMargin) : null,
right: isRTL ? (sidebarSize + captionsMargin) : null,
maxWidth: mediaAreaBounds.width - (captionsMargin * 2),
left: !isRTL ? sidebarSize + captionsMargin : null,
right: isRTL ? sidebarSize + captionsMargin : null,
maxWidth: mediaAreaBounds.width - captionsMargin * 2,
},
});
@ -521,4 +529,4 @@ const VideoFocusLayout = (props) => {
return null;
};
export default VideoFocusLayout;
export default VideoFocusLayout;

2
bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx
View File

@ -264,7 +264,7 @@ class SettingsDropdown extends PureComponent {
icon: 'popout_window',
label: intl.formatMessage(intlMessages.openAppLabel),
onClick: () => mountModal(<MobileAppModal />),
}
},
);
}

26
bigbluebutton-html5/imports/ui/components/notes/component.jsx
View File

@ -65,6 +65,7 @@ const Notes = ({
shouldShowSharedNotesOnPresentationArea,
}) => {
const [shouldRenderNotes, setShouldRenderNotes] = useState(false);
const { isChrome } = browserInfo;
const isOnMediaArea = area === 'media';
const style = isOnMediaArea ? {
@ -73,9 +74,9 @@ const Notes = ({
} : {};
const isHidden = (isOnMediaArea && (style.width === 0 || style.height === 0))
|| (!isToSharedNotesBeShow
&& !sidebarContentToIgnoreDelay.includes(sidebarContent.sidebarContentPanel))
|| shouldShowSharedNotesOnPresentationArea;
|| (!isToSharedNotesBeShow
&& !sidebarContentToIgnoreDelay.includes(sidebarContent.sidebarContentPanel))
|| shouldShowSharedNotesOnPresentationArea;
if (isHidden && !isOnMediaArea) {
style.padding = 0;
@ -89,7 +90,7 @@ const Notes = ({
timoutRef = setTimeout(() => {
setShouldRenderNotes(false);
}, (sidebarContentToIgnoreDelay.includes(sidebarContent.sidebarContentPanel)
|| shouldShowSharedNotesOnPresentationArea)
|| shouldShowSharedNotesOnPresentationArea)
? 0 : DELAY_UNMOUNT_SHARED_NOTES);
}
return () => clearTimeout(timoutRef);
@ -115,7 +116,6 @@ const Notes = ({
type: ACTIONS.SET_SIDEBAR_CONTENT_IS_OPEN,
value: false,
});
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_PANEL,
value: PANELS.NONE,
@ -141,18 +141,14 @@ const Notes = ({
value: Session.get('presentationLastState'),
});
};
}
if(shouldShowSharedNotesOnPresentationArea) {
} else {
if (shouldShowSharedNotesOnPresentationArea) {
layoutContextDispatch({
type: ACTIONS.SET_NOTES_IS_PINNED,
value: true,
});
layoutContextDispatch({
type: ACTIONS.SET_PRESENTATION_IS_OPEN,
value: true,
});
}
return null;
}
}, []);
const renderHeaderOnMedia = () => {
@ -172,7 +168,11 @@ const Notes = ({
};
return (shouldRenderNotes || shouldShowSharedNotesOnPresentationArea) && (
<Styled.Notes data-test="notes" isChrome={isChrome} style={style}>
<Styled.Notes
data-test="notes"
isChrome={isChrome}
style={style}
>
{!isOnMediaArea ? (
<Header
leftButtonProps={{

3
bigbluebutton-html5/imports/ui/components/notes/styles.js
View File

@ -21,6 +21,9 @@ const Notes = styled.div`
@media ${smallOnly} {
transform: none !important;
&.no-padding {
padding: 0;
}
}
`;

19
bigbluebutton-html5/imports/ui/components/sidebar-content/component.jsx
View File

@ -131,13 +131,13 @@ const SidebarContent = (props) => {
}}
>
{sidebarContentPanel === PANELS.CHAT
&& (
<ErrorBoundary
Fallback={FallbackView}
>
<ChatContainer width={width} />
</ErrorBoundary>
)}
&& (
<ErrorBoundary
Fallback={FallbackView}
>
<ChatContainer width={width} />
</ErrorBoundary>
)}
{!isSharedNotesPinned && (
<NotesContainer
isToSharedNotesBeShow={sidebarContentPanel === PANELS.SHARED_NOTES}
@ -147,7 +147,10 @@ const SidebarContent = (props) => {
{sidebarContentPanel === PANELS.BREAKOUT && <BreakoutRoomContainer />}
{sidebarContentPanel === PANELS.WAITING_USERS && <WaitingUsersPanel />}
{sidebarContentPanel === PANELS.POLL && (
<Styled.Poll style={{ minWidth, top: '0', display: pollDisplay }} id="pollPanel">
<Styled.Poll
style={{ minWidth, top: '0', display: pollDisplay }}
id="pollPanel"
>
<PollContainer smallSidebar={smallSidebar} amIPresenter={amIPresenter} />
</Styled.Poll>
)}

3
bigbluebutton-html5/imports/ui/components/sidebar-content/styles.js
View File

@ -27,6 +27,9 @@ const Poll = styled.div`
height: auto;
top: ${navbarHeight};
overflow: auto;
&.no-padding {
padding: 0;
}
}
@media ${mediumUp} {