import ImmutablePropTypes from 'react-immutable-proptypes'; import PureRenderMixin from 'react-addons-pure-render-mixin'; import IconButton from './icon_button'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; const messages = defineMessages({ toggle_sound: { id: 'video_player.toggle_sound', defaultMessage: 'Toggle sound' } }); const videoStyle = { position: 'relative', zIndex: '1', width: '100%', height: '100%', objectFit: 'cover', top: '50%', transform: 'translateY(-50%)' }; const muteStyle = { position: 'absolute', top: '10px', left: '10px', opacity: '0.8', zIndex: '5' }; const spoilerStyle = { marginTop: '8px', background: '#000', color: '#fff', textAlign: 'center', height: '100%', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' }; const spoilerSpanStyle = { display: 'block', fontSize: '14px' }; const spoilerSubSpanStyle = { display: 'block', fontSize: '11px', fontWeight: '500' }; const VideoPlayer = React.createClass({ propTypes: { media: ImmutablePropTypes.map.isRequired, width: React.PropTypes.number, height: React.PropTypes.number }, getDefaultProps () { return { width: 196, height: 110 }; }, getInitialState () { return { visible: false, muted: true }; }, mixins: [PureRenderMixin], handleClick () { this.setState({ muted: !this.state.muted }); }, handleVideoClick (e) { e.stopPropagation(); const node = ReactDOM.findDOMNode(this).querySelector('video'); if (node.paused) { node.play(); } else { node.pause(); } }, handleOpen () { this.setState({ visible: true }); }, render () { const { media, intl, width, height, sensitive } = this.props; if (sensitive && !this.state.visible) { return (
); } return (
); } }); export default injectIntl(VideoPlayer);