bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx

561 lines
19 KiB
React
Raw Normal View History

import { useEffect, useRef } from 'react';
2021-05-18 04:25:07 +08:00
import _ from 'lodash';
2021-09-11 04:48:52 +08:00
import { layoutDispatch, layoutSelect, layoutSelectInput } from '/imports/ui/components/layout/context';
2021-08-05 19:03:24 +08:00
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 { isPresentationEnabled } from '/imports/ui/services/features';
2021-05-18 04:25:07 +08:00
const windowWidth = () => window.document.documentElement.clientWidth;
const windowHeight = () => window.document.documentElement.clientHeight;
2021-05-18 04:25:07 +08:00
const SmartLayout = (props) => {
const { bannerAreaHeight, isMobile } = props;
function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
});
return ref.current;
2021-05-18 04:25:07 +08:00
}
2021-09-11 04:48:52 +08:00
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 externalVideoInput = layoutSelectInput((i) => i.externalVideo);
const screenShareInput = layoutSelectInput((i) => i.screenShare);
const sharedNotesInput = layoutSelectInput((i) => i.sharedNotes);
2021-09-11 04:48:52 +08:00
const layoutContextDispatch = layoutDispatch();
const prevDeviceType = usePrevious(deviceType);
const throttledCalculatesLayout = _.throttle(() => calculatesLayout(),
50, { trailing: true, leading: true });
useEffect(() => {
2021-05-18 04:25:07 +08:00
window.addEventListener('resize', () => {
2021-09-11 04:48:52 +08:00
layoutContextDispatch({
2021-05-18 04:25:07 +08:00
type: ACTIONS.SET_BROWSER_SIZE,
value: {
width: window.document.documentElement.clientWidth,
height: window.document.documentElement.clientHeight,
},
});
});
}, []);
2021-05-18 04:25:07 +08:00
useEffect(() => {
if (deviceType === null) return;
2021-05-18 04:25:07 +08:00
if (deviceType !== prevDeviceType) {
// reset layout if deviceType changed
// not all options is supported in all devices
init();
2021-05-18 04:25:07 +08:00
} else {
throttledCalculatesLayout();
2021-05-18 04:25:07 +08:00
}
2021-09-10 01:43:06 +08:00
}, [input, deviceType, isRTL, fontSize, fullscreen]);
2021-07-12 21:22:26 +08:00
const init = () => {
if (isMobile) {
2021-09-11 04:48:52 +08:00
layoutContextDispatch({
2021-05-18 04:25:07 +08:00
type: ACTIONS.SET_LAYOUT_INPUT,
value: _.defaultsDeep({
sidebarNavigation: {
isOpen: false,
sidebarNavPanel: sidebarNavigationInput.sidebarNavPanel,
2021-05-18 04:25:07 +08:00
},
sidebarContent: {
isOpen: false,
sidebarContentPanel: sidebarContentInput.sidebarContentPanel,
2021-05-18 04:25:07 +08:00
},
SidebarContentHorizontalResizer: {
isOpen: false,
},
presentation: {
isOpen: presentationInput.isOpen,
slidesLength: presentationInput.slidesLength,
2021-05-18 04:25:07 +08:00
currentSlide: {
...presentationInput.currentSlide,
2021-05-18 04:25:07 +08:00
},
},
cameraDock: {
numCameras: cameraDockInput.numCameras,
2021-05-18 04:25:07 +08:00
},
externalVideo: {
hasExternalVideo: externalVideoInput.hasExternalVideo,
},
screenShare: {
hasScreenShare: screenShareInput.hasScreenShare,
width: screenShareInput.width,
height: screenShareInput.height,
},
2021-05-18 04:25:07 +08:00
}, INITIAL_INPUT_STATE),
});
} else {
const { sidebarContentPanel } = sidebarContentInput;
2021-07-14 21:53:10 +08:00
2021-09-11 04:48:52 +08:00
layoutContextDispatch({
2021-05-18 04:25:07 +08:00
type: ACTIONS.SET_LAYOUT_INPUT,
value: _.defaultsDeep({
sidebarNavigation: {
isOpen: input.sidebarNavigation.isOpen || sidebarContentPanel !== PANELS.NONE || false,
2021-05-18 04:25:07 +08:00
},
sidebarContent: {
isOpen: sidebarContentPanel !== PANELS.NONE,
2021-07-14 21:53:10 +08:00
sidebarContentPanel,
2021-05-18 04:25:07 +08:00
},
SidebarContentHorizontalResizer: {
isOpen: false,
},
presentation: {
isOpen: presentationInput.isOpen,
slidesLength: presentationInput.slidesLength,
2021-05-18 04:25:07 +08:00
currentSlide: {
...presentationInput.currentSlide,
2021-05-18 04:25:07 +08:00
},
},
cameraDock: {
numCameras: cameraDockInput.numCameras,
2021-05-18 04:25:07 +08:00
},
2022-03-17 22:06:21 +08:00
externalVideo: {
hasExternalVideo: externalVideoInput.hasExternalVideo,
},
screenShare: {
hasScreenShare: screenShareInput.hasScreenShare,
width: screenShareInput.width,
height: screenShareInput.height,
},
2021-05-18 04:25:07 +08:00
}, INITIAL_INPUT_STATE),
});
}
2022-12-01 02:32:47 +08:00
Session.set('layoutReady', true);
throttledCalculatesLayout();
};
2021-05-18 04:25:07 +08:00
const calculatesSidebarContentHeight = () => {
2021-05-18 04:25:07 +08:00
let sidebarContentHeight = 0;
if (sidebarContentInput.isOpen) {
if (isMobile) {
2021-08-09 22:24:02 +08:00
sidebarContentHeight = windowHeight() - DEFAULT_VALUES.navBarHeight;
2021-05-18 04:25:07 +08:00
} else {
2021-08-09 22:24:02 +08:00
sidebarContentHeight = windowHeight();
2021-05-18 04:25:07 +08:00
}
sidebarContentHeight -= bannerAreaHeight();
2021-05-18 04:25:07 +08:00
}
return sidebarContentHeight;
};
2021-05-18 04:25:07 +08:00
const calculatesCameraDockBounds = (mediaAreaBounds, mediaBounds, sidebarSize) => {
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, navBarHeight } = DEFAULT_VALUES;
2021-05-18 04:25:07 +08:00
const cameraDockBounds = {};
2021-07-27 04:28:05 +08:00
cameraDockBounds.isCameraHorizontal = false;
const mediaBoundsWidth = (mediaBounds.width > presentationToolbarMinWidth && !isMobile)
? mediaBounds.width
: presentationToolbarMinWidth;
2021-05-18 04:25:07 +08:00
cameraDockBounds.top = navBarHeight;
cameraDockBounds.left = mediaAreaBounds.left;
cameraDockBounds.right = isRTL ? sidebarSize + (camerasMargin * 2) : null;
cameraDockBounds.zIndex = 1;
if (mediaBounds.width < mediaAreaBounds.width) {
cameraDockBounds.top = navBarHeight + bannerAreaHeight();
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;
2021-05-18 04:25:07 +08:00
} 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;
2021-05-18 04:25:07 +08:00
}
cameraDockBounds.minWidth = cameraDockBounds.width;
cameraDockBounds.minHeight = cameraDockBounds.height;
2021-05-18 04:25:07 +08:00
return cameraDockBounds;
};
2021-05-18 04:25:07 +08:00
const calculatesSlideSize = (mediaAreaBounds) => {
const { currentSlide } = presentationInput;
2021-05-18 04:25:07 +08:00
if (currentSlide.size.width === 0 && currentSlide.size.height === 0) {
return {
width: 0,
height: 0,
};
}
let slideWidth;
let slideHeight;
slideWidth = (currentSlide.size.width * mediaAreaBounds.height) / currentSlide.size.height;
slideHeight = mediaAreaBounds.height;
if (slideWidth > mediaAreaBounds.width) {
slideWidth = mediaAreaBounds.width;
slideHeight = (currentSlide.size.height * mediaAreaBounds.width) / currentSlide.size.width;
}
return {
width: slideWidth,
height: slideHeight,
};
};
2021-05-18 04:25:07 +08:00
const calculatesScreenShareSize = (mediaAreaBounds) => {
const { width = 0, height = 0 } = screenShareInput;
if (width === 0 && height === 0) return { width, height };
let screeShareWidth;
let screeShareHeight;
screeShareWidth = (width * mediaAreaBounds.height) / height;
screeShareHeight = mediaAreaBounds.height;
if (screeShareWidth > mediaAreaBounds.width) {
screeShareWidth = mediaAreaBounds.width;
screeShareHeight = (height * mediaAreaBounds.width) / width;
}
return {
width: screeShareWidth,
height: screeShareHeight,
};
}
const calculatesMediaBounds = (mediaAreaBounds, slideSize, sidebarSize, screenShareSize) => {
const { isOpen, currentSlide } = presentationInput;
const { hasExternalVideo } = externalVideoInput;
const { hasScreenShare } = screenShareInput;
const { isPinned: isSharedNotesPinned } = sharedNotesInput;
2021-06-15 21:55:46 +08:00
const mediaBounds = {};
const { element: fullscreenElement } = fullscreen;
const { num: currentSlideNumber } = currentSlide;
2021-05-18 04:25:07 +08:00
if (!isOpen || ((isPresentationEnabled() && currentSlideNumber === 0) && !hasExternalVideo && !hasScreenShare && !isSharedNotesPinned)) {
mediaBounds.width = 0;
mediaBounds.height = 0;
mediaBounds.top = 0;
2021-07-27 04:28:05 +08:00
mediaBounds.left = !isRTL ? 0 : null;
mediaBounds.right = isRTL ? 0 : null;
mediaBounds.zIndex = 0;
return mediaBounds;
}
if (fullscreenElement === 'Presentation' || fullscreenElement === 'Screenshare' || fullscreenElement === 'ExternalVideo') {
2021-08-09 22:24:02 +08:00
mediaBounds.width = windowWidth();
mediaBounds.height = windowHeight();
2021-06-15 21:55:46 +08:00
mediaBounds.top = 0;
2021-07-27 04:28:05 +08:00
mediaBounds.left = !isRTL ? 0 : null;
mediaBounds.right = isRTL ? 0 : null;
2021-06-15 21:55:46 +08:00
mediaBounds.zIndex = 99;
return mediaBounds;
2021-05-18 04:25:07 +08:00
}
const mediaContentSize = hasScreenShare ? screenShareSize : slideSize;
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)) {
mediaBounds.width = mediaContentSize.width;
2021-05-18 04:25:07 +08:00
} else {
2021-06-15 21:55:46 +08:00
mediaBounds.width = mediaAreaBounds.width * 0.8;
2021-05-18 04:25:07 +08:00
}
2021-06-15 21:55:46 +08:00
mediaBounds.height = mediaAreaBounds.height;
mediaBounds.top = mediaAreaBounds.top;
2021-07-27 04:28:05 +08:00
const sizeValue = mediaAreaBounds.left
2021-06-15 21:55:46 +08:00
+ (mediaAreaBounds.width - mediaBounds.width);
2021-07-27 04:28:05 +08:00
mediaBounds.left = !isRTL ? sizeValue : null;
mediaBounds.right = isRTL ? sidebarSize : null;
2021-05-18 04:25:07 +08:00
} else {
if (mediaContentSize.height < (mediaAreaBounds.height * 0.8)) {
mediaBounds.height = mediaContentSize.height;
2021-05-18 04:25:07 +08:00
} else {
2021-06-15 21:55:46 +08:00
mediaBounds.height = mediaAreaBounds.height * 0.8;
2021-05-18 04:25:07 +08:00
}
2021-06-15 21:55:46 +08:00
mediaBounds.width = mediaAreaBounds.width;
mediaBounds.top = mediaAreaBounds.top
+ (mediaAreaBounds.height - mediaBounds.height);
2021-07-27 04:28:05 +08:00
const sizeValue = mediaAreaBounds.left;
mediaBounds.left = !isRTL ? sizeValue : null;
mediaBounds.right = isRTL ? sidebarSize : null;
2021-05-18 04:25:07 +08:00
}
} else {
2021-06-15 21:55:46 +08:00
mediaBounds.width = mediaAreaBounds.width;
mediaBounds.height = mediaAreaBounds.height * 0.8;
mediaBounds.top = mediaAreaBounds.top
+ (mediaAreaBounds.height - mediaBounds.height);
2021-07-27 04:28:05 +08:00
const sizeValue = mediaAreaBounds.left;
mediaBounds.left = !isRTL ? sizeValue : null;
mediaBounds.right = isRTL ? sidebarSize : null;
2021-05-18 04:25:07 +08:00
}
} else {
2021-06-15 21:55:46 +08:00
mediaBounds.width = mediaAreaBounds.width;
mediaBounds.height = mediaAreaBounds.height;
mediaBounds.top = mediaAreaBounds.top;
2021-07-27 04:28:05 +08:00
const sizeValue = mediaAreaBounds.left;
mediaBounds.left = !isRTL ? sizeValue : null;
mediaBounds.right = isRTL ? sidebarSize : null;
2021-05-18 04:25:07 +08:00
}
2021-06-15 21:55:46 +08:00
mediaBounds.zIndex = 1;
2021-05-18 04:25:07 +08:00
2021-06-15 21:55:46 +08:00
return mediaBounds;
};
2021-05-18 04:25:07 +08:00
const calculatesLayout = () => {
const {
calculatesNavbarBounds,
calculatesActionbarBounds,
calculatesSidebarNavWidth,
calculatesSidebarNavHeight,
calculatesSidebarNavBounds,
calculatesSidebarContentWidth,
calculatesSidebarContentBounds,
calculatesMediaAreaBounds,
isTablet,
} = props;
const { camerasMargin, captionsMargin } = DEFAULT_VALUES;
2021-05-18 04:25:07 +08:00
const sidebarNavWidth = calculatesSidebarNavWidth();
const sidebarNavHeight = calculatesSidebarNavHeight();
const sidebarContentWidth = calculatesSidebarContentWidth();
const sidebarContentHeight = calculatesSidebarContentHeight();
const sidebarNavBounds = calculatesSidebarNavBounds();
const sidebarContentBounds = calculatesSidebarContentBounds(sidebarNavWidth.width);
const mediaAreaBounds = calculatesMediaAreaBounds(sidebarNavWidth.width, sidebarContentWidth.width);
const navbarBounds = calculatesNavbarBounds(mediaAreaBounds);
const actionbarBounds = calculatesActionbarBounds(mediaAreaBounds);
const slideSize = calculatesSlideSize(mediaAreaBounds);
const screenShareSize = calculatesScreenShareSize(mediaAreaBounds);
2021-07-27 04:28:05 +08:00
const sidebarSize = sidebarContentWidth.width + sidebarNavWidth.width;
const mediaBounds = calculatesMediaBounds(
mediaAreaBounds,
slideSize,
sidebarSize,
screenShareSize,
);
const cameraDockBounds = calculatesCameraDockBounds(mediaAreaBounds, mediaBounds, sidebarSize);
const horizontalCameraDiff = cameraDockBounds.isCameraHorizontal
? cameraDockBounds.width + (camerasMargin * 2)
: 0;
2021-05-18 04:25:07 +08:00
2021-09-11 04:48:52 +08:00
layoutContextDispatch({
2021-05-18 04:25:07 +08:00
type: ACTIONS.SET_NAVBAR_OUTPUT,
value: {
display: navbarInput.hasNavBar,
2021-05-18 04:25:07 +08:00
width: navbarBounds.width,
height: navbarBounds.height,
top: navbarBounds.top,
left: navbarBounds.left,
tabOrder: DEFAULT_VALUES.navBarTabOrder,
zIndex: navbarBounds.zIndex,
},
});
2021-09-11 04:48:52 +08:00
layoutContextDispatch({
2021-05-18 04:25:07 +08:00
type: ACTIONS.SET_ACTIONBAR_OUTPUT,
value: {
display: actionbarInput.hasActionBar,
2021-05-18 04:25:07 +08:00
width: actionbarBounds.width,
height: actionbarBounds.height,
innerHeight: actionbarBounds.innerHeight,
2021-05-18 04:25:07 +08:00
top: actionbarBounds.top,
left: actionbarBounds.left,
padding: actionbarBounds.padding,
2021-05-18 04:25:07 +08:00
tabOrder: DEFAULT_VALUES.actionBarTabOrder,
zIndex: actionbarBounds.zIndex,
},
});
2021-09-11 04:48:52 +08:00
layoutContextDispatch({
type: ACTIONS.SET_CAPTIONS_OUTPUT,
value: {
left: !isRTL ? (sidebarSize + captionsMargin) : null,
right: isRTL ? (sidebarSize + captionsMargin) : null,
maxWidth: mediaAreaBounds.width - (captionsMargin * 2),
},
});
2021-09-11 04:48:52 +08:00
layoutContextDispatch({
2021-05-18 04:25:07 +08:00
type: ACTIONS.SET_SIDEBAR_NAVIGATION_OUTPUT,
value: {
display: sidebarNavigationInput.isOpen,
2021-05-18 04:25:07 +08:00
minWidth: sidebarNavWidth.minWidth,
width: sidebarNavWidth.width,
maxWidth: sidebarNavWidth.maxWidth,
height: sidebarNavHeight,
top: sidebarNavBounds.top,
left: sidebarNavBounds.left,
2021-07-27 04:28:05 +08:00
right: sidebarNavBounds.right,
2021-05-18 04:25:07 +08:00
tabOrder: DEFAULT_VALUES.sidebarNavTabOrder,
isResizable: !isMobile && !isTablet,
2021-05-18 04:25:07 +08:00
zIndex: sidebarNavBounds.zIndex,
},
});
2021-09-11 04:48:52 +08:00
layoutContextDispatch({
2021-05-18 04:25:07 +08:00
type: ACTIONS.SET_SIDEBAR_NAVIGATION_RESIZABLE_EDGE,
value: {
top: false,
2021-07-27 19:38:53 +08:00
right: !isRTL,
2021-05-18 04:25:07 +08:00
bottom: false,
2021-07-27 19:38:53 +08:00
left: isRTL,
2021-05-18 04:25:07 +08:00
},
});
2021-09-11 04:48:52 +08:00
layoutContextDispatch({
2021-05-18 04:25:07 +08:00
type: ACTIONS.SET_SIDEBAR_CONTENT_OUTPUT,
value: {
display: sidebarContentInput.isOpen,
2021-05-18 04:25:07 +08:00
minWidth: sidebarContentWidth.minWidth,
width: sidebarContentWidth.width,
maxWidth: sidebarContentWidth.maxWidth,
height: sidebarContentHeight,
top: sidebarContentBounds.top,
left: sidebarContentBounds.left,
2021-07-27 04:28:05 +08:00
right: sidebarContentBounds.right,
currentPanelType,
2021-05-18 04:25:07 +08:00
tabOrder: DEFAULT_VALUES.sidebarContentTabOrder,
isResizable: !isMobile && !isTablet,
2021-05-18 04:25:07 +08:00
zIndex: sidebarContentBounds.zIndex,
},
});
2021-09-11 04:48:52 +08:00
layoutContextDispatch({
2021-05-18 04:25:07 +08:00
type: ACTIONS.SET_SIDEBAR_CONTENT_RESIZABLE_EDGE,
value: {
top: false,
2021-07-27 19:38:53 +08:00
right: !isRTL,
2021-05-18 04:25:07 +08:00
bottom: false,
2021-07-27 19:38:53 +08:00
left: isRTL,
2021-05-18 04:25:07 +08:00
},
});
2021-09-11 04:48:52 +08:00
layoutContextDispatch({
2021-05-18 04:25:07 +08:00
type: ACTIONS.SET_MEDIA_AREA_SIZE,
value: {
width: mediaAreaBounds.width,
height: mediaAreaBounds.height,
},
});
2021-09-11 04:48:52 +08:00
layoutContextDispatch({
2021-05-18 04:25:07 +08:00
type: ACTIONS.SET_CAMERA_DOCK_OUTPUT,
value: {
display: cameraDockInput.numCameras > 0,
position: cameraDockBounds.position,
2021-05-18 04:25:07 +08:00
minWidth: cameraDockBounds.minWidth,
width: cameraDockBounds.width,
maxWidth: cameraDockBounds.maxWidth,
minHeight: cameraDockBounds.minHeight,
height: cameraDockBounds.height,
maxHeight: cameraDockBounds.maxHeight,
top: cameraDockBounds.top,
left: cameraDockBounds.left,
2021-07-27 04:28:05 +08:00
right: cameraDockBounds.right,
2021-05-18 04:25:07 +08:00
tabOrder: 4,
isDraggable: false,
resizableEdge: {
top: false,
right: false,
bottom: false,
left: false,
},
2021-05-18 04:25:07 +08:00
zIndex: cameraDockBounds.zIndex,
focusedId: input.cameraDock.focusedId,
2021-05-18 04:25:07 +08:00
},
});
2021-09-11 04:48:52 +08:00
layoutContextDispatch({
2021-05-18 04:25:07 +08:00
type: ACTIONS.SET_PRESENTATION_OUTPUT,
value: {
display: presentationInput.isOpen,
2021-06-15 21:55:46 +08:00
width: mediaBounds.width,
height: mediaBounds.height,
top: mediaBounds.top,
left: mediaBounds.left,
2021-07-27 04:28:05 +08:00
right: isRTL ? (mediaBounds.right + horizontalCameraDiff) : null,
2021-05-18 04:25:07 +08:00
tabOrder: DEFAULT_VALUES.presentationTabOrder,
isResizable: false,
2021-06-15 21:55:46 +08:00
zIndex: mediaBounds.zIndex,
2021-05-18 04:25:07 +08:00
},
});
2021-06-15 21:47:37 +08:00
2021-09-11 04:48:52 +08:00
layoutContextDispatch({
2021-06-15 21:47:37 +08:00
type: ACTIONS.SET_SCREEN_SHARE_OUTPUT,
value: {
2021-06-15 21:55:46 +08:00
width: mediaBounds.width,
height: mediaBounds.height,
top: mediaBounds.top,
left: mediaBounds.left,
right: isRTL ? (mediaBounds.right + horizontalCameraDiff) : null,
2021-07-07 03:27:28 +08:00
zIndex: mediaBounds.zIndex,
2021-06-15 21:47:37 +08:00
},
});
2021-06-16 20:53:27 +08:00
2021-09-11 04:48:52 +08:00
layoutContextDispatch({
2021-06-16 20:53:27 +08:00
type: ACTIONS.SET_EXTERNAL_VIDEO_OUTPUT,
value: {
width: mediaBounds.width,
height: mediaBounds.height,
top: mediaBounds.top,
left: mediaBounds.left,
right: isRTL ? (mediaBounds.right + horizontalCameraDiff) : null,
2021-06-16 20:53:27 +08:00
},
});
layoutContextDispatch({
type: ACTIONS.SET_SHARED_NOTES_OUTPUT,
value: {
width: mediaBounds.width,
height: mediaBounds.height,
top: mediaBounds.top,
left: mediaBounds.left,
right: isRTL ? (mediaBounds.right + horizontalCameraDiff) : null,
},
});
};
2021-05-18 04:25:07 +08:00
return null;
};
2021-05-18 04:25:07 +08:00
export default SmartLayout;