diff --git a/app/lib/components/Me.jsx b/app/lib/components/Me.jsx index 66226d1..ad3259f 100644 --- a/app/lib/components/Me.jsx +++ b/app/lib/components/Me.jsx @@ -7,6 +7,7 @@ import { getDeviceInfo } from 'mediasoup-client'; import * as appPropTypes from './appPropTypes'; import * as requestActions from '../redux/requestActions'; import PeerView from './PeerView'; +import ScreenView from './ScreenView'; class Me extends React.Component { @@ -32,6 +33,7 @@ class Me extends React.Component advancedMode, micProducer, webcamProducer, + screenProducer, onChangeDisplayName, onMuteMic, onUnmuteMic, @@ -65,6 +67,12 @@ class Me extends React.Component !webcamProducer.remotelyPaused ); + const screenVisible = ( + Boolean(screenProducer) && + !screenProducer.locallyPaused && + !screenProducer.remotelyPaused + ); + let tip; if (!me.displayNameSet) @@ -115,6 +123,17 @@ class Me extends React.Component onChangeDisplayName={(displayName) => onChangeDisplayName(displayName)} /> + {screenProducer ? + + :null + } + {this._tooltip ? producersArray.find((producer) => producer.source === 'mic'); const webcamProducer = producersArray.find((producer) => producer.source === 'webcam'); + const screenProducer = + producersArray.find((producer) => producer.source === 'screen'); return { connected : state.room.state === 'connected', me : state.me, micProducer : micProducer, - webcamProducer : webcamProducer + webcamProducer : webcamProducer, + screenProducer : screenProducer }; }; diff --git a/app/lib/components/Peer.jsx b/app/lib/components/Peer.jsx index b69eb1f..e9567b2 100644 --- a/app/lib/components/Peer.jsx +++ b/app/lib/components/Peer.jsx @@ -5,6 +5,7 @@ import classnames from 'classnames'; import * as appPropTypes from './appPropTypes'; import * as requestActions from '../redux/requestActions'; import PeerView from './PeerView'; +import ScreenView from './ScreenView'; const Peer = (props) => { @@ -17,7 +18,8 @@ const Peer = (props) => onMuteMic, onUnmuteMic, onDisableWebcam, - onEnableWebcam + onEnableWebcam, + style } = props; const micEnabled = ( @@ -49,7 +51,12 @@ const Peer = (props) => screenProfile = screenConsumer.profile; return ( -
+
:null } - +
+ +
+ + {screenConsumer ? +
+ +
+ :null + }
); }; Peer.propTypes = { - advancedMode : PropTypes.bool, - peer : appPropTypes.Peer.isRequired, - micConsumer : appPropTypes.Consumer, - webcamConsumer : appPropTypes.Consumer, - screenConsumer : appPropTypes.Consumer, - onMuteMic : PropTypes.func.isRequired, - onUnmuteMic : PropTypes.func.isRequired, - onEnableWebcam : PropTypes.func.isRequired, - onDisableWebcam : PropTypes.func.isRequired + advancedMode : PropTypes.bool, + peer : appPropTypes.Peer.isRequired, + micConsumer : appPropTypes.Consumer, + webcamConsumer : appPropTypes.Consumer, + screenConsumer : appPropTypes.Consumer, + onMuteMic : PropTypes.func.isRequired, + onUnmuteMic : PropTypes.func.isRequired, + onEnableWebcam : PropTypes.func.isRequired, + onDisableWebcam : PropTypes.func.isRequired, + streamDimensions : PropTypes.object, + style : PropTypes.object }; const mapStateToProps = (state, { name }) => diff --git a/app/lib/components/PeerView.jsx b/app/lib/components/PeerView.jsx index 8a6ef57..c258584 100644 --- a/app/lib/components/PeerView.jsx +++ b/app/lib/components/PeerView.jsx @@ -14,11 +14,9 @@ export default class PeerView extends React.Component this.state = { - volume : 0, // Integer from 0 to 10., - videoWidth : null, - videoHeight : null, - screenWidth : null, - screenHeight : null + volume : 0, // Integer from 0 to 10., + videoWidth : null, + videoHeight : null }; // Latest received video track. @@ -29,10 +27,6 @@ export default class PeerView extends React.Component // @type {MediaStreamTrack} this._videoTrack = null; - // Latest received screen track. - // @type {MediaStreamTrack} - this._screenTrack = null; - // Hark instance. // @type {Object} this._hark = null; @@ -45,24 +39,19 @@ export default class PeerView extends React.Component { const { isMe, - advancedMode, peer, + advancedMode, videoVisible, videoProfile, - screenVisible, - screenProfile, audioCodec, videoCodec, - screenCodec, onChangeDisplayName } = this.props; const { volume, videoWidth, - videoHeight, - screenWidth, - screenHeight + videoHeight } = this.state; return ( @@ -70,40 +59,22 @@ export default class PeerView extends React.Component
{advancedMode ?
- {screenVisible ? -
- {audioCodec ? -

{audioCodec}

- :null - } +
+ {audioCodec ? +

{audioCodec}

+ :null + } - {screenCodec ? -

{screenCodec} {screenProfile}

- :null - } + {videoCodec ? +

{videoCodec} {videoProfile}

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

{screenWidth}x{screenHeight}

- :null - } -
- :
- {audioCodec ? -

{audioCodec}

- :null - } - - {videoCodec ? -

{videoCodec} {videoProfile}

- :null - } - - {(videoVisible && videoWidth !== null) ? -

{videoWidth}x{videoHeight}

- :null - } -
- } + {(videoVisible && videoWidth !== null) ? +

{videoWidth}x{videoHeight}

+ :null + } +
:null } @@ -147,35 +118,19 @@ export default class PeerView extends React.Component