Add avatars to user list

app/lib/RoomClient.js

@@ -174,6 +174,16 @@ export default class RoomClient
 			});
 	}
 
+	changeProfilePicture(picture) 
+	{
+		logger.debug('changeProfilePicture() [picture: "%s"]', picture);
+
+		this._protoo.send('change-profile-picture', { picture }).catch((error) => 
+		{
+			logger.error('shareProfilePicure() | failed: %o', error);
+		});
+	}
+
 	sendChatMessage(chatMessage)
 	{
 		logger.debug('sendChatMessage() [chatMessage:"%s"]', chatMessage);
@@ -1051,6 +1061,17 @@ export default class RoomClient
 					break;
 				}
 
+				case 'profile-picture-changed':
+				{
+					accept();
+
+					const { peerName, picture } = request.data;
+
+					this._dispatch(stateActions.setPeerPicture(peerName, picture));
+
+					break;
+				}
+
 				// This means: server wants to change MY user information
 				case 'auth':
 				{
@@ -1061,6 +1082,7 @@ export default class RoomClient
 					{
 						this.changeDisplayName(request.data.name);
 
+						this.changeProfilePicture(request.data.picture);
 						this._dispatch(stateActions.setPicture(request.data.picture));
 
 						this._dispatch(requestActions.notify(

app/lib/components/Chat/MessageList.jsx

@@ -50,8 +50,8 @@ class MessageList extends Component
 					{
 						const messageTime = new Date(message.time);
 
-						const picture = message.sender === 'response' ?
+						const picture = (message.sender === 'response' ?
-							message.picture : this.props.myPicture;
+							message.picture : this.props.myPicture) || 'resources/images/avatar-empty.jpeg';
 
 						return (
 							<div className='message' key={i}>

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>

app/lib/redux/reducers/peers.js

@@ -1,6 +1,6 @@
 import omit from 'lodash/omit';
 
-const peer = (state, action) =>
+const peer = (state = {}, action) =>
 {
 	switch (action.type) 
 	{
@@ -36,6 +36,11 @@ const peer = (state, action) =>
 			return { ...state, consumers };
 		}
 
+		case 'SET_PEER_PICTURE':
+		{
+			return { ...state, picture: action.payload.picture };
+		}
+
 		default:
 			return state;
 	}
@@ -60,6 +65,7 @@ const peers = (state = {}, action) =>
 		case 'SET_PEER_AUDIO_IN_PROGRESS':
 		case 'SET_PEER_SCREEN_IN_PROGRESS':
 		case 'SET_PEER_RAISE_HAND_STATE':
+		case 'SET_PEER_PICTURE':
 		case 'ADD_CONSUMER':
 		{
 			const oldPeer = state[action.payload.peerName];

app/lib/redux/stateActions.js

@@ -424,3 +424,9 @@ export const setPicture = (picture) =>
 		type    : 'SET_PICTURE',
 		payload : { picture }
 	});
+
+export const setPeerPicture = (peerName, picture) =>
+	({
+		type    : 'SET_PEER_PICTURE',
+		payload : { peerName, picture }
+	});

app/stylus/components/ParticipantList.styl

@@ -15,6 +15,8 @@
 }
 
 [data-component='ListPeer'] {
+	display: flex;
+
 	> .controls {
 		float: right;
 		display: flex;
@@ -110,23 +112,16 @@
 	}
 
 	> .avatar {
-		padding: 8px 16px;
+    border-radius: 50%;
-		float: left;
+    height: 2rem;
-		width: auto;
-		border: none;
-		display: block;
-		outline: 0;
-		border-radius: 50%;
-		vertical-align: middle;
 	}
 
 	> .peer-info {
-		font-size: 1.4vmin;
+    font-size: 1.4vmin;
-		float: left;
+    border: none;
-		width: auto;
+    display: flex;
-		border: none;
+    padding: 0.6vmin;
-		display: block;
+    flex-grow: 1;
-		outline: 0;
+    align-items: center;
-		padding: 0.6vmin;
 	}
 }