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

Merge pull request #12873 from vitormateusalmeida/layoutManagerNew

Browse Source 
Add resize in sidebar from bottom in presentation focus layout
This commit is contained in:
Anton Georgiev 2021-07-30 15:17:36 -04:00 committed by GitHub
commit d01e4e657b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 87 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -297,21 +297,41 @@ class PresentationFocusLayout extends Component {
};
}
calculatesSidebarContentHeight(cameraDockHeight) {
calculatesSidebarContentHeight() {
const { newLayoutContextState } = this.props;
const { deviceType, input } = newLayoutContextState;
const { navBarHeight } = DEFAULT_VALUES;
let sidebarContentHeight = 0;
const {
navBarHeight,
sidebarContentMinHeight,
} = DEFAULT_VALUES;
let height = 0;
let minHeight = 0;
let maxHeight = 0;
if (input.sidebarContent.isOpen) {
if (deviceType === DEVICE_TYPE.MOBILE) {
sidebarContentHeight = this.mainHeight() - navBarHeight - this.bannerAreaHeight();
height = this.mainHeight() - navBarHeight - this.bannerAreaHeight();
minHeight = height;
maxHeight = height;
} else if (input.cameraDock.numCameras > 0) {
sidebarContentHeight = this.mainHeight() - cameraDockHeight - this.bannerAreaHeight();
if (input.sidebarContent.height === 0) {
height = (this.mainHeight() * 0.75) - this.bannerAreaHeight();
} else {
height = min(max(input.sidebarContent.height, sidebarContentMinHeight),
this.mainHeight());
}
minHeight = this.mainHeight() * 0.25 - this.bannerAreaHeight();
maxHeight = this.mainHeight() * 0.75 - this.bannerAreaHeight();
} else {
sidebarContentHeight = this.mainHeight() - this.bannerAreaHeight();
height = this.mainHeight() - this.bannerAreaHeight();
minHeight = height;
maxHeight = height;
}
}
return sidebarContentHeight;
return {
height,
minHeight,
maxHeight,
};
}
calculatesSidebarContentBounds(sidebarNavWidth) {
@ -325,11 +345,18 @@ class PresentationFocusLayout extends Component {
if (deviceType === DEVICE_TYPE.MOBILE) top = navBarHeight + this.bannerAreaHeight();
let left = deviceType === DEVICE_TYPE.MOBILE ? 0 : sidebarNavWidth;
let right = deviceType === DEVICE_TYPE.MOBILE ? 0 : sidebarNavWidth;
left = !isRTL ? left : null;
right = isRTL ? right : null;
const zIndex = deviceType === DEVICE_TYPE.MOBILE ? 11 : 1;
return {
top,
left: !isRTL ? (deviceType === DEVICE_TYPE.MOBILE ? 0 : sidebarNavWidth) : null,
right: isRTL ? (deviceType === DEVICE_TYPE.MOBILE ? 0 : sidebarNavWidth) : null,
zIndex: deviceType === DEVICE_TYPE.MOBILE ? 11 : 1,
left,
right,
zIndex,
};
}
@ -365,9 +392,12 @@ class PresentationFocusLayout extends Component {
mediaAreaBounds,
sidebarNavWidth,
sidebarContentWidth,
sidebarContentHeight,
) {
const { newLayoutContextState } = this.props;
const { deviceType, input, fullscreen, isRTL } = newLayoutContextState;
const {
deviceType, input, fullscreen, isRTL,
} = newLayoutContextState;
const cameraDockBounds = {};
if (input.cameraDock.numCameras > 0) {
@ -400,7 +430,7 @@ class PresentationFocusLayout extends Component {
} else {
if (input.cameraDock.height === 0) {
cameraDockHeight = min(
max((this.mainHeight() * 0.2), DEFAULT_VALUES.cameraDockMinHeight),
max((this.mainHeight() - sidebarContentHeight), DEFAULT_VALUES.cameraDockMinHeight),
(this.mainHeight() - DEFAULT_VALUES.cameraDockMinHeight),
);
} else {
@ -417,7 +447,7 @@ class PresentationFocusLayout extends Component {
cameraDockBounds.maxWidth = sidebarContentWidth;
cameraDockBounds.minHeight = DEFAULT_VALUES.cameraDockMinHeight;
cameraDockBounds.height = cameraDockHeight;
cameraDockBounds.maxHeight = this.mainHeight() * 0.8;
cameraDockBounds.maxHeight = this.mainHeight() - sidebarContentHeight;
cameraDockBounds.zIndex = 1;
}
} else {
@ -429,7 +459,9 @@ class PresentationFocusLayout extends Component {
calculatesMediaBounds(mediaAreaBounds, sidebarSize) {
const { newLayoutContextState } = this.props;
const { deviceType, input, fullscreen, isRTL } = newLayoutContextState;
const {
deviceType, input, fullscreen, isRTL,
} = newLayoutContextState;
const mediaBounds = {};
const { element: fullscreenElement } = fullscreen;
@ -477,10 +509,14 @@ class PresentationFocusLayout extends Component {
const actionbarBounds = this.calculatesActionbarBounds(mediaAreaBounds);
const sidebarSize = sidebarContentWidth.width + sidebarNavWidth.width;
const mediaBounds = this.calculatesMediaBounds(mediaAreaBounds, sidebarSize);
const sidebarContentHeight = this.calculatesSidebarContentHeight();
const cameraDockBounds = this.calculatesCameraDockBounds(
mediaBounds, mediaAreaBounds, sidebarNavWidth.width, sidebarContentWidth.width,
mediaBounds,
mediaAreaBounds,
sidebarNavWidth.width,
sidebarContentWidth.width,
sidebarContentHeight.height,
);
const sidebarContentHeight = this.calculatesSidebarContentHeight(cameraDockBounds.height);
newLayoutContextDispatch({
type: ACTIONS.SET_NAVBAR_OUTPUT,
@ -545,7 +581,9 @@ class PresentationFocusLayout extends Component {
minWidth: sidebarContentWidth.minWidth,
width: sidebarContentWidth.width,
maxWidth: sidebarContentWidth.maxWidth,
height: sidebarContentHeight,
minHeight: sidebarContentHeight.minHeight,
height: sidebarContentHeight.height,
maxHeight: sidebarContentHeight.maxHeight,
top: sidebarContentBounds.top,
left: sidebarContentBounds.left,
right: sidebarContentBounds.right,
@ -562,7 +600,7 @@ class PresentationFocusLayout extends Component {
value: {
top: false,
right: !isRTL,
bottom: false,
bottom: input.cameraDock.numCameras > 0,
left: isRTL,
},
});

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

@ -308,38 +308,34 @@ class VideoFocusLayout extends Component {
calculatesSidebarContentHeight() {
const { newLayoutContextState } = this.props;
const { deviceType, input, output } = newLayoutContextState;
const { sidebarContentMinHeight } = DEFAULT_VALUES;
const { sidebarContent: inputContent, presentation } = input;
const { sidebarContent: outputContent } = output;
const { isOpen } = presentation;
let minHeight = 0;
let height = 0;
let maxHeight = 0;
if (inputContent.isOpen) {
if (deviceType === DEVICE_TYPE.MOBILE) {
height = this.mainHeight() - DEFAULT_VALUES.navBarHeight - this.bannerAreaHeight();
minHeight = this.mainHeight() - this.bannerAreaHeight();
maxHeight = this.mainHeight() - this.bannerAreaHeight();
} else {
if (input.cameraDock.numCameras > 0 && isOpen) {
if (inputContent.height > 0 && inputContent.height < this.mainHeight()) {
height = inputContent.height - this.bannerAreaHeight();
maxHeight = this.mainHeight() - this.bannerAreaHeight();
} else {
const { size: slideSize } = input.presentation.currentSlide;
let calculatedHeight = (this.mainHeight() - this.bannerAreaHeight()) * 0.3;
if (slideSize.height > 0 && slideSize.width > 0) {
calculatedHeight = (slideSize.height * outputContent.width) / slideSize.width;
}
height = this.mainHeight() - calculatedHeight - this.bannerAreaHeight();
maxHeight = height;
}
minHeight = height;
maxHeight = height;
} else if (input.cameraDock.numCameras > 0 && presentation.isOpen) {
if (inputContent.height > 0 && inputContent.height < this.mainHeight()) {
height = inputContent.height - this.bannerAreaHeight();
} else {
height = this.mainHeight() - this.bannerAreaHeight();
maxHeight = height;
const { size: slideSize } = input.presentation.currentSlide;
let calculatedHeight = (this.mainHeight() - this.bannerAreaHeight()) * 0.3;
if (slideSize.height > 0 && slideSize.width > 0) {
calculatedHeight = (slideSize.height * outputContent.width) / slideSize.width;
}
height = this.mainHeight() - calculatedHeight - this.bannerAreaHeight();
}
minHeight = sidebarContentMinHeight;
maxHeight = this.mainHeight() * 0.75 - this.bannerAreaHeight();
minHeight = this.mainHeight() * 0.25 - this.bannerAreaHeight();
} else {
height = this.mainHeight() - this.bannerAreaHeight();
maxHeight = height;
minHeight = height;
}
}
return {
@ -360,10 +356,15 @@ class VideoFocusLayout extends Component {
if (deviceType === DEVICE_TYPE.MOBILE) top = navBarHeight + this.bannerAreaHeight();
let left = deviceType === DEVICE_TYPE.MOBILE ? 0 : sidebarNavWidth;
let right = deviceType === DEVICE_TYPE.MOBILE ? 0 : sidebarNavWidth;
left = !isRTL ? left : null;
right = isRTL ? right : null;
return {
top,
left: !isRTL ? (deviceType === DEVICE_TYPE.MOBILE ? 0 : sidebarNavWidth) : null,
right: isRTL ? (deviceType === DEVICE_TYPE.MOBILE ? 0 : sidebarNavWidth) : null,
left,
right,
zIndex: deviceType === DEVICE_TYPE.MOBILE ? 11 : 1,
};
}
@ -397,7 +398,9 @@ class VideoFocusLayout extends Component {
calculatesCameraDockBounds(mediaAreaBounds, sidebarSize) {
const { newLayoutContextState } = this.props;
const { deviceType, input, fullscreen, isRTL } = newLayoutContextState;
const {
deviceType, input, fullscreen, isRTL,
} = newLayoutContextState;
const { cameraDock } = input;
const { numCameras } = cameraDock;
@ -455,7 +458,9 @@ class VideoFocusLayout extends Component {
sidebarContentHeight,
) {
const { newLayoutContextState } = this.props;
const { deviceType, input, fullscreen, isRTL } = newLayoutContextState;
const {
deviceType, input, fullscreen, isRTL,
} = newLayoutContextState;
const mediaBounds = {};
const { element: fullscreenElement } = fullscreen;
const sidebarSize = sidebarNavWidth + sidebarContentWidth;