41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { View, ViewStyle } from 'react-native';
|
|
|
|
import Avatar from '../../../base/avatar/components/Avatar';
|
|
import { ISubtitle } from '../../../subtitles/types';
|
|
|
|
import SubtitleMessage from './SubtitleMessage';
|
|
import { closedCaptionsStyles } from './styles';
|
|
|
|
|
|
interface IProps {
|
|
messages: ISubtitle[];
|
|
senderId: string;
|
|
}
|
|
|
|
export function SubtitlesGroup({ messages, senderId }: IProps) {
|
|
if (!messages.length) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<View style = { closedCaptionsStyles.subtitlesGroupContainer as ViewStyle }>
|
|
<View style = { closedCaptionsStyles.subtitlesGroupAvatar as ViewStyle }>
|
|
<Avatar
|
|
participantId = { senderId }
|
|
size = { 32 } />
|
|
</View>
|
|
<View style = { closedCaptionsStyles.subtitlesGroupMessagesContainer as ViewStyle }>
|
|
{
|
|
messages.map((message, index) => (
|
|
<SubtitleMessage
|
|
key = { `${message.timestamp}-${message.id}` }
|
|
showDisplayName = { index === 0 }
|
|
{ ...message } />
|
|
))
|
|
}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|