blob: 4956900a95919c88ed774ef4cf85394f19c420bf (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import $ from 'jquery';
import ReactDOM from 'react-dom';
import Constants from 'utils/constants.jsx';
import FileInfoPreview from './file_info_preview.jsx';
import * as Utils from 'utils/utils.jsx';
import React from 'react';
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
fileInfo={this.props.fileInfo}
fileUrl={this.props.fileUrl}
/>
);
}
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.fileInfo.id}
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 = {
fileInfo: React.PropTypes.object.isRequired,
fileUrl: React.PropTypes.string.isRequired,
maxHeight: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]).isRequired
};
|
