spee.ch/react/components/Preview.jsx
2018-01-12 15:02:42 -08:00

49 lines
1.2 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
class Preview extends React.Component {
constructor (props) {
super(props);
this.state = {
previewSource: '',
}
this.previewFile = this.previewFile.bind(this);
}
componentWillMount () {
console.log('Preview will mount');
this.previewFile(this.props.file);
}
componentWillReceiveProps (newProps) {
this.previewFile(newProps.file);
}
previewFile (file) {
const that = this;
if (file.type !== 'video/mp4') {
const previewReader = new FileReader();
previewReader.readAsDataURL(file);
previewReader.onloadend = function () {
that.setState({previewSource: previewReader.result});
};
} else {
that.setState({previewSource: (this.props.thumbnail || '/assets/img/video_thumb_default.png')});
}
}
render () {
return (
<img
id="asset-preview"
src={this.state.previewSource}
className={this.props.dimPreview ? 'dim' : ''}
alt="publish preview"
/>
);
}
};
Preview.propTypes = {
file : PropTypes.object.isRequired,
thumbnail : PropTypes.string.isRequired,
dimPreview: PropTypes.bool.isRequired,
};
export default Preview;