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 { connect } from 'react-redux';
import * as appPropTypes from './appPropTypes'; import * as appPropTypes from './appPropTypes';
import PeerView from './PeerView'; import PeerView from './PeerView';
import PeerScreenView from './PeerScreenView';
const Peer = (props) => const Peer = (props) =>
{ {
const { const {
peer, peer,
micConsumer, micConsumer,
webcamConsumer webcamConsumer,
screenConsumer
} = props; } = props;
const micEnabled = ( const micEnabled = (
@ -23,49 +25,77 @@ const Peer = (props) =>
!webcamConsumer.remotelyPaused !webcamConsumer.remotelyPaused
); );
const screenVisible = (
Boolean(screenConsumer) &&
!screenConsumer.locallyPaused &&
!screenConsumer.remotelyPaused
);
let videoProfile; let videoProfile;
if (webcamConsumer) if (webcamConsumer)
videoProfile = webcamConsumer.profile; videoProfile = webcamConsumer.profile;
return ( let screenProfile;
<div data-component='Peer'>
<div className='indicators'> if (screenConsumer)
{!micEnabled ? screenProfile = screenConsumer.profile;
<div className='icon mic-off' />
:null if (screenVisible && screenConsumer.supported)
} {
{!videoVisible ? return (
<div className='icon webcam-off' /> <div data-component='Peer'>
:null <PeerScreenView
} videoTrack={screenConsumer ? screenConsumer.track : null}
videoVisible={screenVisible}
videoProfile={screenProfile}
videoCodec={screenConsumer ? screenConsumer.codec : null}
/>
</div> </div>
);
{videoVisible && !webcamConsumer.supported ? }
<div className='incompatible-video'> else
<p>incompatible video</p> {
return (
<div data-component='Peer'>
<div className='indicators'>
{!micEnabled ?
<div className='icon mic-off' />
:null
}
{!videoVisible ?
<div className='icon webcam-off' />
:null
}
</div> </div>
:null
}
<PeerView {videoVisible && !webcamConsumer.supported ?
peer={peer} <div className='incompatible-video'>
audioTrack={micConsumer ? micConsumer.track : null} <p>incompatible video</p>
videoTrack={webcamConsumer ? webcamConsumer.track : null} </div>
videoVisible={videoVisible} :null
videoProfile={videoProfile} }
audioCodec={micConsumer ? micConsumer.codec : null}
videoCodec={webcamConsumer ? webcamConsumer.codec : null} <PeerView
/> peer={peer}
</div> 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.propTypes =
{ {
peer : appPropTypes.Peer.isRequired, peer : appPropTypes.Peer.isRequired,
micConsumer : appPropTypes.Consumer, micConsumer : appPropTypes.Consumer,
webcamConsumer : appPropTypes.Consumer webcamConsumer : appPropTypes.Consumer,
screenConsumer : appPropTypes.Consumer
}; };
const mapStateToProps = (state, { name }) => const mapStateToProps = (state, { name }) =>
@ -77,11 +107,14 @@ const mapStateToProps = (state, { name }) =>
consumersArray.find((consumer) => consumer.source === 'mic'); consumersArray.find((consumer) => consumer.source === 'mic');
const webcamConsumer = const webcamConsumer =
consumersArray.find((consumer) => consumer.source === 'webcam'); consumersArray.find((consumer) => consumer.source === 'webcam');
const screenConsumer =
consumersArray.find((consumer) => consumer.source === 'screen');
return { return {
peer, peer,
micConsumer, micConsumer,
webcamConsumer webcamConsumer,
screenConsumer
}; };
}; };

1
app/stylus/index.styl
View File

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