diff --git a/app/src/components/VideoContainers/FullView.js b/app/src/components/VideoContainers/FullView.js new file mode 100644 index 0000000..4e53a89 --- /dev/null +++ b/app/src/components/VideoContainers/FullView.js @@ -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 ( +
+
+ ); + } + + 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); diff --git a/app/src/components/VideoWindow/VideoWindow.js b/app/src/components/VideoWindow/VideoWindow.js index 61fb90c..f7bd796 100644 --- a/app/src/components/VideoWindow/VideoWindow.js +++ b/app/src/components/VideoWindow/VideoWindow.js @@ -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 ( -