Merge branch 'develop' of https://github.com/havfo/multiparty-meeting into develop
Stefan Otto
commit
7dfaeb65b5
|
|
@ -189,6 +189,19 @@ class FirefoxScreenShare
|
|||
}
|
||||
}
|
||||
|
||||
class DefaultScreenShare
|
||||
{
|
||||
isScreenShareAvailable()
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
needExtension()
|
||||
{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export default class ScreenShare
|
||||
{
|
||||
static create()
|
||||
|
|
@ -205,7 +218,7 @@ export default class ScreenShare
|
|||
}
|
||||
default:
|
||||
{
|
||||
return null;
|
||||
return new DefaultScreenShare();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ 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) =>
|
||||
{
|
||||
|
|
@ -79,19 +78,30 @@ const Peer = (props) =>
|
|||
</div>
|
||||
: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}
|
||||
screenTrack={screenConsumer ? screenConsumer.track : null}
|
||||
videoVisible={videoVisible}
|
||||
videoProfile={videoProfile}
|
||||
screenVisible={screenVisible}
|
||||
screenProfile={screenProfile}
|
||||
audioCodec={micConsumer ? micConsumer.codec : null}
|
||||
videoCodec={webcamConsumer ? webcamConsumer.codec : null}
|
||||
screenCodec={screenConsumer ? screenConsumer.codec : null}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
Peer.propTypes =
|
||||
|
|
|
|||
|
|
@ -1,160 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import Spinner from 'react-spinner';
|
||||
|
||||
export default class PeerScreenView extends React.Component
|
||||
{
|
||||
constructor(props)
|
||||
{
|
||||
super(props);
|
||||
|
||||
this.state =
|
||||
{
|
||||
videoWidth : null,
|
||||
videoHeight : null
|
||||
};
|
||||
|
||||
// Latest received video track.
|
||||
// @type {MediaStreamTrack}
|
||||
this._videoTrack = null;
|
||||
|
||||
// Periodic timer for showing video resolution.
|
||||
this._videoResolutionTimer = null;
|
||||
}
|
||||
|
||||
render()
|
||||
{
|
||||
const {
|
||||
isMe,
|
||||
videoVisible,
|
||||
videoProfile,
|
||||
videoCodec
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
videoWidth,
|
||||
videoHeight
|
||||
} = this.state;
|
||||
|
||||
return (
|
||||
<div data-component='PeerScreenView'>
|
||||
<div className='info'>
|
||||
<div className={classnames('media', { 'is-me': isMe })}>
|
||||
<div className='box'>
|
||||
{videoCodec ?
|
||||
<p className='codec'>{videoCodec} {videoProfile}</p>
|
||||
:null
|
||||
}
|
||||
|
||||
{(videoVisible && videoWidth !== null) ?
|
||||
<p className='resolution'>{videoWidth}x{videoHeight}</p>
|
||||
:null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<video
|
||||
ref='video'
|
||||
className={classnames({
|
||||
hidden : !videoVisible,
|
||||
'is-me' : isMe,
|
||||
loading : videoProfile === 'none'
|
||||
})}
|
||||
autoPlay
|
||||
muted={isMe}
|
||||
/>
|
||||
|
||||
{videoProfile === 'none' ?
|
||||
<div className='spinner-container'>
|
||||
<Spinner />
|
||||
</div>
|
||||
:null
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
componentDidMount()
|
||||
{
|
||||
const { videoTrack } = this.props;
|
||||
|
||||
this._setTracks(videoTrack);
|
||||
}
|
||||
|
||||
componentWillUnmount()
|
||||
{
|
||||
clearInterval(this._videoResolutionTimer);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps)
|
||||
{
|
||||
const { videoTrack } = nextProps;
|
||||
|
||||
this._setTracks(videoTrack);
|
||||
}
|
||||
|
||||
_setTracks(videoTrack)
|
||||
{
|
||||
if (this._videoTrack === videoTrack)
|
||||
return;
|
||||
|
||||
this._videoTrack = videoTrack;
|
||||
|
||||
clearInterval(this._videoResolutionTimer);
|
||||
this._hideVideoResolution();
|
||||
|
||||
const { video } = this.refs;
|
||||
|
||||
if (videoTrack)
|
||||
{
|
||||
const stream = new MediaStream;
|
||||
|
||||
if (videoTrack)
|
||||
stream.addTrack(videoTrack);
|
||||
|
||||
video.srcObject = stream;
|
||||
|
||||
if (videoTrack)
|
||||
this._showVideoResolution();
|
||||
}
|
||||
else
|
||||
{
|
||||
video.srcObject = null;
|
||||
}
|
||||
}
|
||||
|
||||
_showVideoResolution()
|
||||
{
|
||||
this._videoResolutionTimer = setInterval(() =>
|
||||
{
|
||||
const { videoWidth, videoHeight } = this.state;
|
||||
const { video } = this.refs;
|
||||
|
||||
// Don't re-render if nothing changed.
|
||||
if (video.videoWidth === videoWidth && video.videoHeight === videoHeight)
|
||||
return;
|
||||
|
||||
this.setState(
|
||||
{
|
||||
videoWidth : video.videoWidth,
|
||||
videoHeight : video.videoHeight
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
_hideVideoResolution()
|
||||
{
|
||||
this.setState({ videoWidth: null, videoHeight: null });
|
||||
}
|
||||
}
|
||||
|
||||
PeerScreenView.propTypes =
|
||||
{
|
||||
isMe : PropTypes.bool,
|
||||
videoTrack : PropTypes.any,
|
||||
videoVisible : PropTypes.bool.isRequired,
|
||||
videoProfile : PropTypes.string,
|
||||
videoCodec : PropTypes.string
|
||||
};
|
||||
|
|
@ -16,7 +16,9 @@ export default class PeerView extends React.Component
|
|||
{
|
||||
volume : 0, // Integer from 0 to 10.,
|
||||
videoWidth : null,
|
||||
videoHeight : null
|
||||
videoHeight : null,
|
||||
screenWidth : null,
|
||||
screenHeight : null
|
||||
};
|
||||
|
||||
// Latest received video track.
|
||||
|
|
@ -27,6 +29,10 @@ export default class PeerView extends React.Component
|
|||
// @type {MediaStreamTrack}
|
||||
this._videoTrack = null;
|
||||
|
||||
// Latest received screen track.
|
||||
// @type {MediaStreamTrack}
|
||||
this._screenTrack = null;
|
||||
|
||||
// Hark instance.
|
||||
// @type {Object}
|
||||
this._hark = null;
|
||||
|
|
@ -42,27 +48,49 @@ export default class PeerView extends React.Component
|
|||
peer,
|
||||
videoVisible,
|
||||
videoProfile,
|
||||
screenVisible,
|
||||
screenProfile,
|
||||
audioCodec,
|
||||
videoCodec,
|
||||
screenCodec,
|
||||
onChangeDisplayName
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
volume,
|
||||
videoWidth,
|
||||
videoHeight
|
||||
videoHeight,
|
||||
screenWidth,
|
||||
screenHeight
|
||||
} = this.state;
|
||||
|
||||
return (
|
||||
<div data-component='PeerView'>
|
||||
<div className='info'>
|
||||
<div className={classnames('media', { 'is-me': isMe })}>
|
||||
{screenVisible ?
|
||||
<div className='box'>
|
||||
{audioCodec ?
|
||||
<p className='codec'>{audioCodec}</p>
|
||||
:null
|
||||
}
|
||||
|
||||
{screenCodec ?
|
||||
<p className='codec'>{screenCodec} {screenProfile}</p>
|
||||
:null
|
||||
}
|
||||
|
||||
{(screenVisible && screenWidth !== null) ?
|
||||
<p className='resolution'>{screenWidth}x{screenHeight}</p>
|
||||
:null
|
||||
}
|
||||
</div>
|
||||
:<div className='box'>
|
||||
{audioCodec ?
|
||||
<p className='codec'>{audioCodec}</p>
|
||||
:null
|
||||
}
|
||||
|
||||
{videoCodec ?
|
||||
<p className='codec'>{videoCodec} {videoProfile}</p>
|
||||
:null
|
||||
|
|
@ -73,6 +101,7 @@ export default class PeerView extends React.Component
|
|||
:null
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className={classnames('peer', { 'is-me': isMe })}>
|
||||
|
|
@ -110,6 +139,19 @@ export default class PeerView extends React.Component
|
|||
|
||||
<video
|
||||
ref='video'
|
||||
className={classnames({
|
||||
hidden : !videoVisible && !screenVisible,
|
||||
'is-me' : isMe,
|
||||
loading : videoProfile === 'none' && screenProfile === 'none'
|
||||
})}
|
||||
autoPlay
|
||||
muted={isMe}
|
||||
/>
|
||||
|
||||
{screenVisible ?
|
||||
<div className='minivideo'>
|
||||
<video
|
||||
ref='minivideo'
|
||||
className={classnames({
|
||||
hidden : !videoVisible,
|
||||
'is-me' : isMe,
|
||||
|
|
@ -118,12 +160,15 @@ export default class PeerView extends React.Component
|
|||
autoPlay
|
||||
muted={isMe}
|
||||
/>
|
||||
</div>
|
||||
:null
|
||||
}
|
||||
|
||||
<div className='volume-container'>
|
||||
<div className={classnames('bar', `level${volume}`)} />
|
||||
</div>
|
||||
|
||||
{videoProfile === 'none' ?
|
||||
{videoProfile === 'none' && screenProfile === 'none' ?
|
||||
<div className='spinner-container'>
|
||||
<Spinner />
|
||||
</div>
|
||||
|
|
@ -135,9 +180,9 @@ export default class PeerView extends React.Component
|
|||
|
||||
componentDidMount()
|
||||
{
|
||||
const { audioTrack, videoTrack } = this.props;
|
||||
const { audioTrack, videoTrack, screenTrack } = this.props;
|
||||
|
||||
this._setTracks(audioTrack, videoTrack);
|
||||
this._setTracks(audioTrack, videoTrack, screenTrack);
|
||||
}
|
||||
|
||||
componentWillUnmount()
|
||||
|
|
@ -150,18 +195,21 @@ export default class PeerView extends React.Component
|
|||
|
||||
componentWillReceiveProps(nextProps)
|
||||
{
|
||||
const { audioTrack, videoTrack } = nextProps;
|
||||
const { audioTrack, videoTrack, screenTrack } = nextProps;
|
||||
|
||||
this._setTracks(audioTrack, videoTrack);
|
||||
this._setTracks(audioTrack, videoTrack, screenTrack);
|
||||
}
|
||||
|
||||
_setTracks(audioTrack, videoTrack)
|
||||
_setTracks(audioTrack, videoTrack, screenTrack)
|
||||
{
|
||||
if (this._audioTrack === audioTrack && this._videoTrack === videoTrack)
|
||||
if (this._audioTrack === audioTrack &&
|
||||
this._videoTrack === videoTrack &&
|
||||
this._screenTrack === screenTrack)
|
||||
return;
|
||||
|
||||
this._audioTrack = audioTrack;
|
||||
this._videoTrack = videoTrack;
|
||||
this._screenTrack = screenTrack;
|
||||
|
||||
if (this._hark)
|
||||
this._hark.stop();
|
||||
|
|
@ -169,9 +217,9 @@ export default class PeerView extends React.Component
|
|||
clearInterval(this._videoResolutionTimer);
|
||||
this._hideVideoResolution();
|
||||
|
||||
const { video } = this.refs;
|
||||
const { video, minivideo } = this.refs;
|
||||
|
||||
if (audioTrack || videoTrack)
|
||||
if (audioTrack || videoTrack || screenTrack)
|
||||
{
|
||||
const stream = new MediaStream;
|
||||
|
||||
|
|
@ -181,7 +229,19 @@ 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;
|
||||
}
|
||||
|
||||
if (audioTrack)
|
||||
this._runHark(stream);
|
||||
|
|
@ -252,9 +312,13 @@ PeerView.propTypes =
|
|||
[ appPropTypes.Me, appPropTypes.Peer ]).isRequired,
|
||||
audioTrack : PropTypes.any,
|
||||
videoTrack : PropTypes.any,
|
||||
screenTrack : PropTypes.any,
|
||||
videoVisible : PropTypes.bool.isRequired,
|
||||
videoProfile : PropTypes.string,
|
||||
screenVisible : PropTypes.bool.isRequired,
|
||||
screenProfile : PropTypes.string,
|
||||
audioCodec : PropTypes.string,
|
||||
videoCodec : PropTypes.string,
|
||||
screenCodec : PropTypes.string,
|
||||
onChangeDisplayName : PropTypes.func
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ import { render } from 'react-dom';
|
|||
import { Provider } from 'react-redux';
|
||||
import {
|
||||
applyMiddleware as applyReduxMiddleware,
|
||||
createStore as createReduxStore
|
||||
createStore as createReduxStore,
|
||||
compose as composeRedux
|
||||
} from 'redux';
|
||||
import thunk from 'redux-thunk';
|
||||
import { createLogger as createReduxLogger } from 'redux-logger';
|
||||
|
|
@ -40,10 +41,22 @@ if (process.env.NODE_ENV === 'development')
|
|||
reduxMiddlewares.push(reduxLogger);
|
||||
}
|
||||
|
||||
const composeEnhancers =
|
||||
typeof window === 'object' &&
|
||||
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
|
||||
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
|
||||
// Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
|
||||
}) : composeRedux;
|
||||
|
||||
const enhancer = composeEnhancers(
|
||||
applyReduxMiddleware(...reduxMiddlewares)
|
||||
// other store enhancers if any
|
||||
);
|
||||
|
||||
const store = createReduxStore(
|
||||
reducers,
|
||||
undefined,
|
||||
applyReduxMiddleware(...reduxMiddlewares)
|
||||
enhancer
|
||||
);
|
||||
|
||||
domready(() =>
|
||||
|
|
|
|||
|
|
@ -1,146 +0,0 @@
|
|||
[data-component='PeerScreenView'] {
|
||||
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;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background: linear-gradient(to bottom,
|
||||
rgba($backgroundTint, 0) 0%,
|
||||
rgba($backgroundTint, 0) 60%,
|
||||
rgba($backgroundTint, 0.1) 70%,
|
||||
rgba($backgroundTint, 0.8) 100%);
|
||||
|
||||
> .media {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
> .box {
|
||||
margin: 4px;
|
||||
padding: 2px 4px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .peer {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
||||
+desktop() {
|
||||
&.is-me {
|
||||
padding: 10px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&:not(.is-me) {
|
||||
padding: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
&.is-me {
|
||||
padding: 10px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&:not(.is-me) {
|
||||
padding: 10px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> 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);
|
||||
}
|
||||
}
|
||||
|
||||
> .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 PeerScreenView-spinner {
|
||||
0% { opacity: 1; }
|
||||
100% { opacity: 0.15; }
|
||||
}
|
||||
|
|
@ -24,11 +24,6 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background: linear-gradient(to bottom,
|
||||
rgba($backgroundTint, 0) 0%,
|
||||
rgba($backgroundTint, 0) 60%,
|
||||
rgba($backgroundTint, 0.1) 70%,
|
||||
rgba($backgroundTint, 0.8) 100%);
|
||||
|
||||
> .media {
|
||||
flex: 0 0 auto;
|
||||
|
|
@ -195,6 +190,39 @@
|
|||
}
|
||||
}
|
||||
|
||||
> .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
|
||||
|
|
|
|||
|
|
@ -40,7 +40,6 @@ body {
|
|||
@import './components/Peers';
|
||||
@import './components/Peer';
|
||||
@import './components/PeerView';
|
||||
@import './components/PeerScreenView';
|
||||
@import './components/Notifications';
|
||||
@import './components/Chat';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -254,7 +254,7 @@ class Room extends EventEmitter
|
|||
|
||||
protooPeer.send(
|
||||
'chat-history-receive',
|
||||
{ chatHistory : this._chatHistory }
|
||||
{ chatHistory: this._chatHistory }
|
||||
);
|
||||
|
||||
break;
|
||||
|
|
|
|||
Loading…
Reference in New Issue