Merge develop and remove comments

app/lib/RoomClient.js

@@ -1,6 +1,7 @@
 import protooClient from 'protoo-client';
 import * as mediasoupClient from 'mediasoup-client';
 import Logger from './Logger';
+import hark from 'hark';
 import ScreenShare from './ScreenShare';
 import { getProtooUrl } from './urlFactory';
 import * as cookiesManager from './cookiesManager';
@@ -1405,7 +1406,33 @@ export default class RoomClient
 			})
 			.then(() =>
 			{
+				const stream = new MediaStream;
+
 				logger.debug('_setMicProducer() succeeded');
+				stream.addTrack(producer.track);
+				if (!stream.getAudioTracks()[0])
+					throw new Error('_setMicProducer(): given stream has no audio track');
+				producer.hark = hark(stream, { play: false });
+
+				// eslint-disable-next-line no-unused-vars
+				producer.hark.on('volume_change', (dBs, threshold) =>
+				{
+					// The exact formula to convert from dBs (-100..0) to linear (0..1) is:
+					//   Math.pow(10, dBs / 20)
+					// However it does not produce a visually useful output, so let exagerate
+					// it a bit. Also, let convert it from 0..1 to 0..10 and avoid value 1 to
+					// minimize component renderings.
+					let volume = Math.round(Math.pow(10, dBs / 85) * 10);
+
+					if (volume === 1)
+						volume = 0;
+
+					if (volume !== producer.volume)
+					{
+						producer.volume = volume;
+						this._dispatch(stateActions.setProducerVolume(producer.id, volume));
+					}
+				});
 			})
 			.catch((error) =>
 			{
@@ -1848,7 +1875,8 @@ export default class RoomClient
 				track          : null,
 				codec          : codec ? codec.name : null
 			},
-			consumer.peer.name));
+			consumer.peer.name)
+		);
 
 		consumer.on('close', (originator) =>
 		{
@@ -1860,6 +1888,43 @@ export default class RoomClient
 				consumer.id, consumer.peer.name));
 		});
 
+		consumer.on('handled', (originator) =>
+		{
+			logger.debug(
+				'consumer "handled" event [id:%s, originator:%s, consumer:%o]',
+				consumer.id, originator, consumer);
+			if (consumer.kind === 'audio')
+			{
+				const stream = new MediaStream;
+
+				stream.addTrack(consumer.track);
+				if (!stream.getAudioTracks()[0])
+					throw new Error('consumer.on("handled" | given stream has no audio track');
+
+				consumer.hark = hark(stream, { play: false });
+
+				// eslint-disable-next-line no-unused-vars
+				consumer.hark.on('volume_change', (dBs, threshold) =>
+				{
+					// The exact formula to convert from dBs (-100..0) to linear (0..1) is:
+					//   Math.pow(10, dBs / 20)
+					// However it does not produce a visually useful output, so let exagerate
+					// it a bit. Also, let convert it from 0..1 to 0..10 and avoid value 1 to
+					// minimize component renderings.
+					let volume = Math.round(Math.pow(10, dBs / 85) * 10);
+
+					if (volume === 1)
+						volume = 0;
+
+					if (volume !== consumer.volume)
+					{
+						consumer.volume = volume;
+						this._dispatch(stateActions.setConsumerVolume(consumer.id, volume));
+					}
+				});
+			}
+		});
+
 		consumer.on('pause', (originator) =>
 		{
 			logger.debug(

app/lib/components/Me.jsx

@@ -140,6 +140,7 @@ class Me extends React.Component
 						advancedMode={advancedMode}
 						peer={me}
 						audioTrack={micProducer ? micProducer.track : null}
+						volume={micProducer ? micProducer.volume : null}
 						videoTrack={webcamProducer ? webcamProducer.track : null}
 						videoVisible={videoVisible}
 						audioCodec={micProducer ? micProducer.codec : null}

app/lib/components/ParticipantList/ListPeer.jsx

@@ -70,6 +70,8 @@ const ListPeer = (props) =>
 						off      : !micEnabled,
 						disabled : peer.peerAudioInProgress
 					})}
+					style={{ opacity : micEnabled && micConsumer ? (micConsumer.volume/10)
+						+ 0.2 :1 }}
 					onClick={(e) =>
 					{
 						e.stopPropagation();
@@ -143,7 +145,7 @@ const mapDispatchToProps = (dispatch) =>
 		},
 		onEnableWebcam : (peerName) =>
 		{
-			
+
 			dispatch(requestActions.resumePeerVideo(peerName));
 		},
 		onDisableWebcam : (peerName) =>

app/lib/components/Peer.jsx

@@ -8,27 +8,27 @@ import * as stateActions from '../redux/stateActions';
 import PeerView from './PeerView';
 import ScreenView from './ScreenView';
 
-class Peer extends Component 
+class Peer extends Component
 {
 	state = {
 		controlsVisible : false
 	};
 
-	handleMouseOver = () => 
+	handleMouseOver = () =>
 	{
 		this.setState({
 			controlsVisible : true
 		});
 	};
 
-	handleMouseOut = () => 
+	handleMouseOut = () =>
 	{
 		this.setState({
 			controlsVisible : false
 		});
 	};
 
-	render() 
+	render()
 	{
 		const {
 			advancedMode,
@@ -45,35 +45,35 @@ class Peer extends Component
 			toggleConsumerFullscreen,
 			style
 		} = this.props;
-	
+
 		const micEnabled = (
 			Boolean(micConsumer) &&
 			!micConsumer.locallyPaused &&
 			!micConsumer.remotelyPaused
 		);
-	
+
 		const videoVisible = (
 			Boolean(webcamConsumer) &&
 			!webcamConsumer.locallyPaused &&
 			!webcamConsumer.remotelyPaused
 		);
-	
+
 		const screenVisible = (
 			Boolean(screenConsumer) &&
 			!screenConsumer.locallyPaused &&
 			!screenConsumer.remotelyPaused
 		);
-	
+
 		let videoProfile;
-	
+
 		if (webcamConsumer)
 			videoProfile = webcamConsumer.profile;
-	
+
 		let screenProfile;
-	
+
 		if (screenConsumer)
 			screenProfile = screenConsumer.profile;
-	
+
 		return (
 			<div
 				data-component='Peer'
@@ -89,7 +89,7 @@ class Peer extends Component
 					</div>
 					:null
 				}
-	
+
 				<div className={classnames('view-container', 'webcam')} style={style}>
 					<div
 						className={classnames('controls', {
@@ -108,7 +108,7 @@ class Peer extends Component
 								micEnabled ? onMuteMic(peer.name) : onUnmuteMic(peer.name);
 							}}
 						/>
-	
+
 						<div
 							className={classnames('button', 'webcam', {
 								on       : videoVisible,
@@ -122,7 +122,7 @@ class Peer extends Component
 									onDisableWebcam(peer.name) : onEnableWebcam(peer.name);
 							}}
 						/>
-	
+
 						<div
 							className={classnames('button', 'fullscreen')}
 							onClick={(e) =>
@@ -136,6 +136,7 @@ class Peer extends Component
 						advancedMode={advancedMode}
 						peer={peer}
 						audioTrack={micConsumer ? micConsumer.track : null}
+						volume={micConsumer ? micConsumer.volume : null}
 						videoTrack={webcamConsumer ? webcamConsumer.track : null}
 						videoVisible={videoVisible}
 						videoProfile={videoProfile}
@@ -143,7 +144,7 @@ class Peer extends Component
 						videoCodec={webcamConsumer ? webcamConsumer.codec : null}
 					/>
 				</div>
-	
+
 				{screenConsumer ?
 					<div className={classnames('view-container', 'screen')} style={style}>
 						<div className='controls'>
@@ -160,7 +161,7 @@ class Peer extends Component
 										onDisableScreen(peer.name) : onEnableScreen(peer.name);
 								}}
 							/>
-	
+
 							<div
 								className={classnames('button', 'fullscreen')}
 								onClick={(e) =>
@@ -236,7 +237,7 @@ const mapDispatchToProps = (dispatch) =>
 		},
 		onEnableWebcam : (peerName) =>
 		{
-			
+
 			dispatch(requestActions.resumePeerVideo(peerName));
 		},
 		onDisableWebcam : (peerName) =>

app/lib/components/PeerView.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Spinner from 'react-spinner';
-import hark from 'hark';
 import * as appPropTypes from './appPropTypes';
 import EditableInput from './EditableInput';
 
@@ -27,10 +26,6 @@ export default class PeerView extends React.Component
 		// @type {MediaStreamTrack}
 		this._videoTrack = null;
 
-		// Hark instance.
-		// @type {Object}
-		this._hark = null;
-
 		// Periodic timer for showing video resolution.
 		this._videoResolutionTimer = null;
 	}
@@ -40,6 +35,7 @@ export default class PeerView extends React.Component
 		const {
 			isMe,
 			peer,
+			volume,
 			advancedMode,
 			videoVisible,
 			videoProfile,
@@ -49,7 +45,6 @@ export default class PeerView extends React.Component
 		} = this.props;
 
 		const {
-			volume,
 			videoWidth,
 			videoHeight
 		} = this.state;
@@ -149,9 +144,6 @@ export default class PeerView extends React.Component
 
 	componentWillUnmount()
 	{
-		if (this._hark)
-			this._hark.stop();
-
 		clearInterval(this._videoResolutionTimer);
 	}
 
@@ -160,6 +152,7 @@ export default class PeerView extends React.Component
 		const { audioTrack, videoTrack } = nextProps;
 
 		this._setTracks(audioTrack, videoTrack);
+
 	}
 
 	_setTracks(audioTrack, videoTrack)
@@ -170,9 +163,6 @@ export default class PeerView extends React.Component
 		this._audioTrack = audioTrack;
 		this._videoTrack = videoTrack;
 
-		if (this._hark)
-			this._hark.stop();
-
 		clearInterval(this._videoResolutionTimer);
 		this._hideVideoResolution();
 
@@ -190,9 +180,6 @@ export default class PeerView extends React.Component
 
 			video.srcObject = stream;
 
-			if (audioTrack)
-				this._runHark(stream);
-
 			if (videoTrack)
 				this._showVideoResolution();
 		}
@@ -202,31 +189,6 @@ export default class PeerView extends React.Component
 		}
 	}
 
-	_runHark(stream)
-	{
-		if (!stream.getAudioTracks()[0])
-			throw new Error('_runHark() | given stream has no audio track');
-
-		this._hark = hark(stream, { play: false });
-
-		// eslint-disable-next-line no-unused-vars
-		this._hark.on('volume_change', (dBs, threshold) =>
-		{
-			// The exact formula to convert from dBs (-100..0) to linear (0..1) is:
-			//   Math.pow(10, dBs / 20)
-			// However it does not produce a visually useful output, so let exagerate
-			// it a bit. Also, let convert it from 0..1 to 0..10 and avoid value 1 to
-			// minimize component renderings.
-			let volume = Math.round(Math.pow(10, dBs / 85) * 10);
-
-			if (volume === 1)
-				volume = 0;
-
-			if (volume !== this.state.volume)
-				this.setState({ volume: volume });
-		});
-	}
-
 	_showVideoResolution()
 	{
 		this._videoResolutionTimer = setInterval(() =>
@@ -259,6 +221,7 @@ PeerView.propTypes =
 		[ appPropTypes.Me, appPropTypes.Peer ]).isRequired,
 	advancedMode        : PropTypes.bool,
 	audioTrack          : PropTypes.any,
+	volume              : PropTypes.number,
 	videoTrack          : PropTypes.any,
 	videoVisible        : PropTypes.bool.isRequired,
 	videoProfile        : PropTypes.string,

app/lib/components/Peers.jsx

@@ -62,12 +62,12 @@ class Peers extends React.Component
 		observer.observe(this.refs.peers);
 	}
 
-	componentWillUnmount() 
+	componentWillUnmount()
 	{
 		window.removeEventListener('resize', this.updateDimensions);
 	}
 
-	componentDidUpdate() 
+	componentDidUpdate()
 	{
 		this.updateDimensions();
 	}
@@ -81,7 +81,7 @@ class Peers extends React.Component
 			toolAreaOpen
 		} = this.props;
 
-		const style = 
+		const style =
 		{
 			'width'  : this.state.peerWidth,
 			'height' : this.state.peerHeight

app/lib/components/ToolArea/ToolAreaButton.jsx

@@ -41,7 +41,7 @@ ToolAreaButton.propTypes =
 {
 	toolAreaOpen   : PropTypes.bool.isRequired,
 	toggleToolArea : PropTypes.func.isRequired,
-	unread         : PropTypes.bool.isRequired,
+	unread         : PropTypes.number.isRequired,
 	visible        : PropTypes.bool.isRequired
 };
 

app/lib/redux/reducers/consumers.js

@@ -35,6 +35,15 @@ const consumers = (state = initialState, action) =>
 			return { ...state, [consumerId]: newConsumer };
 		}
 
+		case 'SET_CONSUMER_VOLUME':
+		{
+			const { consumerId, volume } = action.payload;
+			const consumer = state[consumerId];
+			const newConsumer = { ...consumer, volume };
+
+			return { ...state, [consumerId]: newConsumer };
+		}
+
 		case 'SET_CONSUMER_RESUMED':
 		{
 			const { consumerId, originator } = action.payload;

app/lib/redux/reducers/producers.js

@@ -35,6 +35,15 @@ const producers = (state = initialState, action) =>
 			return { ...state, [producerId]: newProducer };
 		}
 
+		case 'SET_PRODUCER_VOLUME':
+		{
+			const { producerId, volume } = action.payload;
+			const producer = state[producerId];
+			const newProducer = { ...producer, volume };
+
+			return { ...state, [producerId]: newProducer };
+		}
+
 		case 'SET_PRODUCER_RESUMED':
 		{
 			const { producerId, originator } = action.payload;

app/lib/redux/stateActions.js

@@ -331,6 +331,22 @@ export const setConsumerTrack = (consumerId, track) =>
 	};
 };
 
+export const setConsumerVolume = (consumerId, volume) =>
+{
+	return {
+		type    : 'SET_CONSUMER_VOLUME',
+		payload : { consumerId, volume }
+	};
+};
+
+export const setProducerVolume = (producerId, volume) =>
+{
+	return {
+		type    : 'SET_PRODUCER_VOLUME',
+		payload : { producerId, volume }
+	};
+};
+
 export const addNotification = (notification) =>
 {
 	return {

app/package-lock.json

@@ -4771,7 +4771,8 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
@@ -4782,7 +4783,8 @@
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4899,7 +4901,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4911,6 +4914,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4940,6 +4944,7 @@
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -4958,6 +4963,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5058,6 +5064,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5179,6 +5186,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5602,7 +5610,6 @@
                   "version": "1.1.11",
                   "bundled": true,
                   "dev": true,
-                  "optional": true,
                   "requires": {
                     "balanced-match": "^1.0.0",
                     "concat-map": "0.0.1"
@@ -5745,8 +5752,7 @@
                 "inherits": {
                   "version": "2.0.3",
                   "bundled": true,
-                  "dev": true,
-                  "optional": true
+                  "dev": true
                 },
                 "ini": {
                   "version": "1.3.5",
@@ -5772,7 +5778,6 @@
                   "version": "3.0.4",
                   "bundled": true,
                   "dev": true,
-                  "optional": true,
                   "requires": {
                     "brace-expansion": "^1.1.7"
                   }

app/stylus/components/Chat.styl

@@ -61,7 +61,7 @@
 }
 
 [data-component='MessageList'] {
-	background-color: rgba(#fff, 0.9);
+	background-color: rgba(#000, 0.1);
 	height: 91vmin;
 	overflow-y: scroll;
 	padding-top: 5px;
@@ -71,34 +71,33 @@
 		margin: 5px;
 		display: flex;
 		word-wrap: break-word;
-		color: rgba(#000, 1.0)
 
 		> .client {
 			margin-left: auto;
 		}
 
 		> .client, > .response {
-			background-color: rgba(#fff, 0.9);
+			background-color: rgba(#000, 0.1);
 			border-radius: 5px;
 			max-width: 215px;
 			display: flex;
 			align-items: center;
+			padding: 6px;
 
 			> .message-avatar {
 				height: 2rem;
 			}
 
 			> .message-content {
-				padding: 6px;
+				padding-left: 6px;
 
 				> .message-text {
 					font-size: 1.3vmin;
-					color: rgba(#000, 1.0);
 				}
 
 				> .message-time {
 					font-size: 1vmin;
-					color: rgba(#777, 1.0);
+					opacity: 0.8;
 				}
 			}
 		}
@@ -108,7 +107,7 @@
 [data-component='Sender'] {
 	align-items: center;
 	display: flex;
-	background-color: rgba(#fff, 0.9);
+	background-color: rgba(#000, 0.1);
 	height: 6vmin;
 	padding: 0.5vmin;
 	border-radius: 0 0 5px 5px;
@@ -117,8 +116,8 @@
 		width: 100%;
 		border: 0;
 		border-radius: 5px;
-		background-color: rgba(#fff, 0.9);
-		color: #000;
+		background-color: rgba(#000, 0.1);
+		color: #fff;
 		height: 30px;
 		padding-left: 10px;
 		font-size: 1.4vmin;

app/stylus/components/Me.styl

@@ -27,14 +27,11 @@
 			justify-content: flex-start;
 			align-items: center;
 			padding: 0.4vmin;
-			visibility: hidden;
 			opacity: 0;
-			animation: fade-out 0.3s;
+			transition: opacity 0.3s;
 
 			&.visible {
-				visibility: visible;
 				opacity: 1;
-				animation: fade-in 0.3s;
 			}
 			
 			> .button {

app/stylus/components/ParticipantList.styl

@@ -120,8 +120,8 @@
     font-size: 1.4vmin;
     border: none;
     display: flex;
-    padding: 0.6vmin;
+    padding: 1vmin;
     flex-grow: 1;
     align-items: center;
 	}
-}
+}

app/stylus/components/Peer.styl

@@ -41,14 +41,11 @@
 			justify-content: flex-start;
 			align-items: center;
 			padding: 0.4vmin;
-			visibility: hidden;
 			opacity: 0;
-			animation: fade-out 0.3s;
-
+			transition: opacity 0.3s;
+			
 			&.visible {
-				visibility: visible;
 				opacity: 1;
-				animation: fade-in 0.3s;
 			}
 			
 			> .button {

app/stylus/components/Room.styl

@@ -271,7 +271,7 @@
 		right: 0;
 		width: 20%;
 		height: 100%;
-		background-color: #FFF;
+		background-color: rgba(0,0,0,0.1);
 		transition: width 0.3s;
 	}
 }

app/stylus/components/ToolArea.styl

@@ -73,6 +73,7 @@
 [data-component='ToolArea'] {
 	width: 100%;
 	height: 100%;
+	color: #fff;
 
 	> .tabs {
 		display: flex;
@@ -84,7 +85,7 @@
 			display: block;
 			padding: 1vmin 0 0.8vmin 0;
 			cursor: pointer;
-			background: rgba(#000, 0.3);
+			background: rgba(0,0,0,0.3);
 			font-weight: bold;
 			transition: background ease 0.2s;
 			text-align: center;
@@ -111,7 +112,7 @@
 			height: 100%;
 			display: none;
 			padding: 1vmin;
-			background: #fff;
+			background: rgba(0,0,0,0.1);
 		}
 
 		> input[type="radio"] {
@@ -119,11 +120,12 @@
 		}
 
 		> input[type="radio"]:checked + label {
-			background: #fff;
+			background: rgba(0,0,0,0.1);
 		}
 
 		> input[type="radio"]:checked + label + .tab {
 			display: block;
+			background: rgba(0,0,0,0.1);
 		}
 	}
 }

app/stylus/index.styl

@@ -5,7 +5,6 @@ global-reset();
 @import './mixins';
 @import './fonts';
 @import './reset';
-@import './keyframes';
 
 html {
 	height: 100%;

app/stylus/keyframes.styl

@@ -1,23 +0,0 @@
-@keyframes fade-in {
-	from {
-		opacity: 0;
-		visibility: hidden;
-	}
-
-	to {
-		opacity: 1;
-		visibility: visible;
-	}
-}
-
-@keyframes fade-out {
-	from {
-		opacity: 1;
-		visibility: visible;
-	}
-
-	to {
-		opacity: 0;
-		visibility: hidden;
-	}
-}

server/lib/Room.js

@@ -232,7 +232,6 @@ class Room extends EventEmitter
 				{
 					accept();
 
-					console.log('YES LAWD les cghange tat prifule pic!!')
 					this._protooRoom.spread('profile-picture-changed', {
 						peerName: protooPeer.id,
 						picture: request.data.picture