Added FullView back because of bug in Chrome.
parent
fd1e512a80
commit
168affbc57
|
|
@ -0,0 +1,122 @@
|
|||
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);
|
||||
|
|
@ -4,7 +4,7 @@ import NewWindow from './NewWindow';
|
|||
import PropTypes from 'prop-types';
|
||||
import * as appPropTypes from '../appPropTypes';
|
||||
import * as stateActions from '../../actions/stateActions';
|
||||
import VideoView from '../VideoContainers/VideoView';
|
||||
import FullView from '../VideoContainers/FullView';
|
||||
|
||||
const VideoWindow = (props) =>
|
||||
{
|
||||
|
|
@ -30,9 +30,8 @@ const VideoWindow = (props) =>
|
|||
|
||||
return (
|
||||
<NewWindow onUnload={toggleConsumerWindow}>
|
||||
<VideoView
|
||||
<FullView
|
||||
advancedMode={advancedMode}
|
||||
videoContain
|
||||
videoTrack={consumer ? consumer.track : null}
|
||||
videoVisible={consumerVisible}
|
||||
videoProfile={consumerProfile}
|
||||
|
|
|
|||
Loading…
Reference in New Issue