import { GroupCallLocator , GroupLocator , TeamsMeetingLinkLocator } from '@azure/communication-calling' ; import { CommunicationUserIdentifier } from '@azure/communication-common' ; import { initializeIcons , Spinner } from '@fluentui/react' ; import React , { useEffect , useState } from 'react' ; import { buildTime , callingSDKVersion , createGroupId , fetchTokenResponse , getGroupIdFromUrl , getTeamsLinkFromUrl , isMobileSession , isOnIphoneAndNotSafari , isSmallScreen , navigateToHomePage } from './utils/AppUtils' ; import { CallError } from './views/CallError' ; import { CallScreen } from './views/CallScreen' ; import { EndCall } from './views/EndCall' ; import { HomeScreen } from './views/HomeScreen' ; import { UnsupportedBrowserPage } from './views/UnsupportedBrowserPage' ; console . log ( `ACS sample calling app. Last Updated ${ buildTime } Using @azure/communication-calling:${ callingSDKVersion }` ) ; initializeIcons ( ) ; type AppPages = 'home' | 'call' | 'endCall' ; const webAppTitle = document . title ; const App = ( ) : JSX . Element => { const [ page , setPage ] = useState < AppPages > ( 'home' ) ; const [ token , setToken ] = useState < string > ( ) ; const [ userId , setUserId ] = useState < CommunicationUserIdentifier > ( ) ; const [ userCredentialFetchError , setUserCredentialFetchError ] = useState < boolean > ( false ) ; const [ callLocator , setCallLocator ] = useState < GroupLocator | TeamsMeetingLinkLocator > ( createGroupId ( ) ) ; const [ displayName , setDisplayName ] = useState < string > ( '' ) ; useEffect ( ( ) => { ( async ( ) => { try { const { token , user } = await fetchTokenResponse ( ) ; setToken ( token ) ; setUserId ( user ) ; } catch ( e ) { console . error ( e ) ; setUserCredentialFetchError ( true ) ; } } ) ( ) ; } , [ ] ) ; const supportedBrowser = ! isOnIphoneAndNotSafari ( ) ; if ( ! supportedBrowser ) { return < UnsupportedBrowserPage />; } if ( isMobileSession ( ) || isSmallScreen ( ) ) { console . log ( 'ACS Calling sample: This is experimental behaviour' ) ; } switch ( page ) { case 'home' : { document . title = `home - ${ webAppTitle }` ; const joiningExistingCall = ! ! getGroupIdFromUrl ( ) || ! ! getTeamsLinkFromUrl ( ) ; return ( < HomeScreen joiningExistingCall = { joiningExistingCall } startCallHandler = { ( callDetails ) => { setDisplayName ( callDetails . displayName ) ; const isTeamsCall = ! ! callDetails . teamsLink ; const callLocator = callDetails . teamsLink || getTeamsLinkFromUrl ( ) || getGroupIdFromUrl ( ) || createGroupId ( ) ; setCallLocator ( callLocator ) ; if ( ! joiningExistingCall ) { const joinParam = isTeamsCall ? '?teamsLink=' + encodeURIComponent ( ( callLocator as TeamsMeetingLinkLocator ) . meetingLink ) : '?groupId=' + ( callLocator as GroupCallLocator ) . groupId ; window . history . pushState ( { } , document . title , window . location . origin + joinParam ) ; } setPage ( 'call' ) ; } } />); } case 'endCall' : { document . title = `end call - ${ webAppTitle }` ; return < EndCall rejoinHandler = { ( ) => setPage ( 'call' ) } homeHandler = { navigateToHomePage } / > ; } case 'call' : { if ( userCredentialFetchError ) { document . title = `error - ${ webAppTitle }` ; return ( < CallError title = "Error getting user credentials from server" reason = "Ensure the sample server is running." rejoinHandler = { ( ) => setPage ( 'call' ) } homeHandler = { navigateToHomePage } / > ) ; } if ( ! token || ! userId || ! displayName || ! callLocator ) { document . title = `credentials - ${ webAppTitle }` ; return < Spinner label = { 'Getting user credentials from server' } ariaLive = "assertive" labelPosition = "top" / > ; } return ( < CallScreen token = { token } userId = { userId } displayName = { displayName } callLocator = { callLocator } onCallEnded = { ( ) => setPage ( 'endCall' ) } webAppTitle = { webAppTitle } / > ) ; } default : document . title = `error - ${ webAppTitle }` ; return < > Invalid page < />; } } ; export default App ;