Move file sharing into a separate tab
This commit is contained in:
Torjus
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
|
||||
import * as stateActions from '../../redux/stateActions';
|
||||
import * as requestActions from '../../redux/requestActions';
|
||||
import MessageList from './MessageList';
|
||||
import FileSharing from './FileSharing';
|
||||
|
||||
class Chat extends Component
|
||||
{
|
||||
@@ -27,8 +26,6 @@ class Chat extends Component
|
||||
data-component='Sender'
|
||||
onSubmit={(e) => { onSendMessage(e, displayName, picture); }}
|
||||
>
|
||||
<FileSharing />
|
||||
|
||||
<input
|
||||
type='text'
|
||||
className='new-message'
|
||||
|
||||
@@ -1,150 +0,0 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import magnet from 'magnet-uri';
|
||||
import * as requestActions from '../../redux/requestActions';
|
||||
import { saveAs } from 'file-saver/FileSaver';
|
||||
import { client } from './FileSharing';
|
||||
|
||||
class FileChatEntry extends Component
|
||||
{
|
||||
state = {
|
||||
active : false,
|
||||
numPeers : 0,
|
||||
progress : 0,
|
||||
files : null
|
||||
};
|
||||
|
||||
saveFile = (file) =>
|
||||
{
|
||||
file.getBlob((err, blob) =>
|
||||
{
|
||||
if (err)
|
||||
{
|
||||
return this.props.notify({
|
||||
text : 'An error occurred while saving a file'
|
||||
});
|
||||
}
|
||||
|
||||
saveAs(blob, file.name);
|
||||
});
|
||||
};
|
||||
|
||||
handleTorrent = (torrent) =>
|
||||
{
|
||||
// Torrent already done, this can happen if the
|
||||
// same file was sent multiple times.
|
||||
if (torrent.progress === 1)
|
||||
{
|
||||
this.setState({
|
||||
files : torrent.files,
|
||||
numPeers : torrent.numPeers,
|
||||
progress : 1,
|
||||
active : false
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const onProgress = () =>
|
||||
{
|
||||
this.setState({
|
||||
numPeers : torrent.numPeers,
|
||||
progress : torrent.progress
|
||||
});
|
||||
};
|
||||
|
||||
onProgress();
|
||||
|
||||
setInterval(onProgress, 500);
|
||||
|
||||
torrent.on('done', () =>
|
||||
{
|
||||
onProgress();
|
||||
clearInterval(onProgress);
|
||||
|
||||
this.setState({
|
||||
files : torrent.files,
|
||||
active : false
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
download = () =>
|
||||
{
|
||||
this.setState({
|
||||
active : true
|
||||
});
|
||||
|
||||
const magnet = this.props.message.file.magnet;
|
||||
|
||||
const existingTorrent = client.get(magnet);
|
||||
|
||||
if (existingTorrent)
|
||||
{
|
||||
// Never add duplicate torrents, use the existing one instead.
|
||||
return this.handleTorrent(existingTorrent);
|
||||
}
|
||||
|
||||
client.add(magnet, this.handleTorrent);
|
||||
}
|
||||
|
||||
render()
|
||||
{
|
||||
return (
|
||||
<Fragment>
|
||||
<div>
|
||||
{!this.state.active && !this.state.files && (
|
||||
<Fragment>
|
||||
{this.props.message.sender === 'client' ? (
|
||||
<p>You shared a file.</p>
|
||||
) : (
|
||||
<p>A new file was shared.</p>
|
||||
)}
|
||||
|
||||
<p>{magnet.decode(this.props.message.file.magnet).dn}</p>
|
||||
|
||||
<button onClick={this.download}>
|
||||
Download
|
||||
</button>
|
||||
</Fragment>
|
||||
)}
|
||||
|
||||
{this.state.active && this.state.numPeers === 0 && (
|
||||
<div>
|
||||
Locating peers
|
||||
</div>
|
||||
)}
|
||||
|
||||
{this.state.active && this.state.numPeers > 0 && (
|
||||
<progress value={this.state.progress} />
|
||||
)}
|
||||
|
||||
{this.state.files && (
|
||||
<div>
|
||||
<p>Torrent finished downloading.</p>
|
||||
|
||||
{this.state.files.map((file, i) => (
|
||||
<div key={i}>
|
||||
{file.name}
|
||||
|
||||
<button onClick={() => this.saveFile(file)}>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = {
|
||||
notify : requestActions.notify
|
||||
};
|
||||
|
||||
export default connect(
|
||||
undefined,
|
||||
mapDispatchToProps
|
||||
)(FileChatEntry);
|
||||
@@ -1,120 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import WebTorrent from 'webtorrent';
|
||||
import createTorrent from 'create-torrent';
|
||||
import dragDrop from 'drag-drop';
|
||||
import randomString from 'random-string';
|
||||
import * as stateActions from '../../redux/stateActions';
|
||||
import * as requestActions from '../../redux/requestActions';
|
||||
import { store } from '../../store';
|
||||
import config from '../../../config';
|
||||
|
||||
export const client = new WebTorrent({
|
||||
tracker : {
|
||||
rtcConfig : {
|
||||
iceServers : config.turnServers
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const notifyPeers = (file) =>
|
||||
{
|
||||
const { displayName, picture } = store.getState().me;
|
||||
|
||||
store.dispatch(stateActions.addUserFile(file));
|
||||
store.dispatch(requestActions.sendChatFile(file, displayName, picture));
|
||||
};
|
||||
|
||||
const shareFiles = async(files) =>
|
||||
{
|
||||
const notification =
|
||||
{
|
||||
id : randomString({ length: 6 }).toLowerCase(),
|
||||
text : 'Creating torrent',
|
||||
type : 'info'
|
||||
};
|
||||
|
||||
store.dispatch(stateActions.addNotification(notification));
|
||||
|
||||
createTorrent(files, (err, torrent) =>
|
||||
{
|
||||
if (err)
|
||||
{
|
||||
return store.dispatch(requestActions.notify({
|
||||
text : 'An error occured while uploading a file'
|
||||
}));
|
||||
}
|
||||
|
||||
const existingTorrent = client.get(torrent);
|
||||
|
||||
if (existingTorrent)
|
||||
{
|
||||
return notifyPeers({
|
||||
magnet : existingTorrent.magnetURI
|
||||
});
|
||||
}
|
||||
|
||||
client.seed(files, (newTorrent) =>
|
||||
{
|
||||
store.dispatch(stateActions.removeNotification(notification.id));
|
||||
|
||||
store.dispatch(requestActions.notify({
|
||||
text : 'Torrent successfully created'
|
||||
}));
|
||||
|
||||
notifyPeers({
|
||||
magnet : newTorrent.magnetURI
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
dragDrop('body', async(files) => await shareFiles(files));
|
||||
|
||||
class FileSharing extends Component
|
||||
{
|
||||
constructor(props)
|
||||
{
|
||||
super(props);
|
||||
|
||||
this.fileInput = React.createRef();
|
||||
}
|
||||
|
||||
handleFileChange = async(event) =>
|
||||
{
|
||||
if (event.target.files.length > 0)
|
||||
{
|
||||
await shareFiles(event.target.files);
|
||||
}
|
||||
};
|
||||
|
||||
handleClick = () =>
|
||||
{
|
||||
// We want to open the file dialog when we click a button
|
||||
// instead of actually rendering the input element itself.
|
||||
this.fileInput.current.click();
|
||||
};
|
||||
|
||||
render()
|
||||
{
|
||||
return (
|
||||
<div>
|
||||
<input
|
||||
style={{ display: 'none' }}
|
||||
ref={this.fileInput}
|
||||
type='file'
|
||||
onChange={this.handleFileChange}
|
||||
multiple
|
||||
/>
|
||||
|
||||
<button
|
||||
type='button'
|
||||
onClick={this.handleClick}
|
||||
>
|
||||
share file
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default FileSharing;
|
||||
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import marked from 'marked';
|
||||
import { connect } from 'react-redux';
|
||||
import FileChatEntry from './FileChatEntry';
|
||||
|
||||
const scrollToBottom = () =>
|
||||
{
|
||||
@@ -60,20 +59,14 @@ class MessageList extends Component
|
||||
<img className='message-avatar' src={picture} />
|
||||
|
||||
<div className='message-content'>
|
||||
{message.type === 'message' && (
|
||||
<div
|
||||
className='message-text'
|
||||
// eslint-disable-next-line react/no-danger
|
||||
dangerouslySetInnerHTML={{ __html : marked.parse(
|
||||
message.text,
|
||||
{ sanitize: true, renderer: linkRenderer }
|
||||
) }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{message.type === 'file' && (
|
||||
<FileChatEntry message={message} />
|
||||
)}
|
||||
<div
|
||||
className='message-text'
|
||||
// eslint-disable-next-line react/no-danger
|
||||
dangerouslySetInnerHTML={{ __html : marked.parse(
|
||||
message.text,
|
||||
{ sanitize: true, renderer: linkRenderer }
|
||||
) }}
|
||||
/>
|
||||
|
||||
<span className='message-time'>
|
||||
{message.name} - {this.getTimeString(messageTime)}
|
||||
|
||||
Reference in New Issue
Block a user