Merge branch 'feature-central-hark' into develop

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';
@@ -1380,7 +1381,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) =>
 			{
@@ -1823,7 +1850,8 @@ export default class RoomClient
 				track          : null,
 				codec          : codec ? codec.name : null
 			},
-			consumer.peer.name));
+			consumer.peer.name)
+		);
 
 		consumer.on('close', (originator) =>
 		{
@@ -1835,6 +1863,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

@@ -67,6 +67,8 @@ const ListPeer = (props) =>
 						off      : !micEnabled,
 						disabled : peer.peerAudioInProgress
 					})}
+					style={{ opacity : micEnabled && micConsumer ? (micConsumer.volume/10)
+						+ 0.2 :1 }}
 					onClick={(e) =>
 					{
 						e.stopPropagation();

app/lib/components/Peer.jsx

@@ -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}

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/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,
+                  "dev": true
-                  "optional": 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"
                   }