import React , { useEffect , useMemo , useState } from 'react' ; import { VideoGallery , VideoStreamOptions , OnRenderAvatarCallback } from '@internal/react-components' ; import { usePropsFor } from '../hooks/usePropsFor' ; import { AvatarPersona , AvatarPersonaDataCallback } from '../../common/AvatarPersona' ; import { mergeStyles , Stack } from '@fluentui/react' ; import { getIsPreviewCameraOn } from '../selectors/baseSelectors' ; import { useHandlers } from '../hooks/useHandlers' ; import { useSelector } from '../hooks/useSelector' ; const VideoGalleryStyles = { root : { height : '100%' , minHeight : '10rem' , minWidth : '6rem' } } ; const localVideoViewOptions = { scalingMode : 'Crop' , isMirrored : true } as VideoStreamOptions ; const remoteVideoViewOptions = { scalingMode : 'Crop' } as VideoStreamOptions ; private export interface MediaGalleryProps { isVideoStreamOn ? : boolean ; isMicrophoneChecked ? : boolean ; onStartLocalVideo : ( ) => Promise < void > ; onRenderAvatar ? : OnRenderAvatarCallback ; onFetchAvatarPersonaData ? : AvatarPersonaDataCallback ; } private export const MediaGallery = ( props ) : JSX . Element => { const videoGalleryProps = usePropsFor ( VideoGallery ) ; useLocalVideoStartTrigger ( ! ! props . isVideoStreamOn ) ; const VideoGalleryMemoized = useMemo ( ( ) => { return ( < VideoGallery { ... videoGalleryProps } localVideoViewOptions = { localVideoViewOptions } remoteVideoViewOptions = { remoteVideoViewOptions } styles = { VideoGalleryStyles } layout = "floatingLocalVideo" onRenderAvatar = { ( userId , options ) => ( < Stack className = { mergeStyles ( { position : 'absolute' , height : '100%' , width : '100%' } ) } > < AvatarPersona userId = { userId } { ... options } dataProvider = { props . onFetchAvatarPersonaData } / > < /Stack>)}/ > ) ; } , [ props . onFetchAvatarPersonaData , videoGalleryProps ] ) ; return VideoGalleryMemoized ; } ; private export const useLocalVideoStartTrigger = ( isLocalVideoAvailable , shouldTransition ? ) : void => { const [ isButtonStatusSynced , setIsButtonStatusSynced ] = useState ( false ) ; const isPreviewCameraOn = useSelector ( getIsPreviewCameraOn ) ; const mediaGalleryHandlers = useHandlers ( MediaGallery ) ; useEffect ( ( ) => { if ( shouldTransition !== false ) { if ( isPreviewCameraOn && ! isLocalVideoAvailable && ! isButtonStatusSynced ) { mediaGalleryHandlers . onStartLocalVideo ( ) ; } setIsButtonStatusSynced ( true ) ; } } , [ shouldTransition , isButtonStatusSynced , isPreviewCameraOn , isLocalVideoAvailable , mediaGalleryHandlers ] ) ; } ;