/* @flow */ import React from 'react'; import { Avatar, StatelessAvatar } from '../../../base/avatar'; import { getInitials } from '../../../base/avatar/functions'; import BaseTheme from '../../../base/ui/components/BaseTheme'; import { FACE_EXPRESSIONS } from '../../../face-landmarks/constants'; import TimeElapsed from './TimeElapsed'; /** * The type of the React {@code Component} props of {@link SpeakerStatsItem}. */ type Props = { /** * The name of the participant. */ displayName: string, /** * The object that has as keys the face expressions of the * participant and as values a number that represents the count . */ faceExpressions: Object, /** * True if the face expressions detection is not disabled. */ showFaceExpressions: boolean, /** * The total milliseconds the participant has been dominant speaker. */ dominantSpeakerTime: number, /** * The id of the user. */ participantId: string, /** * True if the participant is no longer in the meeting. */ hasLeft: boolean, /** * True if the participant is not shown in speaker stats. */ hidden: boolean, /** * True if the participant is currently the dominant speaker. */ isDominantSpeaker: boolean, /** * Styles for the item. */ styles: Object, /** * Invoked to obtain translated strings. */ t: Function } const SpeakerStatsItem = (props: Props) => { const hasLeftClass = props.hasLeft ? props.styles.hasLeft : ''; const rowDisplayClass = `row ${hasLeftClass} ${props.styles.item}`; const expressionClass = 'expression'; const nameTimeClass = `name-time${ props.showFaceExpressions ? ' name-time_expressions-on' : '' }`; const timeClass = `${props.styles.time} ${props.isDominantSpeaker ? props.styles.dominant : ''}`; const FaceExpressions = () => FACE_EXPRESSIONS.map( expression => (
{ props.faceExpressions[expression] }
) ); return (
{ props.hasLeft ? ( ) : ( ) }
{ props.displayName }
{ props.showFaceExpressions && (
)}
); }; export default SpeakerStatsItem;