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

Add notification when Blob converting fails

master
Torjus 2018-07-27 11:06:42 +02:00
parent 734bb1eb0a
commit 088f3ccc7c
5 changed files with 122 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
app/lib/components/Chat/FileChatEntry.jsx
View File

@ -1,90 +1,102 @@
import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import { notifyAction } from '../../redux/stateActions';
import { saveAs } from 'file-saver/FileSaver';
import { client } from './FileSharing';
const saveFile = (file) =>
{
file.getBlob((err, blob) =>
{
if (err)
{
console.error('WebTorrent error');
return;
}
console.log('TRYING TO SAVE BLOB', blob)
saveAs(blob, file.name);
});
};
class FileChatEntry extends Component
{
state = {
active: false,
numPeers: 0,
progress: 0,
files: null
};
state = {
active : false,
numPeers : 0,
progress : 0,
files : null
};
download = () =>
{
this.setState({
active: true
});
saveFile = (file) =>
{
file.getBlob((err, blob) =>
{
if (err)
{
return this.props.notify({
text : 'An error occurred while saving a file'
});
}
saveAs(blob, file.name);
});
};
client.add(this.props.message.file.magnet, (torrent) =>
{
const onProgress = () =>
{
this.setState({
numPeers: torrent.numPeers,
progress: Math.round(torrent.progress * 100 * 100) / 100
});
};
download = () =>
{
this.setState({
active : true
});
setInterval(onProgress, 500);
onProgress();
client.add(this.props.message.file.magnet, (torrent) =>
{
const onProgress = () =>
{
this.setState({
numPeers : torrent.numPeers,
progress : Math.round(torrent.progress * 100 * 100) / 100
});
};
torrent.on('done', () => {
onProgress();
clearInterval(onProgress);
setInterval(onProgress, 500);
onProgress();
this.setState({
files: torrent.files
});
});
});
}
torrent.on('done', () =>
{
onProgress();
clearInterval(onProgress);
render()
{
return (
<Fragment>
<div>
<button onClick={this.download}>
append shared file to body
</button>
this.setState({
files : torrent.files
});
});
});
}
{this.state.active && (
<div>
peers: {this.state.numPeers}
progress: {this.state.progress}
</div>
)}
render()
{
return (
<Fragment>
<div>
<button onClick={this.download}>
append shared file to body
</button>
{this.state.files && (
<div>
{this.state.files.map((file, i) => (
<div key={i}>
<button onClick={() => saveFile(file)}>download {file.name}</button>
</div>
))}
</div>
)}
</div>
</Fragment>
);
}
{this.state.active && (
<div>
peers: {this.state.numPeers}
progress: {this.state.progress}
</div>
)}
{this.state.files && (
<div>
{this.state.files.map((file, i) => (
<div key={i}>
<button onClick={() => this.saveFile(file)}>
download {file.name}
</button>
</div>
))}
</div>
)}
</div>
</Fragment>
);
}
}
export default FileChatEntry;
const mapDispatchToProps = {
notify : notifyAction
};
export default connect(
undefined,
mapDispatchToProps
)(FileChatEntry);

58
app/lib/components/Chat/FileSharing.jsx
View File

@ -1,51 +1,53 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import WebTorrent from 'webtorrent';
import dragDrop from 'drag-drop';
import * as stateActions from '../../redux/stateActions';
import * as requestActions from '../../redux/requestActions';
import { store } from '../../store';
import { store } from '../../store';
export const client = new WebTorrent();
const notifyPeers = (file) =>
{
const { displayName, picture } = store.getState().me;
store.dispatch(stateActions.addUserFile(file));
store.dispatch(requestActions.sendChatFile(file, displayName, picture));
const { displayName, picture } = store.getState().me;
store.dispatch(stateActions.addUserFile(file));
store.dispatch(requestActions.sendChatFile(file, displayName, picture));
};
const shareFiles = (files) =>
{
client.seed(files, (torrent) => {
notifyPeers({
magnet: torrent.magnetURI
});
});
client.seed(files, (torrent) =>
{
notifyPeers({
magnet : torrent.magnetURI
});
});
};
dragDrop('body', shareFiles);
class FileSharing extends Component {
constructor(props)
{
super(props);
}
class FileSharing extends Component
{
constructor(props)
{
super(props);
}
handleFileChange = (event) =>
{
if (event.target.files.length > 0)
{
shareFiles(event.target.files);
}
};
handleFileChange = (event) =>
{
if (event.target.files.length > 0)
{
shareFiles(event.target.files);
}
};
render()
{
return (
<input type="file" onChange={this.handleFileChange} />
);
}
render()
{
return (
<input type='file' onChange={this.handleFileChange} />
);
}
}
export default FileSharing;

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

@ -13,9 +13,9 @@ export function createNewMessage(text, sender, name, picture)
export function createNewFile(file, sender, name, picture)
{
return {
type: 'file',
type : 'file',
file,
time: Date.now(),
time : Date.now(),
name,
sender,
picture

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

@ -219,8 +219,8 @@ export const sendChatFile = (magnet, name, picture) =>
const message = createNewFile(magnet, 'response', name, picture);
return {
type: 'SEND_CHAT_MESSAGE',
payload: { message }
type : 'SEND_CHAT_MESSAGE',
payload : { message }
};
};

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

@ -413,8 +413,8 @@ export const addUserMessage = (text) =>
export const addUserFile = (file) =>
{
return {
type: 'ADD_NEW_USER_FILE',
payload: { file }
type : 'ADD_NEW_USER_FILE',
payload : { file }
};
};