- {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}
+
+
- {screenVisible ?
-
-
-
- :null
- }
-
- {videoProfile === 'none' && screenProfile === 'none' ?
+ {videoProfile === 'none' ?
@@ -187,9 +135,9 @@ export default class PeerView extends React.Component
componentDidMount()
{
- const { audioTrack, videoTrack, screenTrack } = this.props;
+ const { audioTrack, videoTrack } = this.props;
- this._setTracks(audioTrack, videoTrack, screenTrack);
+ this._setTracks(audioTrack, videoTrack);
}
componentWillUnmount()
@@ -202,21 +150,18 @@ export default class PeerView extends React.Component
componentWillReceiveProps(nextProps)
{
- const { audioTrack, videoTrack, screenTrack } = nextProps;
+ const { audioTrack, videoTrack } = nextProps;
- this._setTracks(audioTrack, videoTrack, screenTrack);
+ this._setTracks(audioTrack, videoTrack);
}
- _setTracks(audioTrack, videoTrack, screenTrack)
+ _setTracks(audioTrack, videoTrack)
{
- if (this._audioTrack === audioTrack &&
- this._videoTrack === videoTrack &&
- this._screenTrack === screenTrack)
+ if (this._audioTrack === audioTrack && this._videoTrack === videoTrack)
return;
this._audioTrack = audioTrack;
this._videoTrack = videoTrack;
- this._screenTrack = screenTrack;
if (this._hark)
this._hark.stop();
@@ -224,9 +169,9 @@ export default class PeerView extends React.Component
clearInterval(this._videoResolutionTimer);
this._hideVideoResolution();
- const { video, minivideo } = this.refs;
+ const { video } = this.refs;
- if (audioTrack || videoTrack || screenTrack)
+ if (audioTrack || videoTrack)
{
const stream = new MediaStream;
@@ -236,19 +181,7 @@ export default class PeerView extends React.Component
if (videoTrack)
stream.addTrack(videoTrack);
- if (screenTrack)
- {
- const screenStream = new MediaStream;
-
- screenStream.addTrack(screenTrack);
-
- video.srcObject = screenStream;
- minivideo.srcObject = stream;
- }
- else
- {
- video.srcObject = stream;
- }
+ video.srcObject = stream;
if (audioTrack)
this._runHark(stream);
@@ -314,19 +247,14 @@ export default class PeerView extends React.Component
PeerView.propTypes =
{
- isMe : PropTypes.bool,
- advancedMode : PropTypes.bool,
- peer : PropTypes.oneOfType(
+ isMe : PropTypes.bool,
+ peer : PropTypes.oneOfType(
[ appPropTypes.Me, appPropTypes.Peer ]).isRequired,
audioTrack : PropTypes.any,
videoTrack : PropTypes.any,
- screenTrack : PropTypes.any,
videoVisible : PropTypes.bool.isRequired,
videoProfile : PropTypes.string,
- screenVisible : PropTypes.bool,
- screenProfile : PropTypes.string,
audioCodec : PropTypes.string,
videoCodec : PropTypes.string,
- screenCodec : PropTypes.string,
onChangeDisplayName : PropTypes.func
};
diff --git a/app/lib/components/ScreenView.jsx b/app/lib/components/ScreenView.jsx
new file mode 100644
index 0000000..b95be2b
--- /dev/null
+++ b/app/lib/components/ScreenView.jsx
@@ -0,0 +1,168 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Spinner from 'react-spinner';
+
+export default class PeerView extends React.Component
+{
+ 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
+ } = this.props;
+
+ const {
+ screenWidth,
+ screenHeight
+ } = this.state;
+
+ return (
+
+
+ {advancedMode ?
+
+ {screenVisible ?
+
+ {screenCodec ?
+
{screenCodec} {screenProfile}
+ :null
+ }
+
+ {(screenVisible && screenWidth !== null) ?
+
{screenWidth}x{screenHeight}
+ :null
+ }
+
+ :null
+ }
+
+ :null
+ }
+
+
+
+
+ {screenProfile === 'none' ?
+
+
+
+ :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 });
+ }
+}
+
+PeerView.propTypes =
+{
+ isMe : PropTypes.bool,
+ advancedMode : PropTypes.bool,
+ screenTrack : PropTypes.any,
+ screenVisible : PropTypes.bool,
+ screenProfile : PropTypes.string,
+ screenCodec : PropTypes.string
+};