Massive change. Changed to react-scripts (webpack) for building. Changed to material-ui where applicable. Changed to CSS-in-JS.

2019-03-29 14:12:13 +01:00
parent 36944a9ea7
commit 0449d6ff20
185 changed files with 4564 additions and 6442 deletions
@@ -0,0 +1,164 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+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) =>
+	({
+		root :
+		{
+			display        : 'flex',
+			alignItems     : 'center',
+			width          : '100%',
+			padding        : theme.spacing.unit,
+			boxShadow      : '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
+			'&:not(:last-child)' :
+			{
+				marginBottom : theme.spacing.unit
+			}
+		},
+		avatar :
+		{
+			borderRadius : '50%',
+			height       : '2rem'
+		},
+		text :
+		{
+			margin  : 0,
+			padding : theme.spacing.unit
+		},
+		fileContent :
+		{
+			display    : 'flex',
+			alignItems : 'center'
+		},
+		fileInfo :
+		{
+			display    : 'flex',
+			alignItems : 'center',
+			padding    : theme.spacing.unit
+		},
+		button :
+		{
+			marginRight : 'auto'
+		}
+	});
+
+class File extends Component
+{
+	render()
+	{
+		const {
+			roomClient,
+			torrentSupport,
+			file,
+			classes
+		} = this.props;
+
+		return (
+			<div className={classes.root}>
+				<img alt='Peer avatar' className={classes.avatar} src={file.picture || EmptyAvatar} />
+	
+				<div className={classes.fileContent}>
+					{ file.files ?
+						<Fragment>
+							<Typography className={classes.text}>
+								File finished downloading
+							</Typography>
+
+							{ file.files.map((sharedFile, i) => (
+								<div className={classes.fileInfo} key={i}>
+									<Typography className={classes.text}>
+										{sharedFile.name}
+									</Typography>
+									<Button
+										variant='contained'
+										component='span'
+										className={classes.button}
+										onClick={() =>
+										{
+											roomClient.saveFile(sharedFile);
+										}}
+									>
+										Save
+									</Button>
+								</div>
+							))}
+						</Fragment>
+						:null
+					}
+					<Typography className={classes.text}>
+						{ file.me ?
+							'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}
+							</Typography>
+							{ torrentSupport ?
+								<Button
+									variant='contained'
+									component='span'
+									className={classes.button}
+									onClick={() =>
+									{
+										roomClient.handleDownload(file.magnetUri);
+									}}
+								>
+									Download
+								</Button>
+								:
+								<Typography className={classes.text}>
+									Your browser does not support downloading files using WebTorrent.
+								</Typography>
+							}
+						</div>
+						:null
+					}
+
+					{ file.timeout ?
+						<Typography className={classes.text}>
+							If this process takes a long time, there might not be anyone seeding
+							this torrent. Try asking someone to reupload the file that you want.
+						</Typography>
+						:null
+					}
+
+					{ file.active ?
+						<progress value={file.progress} />
+						:null
+					}
+				</div>
+			</div>
+		);
+	}
+}
+
+File.propTypes = {
+	roomClient     : PropTypes.object.isRequired,
+	torrentSupport : PropTypes.bool.isRequired,
+	file           : PropTypes.object.isRequired,
+	classes        : PropTypes.object.isRequired
+};
+
+const mapStateToProps = (state, { magnetUri }) =>
+{
+	return {
+		file           : state.files[magnetUri],
+		torrentSupport : state.room.torrentSupport
+	};
+};
+
+export default withRoomContext(connect(
+	mapStateToProps
+)(withStyles(styles)(File)));