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

Major cleanup

Browse Source
This commit is contained in:
Håvar Aambø Fosstveit
2018-12-12 22:28:33 +01:00
parent fa91d9b9e2
commit 60fb9c735e
32 changed files with 506 additions and 16543 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/lib/RoomClient.js
+116 -108
View File
@@ -30,10 +30,21 @@ const VIDEO_CONSTRAINS =
aspectRatio : 1.334
};
let store;
export default class RoomClient
{
/**
* @param {Object} data
* @param {Object} data.store - The Redux store.
*/
static init(data)
{
store = data.store;
}
constructor(
{ roomId, peerName, displayName, device, useSimulcast, produce, dispatch, getState })
{ roomId, peerName, displayName, device, useSimulcast, produce })
{
logger.debug(
'constructor() [roomId:"%s", peerName:"%s", displayName:"%s", device:%s]',
@@ -53,12 +64,6 @@ export default class RoomClient
// Whether simulcast should be used.
this._useSimulcast = useSimulcast;
// Redux store dispatch function.
this._dispatch = dispatch;
// Redux store getState function.
this._getState = getState;
// This device
this._device = device;
@@ -139,7 +144,7 @@ export default class RoomClient
// the 'leaveRoom' notification).
setTimeout(() => this._signalingSocket.close(), 250);
this._dispatch(stateActions.setRoomState('closed'));
store.dispatch(stateActions.setRoomState('closed'));
}
_startKeyListener()
@@ -161,21 +166,21 @@ export default class RoomClient
{
case 'a': // Activate advanced mode
{
this._dispatch(stateActions.toggleAdvancedMode());
store.dispatch(stateActions.toggleAdvancedMode());
this.notify('Toggled advanced mode.');
break;
}
case '1': // Set democratic view
{
this._dispatch(stateActions.setDisplayMode('democratic'));
store.dispatch(stateActions.setDisplayMode('democratic'));
this.notify('Changed layout to democratic view.');
break;
}
case '2': // Set filmstrip view
{
this._dispatch(stateActions.setDisplayMode('filmstrip'));
store.dispatch(stateActions.setDisplayMode('filmstrip'));
this.notify('Changed layout to filmstrip view.');
break;
}
@@ -225,7 +230,7 @@ export default class RoomClient
notify(text)
{
this._dispatch(requestActions.notify({ text: text }));
store.dispatch(requestActions.notify({ text: text }));
}
timeoutCallback(callback)
@@ -290,7 +295,7 @@ export default class RoomClient
{
await this.sendRequest('change-display-name', { displayName });
this._dispatch(stateActions.setDisplayName(displayName));
store.dispatch(stateActions.setDisplayName(displayName));
this.notify(`Your display name changed to ${displayName}.`);
}
@@ -302,7 +307,7 @@ export default class RoomClient
// We need to refresh the component for it to render the previous
// displayName again.
this._dispatch(stateActions.setDisplayName());
store.dispatch(stateActions.setDisplayName());
}
}
@@ -326,6 +331,9 @@ export default class RoomClient
try
{
store.dispatch(
stateActions.addUserMessage(chatMessage.text));
await this.sendRequest('chat-message', { chatMessage });
}
catch (error)
@@ -367,7 +375,7 @@ export default class RoomClient
if (chatHistory.length > 0)
{
logger.debug('Got chat history');
this._dispatch(
store.dispatch(
stateActions.addChatHistory(chatHistory));
}
@@ -375,7 +383,7 @@ export default class RoomClient
{
logger.debug('Got files history');
this._dispatch(stateActions.addFileHistory(fileHistory));
store.dispatch(stateActions.addFileHistory(fileHistory));
}
if (lastN.length > 0)
@@ -466,7 +474,7 @@ export default class RoomClient
return new Promise((resolve, reject) =>
{
window.addEventListener('message', _onExtensionMessage, false);
// eslint-disable-next-line no-undef
// eslint-disable-next-line
chrome.webstore.install(null, _successfulInstall, _failedInstall);
function _onExtensionMessage({ data })
{
@@ -494,7 +502,7 @@ export default class RoomClient
.then(() =>
{
// This should be handled better
this._dispatch(stateActions.setScreenCapabilities(
store.dispatch(stateActions.setScreenCapabilities(
{
canShareScreen : this._room.canSend('video'),
needExtension : false
@@ -510,7 +518,7 @@ export default class RoomClient
{
logger.debug('enableScreenSharing()');
this._dispatch(stateActions.setScreenShareInProgress(true));
store.dispatch(stateActions.setScreenShareInProgress(true));
try
{
@@ -521,7 +529,7 @@ export default class RoomClient
logger.error('enableScreenSharing() | failed: %o', error);
}
this._dispatch(stateActions.setScreenShareInProgress(false));
store.dispatch(stateActions.setScreenShareInProgress(false));
}
async enableWebcam()
@@ -531,7 +539,7 @@ export default class RoomClient
// Store in cookie.
cookiesManager.setDevices({ webcamEnabled: true });
this._dispatch(stateActions.setWebcamInProgress(true));
store.dispatch(stateActions.setWebcamInProgress(true));
try
{
@@ -542,14 +550,14 @@ export default class RoomClient
logger.error('enableWebcam() | failed: %o', error);
}
this._dispatch(stateActions.setWebcamInProgress(false));
store.dispatch(stateActions.setWebcamInProgress(false));
}
async disableScreenSharing()
{
logger.debug('disableScreenSharing()');
this._dispatch(stateActions.setScreenShareInProgress(true));
store.dispatch(stateActions.setScreenShareInProgress(true));
try
{
@@ -560,7 +568,7 @@ export default class RoomClient
logger.error('disableScreenSharing() | failed: %o', error);
}
this._dispatch(stateActions.setScreenShareInProgress(false));
store.dispatch(stateActions.setScreenShareInProgress(false));
}
async disableWebcam()
@@ -570,7 +578,7 @@ export default class RoomClient
// Store in cookie.
cookiesManager.setDevices({ webcamEnabled: false });
this._dispatch(stateActions.setWebcamInProgress(true));
store.dispatch(stateActions.setWebcamInProgress(true));
try
{
@@ -581,14 +589,14 @@ export default class RoomClient
logger.error('disableWebcam() | failed: %o', error);
}
this._dispatch(stateActions.setWebcamInProgress(false));
store.dispatch(stateActions.setWebcamInProgress(false));
}
async changeAudioDevice(deviceId)
{
logger.debug('changeAudioDevice() [deviceId: %s]', deviceId);
this._dispatch(
store.dispatch(
stateActions.setAudioInProgress(true));
try
@@ -642,13 +650,13 @@ export default class RoomClient
if (volume !== this._micProducer.volume)
{
this._micProducer.volume = volume;
this._dispatch(stateActions.setProducerVolume(this._micProducer.id, volume));
store.dispatch(stateActions.setProducerVolume(this._micProducer.id, volume));
}
});
track.stop();
this._dispatch(
store.dispatch(
stateActions.setProducerTrack(this._micProducer.id, newTrack));
cookiesManager.setAudioDevice({ audioDeviceId: deviceId });
@@ -660,7 +668,7 @@ export default class RoomClient
logger.error('changeAudioDevice() failed: %o', error);
}
this._dispatch(
store.dispatch(
stateActions.setAudioInProgress(false));
}
@@ -668,7 +676,7 @@ export default class RoomClient
{
logger.debug('changeWebcam() [deviceId: %s]', deviceId);
this._dispatch(
store.dispatch(
stateActions.setWebcamInProgress(true));
try
@@ -704,7 +712,7 @@ export default class RoomClient
track.stop();
this._dispatch(
store.dispatch(
stateActions.setProducerTrack(this._webcamProducer.id, newTrack));
cookiesManager.setVideoDevice({ videoDeviceId: deviceId });
@@ -716,7 +724,7 @@ export default class RoomClient
logger.error('changeWebcam() failed: %o', error);
}
this._dispatch(
store.dispatch(
stateActions.setWebcamInProgress(false));
}
@@ -727,7 +735,7 @@ export default class RoomClient
let oldResolution;
let newResolution;
this._dispatch(
store.dispatch(
stateActions.setWebcamInProgress(true));
try
@@ -768,7 +776,7 @@ export default class RoomClient
track.stop();
this._dispatch(
store.dispatch(
stateActions.setProducerTrack(this._webcamProducer.id, newTrack));
}
catch (error)
@@ -778,7 +786,7 @@ export default class RoomClient
this._webcam.resolution = oldResolution;
}
this._dispatch(
store.dispatch(
stateActions.setWebcamInProgress(false));
}
@@ -788,7 +796,7 @@ export default class RoomClient
this._spotlights.setPeerSpotlight(peerName);
this._dispatch(
store.dispatch(
stateActions.setSelectedPeer(peerName));
}
@@ -796,7 +804,7 @@ export default class RoomClient
{
logger.debug('mutePeerAudio() [peerName:"%s"]', peerName);
this._dispatch(
store.dispatch(
stateActions.setPeerAudioInProgress(peerName, true));
try
@@ -820,7 +828,7 @@ export default class RoomClient
logger.error('mutePeerAudio() failed: %o', error);
}
this._dispatch(
store.dispatch(
stateActions.setPeerAudioInProgress(peerName, false));
}
@@ -828,7 +836,7 @@ export default class RoomClient
{
logger.debug('unmutePeerAudio() [peerName:"%s"]', peerName);
this._dispatch(
store.dispatch(
stateActions.setPeerAudioInProgress(peerName, true));
try
@@ -852,7 +860,7 @@ export default class RoomClient
logger.error('unmutePeerAudio() failed: %o', error);
}
this._dispatch(
store.dispatch(
stateActions.setPeerAudioInProgress(peerName, false));
}
@@ -860,7 +868,7 @@ export default class RoomClient
{
logger.debug('pausePeerVideo() [peerName:"%s"]', peerName);
this._dispatch(
store.dispatch(
stateActions.setPeerVideoInProgress(peerName, true));
try
@@ -884,7 +892,7 @@ export default class RoomClient
logger.error('pausePeerVideo() failed: %o', error);
}
this._dispatch(
store.dispatch(
stateActions.setPeerVideoInProgress(peerName, false));
}
@@ -892,7 +900,7 @@ export default class RoomClient
{
logger.debug('resumePeerVideo() [peerName:"%s"]', peerName);
this._dispatch(
store.dispatch(
stateActions.setPeerVideoInProgress(peerName, true));
try
@@ -916,7 +924,7 @@ export default class RoomClient
logger.error('resumePeerVideo() failed: %o', error);
}
this._dispatch(
store.dispatch(
stateActions.setPeerVideoInProgress(peerName, false));
}
@@ -924,7 +932,7 @@ export default class RoomClient
{
logger.debug('pausePeerScreen() [peerName:"%s"]', peerName);
this._dispatch(
store.dispatch(
stateActions.setPeerScreenInProgress(peerName, true));
try
@@ -948,7 +956,7 @@ export default class RoomClient
logger.error('pausePeerScreen() failed: %o', error);
}
this._dispatch(
store.dispatch(
stateActions.setPeerScreenInProgress(peerName, false));
}
@@ -956,7 +964,7 @@ export default class RoomClient
{
logger.debug('resumePeerScreen() [peerName:"%s"]', peerName);
this._dispatch(
store.dispatch(
stateActions.setPeerScreenInProgress(peerName, true));
try
@@ -980,7 +988,7 @@ export default class RoomClient
logger.error('resumePeerScreen() failed: %o', error);
}
this._dispatch(
store.dispatch(
stateActions.setPeerScreenInProgress(peerName, false));
}
@@ -988,7 +996,7 @@ export default class RoomClient
{
logger.debug('enableAudioOnly()');
this._dispatch(
store.dispatch(
stateActions.setAudioOnlyInProgress(true));
try
@@ -1007,7 +1015,7 @@ export default class RoomClient
}
}
this._dispatch(
store.dispatch(
stateActions.setAudioOnlyState(true));
}
catch (error)
@@ -1015,7 +1023,7 @@ export default class RoomClient
logger.error('enableAudioOnly() failed: %o', error);
}
this._dispatch(
store.dispatch(
stateActions.setAudioOnlyInProgress(false));
}
@@ -1023,7 +1031,7 @@ export default class RoomClient
{
logger.debug('disableAudioOnly()');
this._dispatch(
store.dispatch(
stateActions.setAudioOnlyInProgress(true));
try
@@ -1042,7 +1050,7 @@ export default class RoomClient
}
}
this._dispatch(
store.dispatch(
stateActions.setAudioOnlyState(false));
}
catch (error)
@@ -1050,7 +1058,7 @@ export default class RoomClient
logger.error('disableAudioOnly() failed: %o', error);
}
this._dispatch(
store.dispatch(
stateActions.setAudioOnlyInProgress(false));
}
@@ -1058,14 +1066,14 @@ export default class RoomClient
{
logger.debug('sendRaiseHandState: ', state);
this._dispatch(
store.dispatch(
stateActions.setMyRaiseHandStateInProgress(true));
try
{
await this.sendRequest('raisehand-message', { raiseHandState: state });
this._dispatch(
store.dispatch(
stateActions.setMyRaiseHandState(state));
}
catch (error)
@@ -1075,10 +1083,10 @@ export default class RoomClient
this.notify(`An error occured while ${state ? 'raising' : 'lowering'} hand.`);
// We need to refresh the component for it to render changed state
this._dispatch(stateActions.setMyRaiseHandState(!state));
store.dispatch(stateActions.setMyRaiseHandState(!state));
}
this._dispatch(
store.dispatch(
stateActions.setMyRaiseHandStateInProgress(false));
}
@@ -1086,7 +1094,7 @@ export default class RoomClient
{
logger.debug('restartIce()');
this._dispatch(
store.dispatch(
stateActions.setRestartIceInProgress(true));
try
@@ -1101,14 +1109,14 @@ export default class RoomClient
// Make it artificially longer.
setTimeout(() =>
{
this._dispatch(
store.dispatch(
stateActions.setRestartIceInProgress(false));
}, 500);
}
_join({ displayName, device })
{
this._dispatch(stateActions.setRoomState('connecting'));
store.dispatch(stateActions.setRoomState('connecting'));
this._signalingSocket.on('connect', () =>
{
@@ -1127,7 +1135,7 @@ export default class RoomClient
try { this._room.remoteClose({ cause: 'signaling disconnected' }); }
catch (error) {}
this._dispatch(stateActions.setRoomState('connecting'));
store.dispatch(stateActions.setRoomState('connecting'));
});
this._signalingSocket.on('close', () =>
@@ -1151,7 +1159,7 @@ export default class RoomClient
{
const { peerName } = data;
this._dispatch(
store.dispatch(
stateActions.setRoomActiveSpeaker(peerName));
if (peerName && peerName !== this._peerName)
@@ -1177,7 +1185,7 @@ export default class RoomClient
peer.appData.displayName = displayName;
this._dispatch(
store.dispatch(
stateActions.setPeerDisplayName(displayName, peerName));
this.notify(`${oldDisplayName} changed their display name to ${displayName}.`);
@@ -1187,7 +1195,7 @@ export default class RoomClient
{
const { peerName, picture } = data;
this._dispatch(stateActions.setPeerPicture(peerName, picture));
store.dispatch(stateActions.setPeerPicture(peerName, picture));
});
// This means: server wants to change MY user information
@@ -1198,8 +1206,8 @@ export default class RoomClient
this.changeDisplayName(data.name);
this.changeProfilePicture(data.picture);
this._dispatch(stateActions.setPicture(data.picture));
this._dispatch(stateActions.loggedIn());
store.dispatch(stateActions.setPicture(data.picture));
store.dispatch(stateActions.loggedIn());
this.notify('You are logged in.');
@@ -1224,7 +1232,7 @@ export default class RoomClient
this.notify(`${peer.appData.displayName} ${raiseHandState ? 'raised' : 'lowered'} their hand.`);
this._dispatch(
store.dispatch(
stateActions.setPeerRaiseHandState(peerName, raiseHandState));
});
@@ -1234,12 +1242,12 @@ export default class RoomClient
logger.debug('Got chat from "%s"', peerName);
this._dispatch(
store.dispatch(
stateActions.addResponseMessage({ ...chatMessage, peerName }));
if (!this._getState().toolarea.toolAreaOpen ||
(this._getState().toolarea.toolAreaOpen &&
this._getState().toolarea.currentToolTab !== 'chat')) // Make sound
if (!store.getState().toolarea.toolAreaOpen ||
(store.getState().toolarea.toolAreaOpen &&
store.getState().toolarea.currentToolTab !== 'chat')) // Make sound
{
this._soundNotification();
}
@@ -1259,13 +1267,13 @@ export default class RoomClient
return;
}
this._dispatch(stateActions.addFile(file));
store.dispatch(stateActions.addFile(file));
this.notify(`${peer.appData.displayName} shared a file.`);
if (!this._getState().toolarea.toolAreaOpen ||
(this._getState().toolarea.toolAreaOpen &&
this._getState().toolarea.currentToolTab !== 'files')) // Make sound
if (!store.getState().toolarea.toolAreaOpen ||
(store.getState().toolarea.toolAreaOpen &&
store.getState().toolarea.currentToolTab !== 'files')) // Make sound
{
this._soundNotification();
}
@@ -1287,7 +1295,7 @@ export default class RoomClient
{
logger.warn('mediasoup Peer/Room remotely closed [appData:%o]', appData);
this._dispatch(stateActions.setRoomState('closed'));
store.dispatch(stateActions.setRoomState('closed'));
return;
}
@@ -1350,12 +1358,12 @@ export default class RoomClient
});
// Set our media capabilities.
this._dispatch(stateActions.setMediaCapabilities(
store.dispatch(stateActions.setMediaCapabilities(
{
canSendMic : this._room.canSend('audio'),
canSendWebcam : this._room.canSend('video')
}));
this._dispatch(stateActions.setScreenCapabilities(
store.dispatch(stateActions.setScreenCapabilities(
{
canShareScreen : this._room.canSend('video') &&
this._screenSharing.isScreenShareAvailable(),
@@ -1378,10 +1386,10 @@ export default class RoomClient
}
}
this._dispatch(stateActions.setRoomState('connected'));
store.dispatch(stateActions.setRoomState('connected'));
// Clean all the existing notifcations.
this._dispatch(stateActions.removeAllNotifications());
store.dispatch(stateActions.removeAllNotifications());
this.getServerHistory();
@@ -1389,7 +1397,7 @@ export default class RoomClient
this._spotlights.on('spotlights-updated', (spotlights) =>
{
this._dispatch(stateActions.setSpotlights(spotlights));
store.dispatch(stateActions.setSpotlights(spotlights));
this.updateSpotlights(spotlights);
});
@@ -1440,7 +1448,7 @@ export default class RoomClient
this._micProducer = producer;
this._dispatch(stateActions.addProducer(
store.dispatch(stateActions.addProducer(
{
id : producer.id,
source : 'mic',
@@ -1460,7 +1468,7 @@ export default class RoomClient
'mic Producer "close" event [originator:%s]', originator);
this._micProducer = null;
this._dispatch(stateActions.removeProducer(producer.id));
store.dispatch(stateActions.removeProducer(producer.id));
});
producer.on('pause', (originator) =>
@@ -1468,7 +1476,7 @@ export default class RoomClient
logger.debug(
'mic Producer "pause" event [originator:%s]', originator);
this._dispatch(stateActions.setProducerPaused(producer.id, originator));
store.dispatch(stateActions.setProducerPaused(producer.id, originator));
});
producer.on('resume', (originator) =>
@@ -1476,7 +1484,7 @@ export default class RoomClient
logger.debug(
'mic Producer "resume" event [originator:%s]', originator);
this._dispatch(stateActions.setProducerResumed(producer.id, originator));
store.dispatch(stateActions.setProducerResumed(producer.id, originator));
});
producer.on('handled', () =>
@@ -1512,7 +1520,7 @@ export default class RoomClient
if (volume !== producer.volume)
{
producer.volume = volume;
this._dispatch(stateActions.setProducerVolume(producer.id, volume));
store.dispatch(stateActions.setProducerVolume(producer.id, volume));
}
});
}
@@ -1565,7 +1573,7 @@ export default class RoomClient
this._screenSharingProducer = producer;
this._dispatch(stateActions.addProducer(
store.dispatch(stateActions.addProducer(
{
id : producer.id,
source : 'screen',
@@ -1583,7 +1591,7 @@ export default class RoomClient
'webcam Producer "close" event [originator:%s]', originator);
this._screenSharingProducer = null;
this._dispatch(stateActions.removeProducer(producer.id));
store.dispatch(stateActions.removeProducer(producer.id));
});
producer.on('trackended', (originator) =>
@@ -1599,7 +1607,7 @@ export default class RoomClient
logger.debug(
'webcam Producer "pause" event [originator:%s]', originator);
this._dispatch(stateActions.setProducerPaused(producer.id, originator));
store.dispatch(stateActions.setProducerPaused(producer.id, originator));
});
producer.on('resume', (originator) =>
@@ -1607,7 +1615,7 @@ export default class RoomClient
logger.debug(
'webcam Producer "resume" event [originator:%s]', originator);
this._dispatch(stateActions.setProducerResumed(producer.id, originator));
store.dispatch(stateActions.setProducerResumed(producer.id, originator));
});
producer.on('handled', () =>
@@ -1677,7 +1685,7 @@ export default class RoomClient
this._webcamProducer = producer;
this._dispatch(stateActions.addProducer(
store.dispatch(stateActions.addProducer(
{
id : producer.id,
source : 'webcam',
@@ -1696,7 +1704,7 @@ export default class RoomClient
'webcam Producer "close" event [originator:%s]', originator);
this._webcamProducer = null;
this._dispatch(stateActions.removeProducer(producer.id));
store.dispatch(stateActions.removeProducer(producer.id));
});
producer.on('pause', (originator) =>
@@ -1704,7 +1712,7 @@ export default class RoomClient
logger.debug(
'webcam Producer "pause" event [originator:%s]', originator);
this._dispatch(stateActions.setProducerPaused(producer.id, originator));
store.dispatch(stateActions.setProducerPaused(producer.id, originator));
});
producer.on('resume', (originator) =>
@@ -1712,7 +1720,7 @@ export default class RoomClient
logger.debug(
'webcam Producer "resume" event [originator:%s]', originator);
this._dispatch(stateActions.setProducerResumed(producer.id, originator));
store.dispatch(stateActions.setProducerResumed(producer.id, originator));
});
producer.on('handled', () =>
@@ -1775,10 +1783,10 @@ export default class RoomClient
else if (!this._audioDevices.has(currentAudioDeviceId))
this._audioDevice.device = array[0];
this._dispatch(
store.dispatch(
stateActions.setCanChangeAudioDevice(len >= 2));
if (len >= 1)
this._dispatch(
store.dispatch(
stateActions.setAudioDevices(this._audioDevices));
}
catch (error)
@@ -1823,7 +1831,7 @@ export default class RoomClient
this._webcam.device = array[0];
if (len >= 1)
this._dispatch(
store.dispatch(
stateActions.setWebcamDevices(this._webcams));
}
catch (error)
@@ -1836,7 +1844,7 @@ export default class RoomClient
{
const displayName = peer.appData.displayName;
this._dispatch(stateActions.addPeer(
store.dispatch(stateActions.addPeer(
{
name : peer.name,
displayName : displayName,
@@ -1861,7 +1869,7 @@ export default class RoomClient
'peer "close" event [name:"%s", originator:%s]',
peer.name, originator);
this._dispatch(stateActions.removePeer(peer.name));
store.dispatch(stateActions.removePeer(peer.name));
if (this._room.joined)
{
@@ -1883,7 +1891,7 @@ export default class RoomClient
{
const codec = consumer.rtpParameters.codecs[0];
this._dispatch(stateActions.addConsumer(
store.dispatch(stateActions.addConsumer(
{
id : consumer.id,
peerName : consumer.peer.name,
@@ -1903,7 +1911,7 @@ export default class RoomClient
'consumer "close" event [id:%s, originator:%s, consumer:%o]',
consumer.id, originator, consumer);
this._dispatch(stateActions.removeConsumer(
store.dispatch(stateActions.removeConsumer(
consumer.id, consumer.peer.name));
});
@@ -1938,7 +1946,7 @@ export default class RoomClient
if (volume !== consumer.volume)
{
consumer.volume = volume;
this._dispatch(stateActions.setConsumerVolume(consumer.id, volume));
store.dispatch(stateActions.setConsumerVolume(consumer.id, volume));
}
});
}
@@ -1950,7 +1958,7 @@ export default class RoomClient
'consumer "pause" event [id:%s, originator:%s, consumer:%o]',
consumer.id, originator, consumer);
this._dispatch(stateActions.setConsumerPaused(consumer.id, originator));
store.dispatch(stateActions.setConsumerPaused(consumer.id, originator));
});
consumer.on('resume', (originator) =>
@@ -1959,7 +1967,7 @@ export default class RoomClient
'consumer "resume" event [id:%s, originator:%s, consumer:%o]',
consumer.id, originator, consumer);
this._dispatch(stateActions.setConsumerResumed(consumer.id, originator));
store.dispatch(stateActions.setConsumerResumed(consumer.id, originator));
});
consumer.on('effectiveprofilechange', (profile) =>
@@ -1968,7 +1976,7 @@ export default class RoomClient
'consumer "effectiveprofilechange" event [id:%s, consumer:%o, profile:%s]',
consumer.id, consumer, profile);
this._dispatch(stateActions.setConsumerEffectiveProfile(consumer.id, profile));
store.dispatch(stateActions.setConsumerEffectiveProfile(consumer.id, profile));
});
// Receive the consumer (if we can).
@@ -1985,7 +1993,7 @@ export default class RoomClient
consumer.receive(this._recvTransport)
.then((track) =>
{
this._dispatch(stateActions.setConsumerTrack(consumer.id, track));
store.dispatch(stateActions.setConsumerTrack(consumer.id, track));
})
.catch((error) =>
{
app/lib/RoomContext.js
+14
View File
@@ -0,0 +1,14 @@
import React from 'react';
const RoomContext = React.createContext();
export default RoomContext;
export function withRoomContext(Component)
{
return (props) => ( // eslint-disable-line react/display-name
<RoomContext.Consumer>
{(roomClient) => <Component {...props} roomClient={roomClient} />}
</RoomContext.Consumer>
);
}
app/lib/components/Chat/Chat.jsx
+31 -27
View File
@@ -1,17 +1,28 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import * as stateActions from '../../redux/stateActions';
import * as requestActions from '../../redux/requestActions';
import { withRoomContext } from '../../RoomContext';
import MessageList from './MessageList';
class Chat extends Component
{
createNewMessage(text, sender, name, picture)
{
return {
type : 'message',
text,
time : Date.now(),
name,
sender,
picture
};
}
render()
{
const {
roomClient,
senderPlaceHolder,
onSendMessage,
disabledInput,
autofocus,
displayName,
@@ -23,7 +34,19 @@ class Chat extends Component
<MessageList />
<form
data-component='Sender'
onSubmit={(e) => { onSendMessage(e, displayName, picture); }}
onSubmit={(e) =>
{
e.preventDefault();
const userInput = e.target.message.value;
if (userInput)
{
const message = this.createNewMessage(userInput, 'response', displayName, picture);
roomClient.sendChatMessage(message);
}
e.target.message.value = '';
}}
>
<input
type='text'
@@ -47,8 +70,8 @@ class Chat extends Component
Chat.propTypes =
{
roomClient : PropTypes.any.isRequired,
senderPlaceHolder : PropTypes.string,
onSendMessage : PropTypes.func,
disabledInput : PropTypes.bool,
autofocus : PropTypes.bool,
displayName : PropTypes.string,
@@ -71,27 +94,8 @@ const mapStateToProps = (state) =>
};
};
const mapDispatchToProps = (dispatch) =>
{
return {
onSendMessage : (event, displayName, picture) =>
{
event.preventDefault();
const userInput = event.target.message.value;
if (userInput)
{
dispatch(stateActions.addUserMessage(userInput));
dispatch(requestActions.sendChatMessage(userInput, displayName, picture));
}
event.target.message.value = '';
}
};
};
const ChatContainer = connect(
mapStateToProps,
mapDispatchToProps
)(Chat);
const ChatContainer = withRoomContext(connect(
mapStateToProps
)(Chat));
export default ChatContainer;
app/lib/components/Chat/MessageList.jsx
+36 -30
View File
@@ -30,41 +30,47 @@ class MessageList extends Component
return (
<div data-component='MessageList' id='messages'>
{ chatmessages.length > 0 ?
chatmessages.map((message, i) =>
{
const messageTime = new Date(message.time);
<Choose>
<When condition={chatmessages.length > 0}>
{
chatmessages.map((message, i) =>
{
const messageTime = new Date(message.time);
const picture = (message.sender === 'response' ?
message.picture : this.props.myPicture) || 'resources/images/avatar-empty.jpeg';
const picture = (message.sender === 'response' ?
message.picture : this.props.myPicture) || 'resources/images/avatar-empty.jpeg';
return (
<div className='message' key={i}>
<div className={message.sender}>
<img className='message-avatar' src={picture} />
return (
<div className='message' key={i}>
<div className={message.sender}>
<img className='message-avatar' src={picture} />
<div className='message-content'>
<div
className='message-text'
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html : marked.parse(
message.text,
{ sanitize: true, renderer: linkRenderer }
) }}
/>
<div className='message-content'>
<div
className='message-text'
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html : marked.parse(
message.text,
{ sanitize: true, renderer: linkRenderer }
) }}
/>
<span className='message-time'>
{message.name} - {this.getTimeString(messageTime)}
</span>
<span className='message-time'>
{message.name} - {this.getTimeString(messageTime)}
</span>
</div>
</div>
</div>
</div>
</div>
);
})
:<div className='empty'>
<p>No one has said anything yet...</p>
</div>
}
);
})
}
</When>
<Otherwise>
<div className='empty'>
<p>No one has said anything yet...</p>
</div>
</Otherwise>
</Choose>
</div>
);
}
app/lib/components/FileSharing/FileEntry.jsx
+28 -23
View File
@@ -110,29 +110,34 @@ class FileEntry extends Component
<img className='file-avatar' src={this.props.data.picture || DEFAULT_PICTURE} />
<div className='file-content'>
{this.props.data.me ? (
<p>You shared a file.</p>
) : (
<p>{this.props.data.name} shared a file.</p>
)}
<Choose>
<When condition={this.props.data.me}>
<p>You shared a file.</p>
</When>
<Otherwise>
<p>{this.props.data.name} shared a file.</p>
</Otherwise>
</Choose>
{!this.state.active && !this.state.files && (
<If condition={!this.state.active && !this.state.files}>
<div className='file-info'>
{WebTorrent.WEBRTC_SUPPORT ? (
<span className='button' onClick={this.handleDownload}>
<img src='resources/images/download-icon.svg' />
</span>
) : (
<p>
Your browser does not support downloading files using WebTorrent.
</p>
)}
<Choose>
<When condition={WebTorrent.WEBRTC_SUPPORT}>
<span className='button' onClick={this.handleDownload}>
<img src='resources/images/download-icon.svg' />
</span>
</When>
<Otherwise>
<p>
Your browser does not support downloading files using WebTorrent.
</p>
</Otherwise>
</Choose>
<p>{magnet.decode(this.props.data.file.magnet).dn}</p>
</div>
)}
</If>
{this.state.active && this.state.numPeers === 0 && (
<If condition={this.state.active && this.state.numPeers === 0}>
<Fragment>
<p>
Locating peers
@@ -145,13 +150,13 @@ class FileEntry extends Component
</p>
)}
</Fragment>
)}
</If>
{this.state.active && this.state.numPeers > 0 && (
<If condition={this.state.active && this.state.numPeers > 0}>
<progress value={this.state.progress} />
)}
</If>
{this.state.files && (
<If condition={this.state.files}>
<Fragment>
<p>Torrent finished downloading.</p>
@@ -165,7 +170,7 @@ class FileEntry extends Component
</div>
))}
</Fragment>
)}
</If>
</div>
</div>
);
app/lib/components/FileSharing/SharedFilesList.jsx
+17 -11
View File
@@ -17,17 +17,23 @@ class SharedFilesList extends Component
return (
<div className='shared-files'>
{ sharing.length > 0 ?
sharing.map((entry, i) => (
<FileEntry
data={entry}
key={i}
/>
))
:<div className='empty'>
<p>No one has shared files yet...</p>
</div>
}
<Choose>
<When condition={sharing.length > 0}>
{
sharing.map((entry, i) => (
<FileEntry
data={entry}
key={i}
/>
))
}
</When>
<Otherwise>
<div className='empty'>
<p>No one has shared files yet...</p>
</div>
</Otherwise>
</Choose>
</div>
);
}
app/lib/components/Filmstrip.jsx
+37 -33
View File
@@ -4,7 +4,7 @@ import ResizeObserver from 'resize-observer-polyfill';
import { connect } from 'react-redux';
import debounce from 'lodash/debounce';
import classnames from 'classnames';
import * as requestActions from '../redux/requestActions';
import { withRoomContext } from '../RoomContext';
import Peer from './Peer';
import HiddenPeers from './HiddenPeers';
@@ -114,14 +114,20 @@ class Filmstrip extends Component
render()
{
const { peers, advancedMode, spotlights, spotlightsLength } = this.props;
const {
roomClient,
peers,
advancedMode,
spotlights,
spotlightsLength
} = this.props;
const activePeerName = this.getActivePeerName();
return (
<div data-component='Filmstrip'>
<div className='active-peer-container' ref={this.activePeerContainer}>
{peers[activePeerName] && (
<If condition={peers[activePeerName]}>
<div
className='active-peer'
style={{
@@ -134,7 +140,7 @@ class Filmstrip extends Component
name={activePeerName}
/>
</div>
)}
</If>
</div>
<div className='filmstrip'>
@@ -142,35 +148,37 @@ class Filmstrip extends Component
{
Object.keys(peers).map((peerName) =>
{
return (
spotlights.find((spotlightsElement) => spotlightsElement === peerName)?
<div
key={peerName}
onClick={() => this.props.setSelectedPeer(peerName)}
className={classnames('film', {
selected : this.props.selectedPeerName === peerName,
active : this.state.lastSpeaker === peerName
})}
>
<div className='film-content'>
<Peer
advancedMode={advancedMode}
name={peerName}
/>
</div>
<If
condition={
spotlights.find((spotlightsElement) => spotlightsElement === peerName)
}
>
<div
key={peerName}
onClick={() => roomClient.setSelectedPeer(peerName)}
className={classnames('film', {
selected : this.props.selectedPeerName === peerName,
active : this.state.lastSpeaker === peerName
})}
>
<div className='film-content'>
<Peer
advancedMode={advancedMode}
name={peerName}
/>
</div>
:null
);
</div>
</If>;
})
}
</div>
</div>
<div className='hidden-peer-container'>
{ (spotlightsLength<Object.keys(peers).length)?
<If condition={(spotlightsLength<Object.keys(peers).length)}>
<HiddenPeers
hiddenPeersCount={Object.keys(peers).length-spotlightsLength}
/>:null
}
/>
</If>
</div>
</div>
@@ -179,13 +187,13 @@ class Filmstrip extends Component
}
Filmstrip.propTypes = {
roomClient : PropTypes.any.isRequired,
activeSpeakerName : PropTypes.string,
advancedMode : PropTypes.bool,
peers : PropTypes.object.isRequired,
consumers : PropTypes.object.isRequired,
myName : PropTypes.string.isRequired,
selectedPeerName : PropTypes.string,
setSelectedPeer : PropTypes.func.isRequired,
spotlightsLength : PropTypes.number,
spotlights : PropTypes.array.isRequired
};
@@ -205,11 +213,7 @@ const mapStateToProps = (state) =>
};
};
const mapDispatchToProps = {
setSelectedPeer : requestActions.setSelectedPeer
};
export default connect(
export default withRoomContext(connect(
mapStateToProps,
mapDispatchToProps
)(Filmstrip);
undefined
)(Filmstrip));
app/lib/components/FullScreenView.jsx
+2 -3
View File
@@ -31,12 +31,11 @@ const FullScreenView = (props) =>
return (
<div data-component='FullScreenView'>
{consumerVisible && !consumer.supported ?
<If condition={consumerVisible && !consumer.supported}>
<div className='incompatible-video'>
<p>incompatible video</p>
</div>
:null
}
</If>
<div className='controls'>
<div
app/lib/components/FullView.jsx
+2 -3
View File
@@ -35,12 +35,11 @@ export default class FullView extends React.Component
muted={Boolean(true)}
/>
{videoProfile === 'none' ?
<If condition={videoProfile === 'none'}>
<div className='spinner-container'>
<Spinner />
</div>
:null
}
</If>
</div>
);
}
app/lib/components/Me.jsx
+27 -45
View File
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
import classnames from 'classnames';
import { getDeviceInfo } from 'mediasoup-client';
import * as appPropTypes from './appPropTypes';
import * as requestActions from '../redux/requestActions';
import { withRoomContext } from '../RoomContext';
import PeerView from './PeerView';
import ScreenView from './ScreenView';
@@ -46,17 +46,13 @@ class Me extends React.Component
render()
{
const {
roomClient,
connected,
me,
advancedMode,
micProducer,
webcamProducer,
screenProducer,
onChangeDisplayName,
onMuteMic,
onUnmuteMic,
onEnableWebcam,
onDisableWebcam
screenProducer
} = this.props;
let micState;
@@ -107,7 +103,7 @@ class Me extends React.Component
onMouseOut={this.handleMouseOut}
>
<div className={classnames('view-container', 'webcam')}>
{connected ?
<If condition={connected}>
<div className={classnames('controls', 'visible')}>
<div
data-tip='keyboard shortcut: &lsquo;m&lsquo;'
@@ -120,7 +116,9 @@ class Me extends React.Component
})}
onClick={() =>
{
micState === 'on' ? onMuteMic() : onUnmuteMic();
micState === 'on' ?
roomClient.muteMic() :
roomClient.unmuteMic();
}}
/>
<ReactTooltip
@@ -134,12 +132,13 @@ class Me extends React.Component
})}
onClick={() =>
{
webcamState === 'on' ? onDisableWebcam() : onEnableWebcam();
webcamState === 'on' ?
roomClient.disableWebcam() :
roomClient.enableWebcam();
}}
/>
</div>
:null
}
</If>
<PeerView
isMe
@@ -151,11 +150,14 @@ class Me extends React.Component
videoVisible={videoVisible}
audioCodec={micProducer ? micProducer.codec : null}
videoCodec={webcamProducer ? webcamProducer.codec : null}
onChangeDisplayName={(displayName) => onChangeDisplayName(displayName)}
onChangeDisplayName={(displayName) =>
{
roomClient.changeDisplayName(displayName);
}}
/>
</div>
{screenProducer ?
<If condition={screenProducer}>
<div className={classnames('view-container', 'screen')}>
<ScreenView
isMe
@@ -165,8 +167,7 @@ class Me extends React.Component
screenCodec={screenProducer ? screenProducer.codec : null}
/>
</div>
:null
}
</If>
</div>
);
}
@@ -204,17 +205,13 @@ class Me extends React.Component
Me.propTypes =
{
connected : PropTypes.bool.isRequired,
advancedMode : PropTypes.bool,
me : appPropTypes.Me.isRequired,
micProducer : appPropTypes.Producer,
webcamProducer : appPropTypes.Producer,
screenProducer : appPropTypes.Producer,
onChangeDisplayName : PropTypes.func.isRequired,
onMuteMic : PropTypes.func.isRequired,
onUnmuteMic : PropTypes.func.isRequired,
onEnableWebcam : PropTypes.func.isRequired,
onDisableWebcam : PropTypes.func.isRequired
roomClient : PropTypes.any.isRequired,
connected : PropTypes.bool.isRequired,
advancedMode : PropTypes.bool,
me : appPropTypes.Me.isRequired,
micProducer : appPropTypes.Producer,
webcamProducer : appPropTypes.Producer,
screenProducer : appPropTypes.Producer
};
const mapStateToProps = (state) =>
@@ -236,23 +233,8 @@ const mapStateToProps = (state) =>
};
};
const mapDispatchToProps = (dispatch) =>
{
return {
onChangeDisplayName : (displayName) =>
{
dispatch(requestActions.changeDisplayName(displayName));
},
onMuteMic : () => dispatch(requestActions.muteMic()),
onUnmuteMic : () => dispatch(requestActions.unmuteMic()),
onEnableWebcam : () => dispatch(requestActions.enableWebcam()),
onDisableWebcam : () => dispatch(requestActions.disableWebcam())
};
};
const MeContainer = connect(
mapStateToProps,
mapDispatchToProps
)(Me);
const MeContainer = withRoomContext(connect(
mapStateToProps
)(Me));
export default MeContainer;
app/lib/components/ParticipantList/ListPeer.jsx
+21 -60
View File
@@ -3,18 +3,15 @@ import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import * as appPropTypes from '../appPropTypes';
import * as requestActions from '../../redux/requestActions';
import { withRoomContext } from '../../RoomContext';
const ListPeer = (props) =>
{
const {
roomClient,
peer,
micConsumer,
screenConsumer,
onMuteMic,
onUnmuteMic,
onDisableScreen,
onEnableScreen
screenConsumer
} = props;
const micEnabled = (
@@ -39,7 +36,7 @@ const ListPeer = (props) =>
{peer.displayName}
</div>
<div className='indicators'>
{peer.raiseHandState ?
<If condition={peer.raiseHandState}>
<div className={
classnames(
'icon', 'raise-hand', {
@@ -49,14 +46,13 @@ const ListPeer = (props) =>
)
}
/>
:null
}
</If>
</div>
<div className='volume-container'>
<div className={classnames('bar', `level${micEnabled && micConsumer ? micConsumer.volume:0}`)} />
</div>
<div className='controls'>
{ screenConsumer ?
<If condition={screenConsumer}>
<div
className={classnames('button', 'screen', {
on : screenVisible,
@@ -67,11 +63,11 @@ const ListPeer = (props) =>
{
e.stopPropagation();
screenVisible ?
onDisableScreen(peer.name) : onEnableScreen(peer.name);
roomClient.pausePeerScreen(peer.name) :
roomClient.resumePeerScreen(peer.name);
}}
/>
:null
}
</If>
<div
className={classnames('button', 'mic', {
on : micEnabled,
@@ -81,7 +77,9 @@ const ListPeer = (props) =>
onClick={(e) =>
{
e.stopPropagation();
micEnabled ? onMuteMic(peer.name) : onUnmuteMic(peer.name);
micEnabled ?
roomClient.mutePeerAudio(peer.name) :
roomClient.unmutePeerAudio(peer.name);
}}
/>
</div>
@@ -91,17 +89,12 @@ const ListPeer = (props) =>
ListPeer.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,
onEnableScreen : PropTypes.func.isRequired,
onDisableScreen : PropTypes.func.isRequired
roomClient : PropTypes.any.isRequired,
advancedMode : PropTypes.bool,
peer : appPropTypes.Peer.isRequired,
micConsumer : appPropTypes.Consumer,
webcamConsumer : appPropTypes.Consumer,
screenConsumer : appPropTypes.Consumer
};
const mapStateToProps = (state, { name }) =>
@@ -124,40 +117,8 @@ const mapStateToProps = (state, { name }) =>
};
};
const mapDispatchToProps = (dispatch) =>
{
return {
onMuteMic : (peerName) =>
{
dispatch(requestActions.mutePeerAudio(peerName));
},
onUnmuteMic : (peerName) =>
{
dispatch(requestActions.unmutePeerAudio(peerName));
},
onEnableWebcam : (peerName) =>
{
dispatch(requestActions.resumePeerVideo(peerName));
},
onDisableWebcam : (peerName) =>
{
dispatch(requestActions.pausePeerVideo(peerName));
},
onEnableScreen : (peerName) =>
{
dispatch(requestActions.resumePeerScreen(peerName));
},
onDisableScreen : (peerName) =>
{
dispatch(requestActions.pausePeerScreen(peerName));
}
};
};
const ListPeerContainer = connect(
mapStateToProps,
mapDispatchToProps
)(ListPeer);
const ListPeerContainer = withRoomContext(connect(
mapStateToProps
)(ListPeer));
export default ListPeerContainer;
app/lib/components/ParticipantList/ParticipantList.jsx
+8 -13
View File
@@ -2,16 +2,16 @@ import React from 'react';
import { connect } from 'react-redux';
import classNames from 'classnames';
import * as appPropTypes from '../appPropTypes';
import * as requestActions from '../../redux/requestActions';
import { withRoomContext } from '../../RoomContext';
import PropTypes from 'prop-types';
import ListPeer from './ListPeer';
import ListMe from './ListMe';
const ParticipantList =
({
roomClient,
advancedMode,
peers,
setSelectedPeer,
selectedPeerName,
spotlights
}) => (
@@ -33,7 +33,7 @@ const ParticipantList =
className={classNames('list-item', {
selected : peer.name === selectedPeerName
})}
onClick={() => setSelectedPeer(peer.name)}
onClick={() => roomClient.setSelectedPeer(peer.name)}
>
<ListPeer name={peer.name} advancedMode={advancedMode} />
</li>
@@ -52,7 +52,7 @@ const ParticipantList =
className={classNames('list-item', {
selected : peer.name === selectedPeerName
})}
onClick={() => setSelectedPeer(peer.name)}
onClick={() => roomClient.setSelectedPeer(peer.name)}
>
<ListPeer name={peer.name} advancedMode={advancedMode} />
</li>
@@ -64,9 +64,9 @@ const ParticipantList =
ParticipantList.propTypes =
{
roomClient : PropTypes.any.isRequired,
advancedMode : PropTypes.bool,
peers : PropTypes.arrayOf(appPropTypes.Peer).isRequired,
setSelectedPeer : PropTypes.func.isRequired,
selectedPeerName : PropTypes.string,
spotlights : PropTypes.array.isRequired
};
@@ -82,13 +82,8 @@ const mapStateToProps = (state) =>
};
};
const mapDispatchToProps = {
setSelectedPeer : requestActions.setSelectedPeer
};
const ParticipantListContainer = connect(
mapStateToProps,
mapDispatchToProps
)(ParticipantList);
const ParticipantListContainer = withRoomContext(connect(
mapStateToProps
)(ParticipantList));
export default ParticipantListContainer;
app/lib/components/Peer.jsx
+16 -28
View File
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import * as appPropTypes from './appPropTypes';
import * as requestActions from '../redux/requestActions';
import { withRoomContext } from '../RoomContext';
import * as stateActions from '../redux/stateActions';
import PeerView from './PeerView';
import ScreenView from './ScreenView';
@@ -31,13 +31,12 @@ class Peer extends Component
render()
{
const {
roomClient,
advancedMode,
peer,
micConsumer,
webcamConsumer,
screenConsumer,
onMuteMic,
onUnmuteMic,
toggleConsumerFullscreen,
toggleConsumerWindow,
style,
@@ -81,23 +80,21 @@ class Peer extends Component
onMouseOver={this.handleMouseOver}
onMouseOut={this.handleMouseOut}
>
{videoVisible && !webcamConsumer.supported ?
<If condition={videoVisible && !webcamConsumer.supported}>
<div className='incompatible-video'>
<p>incompatible video</p>
</div>
:null
}
</If>
{!videoVisible ?
<If condition={!videoVisible}>
<div className='paused-video'>
<p>this video is paused</p>
</div>
:null
}
</If>
<div className={classnames('view-container', 'webcam')} style={style}>
<div className='indicators'>
{peer.raiseHandState ?
<If condition={peer.raiseHandState}>
<div className={
classnames(
'icon', 'raise-hand', {
@@ -107,8 +104,7 @@ class Peer extends Component
)
}
/>
:null
}
</If>
</div>
<div
className={classnames('controls', {
@@ -124,7 +120,9 @@ class Peer extends Component
onClick={(e) =>
{
e.stopPropagation();
micEnabled ? onMuteMic(peer.name) : onUnmuteMic(peer.name);
micEnabled ?
roomClient.mutePeerAudio(peer.name) :
roomClient.unmutePeerAudio(peer.name);
}}
/>
@@ -162,7 +160,7 @@ class Peer extends Component
/>
</div>
{screenConsumer ?
<If condition={screenConsumer}>
<div className={classnames('view-container', 'screen')} style={style}>
<div
className={classnames('controls', {
@@ -195,8 +193,7 @@ class Peer extends Component
screenCodec={screenConsumer ? screenConsumer.codec : null}
/>
</div>
:null
}
</If>
</div>
);
}
@@ -204,14 +201,13 @@ class Peer extends Component
Peer.propTypes =
{
roomClient : PropTypes.any.isRequired,
advancedMode : PropTypes.bool,
peer : appPropTypes.Peer.isRequired,
micConsumer : appPropTypes.Consumer,
webcamConsumer : appPropTypes.Consumer,
screenConsumer : appPropTypes.Consumer,
windowConsumer : PropTypes.number,
onMuteMic : PropTypes.func.isRequired,
onUnmuteMic : PropTypes.func.isRequired,
streamDimensions : PropTypes.object,
style : PropTypes.object,
toggleConsumerFullscreen : PropTypes.func.isRequired,
@@ -242,14 +238,6 @@ const mapStateToProps = (state, { name }) =>
const mapDispatchToProps = (dispatch) =>
{
return {
onMuteMic : (peerName) =>
{
dispatch(requestActions.mutePeerAudio(peerName));
},
onUnmuteMic : (peerName) =>
{
dispatch(requestActions.unmutePeerAudio(peerName));
},
toggleConsumerFullscreen : (consumer) =>
{
if (consumer)
@@ -263,9 +251,9 @@ const mapDispatchToProps = (dispatch) =>
};
};
const PeerContainer = connect(
const PeerContainer = withRoomContext(connect(
mapStateToProps,
mapDispatchToProps
)(Peer);
)(Peer));
export default PeerContainer;
app/lib/components/PeerView.jsx
+35 -38
View File
@@ -52,51 +52,50 @@ export default class PeerView extends React.Component
return (
<div data-component='PeerView'>
<div className='info'>
{advancedMode ?
<If condition={advancedMode}>
<div className={classnames('media', { 'is-me': isMe })}>
<div className='box'>
{audioCodec ?
<If condition={audioCodec}>
<p className='codec'>{audioCodec}</p>
:null
}
</If>
{videoCodec ?
<If condition={videoCodec}>
<p className='codec'>{videoCodec} {videoProfile}</p>
:null
}
</If>
{(videoVisible && videoWidth !== null) ?
<If condition={(videoVisible && videoWidth !== null)}>
<p className='resolution'>{videoWidth}x{videoHeight}</p>
:null
}
</If>
</div>
</div>
:null
}
</If>
<div className={classnames('peer', { 'is-me': isMe })}>
{isMe ?
<EditableInput
value={peer.displayName}
propName='displayName'
className='display-name editable'
classLoading='loading'
classInvalid='invalid'
shouldBlockWhileLoading
editProps={{
maxLength : 20,
autoCorrect : false,
spellCheck : false
}}
onChange={({ displayName }) => onChangeDisplayName(displayName)}
/>
:
<span className='display-name'>
{peer.displayName}
</span>
}
<Choose>
<When condition={isMe}>
<EditableInput
value={peer.displayName}
propName='displayName'
className='display-name editable'
classLoading='loading'
classInvalid='invalid'
shouldBlockWhileLoading
editProps={{
maxLength : 20,
autoCorrect : false,
spellCheck : false
}}
onChange={({ displayName }) => onChangeDisplayName(displayName)}
/>
</When>
<Otherwise>
<span className='display-name'>
{peer.displayName}
</span>
</Otherwise>
</Choose>
{advancedMode ?
<If condition={advancedMode}>
<div className='row'>
<span
className={classnames('device-icon', peer.device.flag)}
@@ -105,8 +104,7 @@ export default class PeerView extends React.Component
{peer.device.name} {Math.floor(peer.device.version) || null}
</span>
</div>
:null
}
</If>
</div>
</div>
@@ -125,12 +123,11 @@ export default class PeerView extends React.Component
<div className={classnames('bar', `level${volume}`)} />
</div>
{videoProfile === 'none' ?
<If condition={videoProfile === 'none'}>
<div className='spinner-container'>
<Spinner />
</div>
:null
}
</If>
</div>
);
}
app/lib/components/Peers.jsx
+24 -23
View File
@@ -108,35 +108,36 @@ class Peers extends React.Component
{
peers.map((peer) =>
{
return (
(spotlights.find(function(spotlightsElement)
{ return spotlightsElement == peer.name; }))?
<Appear key={peer.name} duration={1000}>
<div
className={classnames('peer-container', {
'selected' : this.props.selectedPeerName === peer.name,
'active-speaker' : peer.name === activeSpeakerName
})}
>
<div className='peer-content'>
<Peer
advancedMode={advancedMode}
name={peer.name}
style={style}
/>
</div>
<If
condition={
spotlights.find((spotlightsElement) => spotlightsElement === peer.name)
}
>
<Appear key={peer.name} duration={1000}>
<div
className={classnames('peer-container', {
'selected' : this.props.selectedPeerName === peer.name,
'active-speaker' : peer.name === activeSpeakerName
})}
>
<div className='peer-content'>
<Peer
advancedMode={advancedMode}
name={peer.name}
style={style}
/>
</div>
</Appear>
:null
);
</div>
</Appear>
</If>;
})
}
<div className='hidden-peer-container'>
{ (spotlightsLength<peers.length)?
<If condition={spotlightsLength < peers.length}>
<HiddenPeers
hiddenPeersCount={peers.length-spotlightsLength}
/>:null
}
/>
</If>
</div>
</div>
);
app/lib/components/Room.jsx
+2 -4
View File
@@ -13,7 +13,6 @@ import Me from './Me';
import Peers from './Peers';
import AudioPeers from './PeerAudio/AudioPeers';
import Notifications from './Notifications';
// import ToolAreaButton from './ToolArea/ToolAreaButton';
import ToolArea from './ToolArea/ToolArea';
import FullScreenView from './FullScreenView';
import VideoWindow from './VideoWindow/VideoWindow';
@@ -97,13 +96,12 @@ class Room extends React.Component
<Notifications />
{room.advancedMode ?
<If condition={room.advancedMode}>
<div className='state' data-tip='Server status'>
<div className={classnames('icon', room.state)} />
<p className={classnames('text', room.state)}>{room.state}</p>
</div>
:null
}
</If>
<div
className={classnames('room-link-wrapper room-controls', {
app/lib/components/ScreenView.jsx
+10 -15
View File
@@ -41,25 +41,21 @@ export default class ScreenView extends React.Component
return (
<div data-component='ScreenView'>
<div className='info'>
{advancedMode ?
<If condition={advancedMode}>
<div className={classnames('media', { 'is-me': isMe })}>
{screenVisible ?
<If condition={screenVisible}>
<div className='box'>
{screenCodec ?
<If condition={screenCodec}>
<p className='codec'>{screenCodec} {screenProfile}</p>
:null
}
</If>
{(screenVisible && screenWidth !== null) ?
<If condition={(screenVisible && screenWidth !== null)}>
<p className='resolution'>{screenWidth}x{screenHeight}</p>
:null
}
</If>
</div>
:null
}
</If>
</div>
:null
}
</If>
</div>
<video
@@ -73,12 +69,11 @@ export default class ScreenView extends React.Component
muted={Boolean(true)}
/>
{screenProfile === 'none' ?
<If condition={screenProfile === 'none'}>
<div className='spinner-container'>
<Spinner />
</div>
:null
}
</If>
</div>
);
}
app/lib/components/Settings.jsx
+17 -17
View File
@@ -1,7 +1,7 @@
import React from 'react';
import { connect } from 'react-redux';
import * as appPropTypes from './appPropTypes';
import * as requestActions from '../redux/requestActions';
import { withRoomContext } from '../RoomContext';
import * as stateActions from '../redux/stateActions';
import PropTypes from 'prop-types';
import Dropdown from 'react-dropdown';
@@ -18,8 +18,11 @@ const modes = [ {
const findOption = (options, value) => options.find((option) => option.value === value);
const Settings = ({
room, me, onToggleAdvancedMode, handleChangeWebcam,
handleChangeAudioDevice, handleChangeMode
roomClient,
room,
me,
onToggleAdvancedMode,
handleChangeMode
}) =>
{
let webcams;
@@ -48,7 +51,7 @@ const Settings = ({
<Dropdown
options={webcams}
value={findOption(webcams, me.selectedWebcam)}
onChange={(webcam) => handleChangeWebcam(webcam.value)}
onChange={(webcam) => roomClient.changeWebcam(webcam.value)}
placeholder={'Select camera'}
/>
@@ -56,7 +59,7 @@ const Settings = ({
disabled={!me.canChangeAudioDevice}
options={audioDevices}
value={findOption(audioDevices, me.selectedAudioDevice)}
onChange={(device) => handleChangeAudioDevice(device.value)}
onChange={(device) => roomClient.changeAudioDevice(device.value)}
placeholder={audioDevicesText}
/>
<ReactTooltip
@@ -94,12 +97,11 @@ const Settings = ({
Settings.propTypes =
{
me : appPropTypes.Me.isRequired,
room : appPropTypes.Room.isRequired,
handleChangeWebcam : PropTypes.func.isRequired,
handleChangeAudioDevice : PropTypes.func.isRequired,
onToggleAdvancedMode : PropTypes.func.isRequired,
handleChangeMode : PropTypes.func.isRequired
roomClient : PropTypes.any.isRequired,
me : appPropTypes.Me.isRequired,
room : appPropTypes.Room.isRequired,
onToggleAdvancedMode : PropTypes.func.isRequired,
handleChangeMode : PropTypes.func.isRequired
};
const mapStateToProps = (state) =>
@@ -111,15 +113,13 @@ const mapStateToProps = (state) =>
};
const mapDispatchToProps = {
handleChangeWebcam : requestActions.changeWebcam,
handleChangeAudioDevice : requestActions.changeAudioDevice,
onToggleAdvancedMode : stateActions.toggleAdvancedMode,
handleChangeMode : stateActions.setDisplayMode
onToggleAdvancedMode : stateActions.toggleAdvancedMode,
handleChangeMode : stateActions.setDisplayMode
};
const SettingsContainer = connect(
const SettingsContainer = withRoomContext(connect(
mapStateToProps,
mapDispatchToProps
)(Settings);
)(Settings));
export default SettingsContainer;
app/lib/components/Sidebar.jsx
+40 -50
View File
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import classnames from 'classnames';
import * as appPropTypes from './appPropTypes';
import * as requestActions from '../redux/requestActions';
import { withRoomContext } from '../RoomContext';
import FullScreen from './FullScreen';
class Sidebar extends Component
@@ -56,8 +56,10 @@ class Sidebar extends Component
render()
{
const {
toolbarsVisible, me, screenProducer, onLogin, onShareScreen,
onUnShareScreen, onNeedExtension, onLeaveMeeting, onLogout, onToggleHand
roomClient,
toolbarsVisible,
me,
screenProducer
} = this.props;
let screenState;
@@ -91,7 +93,7 @@ class Sidebar extends Component
})}
data-component='Sidebar'
>
{this.fullscreen.fullscreenEnabled && (
<If condition={this.fullscreen.fullscreenEnabled}>
<div
className={classnames('button', 'fullscreen', {
on : this.state.fullscreen
@@ -101,7 +103,7 @@ class Sidebar extends Component
data-place='right'
data-type='dark'
/>
)}
</If>
<div
className={classnames('button', 'screen', screenState)}
@@ -114,17 +116,17 @@ class Sidebar extends Component
{
case 'on':
{
onUnShareScreen();
roomClient.disableScreenSharing();
break;
}
case 'off':
{
onShareScreen();
roomClient.enableScreenSharing();
break;
}
case 'need-extension':
{
onNeedExtension();
roomClient.installExtension();
break;
}
default:
@@ -135,25 +137,30 @@ class Sidebar extends Component
}}
/>
{me.loginEnabled && (me.loggedIn ? (
<div
className='button logout'
data-tip='Logout'
data-place='right'
data-type='dark'
onClick={onLogout}
>
<img src={me.picture || 'resources/images/avatar-empty.jpeg'} />
</div>
) : (
<div
className='button login off'
data-tip='Login'
data-place='right'
data-type='dark'
onClick={onLogin}
/>
))}
<If condition={me.loginEnabled}>
<Choose>
<When condition={me.loggedIn}>
<div
className='button logout'
data-tip='Logout'
data-place='right'
data-type='dark'
onClick={() => roomClient.logout()}
>
<img src={me.picture || 'resources/images/avatar-empty.jpeg'} />
</div>
</When>
<Otherwise>
<div
className='button login off'
data-tip='Login'
data-place='right'
data-type='dark'
onClick={() => roomClient.login()}
/>
</Otherwise>
</Choose>
</If>
<div
className={classnames('button', 'raise-hand', {
on : me.raiseHand,
@@ -162,7 +169,7 @@ class Sidebar extends Component
data-tip='Raise hand'
data-place='right'
data-type='dark'
onClick={() => onToggleHand(!me.raiseHand)}
onClick={() => roomClient.sendRaiseHandState(!me.raiseHand)}
/>
<div
@@ -170,7 +177,7 @@ class Sidebar extends Component
data-tip='Leave meeting'
data-place='right'
data-type='dark'
onClick={() => onLeaveMeeting()}
onClick={() => roomClient.close()}
/>
</div>
);
@@ -178,15 +185,9 @@ class Sidebar extends Component
}
Sidebar.propTypes = {
roomClient : PropTypes.any.isRequired,
toolbarsVisible : PropTypes.bool.isRequired,
me : appPropTypes.Me.isRequired,
onShareScreen : PropTypes.func.isRequired,
onUnShareScreen : PropTypes.func.isRequired,
onNeedExtension : PropTypes.func.isRequired,
onToggleHand : PropTypes.func.isRequired,
onLeaveMeeting : PropTypes.func.isRequired,
onLogin : PropTypes.func.isRequired,
onLogout : PropTypes.func.isRequired,
screenProducer : appPropTypes.Producer
};
@@ -198,17 +199,6 @@ const mapStateToProps = (state) =>
me : state.me
});
const mapDispatchToProps = {
onLeaveMeeting : requestActions.leaveRoom,
onShareScreen : requestActions.enableScreenSharing,
onUnShareScreen : requestActions.disableScreenSharing,
onNeedExtension : requestActions.installExtension,
onToggleHand : requestActions.toggleHand,
onLogin : requestActions.userLogin,
onLogout : requestActions.userLogout
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(Sidebar);
export default withRoomContext(connect(
mapStateToProps
)(Sidebar));
app/lib/index.jsx
+18 -14
View File
@@ -7,8 +7,9 @@ import { getDeviceInfo } from 'mediasoup-client';
import randomString from 'random-string';
import Logger from './Logger';
import * as utils from './utils';
import RoomClient from './RoomClient';
import RoomContext from './RoomContext';
import * as cookiesManager from './cookiesManager';
import * as requestActions from './redux/requestActions';
import * as stateActions from './redux/stateActions';
import Room from './components/Room';
import { loginEnabled } from '../config';
@@ -16,6 +17,10 @@ import { store } from './store';
const logger = new Logger();
let roomClient;
RoomClient.init({ store });
domready(() =>
{
logger.debug('DOM ready');
@@ -93,39 +98,38 @@ function run()
device.version = undefined;
}
// NOTE: I don't like this.
store.dispatch(
stateActions.setRoomUrl(roomUrl));
// NOTE: I don't like this.
store.dispatch(
stateActions.setMe({ peerName, displayName, displayNameSet, device, loginEnabled }));
// NOTE: I don't like this.
store.dispatch(
requestActions.joinRoom(
{ roomId, peerName, displayName, device, useSimulcast, produce }));
roomClient = new RoomClient(
{ roomId, peerName, displayName, device, useSimulcast, produce });
render(
<Provider store={store}>
<Room />
<RoomContext.Provider value={roomClient}>
<Room />
</RoomContext.Provider>
</Provider>,
document.getElementById('multiparty-meeting')
);
}
// TODO: Debugging stuff.
global.CLIENT = roomClient;
setInterval(() =>
{
if (!global.CLIENT._room.peers[0])
if (!roomClient._room.peers[0])
{
delete global.CONSUMER;
return;
}
const peer = global.CLIENT._room.peers[0];
const peer = roomClient._room.peers[0];
global.CONSUMER = peer.consumers[peer.consumers.length - 1];
}, 2000);
@@ -134,20 +138,20 @@ global.sendSdp = function()
{
logger.debug('---------- SEND_TRANSPORT LOCAL SDP OFFER:');
logger.debug(
global.CLIENT._sendTransport._handler._pc.localDescription.sdp);
roomClient._sendTransport._handler._pc.localDescription.sdp);
logger.debug('---------- SEND_TRANSPORT REMOTE SDP ANSWER:');
logger.debug(
global.CLIENT._sendTransport._handler._pc.remoteDescription.sdp);
roomClient._sendTransport._handler._pc.remoteDescription.sdp);
};
global.recvSdp = function()
{
logger.debug('---------- RECV_TRANSPORT REMOTE SDP OFFER:');
logger.debug(
global.CLIENT._recvTransport._handler._pc.remoteDescription.sdp);
roomClient._recvTransport._handler._pc.remoteDescription.sdp);
logger.debug('---------- RECV_TRANSPORT LOCAL SDP ANSWER:');
logger.debug(
global.CLIENT._recvTransport._handler._pc.localDescription.sdp);
roomClient._recvTransport._handler._pc.localDescription.sdp);
};
app/lib/redux/requestActions.js
-228
View File
@@ -1,233 +1,5 @@
import randomString from 'random-string';
import * as stateActions from './stateActions';
import
{
createNewMessage
} from './reducers/helper';
export const joinRoom = (
{ roomId, peerName, displayName, device, useSimulcast, produce }) =>
{
return {
type : 'JOIN_ROOM',
payload : { roomId, peerName, displayName, device, useSimulcast, produce }
};
};
export const leaveRoom = () =>
{
return {
type : 'LEAVE_ROOM'
};
};
export const changeDisplayName = (displayName) =>
{
return {
type : 'CHANGE_DISPLAY_NAME',
payload : { displayName }
};
};
export const muteMic = () =>
{
return {
type : 'MUTE_MIC'
};
};
export const unmuteMic = () =>
{
return {
type : 'UNMUTE_MIC'
};
};
export const enableWebcam = () =>
{
return {
type : 'ENABLE_WEBCAM'
};
};
export const disableWebcam = () =>
{
return {
type : 'DISABLE_WEBCAM'
};
};
export const changeWebcam = (deviceId) =>
{
return {
type : 'CHANGE_WEBCAM',
payload : { deviceId }
};
};
export const changeAudioDevice = (deviceId) =>
{
return {
type : 'CHANGE_AUDIO_DEVICE',
payload : { deviceId }
};
};
export const enableAudioOnly = () =>
{
return {
type : 'ENABLE_AUDIO_ONLY'
};
};
export const disableAudioOnly = () =>
{
return {
type : 'DISABLE_AUDIO_ONLY'
};
};
export const mutePeerAudio = (peerName) =>
{
return {
type : 'MUTE_PEER_AUDIO',
payload : { peerName }
};
};
export const unmutePeerAudio = (peerName) =>
{
return {
type : 'UNMUTE_PEER_AUDIO',
payload : { peerName }
};
};
export const pausePeerVideo = (peerName) =>
{
return {
type : 'PAUSE_PEER_VIDEO',
payload : { peerName }
};
};
export const resumePeerVideo = (peerName) =>
{
return {
type : 'RESUME_PEER_VIDEO',
payload : { peerName }
};
};
export const pausePeerScreen = (peerName) =>
{
return {
type : 'PAUSE_PEER_SCREEN',
payload : { peerName }
};
};
export const resumePeerScreen = (peerName) =>
{
return {
type : 'RESUME_PEER_SCREEN',
payload : { peerName }
};
};
export const userLogin = () =>
{
return {
type : 'USER_LOGIN'
};
};
export const userLogout = () =>
{
return {
type : 'USER_LOGOUT'
};
};
export const raiseHand = () =>
{
return {
type : 'RAISE_HAND'
};
};
export const lowerHand = () =>
{
return {
type : 'LOWER_HAND'
};
};
export const restartIce = () =>
{
return {
type : 'RESTART_ICE'
};
};
export const enableScreenSharing = () =>
{
return {
type : 'ENABLE_SCREEN_SHARING'
};
};
export const disableScreenSharing = () =>
{
return {
type : 'DISABLE_SCREEN_SHARING'
};
};
export const installExtension = () =>
{
return {
type : 'INSTALL_EXTENSION'
};
};
export const toggleHand = (enable) =>
{
if (enable)
return {
type : 'RAISE_HAND'
};
else
return {
type : 'LOWER_HAND'
};
};
export const sendChatMessage = (text, name, picture) =>
{
const message = createNewMessage(text, 'response', name, picture);
return {
type : 'SEND_CHAT_MESSAGE',
payload : { message }
};
};
export const sendFile = (file, name, picture) =>
{
return {
type : 'SEND_FILE',
payload : { file, name, picture }
};
};
export const setSelectedPeer = (selectedPeerName) =>
{
return {
type : 'REQUEST_SELECTED_PEER',
payload : { selectedPeerName }
};
};
// This returns a redux-thunk action (a function).
export const notify = ({ type = 'info', text, timeout }) =>
app/lib/redux/roomClientMiddleware.js
-253
View File
@@ -1,253 +0,0 @@
import RoomClient from '../RoomClient';
export default ({ dispatch, getState }) => (next) =>
{
let client;
return (action) =>
{
switch (action.type)
{
case 'JOIN_ROOM':
{
const {
roomId,
peerName,
displayName,
device,
useSimulcast,
produce
} = action.payload;
client = new RoomClient(
{
roomId,
peerName,
displayName,
device,
useSimulcast,
produce,
dispatch,
getState
});
// TODO: TMP
global.CLIENT = client;
break;
}
case 'LEAVE_ROOM':
{
client.close();
break;
}
case 'CHANGE_DISPLAY_NAME':
{
const { displayName } = action.payload;
client.changeDisplayName(displayName);
break;
}
case 'MUTE_MIC':
{
client.muteMic();
break;
}
case 'UNMUTE_MIC':
{
client.unmuteMic();
break;
}
case 'ENABLE_WEBCAM':
{
client.enableWebcam();
break;
}
case 'DISABLE_WEBCAM':
{
client.disableWebcam();
break;
}
case 'CHANGE_WEBCAM':
{
const { deviceId } = action.payload;
client.changeWebcam(deviceId);
break;
}
case 'CHANGE_AUDIO_DEVICE':
{
const { deviceId } = action.payload;
client.changeAudioDevice(deviceId);
break;
}
case 'ENABLE_AUDIO_ONLY':
{
client.enableAudioOnly();
break;
}
case 'DISABLE_AUDIO_ONLY':
{
client.disableAudioOnly();
break;
}
case 'MUTE_PEER_AUDIO':
{
const { peerName } = action.payload;
client.mutePeerAudio(peerName);
break;
}
case 'UNMUTE_PEER_AUDIO':
{
const { peerName } = action.payload;
client.unmutePeerAudio(peerName);
break;
}
case 'PAUSE_PEER_VIDEO':
{
const { peerName } = action.payload;
client.pausePeerVideo(peerName);
break;
}
case 'RESUME_PEER_VIDEO':
{
const { peerName } = action.payload;
client.resumePeerVideo(peerName);
break;
}
case 'PAUSE_PEER_SCREEN':
{
const { peerName } = action.payload;
client.pausePeerScreen(peerName);
break;
}
case 'RESUME_PEER_SCREEN':
{
const { peerName } = action.payload;
client.resumePeerScreen(peerName);
break;
}
case 'RAISE_HAND':
{
client.sendRaiseHandState(true);
break;
}
case 'USER_LOGIN':
{
client.login();
break;
}
case 'USER_LOGOUT':
{
client.logout();
break;
}
case 'LOWER_HAND':
{
client.sendRaiseHandState(false);
break;
}
case 'RESTART_ICE':
{
client.restartIce();
break;
}
case 'ENABLE_SCREEN_SHARING':
{
client.enableScreenSharing();
break;
}
case 'DISABLE_SCREEN_SHARING':
{
client.disableScreenSharing();
break;
}
case 'INSTALL_EXTENSION':
{
client.installExtension();
break;
}
case 'SEND_CHAT_MESSAGE':
{
const { message } = action.payload;
client.sendChatMessage(message);
break;
}
case 'SEND_FILE':
{
client.sendFile(action.payload);
break;
}
case 'REQUEST_SELECTED_PEER':
{
const { selectedPeerName } = action.payload;
client.setSelectedPeer(selectedPeerName);
break;
}
}
return next(action);
};
};
app/lib/store.js
+1 -3
View File
@@ -6,12 +6,10 @@ import {
import thunk from 'redux-thunk';
import { createLogger } from 'redux-logger';
import reducers from './redux/reducers';
import roomClientMiddleware from './redux/roomClientMiddleware';
const reduxMiddlewares =
[
thunk,
roomClientMiddleware
thunk
];
if (process.env.NODE_ENV === 'development')