import React , { useEffect , useMemo } from 'react' ; import { OnRenderAvatarCallback , VideoStreamOptions } from '../types' ; import { StreamMedia } from './StreamMedia' ; import { VideoTile } from './VideoTile' ; /**
 * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance
 * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the
 * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo
 */ export const RemoteVideoTile = React . memo ( ( props ) => { const { isAvailable , isMuted , isSpeaking , isScreenSharingOn , onCreateRemoteStreamView , onDisposeRemoteStreamView , remoteVideoViewOptions , renderElement , userId , displayName , onRenderAvatar , showMuteIndicator } = props ; useEffect ( ( ) => { if ( isAvailable && ! renderElement ) { onCreateRemoteStreamView && onCreateRemoteStreamView ( userId , remoteVideoViewOptions ) ; } return ( ) => { if ( renderElement && ! isScreenSharingOn ) { onDisposeRemoteStreamView && onDisposeRemoteStreamView ( userId ) ; } } ; } , [ isAvailable , onCreateRemoteStreamView , onDisposeRemoteStreamView , remoteVideoViewOptions , renderElement , userId , isScreenSharingOn ] ) ; useEffect ( ( ) => { return ( ) => { if ( ! isScreenSharingOn ) { onDisposeRemoteStreamView && onDisposeRemoteStreamView ( userId ) ; } } ; } , [ onDisposeRemoteStreamView , userId , isScreenSharingOn ] ) ; const renderVideoStreamElement = useMemo ( ( ) => { if ( ! renderElement || ! renderElement . childElementCount ) { return undefined ; } return < StreamMedia videoStreamElement = { renderElement } />; } , [ renderElement ] ) ; return ( < VideoTile key = { userId } userId = { userId } renderElement = { renderVideoStreamElement } displayName = { displayName } onRenderPlaceholder = { onRenderAvatar } isMuted = { isMuted } isSpeaking = { isSpeaking } showMuteIndicator = { showMuteIndicator } / > ) ; } ) ;