123 lines
2.1 KiB
JavaScript
123 lines
2.1 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classnames from 'classnames';
|
|
import { withStyles } from '@material-ui/core/styles';
|
|
|
|
const styles = () =>
|
|
({
|
|
root :
|
|
{
|
|
position : 'relative',
|
|
flex : '100 100 auto',
|
|
height : '100%',
|
|
width : '100%',
|
|
display : 'flex',
|
|
flexDirection : 'column',
|
|
overflow : 'hidden'
|
|
},
|
|
video :
|
|
{
|
|
flex : '100 100 auto',
|
|
height : '100%',
|
|
width : '100%',
|
|
objectFit : 'contain',
|
|
userSelect : 'none',
|
|
transitionProperty : 'opacity',
|
|
transitionDuration : '.15s',
|
|
backgroundColor : 'rgba(0, 0, 0, 1)',
|
|
'&.hidden' :
|
|
{
|
|
opacity : 0,
|
|
transitionDuration : '0s'
|
|
},
|
|
'&.loading' :
|
|
{
|
|
filter : 'blur(5px)'
|
|
}
|
|
}
|
|
});
|
|
|
|
class FullView extends React.PureComponent
|
|
{
|
|
constructor(props)
|
|
{
|
|
super(props);
|
|
|
|
// Latest received video track.
|
|
// @type {MediaStreamTrack}
|
|
this._videoTrack = null;
|
|
|
|
this.video = React.createRef();
|
|
}
|
|
|
|
render()
|
|
{
|
|
const {
|
|
videoVisible,
|
|
videoProfile,
|
|
classes
|
|
} = this.props;
|
|
|
|
return (
|
|
<div className={classes.root}>
|
|
<video
|
|
ref={this.video}
|
|
className={classnames(classes.video, {
|
|
hidden : !videoVisible,
|
|
loading : videoProfile === 'none'
|
|
})}
|
|
autoPlay
|
|
playsInline
|
|
muted={Boolean(true)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
componentDidMount()
|
|
{
|
|
const { videoTrack } = this.props;
|
|
|
|
this._setTracks(videoTrack);
|
|
}
|
|
|
|
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,
|
|
classes : PropTypes.object.isRequired
|
|
};
|
|
|
|
export default withStyles(styles)(FullView);
|