Briq
/
multiparty-meeting
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add images to chat

master
Torjus 2018-07-18 12:00:55 +02:00
parent 977ffd9d24
commit c416d0c402
9 changed files with 94 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/lib/RoomClient.js
View File

@ -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;
}

12
app/lib/components/Chat/Chat.jsx
View File

@ -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 = '';
}

8
app/lib/components/Chat/MessageList.jsx
View File

@ -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
};
};

4
app/lib/redux/reducers/chatmessages.js
View File

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

7
app/lib/redux/reducers/helper.js
View File

@ -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
};
}
}

8
app/lib/redux/reducers/me.js
View File

@ -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;
}

150
app/lib/redux/reducers/peers.js
View File

@ -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:

4
app/lib/redux/requestActions.js
View File

@ -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',

6
app/lib/redux/stateActions.js
View File

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