import { DiagnosticQuality } from '@azure/communication-calling' ; import { ErrorBar , OnRenderAvatarCallback , ParticipantMenuItemsCallback } from '@internal/react-components' ; import React from 'react' ; import { AvatarPersonaDataCallback } from '../../common/AvatarPersona' ; import { CallCompositeOptions } from '../CallComposite' ; import { CallArrangement } from '../components/CallArrangement' ; import { MediaGallery } from '../components/MediaGallery' ; import { NetworkReconnectTile } from '../components/NetworkReconnectTile' ; import { useHandlers } from '../hooks/useHandlers' ; import { usePropsFor } from '../hooks/usePropsFor' ; import { useSelector } from '../hooks/useSelector' ; import { callStatusSelector } from '../selectors/callStatusSelector' ; import { complianceBannerSelector } from '../selectors/complianceBannerSelector' ; import { mediaGallerySelector } from '../selectors/mediaGallerySelector' ; import { mutedNotificationSelector } from '../selectors/mutedNotificationSelector' ; import { networkReconnectTileSelector } from '../selectors/networkReconnectTileSelector' ; import { reduceCallControlsForMobile } from '../utils' ; private export interface CallPageProps { mobileView : boolean ; callInvitationURL ? : string ; onRenderAvatar ? : OnRenderAvatarCallback ; onFetchAvatarPersonaData ? : AvatarPersonaDataCallback ; onFetchParticipantMenuItems ? : ParticipantMenuItemsCallback ; options ? : CallCompositeOptions ; } private export const CallPage = ( props ) : JSX . Element => { const { callInvitationURL , onRenderAvatar , onFetchAvatarPersonaData , onFetchParticipantMenuItems , options , mobileView } = props ; const { callStatus } = useSelector ( callStatusSelector ) ; const mediaGalleryProps = useSelector ( mediaGallerySelector ) ; const mediaGalleryHandlers = useHandlers ( MediaGallery ) ; const complianceBannerProps = useSelector ( complianceBannerSelector ) ; const errorBarProps = usePropsFor ( ErrorBar ) ; const mutedNotificationProps = useSelector ( mutedNotificationSelector ) ; const networkReconnectTileProps = useSelector ( networkReconnectTileSelector ) ; const callControlOptions = mobileView ? reduceCallControlsForMobile ( options ?. callControls ) : options ?. callControls ; return ( < CallArrangement complianceBannerProps = { { ... complianceBannerProps } } errorBarProps = { options ?. errorBar !== false && { ... errorBarProps } } mutedNotificationProps = { mutedNotificationProps } callControlProps = { { callInvitationURL : callInvitationURL , onFetchParticipantMenuItems : onFetchParticipantMenuItems , options : callControlOptions , increaseFlyoutItemSize : mobileView } } mobileView = { mobileView } onRenderGalleryContent = { ( ) => callStatus === 'Connected' ? ( isNetworkHealthy ( networkReconnectTileProps . networkReconnectValue ) ? ( < MediaGallery { ... mediaGalleryProps } { ... mediaGalleryHandlers } onRenderAvatar = { onRenderAvatar } onFetchAvatarPersonaData = { onFetchAvatarPersonaData } / > ) : ( < NetworkReconnectTile { ... networkReconnectTileProps } / > ) ) : ( < > < />)} dataUiId={'call-page'}/ > ) ; } ; private export const isNetworkHealthy = ( value ) : boolean => { return value === true || value === false || value === undefined || value === DiagnosticQuality . Good ; } ;