Re added raiseHand feature: still missing state on server side and display in participant list

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/Peer.styl

@@ -23,7 +23,7 @@
 	> .view-container {
 		position: relative;
 		flex-grow: 1;
-		
+
 		&.webcam {
 			order: 2;
 		}
@@ -32,7 +32,58 @@
 			order: 1;
 			max-width: 50%;
 		}
+		> .indicators {
+			position: absolute;
+			z-index: 200;
+			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);
+				cursor: pointer;
+				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 +96,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');
 		}
 	}
-}
+}