Cleanup of Me, Peer, PeerView, ScreenView and Democratic
This commit is contained in:
Håvar Aambø Fosstveit
@@ -1,246 +0,0 @@
|
||||
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',
|
||||
backgroundColor : 'var(--peer-bg-color)',
|
||||
backgroundImage : 'var(--peer-empty-avatar)',
|
||||
backgroundPosition : 'bottom',
|
||||
backgroundSize : 'auto 85%',
|
||||
backgroundRepeat : 'no-repeat'
|
||||
},
|
||||
video :
|
||||
{
|
||||
flex : '100 100 auto',
|
||||
height : '100%',
|
||||
width : '100%',
|
||||
objectFit : 'cover',
|
||||
userSelect : 'none',
|
||||
transitionProperty : 'opacity',
|
||||
transitionDuration : '.15s',
|
||||
backgroundColor : 'var(--peer-video-bg-color)',
|
||||
'&.is-me' :
|
||||
{
|
||||
transform : 'scaleX(-1)'
|
||||
},
|
||||
'&.hidden' :
|
||||
{
|
||||
opacity : 0,
|
||||
transitionDuration : '0s'
|
||||
},
|
||||
'&.loading' :
|
||||
{
|
||||
filter : 'blur(5px)'
|
||||
}
|
||||
},
|
||||
info :
|
||||
{
|
||||
position : 'absolute',
|
||||
zIndex : 10,
|
||||
top : '0.6vmin',
|
||||
left : '0.6vmin',
|
||||
bottom : 0,
|
||||
right : 0,
|
||||
display : 'flex',
|
||||
flexDirection : 'column',
|
||||
justifyContent : 'space-between'
|
||||
},
|
||||
media :
|
||||
{
|
||||
flex : '0 0 auto',
|
||||
display : 'flex',
|
||||
flexDirection : 'row'
|
||||
},
|
||||
box :
|
||||
{
|
||||
padding : '0.4vmin',
|
||||
borderRadius : 2,
|
||||
backgroundColor : 'rgba(0, 0, 0, 0.25)',
|
||||
'& p' :
|
||||
{
|
||||
userSelect : 'none',
|
||||
pointerEvents : 'none',
|
||||
margin : 0,
|
||||
color : 'rgba(255, 255, 255, 0.7)',
|
||||
fontSize : 10,
|
||||
|
||||
'&:last-child' :
|
||||
{
|
||||
marginBottom : 0
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
class ScreenView extends React.PureComponent
|
||||
{
|
||||
constructor(props)
|
||||
{
|
||||
super(props);
|
||||
|
||||
this.state =
|
||||
{
|
||||
screenWidth : null,
|
||||
screenHeight : null
|
||||
};
|
||||
|
||||
// Latest received screen track.
|
||||
// @type {MediaStreamTrack}
|
||||
this._screenTrack = null;
|
||||
|
||||
// Periodic timer for showing video resolution.
|
||||
this._screenResolutionTimer = null;
|
||||
}
|
||||
|
||||
render()
|
||||
{
|
||||
const {
|
||||
isMe,
|
||||
advancedMode,
|
||||
screenVisible,
|
||||
screenProfile,
|
||||
screenCodec,
|
||||
classes
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
screenWidth,
|
||||
screenHeight
|
||||
} = this.state;
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<div className={classes.info}>
|
||||
{ advancedMode ?
|
||||
<div className={classnames(classes.media, { 'is-me': isMe })}>
|
||||
{ screenVisible ?
|
||||
<div className={classes.box}>
|
||||
{ screenCodec ?
|
||||
<p>{screenCodec} {screenProfile}</p>
|
||||
:null
|
||||
}
|
||||
|
||||
{ (screenVisible && screenWidth !== null) ?
|
||||
<p>{screenWidth}x{screenHeight}</p>
|
||||
:null
|
||||
}
|
||||
</div>
|
||||
:null
|
||||
}
|
||||
</div>
|
||||
:null
|
||||
}
|
||||
</div>
|
||||
|
||||
<video
|
||||
ref='video'
|
||||
className={classnames(classes.video, {
|
||||
hidden : !screenVisible,
|
||||
'is-me' : isMe,
|
||||
loading : screenProfile === 'none'
|
||||
})}
|
||||
autoPlay
|
||||
playsInline
|
||||
muted={Boolean(true)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
componentDidMount()
|
||||
{
|
||||
const { screenTrack } = this.props;
|
||||
|
||||
this._setTracks(screenTrack);
|
||||
}
|
||||
|
||||
componentWillUnmount()
|
||||
{
|
||||
clearInterval(this._screenResolutionTimer);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps)
|
||||
{
|
||||
const { screenTrack } = nextProps;
|
||||
|
||||
this._setTracks(screenTrack);
|
||||
}
|
||||
|
||||
_setTracks(screenTrack)
|
||||
{
|
||||
if (this._screenTrack === screenTrack)
|
||||
return;
|
||||
|
||||
this._screenTrack = screenTrack;
|
||||
|
||||
clearInterval(this._screenResolutionTimer);
|
||||
this._hideScreenResolution();
|
||||
|
||||
const { video } = this.refs;
|
||||
|
||||
if (screenTrack)
|
||||
{
|
||||
const stream = new MediaStream();
|
||||
|
||||
if (screenTrack)
|
||||
stream.addTrack(screenTrack);
|
||||
|
||||
video.srcObject = stream;
|
||||
|
||||
if (screenTrack)
|
||||
this._showScreenResolution();
|
||||
}
|
||||
else
|
||||
{
|
||||
video.srcObject = null;
|
||||
}
|
||||
}
|
||||
|
||||
_showScreenResolution()
|
||||
{
|
||||
this._screenResolutionTimer = setInterval(() =>
|
||||
{
|
||||
const { screenWidth, screenHeight } = this.state;
|
||||
const { video } = this.refs;
|
||||
|
||||
// Don't re-render if nothing changed.
|
||||
if (video.videoWidth === screenWidth && video.videoHeight === screenHeight)
|
||||
return;
|
||||
|
||||
this.setState(
|
||||
{
|
||||
screenWidth : video.videoWidth,
|
||||
screenHeight : video.videoHeight
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
_hideScreenResolution()
|
||||
{
|
||||
this.setState({ screenWidth: null, screenHeight: null });
|
||||
}
|
||||
}
|
||||
|
||||
ScreenView.propTypes =
|
||||
{
|
||||
isMe : PropTypes.bool,
|
||||
advancedMode : PropTypes.bool,
|
||||
screenTrack : PropTypes.any,
|
||||
screenVisible : PropTypes.bool,
|
||||
screenProfile : PropTypes.string,
|
||||
screenCodec : PropTypes.string,
|
||||
classes : PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default withStyles(styles)(ScreenView);
|
||||
+46
-46
@@ -9,18 +9,13 @@ const styles = () =>
|
||||
({
|
||||
root :
|
||||
{
|
||||
position : 'relative',
|
||||
flex : '100 100 auto',
|
||||
height : '100%',
|
||||
width : '100%',
|
||||
display : 'flex',
|
||||
flexDirection : 'column',
|
||||
overflow : 'hidden',
|
||||
backgroundColor : 'var(--peer-bg-color)',
|
||||
backgroundImage : 'var(--peer-empty-avatar)',
|
||||
backgroundPosition : 'bottom',
|
||||
backgroundSize : 'auto 85%',
|
||||
backgroundRepeat : 'no-repeat'
|
||||
position : 'relative',
|
||||
flex : '100 100 auto',
|
||||
height : '100%',
|
||||
width : '100%',
|
||||
display : 'flex',
|
||||
flexDirection : 'column',
|
||||
overflow : 'hidden'
|
||||
},
|
||||
video :
|
||||
{
|
||||
@@ -210,7 +205,7 @@ const styles = () =>
|
||||
}
|
||||
});
|
||||
|
||||
class PeerView extends React.PureComponent
|
||||
class VideoView extends React.PureComponent
|
||||
{
|
||||
constructor(props)
|
||||
{
|
||||
@@ -241,6 +236,7 @@ class PeerView extends React.PureComponent
|
||||
isMe,
|
||||
peer,
|
||||
volume,
|
||||
showPeerInfo,
|
||||
advancedMode,
|
||||
videoVisible,
|
||||
videoProfile,
|
||||
@@ -280,37 +276,40 @@ class PeerView extends React.PureComponent
|
||||
:null
|
||||
}
|
||||
|
||||
<div className={classes.peer}>
|
||||
{ isMe ?
|
||||
<EditableInput
|
||||
value={peer.displayName}
|
||||
propName='displayName'
|
||||
className={classnames(classes.displayNameEdit, 'display-name')}
|
||||
classLoading='loading'
|
||||
classInvalid='invalid'
|
||||
shouldBlockWhileLoading
|
||||
editProps={{
|
||||
maxLength : 30,
|
||||
autoCorrect : false,
|
||||
spellCheck : false
|
||||
}}
|
||||
onChange={({ displayName }) => onChangeDisplayName(displayName)}
|
||||
/>
|
||||
:
|
||||
<span className={classes.displayNameStatic}>
|
||||
{peer.displayName}
|
||||
</span>
|
||||
}
|
||||
|
||||
{ advancedMode ?
|
||||
<div className={classes.deviceInfo}>
|
||||
<span>
|
||||
{peer.device.name} {Math.floor(peer.device.version) || null}
|
||||
{ showPeerInfo ?
|
||||
<div className={classes.peer}>
|
||||
{ isMe ?
|
||||
<EditableInput
|
||||
value={peer.displayName}
|
||||
propName='displayName'
|
||||
className={classnames(classes.displayNameEdit, 'display-name')}
|
||||
classLoading='loading'
|
||||
classInvalid='invalid'
|
||||
shouldBlockWhileLoading
|
||||
editProps={{
|
||||
maxLength : 30,
|
||||
autoCorrect : false,
|
||||
spellCheck : false
|
||||
}}
|
||||
onChange={({ displayName }) => onChangeDisplayName(displayName)}
|
||||
/>
|
||||
:
|
||||
<span className={classes.displayNameStatic}>
|
||||
{peer.displayName}
|
||||
</span>
|
||||
</div>
|
||||
:null
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
{ advancedMode ?
|
||||
<div className={classes.deviceInfo}>
|
||||
<span>
|
||||
{peer.device.name} {Math.floor(peer.device.version) || null}
|
||||
</span>
|
||||
</div>
|
||||
:null
|
||||
}
|
||||
</div>
|
||||
:null
|
||||
}
|
||||
</div>
|
||||
|
||||
<video
|
||||
@@ -411,11 +410,12 @@ class PeerView extends React.PureComponent
|
||||
}
|
||||
}
|
||||
|
||||
PeerView.propTypes =
|
||||
VideoView.propTypes =
|
||||
{
|
||||
isMe : PropTypes.bool,
|
||||
peer : PropTypes.oneOfType(
|
||||
[ appPropTypes.Me, appPropTypes.Peer ]).isRequired,
|
||||
[ appPropTypes.Me, appPropTypes.Peer ]),
|
||||
showPeerInfo : PropTypes.bool,
|
||||
advancedMode : PropTypes.bool,
|
||||
audioTrack : PropTypes.any,
|
||||
volume : PropTypes.number,
|
||||
@@ -428,4 +428,4 @@ PeerView.propTypes =
|
||||
classes : PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default withStyles(styles)(PeerView);
|
||||
export default withStyles(styles)(VideoView);
|
||||
Reference in New Issue
Block a user