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

New screenview done for now.

master
Håvar Aambø Fosstveit 2018-06-21 12:45:30 +02:00
parent c87e006da2
commit 8df1ff83dc
7 changed files with 218 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,7 +18,8 @@ const Peer = (props) =>
onMuteMic,
onUnmuteMic,
onDisableWebcam,
onEnableWebcam
onEnableWebcam,
style
} = props;
const micEnabled = (
@ -50,7 +51,12 @@ const Peer = (props) =>
screenProfile = screenConsumer.profile;
return (
<div data-component='Peer'>
<div
data-component='Peer'
className={classnames({
screen : screenConsumer
})}
>
<div className='controls'>
<div
className={classnames('button', 'mic', {
@ -87,25 +93,29 @@ const Peer = (props) =>
:null
}
<PeerView
advancedMode={advancedMode}
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 className={classnames('view-container', 'webcam')} style={style}>
<PeerView
advancedMode={advancedMode}
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>
{screenConsumer ?
<ScreenView
advancedMode={advancedMode}
screenTrack={screenConsumer ? screenConsumer.track : null}
screenVisible={screenVisible}
screenProfile={screenProfile}
screenCodec={screenConsumer ? screenConsumer.codec : null}
/>
<div className={classnames('view-container', 'screen')} style={style}>
<ScreenView
advancedMode={advancedMode}
screenTrack={screenConsumer ? screenConsumer.track : null}
screenVisible={screenVisible}
screenProfile={screenProfile}
screenCodec={screenConsumer ? screenConsumer.codec : null}
/>
</div>
:null
}
</div>
@ -114,15 +124,17 @@ const Peer = (props) =>
Peer.propTypes =
{
advancedMode : PropTypes.bool,
peer : appPropTypes.Peer.isRequired,
micConsumer : appPropTypes.Consumer,
webcamConsumer : appPropTypes.Consumer,
screenConsumer : appPropTypes.Consumer,
onMuteMic : PropTypes.func.isRequired,
onUnmuteMic : PropTypes.func.isRequired,
onEnableWebcam : PropTypes.func.isRequired,
onDisableWebcam : PropTypes.func.isRequired
advancedMode : PropTypes.bool,
peer : appPropTypes.Peer.isRequired,
micConsumer : appPropTypes.Consumer,
webcamConsumer : appPropTypes.Consumer,
screenConsumer : appPropTypes.Consumer,
onMuteMic : PropTypes.func.isRequired,
onUnmuteMic : PropTypes.func.isRequired,
onEnableWebcam : PropTypes.func.isRequired,
onDisableWebcam : PropTypes.func.isRequired,
streamDimensions : PropTypes.object,
style : PropTypes.object
};
const mapStateToProps = (state, { name }) =>

54
app/lib/components/PeerView.jsx
View File

@ -40,6 +40,7 @@ export default class PeerView extends React.Component
const {
isMe,
peer,
advancedMode,
videoVisible,
videoProfile,
audioCodec,
@ -56,24 +57,27 @@ export default class PeerView extends React.Component
return (
<div data-component='PeerView'>
<div className='info'>
<div className={classnames('media', { 'is-me': isMe })}>
<div className='box'>
{audioCodec ?
<p className='codec'>{audioCodec}</p>
:null
}
{advancedMode ?
<div className={classnames('media', { 'is-me': isMe })}>
<div className='box'>
{audioCodec ?
<p className='codec'>{audioCodec}</p>
:null
}
{videoCodec ?
<p className='codec'>{videoCodec} {videoProfile}</p>
:null
}
{videoCodec ?
<p className='codec'>{videoCodec} {videoProfile}</p>
:null
}
{(videoVisible && videoWidth !== null) ?
<p className='resolution'>{videoWidth}x{videoHeight}</p>
:null
}
{(videoVisible && videoWidth !== null) ?
<p className='resolution'>{videoWidth}x{videoHeight}</p>
:null
}
</div>
</div>
</div>
:null
}
<div className={classnames('peer', { 'is-me': isMe })}>
{isMe ?
@ -97,14 +101,17 @@ export default class PeerView extends React.Component
</span>
}
<div className='row'>
<span
className={classnames('device-icon', peer.device.flag)}
/>
<span className='device-version'>
{peer.device.name} {Math.floor(peer.device.version) || null}
</span>
</div>
{advancedMode ?
<div className='row'>
<span
className={classnames('device-icon', peer.device.flag)}
/>
<span className='device-version'>
{peer.device.name} {Math.floor(peer.device.version) || null}
</span>
</div>
:null
}
</div>
</div>
@ -250,6 +257,7 @@ PeerView.propTypes =
isMe : PropTypes.bool,
peer : PropTypes.oneOfType(
[ appPropTypes.Me, appPropTypes.Peer ]).isRequired,
advancedMode : PropTypes.bool,
audioTrack : PropTypes.any,
videoTrack : PropTypes.any,
videoVisible : PropTypes.bool.isRequired,

27
app/lib/components/Peers.jsx
View File

@ -13,7 +13,7 @@ class Peers extends React.Component
super(props);
this.state = {
peerWidth : 400,
peerHeight : 300,
peerHeight : 300,
ratio : 1.334
};
}
@ -25,7 +25,7 @@ class Peers extends React.Component
updateDimensions(props = this.props)
{
const n = props.peers ? props.peers.length : 0;
const n = props.videoStreams ? props.videoStreams : 0;
if (n == 0)
{
@ -74,7 +74,7 @@ class Peers extends React.Component
componentWillReceiveProps(nextProps)
{
if (nextProps.peers)
if (nextProps.videoStreams)
this.updateDimensions(nextProps);
}
@ -86,11 +86,11 @@ class Peers extends React.Component
peers
} = this.props;
const style =
{
'width' : this.state.peerWidth,
'height' : this.state.peerHeight
};
const style =
{
'width' : this.state.peerWidth,
'height' : this.state.peerHeight
};
return (
<div data-component='Peers' ref='peers'>
@ -102,11 +102,12 @@ class Peers extends React.Component
<div
className={classnames('peer-container', {
'active-speaker' : peer.name === activeSpeakerName
})} style={style}
})}
>
<Peer
advancedMode={advancedMode}
name={peer.name}
style={style}
/>
</div>
</Appear>
@ -122,15 +123,23 @@ Peers.propTypes =
{
advancedMode : PropTypes.bool,
peers : PropTypes.arrayOf(appPropTypes.Peer).isRequired,
videoStreams : PropTypes.any,
activeSpeakerName : PropTypes.string
};
const mapStateToProps = (state) =>
{
const peersArray = Object.values(state.peers);
const videoStreamsArray = Object.values(state.consumers);
const videoStreams =
videoStreamsArray.filter((consumer) =>
{
return (consumer.source === 'webcam' || consumer.source === 'screen');
}).length;
return {
peers : peersArray,
videoStreams : videoStreams,
activeSpeakerName : state.room.activeSpeakerName
};
};

19
app/stylus/components/Peer.styl
View File

@ -3,6 +3,15 @@
position: relative;
height: 100%;
width: 100%;
flex-direction: row;
display: flex;
&.screen {
border: 5px solid rgba(#fff, 0.4);
}
&:not(.screen) {
}
> .controls {
position: absolute;
@ -94,6 +103,16 @@
align-items: center;
}
> .view-container {
&.webcam {
order: 2;
}
&.screen {
order: 1;
}
}
.incompatible-video {
position: absolute;
z-index: 2

33
app/stylus/components/PeerView.styl
View File

@ -194,39 +194,6 @@
}
}
> .minivideo {
height: 15%;
width: 15%;
bottom: 1%;
right: 1%;
position: absolute;
overflow: hidden;
> video {
flex: 100 100 auto;
height: 100%;
width: 100%;
object-fit: cover;
user-select: none;
transition-property: opacity;
transition-duration: .15s;
background-color: rgba(#000, 0.75);
&.is-me {
transform: scaleX(-1);
}
&.hidden {
opacity: 0;
transition-duration: 0s;
}
&.loading {
filter: blur(5px);
}
}
}
> .volume-container {
position: absolute;
top: 0

109
app/stylus/components/ScreenView.styl 100644
View File

@ -0,0 +1,109 @@
[data-component='ScreenView'] {
position: relative;
flex: 100 100 auto;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
background-color: rgba(#2a4b58, 0.9);
background-image: url('/resources/images/buddy.svg');
background-position: bottom;
background-size: auto 85%;
background-repeat: no-repeat;
> .info {
$backgroundTint = #000;
position: absolute;
z-index: 5
top: 0.6vmin;
left: 0.6vmin;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
> .media {
flex: 0 0 auto;
display: flex;
flex-direction: row;
> .box {
padding: 0.4vmin;
border-radius: 2px;
background-color: rgba(#000, 0.25);
> p {
user-select: none;
pointer-events: none;
margin-bottom: 2px;
color: rgba(#fff, 0.7);
font-size: 10px;
&:last-child {
margin-bottom: 0;
}
}
}
}
}
> video {
flex: 100 100 auto;
height: 100%;
width: 100%;
object-fit: contain;
user-select: none;
transition-property: opacity;
transition-duration: .15s;
background-color: rgba(#000, 0.75);
&.is-me {
transform: scaleX(-1);
}
&.hidden {
opacity: 0;
transition-duration: 0s;
}
&.loading {
filter: blur(5px);
}
}
> .spinner-container {
position: absolute;
top: 0
bottom: 0;
left: 0;
right: 0;
background-color: rgba(#000, 0.75);
.react-spinner {
position: relative;
width: 48px;
height: 48px;
top: 50%;
left: 50%;
.react-spinner_bar {
position: absolute;
width: 20%;
height: 7.8%;
top: -3.9%;
left: -10%;
animation: PeerView-spinner 1.2s linear infinite;
border-radius: 5px;
background-color: rgba(#fff, 0.5);
}
}
}
}
@keyframes ScreenView-spinner {
0% { opacity: 1; }
100% { opacity: 0.15; }
}

1
app/stylus/index.styl
View File

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