raiseHandState now visible for new participants, deleted raiseHand notification

app/lib/RoomClient.js

@@ -913,11 +913,6 @@ export default class RoomClient
 			{
 				this._dispatch(
 					stateActions.setMyRaiseHandState(state));
-
-				this._dispatch(requestActions.notify(
-					{
-						text : 'raiseHand state changed'
-					}));
 				this._dispatch(
 					stateActions.setMyRaiseHandStateInProgress(false));
 			})
@@ -1806,10 +1801,11 @@ export default class RoomClient
 
 		this._dispatch(stateActions.addPeer(
 			{
-				name        : peer.name,
-				displayName : displayName,
-				device      : peer.appData.device,
-				consumers   : []
+				name           : peer.name,
+				displayName    : displayName,
+				device         : peer.appData.device,
+				raiseHandState : peer.appData.raiseHandState,
+				consumers      : []
 			}));
 
 		if (notify)

app/lib/components/ParticipantList/ListPeer.jsx

@@ -47,6 +47,20 @@ const ListPeer = (props) =>
 			<div className='peer-info'>
 				{peer.displayName}
 			</div>
+			<div className='indicators'>
+				{peer.raiseHandState ?
+					<div className={
+						classnames(
+							'icon', 'raise-hand', {
+								on  : peer.raiseHandState,
+								off : !peer.raiseHandState
+							}
+						)
+					}
+					/>
+					:null
+				}
+			</div>
 			<div className='controls'>
 				{ screenConsumer ?
 					<div

app/stylus/components/ParticipantList.styl

@@ -16,7 +16,55 @@
 
 [data-component='ListPeer'] {
 	display: flex;
+	> .indicators {
+		left: 0;
+		top: 0;
+		display: flex;
+		flex-direction:; row;
+		justify-content: flex-start;
+		align-items: center;
+		padding: 0.4vmin;
+		transition: opacity 0.3s;
 
+		> .icon {
+			flex: 0 0 auto;
+			margin: 0.2vmin;
+			border-radius: 2px;
+			background-position: center;
+			background-size: 75%;
+			background-repeat: no-repeat;
+			background-color: rgba(#000, 0.5);
+			transition-property: opacity, background-color;
+			transition-duration: 0.15s;
+
+			+desktop() {
+				width: 24px;
+				height: 24px;
+				opacity: 0.85;
+
+				&:hover {
+					opacity: 1;
+				}
+			}
+
+			+mobile() {
+				width: 22px;
+				height: 22px;
+			}
+
+			&.on {
+				opacity: 1;
+			}
+
+			&.off {
+				opacity: 0.2;
+			}
+
+			&.raise-hand {
+				background-image: url('/resources/images/icon-hand-white.svg');
+			}
+		}
+	}
 	> .controls {
 		float: right;
 		display: flex;

app/stylus/components/Peer.styl

@@ -34,7 +34,6 @@
 		}
 		> .indicators {
 			position: absolute;
-			z-index: 200;
 			left: 0;
 			top: 0;
 			display: flex;
@@ -43,6 +42,7 @@
 			align-items: center;
 			padding: 0.4vmin;
 			transition: opacity 0.3s;
+			z-index: 10;
 
 			> .icon {
 				flex: 0 0 auto;
@@ -52,7 +52,6 @@
 				background-size: 75%;
 				background-repeat: no-repeat;
 				background-color: rgba(#000, 0.5);
-				cursor: pointer;
 				transition-property: opacity, background-color;
 				transition-duration: 0.15s;
 

server/lib/Room.js

@@ -279,7 +279,7 @@ class Room extends EventEmitter
 					const { raiseHandState } = request.data;
 					const { mediaPeer } = protooPeer.data;
 
-					mediaPeer.appData.raiseHand = request.data.raiseHandState;
+					mediaPeer.appData.raiseHandState = request.data.raiseHandState;
 					// Spread to others via protoo.
 					this._protooRoom.spread(
 						'raisehand-message',