c6391b3986
* [plugin-sdk-generic-component] - generic component extensible area and ui command layout set * [plugin-generic-component] - update sdk * [plugin-generic-component] - fix lint errors * [plugin-generic-component] - fix problem warned by CI tests
447 lines
13 KiB
JavaScript
447 lines
13 KiB
JavaScript
import { useEffect, useRef } from 'react';
|
|
import { throttle } from '/imports/utils/throttle';
|
|
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 { defaultsDeep } from '/imports/utils/array-utils';
|
|
|
|
const windowWidth = () => window.document.documentElement.clientWidth;
|
|
const windowHeight = () => window.document.documentElement.clientHeight;
|
|
|
|
const ParticipantsAndChatOnlyLayout = (props) => {
|
|
const { bannerAreaHeight, isMobile } = props;
|
|
|
|
function usePrevious(value) {
|
|
const ref = useRef();
|
|
useEffect(() => {
|
|
ref.current = value;
|
|
});
|
|
return ref.current;
|
|
}
|
|
|
|
const input = layoutSelect((i) => i.input);
|
|
const deviceType = layoutSelect((i) => i.deviceType);
|
|
const isRTL = layoutSelect((i) => i.isRTL);
|
|
const fullscreen = layoutSelect((i) => i.fullscreen);
|
|
const fontSize = layoutSelect((i) => i.fontSize);
|
|
const currentPanelType = layoutSelect((i) => i.currentPanelType);
|
|
|
|
const presentationInput = layoutSelectInput((i) => i.presentation);
|
|
|
|
const sidebarNavigationInput = layoutSelectInput((i) => i.sidebarNavigation);
|
|
const sidebarContentInput = layoutSelectInput((i) => i.sidebarContent);
|
|
const cameraDockInput = layoutSelectInput((i) => i.cameraDock);
|
|
const actionbarInput = layoutSelectInput((i) => i.actionBar);
|
|
const navbarInput = layoutSelectInput((i) => i.navBar);
|
|
const layoutContextDispatch = layoutDispatch();
|
|
|
|
const prevDeviceType = usePrevious(deviceType);
|
|
|
|
const calculatesSidebarNavHeight = (navbarHeight, actionbarHeight) => {
|
|
let sidebarNavHeight = 0;
|
|
if (isMobile) {
|
|
sidebarNavHeight = windowHeight() - navbarHeight - bannerAreaHeight() - actionbarHeight;
|
|
} else {
|
|
sidebarNavHeight = windowHeight() - bannerAreaHeight() - navbarHeight - actionbarHeight;
|
|
}
|
|
return sidebarNavHeight;
|
|
};
|
|
|
|
const calculatesSidebarContentHeight = (navbarHeight, actionbarHeight) => {
|
|
let height = 0;
|
|
let minHeight = 0;
|
|
let maxHeight = 0;
|
|
height = windowHeight() - bannerAreaHeight() - navbarHeight - actionbarHeight;
|
|
minHeight = height;
|
|
maxHeight = height;
|
|
return {
|
|
height,
|
|
minHeight,
|
|
maxHeight,
|
|
};
|
|
};
|
|
|
|
const calculatesSidebarContentWidth = (sidebarNavWidth) => {
|
|
let minWidth = 0;
|
|
let width = 0;
|
|
let maxWidth = 0;
|
|
|
|
if (isMobile) {
|
|
minWidth = windowWidth();
|
|
width = windowWidth();
|
|
maxWidth = windowWidth();
|
|
} else {
|
|
minWidth = windowWidth() - sidebarNavWidth;
|
|
width = windowWidth() - sidebarNavWidth;
|
|
maxWidth = windowWidth() - sidebarNavWidth;
|
|
}
|
|
return {
|
|
minWidth,
|
|
width,
|
|
maxWidth,
|
|
};
|
|
};
|
|
|
|
const calculatesCameraDockBounds = () => {
|
|
const cameraDockBounds = {};
|
|
|
|
cameraDockBounds.top = 0;
|
|
cameraDockBounds.left = 0;
|
|
cameraDockBounds.right = 0;
|
|
cameraDockBounds.minWidth = 0;
|
|
cameraDockBounds.width = 0;
|
|
cameraDockBounds.maxWidth = 0;
|
|
cameraDockBounds.minHeight = 0;
|
|
cameraDockBounds.height = 0;
|
|
cameraDockBounds.maxHeight = 0;
|
|
|
|
return cameraDockBounds;
|
|
};
|
|
|
|
const calculatesMediaBounds = (mediaAreaBounds, sidebarSize) => {
|
|
const mediaBounds = {};
|
|
const { element: fullscreenElement } = fullscreen;
|
|
|
|
if (
|
|
fullscreenElement === 'Presentation'
|
|
|| fullscreenElement === 'Screenshare'
|
|
|| fullscreenElement === 'ExternalVideo'
|
|
|| fullscreenElement === 'GenericComponent'
|
|
) {
|
|
mediaBounds.width = windowWidth();
|
|
mediaBounds.height = windowHeight();
|
|
mediaBounds.top = 0;
|
|
mediaBounds.left = !isRTL ? 0 : null;
|
|
mediaBounds.right = isRTL ? 0 : null;
|
|
mediaBounds.zIndex = 99;
|
|
return mediaBounds;
|
|
}
|
|
|
|
if (isMobile && cameraDockInput.numCameras > 0) {
|
|
mediaBounds.height = mediaAreaBounds.height * 0.7;
|
|
} else {
|
|
mediaBounds.height = mediaAreaBounds.height;
|
|
}
|
|
mediaBounds.width = mediaAreaBounds.width;
|
|
mediaBounds.top = DEFAULT_VALUES.navBarHeight + bannerAreaHeight();
|
|
mediaBounds.left = !isRTL ? mediaAreaBounds.left : null;
|
|
mediaBounds.right = isRTL ? sidebarSize : null;
|
|
mediaBounds.zIndex = 1;
|
|
|
|
return mediaBounds;
|
|
};
|
|
|
|
const calculatesLayout = () => {
|
|
const {
|
|
calculatesNavbarBounds,
|
|
calculatesActionbarBounds,
|
|
calculatesSidebarNavWidth,
|
|
calculatesSidebarNavBounds,
|
|
calculatesSidebarContentBounds,
|
|
isTablet,
|
|
} = props;
|
|
const { captionsMargin } = DEFAULT_VALUES;
|
|
|
|
const sidebarNavWidth = calculatesSidebarNavWidth();
|
|
const sidebarContentWidth = calculatesSidebarContentWidth(sidebarNavWidth.width);
|
|
const sidebarNavBounds = calculatesSidebarNavBounds();
|
|
const sidebarContentBounds = calculatesSidebarContentBounds(sidebarNavWidth.width);
|
|
const mediaAreaBounds = {
|
|
width: sidebarNavWidth.width + sidebarContentWidth.width,
|
|
left: 0,
|
|
};
|
|
const navbarBounds = calculatesNavbarBounds(mediaAreaBounds);
|
|
const actionbarBounds = calculatesActionbarBounds(mediaAreaBounds);
|
|
const sidebarNavHeight = calculatesSidebarNavHeight(navbarBounds.height,
|
|
actionbarBounds.height);
|
|
const sidebarSize = sidebarContentWidth.width + sidebarNavWidth.width;
|
|
const mediaBounds = calculatesMediaBounds(mediaAreaBounds, sidebarSize);
|
|
const sidebarContentHeight = calculatesSidebarContentHeight(navbarBounds.height,
|
|
actionbarBounds.height);
|
|
const cameraDockBounds = calculatesCameraDockBounds();
|
|
const { isOpen } = presentationInput;
|
|
|
|
layoutContextDispatch({
|
|
type: ACTIONS.SET_NAVBAR_OUTPUT,
|
|
value: {
|
|
display: navbarInput.hasNavBar,
|
|
width: navbarBounds.width,
|
|
height: navbarBounds.height,
|
|
top: navbarBounds.top,
|
|
left: navbarBounds.left,
|
|
tabOrder: DEFAULT_VALUES.navBarTabOrder,
|
|
zIndex: navbarBounds.zIndex,
|
|
},
|
|
});
|
|
|
|
layoutContextDispatch({
|
|
type: ACTIONS.SET_ACTIONBAR_OUTPUT,
|
|
value: {
|
|
display: actionbarInput.hasActionBar,
|
|
width: actionbarBounds.width,
|
|
height: actionbarBounds.height,
|
|
innerHeight: actionbarBounds.innerHeight,
|
|
top: actionbarBounds.top,
|
|
left: actionbarBounds.left,
|
|
padding: actionbarBounds.padding,
|
|
tabOrder: DEFAULT_VALUES.actionBarTabOrder,
|
|
zIndex: actionbarBounds.zIndex,
|
|
},
|
|
});
|
|
|
|
layoutContextDispatch({
|
|
type: ACTIONS.SET_CAPTIONS_OUTPUT,
|
|
value: {
|
|
left: !isRTL ? sidebarSize + captionsMargin : null,
|
|
right: isRTL ? sidebarSize + captionsMargin : null,
|
|
maxWidth: mediaAreaBounds.width - captionsMargin * 2,
|
|
},
|
|
});
|
|
|
|
layoutContextDispatch({
|
|
type: ACTIONS.SET_SIDEBAR_NAVIGATION_OUTPUT,
|
|
value: {
|
|
display: sidebarNavigationInput.isOpen,
|
|
minWidth: sidebarNavWidth.minWidth,
|
|
width: sidebarNavWidth.width,
|
|
maxWidth: sidebarNavWidth.maxWidth,
|
|
height: sidebarNavHeight,
|
|
top: navbarBounds.height,
|
|
left: sidebarNavBounds.left,
|
|
right: sidebarNavBounds.right,
|
|
tabOrder: DEFAULT_VALUES.sidebarNavTabOrder,
|
|
isResizable: !isMobile && !isTablet,
|
|
zIndex: sidebarNavBounds.zIndex,
|
|
},
|
|
});
|
|
|
|
layoutContextDispatch({
|
|
type: ACTIONS.SET_SIDEBAR_NAVIGATION_RESIZABLE_EDGE,
|
|
value: {
|
|
top: false,
|
|
right: !isRTL,
|
|
bottom: false,
|
|
left: isRTL,
|
|
},
|
|
});
|
|
|
|
layoutContextDispatch({
|
|
type: ACTIONS.SET_SIDEBAR_CONTENT_OUTPUT,
|
|
value: {
|
|
display: sidebarContentInput.isOpen,
|
|
minWidth: sidebarContentWidth.minWidth,
|
|
width: sidebarContentWidth.width,
|
|
maxWidth: sidebarContentWidth.maxWidth,
|
|
minHeight: sidebarContentHeight.minHeight,
|
|
height: sidebarContentHeight.height,
|
|
maxHeight: sidebarContentHeight.maxHeight,
|
|
top: navbarBounds.height,
|
|
left: sidebarContentBounds.left,
|
|
right: sidebarContentBounds.right,
|
|
currentPanelType,
|
|
tabOrder: DEFAULT_VALUES.sidebarContentTabOrder,
|
|
isResizable: !isMobile && !isTablet,
|
|
zIndex: sidebarContentBounds.zIndex,
|
|
},
|
|
});
|
|
|
|
layoutContextDispatch({
|
|
type: ACTIONS.SET_SIDEBAR_CONTENT_RESIZABLE_EDGE,
|
|
value: {
|
|
top: false,
|
|
right: !isRTL,
|
|
bottom: cameraDockInput.numCameras > 0,
|
|
left: isRTL,
|
|
},
|
|
});
|
|
|
|
layoutContextDispatch({
|
|
type: ACTIONS.SET_MEDIA_AREA_SIZE,
|
|
value: {
|
|
width: mediaAreaBounds.width,
|
|
height: mediaAreaBounds.height,
|
|
},
|
|
});
|
|
|
|
layoutContextDispatch({
|
|
type: ACTIONS.SET_CAMERA_DOCK_OUTPUT,
|
|
value: {
|
|
display: false,
|
|
position: CAMERADOCK_POSITION.SIDEBAR_CONTENT_BOTTOM,
|
|
minWidth: cameraDockBounds.minWidth,
|
|
width: cameraDockBounds.width,
|
|
maxWidth: cameraDockBounds.maxWidth,
|
|
minHeight: cameraDockBounds.minHeight,
|
|
height: cameraDockBounds.height,
|
|
maxHeight: cameraDockBounds.maxHeight,
|
|
top: cameraDockBounds.top,
|
|
left: cameraDockBounds.left,
|
|
right: cameraDockBounds.right,
|
|
tabOrder: 4,
|
|
isDraggable: false,
|
|
resizableEdge: {
|
|
top: false,
|
|
right: false,
|
|
bottom: false,
|
|
left: false,
|
|
},
|
|
focusedId: input.cameraDock.focusedId,
|
|
zIndex: cameraDockBounds.zIndex,
|
|
},
|
|
});
|
|
|
|
layoutContextDispatch({
|
|
type: ACTIONS.SET_PRESENTATION_OUTPUT,
|
|
value: {
|
|
display: false,
|
|
width: 0,
|
|
height: 0,
|
|
top: mediaBounds.top,
|
|
left: mediaBounds.left,
|
|
right: isRTL ? mediaBounds.right : null,
|
|
tabOrder: DEFAULT_VALUES.presentationTabOrder,
|
|
isResizable: false,
|
|
zIndex: mediaBounds.zIndex,
|
|
},
|
|
});
|
|
|
|
layoutContextDispatch({
|
|
type: ACTIONS.SET_SCREEN_SHARE_OUTPUT,
|
|
value: {
|
|
display: false,
|
|
width: 0,
|
|
height: 0,
|
|
top: mediaBounds.top,
|
|
left: mediaBounds.left,
|
|
right: mediaBounds.right,
|
|
zIndex: mediaBounds.zIndex,
|
|
},
|
|
});
|
|
|
|
layoutContextDispatch({
|
|
type: ACTIONS.SET_EXTERNAL_VIDEO_OUTPUT,
|
|
value: {
|
|
display: false,
|
|
width: 0,
|
|
height: 0,
|
|
top: mediaBounds.top,
|
|
left: mediaBounds.left,
|
|
right: mediaBounds.right,
|
|
},
|
|
});
|
|
|
|
layoutContextDispatch({
|
|
type: ACTIONS.SET_GENERIC_COMPONENT_OUTPUT,
|
|
value: {
|
|
display: false,
|
|
width: 0,
|
|
height: 0,
|
|
top: mediaBounds.top,
|
|
left: mediaBounds.left,
|
|
right: mediaBounds.right,
|
|
},
|
|
});
|
|
|
|
layoutContextDispatch({
|
|
type: ACTIONS.SET_SHARED_NOTES_OUTPUT,
|
|
value: {
|
|
display: false,
|
|
width: isOpen ? mediaBounds.width : 0,
|
|
height: isOpen ? mediaBounds.height : 0,
|
|
top: mediaBounds.top,
|
|
left: mediaBounds.left,
|
|
right: mediaBounds.right,
|
|
},
|
|
});
|
|
};
|
|
|
|
const throttledCalculatesLayout = throttle(() => calculatesLayout(),
|
|
50, { trailing: true, leading: true });
|
|
|
|
useEffect(() => {
|
|
window.addEventListener('resize', () => {
|
|
layoutContextDispatch({
|
|
type: ACTIONS.SET_BROWSER_SIZE,
|
|
value: {
|
|
width: window.document.documentElement.clientWidth,
|
|
height: window.document.documentElement.clientHeight,
|
|
},
|
|
});
|
|
});
|
|
}, []);
|
|
|
|
const init = () => {
|
|
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: false,
|
|
slidesLength: presentationInput.slidesLength,
|
|
currentSlide: {
|
|
...presentationInput.currentSlide,
|
|
},
|
|
width: 0,
|
|
height: 0,
|
|
},
|
|
cameraDock: {
|
|
numCameras: 0,
|
|
},
|
|
externalVideo: {
|
|
hasExternalVideo: false,
|
|
width: 0,
|
|
height: 0,
|
|
},
|
|
genericComponent: {
|
|
hasGenericComponent: false,
|
|
width: 0,
|
|
height: 0,
|
|
},
|
|
screenShare: {
|
|
hasScreenShare: false,
|
|
width: 0,
|
|
height: 0,
|
|
},
|
|
},
|
|
INITIAL_INPUT_STATE,
|
|
),
|
|
});
|
|
Session.set('layoutReady', true);
|
|
throttledCalculatesLayout();
|
|
};
|
|
|
|
// eslint-disable-next-line consistent-return
|
|
useEffect(() => {
|
|
if (deviceType === null) return () => null;
|
|
|
|
if (deviceType !== prevDeviceType) {
|
|
// reset layout if deviceType changed
|
|
// not all options is supported in all devices
|
|
init();
|
|
} else {
|
|
throttledCalculatesLayout();
|
|
}
|
|
}, [input, deviceType, isRTL, fontSize, fullscreen]);
|
|
|
|
return null;
|
|
};
|
|
|
|
export default ParticipantsAndChatOnlyLayout;
|