import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import IconButton from './icon_button'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { isIOS } from '../is_mobile'; const messages = defineMessages({ toggle_sound: { id: 'video_player.toggle_sound', defaultMessage: 'Toggle sound' }, toggle_visible: { id: 'video_player.toggle_visible', defaultMessage: 'Toggle visibility' }, expand_video: { id: 'video_player.expand', defaultMessage: 'Expand video' }, }); class VideoPlayer extends React.PureComponent { constructor (props, context) { super(props, context); this.state = { visible: !this.props.sensitive, preview: true, muted: true, hasAudio: true, videoError: false }; this.handleClick = this.handleClick.bind(this); this.handleVideoClick = this.handleVideoClick.bind(this); this.handleOpen = this.handleOpen.bind(this); this.handleVisibility = this.handleVisibility.bind(this); this.handleExpand = this.handleExpand.bind(this); this.setRef = this.setRef.bind(this); this.handleLoadedData = this.handleLoadedData.bind(this); this.handleVideoError = this.handleVideoError.bind(this); } handleClick () { this.setState({ muted: !this.state.muted }); } handleVideoClick (e) { e.stopPropagation(); const node = this.video; if (node.paused) { node.play(); } else { node.pause(); } } handleOpen () { this.setState({ preview: !this.state.preview }); } handleVisibility () { this.setState({ visible: !this.state.visible, preview: true }); } handleExpand () { this.video.pause(); this.props.onOpenVideo(this.props.media, this.video.currentTime); } setRef (c) { this.video = c; } handleLoadedData () { if (('WebkitAppearance' in document.documentElement.style && this.video.audioTracks.length === 0) || this.video.mozHasAudio === false) { this.setState({ hasAudio: false }); } } handleVideoError () { this.setState({ videoError: true }); } componentDidMount () { if (!this.video) { return; } this.video.addEventListener('loadeddata', this.handleLoadedData); this.video.addEventListener('error', this.handleVideoError); } componentDidUpdate () { if (!this.video) { return; } this.video.addEventListener('loadeddata', this.handleLoadedData); this.video.addEventListener('error', this.handleVideoError); } componentWillUnmount () { if (!this.video) { return; } this.video.removeEventListener('loadeddata', this.handleLoadedData); this.video.removeEventListener('error', this.handleVideoError); } render () { const { media, intl, width, height, sensitive, autoplay } = this.props; let spoilerButton = (
); let expandButton = (
); let muteButton = ''; if (this.state.hasAudio) { muteButton = (
); } if (!this.state.visible) { if (sensitive) { return (
{spoilerButton}
); } else { return (
{spoilerButton}
); } } if (this.state.preview && !autoplay) { return (
{spoilerButton}
); } if (this.state.videoError) { return (
); } return (
{spoilerButton} {muteButton} {expandButton}
); } } VideoPlayer.propTypes = { media: ImmutablePropTypes.map.isRequired, width: PropTypes.number, height: PropTypes.number, sensitive: PropTypes.bool, intl: PropTypes.object.isRequired, autoplay: PropTypes.bool, onOpenVideo: PropTypes.func.isRequired }; VideoPlayer.defaultProps = { width: 239, height: 110 }; export default injectIntl(VideoPlayer);