theluyuan
38ba663466
Some checks failed
Close stale issues and PRs / stale (push) Has been cancelled
77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { makeStyles } from 'tss-react/mui';
|
|
|
|
import Avatar from '../../../base/avatar/components/Avatar';
|
|
import { ISubtitle } from '../../../subtitles/types';
|
|
|
|
import SubtitleMessage from './SubtitleMessage';
|
|
|
|
/**
|
|
* Props for the SubtitlesGroup component.
|
|
*/
|
|
interface IProps {
|
|
|
|
/**
|
|
* Array of subtitle messages to be displayed in this group.
|
|
*/
|
|
messages: ISubtitle[];
|
|
|
|
/**
|
|
* The ID of the participant who sent these subtitles.
|
|
*/
|
|
senderId: string;
|
|
}
|
|
|
|
const useStyles = makeStyles()(theme => {
|
|
return {
|
|
groupContainer: {
|
|
display: 'flex',
|
|
marginBottom: theme.spacing(3)
|
|
},
|
|
|
|
avatar: {
|
|
marginRight: theme.spacing(2),
|
|
alignSelf: 'flex-start'
|
|
},
|
|
|
|
messagesContainer: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
flex: 1,
|
|
maxWidth: 'calc(100% - 56px)', // 40px avatar + 16px margin
|
|
gap: theme.spacing(1)
|
|
}
|
|
};
|
|
});
|
|
|
|
/**
|
|
* Component that renders a group of subtitle messages from the same sender.
|
|
*
|
|
* @param {IProps} props - The props for the component.
|
|
* @returns {JSX.Element} - A React component rendering a group of subtitles.
|
|
*/
|
|
export function SubtitlesGroup({ messages, senderId }: IProps) {
|
|
const { classes } = useStyles();
|
|
|
|
if (!messages.length) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className = { classes.groupContainer }>
|
|
<Avatar
|
|
className = { classes.avatar }
|
|
participantId = { senderId }
|
|
size = { 32 } />
|
|
<div className = { classes.messagesContainer }>
|
|
{messages.map((message, index) => (
|
|
<SubtitleMessage
|
|
key = { `${message.timestamp}-${message.id}` }
|
|
showDisplayName = { index === 0 }
|
|
{ ...message } />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|