128 lines
2.8 KiB
JavaScript
128 lines
2.8 KiB
JavaScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import * as appPropTypes from './appPropTypes';
|
|
import PeerView from './PeerView';
|
|
import PeerScreenView from './PeerScreenView';
|
|
|
|
const Peer = (props) =>
|
|
{
|
|
const {
|
|
peer,
|
|
micConsumer,
|
|
webcamConsumer,
|
|
screenConsumer
|
|
} = props;
|
|
|
|
const micEnabled = (
|
|
Boolean(micConsumer) &&
|
|
!micConsumer.locallyPaused &&
|
|
!micConsumer.remotelyPaused
|
|
);
|
|
|
|
const videoVisible = (
|
|
Boolean(webcamConsumer) &&
|
|
!webcamConsumer.locallyPaused &&
|
|
!webcamConsumer.remotelyPaused
|
|
);
|
|
|
|
const screenVisible = (
|
|
Boolean(screenConsumer) &&
|
|
!screenConsumer.locallyPaused &&
|
|
!screenConsumer.remotelyPaused
|
|
);
|
|
|
|
let videoProfile;
|
|
|
|
if (webcamConsumer)
|
|
videoProfile = webcamConsumer.profile;
|
|
|
|
let screenProfile;
|
|
|
|
if (screenConsumer)
|
|
screenProfile = screenConsumer.profile;
|
|
|
|
if (screenVisible && screenConsumer.supported)
|
|
{
|
|
return (
|
|
<div data-component='Peer'>
|
|
<PeerScreenView
|
|
videoTrack={screenConsumer ? screenConsumer.track : null}
|
|
videoVisible={screenVisible}
|
|
videoProfile={screenProfile}
|
|
videoCodec={screenConsumer ? screenConsumer.codec : null}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
else
|
|
{
|
|
return (
|
|
<div data-component='Peer'>
|
|
<div className='indicators'>
|
|
{peer.raiseHandState ?
|
|
<div className='icon raise-hand' />
|
|
:null
|
|
}
|
|
{!micEnabled ?
|
|
<div className='icon mic-off' />
|
|
:null
|
|
}
|
|
{!videoVisible ?
|
|
<div className='icon webcam-off' />
|
|
:null
|
|
}
|
|
</div>
|
|
|
|
{videoVisible && !webcamConsumer.supported ?
|
|
<div className='incompatible-video'>
|
|
<p>incompatible video</p>
|
|
</div>
|
|
:null
|
|
}
|
|
|
|
<PeerView
|
|
peer={peer}
|
|
audioTrack={micConsumer ? micConsumer.track : null}
|
|
videoTrack={webcamConsumer ? webcamConsumer.track : null}
|
|
videoVisible={videoVisible}
|
|
videoProfile={videoProfile}
|
|
audioCodec={micConsumer ? micConsumer.codec : null}
|
|
videoCodec={webcamConsumer ? webcamConsumer.codec : null}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
Peer.propTypes =
|
|
{
|
|
peer : appPropTypes.Peer.isRequired,
|
|
micConsumer : appPropTypes.Consumer,
|
|
webcamConsumer : appPropTypes.Consumer,
|
|
screenConsumer : appPropTypes.Consumer
|
|
};
|
|
|
|
const mapStateToProps = (state, { name }) =>
|
|
{
|
|
const peer = state.peers[name];
|
|
const consumersArray = peer.consumers
|
|
.map((consumerId) => state.consumers[consumerId]);
|
|
const micConsumer =
|
|
consumersArray.find((consumer) => consumer.source === 'mic');
|
|
const webcamConsumer =
|
|
consumersArray.find((consumer) => consumer.source === 'webcam');
|
|
const screenConsumer =
|
|
consumersArray.find((consumer) => consumer.source === 'screen');
|
|
|
|
return {
|
|
peer,
|
|
micConsumer,
|
|
webcamConsumer,
|
|
screenConsumer
|
|
};
|
|
};
|
|
|
|
const PeerContainer = connect(mapStateToProps)(Peer);
|
|
|
|
export default PeerContainer;
|