2019-10-07 17:11:53 -06:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import Hls from 'hls.js';
|
2017-06-13 18:40:05 -06:00
|
|
|
|
2018-09-03 15:13:25 -06:00
|
|
|
export default class HLS extends Component {
|
2017-06-13 18:40:05 -06:00
|
|
|
static propTypes = {
|
|
|
|
source: PropTypes.string.isRequired,
|
|
|
|
startTime: PropTypes.number.isRequired,
|
|
|
|
playbackSpeed: PropTypes.number.isRequired,
|
|
|
|
playing: PropTypes.bool.isRequired,
|
|
|
|
onVideoElementAvailable: PropTypes.func,
|
|
|
|
onClick: PropTypes.func,
|
2018-09-03 15:13:25 -06:00
|
|
|
onLoadStart: PropTypes.func,
|
|
|
|
onLoadEnd: PropTypes.func,
|
2017-06-14 18:08:25 -06:00
|
|
|
onPlaySeek: PropTypes.func,
|
2017-06-17 17:42:04 -06:00
|
|
|
segmentProgress: PropTypes.func,
|
|
|
|
shouldRestart: PropTypes.bool,
|
|
|
|
onRestart: PropTypes.func
|
2017-06-13 18:40:05 -06:00
|
|
|
};
|
|
|
|
|
|
|
|
componentWillReceiveProps(nextProps) {
|
2018-07-26 12:33:01 -06:00
|
|
|
this.videoElement.playbackRate = nextProps.playbackSpeed;
|
2018-07-24 16:09:29 -06:00
|
|
|
|
|
|
|
if (nextProps.source !== this.props.source) {
|
|
|
|
this.loadSource(nextProps.source);
|
|
|
|
}
|
2017-12-12 19:27:20 -07:00
|
|
|
if (nextProps.playing) {
|
2018-07-24 16:09:29 -06:00
|
|
|
if (
|
2019-10-07 17:11:53 -06:00
|
|
|
this.videoElement
|
|
|
|
&& (this.videoElement.paused || this.videoElement.currentTime < 0.01)
|
2018-07-24 16:09:29 -06:00
|
|
|
) {
|
|
|
|
this.videoElement.play();
|
|
|
|
}
|
2017-06-13 18:40:05 -06:00
|
|
|
} else {
|
|
|
|
this.videoElement.pause();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-12-15 13:43:56 -07:00
|
|
|
onSeeking = () => {
|
|
|
|
if (!this.props.playing) {
|
2018-09-03 15:13:25 -06:00
|
|
|
this.props.onLoadStart();
|
|
|
|
this.props.onPlaySeek(this.videoElement.currentTime);
|
2017-12-15 13:43:56 -07:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
// legacy outer scope variable. Revisit this to see if putting in state
|
|
|
|
// makes more sense
|
|
|
|
shouldInitVideoTime = true;
|
2019-10-07 17:11:53 -06:00
|
|
|
|
2017-12-15 13:43:56 -07:00
|
|
|
onSeeked = () => {
|
|
|
|
if (!this.props.playing) {
|
|
|
|
if (this.shouldInitVideoTime) {
|
2018-09-03 15:13:25 -06:00
|
|
|
this.videoElement.currentTime = this.props.startTime;
|
2017-12-15 13:43:56 -07:00
|
|
|
this.shouldInitVideoTime = false;
|
|
|
|
}
|
2018-09-03 15:13:25 -06:00
|
|
|
this.props.onLoadEnd();
|
2017-12-15 13:43:56 -07:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2017-06-13 18:40:05 -06:00
|
|
|
componentDidMount() {
|
2019-01-10 15:15:18 -07:00
|
|
|
this.player = new Hls({ disablePtsDtsCorrectionInMp4Remux: true });
|
2018-07-24 16:09:29 -06:00
|
|
|
this.loadSource();
|
|
|
|
}
|
|
|
|
|
|
|
|
loadSource(source = this.props.source) {
|
|
|
|
if (this.videoElement) {
|
|
|
|
this.player.loadSource(source);
|
|
|
|
this.player.attachMedia(this.videoElement);
|
|
|
|
this.props.onVideoElementAvailable(this.videoElement);
|
2019-09-11 14:36:15 -06:00
|
|
|
this.videoElement.currentTime = this.props.startTime;
|
2018-07-24 16:09:29 -06:00
|
|
|
}
|
|
|
|
}
|
2017-06-14 15:40:15 -06:00
|
|
|
|
2018-07-24 16:09:29 -06:00
|
|
|
componentWillUnmount() {
|
|
|
|
// destroy hls video source
|
|
|
|
if (this.player) {
|
|
|
|
this.player.destroy();
|
2017-07-05 16:57:03 -06:00
|
|
|
}
|
2017-06-13 18:40:05 -06:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2017-07-17 19:10:37 -06:00
|
|
|
return (
|
|
|
|
<div
|
2017-12-12 19:27:20 -07:00
|
|
|
className="cabana-explorer-visuals-camera-wrapper"
|
|
|
|
onClick={this.props.onClick}
|
|
|
|
>
|
|
|
|
<video
|
2019-10-07 17:11:53 -06:00
|
|
|
ref={(video) => {
|
2017-12-12 19:27:20 -07:00
|
|
|
this.videoElement = video;
|
|
|
|
}}
|
2018-07-24 16:09:29 -06:00
|
|
|
autoPlay={this.props.playing}
|
|
|
|
muted
|
2018-09-03 15:13:25 -06:00
|
|
|
onWaiting={this.props.onLoadStart}
|
|
|
|
onPlaying={this.props.onLoadEnd}
|
2017-12-15 13:43:56 -07:00
|
|
|
onSeeking={this.onSeeking}
|
|
|
|
onSeeked={this.onSeeked}
|
2017-12-12 19:27:20 -07:00
|
|
|
/>
|
2017-07-17 19:10:37 -06:00
|
|
|
</div>
|
|
|
|
);
|
2017-06-13 18:40:05 -06:00
|
|
|
}
|
|
|
|
}
|