From c416d0c4028ce86d70110dc909ecfe6035f5bc9f Mon Sep 17 00:00:00 2001 From: Torjus Date: Wed, 18 Jul 2018 12:00:55 +0200 Subject: [PATCH] Add images to chat --- app/lib/RoomClient.js | 7 +- app/lib/components/Chat/Chat.jsx | 12 +- app/lib/components/Chat/MessageList.jsx | 8 +- app/lib/redux/reducers/chatmessages.js | 4 +- app/lib/redux/reducers/helper.js | 7 +- app/lib/redux/reducers/me.js | 8 +- app/lib/redux/reducers/peers.js | 150 +++++++++--------------- app/lib/redux/requestActions.js | 4 +- app/lib/redux/stateActions.js | 6 + 9 files changed, 94 insertions(+), 112 deletions(-) diff --git a/app/lib/RoomClient.js b/app/lib/RoomClient.js index 93ac56a..12bd07c 100644 --- a/app/lib/RoomClient.js +++ b/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; } diff --git a/app/lib/components/Chat/Chat.jsx b/app/lib/components/Chat/Chat.jsx index e678a3d..7b31245 100644 --- a/app/lib/components/Chat/Chat.jsx +++ b/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
{ onSendMessage(e, displayName); }} + onSubmit={(e) => { onSendMessage(e, displayName, picture); }} > { 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 = ''; } diff --git a/app/lib/components/Chat/MessageList.jsx b/app/lib/components/Chat/MessageList.jsx index d0bbf7b..22fa38c 100644 --- a/app/lib/components/Chat/MessageList.jsx +++ b/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 (
+ {picture && } +
{ return { - chatmessages : state.chatmessages + chatmessages : state.chatmessages, + myPicture : state.me.picture }; }; diff --git a/app/lib/redux/reducers/chatmessages.js b/app/lib/redux/reducers/chatmessages.js index e95789e..020908e 100644 --- a/app/lib/redux/reducers/chatmessages.js +++ b/app/lib/redux/reducers/chatmessages.js @@ -3,9 +3,7 @@ import createNewMessage } from './helper'; -const initialState = []; - -const chatmessages = (state = initialState, action) => +const chatmessages = (state = [], action) => { switch (action.type) { diff --git a/app/lib/redux/reducers/helper.js b/app/lib/redux/reducers/helper.js index 1423eb1..db17859 100644 --- a/app/lib/redux/reducers/helper.js +++ b/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 }; -} +} \ No newline at end of file diff --git a/app/lib/redux/reducers/me.js b/app/lib/redux/reducers/me.js index 75e89ae..0b8db12 100644 --- a/app/lib/redux/reducers/me.js +++ b/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; } diff --git a/app/lib/redux/reducers/peers.js b/app/lib/redux/reducers/peers.js index d7174d5..884d39a 100644 --- a/app/lib/redux/reducers/peers.js +++ b/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, [peer.name]: peer }; + return { ...state, [action.payload.peer.name]: peer(undefined, action) }; } case 'REMOVE_PEER': { - const { peerName } = action.payload; - const newState = { ...state }; - - delete newState[peerName]; - - return newState; + return omit(state, [ action.payload.peerName ]); } 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 peer = state[peerName]; + const oldPeer = state[action.payload.peerName]; - if (!peer) - throw new Error('no Peer found for new Consumer'); + if (!oldPeer) + { + throw new Error('no Peer found'); + } - const newConsumers = [ ...peer.consumers, consumer.id ]; - const newPeer = { ...peer, consumers: newConsumers }; - - return { ...state, [newPeer.name]: newPeer }; + return { ...state, [oldPeer.name]: peer(oldPeer, action) }; } - + case 'REMOVE_CONSUMER': { - const { consumerId, peerName } = action.payload; - const peer = state[peerName]; + const oldPeer = state[action.payload.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); - - 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 }; + return { ...state, [oldPeer.name]: peer(oldPeer, action) }; } default: diff --git a/app/lib/redux/requestActions.js b/app/lib/redux/requestActions.js index 5d9a240..6d54490 100644 --- a/app/lib/redux/requestActions.js +++ b/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', diff --git a/app/lib/redux/stateActions.js b/app/lib/redux/stateActions.js index f9a88d4..3d4229f 100644 --- a/app/lib/redux/stateActions.js +++ b/app/lib/redux/stateActions.js @@ -418,3 +418,9 @@ export const dropMessages = () => type : 'DROP_MESSAGES' }; }; + +export const setPicture = (picture) => + ({ + type : 'SET_PICTURE', + payload : { picture } + }); \ No newline at end of file