From f10c34bc942b2b4fa414e9b4ba060a4964e3d79f Mon Sep 17 00:00:00 2001 From: Ramon Souza Date: Thu, 9 Sep 2021 14:12:05 -0300 Subject: [PATCH] add use-context-selector changes to videoFocusLayout --- .../layout/layout-manager/customLayout.jsx | 2 +- .../presentationFocusLayout.jsx | 2 +- .../layout/layout-manager/smartLayout.jsx | 2 +- .../layout-manager/videoFocusLayout.jsx | 361 ++++++++---------- 4 files changed, 166 insertions(+), 201 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx index 9d909aaeed..e21f06a332 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx @@ -43,7 +43,7 @@ const CustomLayout = () => { const prevDeviceType = usePrevious(deviceType); const throttledCalculatesLayout = _.throttle(() => calculatesLayout(), - 50, { 'trailing': true, 'leading': true }); + 50, { trailing: true, leading: true }); useEffect(() => { window.addEventListener('resize', () => { diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx index 874b0ca68f..b6c15c2d2a 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx @@ -41,7 +41,7 @@ const PresentationFocusLayout = () => { const prevDeviceType = usePrevious(deviceType); const throttledCalculatesLayout = _.throttle(() => calculatesLayout(), - 50, { 'trailing': true, 'leading': true }); + 50, { trailing: true, leading: true }); useEffect(() => { window.addEventListener('resize', () => { diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx index 7df1e44575..d965ec0662 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx @@ -41,7 +41,7 @@ const SmartLayout = () => { const prevDeviceType = usePrevious(deviceType); const throttledCalculatesLayout = _.throttle(() => calculatesLayout(), - 50, { 'trailing': true, 'leading': true }); + 50, { trailing: true, leading: true }); useEffect(() => { window.addEventListener('resize', () => { diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx index 08512bf0a4..5e23fee6c4 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx @@ -1,5 +1,5 @@ -import React, { Component } from 'react'; -import { throttle, defaultsDeep } from 'lodash'; +import { useEffect, useRef } from 'react'; +import _ from 'lodash'; import { LayoutContextFunc } 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'; @@ -10,19 +10,44 @@ const windowHeight = () => window.document.documentElement.clientHeight; const min = (value1, value2) => (value1 <= value2 ? value1 : value2); const max = (value1, value2) => (value1 >= value2 ? value1 : value2); -class VideoFocusLayout extends Component { - constructor(props) { - super(props); - - this.throttledCalculatesLayout = throttle(() => this.calculatesLayout(), - 50, { trailing: true, leading: true }); +const VideoFocusLayout = () => { + function usePrevious(value) { + const ref = useRef(); + useEffect(() => { + ref.current = value; + }); + return ref.current; } - componentDidMount() { - this.init(); - const { layoutContextDispatch } = this.props; + const { layoutContextSelector } = LayoutContextFunc; + const layoutDispatch = layoutContextSelector.layoutDispatch(); + + const input = layoutContextSelector.select((i) => i.input); + const deviceType = layoutContextSelector.select((i) => i.deviceType); + const isRTL = layoutContextSelector.select((i) => i.isRTL); + const fullscreen = layoutContextSelector.select((i) => i.fullscreen); + const fontSize = layoutContextSelector.select((i) => i.fontSize); + const currentPanelType = layoutContextSelector.select((i) => i.currentPanelType); + + const bannerBarInput = layoutContextSelector.selectInput((i) => i.bannerBar); + const notificationsBarInput = layoutContextSelector.selectInput((i) => i.notificationsBar); + const presentationInput = layoutContextSelector.selectInput((i) => i.presentation); + const sidebarNavigationInput = layoutContextSelector.selectInput((i) => i.sidebarNavigation); + const sidebarContentInput = layoutContextSelector.selectInput((i) => i.sidebarContent); + const cameraDockInput = layoutContextSelector.selectInput((i) => i.cameraDock); + const actionbarInput = layoutContextSelector.selectInput((i) => i.actionBar); + const navbarInput = layoutContextSelector.selectInput((i) => i.navBar); + + const sidebarContentOutput = layoutContextSelector.selectOutput((i) => i.sidebarContent); + + const prevDeviceType = usePrevious(deviceType); + + const throttledCalculatesLayout = _.throttle(() => calculatesLayout(), + 50, { trailing: true, leading: true }); + + useEffect(() => { window.addEventListener('resize', () => { - layoutContextDispatch({ + layoutDispatch({ type: ACTIONS.SET_BROWSER_SIZE, value: { width: window.document.documentElement.clientWidth, @@ -30,77 +55,65 @@ class VideoFocusLayout extends Component { }, }); }); - } + }, []); - shouldComponentUpdate(nextProps) { - const { layoutContextState } = this.props; - return layoutContextState.input !== nextProps.layoutContextState.input - || layoutContextState.deviceType !== nextProps.layoutContextState.deviceType - || layoutContextState.isRTL !== nextProps.layoutContextState.isRTL - || layoutContextState.fontSize !== nextProps.layoutContextState.fontSize - || layoutContextState.fullscreen !== nextProps.layoutContextState.fullscreen; - } + useEffect(() => { + if (deviceType === null) return; - componentDidUpdate(prevProps) { - const { layoutContextState } = this.props; - const { deviceType } = layoutContextState; - if (prevProps.layoutContextState.deviceType !== deviceType) { - this.init(); + if (deviceType !== prevDeviceType) { + // reset layout if deviceType changed + // not all options is supported in all devices + init(); } else { - this.throttledCalculatesLayout(); + throttledCalculatesLayout(); } - } + }, [input, deviceType]); - bannerAreaHeight() { - const { layoutContextState } = this.props; - const { input } = layoutContextState; - const { bannerBar, notificationsBar } = input; - - const bannerHeight = bannerBar.hasBanner ? DEFAULT_VALUES.bannerHeight : 0; - const notificationHeight = notificationsBar.hasNotification ? DEFAULT_VALUES.bannerHeight : 0; + const bannerAreaHeight = () => { + const { hasNotification } = notificationsBarInput; + const { hasBanner } = bannerBarInput; + const bannerHeight = hasBanner ? DEFAULT_VALUES.bannerHeight : 0; + const notificationHeight = hasNotification ? DEFAULT_VALUES.bannerHeight : 0; return bannerHeight + notificationHeight; - } + }; - init() { - const { layoutContextState, layoutContextDispatch } = this.props; - const { input } = layoutContextState; - const { deviceType } = layoutContextState; + const init = () => { if (deviceType === DEVICE_TYPE.MOBILE) { - layoutContextDispatch({ + layoutDispatch({ type: ACTIONS.SET_LAYOUT_INPUT, - value: defaultsDeep( + value: _.defaultsDeep( { sidebarNavigation: { isOpen: false, - sidebarNavPanel: input.sidebarNavigation.sidebarNavPanel, + sidebarNavPanel: sidebarNavigationInput.sidebarNavPanel, }, sidebarContent: { isOpen: false, - sidebarContentPanel: input.sidebarContent.sidebarContentPanel, + sidebarContentPanel: sidebarContentInput.sidebarContentPanel, }, SidebarContentHorizontalResizer: { isOpen: false, }, presentation: { - slidesLength: input.presentation.slidesLength, + slidesLength: presentationInput.slidesLength, currentSlide: { - ...input.presentation.currentSlide, + ...presentationInput.currentSlide, }, }, cameraDock: { - numCameras: input.cameraDock.numCameras, + numCameras: cameraDockInput.numCameras, }, }, INITIAL_INPUT_STATE, ), }); } else { - const { sidebarContentPanel } = input.sidebarContent; + const { sidebarContentPanel } = sidebarContentInput; - layoutContextDispatch({ + layoutDispatch({ type: ACTIONS.SET_LAYOUT_INPUT, - value: defaultsDeep( + value: _.defaultsDeep( { sidebarNavigation: { isOpen: true, @@ -113,43 +126,33 @@ class VideoFocusLayout extends Component { isOpen: false, }, presentation: { - slidesLength: input.presentation.slidesLength, + slidesLength: presentationInput.slidesLength, currentSlide: { - ...input.presentation.currentSlide, + ...presentationInput.currentSlide, }, }, cameraDock: { - numCameras: input.cameraDock.numCameras, + numCameras: cameraDockInput.numCameras, }, }, INITIAL_INPUT_STATE, ), }); } - this.throttledCalculatesLayout(); - } - - reset() { - this.init(); - } - - calculatesNavbarBounds(mediaAreaBounds) { - const { layoutContextState } = this.props; - const { isRTL } = layoutContextState; + throttledCalculatesLayout(); + }; + const calculatesNavbarBounds = (mediaAreaBounds) => { return { width: mediaAreaBounds.width, height: DEFAULT_VALUES.navBarHeight, - top: DEFAULT_VALUES.navBarTop + this.bannerAreaHeight(), + top: DEFAULT_VALUES.navBarTop + bannerAreaHeight(), left: !isRTL ? mediaAreaBounds.left : 0, zIndex: 1, }; - } - - calculatesActionbarHeight() { - const { layoutContextState } = this.props; - const { fontSize } = layoutContextState; + }; + const calculatesActionbarHeight = () => { const BASE_FONT_SIZE = 14; // 90% font size const BASE_HEIGHT = DEFAULT_VALUES.actionBarHeight; const PADDING = DEFAULT_VALUES.actionBarPadding; @@ -161,16 +164,13 @@ class VideoFocusLayout extends Component { innerHeight: actionBarHeight, padding: PADDING, }; - } + }; - calculatesActionbarBounds(mediaAreaBounds) { - const { layoutContextState } = this.props; - const { input, isRTL } = layoutContextState; - - const actionBarHeight = this.calculatesActionbarHeight(); + const calculatesActionbarBounds = (mediaAreaBounds) => { + const actionBarHeight = calculatesActionbarHeight(); return { - display: input.actionBar.hasActionBar, + display: actionbarInput.hasActionBar, width: mediaAreaBounds.width, height: actionBarHeight.height, innerHeight: actionBarHeight.innerHeight, @@ -179,11 +179,9 @@ class VideoFocusLayout extends Component { left: !isRTL ? mediaAreaBounds.left : 0, zIndex: 1, }; - } + }; - calculatesSidebarNavWidth() { - const { layoutContextState } = this.props; - const { deviceType, input } = layoutContextState; + const calculatesSidebarNavWidth = () => { const { sidebarNavMinWidth, sidebarNavMaxWidth, @@ -191,16 +189,16 @@ class VideoFocusLayout extends Component { let minWidth = 0; let width = 0; let maxWidth = 0; - if (input.sidebarNavigation.isOpen) { + if (sidebarNavigationInput.isOpen) { if (deviceType === DEVICE_TYPE.MOBILE) { minWidth = windowWidth(); width = windowWidth(); maxWidth = windowWidth(); } else { - if (input.sidebarNavigation.width === 0) { + if (sidebarNavigationInput.width === 0) { width = min(max((windowWidth() * 0.2), sidebarNavMinWidth), sidebarNavMaxWidth); } else { - width = min(max(input.sidebarNavigation.width, sidebarNavMinWidth), sidebarNavMaxWidth); + width = min(max(sidebarNavigationInput.width, sidebarNavMinWidth), sidebarNavMaxWidth); } minWidth = sidebarNavMinWidth; maxWidth = sidebarNavMaxWidth; @@ -211,31 +209,27 @@ class VideoFocusLayout extends Component { width, maxWidth, }; - } + }; - calculatesSidebarNavHeight() { - const { layoutContextState } = this.props; - const { deviceType, input } = layoutContextState; + const calculatesSidebarNavHeight = () => { let sidebarNavHeight = 0; - if (input.sidebarNavigation.isOpen) { + if (sidebarNavigationInput.isOpen) { if (deviceType === DEVICE_TYPE.MOBILE) { sidebarNavHeight = windowHeight() - DEFAULT_VALUES.navBarHeight; } else { sidebarNavHeight = windowHeight(); } - sidebarNavHeight -= this.bannerAreaHeight(); + sidebarNavHeight -= bannerAreaHeight(); } return sidebarNavHeight; - } + }; - calculatesSidebarNavBounds() { - const { layoutContextState } = this.props; - const { deviceType, isRTL } = layoutContextState; + const calculatesSidebarNavBounds = () => { const { sidebarNavTop, navBarHeight, sidebarNavLeft } = DEFAULT_VALUES; - let top = sidebarNavTop + this.bannerAreaHeight(); + let top = sidebarNavTop + bannerAreaHeight(); - if (deviceType === DEVICE_TYPE.MOBILE) top = navBarHeight + this.bannerAreaHeight(); + if (deviceType === DEVICE_TYPE.MOBILE) top = navBarHeight + bannerAreaHeight(); return { top, @@ -243,11 +237,9 @@ class VideoFocusLayout extends Component { right: isRTL ? sidebarNavLeft : null, zIndex: deviceType === DEVICE_TYPE.MOBILE ? 10 : 2, }; - } + }; - calculatesSidebarContentWidth() { - const { layoutContextState } = this.props; - const { deviceType, input } = layoutContextState; + const calculatesSidebarContentWidth = () => { const { sidebarContentMinWidth, sidebarContentMaxWidth, @@ -255,18 +247,18 @@ class VideoFocusLayout extends Component { let minWidth = 0; let width = 0; let maxWidth = 0; - if (input.sidebarContent.isOpen) { + if (sidebarContentInput.isOpen) { if (deviceType === DEVICE_TYPE.MOBILE) { minWidth = windowWidth(); width = windowWidth(); maxWidth = windowWidth(); } else { - if (input.sidebarContent.width === 0) { + if (sidebarContentInput.width === 0) { width = min( max((windowWidth() * 0.2), sidebarContentMinWidth), sidebarContentMaxWidth, ); } else { - width = min(max(input.sidebarContent.width, sidebarContentMinWidth), + width = min(max(sidebarContentInput.width, sidebarContentMinWidth), sidebarContentMaxWidth); } minWidth = sidebarContentMinWidth; @@ -278,41 +270,37 @@ class VideoFocusLayout extends Component { width, maxWidth, }; - } + }; - calculatesSidebarContentHeight() { - const { layoutContextState } = this.props; - const { deviceType, input, output } = layoutContextState; - const { sidebarContent: inputContent, presentation } = input; - const { sidebarContent: outputContent } = output; + const calculatesSidebarContentHeight = () => { let minHeight = 0; let height = 0; let maxHeight = 0; - if (inputContent.isOpen) { + if (sidebarContentInput.isOpen) { if (deviceType === DEVICE_TYPE.MOBILE) { - height = windowHeight() - DEFAULT_VALUES.navBarHeight - this.bannerAreaHeight(); + height = windowHeight() - DEFAULT_VALUES.navBarHeight - bannerAreaHeight(); minHeight = height; maxHeight = height; - } else if (input.cameraDock.numCameras > 0 && presentation.isOpen) { - if (inputContent.height > 0 && inputContent.height < windowHeight()) { - height = inputContent.height - this.bannerAreaHeight(); + } else if (cameraDockInput.numCameras > 0 && presentationInput.isOpen) { + if (sidebarContentInput.height > 0 && sidebarContentInput.height < windowHeight()) { + height = sidebarContentInput.height - bannerAreaHeight(); } else { - const { size: slideSize } = input.presentation.currentSlide; - let calculatedHeight = (windowHeight() - this.bannerAreaHeight()) * 0.3; + const { size: slideSize } = presentationInput.currentSlide; + let calculatedHeight = (windowHeight() - bannerAreaHeight()) * 0.3; if (slideSize.height > 0 && slideSize.width > 0) { - calculatedHeight = (slideSize.height * outputContent.width) / slideSize.width; + calculatedHeight = (slideSize.height * sidebarContentOutput.width) / slideSize.width; } - height = windowHeight() - calculatedHeight - this.bannerAreaHeight(); + height = windowHeight() - calculatedHeight - bannerAreaHeight(); } - maxHeight = windowHeight() * 0.75 - this.bannerAreaHeight(); - minHeight = windowHeight() * 0.25 - this.bannerAreaHeight(); + maxHeight = windowHeight() * 0.75 - bannerAreaHeight(); + minHeight = windowHeight() * 0.25 - bannerAreaHeight(); if (height > maxHeight) { height = maxHeight; } } else { - height = windowHeight() - this.bannerAreaHeight(); + height = windowHeight() - bannerAreaHeight(); maxHeight = height; minHeight = height; } @@ -322,16 +310,14 @@ class VideoFocusLayout extends Component { height, maxHeight, }; - } + }; - calculatesSidebarContentBounds(sidebarNavWidth) { - const { layoutContextState } = this.props; - const { deviceType, isRTL } = layoutContextState; + const calculatesSidebarContentBounds = (sidebarNavWidth) => { const { sidebarNavTop, navBarHeight } = DEFAULT_VALUES; - let top = sidebarNavTop + this.bannerAreaHeight(); + let top = sidebarNavTop + bannerAreaHeight(); - if (deviceType === DEVICE_TYPE.MOBILE) top = navBarHeight + this.bannerAreaHeight(); + if (deviceType === DEVICE_TYPE.MOBILE) top = navBarHeight + bannerAreaHeight(); let left = deviceType === DEVICE_TYPE.MOBILE ? 0 : sidebarNavWidth; let right = deviceType === DEVICE_TYPE.MOBILE ? 0 : sidebarNavWidth; @@ -344,13 +330,11 @@ class VideoFocusLayout extends Component { right, zIndex: deviceType === DEVICE_TYPE.MOBILE ? 11 : 1, }; - } + }; - calculatesMediaAreaBounds(sidebarNavWidth, sidebarContentWidth) { - const { layoutContextState } = this.props; - const { deviceType, isRTL } = layoutContextState; + const calculatesMediaAreaBounds = (sidebarNavWidth, sidebarContentWidth) => { const { navBarHeight } = DEFAULT_VALUES; - const { height: actionBarHeight } = this.calculatesActionbarHeight(); + const { height: actionBarHeight } = calculatesActionbarHeight(); let left = 0; let width = 0; if (deviceType === DEVICE_TYPE.MOBILE) { @@ -363,23 +347,16 @@ class VideoFocusLayout extends Component { return { width, - height: windowHeight() - (navBarHeight + actionBarHeight + this.bannerAreaHeight()), - top: navBarHeight + this.bannerAreaHeight(), + height: windowHeight() - (navBarHeight + actionBarHeight + bannerAreaHeight()), + top: navBarHeight + bannerAreaHeight(), left, }; - } - - calculatesCameraDockBounds(mediaAreaBounds, sidebarSize) { - const { layoutContextState } = this.props; - const { - deviceType, input, fullscreen, isRTL, - } = layoutContextState; - const { cameraDock } = input; - const { numCameras } = cameraDock; + }; + const calculatesCameraDockBounds = (mediaAreaBounds, sidebarSize) => { const cameraDockBounds = {}; - if (numCameras > 0) { + if (cameraDockInput.numCameras > 0) { if (deviceType === DEVICE_TYPE.MOBILE) { cameraDockBounds.minHeight = mediaAreaBounds.height * 0.7; cameraDockBounds.height = mediaAreaBounds.height * 0.7; @@ -421,19 +398,15 @@ class VideoFocusLayout extends Component { cameraDockBounds.maxWidth = 0; cameraDockBounds.zIndex = 0; return cameraDockBounds; - } + }; - calculatesMediaBounds( + const calculatesMediaBounds = ( mediaAreaBounds, cameraDockBounds, sidebarNavWidth, sidebarContentWidth, sidebarContentHeight, - ) { - const { layoutContextState } = this.props; - const { - deviceType, input, fullscreen, isRTL, - } = layoutContextState; + ) => { const mediaBounds = {}; const { element: fullscreenElement } = fullscreen; const sidebarSize = sidebarNavWidth + sidebarContentWidth; @@ -453,7 +426,7 @@ class VideoFocusLayout extends Component { mediaBounds.left = mediaAreaBounds.left; mediaBounds.top = mediaAreaBounds.top + cameraDockBounds.height; mediaBounds.width = mediaAreaBounds.width; - } else if (input.cameraDock.numCameras > 0) { + } else if (cameraDockInput.numCameras > 0) { mediaBounds.height = windowHeight() - sidebarContentHeight; mediaBounds.left = !isRTL ? sidebarNavWidth : 0; mediaBounds.right = isRTL ? sidebarNavWidth : 0; @@ -463,50 +436,44 @@ class VideoFocusLayout extends Component { } else { mediaBounds.height = mediaAreaBounds.height; mediaBounds.width = mediaAreaBounds.width; - mediaBounds.top = DEFAULT_VALUES.navBarHeight + this.bannerAreaHeight(); + mediaBounds.top = DEFAULT_VALUES.navBarHeight + bannerAreaHeight(); mediaBounds.left = !isRTL ? mediaAreaBounds.left : null; mediaBounds.right = isRTL ? sidebarSize : null; mediaBounds.zIndex = 1; } return mediaBounds; - } + }; - calculatesLayout() { - const { layoutContextState, layoutContextDispatch } = this.props; - const { deviceType, input, isRTL } = layoutContextState; + const calculatesLayout = () => { const { captionsMargin } = DEFAULT_VALUES; - const sidebarNavWidth = this.calculatesSidebarNavWidth(); - const sidebarNavHeight = this.calculatesSidebarNavHeight(); - const sidebarContentWidth = this.calculatesSidebarContentWidth(); - const sidebarNavBounds = this.calculatesSidebarNavBounds( + const sidebarNavWidth = calculatesSidebarNavWidth(); + const sidebarNavHeight = calculatesSidebarNavHeight(); + const sidebarContentWidth = calculatesSidebarContentWidth(); + const sidebarNavBounds = calculatesSidebarNavBounds(); + const sidebarContentBounds = calculatesSidebarContentBounds(sidebarNavWidth.width); + const mediaAreaBounds = calculatesMediaAreaBounds( sidebarNavWidth.width, sidebarContentWidth.width, ); - const sidebarContentBounds = this.calculatesSidebarContentBounds( - sidebarNavWidth.width, sidebarContentWidth.width, - ); - const mediaAreaBounds = this.calculatesMediaAreaBounds( - sidebarNavWidth.width, sidebarContentWidth.width, - ); - const navbarBounds = this.calculatesNavbarBounds(mediaAreaBounds); - const actionbarBounds = this.calculatesActionbarBounds(mediaAreaBounds); + const navbarBounds = calculatesNavbarBounds(mediaAreaBounds); + const actionbarBounds = calculatesActionbarBounds(mediaAreaBounds); const sidebarSize = sidebarContentWidth.width + sidebarNavWidth.width; - const cameraDockBounds = this.calculatesCameraDockBounds(mediaAreaBounds, sidebarSize); - const sidebarContentHeight = this.calculatesSidebarContentHeight(); - const mediaBounds = this.calculatesMediaBounds( + const cameraDockBounds = calculatesCameraDockBounds(mediaAreaBounds, sidebarSize); + const sidebarContentHeight = calculatesSidebarContentHeight(); + const mediaBounds = calculatesMediaBounds( mediaAreaBounds, cameraDockBounds, sidebarNavWidth.width, sidebarContentWidth.width, sidebarContentHeight.height, ); - const isBottomResizable = input.cameraDock.numCameras > 0; + const isBottomResizable = cameraDockInput.numCameras > 0; - layoutContextDispatch({ + layoutDispatch({ type: ACTIONS.SET_NAVBAR_OUTPUT, value: { - display: input.navBar.hasNavBar, + display: navbarInput.hasNavBar, width: navbarBounds.width, height: navbarBounds.height, top: navbarBounds.top, @@ -516,10 +483,10 @@ class VideoFocusLayout extends Component { }, }); - layoutContextDispatch({ + layoutDispatch({ type: ACTIONS.SET_ACTIONBAR_OUTPUT, value: { - display: input.actionBar.hasActionBar, + display: actionbarInput.hasActionBar, width: actionbarBounds.width, height: actionbarBounds.height, innerHeight: actionbarBounds.innerHeight, @@ -531,7 +498,7 @@ class VideoFocusLayout extends Component { }, }); - layoutContextDispatch({ + layoutDispatch({ type: ACTIONS.SET_CAPTIONS_OUTPUT, value: { left: !isRTL ? (mediaBounds.left + captionsMargin) : null, @@ -540,10 +507,10 @@ class VideoFocusLayout extends Component { }, }); - layoutContextDispatch({ + layoutDispatch({ type: ACTIONS.SET_SIDEBAR_NAVIGATION_OUTPUT, value: { - display: input.sidebarNavigation.isOpen, + display: sidebarNavigationInput.isOpen, minWidth: sidebarNavWidth.minWidth, width: sidebarNavWidth.width, maxWidth: sidebarNavWidth.maxWidth, @@ -558,7 +525,7 @@ class VideoFocusLayout extends Component { }, }); - layoutContextDispatch({ + layoutDispatch({ type: ACTIONS.SET_SIDEBAR_NAVIGATION_RESIZABLE_EDGE, value: { top: false, @@ -568,10 +535,10 @@ class VideoFocusLayout extends Component { }, }); - layoutContextDispatch({ + layoutDispatch({ type: ACTIONS.SET_SIDEBAR_CONTENT_OUTPUT, value: { - display: input.sidebarContent.isOpen, + display: sidebarContentInput.isOpen, minWidth: sidebarContentWidth.minWidth, width: sidebarContentWidth.width, maxWidth: sidebarContentWidth.maxWidth, @@ -581,7 +548,7 @@ class VideoFocusLayout extends Component { top: sidebarContentBounds.top, left: sidebarContentBounds.left, right: sidebarContentBounds.right, - currentPanelType: input.currentPanelType, + currentPanelType, tabOrder: DEFAULT_VALUES.sidebarContentTabOrder, isResizable: deviceType !== DEVICE_TYPE.MOBILE && deviceType !== DEVICE_TYPE.TABLET, @@ -589,7 +556,7 @@ class VideoFocusLayout extends Component { }, }); - layoutContextDispatch({ + layoutDispatch({ type: ACTIONS.SET_SIDEBAR_CONTENT_RESIZABLE_EDGE, value: { top: false, @@ -599,7 +566,7 @@ class VideoFocusLayout extends Component { }, }); - layoutContextDispatch({ + layoutDispatch({ type: ACTIONS.SET_MEDIA_AREA_SIZE, value: { width: mediaAreaBounds.width, @@ -607,10 +574,10 @@ class VideoFocusLayout extends Component { }, }); - layoutContextDispatch({ + layoutDispatch({ type: ACTIONS.SET_CAMERA_DOCK_OUTPUT, value: { - display: input.cameraDock.numCameras > 0, + display: cameraDockInput.numCameras > 0, minWidth: cameraDockBounds.minWidth, width: cameraDockBounds.width, maxWidth: cameraDockBounds.maxWidth, @@ -632,10 +599,10 @@ class VideoFocusLayout extends Component { }, }); - layoutContextDispatch({ + layoutDispatch({ type: ACTIONS.SET_PRESENTATION_OUTPUT, value: { - display: input.presentation.isOpen, + display: presentationInput.isOpen, width: mediaBounds.width, height: mediaBounds.height, top: mediaBounds.top, @@ -648,7 +615,7 @@ class VideoFocusLayout extends Component { }, }); - layoutContextDispatch({ + layoutDispatch({ type: ACTIONS.SET_PRESENTATION_RESIZABLE_EDGE, value: { top: true, @@ -658,7 +625,7 @@ class VideoFocusLayout extends Component { }, }); - layoutContextDispatch({ + layoutDispatch({ type: ACTIONS.SET_SCREEN_SHARE_OUTPUT, value: { width: mediaBounds.width, @@ -670,7 +637,7 @@ class VideoFocusLayout extends Component { }, }); - layoutContextDispatch({ + layoutDispatch({ type: ACTIONS.SET_EXTERNAL_VIDEO_OUTPUT, value: { width: mediaBounds.width, @@ -680,11 +647,9 @@ class VideoFocusLayout extends Component { right: isRTL ? mediaBounds.right : null, }, }); - } + }; - render() { - return <>; - } -} + return null; +}; -export default LayoutContextFunc.withConsumer(VideoFocusLayout); +export default VideoFocusLayout;