Merge branch 'develop' of https://github.com/havfo/multiparty-meeting into develop

app/lib/components/Chat/Chat.jsx

@@ -14,7 +14,8 @@ class Chat extends Component
 			onSendMessage,
 			disabledInput,
 			autofocus,
-			displayName
+			displayName,
+			picture
 		} = this.props;
 
 		return (
@@ -22,7 +23,7 @@ class Chat extends Component
 				<MessageList />
 				<form
 					data-component='Sender'
-					onSubmit={(e) => { onSendMessage(e, displayName); }}
+					onSubmit={(e) => { onSendMessage(e, displayName, picture); }}
 				>
 					<input
 						type='text'
@@ -45,7 +46,8 @@ Chat.propTypes =
 	onSendMessage     : PropTypes.func,
 	disabledInput     : PropTypes.bool,
 	autofocus         : PropTypes.bool,
-	displayName       : PropTypes.string
+	displayName       : PropTypes.string,
+	picture           : PropTypes.string
 };
 
 Chat.defaultProps =
@@ -59,14 +61,15 @@ const mapStateToProps = (state) =>
 {
 	return {
 		disabledInput : state.chatbehavior.disabledInput,
-		displayName   : state.me.displayName
+		displayName   : state.me.displayName,
+		picture       : state.me.picture
 	};
 };
 
 const mapDispatchToProps = (dispatch) =>
 {
 	return {
-		onSendMessage : (event, displayName) =>
+		onSendMessage : (event, displayName, picture) =>
 		{
 			event.preventDefault();
 			const userInput = event.target.message.value;
@@ -74,7 +77,7 @@ const mapDispatchToProps = (dispatch) =>
 			if (userInput)
 			{
 				dispatch(stateActions.addUserMessage(userInput));
-				dispatch(requestActions.sendChatMessage(userInput, displayName));
+				dispatch(requestActions.sendChatMessage(userInput, displayName, picture));
 			}
 			event.target.message.value = '';
 		}

app/lib/components/Chat/MessageList.jsx

@@ -50,20 +50,28 @@ class MessageList extends Component
 					{
 						const messageTime = new Date(message.time);
 
+						const picture = (message.sender === 'response' ?
+							message.picture : this.props.myPicture) || 'resources/images/avatar-empty.jpeg';
+
 						return (
 							<div className='message' key={i}>
 								<div className={message.sender}>
-									<div
-										className='message-text'
-										// eslint-disable-next-line react/no-danger
-										dangerouslySetInnerHTML={{ __html : marked.parse(
-											message.text,
-											{ sanitize: true, renderer: linkRenderer }
-										) }}
-									/>
-									<span className='message-time'>
-										{message.name} - {this.getTimeString(messageTime)}
-									</span>
+									<img className='message-avatar' src={picture} />
+
+									<div className='message-content'>
+										<div
+											className='message-text'
+											// eslint-disable-next-line react/no-danger
+											dangerouslySetInnerHTML={{ __html : marked.parse(
+												message.text,
+												{ sanitize: true, renderer: linkRenderer }
+											) }}
+										/>
+
+										<span className='message-time'>
+											{message.name} - {this.getTimeString(messageTime)}
+										</span>
+									</div>
 								</div>
 							</div>
 						);
@@ -76,13 +84,15 @@ class MessageList extends Component
 
 MessageList.propTypes =
 {
-	chatmessages : PropTypes.arrayOf(PropTypes.object).isRequired
+	chatmessages : PropTypes.arrayOf(PropTypes.object).isRequired,
+	myPicture    : PropTypes.string
 };
 
 const mapStateToProps = (state) =>
 {
 	return {
-		chatmessages : state.chatmessages
+		chatmessages : state.chatmessages,
+		myPicture    : state.me.picture
 	};
 };
 

app/lib/components/ParticipantList/ListPeer.jsx

@@ -38,9 +38,12 @@ const ListPeer = (props) =>
 		!screenConsumer.remotelyPaused
 	);
 
+	const picture = peer.picture || 'resources/images/avatar-empty.jpeg';
+
 	return (
 		<div data-component='ListPeer'>
-			<img className='avatar' />
+			<img className='avatar' src={picture} />
+
 			<div className='peer-info'>
 				{peer.displayName}
 			</div>