Merge branch 'fix-raiseHand' into develop

app/lib/RoomClient.js

@@ -178,11 +178,11 @@ export default class RoomClient
 			});
 	}
 
-	changeProfilePicture(picture) 
+	changeProfilePicture(picture)
 	{
 		logger.debug('changeProfilePicture() [picture: "%s"]', picture);
 
-		this._protoo.send('change-profile-picture', { picture }).catch((error) => 
+		this._protoo.send('change-profile-picture', { picture }).catch((error) =>
 		{
 			logger.error('shareProfilePicure() | failed: %o', error);
 		});
@@ -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/lib/components/Peer.jsx

@@ -91,6 +91,20 @@ class Peer extends Component
 				}
 
 				<div className={classnames('view-container', 'webcam')} style={style}>
+					<div className='indicators'>
+						{peer.raiseHandState ?
+							<div className={
+								classnames(
+									'icon', 'raise-hand', {
+										on  : peer.raiseHandState,
+										off : !peer.raiseHandState
+									}
+								)
+							}
+							/>
+							:null
+						}
+					</div>
 					<div
 						className={classnames('controls', {
 							visible : this.state.controlsVisible

app/lib/components/Sidebar.jsx

@@ -14,17 +14,17 @@ class Sidebar extends Component
 
 	handleToggleFullscreen = () =>
 	{
-		if (fscreen.fullscreenElement) 
+		if (fscreen.fullscreenElement)
 		{
 			fscreen.exitFullscreen();
 		}
-		else 
+		else
 		{
 			fscreen.requestFullscreen(document.documentElement);
 		}
 	};
 
-	handleFullscreenChange = () => 
+	handleFullscreenChange = () =>
 	{
 		this.setState({
 			fullscreen : fscreen.fullscreenElement !== null
@@ -47,16 +47,16 @@ class Sidebar extends Component
 		}
 	}
 
-	render() 
+	render()
 	{
 		const {
 			toolbarsVisible, me, screenProducer, onLogin, onShareScreen,
-			onUnShareScreen, onNeedExtension, onLeaveMeeting, onLogout
+			onUnShareScreen, onNeedExtension, onLeaveMeeting, onLogout, onToggleHand
 		} = this.props;
 
 		let screenState;
 		let screenTip;
-	
+
 		if (me.needExtension)
 		{
 			screenState = 'need-extension';
@@ -77,7 +77,7 @@ class Sidebar extends Component
 			screenState = 'off';
 			screenTip = 'Start screen sharing';
 		}
-	
+
 		return (
 			<div
 				className={classnames('sidebar room-controls', {
@@ -126,7 +126,7 @@ class Sidebar extends Component
 						}
 					}}
 				/>
-	
+
 				{me.loginEnabled && (me.loggedIn ? (
 					<div
 						className='button logout'
@@ -144,6 +144,15 @@ class Sidebar extends Component
 						onClick={onLogin}
 					/>
 				))}
+				<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')}
@@ -162,6 +171,7 @@ Sidebar.propTypes = {
 	onShareScreen   : PropTypes.func.isRequired,
 	onUnShareScreen : PropTypes.func.isRequired,
 	onNeedExtension : PropTypes.func.isRequired,
+	onToggleHand    : PropTypes.func.isRequired,
 	onLeaveMeeting  : PropTypes.func.isRequired,
 	onLogin         : PropTypes.func.isRequired,
 	onLogout        : PropTypes.func.isRequired,
@@ -181,6 +191,7 @@ const mapDispatchToProps = {
 	onShareScreen   : requestActions.enableScreenSharing,
 	onUnShareScreen : requestActions.disableScreenSharing,
 	onNeedExtension : requestActions.installExtension,
+	onToggleHand    : requestActions.toggleHand,
 	onLogin         : requestActions.userLogin,
 	onLogout        : requestActions.userLogout
 };
@@ -188,4 +199,4 @@ const mapDispatchToProps = {
 export default connect(
 	mapStateToProps,
 	mapDispatchToProps
-)(Sidebar);
+)(Sidebar);

app/lib/redux/requestActions.js

@@ -191,6 +191,18 @@ export const installExtension = () =>
 	};
 };
 
+export const toggleHand = (enable) =>
+{
+	if (enable)
+		return {
+			type : 'RAISE_HAND'
+		};
+	else
+		return {
+			type : 'LOWER_HAND'
+		};
+};
+
 export const sendChatMessage = (text, name, picture) =>
 {
 	const message = createNewMessage(text, 'response', name, picture);

app/package-lock.json

@@ -4599,12 +4599,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4619,17 +4621,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4746,7 +4751,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4758,6 +4764,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4772,6 +4779,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4890,7 +4898,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4902,6 +4911,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5023,6 +5033,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",

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;
@@ -124,4 +172,4 @@
     flex-grow: 1;
     align-items: center;
 	}
-}
+}

app/stylus/components/Peer.styl

@@ -23,7 +23,7 @@
 	> .view-container {
 		position: relative;
 		flex-grow: 1;
-		
+
 		&.webcam {
 			order: 2;
 		}
@@ -32,7 +32,57 @@
 			order: 1;
 			max-width: 50%;
 		}
+		> .indicators {
+			position: absolute;
+			left: 0;
+			top: 0;
+			display: flex;
+			flex-direction:; row;
+			justify-content: flex-start;
+			align-items: center;
+			padding: 0.4vmin;
+			transition: opacity 0.3s;
+			z-index: 10;
 
+			> .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 {
 			position: absolute;
 			z-index: 10;
@@ -45,11 +95,11 @@
 			padding: 0.4vmin;
 			opacity: 0;
 			transition: opacity 0.3s;
-			
+
 			&.visible {
 				opacity: 1;
 			}
-			
+
 			> .button {
 				flex: 0 0 auto;
 				margin: 0.2vmin;

app/stylus/components/Sidebar.styl

@@ -113,4 +113,4 @@
 			background-image: url('/resources/images/leave-meeting.svg');
 		}
 	}
-}
+}

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',