69 lines
1.8 KiB
JavaScript
69 lines
1.8 KiB
JavaScript
// @flow
|
|
|
|
import React from 'react';
|
|
|
|
import { Container, Text } from '../../base/react';
|
|
import { connect } from '../../base/redux';
|
|
|
|
import {
|
|
_abstractMapStateToProps,
|
|
AbstractCaptions,
|
|
type AbstractCaptionsProps
|
|
} from './AbstractCaptions';
|
|
import styles from './styles';
|
|
|
|
/**
|
|
* The type of the React {@code Component} props of {@link Captions}.
|
|
*/
|
|
type Props = AbstractCaptionsProps & {
|
|
onPress: Function
|
|
};
|
|
|
|
/**
|
|
* React {@code Component} which can display speech-to-text results from
|
|
* Jigasi as subtitles.
|
|
*/
|
|
class Captions
|
|
extends AbstractCaptions<Props> {
|
|
|
|
/**
|
|
* Renders the transcription text.
|
|
*
|
|
* @param {string} id - The ID of the transcript message from which the
|
|
* {@code text} has been created.
|
|
* @param {string} text - Subtitles text formatted with the participant's
|
|
* name.
|
|
* @protected
|
|
* @returns {React$Element} - The React element which displays the text.
|
|
*/
|
|
_renderParagraph(id: string, text: string): React$Element<*> {
|
|
return (
|
|
<Text
|
|
key = { id }
|
|
onPress = { this.props.onPress }
|
|
style = { styles.subtitle } >
|
|
{ text }
|
|
</Text>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Renders the subtitles container.
|
|
*
|
|
* @param {Array<React$Element>} paragraphs - An array of elements created
|
|
* for each subtitle using the {@link _renderParagraph} method.
|
|
* @protected
|
|
* @returns {React$Element} - The subtitles container.
|
|
*/
|
|
_renderSubtitlesContainer(
|
|
paragraphs: Array<React$Element<*>>): React$Element<*> {
|
|
return (
|
|
<Container style = { styles.subtitlesContainer } >
|
|
{ paragraphs }
|
|
</Container>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default connect(_abstractMapStateToProps)(Captions);
|