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

Add file select input in addition to drag n drop

master
Torjus 2018-07-27 10:47:49 +02:00
parent 8129cc0753
commit 734bb1eb0a
6 changed files with 87 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/lib/components/Chat/Chat.jsx
View File

@ -5,17 +5,9 @@ import * as stateActions from '../../redux/stateActions';
import * as requestActions from '../../redux/requestActions';
import MessageList from './MessageList';
import FileSharing from './FileSharing';
import WebTorrent from 'webtorrent';
class Chat extends Component
{
constructor(props)
{
super(props);
this.client = new WebTorrent();
}
render()
{
const {
@ -29,9 +21,9 @@ class Chat extends Component
return (
<div data-component='Chat'>
<MessageList client={this.client} />
<MessageList />
<FileSharing client={this.client} />
<FileSharing />
<form
data-component='Sender'

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

@ -1,6 +1,6 @@
import React, { Component, Fragment } from 'react';
import WebTorrent from 'webtorrent';
import { saveAs } from 'file-saver/FileSaver';
import { client } from './FileSharing';
const saveFile = (file) =>
{
@ -32,7 +32,7 @@ class FileChatEntry extends Component
active: true
});
this.props.client.add(this.props.message.file.magnet, (torrent) =>
client.add(this.props.message.file.magnet, (torrent) =>
{
const onProgress = () =>
{

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

@ -4,55 +4,48 @@ 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';
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 shareFiles = (files) =>
{
client.seed(files, (torrent) => {
notifyPeers({
magnet: torrent.magnetURI
});
});
};
dragDrop('body', shareFiles);
class FileSharing extends Component {
notifyPeers = (file) =>
constructor(props)
{
this.props.notifyPeers(
file,
this.props.displayName,
this.props.picture
);
};
componentDidMount()
{
dragDrop('body', (files) =>
{
this.props.client.seed(files, (torrent) => {
this.notifyPeers({
magnet: torrent.magnetURI
});
});
});
super(props);
}
handleFileChange = (event) =>
{
if (event.target.files.length > 0)
{
shareFiles(event.target.files);
}
};
render()
{
return (
<div>
drag & drop files to share them!!!
</div>
<input type="file" onChange={this.handleFileChange} />
);
}
}
const mapStateToProps = (state) =>
({
displayName: state.me.displayName,
picture: state.me.picture
});
const mapDispatchToProps = (dispatch) =>
({
notifyPeers: (file, displayName, picture) =>
{
dispatch(stateActions.addUserFile(file));
dispatch(requestActions.sendChatFile(file, displayName, picture));
}
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(FileSharing);
export default FileSharing;

2
app/lib/components/Chat/MessageList.jsx
View File

@ -74,7 +74,7 @@ class MessageList extends Component
)}
{message.type === 'file' && (
<FileChatEntry message={message} client={this.props.client} />
<FileChatEntry message={message} />
)}
</div>

46
app/lib/index.jsx
View File

@ -3,13 +3,6 @@ import UrlParse from 'url-parse';
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import {
applyMiddleware as applyReduxMiddleware,
createStore as createReduxStore,
compose as composeRedux
} from 'redux';
import thunk from 'redux-thunk';
import { createLogger as createReduxLogger } from 'redux-logger';
import { getDeviceInfo } from 'mediasoup-client';
import randomString from 'random-string';
import Logger from './Logger';
@ -17,48 +10,11 @@ import * as utils from './utils';
import * as cookiesManager from './cookiesManager';
import * as requestActions from './redux/requestActions';
import * as stateActions from './redux/stateActions';
import reducers from './redux/reducers';
import roomClientMiddleware from './redux/roomClientMiddleware';
import Room from './components/Room';
import { loginEnabled } from '../config';
import { store } from './store';
const logger = new Logger();
const reduxMiddlewares =
[
thunk,
roomClientMiddleware
];
if (process.env.NODE_ENV === 'development')
{
const reduxLogger = createReduxLogger(
{
duration : true,
timestamp : false,
level : 'log',
logErrors : true
});
reduxMiddlewares.push(reduxLogger);
}
const composeEnhancers =
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
// Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
}) : composeRedux;
const enhancer = composeEnhancers(
applyReduxMiddleware(...reduxMiddlewares)
// other store enhancers if any
);
const store = createReduxStore(
reducers,
undefined,
enhancer
);
domready(() =>
{

48
app/lib/store.js 100644
View File

@ -0,0 +1,48 @@
import {
applyMiddleware,
createStore,
compose
} from 'redux';
import thunk from 'redux-thunk';
import { createLogger } from 'redux-logger';
import reducers from './redux/reducers';
import roomClientMiddleware from './redux/roomClientMiddleware';
const reduxMiddlewares =
[
thunk,
roomClientMiddleware
];
if (process.env.NODE_ENV === 'development')
{
const reduxLogger = createLogger(
{
duration : true,
timestamp : false,
level : 'log',
logErrors : true
});
reduxMiddlewares.push(reduxLogger);
}
const composeEnhancers =
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
// Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
}) : compose;
const enhancer = composeEnhancers(
applyMiddleware(...reduxMiddlewares)
// other store enhancers if any
);
export const store = createStore(
reducers,
undefined,
enhancer
);
console.log(store);