Briq
/
multiparty-meeting
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added basic support for screen layout

master
Håvar Aambø Fosstveit 2018-04-12 11:42:10 +02:00
parent b661aa1923
commit acb035c952
2 changed files with 65 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
app/lib/components/Peer.jsx
View File

@ -2,13 +2,15 @@ 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
webcamConsumer,
screenConsumer
} = props;
const micEnabled = (
@ -23,49 +25,77 @@ const Peer = (props) =>
!webcamConsumer.remotelyPaused
);
const screenVisible = (
Boolean(screenConsumer) &&
!screenConsumer.locallyPaused &&
!screenConsumer.remotelyPaused
);
let videoProfile;
if (webcamConsumer)
videoProfile = webcamConsumer.profile;
return (
<div data-component='Peer'>
<div className='indicators'>
{!micEnabled ?
<div className='icon mic-off' />
:null
}
{!videoVisible ?
<div className='icon webcam-off' />
:null
}
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>
{videoVisible && !webcamConsumer.supported ?
<div className='incompatible-video'>
<p>incompatible video</p>
);
}
else
{
return (
<div data-component='Peer'>
<div className='indicators'>
{!micEnabled ?
<div className='icon mic-off' />
:null
}
{!videoVisible ?
<div className='icon webcam-off' />
:null
}
</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>
);
{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
webcamConsumer : appPropTypes.Consumer,
screenConsumer : appPropTypes.Consumer
};
const mapStateToProps = (state, { name }) =>
@ -77,11 +107,14 @@ const mapStateToProps = (state, { name }) =>
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
webcamConsumer,
screenConsumer
};
};

1
app/stylus/index.styl
View File

@ -40,6 +40,7 @@ body {
@import './components/Peers';
@import './components/Peer';
@import './components/PeerView';
@import './components/PeerScreenView';
@import './components/Notifications';
@import './components/Chat';
}