Cleaned up file sharing.

app/src/RoomClient.js

@@ -566,15 +566,7 @@ export default class RoomClient
 
 			if (existingTorrent)
 			{
-				const { displayName, picture } = store.getState().settings;
+				return this._sendFile(existingTorrent.magnetURI);
-
-				const file = {
-					magnetUri : existingTorrent.magnetURI,
-					displayName,
-					picture
-				};
-
-				return this._sendFile(file);
 			}
 
 			this._webTorrent.seed(files, (newTorrent) =>
@@ -584,34 +576,24 @@ export default class RoomClient
 						text : 'File successfully shared.'
 					}));
 
-				const { displayName, picture } = store.getState().settings;
-				const file = {
-					magnetUri : newTorrent.magnetURI,
-					displayName,
-					picture
-				};
-
 				store.dispatch(stateActions.addFile(
-					{
+					this._peerId,
-						magnetUri   : file.magnetUri,
+					newTorrent.magnetURI
-						displayName : displayName,
+				));
-						picture     : picture,
-						me          : true
-					}));
 
-				this._sendFile(file);
+				this._sendFile(newTorrent.magnetURI);
 			});
 		});
 	}
 
 	// { file, name, picture }
-	async _sendFile(file)
+	async _sendFile(magnetUri)
 	{
-		logger.debug('sendFile() [file: %o]', file);
+		logger.debug('sendFile() [magnetUri: %o]', magnetUri);
 
 		try
 		{
-			await this.sendRequest('sendFile', { file });
+			await this.sendRequest('sendFile', { magnetUri });
 		}
 		catch (error)
 		{
@@ -1392,9 +1374,9 @@ export default class RoomClient
 
 				case 'sendFile':
 				{
-					const { file } = notification.data;
+					const { peerId, magnetUri } = notification.data;
 
-					store.dispatch(stateActions.addFile(file));
+					store.dispatch(stateActions.addFile(peerId, magnetUri));
 
 					store.dispatch(requestActions.notify(
 						{

app/src/actions/stateActions.js

@@ -503,11 +503,11 @@ export const dropMessages = () =>
 	};
 };
 
-export const addFile = (file) =>
+export const addFile = (peerId, magnetUri) =>
 {
 	return {
 		type    : 'ADD_FILE',
-		payload : { file }
+		payload : { peerId, magnetUri }
 	};
 };
 

app/src/components/MeetingDrawer/FileSharing/File.js

@@ -1,12 +1,12 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import * as appPropTypes from '../../appPropTypes';
 import { connect } from 'react-redux';
 import { withRoomContext } from '../../../RoomContext';
 import { withStyles } from '@material-ui/core/styles';
 import magnet from 'magnet-uri';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
-import EmptyAvatar from '../../../images/avatar-empty.jpeg';
 
 const styles = (theme) =>
 	({
@@ -55,14 +55,17 @@ class File extends React.PureComponent
 	{
 		const {
 			roomClient,
+			displayName,
+			picture,
 			canShareFiles,
+			magnetUri,
 			file,
 			classes
 		} = this.props;
 
 		return (
 			<div className={classes.root}>
-				<img alt='Peer avatar' className={classes.avatar} src={file.picture || EmptyAvatar} />
+				<img alt='Avatar' className={classes.avatar} src={picture} />
 
 				<div className={classes.fileContent}>
 					{ file.files ?
@@ -93,17 +96,13 @@ class File extends React.PureComponent
 						:null
 					}
 					<Typography className={classes.text}>
-						{ file.me ?
+						{ `${displayName} shared a file` }
-							'You shared a file'
-							:
-							`${file.displayName} shared a file`
-						}
 					</Typography>
 
 					{ !file.active && !file.files ?
 						<div className={classes.fileInfo}>
 							<Typography className={classes.text}>
-								{magnet.decode(file.magnetUri).dn}
+								{ magnet.decode(magnetUri).dn }
 							</Typography>
 							{ canShareFiles ?
 								<Button
@@ -112,7 +111,7 @@ class File extends React.PureComponent
 									className={classes.button}
 									onClick={() =>
 									{
-										roomClient.handleDownload(file.magnetUri);
+										roomClient.handleDownload(magnetUri);
 									}}
 								>
 									Download
@@ -146,6 +145,9 @@ class File extends React.PureComponent
 
 File.propTypes = {
 	roomClient    : PropTypes.object.isRequired,
+	magnetUri     : PropTypes.string.isRequired,
+	displayName   : PropTypes.string.isRequired,
+	picture       : PropTypes.string,
 	canShareFiles : PropTypes.bool.isRequired,
 	file          : PropTypes.object.isRequired,
 	classes       : PropTypes.object.isRequired
@@ -160,5 +162,16 @@ const mapStateToProps = (state, { magnetUri }) =>
 };
 
 export default withRoomContext(connect(
-	mapStateToProps
+	mapStateToProps,
+	null,
+	null,
+	{
+		areStatesEqual : (next, prev) =>
+		{
+			return (
+				prev.files === next.files &&
+				prev.me.canShareFiles === next.me.canShareFiles
+			);
+		}
+	}
 )(withStyles(styles)(File)));

app/src/components/MeetingDrawer/FileSharing/FileList.js

@@ -1,8 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import * as appPropTypes from '../../appPropTypes';
 import { withStyles } from '@material-ui/core/styles';
 import File from './File';
+import EmptyAvatar from '../../../images/avatar-empty.jpeg';
 
 const styles = (theme) =>
 	({
@@ -42,14 +44,44 @@ class FileList extends React.PureComponent
 	{
 		const {
 			files,
+			me,
+			picture,
+			peers,
 			classes
 		} = this.props;
 
 		return (
 			<div className={classes.root} ref={(node) => { this.node = node; }}>
-				{ Object.keys(files).map((magnetUri) =>
+				{ Object.entries(files).map(([ magnetUri, file ]) =>
-					<File key={magnetUri} magnetUri={magnetUri} />
+				{
-				)}
+					let displayName;
+
+					let filePicture;
+
+					if (me.id === file.peerId)
+					{
+						displayName = 'You';
+						filePicture = picture;
+					}
+					else if (peers[file.peerId])
+					{
+						displayName = peers[file.peerId].displayName;
+						filePicture = peers[file.peerId].picture;
+					}
+					else
+					{
+						displayName = 'Unknown';
+					}
+
+					return (
+						<File
+							key={magnetUri}
+							magnetUri={magnetUri}
+							displayName={displayName}
+							picture={filePicture || EmptyAvatar}
+						/>
+					);
+				})}
 			</div>
 		);
 	}
@@ -58,14 +90,35 @@ class FileList extends React.PureComponent
 FileList.propTypes =
 {
 	files   : PropTypes.object.isRequired,
+	me      : appPropTypes.Me.isRequired,
+	picture : PropTypes.string,
+	peers   : PropTypes.object.isRequired,
 	classes : PropTypes.object.isRequired
 };
 
 const mapStateToProps = (state) =>
 {
 	return {
-		files : state.files
+		files   : state.files,
+		me      : state.me,
+		picture : state.settings.picture,
+		peers   : state.peers
 	};
 };
 
-export default connect(mapStateToProps)(withStyles(styles)(FileList));
+export default connect(
+	mapStateToProps,
+	null,
+	null,
+	{
+		areStatesEqual : (next, prev) =>
+		{
+			return (
+				prev.files === next.files &&
+				prev.me === next.me &&
+				prev.settings.picture === next.settings.picture &&
+				prev.peers === next.peers
+			);
+		}
+	}
+)(withStyles(styles)(FileList));

app/src/reducers/files.js

@@ -4,17 +4,17 @@ const files = (state = {}, action) =>
 	{
 		case 'ADD_FILE':
 		{
-			const { file } = action.payload;
+			const { peerId, magnetUri } = action.payload;
 
 			const newFile = {
 				active    : false,
 				progress  : 0,
 				files     : null,
-				me       : false,
+				peerId    : peerId,
-				...file
+				magnetUri : magnetUri
 			};
 
-			return { ...state, [file.magnetUri]: newFile };
+			return { ...state, [magnetUri]: newFile };
 		}
 
 		case 'ADD_FILE_HISTORY':
@@ -30,7 +30,6 @@ const files = (state = {}, action) =>
 					active   : false,
 					progress : 0,
 					files    : null,
-					me       : false,
 					...file
 				};
 

server/lib/Room.js

@@ -435,7 +435,7 @@ class Room extends EventEmitter
 
 				await transport.connect({ dtlsParameters });
 
-				cb(null);
+				cb();
 
 				break;
 			}
@@ -537,7 +537,7 @@ class Room extends EventEmitter
 				// Remove from its map.
 				peer.data.producers.delete(producer.id);
 
-				cb(null);
+				cb();
 
 				break;
 			}
@@ -556,7 +556,7 @@ class Room extends EventEmitter
 
 				await producer.pause();
 
-				cb(null);
+				cb();
 
 				break;
 			}
@@ -575,7 +575,7 @@ class Room extends EventEmitter
 
 				await producer.resume();
 
-				cb(null);
+				cb();
 
 				break;
 			}
@@ -594,7 +594,7 @@ class Room extends EventEmitter
 
 				await consumer.pause();
 
-				cb(null);
+				cb();
 
 				break;
 			}
@@ -613,7 +613,7 @@ class Room extends EventEmitter
 
 				await consumer.resume();
 
-				cb(null);
+				cb();
 
 				break;
 			}
@@ -632,7 +632,7 @@ class Room extends EventEmitter
 
 				await consumer.setPreferredLayers({ spatialLayer, temporalLayer });
 
-				cb(null);
+				cb();
 
 				break;
 			}
@@ -651,7 +651,7 @@ class Room extends EventEmitter
 
 				await consumer.requestKeyFrame();
 
-				cb(null);
+				cb();
 
 				break;
 			}
@@ -720,7 +720,7 @@ class Room extends EventEmitter
 				}, true);
 
 				// Return no error
-				cb(null);
+				cb();
 
 				break;
 			}
@@ -740,7 +740,7 @@ class Room extends EventEmitter
 				}, true);
 
 				// Return no error
-				cb(null);
+				cb();
 
 				break;
 			}
@@ -758,7 +758,7 @@ class Room extends EventEmitter
 				}, true);
 
 				// Return no error
-				cb(null);
+				cb();
 
 				break;
 			}
@@ -788,7 +788,7 @@ class Room extends EventEmitter
 				}, true);
 
 				// Return no error
-				cb(null);
+				cb();
 
 				break;
 			}
@@ -803,24 +803,25 @@ class Room extends EventEmitter
 				}, true);
 
 				// Return no error
-				cb(null);
+				cb();
 
 				break;
 			}
 
 			case 'sendFile':
 			{
-				const { file } = request.data;
+				const { magnetUri } = request.data;
 	
-				this._fileHistory.push(file);
+				this._fileHistory.push({ peerId: peer.id, magnetUri: magnetUri });
 
 				// Spread to others
 				this._notification(peer.socket, 'sendFile', {
-					file   : file
+					peerId    : peer.id,
+					magnetUri : magnetUri
 				}, true);
 
 				// Return no error
-				cb(null);
+				cb();
 
 				break;
 			}
@@ -838,7 +839,7 @@ class Room extends EventEmitter
 				}, true);
 
 				// Return no error
-				cb(null);
+				cb();
 
 				break;
 			}