65 lines
1.8 KiB
JavaScript
Executable File
65 lines
1.8 KiB
JavaScript
Executable File
import React, { PropTypes } from 'react';
|
|
import styles from './styles.scss';
|
|
import { findDOMNode } from 'react-dom';
|
|
|
|
export default class ClosedCaptions extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.shouldScrollBottom = false;
|
|
}
|
|
|
|
renderCaptions(caption) {
|
|
let text = caption.captions;
|
|
return (
|
|
<span
|
|
style={{ whiteSpace: 'pre-wrap', wordWrap: 'break-word', fontFamily: this.props.fontFamily, fontSize: this.props.fontSize, color: this.props.fontColor }}
|
|
dangerouslySetInnerHTML={{ __html: text }}
|
|
key={caption.index}
|
|
/>
|
|
);
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
const { ccScrollArea } = this.refs;
|
|
|
|
var node = findDOMNode(ccScrollArea);
|
|
node.scrollTop = node.scrollHeight;
|
|
}
|
|
|
|
componentWillUpdate() {
|
|
const { ccScrollArea } = this.refs;
|
|
|
|
var node = findDOMNode(ccScrollArea);
|
|
// number 4 is for the border
|
|
// offset height includes the border, but scrollheight doesn't
|
|
this.shouldScrollBottom = node.scrollTop + node.offsetHeight - 4 === node.scrollHeight;
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
if (this.shouldScrollBottom) {
|
|
const { ccScrollArea } = this.refs;
|
|
var node = findDOMNode(ccScrollArea);
|
|
node.scrollTop = node.scrollHeight
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div disabled className={styles.ccbox}>
|
|
<div className={styles.title}>
|
|
<p> {this.props.locale ? this.props.locale : 'Locale is not selected'} </p>
|
|
</div>
|
|
<div
|
|
ref="ccScrollArea"
|
|
className={styles.frame}
|
|
style={{background: this.props.backgroundColor}}>
|
|
{this.props.captions[this.props.locale] ? this.props.captions[this.props.locale].captions.map((caption) => (
|
|
this.renderCaptions(caption)
|
|
)) : null }
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|