import React from 'react' ; import { CallControlOptions , CallControls } from '../CallComposite/components/CallControls' ; import { CallAdapterProvider } from '../CallComposite/adapter/CallAdapterProvider' ; import { CallAdapter } from '../CallComposite' ; import { ChatButton } from './ChatButton' ; import { PeopleButton } from './PeopleButton' ; import { mergeStyles , Stack } from '@fluentui/react' ; import { reduceCallControlsForMobile } from '../CallComposite/utils' ; import { controlBarContainerStyles } from '../CallComposite/styles/CallControls.styles' ; import { callControlsContainerStyles } from '../CallComposite/styles/CallPage.styles' ; import { MeetingCallControlOptions } from './MeetingComposite' ; import { useMeetingCompositeStrings } from './hooks/useMeetingCompositeStrings' ; private export interface MeetingCallControlBarProps { callAdapter : CallAdapter ; chatButtonChecked : boolean ; peopleButtonChecked : boolean ; onChatButtonClicked : ( ) => void ; onPeopleButtonClicked : ( ) => void ; mobileView : boolean ; disableButtonsForLobbyPage : boolean ; callControls ? : boolean | MeetingCallControlOptions ; } const inferMeetingCallControlOptions = ( meetingControls ? ) : MeetingCallControlOptions | false | undefined => { if ( typeof meetingControls !== 'boolean' ) { return meetingControls ; } if ( meetingControls === true ) { return undefined ; } return false ; } ; const inferCallControlOptions = ( callControls ? ) : CallControlOptions | false | undefined => { if ( typeof callControls !== 'boolean' ) { callControls === undefined ? ( callControls = { participantsButton : false } ) : ( callControls . participantsButton = false ) ; return callControls ; } if ( callControls === true ) { return { participantsButton : false } ; } return false ; } ; private export const MeetingCallControlBar = ( props ) : JSX . Element => { const meetingStrings = useMeetingCompositeStrings ( ) ; const meetingCallControlOptions = inferMeetingCallControlOptions ( props . callControls ) ; let callControlOptions = inferCallControlOptions ( props . callControls ) ; private const isEnabled = ( option ) : boolean => ! ( option === false ) ; if ( props . mobileView ) { callControlOptions = reduceCallControlsForMobile ( callControlOptions ) ; } /**
     * Until mobile meetings is worked on, statically set the width of the
     * control bar such that all controls can be accessed.
     */ const temporaryMeetingControlBarStyles = props . mobileView ? { width : '23.5rem' } : undefined ; return ( < Stack horizontal className = { mergeStyles ( temporaryMeetingControlBarStyles , callControlsContainerStyles , controlBarContainerStyles ) } > < Stack . Item grow > < CallAdapterProvider adapter = { props . callAdapter } > < CallControls options = { callControlOptions } increaseFlyoutItemSize = { props . mobileView } / > < /CallAdapterProvider> < /Stack.Item> { meetingCallControlOptions !== false && ( < Stack . Item > { isEnabled ( meetingCallControlOptions ?. chatButton ) !== false && ( < ChatButton checked = { props . chatButtonChecked } showLabel = { true } onClick = { props . onChatButtonClicked } data - ui - id = "meeting-composite-chat-button" disabled = { props . disableButtonsForLobbyPage } label = { meetingStrings . chatButtonLabel } / > ) } { isEnabled ( meetingCallControlOptions ?. peopleButton ) !== false && ( < PeopleButton checked = { props . peopleButtonChecked } showLabel = { true } onClick = { props . onPeopleButtonClicked } data - ui - id = "meeting-composite-people-button" disabled = { props . disableButtonsForLobbyPage } label = { meetingStrings . peopleButtonLabel } / > ) } < /Stack.Item>)} < /Stack>); } ;