import { IButtonStyles , mergeStyleSets , Stack } from '@fluentui/react' ; import { _isInLobbyOrConnecting } from '@internal/calling-component-bindings' ; import { CameraButton , ControlBar , DevicesButton , EndCallButton , MicrophoneButton , ParticipantMenuItemsCallback , ParticipantsButton , ScreenShareButton } from '@internal/react-components' ; import React , { useMemo } from 'react' ; import { useLocale } from '../../localization' ; import { usePropsFor } from '../hooks/usePropsFor' ; import { useSelector } from '../hooks/useSelector' ; import { getCallStatus , getLocalMicrophoneEnabled } from '../selectors/baseSelectors' ; import { controlButtonBaseStyle , devicesButtonWithIncreasedTouchTargets , groupCallLeaveButtonCompressedStyle , groupCallLeaveButtonStyle , participantButtonWithIncreasedTouchTargets } from '../styles/CallControls.styles' ; private export type CallControlsProps = { callInvitationURL ? : string ; onFetchParticipantMenuItems ? : ParticipantMenuItemsCallback ; options ? : boolean | CallControlOptions ; /**
     * Option to increase the height of the button flyout menu items from 36px to 48px.
     * Recommended for mobile devices.
     */ increaseFlyoutItemSize ? : boolean ; } ; public export type CallControlOptions = { remarks defaultValue displayType ? : 'default' | 'compact' ; defaultValue cameraButton ? : boolean ; defaultValue endCallButton ? : boolean ; defaultValue microphoneButton ? : boolean ; defaultValue devicesButton ? : boolean ; defaultValue participantsButton ? : boolean | { disabled : boolean ; } ; defaultValue screenShareButton ? : boolean | { disabled : boolean ; } ; } ; private export const CallControls = ( props ) : JSX . Element => { const { callInvitationURL , onFetchParticipantMenuItems } = props ; const callStatus = useSelector ( getCallStatus ) ; const isLocalMicrophoneEnabled = useSelector ( getLocalMicrophoneEnabled ) ; const strings = useLocale ( ) . strings . call ; /**
     * When call is in Lobby, microphone button should be disabled.
     * This is due to to headless limitation where a call can not be muted/unmuted in lobby.
     */ const microphoneButtonProps = usePropsFor ( MicrophoneButton ) ; if ( _isInLobbyOrConnecting ( callStatus ) ) { microphoneButtonProps . disabled = true ; microphoneButtonProps . checked = isLocalMicrophoneEnabled ; } const microphoneButtonStrings = _isInLobbyOrConnecting ( callStatus ) ? { strings : { tooltipOffContent : strings . microphoneToggleInLobbyNotAllowed , tooltipOnContent : strings . microphoneToggleInLobbyNotAllowed } } : { } ; const cameraButtonProps = usePropsFor ( CameraButton ) ; const screenShareButtonProps = usePropsFor ( ScreenShareButton ) ; const participantsButtonProps = usePropsFor ( ParticipantsButton ) ; const devicesButtonProps = usePropsFor ( DevicesButton ) ; const hangUpButtonProps = usePropsFor ( EndCallButton ) ; const participantsButtonStyles = useMemo ( ( ) => mergeButtonBaseStyles ( props . increaseFlyoutItemSize ? participantButtonWithIncreasedTouchTargets : { } ) , [ props . increaseFlyoutItemSize ] ) ; const devicesButtonStyles = useMemo ( ( ) => mergeButtonBaseStyles ( props . increaseFlyoutItemSize ? devicesButtonWithIncreasedTouchTargets : { } ) , [ props . increaseFlyoutItemSize ] ) ; if ( props . options === false ) { return < > < />; } const options = typeof props . options === 'boolean' ? { } : props . options ; const compactMode = options ?. displayType === 'compact' ; const microphoneButton = options ?. microphoneButton !== false && ( < MicrophoneButton autoFocus data - ui - id = "call-composite-microphone-button" { ... microphoneButtonProps } showLabel = { ! compactMode } styles = { controlButtonBaseStyle } { ... microphoneButtonStrings } />); const cameraButton = options ?. cameraButton !== false && ( < CameraButton data - ui - id = "call-composite-camera-button" { ... cameraButtonProps } showLabel = { ! compactMode } styles = { controlButtonBaseStyle } / > ) ; const screenShareButton = options ?. screenShareButton !== false && ( < ScreenShareButton data - ui - id = "call-composite-screenshare-button" { ... screenShareButtonProps } showLabel = { ! compactMode } disabled = { options ?. screenShareButton !== true && options ?. screenShareButton ?. disabled } />); const participantButton = options ?. participantsButton !== false && ( < ParticipantsButton data - ui - id = "call-composite-participants-button" { ... participantsButtonProps } showLabel = { ! compactMode } callInvitationURL = { callInvitationURL } onFetchParticipantMenuItems = { onFetchParticipantMenuItems } disabled = { options ?. participantsButton !== true && options ?. participantsButton ?. disabled } styles = { participantsButtonStyles } / > ) ; const devicesButton = options ?. devicesButton !== false && ( < DevicesButton persistMenu = { true } { ... devicesButtonProps } showLabel = { ! compactMode } styles = { devicesButtonStyles } / > ) ; const endCallButton = options ?. endCallButton !== false && ( < EndCallButton data - ui - id = "call-composite-hangup-button" { ... hangUpButtonProps } styles = { compactMode ? groupCallLeaveButtonCompressedStyle : groupCallLeaveButtonStyle } showLabel = { ! compactMode } />); return ( < Stack horizontalAlign = "center" > < Stack . Item > { } < ControlBar layout = "horizontal" > { microphoneButton } { cameraButton } { screenShareButton } { participantButton } { devicesButton } { endCallButton } < /ControlBar> < /Stack.Item> < /Stack>); } ; const mergeButtonBaseStyles = ( styles ) : IButtonStyles => mergeStyleSets ( controlButtonBaseStyle , styles ) ;