import { DefaultModality , VideoTileState } from 'amazon-chime-sdk-js' ; import classNames from 'classnames/bind' ; import React , { useContext , useEffect , useRef , useState } from 'react' ; import ChimeSdkWrapper from '../chime/ChimeSdkWrapper' ; import getChimeContext from '../context/getChimeContext' ; import styles from './ContentVideo.css' ; const cx = classNames . bind ( styles ) ; type Props = { onContentShareEnabled : ( enabled : boolean ) => void ; } ; export default function ContentVideo ( props ) { const { onContentShareEnabled } = props ; const [ enabled , setEnabled ] = useState ( false ) ; const chime = useContext ( getChimeContext ( ) ) ; const videoElement = useRef ( null ) ; useEffect ( ( ) => { const contentTileIds = new Set ( ) ; chime ?. audioVideo ?. addObserver ( { videoTileDidUpdate : ( tileState ) : void => { if ( ! tileState . boundAttendeeId || ! tileState . isContent || ! tileState . tileId ) { return ; } const modality = new DefaultModality ( tileState . boundAttendeeId ) ; if ( modality . base ( ) === chime ?. meetingSession ?. configuration . credentials ?. attendeeId && modality . hasModality ( DefaultModality . MODALITY_CONTENT ) ) { return ; } chime ?. audioVideo ?. bindVideoElement ( tileState . tileId , ( videoElement . current as unknown ) as HTMLVideoElement ) ; if ( tileState . active ) { contentTileIds . add ( tileState . tileId ) ; setEnabled ( true ) ; } else { contentTileIds . delete ( tileState . tileId ) ; setEnabled ( contentTileIds . size > 0 ) ; } } , videoTileWasRemoved : ( tileId ) : void => { if ( contentTileIds . has ( tileId ) ) { contentTileIds . delete ( tileId ) ; setEnabled ( contentTileIds . size > 0 ) ; } } } ) ; } , [ ] ) ; useEffect ( ( ) => { onContentShareEnabled ( enabled ) ; } , [ enabled ] ) ; return ( < div className = { cx ( 'contentVideo' ) } > < video muted ref = { videoElement } className = { cx ( 'video' ) } / > < /div>); }