From a40b8438483f34880bd48da1ae48762736f03176 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= Date: Tue, 2 Apr 2019 13:37:13 +0200 Subject: [PATCH] Cleanup of Me, Peer, PeerView, ScreenView and Democratic --- app/src/components/Containers/Me.js | 45 +++- app/src/components/Containers/Peer.js | 148 +++++------ app/src/components/MeetingViews/Democratic.js | 16 +- .../components/VideoContainers/ScreenView.js | 246 ------------------ .../{PeerView.js => VideoView.js} | 92 +++---- 5 files changed, 151 insertions(+), 396 deletions(-) delete mode 100644 app/src/components/VideoContainers/ScreenView.js rename app/src/components/VideoContainers/{PeerView.js => VideoView.js} (84%) diff --git a/app/src/components/Containers/Me.js b/app/src/components/Containers/Me.js index 0128be2..8f904e4 100644 --- a/app/src/components/Containers/Me.js +++ b/app/src/components/Containers/Me.js @@ -7,17 +7,27 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import { getDeviceInfo } from 'mediasoup-client'; import * as appPropTypes from '../appPropTypes'; -import PeerView from '../VideoContainers/PeerView'; -import ScreenView from '../VideoContainers/ScreenView'; +import VideoView from '../VideoContainers/VideoView'; const styles = () => ({ root : { - display : 'flex', - flexDirection : 'row', - flex : '100 100 auto', - position : 'relative' + display : 'flex', + flexDirection : 'row', + margin : 6, + flex : '0 0 auto', + boxShadow : 'var(--peer-shadow)', + border : 'var(--peer-border)', + backgroundColor : 'var(--peer-bg-color)', + backgroundImage : 'var(--peer-empty-avatar)', + backgroundPosition : 'bottom', + backgroundSize : 'auto 85%', + backgroundRepeat : 'no-repeat', + '&.active-speaker' : + { + borderColor : 'var(--active-speaker-border-color)' + } }, viewContainer : { @@ -74,6 +84,7 @@ class Me extends React.PureComponent const { roomClient, me, + activeSpeaker, style, advancedMode, micProducer, @@ -101,7 +112,12 @@ class Me extends React.PureComponent return (
(this._rootNode = node)} data-tip={tip} data-tip-disable={!tip} @@ -110,10 +126,11 @@ class Me extends React.PureComponent onMouseOut={this.handleMouseOut} >
- -
:null @@ -180,6 +197,7 @@ Me.propTypes = connected : PropTypes.bool.isRequired, advancedMode : PropTypes.bool, me : appPropTypes.Me.isRequired, + activeSpeaker : PropTypes.bool, micProducer : appPropTypes.Producer, webcamProducer : appPropTypes.Producer, screenProducer : appPropTypes.Producer, @@ -202,7 +220,8 @@ const mapStateToProps = (state) => me : state.me, micProducer : micProducer, webcamProducer : webcamProducer, - screenProducer : screenProducer + screenProducer : screenProducer, + activeSpeaker : state.me.name === state.room.activeSpeakerName }; }; diff --git a/app/src/components/Containers/Peer.js b/app/src/components/Containers/Peer.js index ec891bd..d5ca011 100644 --- a/app/src/components/Containers/Peer.js +++ b/app/src/components/Containers/Peer.js @@ -7,8 +7,7 @@ import { withRoomContext } from '../../RoomContext'; import { withStyles } from '@material-ui/core/styles'; import { unstable_useMediaQuery as useMediaQuery } from '@material-ui/core/useMediaQuery'; import * as stateActions from '../../actions/stateActions'; -import PeerView from '../VideoContainers/PeerView'; -import ScreenView from '../VideoContainers/ScreenView'; +import VideoView from '../VideoContainers/VideoView'; import Fab from '@material-ui/core/Fab'; import MicIcon from '@material-ui/icons/Mic'; import MicOffIcon from '@material-ui/icons/MicOff'; @@ -19,13 +18,17 @@ const styles = (theme) => ({ root : { - overflow : 'hidden', - flex : '0 0 auto', - margin : 6, - boxShadow : 'var(--peer-shadow)', - border : 'var(--peer-border)', - touchAction : 'none', - '&.webcam' : + flex : '0 0 auto', + margin : 6, + boxShadow : 'var(--peer-shadow)', + border : 'var(--peer-border)', + touchAction : 'none', + backgroundColor : 'var(--peer-bg-color)', + backgroundImage : 'var(--peer-empty-avatar)', + backgroundPosition : 'bottom', + backgroundSize : 'auto 85%', + backgroundRepeat : 'no-repeat', + '&.webcam' : { order : 2 }, @@ -36,18 +39,12 @@ const styles = (theme) => '&.hover' : { boxShadow : '0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(82, 168, 236, 0.9)' + }, + '&.active-speaker' : + { + borderColor : 'var(--active-speaker-border-color)' } }, - peerContainer : - { - width : '100%', - height : '100%', - display : 'flex', - flexDirection : 'row', - flex : '100 100 auto', - position : 'relative', - touchAction : 'none' - }, fab : { margin : theme.spacing.unit @@ -86,32 +83,8 @@ const styles = (theme) => opacity : 1 } }, - pausedVideo : + videoInfo : { - position : 'absolute', - zIndex : 11, - top : 0, - bottom : 0, - left : 0, - right : 0, - display : 'flex', - flexDirection : 'column', - justifyContent : 'center', - alignItems : 'center', - '& p' : - { - padding : '6px 12px', - borderRadius : 6, - userSelect : 'none', - pointerEvents : 'none', - fontSize : 20, - color : 'rgba(255, 255, 255, 0.55)' - } - }, - incompatibleVideo : - { - position : 'absolute', - zIndex : 10, top : 0, bottom : 0, left : 0, @@ -148,6 +121,7 @@ const Peer = (props) => roomClient, advancedMode, peer, + activeSpeaker, micConsumer, webcamConsumer, screenConsumer, @@ -192,7 +166,14 @@ const Peer = (props) => return (
setHover(true)} onMouseOut={() => setHover(false)} onTouchStart={() => @@ -213,21 +194,21 @@ const Peer = (props) => }, 2000); }} > -
- { videoVisible && !webcamConsumer.supported ? -
-

incompatible video

-
- :null - } + { videoVisible && !webcamConsumer.supported ? +
+

incompatible video

+
+ :null + } - { !videoVisible ? -
-

this video is paused

-
- :null - } + { !videoVisible ? +
+

this video is paused

+
+ :null + } + { videoVisible && webcamConsumer.supported ?
- videoCodec={webcamConsumer ? webcamConsumer.codec : null} />
-
+ :null + }
{ screenConsumer ? @@ -337,20 +320,21 @@ const Peer = (props) => }, 2000); }} > -
- { screenVisible && !screenConsumer.supported ? -
-

incompatible video

-
- :null - } + { screenVisible && !screenConsumer.supported ? +
+

incompatible video

+
+ :null + } - { !screenVisible ? -
-

this video is paused

-
- :null - } + { !screenVisible ? +
+

this video is paused

+
+ :null + } + + { screenVisible && screenConsumer.supported ?
-
-
+ :null + }
:null } @@ -430,7 +415,7 @@ Peer.propTypes = webcamConsumer : appPropTypes.Consumer, screenConsumer : appPropTypes.Consumer, windowConsumer : PropTypes.number, - streamDimensions : PropTypes.object, + activeSpeaker : PropTypes.bool, style : PropTypes.object, toggleConsumerFullscreen : PropTypes.func.isRequired, toggleConsumerWindow : PropTypes.func.isRequired, @@ -455,7 +440,8 @@ const mapStateToProps = (state, { name }) => micConsumer, webcamConsumer, screenConsumer, - windowConsumer : state.room.windowConsumer + windowConsumer : state.room.windowConsumer, + activeSpeaker : name === state.room.activeSpeakerName }; }; diff --git a/app/src/components/MeetingViews/Democratic.js b/app/src/components/MeetingViews/Democratic.js index 2009ed3..5ac0422 100644 --- a/app/src/components/MeetingViews/Democratic.js +++ b/app/src/components/MeetingViews/Democratic.js @@ -130,6 +130,8 @@ class Democratic extends React.PureComponent const { advancedMode, amActiveSpeaker, + activeSpeakerName, + selectedPeerName, peers, spotlights, spotlightsLength, @@ -144,16 +146,10 @@ class Democratic extends React.PureComponent return (
-
- -
+ { Object.keys(peers).map((peerName) => { if (spotlights.find((spotlightsElement) => spotlightsElement === peerName)) diff --git a/app/src/components/VideoContainers/ScreenView.js b/app/src/components/VideoContainers/ScreenView.js deleted file mode 100644 index 4754d05..0000000 --- a/app/src/components/VideoContainers/ScreenView.js +++ /dev/null @@ -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 ( -
-
- { advancedMode ? -
- { screenVisible ? -
- { screenCodec ? -

{screenCodec} {screenProfile}

- :null - } - - { (screenVisible && screenWidth !== null) ? -

{screenWidth}x{screenHeight}

- :null - } -
- :null - } -
- :null - } -
- -
- ); - } - - 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); \ No newline at end of file diff --git a/app/src/components/VideoContainers/PeerView.js b/app/src/components/VideoContainers/VideoView.js similarity index 84% rename from app/src/components/VideoContainers/PeerView.js rename to app/src/components/VideoContainers/VideoView.js index 022f558..ba79e06 100644 --- a/app/src/components/VideoContainers/PeerView.js +++ b/app/src/components/VideoContainers/VideoView.js @@ -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 } -
- { isMe ? - onChangeDisplayName(displayName)} - /> - : - - {peer.displayName} - - } - - { advancedMode ? -
- - {peer.device.name} {Math.floor(peer.device.version) || null} + { showPeerInfo ? +
+ { isMe ? + onChangeDisplayName(displayName)} + /> + : + + {peer.displayName} -
- :null - } -
+ } + + { advancedMode ? +
+ + {peer.device.name} {Math.floor(peer.device.version) || null} + +
+ :null + } +
+ :null + }