106 lines
1.8 KiB
JavaScript
106 lines
1.8 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classnames from 'classnames';
|
|
import Spinner from 'react-spinner';
|
|
import fscreen from 'fscreen';
|
|
|
|
export default class FullView extends React.Component
|
|
{
|
|
constructor(props)
|
|
{
|
|
super(props);
|
|
|
|
// Latest received video track.
|
|
// @type {MediaStreamTrack}
|
|
this._videoTrack = null;
|
|
|
|
this.video = React.createRef();
|
|
}
|
|
|
|
render()
|
|
{
|
|
const {
|
|
videoVisible,
|
|
videoProfile
|
|
} = this.props;
|
|
|
|
return (
|
|
<div data-component='FullView'>
|
|
<video
|
|
ref={this.video}
|
|
className={classnames({
|
|
hidden : !videoVisible,
|
|
loading : videoProfile === 'none'
|
|
})}
|
|
autoPlay
|
|
muted={Boolean(true)}
|
|
/>
|
|
|
|
{videoProfile === 'none' ?
|
|
<div className='spinner-container'>
|
|
<Spinner />
|
|
</div>
|
|
:null
|
|
}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
componentDidMount()
|
|
{
|
|
const { videoTrack } = this.props;
|
|
|
|
this._setTracks(videoTrack);
|
|
|
|
if (fscreen.fullscreenEnabled) {
|
|
fscreen.addEventListener('fullscreenchange', this.handleExitFullscreen, false);
|
|
fscreen.requestFullscreen(this.video.current);
|
|
}
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
fscreen.removeEventListener('fullscreenchange', this.handleExitFullscreen);
|
|
}
|
|
|
|
handleExitFullscreen = () => {
|
|
if (!fscreen.fullscreenElement) {
|
|
this.props.toggleFullscreen();
|
|
}
|
|
};
|
|
|
|
componentDidUpdate()
|
|
{
|
|
const { videoTrack } = this.props;
|
|
|
|
this._setTracks(videoTrack);
|
|
}
|
|
|
|
_setTracks(videoTrack)
|
|
{
|
|
if (this._videoTrack === videoTrack)
|
|
return;
|
|
|
|
this._videoTrack = videoTrack;
|
|
|
|
const video = this.video.current;
|
|
|
|
if (videoTrack)
|
|
{
|
|
const stream = new MediaStream;
|
|
stream.addTrack(videoTrack);
|
|
video.srcObject = stream;
|
|
}
|
|
else
|
|
{
|
|
video.srcObject = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
FullView.propTypes =
|
|
{
|
|
videoTrack : PropTypes.any,
|
|
videoVisible : PropTypes.bool,
|
|
videoProfile : PropTypes.string
|
|
};
|