63 lines
1.6 KiB
JavaScript
63 lines
1.6 KiB
JavaScript
|
// @flow
|
||
|
|
||
|
import React from 'react';
|
||
|
import { View, Text } from 'react-native';
|
||
|
|
||
|
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
|
||
|
|
||
|
import TimeElapsed from './TimeElapsed';
|
||
|
import style from './styles';
|
||
|
|
||
|
type Props = {
|
||
|
|
||
|
/**
|
||
|
* The name of the participant.
|
||
|
*/
|
||
|
displayName: string,
|
||
|
|
||
|
/**
|
||
|
* The total milliseconds the participant has been dominant speaker.
|
||
|
*/
|
||
|
dominantSpeakerTime: number,
|
||
|
|
||
|
/**
|
||
|
* True if the participant is no longer in the meeting.
|
||
|
*/
|
||
|
hasLeft: boolean,
|
||
|
|
||
|
/**
|
||
|
* True if the participant is currently the dominant speaker.
|
||
|
*/
|
||
|
isDominantSpeaker: boolean
|
||
|
};
|
||
|
|
||
|
const SpeakerStatsItem = (props: Props) => {
|
||
|
/**
|
||
|
* @inheritdoc
|
||
|
* @returns {ReactElement}
|
||
|
*/
|
||
|
const dotColor = props.isDominantSpeaker
|
||
|
? BaseTheme.palette.icon05 : BaseTheme.palette.icon03;
|
||
|
|
||
|
return (
|
||
|
<View
|
||
|
key = { props.displayName + props.dominantSpeakerTime }
|
||
|
style = { style.speakerStatsItemContainer }>
|
||
|
<View style = { style.speakerStatsItemStatus }>
|
||
|
<View style = { [ style.speakerStatsItemStatusDot, { backgroundColor: dotColor } ] } />
|
||
|
</View>
|
||
|
<View style = { [ style.speakerStatsItemStatus, style.speakerStatsItemName ] }>
|
||
|
<Text>
|
||
|
{ props.displayName }
|
||
|
</Text>
|
||
|
</View>
|
||
|
<View style = { [ style.speakerStatsItemStatus, style.speakerStatsItemTime ] }>
|
||
|
<TimeElapsed
|
||
|
time = { props.dominantSpeakerTime } />
|
||
|
</View>
|
||
|
</View>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default SpeakerStatsItem;
|