import classNames from 'classnames/bind' ; import React from 'react' ; import ViewMode from '../enums/ViewMode' ; import useAttendee from '../hooks/useAttendee' ; import Size from '../enums/Size' ; import styles from './VideoNameplate.css' ; const cx = classNames . bind ( styles ) ; type Props = { viewMode : ViewMode ; size : Size ; isContentShareEnabled : boolean ; attendeeId : string | null ; } ; export default function VideoNameplate ( props ) { const { viewMode , size , attendeeId , isContentShareEnabled } = props ; if ( ! attendeeId ) { return < > < />; } const attendee = useAttendee ( attendeeId ) ; if ( ! attendee . name || typeof ! attendee . muted !== 'boolean' ) { return < > < />; } const { name , muted } = attendee ; return ( < div className = { cx ( 'videoNameplate' , { roomMode : viewMode === ViewMode . Room , screenShareMode : viewMode === ViewMode . ScreenShare , small : size === Size . Small , medium : size === Size . Medium , large : size === Size . Large , isContentShareEnabled } ) } > < div className = { cx ( 'name' ) } > { name } < /div> < div className = { cx ( 'muted' ) } > { muted ? ( < i className = "fas fa-microphone-slash" / > ) : ( < i className = "fas fa-microphone" / > ) } < /div> < /div>); }