Raise hand over network - still no state on server (new participants don't get the raised hand state of others until the others change their raised hand state)

app/lib/RoomClient.js

@@ -486,33 +486,41 @@ export default class RoomClient
 			});
 	}
 
-	raiseHand()
+	sendRaiseHandState(state)
 	{
-		logger.debug('raiseHand()');
+		logger.debug('sendRaiseHandState: ', state);
 
 		this._dispatch(
-			stateActions.setRaiseHandInProgress(true));
+			stateActions.setMyRaiseHandStateInProgress(true));
 
-		this._dispatch(
-			stateActions.setRaiseHandState(true));
+		return this._protoo.send('raisehand-message', { raiseHandState: state })
+			.then(() =>
+			{
+				this._dispatch(
+					stateActions.setMyRaiseHandState(state));
 
-		this._dispatch(
-			stateActions.setRaiseHandInProgress(false));
+				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}`
+					}));
 
-	lowerHand()
-	{
-		logger.debug('lowerHand()');
-
-		this._dispatch(
-			stateActions.setRaiseHandInProgress(true));
-
-		this._dispatch(
-			stateActions.setRaiseHandState(false));
-
-		this._dispatch(
-			stateActions.setRaiseHandInProgress(false));
+				// We need to refresh the component for it to render changed state
+				this._dispatch(stateActions.setMyRaiseHandState(!state));
+				this._dispatch(
+					stateActions.setMyRaiseHandStateInProgress(false));
+			});
 	}
 
 	restartIce()
@@ -641,6 +649,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

@@ -31,6 +31,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/redux/STATE.md

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

app/lib/redux/reducers/me.js

@@ -72,14 +72,14 @@ const me = (state = initialState, action) =>
 			return { ...state, audioOnlyInProgress: flag };
 		}
 
-		case 'SET_RAISE_HAND_STATE':
+		case 'SET_MY_RAISE_HAND_STATE':
 		{
-			const { enabled } = action.payload;
+			const { flag } = action.payload;
 
-			return { ...state, raiseHand: enabled };
+			return { ...state, raiseHand: flag };
 		}
 
-		case 'SET_RAISE_HAND_STATE_IN_PROGRESS':
+		case 'SET_MY_RAISE_HAND_STATE_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/roomClientMiddleware.js

@@ -104,14 +104,14 @@ export default ({ dispatch, getState }) => (next) =>
 
 			case 'RAISE_HAND':
 			{
-				client.raiseHand();
+				client.sendRaiseHandState(true);
 
 				break;
 			}
 
 			case 'LOWER_HAND':
 			{
-				client.lowerHand();
+				client.sendRaiseHandState(false);
 
 				break;
 			}

app/lib/redux/stateActions.js

@@ -70,22 +70,30 @@ export const setAudioOnlyInProgress = (flag) =>
 	};
 };
 
-export const setRaiseHandState = (enabled) =>
+export const setMyRaiseHandState = (flag) =>
 {
 	return {
-		type    : 'SET_RAISE_HAND_STATE',
-		payload : { enabled }
+		type    : 'SET_MY_RAISE_HAND_STATE',
+		payload : { flag }
 	};
 };
 
-export const setRaiseHandInProgress = (flag) =>
+export const setMyRaiseHandStateInProgress = (flag) =>
 {
 	return {
-		type    : 'SET_RAISE_HAND_STATE_IN_PROGRESS',
+		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 {