diff options
author | hmhealey <harrisonmhealey@gmail.com> | 2016-01-05 15:49:45 -0500 |
---|---|---|
committer | hmhealey <harrisonmhealey@gmail.com> | 2016-01-06 09:44:12 -0500 |
commit | 239d147d9757c62cbfb6ae7b2900b0e5ace6f71c (patch) | |
tree | 05032970def7f0a021fe4d5c403f0fb973c24ae9 /web/react/components/audio_video_preview.jsx | |
parent | 0eb145218edb37d911cc5ec135b0006f866a44b2 (diff) | |
download | chat-239d147d9757c62cbfb6ae7b2900b0e5ace6f71c.tar.gz chat-239d147d9757c62cbfb6ae7b2900b0e5ace6f71c.tar.bz2 chat-239d147d9757c62cbfb6ae7b2900b0e5ace6f71c.zip |
Changed Audio/Video preview to just display a file info when encountering a file that cannot be played
Diffstat (limited to 'web/react/components/audio_video_preview.jsx')
-rw-r--r-- | web/react/components/audio_video_preview.jsx | 114 |
1 files changed, 114 insertions, 0 deletions
diff --git a/web/react/components/audio_video_preview.jsx b/web/react/components/audio_video_preview.jsx new file mode 100644 index 000000000..7d00fbdaa --- /dev/null +++ b/web/react/components/audio_video_preview.jsx @@ -0,0 +1,114 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import Constants from '../utils/constants.jsx'; +import FileInfoPreview from './file_info_preview.jsx'; +import * as Utils from '../utils/utils.jsx'; + +export default class AudioVideoPreview extends React.Component { + constructor(props) { + super(props); + + this.handleFileInfoChanged = this.handleFileInfoChanged.bind(this); + this.handleLoadError = this.handleLoadError.bind(this); + + this.stop = this.stop.bind(this); + + this.state = { + canPlay: true + }; + } + + componentWillMount() { + this.handleFileInfoChanged(this.props.fileInfo); + } + + componentDidMount() { + if (this.refs.source) { + $(ReactDOM.findDOMNode(this.refs.source)).one('error', this.handleLoadError); + } + } + + componentWillReceiveProps(nextProps) { + if (this.props.fileUrl !== nextProps.fileUrl) { + this.handleFileInfoChanged(nextProps.fileInfo); + } + } + + handleFileInfoChanged(fileInfo) { + let video = ReactDOM.findDOMNode(this.refs.video); + if (!video) { + video = document.createElement('video'); + } + + const canPlayType = video.canPlayType(fileInfo.mime_type); + + this.setState({ + canPlay: canPlayType === 'probably' || canPlayType === 'maybe' + }); + } + + componentDidUpdate() { + if (this.refs.source) { + $(ReactDOM.findDOMNode(this.refs.source)).one('error', this.handleLoadError); + } + } + + handleLoadError() { + this.setState({ + canPlay: false + }); + } + + stop() { + if (this.refs.video) { + const video = ReactDOM.findDOMNode(this.refs.video); + video.pause(); + video.currentTime = 0; + } + } + + render() { + if (!this.state.canPlay) { + return ( + <FileInfoPreview + filename={this.props.filename} + fileUrl={this.props.fileUrl} + fileInfo={this.props.fileInfo} + /> + ); + } + + let width = Constants.WEB_VIDEO_WIDTH; + let height = Constants.WEB_VIDEO_HEIGHT; + if (Utils.isMobile()) { + width = Constants.MOBILE_VIDEO_WIDTH; + height = Constants.MOBILE_VIDEO_HEIGHT; + } + + // add a key to the video to prevent React from using an old video source while a new one is loading + return ( + <video + key={this.props.filename} + ref='video' + style={{maxHeight: this.props.maxHeight}} + data-setup='{}' + controls='controls' + width={width} + height={height} + > + <source + ref='source' + src={this.props.fileUrl} + /> + </video> + ); + } +} + +AudioVideoPreview.propTypes = { + filename: React.PropTypes.string.isRequired, + fileUrl: React.PropTypes.string.isRequired, + fileInfo: React.PropTypes.object.isRequired, + maxHeight: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]).isRequired +}; |