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

calculatesCameraDockBounds refactor - presentationFocus, smart and videoFocus layouts

Browse Source
This commit is contained in:
Ramon Souza 2021-09-24 14:16:37 -03:00
parent 30623b0c4f
commit b22c12aef7
3 changed files with 113 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -168,73 +168,55 @@ const PresentationFocusLayout = (props) => {
sidebarContentWidth,
sidebarContentHeight,
) => {
const { isOpen } = presentationInput;
const cameraDockBounds = {};
const { baseCameraDockBounds } = props;
const sidebarSize = sidebarNavWidth + sidebarContentWidth;
if (cameraDockInput.numCameras > 0) {
if (!isOpen) {
cameraDockBounds.width = mediaAreaBounds.width;
cameraDockBounds.maxWidth = mediaAreaBounds.width;
cameraDockBounds.height = mediaAreaBounds.height;
cameraDockBounds.maxHeight = mediaAreaBounds.height;
cameraDockBounds.top = DEFAULT_VALUES.navBarHeight;
cameraDockBounds.left = !isRTL ? mediaAreaBounds.left : 0;
cameraDockBounds.right = isRTL ? sidebarSize : null;
} else {
let cameraDockHeight = 0;
const baseBounds = baseCameraDockBounds(mediaAreaBounds, sidebarSize);
if (fullscreen.group === 'webcams') {
cameraDockBounds.width = windowWidth();
cameraDockBounds.minWidth = windowWidth();
cameraDockBounds.maxWidth = windowWidth();
cameraDockBounds.height = windowHeight();
cameraDockBounds.minHeight = windowHeight();
cameraDockBounds.maxHeight = windowHeight();
cameraDockBounds.top = 0;
cameraDockBounds.left = 0;
cameraDockBounds.right = 0;
cameraDockBounds.zIndex = 99;
return cameraDockBounds;
}
// do not proceed if using values from LayoutEngine
if (Object.keys(baseBounds).length > 0) {
return baseBounds;
}
if (deviceType === DEVICE_TYPE.MOBILE) {
cameraDockBounds.top = mediaAreaBounds.top + mediaBounds.height;
cameraDockBounds.left = 0;
cameraDockBounds.right = 0;
cameraDockBounds.minWidth = mediaAreaBounds.width;
cameraDockBounds.width = mediaAreaBounds.width;
cameraDockBounds.maxWidth = mediaAreaBounds.width;
cameraDockBounds.minHeight = DEFAULT_VALUES.cameraDockMinHeight;
cameraDockBounds.height = mediaAreaBounds.height - mediaBounds.height;
cameraDockBounds.maxHeight = mediaAreaBounds.height - mediaBounds.height;
} else {
if (cameraDockInput.height === 0) {
cameraDockHeight = min(
max((windowHeight() - sidebarContentHeight), DEFAULT_VALUES.cameraDockMinHeight),
(windowHeight() - DEFAULT_VALUES.cameraDockMinHeight),
);
} else {
cameraDockHeight = min(
max(cameraDockInput.height, DEFAULT_VALUES.cameraDockMinHeight),
(windowHeight() - DEFAULT_VALUES.cameraDockMinHeight),
);
}
cameraDockBounds.top = windowHeight() - cameraDockHeight;
cameraDockBounds.left = !isRTL ? sidebarNavWidth : 0;
cameraDockBounds.right = isRTL ? sidebarNavWidth : 0;
cameraDockBounds.minWidth = sidebarContentWidth;
cameraDockBounds.width = sidebarContentWidth;
cameraDockBounds.maxWidth = sidebarContentWidth;
cameraDockBounds.minHeight = DEFAULT_VALUES.cameraDockMinHeight;
cameraDockBounds.height = cameraDockHeight;
cameraDockBounds.maxHeight = windowHeight() - sidebarContentHeight;
cameraDockBounds.zIndex = 1;
}
}
const { cameraDockMinHeight } = DEFAULT_VALUES;
const cameraDockBounds = {};
let cameraDockHeight = 0;
const isMobile = deviceType === DEVICE_TYPE.MOBILE;
if (isMobile) {
cameraDockBounds.top = mediaAreaBounds.top + mediaBounds.height;
cameraDockBounds.left = 0;
cameraDockBounds.right = 0;
cameraDockBounds.minWidth = mediaAreaBounds.width;
cameraDockBounds.width = mediaAreaBounds.width;
cameraDockBounds.maxWidth = mediaAreaBounds.width;
cameraDockBounds.minHeight = cameraDockMinHeight;
cameraDockBounds.height = mediaAreaBounds.height - mediaBounds.height;
cameraDockBounds.maxHeight = mediaAreaBounds.height - mediaBounds.height;
} else {
cameraDockBounds.width = 0;
cameraDockBounds.height = 0;
if (cameraDockInput.height === 0) {
cameraDockHeight = min(
max((windowHeight() - sidebarContentHeight), cameraDockMinHeight),
(windowHeight() - cameraDockMinHeight),
);
} else {
cameraDockHeight = min(
max(cameraDockInput.height, cameraDockMinHeight),
(windowHeight() - cameraDockMinHeight),
);
}
cameraDockBounds.top = windowHeight() - cameraDockHeight;
cameraDockBounds.left = !isRTL ? sidebarNavWidth : 0;
cameraDockBounds.right = isRTL ? sidebarNavWidth : 0;
cameraDockBounds.minWidth = sidebarContentWidth;
cameraDockBounds.width = sidebarContentWidth;
cameraDockBounds.maxWidth = sidebarContentWidth;
cameraDockBounds.minHeight = cameraDockMinHeight;
cameraDockBounds.height = cameraDockHeight;
cameraDockBounds.maxHeight = windowHeight() - sidebarContentHeight;
cameraDockBounds.zIndex = 1;
}
return cameraDockBounds;
};

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

@ -139,69 +139,57 @@ const SmartLayout = (props) => {
};
const calculatesCameraDockBounds = (mediaAreaBounds, mediaBounds, sidebarSize) => {
const { isOpen } = presentationInput;
const { baseCameraDockBounds } = props;
const baseBounds = baseCameraDockBounds(mediaAreaBounds, sidebarSize);
// do not proceed if using values from LayoutEngine
if (Object.keys(baseBounds).length > 0) {
baseBounds.isCameraHorizontal = false;
return baseBounds;
}
const { camerasMargin, presentationToolbarMinWidth } = DEFAULT_VALUES;
const cameraDockBounds = {};
cameraDockBounds.isCameraHorizontal = false;
const mediaBoundsWidth = (mediaBounds.width > presentationToolbarMinWidth
&& deviceType !== DEVICE_TYPE.MOBILE)
const isMobile = deviceType === DEVICE_TYPE.MOBILE;
const mediaBoundsWidth = (mediaBounds.width > presentationToolbarMinWidth && !isMobile)
? mediaBounds.width
: presentationToolbarMinWidth;
if (cameraDockInput.numCameras > 0) {
cameraDockBounds.top = mediaAreaBounds.top;
cameraDockBounds.left = mediaAreaBounds.left;
cameraDockBounds.right = isRTL ? sidebarSize + (camerasMargin * 2) : null;
cameraDockBounds.zIndex = 1;
cameraDockBounds.top = mediaAreaBounds.top;
cameraDockBounds.left = mediaAreaBounds.left;
cameraDockBounds.right = isRTL ? sidebarSize + (camerasMargin * 2) : null;
cameraDockBounds.zIndex = 1;
if (!isOpen) {
cameraDockBounds.width = mediaAreaBounds.width;
cameraDockBounds.maxWidth = mediaAreaBounds.width;
cameraDockBounds.height = mediaAreaBounds.height;
cameraDockBounds.maxHeight = mediaAreaBounds.height;
cameraDockBounds.position = CAMERADOCK_POSITION.CONTENT_TOP;
} else if (mediaBounds.width < mediaAreaBounds.width) {
cameraDockBounds.width = mediaAreaBounds.width - mediaBoundsWidth;
cameraDockBounds.maxWidth = mediaAreaBounds.width * 0.8;
cameraDockBounds.height = mediaAreaBounds.height;
cameraDockBounds.maxHeight = mediaAreaBounds.height;
cameraDockBounds.left += camerasMargin;
cameraDockBounds.width -= (camerasMargin * 2);
cameraDockBounds.isCameraHorizontal = true;
cameraDockBounds.position = CAMERADOCK_POSITION.CONTENT_LEFT;
// button size in vertical position
cameraDockBounds.height -= 20;
} else {
cameraDockBounds.width = mediaAreaBounds.width;
cameraDockBounds.maxWidth = mediaAreaBounds.width;
cameraDockBounds.height = mediaAreaBounds.height - mediaBounds.height;
cameraDockBounds.maxHeight = mediaAreaBounds.height * 0.8;
cameraDockBounds.top += camerasMargin;
cameraDockBounds.height -= (camerasMargin * 2);
cameraDockBounds.position = CAMERADOCK_POSITION.CONTENT_TOP;
}
cameraDockBounds.minWidth = cameraDockBounds.width;
cameraDockBounds.minHeight = cameraDockBounds.height;
if (fullscreen.group === 'webcams') {
cameraDockBounds.width = windowWidth();
cameraDockBounds.minWidth = windowWidth();
cameraDockBounds.maxWidth = windowWidth();
cameraDockBounds.height = windowHeight();
cameraDockBounds.minHeight = windowHeight();
cameraDockBounds.maxHeight = windowHeight();
cameraDockBounds.top = 0;
cameraDockBounds.left = 0;
cameraDockBounds.right = 0;
cameraDockBounds.zIndex = 99;
}
if (mediaBounds.width < mediaAreaBounds.width) {
cameraDockBounds.width = mediaAreaBounds.width - mediaBoundsWidth;
cameraDockBounds.maxWidth = mediaAreaBounds.width * 0.8;
cameraDockBounds.height = mediaAreaBounds.height;
cameraDockBounds.maxHeight = mediaAreaBounds.height;
cameraDockBounds.left += camerasMargin;
cameraDockBounds.width -= (camerasMargin * 2);
cameraDockBounds.isCameraHorizontal = true;
cameraDockBounds.position = CAMERADOCK_POSITION.CONTENT_LEFT;
// button size in vertical position
cameraDockBounds.height -= 20;
} else {
cameraDockBounds.width = 0;
cameraDockBounds.height = 0;
cameraDockBounds.width = mediaAreaBounds.width;
cameraDockBounds.maxWidth = mediaAreaBounds.width;
cameraDockBounds.height = mediaAreaBounds.height - mediaBounds.height;
cameraDockBounds.maxHeight = mediaAreaBounds.height * 0.8;
cameraDockBounds.top += camerasMargin;
cameraDockBounds.height -= (camerasMargin * 2);
cameraDockBounds.position = CAMERADOCK_POSITION.CONTENT_TOP;
}
cameraDockBounds.minWidth = cameraDockBounds.width;
cameraDockBounds.minHeight = cameraDockBounds.height;
return cameraDockBounds;
};

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

@ -177,60 +177,39 @@ const VideoFocusLayout = (props) => {
};
const calculatesCameraDockBounds = (mediaAreaBounds, sidebarSize) => {
const cameraDockBounds = {};
const { isOpen } = presentationInput;
const { numCameras } = cameraDockInput;
const { baseCameraDockBounds } = props;
if (numCameras > 0) {
if (!isOpen) {
cameraDockBounds.width = mediaAreaBounds.width;
cameraDockBounds.maxWidth = mediaAreaBounds.width;
cameraDockBounds.height = mediaAreaBounds.height;
cameraDockBounds.maxHeight = mediaAreaBounds.height;
cameraDockBounds.top = DEFAULT_VALUES.navBarHeight;
cameraDockBounds.left = !isRTL ? mediaAreaBounds.left : 0;
cameraDockBounds.right = isRTL ? sidebarSize : null;
} else {
if (deviceType === DEVICE_TYPE.MOBILE) {
cameraDockBounds.minHeight = mediaAreaBounds.height * 0.7;
cameraDockBounds.height = mediaAreaBounds.height * 0.7;
cameraDockBounds.maxHeight = mediaAreaBounds.height * 0.7;
} else {
cameraDockBounds.minHeight = mediaAreaBounds.height;
cameraDockBounds.height = mediaAreaBounds.height;
cameraDockBounds.maxHeight = mediaAreaBounds.height;
}
const baseBounds = baseCameraDockBounds(mediaAreaBounds, sidebarSize);
cameraDockBounds.top = DEFAULT_VALUES.navBarHeight;
cameraDockBounds.left = !isRTL ? mediaAreaBounds.left : null;
cameraDockBounds.right = isRTL ? sidebarSize : null;
cameraDockBounds.minWidth = mediaAreaBounds.width;
cameraDockBounds.width = mediaAreaBounds.width;
cameraDockBounds.maxWidth = mediaAreaBounds.width;
cameraDockBounds.zIndex = 1;
if (fullscreen.group === 'webcams') {
cameraDockBounds.width = windowWidth();
cameraDockBounds.minWidth = windowWidth();
cameraDockBounds.maxWidth = windowWidth();
cameraDockBounds.height = windowHeight();
cameraDockBounds.minHeight = windowHeight();
cameraDockBounds.maxHeight = windowHeight();
cameraDockBounds.top = 0;
cameraDockBounds.left = 0;
cameraDockBounds.zIndex = 99;
}
}
return cameraDockBounds;
// do not proceed if using values from LayoutEngine
if (Object.keys(baseBounds).length > 0) {
return baseBounds;
}
cameraDockBounds.top = 0;
cameraDockBounds.left = 0;
cameraDockBounds.minWidth = 0;
cameraDockBounds.height = 0;
cameraDockBounds.width = 0;
cameraDockBounds.maxWidth = 0;
cameraDockBounds.zIndex = 0;
const { navBarHeight } = DEFAULT_VALUES;
const cameraDockBounds = {};
const isMobile = deviceType === DEVICE_TYPE.MOBILE;
if (isMobile) {
cameraDockBounds.minHeight = mediaAreaBounds.height * 0.7;
cameraDockBounds.height = mediaAreaBounds.height * 0.7;
cameraDockBounds.maxHeight = mediaAreaBounds.height * 0.7;
} else {
cameraDockBounds.minHeight = mediaAreaBounds.height;
cameraDockBounds.height = mediaAreaBounds.height;
cameraDockBounds.maxHeight = mediaAreaBounds.height;
}
cameraDockBounds.top = navBarHeight;
cameraDockBounds.left = !isRTL ? mediaAreaBounds.left : null;
cameraDockBounds.right = isRTL ? sidebarSize : null;
cameraDockBounds.minWidth = mediaAreaBounds.width;
cameraDockBounds.width = mediaAreaBounds.width;
cameraDockBounds.maxWidth = mediaAreaBounds.width;
cameraDockBounds.zIndex = 1;
return cameraDockBounds;
};