Merge branch 'feature-raise-hand' into develop

app/lib/RoomClient.js

@@ -587,6 +587,43 @@ export default class RoomClient
 			});
 	}
 
+	sendRaiseHandState(state)
+	{
+		logger.debug('sendRaiseHandState: ', state);
+
+		this._dispatch(
+			stateActions.setMyRaiseHandStateInProgress(true));
+
+		return this._protoo.send('raisehand-message', { raiseHandState: state })
+			.then(() =>
+			{
+				this._dispatch(
+					stateActions.setMyRaiseHandState(state));
+
+				this._dispatch(requestActions.notify(
+					{
+						text : 'raiseHand state changed'
+					}));
+				this._dispatch(
+					stateActions.setMyRaiseHandStateInProgress(false));
+			})
+			.catch((error) =>
+			{
+				logger.error('sendRaiseHandState() | failed: %o', error);
+
+				this._dispatch(requestActions.notify(
+					{
+						type : 'error',
+						text : `Could not change raise hand state: ${error}`
+					}));
+
+				// We need to refresh the component for it to render changed state
+				this._dispatch(stateActions.setMyRaiseHandState(!state));
+				this._dispatch(
+					stateActions.setMyRaiseHandStateInProgress(false));
+			});
+	}
+
 	restartIce()
 	{
 		logger.debug('restartIce()');
@@ -713,6 +750,17 @@ export default class RoomClient
 
 					break;
 				}
+				case 'raisehand-message':
+				{
+					accept();
+					const { peerName, raiseHandState } = request.data;
+
+					logger.debug('Got raiseHandState from "%s"', peerName);
+
+					this._dispatch(
+						stateActions.setPeerRaiseHandState(peerName, raiseHandState));
+					break;
+				}
 
 				case 'chat-message-receive':
 				{

app/lib/components/Peer.jsx

@@ -59,6 +59,10 @@ const Peer = (props) =>
 		return (
 			<div data-component='Peer'>
 				<div className='indicators'>
+					{peer.raiseHandState ?
+						<div className='icon raise-hand' />
+						:null
+					}
 					{!micEnabled ?
 						<div className='icon mic-off' />
 						:null

app/lib/components/Room.jsx

@@ -24,10 +24,11 @@ class Room extends React.Component
 			onRoomLinkCopy,
 			onSetAudioMode,
 			onRestartIce,
-			onLeaveMeeting,
 			onShareScreen,
 			onUnShareScreen,
-			onNeedExtension
+			onNeedExtension,
+			onToggleHand,
+			onLeaveMeeting
 		} = this.props;
 
 		let screenState;
@@ -157,6 +158,16 @@ class Room extends React.Component
 							onClick={() => onRestartIce()}
 						/>
 
+						<div
+							className={classnames('button', 'raise-hand', {
+								on       : me.raiseHand,
+								disabled : me.raiseHandInProgress
+							})}
+							data-tip='Raise hand'
+							data-type='dark'
+							onClick={() => onToggleHand(!me.raiseHand)}
+						/>
+
 						<div
 							className={classnames('button', 'leave-meeting')}
 							data-tip='Leave meeting'
@@ -185,10 +196,11 @@ Room.propTypes =
 	onRoomLinkCopy  : PropTypes.func.isRequired,
 	onSetAudioMode  : PropTypes.func.isRequired,
 	onRestartIce    : PropTypes.func.isRequired,
-	onLeaveMeeting  : PropTypes.func.isRequired,
 	onShareScreen   : PropTypes.func.isRequired,
 	onUnShareScreen : PropTypes.func.isRequired,
-	onNeedExtension : PropTypes.func.isRequired
+	onNeedExtension : PropTypes.func.isRequired,
+	onToggleHand 	  : PropTypes.func.isRequired,
+	onLeaveMeeting  : PropTypes.func.isRequired
 };
 
 const mapStateToProps = (state) =>
@@ -226,6 +238,13 @@ const mapDispatchToProps = (dispatch) =>
 		{
 			dispatch(requestActions.restartIce());
 		},
+		onToggleHand : (enable) =>
+		{
+			if (enable)
+				dispatch(requestActions.raiseHand());
+			else
+				dispatch(requestActions.lowerHand());
+		},
 		onLeaveMeeting : () =>
 		{
 			dispatch(requestActions.leaveRoom());

app/lib/redux/STATE.md

@@ -51,10 +51,11 @@
   {
     'alice' :
     {
-      name        : 'alice',
+      name           : 'alice',
-      displayName : 'Alice Thomsom',
+      displayName    : 'Alice Thomsom',
-      device      : { flag: 'chrome', name: 'Chrome', version: '58' },
+      raiseHandState : false,
-      consumers   : [ 5551, 5552 ]
+      device         : { flag: 'chrome', name: 'Chrome', version: '58' },
+      consumers      : [ 5551, 5552 ]
     }
   },
   consumers :

app/lib/redux/reducers/me.js

@@ -13,6 +13,8 @@ const initialState =
 	screenShareInProgress : false,
 	audioOnly             : false,
 	audioOnlyInProgress   : false,
+	raiseHand             : false,
+	raiseHandInProgress   : false,
 	restartIceInProgress  : false
 };
 
@@ -33,11 +35,11 @@ const me = (state = initialState, action) =>
 
 			return { ...state, canSendMic, canSendWebcam };
 		}
-		
+
 		case 'SET_SCREEN_CAPABILITIES':
 		{
 			const { canShareScreen, needExtension } = action.payload;
-			
+
 			return { ...state, canShareScreen, needExtension };
 		}
 
@@ -87,6 +89,20 @@ const me = (state = initialState, action) =>
 			return { ...state, audioOnlyInProgress: flag };
 		}
 
+		case 'SET_MY_RAISE_HAND_STATE':
+		{
+			const { flag } = action.payload;
+
+			return { ...state, raiseHand: flag };
+		}
+
+		case 'SET_MY_RAISE_HAND_STATE_IN_PROGRESS':
+		{
+			const { flag } = action.payload;
+
+			return { ...state, raiseHandInProgress: flag };
+		}
+
 		case 'SET_RESTART_ICE_IN_PROGRESS':
 		{
 			const { flag } = action.payload;

app/lib/redux/reducers/peers.js

@@ -34,6 +34,19 @@ const peers = (state = initialState, action) =>
 			return { ...state, [newPeer.name]: newPeer };
 		}
 
+		case 'SET_PEER_RAISE_HAND_STATE':
+		{
+			const { peerName, raiseHandState } = action.payload;
+			const peer = state[peerName];
+
+			if (!peer)
+				throw new Error('no Peer found');
+
+			const newPeer = { ...peer, raiseHandState };
+
+			return { ...state, [newPeer.name]: newPeer };
+		}
+
 		case 'ADD_CONSUMER':
 		{
 			const { consumer, peerName } = action.payload;

app/lib/redux/requestActions.js

@@ -78,6 +78,20 @@ export const disableAudioOnly = () =>
 	};
 };
 
+export const raiseHand = () =>
+{
+	return {
+		type : 'RAISE_HAND'
+	};
+};
+
+export const lowerHand = () =>
+{
+	return {
+		type : 'LOWER_HAND'
+	};
+};
+
 export const restartIce = () =>
 {
 	return {

app/lib/redux/roomClientMiddleware.js

@@ -102,6 +102,20 @@ export default ({ dispatch, getState }) => (next) =>
 				break;
 			}
 
+			case 'RAISE_HAND':
+			{
+				client.sendRaiseHandState(true);
+
+				break;
+			}
+
+			case 'LOWER_HAND':
+			{
+				client.sendRaiseHandState(false);
+
+				break;
+			}
+
 			case 'RESTART_ICE':
 			{
 				client.restartIce();

app/lib/redux/stateActions.js

@@ -86,6 +86,30 @@ export const setAudioOnlyInProgress = (flag) =>
 	};
 };
 
+export const setMyRaiseHandState = (flag) =>
+{
+	return {
+		type    : 'SET_MY_RAISE_HAND_STATE',
+		payload : { flag }
+	};
+};
+
+export const setMyRaiseHandStateInProgress = (flag) =>
+{
+	return {
+		type    : 'SET_MY_RAISE_HAND_STATE_IN_PROGRESS',
+		payload : { flag }
+	};
+};
+
+export const setPeerRaiseHandState = (peerName, raiseHandState) =>
+{
+	return {
+		type    : 'SET_PEER_RAISE_HAND_STATE',
+		payload : { peerName, raiseHandState }
+	};
+};
+
 export const setRestartIceInProgress = (flag) =>
 {
 	return {

app/resources/images/icon-hand-black.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 96 96"
+   style="enable-background:new 0 0 96 96;"
+   xml:space="preserve">
+   <metadata
+     id="metadata11"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata>
+           <defs
+     id="defs9" />
+  <path
+     style="fill:#000000;stroke-width:0.40677965"
+     d="m 33.894283,77.837288 c -1.428534,-1.845763 -3.909722,-5.220659 -5.513751,-7.499764 -1.60403,-2.279109 -4.323663,-5.940126 -6.043631,-8.135593 -5.698554,-7.273973 -6.224902,-8.044795 -6.226676,-9.118803 -0.0034,-2.075799 2.81181,-4.035355 4.9813,-3.467247 0.50339,0.131819 2.562712,1.72771 4.576272,3.546423 4.238418,3.828283 6.617166,5.658035 7.355654,5.658035 0.82497,0 1.045415,-1.364294 0.567453,-3.511881 C 33.348583,54.219654 31.1088,48.20339 28.613609,41.938983 23.524682,29.162764 23.215312,27.731034 25.178629,26.04226 c 2.443255,-2.101599 4.670178,-1.796504 6.362271,0.87165 0.639176,1.007875 2.666245,5.291978 4.504599,9.520229 1.838354,4.228251 3.773553,8.092718 4.300442,8.587705 l 0.957981,0.899977 0.419226,-1.102646 c 0.255274,-0.671424 0.419225,-6.068014 0.419225,-13.799213 0,-13.896836 -0.0078,-13.84873 2.44517,-15.1172 1.970941,-1.019214 4.2259,-0.789449 5.584354,0.569005 l 1.176852,1.176852 0.483523,11.738402 c 0.490017,11.896027 0.826095,14.522982 1.911266,14.939402 1.906224,0.731486 2.21601,-0.184677 4.465407,-13.206045 1.239206,-7.173539 1.968244,-10.420721 2.462128,-10.966454 1.391158,-1.537215 4.742705,-1.519809 6.295208,0.03269 1.147387,1.147388 1.05469,3.124973 -0.669503,14.283063 -0.818745,5.298489 -1.36667,10.090163 -1.220432,10.67282 0.14596,0.581557 0.724796,1.358395 1.286298,1.726306 0.957759,0.627548 1.073422,0.621575 1.86971,-0.09655 0.466837,-0.421011 1.761787,-2.595985 2.877665,-4.833273 2.564176,-5.141059 3.988466,-6.711864 6.085822,-6.711864 2.769954,0 3.610947,2.927256 2.139316,7.446329 C 78.799497,44.318351 66.752066,77.28024 65.51653,80.481356 65.262041,81.140709 64.18139,81.19322 50.866695,81.19322 H 36.491617 Z"
+     id="path3710"/>
+</svg>

app/resources/images/icon-hand-white.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 96 96"
+   style="enable-background:new 0 0 96 96;"
+   xml:space="preserve">
+   <metadata
+     id="metadata11"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata>
+           <defs
+     id="defs9" />
+  <path
+     style="fill:#ffffff;stroke-width:0.40677965"
+     d="m 33.894283,77.837288 c -1.428534,-1.845763 -3.909722,-5.220659 -5.513751,-7.499764 -1.60403,-2.279109 -4.323663,-5.940126 -6.043631,-8.135593 -5.698554,-7.273973 -6.224902,-8.044795 -6.226676,-9.118803 -0.0034,-2.075799 2.81181,-4.035355 4.9813,-3.467247 0.50339,0.131819 2.562712,1.72771 4.576272,3.546423 4.238418,3.828283 6.617166,5.658035 7.355654,5.658035 0.82497,0 1.045415,-1.364294 0.567453,-3.511881 C 33.348583,54.219654 31.1088,48.20339 28.613609,41.938983 23.524682,29.162764 23.215312,27.731034 25.178629,26.04226 c 2.443255,-2.101599 4.670178,-1.796504 6.362271,0.87165 0.639176,1.007875 2.666245,5.291978 4.504599,9.520229 1.838354,4.228251 3.773553,8.092718 4.300442,8.587705 l 0.957981,0.899977 0.419226,-1.102646 c 0.255274,-0.671424 0.419225,-6.068014 0.419225,-13.799213 0,-13.896836 -0.0078,-13.84873 2.44517,-15.1172 1.970941,-1.019214 4.2259,-0.789449 5.584354,0.569005 l 1.176852,1.176852 0.483523,11.738402 c 0.490017,11.896027 0.826095,14.522982 1.911266,14.939402 1.906224,0.731486 2.21601,-0.184677 4.465407,-13.206045 1.239206,-7.173539 1.968244,-10.420721 2.462128,-10.966454 1.391158,-1.537215 4.742705,-1.519809 6.295208,0.03269 1.147387,1.147388 1.05469,3.124973 -0.669503,14.283063 -0.818745,5.298489 -1.36667,10.090163 -1.220432,10.67282 0.14596,0.581557 0.724796,1.358395 1.286298,1.726306 0.957759,0.627548 1.073422,0.621575 1.86971,-0.09655 0.466837,-0.421011 1.761787,-2.595985 2.877665,-4.833273 2.564176,-5.141059 3.988466,-6.711864 6.085822,-6.711864 2.769954,0 3.610947,2.927256 2.139316,7.446329 C 78.799497,44.318351 66.752066,77.28024 65.51653,80.481356 65.262041,81.140709 64.18139,81.19322 50.866695,81.19322 H 36.491617 Z"
+     id="path3710"/>
+</svg>

app/resources/images/icon_remote_raise_hand.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 96 96"
+   style="enable-background:new 0 0 96 96;"
+   xml:space="preserve">
+   <metadata
+     id="metadata11"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata>
+           <defs
+     id="defs9" />
+  <path
+     style="fill:#ffffff;stroke-width:0.40677965"
+     d="m 33.894283,77.837288 c -1.428534,-1.845763 -3.909722,-5.220659 -5.513751,-7.499764 -1.60403,-2.279109 -4.323663,-5.940126 -6.043631,-8.135593 -5.698554,-7.273973 -6.224902,-8.044795 -6.226676,-9.118803 -0.0034,-2.075799 2.81181,-4.035355 4.9813,-3.467247 0.50339,0.131819 2.562712,1.72771 4.576272,3.546423 4.238418,3.828283 6.617166,5.658035 7.355654,5.658035 0.82497,0 1.045415,-1.364294 0.567453,-3.511881 C 33.348583,54.219654 31.1088,48.20339 28.613609,41.938983 23.524682,29.162764 23.215312,27.731034 25.178629,26.04226 c 2.443255,-2.101599 4.670178,-1.796504 6.362271,0.87165 0.639176,1.007875 2.666245,5.291978 4.504599,9.520229 1.838354,4.228251 3.773553,8.092718 4.300442,8.587705 l 0.957981,0.899977 0.419226,-1.102646 c 0.255274,-0.671424 0.419225,-6.068014 0.419225,-13.799213 0,-13.896836 -0.0078,-13.84873 2.44517,-15.1172 1.970941,-1.019214 4.2259,-0.789449 5.584354,0.569005 l 1.176852,1.176852 0.483523,11.738402 c 0.490017,11.896027 0.826095,14.522982 1.911266,14.939402 1.906224,0.731486 2.21601,-0.184677 4.465407,-13.206045 1.239206,-7.173539 1.968244,-10.420721 2.462128,-10.966454 1.391158,-1.537215 4.742705,-1.519809 6.295208,0.03269 1.147387,1.147388 1.05469,3.124973 -0.669503,14.283063 -0.818745,5.298489 -1.36667,10.090163 -1.220432,10.67282 0.14596,0.581557 0.724796,1.358395 1.286298,1.726306 0.957759,0.627548 1.073422,0.621575 1.86971,-0.09655 0.466837,-0.421011 1.761787,-2.595985 2.877665,-4.833273 2.564176,-5.141059 3.988466,-6.711864 6.085822,-6.711864 2.769954,0 3.610947,2.927256 2.139316,7.446329 C 78.799497,44.318351 66.752066,77.28024 65.51653,80.481356 65.262041,81.140709 64.18139,81.19322 50.866695,81.19322 H 36.491617 Z"
+     id="path3710"/>
+</svg>

app/stylus/components/Peer.styl

@@ -38,6 +38,10 @@
 				opacity: 0.85;
 			}
 
+			&.raise-hand {
+				background-image: url('/resources/images/icon_remote_raise_hand.svg');
+			}
+			
 			&.mic-off {
 				background-image: url('/resources/images/icon_remote_mic_white_off.svg');
 			}

app/stylus/components/Room.styl

@@ -250,6 +250,13 @@
 					background-image: url('/resources/images/share-screen-extension.svg');
 				}
 			}
+			&.raise-hand {
+				background-image: url('/resources/images/icon-hand-white.svg');
+
+				&.on {
+					background-image: url('/resources/images/icon-hand-black.svg');
+				}
+			}
 
 			&.leave-meeting {
 				background-image: url('/resources/images/leave-meeting.svg');

server/lib/Room.js

@@ -260,6 +260,27 @@ class Room extends EventEmitter
 					break;
 				}
 
+				case 'raisehand-message':
+				{
+					accept();
+
+					const { raiseHandState } = request.data;
+					const { mediaPeer } = protooPeer.data;
+
+					mediaPeer.appData.raiseHand = request.data.raiseHandState;
+
+					// Spread to others via protoo.
+					this._protooRoom.spread(
+						'raisehand-message',
+						{
+							peerName    : protooPeer.id,
+							raiseHandState : raiseHandState
+						},
+						[ protooPeer ]);
+
+					break;
+				}
+
 				default:
 				{
 					logger.error('unknown request.method "%s"', request.method);