Add images to chat

app/lib/RoomClient.js

@@ -1051,7 +1051,7 @@ export default class RoomClient
 					break;
 				}
 
-				// This means: server wants to change MY displayName
+				// This means: server wants to change MY user information
 				case 'auth':
 				{
 					logger.debug('got auth event from server', request.data);
@@ -1060,6 +1060,9 @@ export default class RoomClient
 					if (request.data.verified == true)
 					{
 						this.changeDisplayName(request.data.name);
+
+						this._dispatch(stateActions.setPicture(request.data.picture));
+
 						this._dispatch(requestActions.notify(
 							{
 								text : `Authenticated successfully: ${request.data}`
@@ -1102,7 +1105,7 @@ export default class RoomClient
 					logger.debug('Got chat from "%s"', peerName);
 
 					this._dispatch(
-						stateActions.addResponseMessage(chatMessage));
+						stateActions.addResponseMessage({ ...chatMessage, peerName }));
 
 					break;
 				}

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'
@@ -59,14 +60,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 +76,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,9 +50,14 @@ class MessageList extends Component
 					{
 						const messageTime = new Date(message.time);
 
+						const picture = message.sender === 'response' ?
+							message.picture : this.props.myPicture;
+
 						return (
 							<div className='message' key={i}>
 								<div className={message.sender}>
+									{picture && <img src={picture} />}
+
 									<div
 										className='message-text'
 										// eslint-disable-next-line react/no-danger
@@ -82,7 +87,8 @@ MessageList.propTypes =
 const mapStateToProps = (state) =>
 {
 	return {
-		chatmessages : state.chatmessages
+		chatmessages : state.chatmessages,
+		myPicture    : state.me.picture
 	};
 };
 

app/lib/redux/reducers/chatmessages.js

@@ -3,9 +3,7 @@ import
 	createNewMessage
 } from './helper';
 
-const initialState = [];
+const chatmessages = (state = [], action) =>
-
-const chatmessages = (state = initialState, action) =>
 {
 	switch (action.type)
 	{

app/lib/redux/reducers/helper.js

@@ -1,10 +1,11 @@
-export function createNewMessage(text, sender, name)
+export function createNewMessage(text, sender, name, picture)
 {
 	return {
 		type : 'message',
 		text,
 		time : Date.now(),
 		name,
-		sender
+		sender,
+		picture
 	};
 }

app/lib/redux/reducers/me.js

@@ -21,7 +21,8 @@ const initialState =
 	audioOnlyInProgress   : false,
 	raiseHand             : false,
 	raiseHandInProgress   : false,
-	restartIceInProgress  : false
+	restartIceInProgress  : false,
+	picture               : null
 };
 
 const me = (state = initialState, action) =>
@@ -164,6 +165,11 @@ const me = (state = initialState, action) =>
 			return { ...state, restartIceInProgress: flag };
 		}
 
+		case 'SET_PICTURE':
+		{
+			return { ...state, picture: action.payload.picture };
+		}
+
 		default:
 			return state;
 	}

app/lib/redux/reducers/peers.js

@@ -1,126 +1,86 @@
-const initialState = {};
+import omit from 'lodash/omit';
 
-const peers = (state = initialState, action) =>
+const peer = (state, action) =>
+{
+	switch (action.type) 
+	{
+		case 'ADD_PEER':
+			return action.payload.peer;
+
+		case 'SET_PEER_DISPLAY_NAME':
+			return { ...state, displayName: action.payload.displayName };
+
+		case 'SET_PEER_VIDEO_IN_PROGRESS':
+			return { ...state, peerVideoInProgress: action.payload.flag };
+
+		case 'SET_PEER_AUDIO_IN_PROGRESS':
+			return { ...state, peerAudioInProgress: action.payload.flag };
+
+		case 'SET_PEER_SCREEN_IN_PROGRESS':
+			return { ...state, peerScreenInProgress: action.payload.flag };
+		
+		case 'SET_PEER_RAISE_HAND_STATE':
+			return { ...state, raiseHandState: action.payload.raiseHandState };
+		
+		case 'ADD_CONSUMER':
+		{
+			const consumers = [ ...state.consumers, action.payload.consumer.id ];
+
+			return { ...state, consumers };
+		}
+
+		case 'REMOVE_CONSUMER':
+		{
+			const consumers = state.consumers.filter((consumer) => consumer !== action.payload.consumerId);
+
+			return { ...state, consumers };
+		}
+
+		default:
+			return state;
+	}
+};
+
+const peers = (state = {}, action) =>
 {
 	switch (action.type)
 	{
 		case 'ADD_PEER':
 		{
-			const { peer } = action.payload;
+			return { ...state, [action.payload.peer.name]: peer(undefined, action) };
-
-			return { ...state, [peer.name]: peer };
 		}
 
 		case 'REMOVE_PEER':
 		{
-			const { peerName } = action.payload;
+			return omit(state, [ action.payload.peerName ]);
-			const newState = { ...state };
-
-			delete newState[peerName];
-
-			return newState;
 		}
 
 		case 'SET_PEER_DISPLAY_NAME':
-		{
-			const { displayName, peerName } = action.payload;
-			const peer = state[peerName];
-
-			if (!peer)
-				throw new Error('no Peer found');
-
-			const newPeer = { ...peer, displayName };
-
-			return { ...state, [newPeer.name]: newPeer };
-		}
-
 		case 'SET_PEER_VIDEO_IN_PROGRESS':
-		{
-			const { peerName, flag } = action.payload;
-			const peer = state[peerName];
-
-			if (!peer)
-				throw new Error('no Peer found');
-
-			const newPeer = { ...peer, peerVideoInProgress: flag };
-
-			return { ...state, [newPeer.name]: newPeer };
-		}
-
 		case 'SET_PEER_AUDIO_IN_PROGRESS':
-		{
-			const { peerName, flag } = action.payload;
-			const peer = state[peerName];
-
-			if (!peer)
-				throw new Error('no Peer found');
-
-			const newPeer = { ...peer, peerAudioInProgress: flag };
-
-			return { ...state, [newPeer.name]: newPeer };
-		}
-
 		case 'SET_PEER_SCREEN_IN_PROGRESS':
-		{
-			const { peerName, flag } = action.payload;
-			const peer = state[peerName];
-
-			if (!peer)
-				throw new Error('no Peer found');
-
-			const newPeer = { ...peer, peerScreenInProgress: flag };
-
-			return { ...state, [newPeer.name]: newPeer };
-		}
-
 		case 'SET_PEER_RAISE_HAND_STATE':
-		{
-			const { peerName, raiseHandState } = action.payload;
-			const peer = state[peerName];
-
-			if (!peer)
-				throw new Error('no Peer found');
-
-			const newPeer = { ...peer, raiseHandState };
-
-			return { ...state, [newPeer.name]: newPeer };
-		}
-
 		case 'ADD_CONSUMER':
 		{
-			const { consumer, peerName } = action.payload;
+			const oldPeer = state[action.payload.peerName];
-			const peer = state[peerName];
 
-			if (!peer)
+			if (!oldPeer) 
-				throw new Error('no Peer found for new Consumer');
+			{
+				throw new Error('no Peer found');
+			}
 
-			const newConsumers = [ ...peer.consumers, consumer.id ];
+			return { ...state, [oldPeer.name]: peer(oldPeer, action) };
-			const newPeer = { ...peer, consumers: newConsumers };
-
-			return { ...state, [newPeer.name]: newPeer };
 		}
 		
 		case 'REMOVE_CONSUMER':
 		{
-			const { consumerId, peerName } = action.payload;
+			const oldPeer = state[action.payload.peerName];
-			const peer = state[peerName];
 
 			// NOTE: This means that the Peer was closed before, so it's ok.
-			if (!peer)
+			if (!oldPeer)
 				return state;
 
-			const idx = peer.consumers.indexOf(consumerId);
+			return { ...state, [oldPeer.name]: peer(oldPeer, action) };
-
-			if (idx === -1)
-				throw new Error('Consumer not found');
-
-			const newConsumers = peer.consumers.slice();
-
-			newConsumers.splice(idx, 1);
-
-			const newPeer = { ...peer, consumers: newConsumers };
-
-			return { ...state, [newPeer.name]: newPeer };
 		}
 
 		default:

app/lib/redux/requestActions.js

@@ -184,9 +184,9 @@ export const installExtension = () =>
 	};
 };
 
-export const sendChatMessage = (text, name) =>
+export const sendChatMessage = (text, name, picture) =>
 {
-	const message = createNewMessage(text, 'response', name);
+	const message = createNewMessage(text, 'response', name, picture);
 
 	return {
 		type    : 'SEND_CHAT_MESSAGE',

app/lib/redux/stateActions.js

@@ -418,3 +418,9 @@ export const dropMessages = () =>
 		type : 'DROP_MESSAGES'
 	};
 };
+
+export const setPicture = (picture) =>
+	({
+		type    : 'SET_PICTURE',
+		payload : { picture }
+	});