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

Check if WebRTC is supported before enabling file sharing

master
Torjus 2018-08-01 13:06:56 +02:00
parent 1686e3603f
commit 57fba6c8ed
6 changed files with 55 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/.eslintrc.js
View File

@ -172,7 +172,7 @@ module.exports =
'semi': [ 2, 'always' ],
'semi-spacing': 2,
'space-before-blocks': 2,
'space-before-function-paren': [ 2, 'never' ],
'space-before-function-paren': [ 2, { anonymous: 'never', named: 'never', 'asyncArrow': 'always'}],
'space-in-parens': [ 2, 'never' ],
'spaced-comment': [ 2, 'always' ],
'strict': 2,

8
app/lib/components/FileSharing/DragDropSharing.jsx
View File

@ -1,14 +1,18 @@
import React from 'react';
import WebTorrent from 'webtorrent';
import dragDrop from 'drag-drop';
import { shareFiles } from './index';
export const configureDragDrop = () =>
{
dragDrop('body', async(files) => await shareFiles(files));
if (WebTorrent.WEBRTC_SUPPORT)
{
dragDrop('body', async (files) => await shareFiles(files));
}
};
export const HoldingOverlay = () => (
<div id='holding-overlay'>
Drop files here to share them
Drop files here to share them
</div>
);

13
app/lib/components/FileSharing/FileEntry.jsx
View File

@ -2,6 +2,7 @@ import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import magnet from 'magnet-uri';
import WebTorrent from 'webtorrent';
import * as requestActions from '../../redux/requestActions';
import { saveAs } from 'file-saver/FileSaver';
import { client } from './index';
@ -106,9 +107,15 @@ class FileEntry extends Component
{!this.state.active && !this.state.files && (
<div className='file-info'>
<span className='button' onClick={this.handleDownload}>
<img src='resources/images/download-icon.svg' />
</span>
{WebTorrent.WEBRTC_SUPPORT ? (
<span className='button' onClick={this.handleDownload}>
<img src='resources/images/download-icon.svg' />
</span>
) : (
<p>
Your browser does not support downloading files using WebTorrent.
</p>
)}
<p>{magnet.decode(this.props.data.file.magnet).dn}</p>
</div>

25
app/lib/components/FileSharing/index.jsx
View File

@ -4,13 +4,14 @@ import { connect } from 'react-redux';
import WebTorrent from 'webtorrent';
import createTorrent from 'create-torrent';
import randomString from 'random-string';
import classNames from 'classnames';
import * as stateActions from '../../redux/stateActions';
import * as requestActions from '../../redux/requestActions';
import { store } from '../../store';
import config from '../../../config';
import FileEntry, { FileEntryProps } from './FileEntry';
export const client = new WebTorrent({
export const client = WebTorrent.WEBRTC_SUPPORT && new WebTorrent({
tracker : {
rtcConfig : {
iceServers : config.turnServers
@ -25,7 +26,7 @@ const notifyPeers = (file) =>
store.dispatch(requestActions.sendFile(file, displayName, picture));
};
export const shareFiles = async(files) =>
export const shareFiles = async (files) =>
{
const notification =
{
@ -78,7 +79,7 @@ class FileSharing extends Component
this.fileInput = React.createRef();
}
handleFileChange = async(event) =>
handleFileChange = async (event) =>
{
if (event.target.files.length > 0)
{
@ -88,13 +89,19 @@ class FileSharing extends Component
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();
if (WebTorrent.WEBRTC_SUPPORT)
{
// 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()
{
const buttonDescription = WebTorrent.WEBRTC_SUPPORT ?
'Share file' : 'File sharing not supported';
return (
<div data-component='FileSharing'>
<div className='sharing-toolbar'>
@ -109,9 +116,11 @@ class FileSharing extends Component
<div
type='button'
onClick={this.handleClick}
className='share-file'
className={classNames('share-file', {
disabled : !WebTorrent.WEBRTC_SUPPORT
})}
>
<span>Share file</span>
<span>{buttonDescription}</span>
</div>
</div>

23
app/package-lock.json generated
View File

@ -4969,12 +4969,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -4989,17 +4991,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
@ -5116,7 +5121,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
@ -5128,6 +5134,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -5142,6 +5149,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -5260,7 +5268,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
@ -5272,6 +5281,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -5393,6 +5403,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",

4
app/stylus/components/FileSharing.styl
View File

@ -8,6 +8,10 @@
padding: 1rem;
border-bottom: 5px solid #151515;
border-radius: 3px 3px 0 0;
&.disabled {
cursor: not-allowed;
}
}
}