Added FullView back because of bug in Chrome.

master
Håvar Aambø Fosstveit 2019-04-03 08:08:16 +02:00
parent fd1e512a80
commit 168affbc57
2 changed files with 124 additions and 3 deletions

View File

@ -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);

View File

@ -4,7 +4,7 @@ import NewWindow from './NewWindow';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import * as appPropTypes from '../appPropTypes'; import * as appPropTypes from '../appPropTypes';
import * as stateActions from '../../actions/stateActions'; import * as stateActions from '../../actions/stateActions';
import VideoView from '../VideoContainers/VideoView'; import FullView from '../VideoContainers/FullView';
const VideoWindow = (props) => const VideoWindow = (props) =>
{ {
@ -30,9 +30,8 @@ const VideoWindow = (props) =>
return ( return (
<NewWindow onUnload={toggleConsumerWindow}> <NewWindow onUnload={toggleConsumerWindow}>
<VideoView <FullView
advancedMode={advancedMode} advancedMode={advancedMode}
videoContain
videoTrack={consumer ? consumer.track : null} videoTrack={consumer ? consumer.track : null}
videoVisible={consumerVisible} videoVisible={consumerVisible}
videoProfile={consumerProfile} videoProfile={consumerProfile}