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..e85e0ba 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) => { @@ -91,15 +92,22 @@ const Peer = (props) => peer={peer} audioTrack={micConsumer ? micConsumer.track : null} videoTrack={webcamConsumer ? webcamConsumer.track : null} - screenTrack={screenConsumer ? screenConsumer.track : null} videoVisible={videoVisible} videoProfile={videoProfile} - screenVisible={screenVisible} - screenProfile={screenProfile} audioCodec={micConsumer ? micConsumer.codec : null} videoCodec={webcamConsumer ? webcamConsumer.codec : null} - screenCodec={screenConsumer ? screenConsumer.codec : null} /> + + {screenConsumer ? + + :null + } ); }; diff --git a/app/lib/components/PeerView.jsx b/app/lib/components/PeerView.jsx index 8a6ef57..840badd 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,68 +39,41 @@ export default class PeerView extends React.Component { const { isMe, - advancedMode, peer, videoVisible, videoProfile, - screenVisible, - screenProfile, audioCodec, videoCodec, - screenCodec, onChangeDisplayName } = this.props; const { volume, videoWidth, - videoHeight, - screenWidth, - screenHeight + videoHeight } = this.state; return (
- {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 - } +
{isMe ? @@ -130,52 +97,33 @@ export default class PeerView extends React.Component } - {advancedMode ? -
- - - {peer.device.name} {Math.floor(peer.device.version) || null} - -
- :null - } +
+ + + {peer.device.name} {Math.floor(peer.device.version) || null} + +