46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { Text, View, ViewStyle } from 'react-native';
|
|
import { useSelector } from 'react-redux';
|
|
|
|
import { IReduxState } from '../../../app/types';
|
|
import { getParticipantDisplayName } from '../../../base/participants/functions';
|
|
import { ISubtitle } from '../../../subtitles/types';
|
|
|
|
import { closedCaptionsStyles } from './styles';
|
|
|
|
|
|
interface IProps extends ISubtitle {
|
|
showDisplayName: boolean;
|
|
}
|
|
|
|
export default function SubtitleMessage({ participantId, text, timestamp, interim, showDisplayName }: IProps) {
|
|
const participantName = useSelector((state: IReduxState) =>
|
|
getParticipantDisplayName(state, participantId));
|
|
|
|
const containerStyle: ViewStyle[] = [
|
|
closedCaptionsStyles.subtitleMessageContainer as ViewStyle
|
|
];
|
|
|
|
if (interim) {
|
|
containerStyle.push(closedCaptionsStyles.subtitleMessageInterim as ViewStyle);
|
|
}
|
|
|
|
return (
|
|
<View style = { containerStyle }>
|
|
<View style = { closedCaptionsStyles.subtitleMessageContent as ViewStyle }>
|
|
{
|
|
showDisplayName && (
|
|
<Text style = { closedCaptionsStyles.subtitleMessageHeader }>
|
|
{ participantName }
|
|
</Text>
|
|
)
|
|
}
|
|
<Text style = { closedCaptionsStyles.subtitleMessageText }>{ text }</Text>
|
|
<Text style = { closedCaptionsStyles.subtitleMessageTimestamp }>
|
|
{ new Date(timestamp).toLocaleTimeString() }
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|