diff --git a/app/lib/RoomClient.js b/app/lib/RoomClient.js index 12bd07c..02a2fb6 100644 --- a/app/lib/RoomClient.js +++ b/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( diff --git a/app/lib/components/Chat/MessageList.jsx b/app/lib/components/Chat/MessageList.jsx index 22fa38c..b8b5099 100644 --- a/app/lib/components/Chat/MessageList.jsx +++ b/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' ? - message.picture : this.props.myPicture; + const picture = (message.sender === 'response' ? + message.picture : this.props.myPicture) || 'resources/images/avatar-empty.jpeg'; return (
diff --git a/app/lib/components/ParticipantList/ListPeer.jsx b/app/lib/components/ParticipantList/ListPeer.jsx index 2fb666c..c9f07d1 100644 --- a/app/lib/components/ParticipantList/ListPeer.jsx +++ b/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 (
- + +
{peer.displayName}
diff --git a/app/lib/redux/reducers/peers.js b/app/lib/redux/reducers/peers.js index 884d39a..e477c48 100644 --- a/app/lib/redux/reducers/peers.js +++ b/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]; diff --git a/app/lib/redux/stateActions.js b/app/lib/redux/stateActions.js index 3d4229f..fa47832 100644 --- a/app/lib/redux/stateActions.js +++ b/app/lib/redux/stateActions.js @@ -423,4 +423,10 @@ export const setPicture = (picture) => ({ type : 'SET_PICTURE', payload : { picture } + }); + +export const setPeerPicture = (peerName, picture) => + ({ + type : 'SET_PEER_PICTURE', + payload : { peerName, picture } }); \ No newline at end of file diff --git a/app/resources/images/avatar-empty.jpeg b/app/resources/images/avatar-empty.jpeg new file mode 100644 index 0000000..56c4679 Binary files /dev/null and b/app/resources/images/avatar-empty.jpeg differ diff --git a/app/stylus/components/ParticipantList.styl b/app/stylus/components/ParticipantList.styl index 1f0bd98..ddd53ba 100644 --- a/app/stylus/components/ParticipantList.styl +++ b/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; - float: left; - width: auto; - border: none; - display: block; - outline: 0; - border-radius: 50%; - vertical-align: middle; + border-radius: 50%; + height: 2rem; } > .peer-info { - font-size: 1.4vmin; - float: left; - width: auto; - border: none; - display: block; - outline: 0; - padding: 0.6vmin; + font-size: 1.4vmin; + border: none; + display: flex; + padding: 0.6vmin; + flex-grow: 1; + align-items: center; } }