From 57fba6c8edee16d0e9dea7a38fcfbcc21474a7b5 Mon Sep 17 00:00:00 2001 From: Torjus Date: Wed, 1 Aug 2018 13:06:56 +0200 Subject: [PATCH] Check if WebRTC is supported before enabling file sharing --- app/.eslintrc.js | 2 +- .../FileSharing/DragDropSharing.jsx | 8 ++++-- app/lib/components/FileSharing/FileEntry.jsx | 13 +++++++--- app/lib/components/FileSharing/index.jsx | 25 +++++++++++++------ app/package-lock.json | 23 ++++++++++++----- app/stylus/components/FileSharing.styl | 4 +++ 6 files changed, 55 insertions(+), 20 deletions(-) diff --git a/app/.eslintrc.js b/app/.eslintrc.js index 6d49fa4..6ec2ca4 100644 --- a/app/.eslintrc.js +++ b/app/.eslintrc.js @@ -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, diff --git a/app/lib/components/FileSharing/DragDropSharing.jsx b/app/lib/components/FileSharing/DragDropSharing.jsx index 9802ca6..279989c 100644 --- a/app/lib/components/FileSharing/DragDropSharing.jsx +++ b/app/lib/components/FileSharing/DragDropSharing.jsx @@ -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 = () => (
- Drop files here to share them + Drop files here to share them
); \ No newline at end of file diff --git a/app/lib/components/FileSharing/FileEntry.jsx b/app/lib/components/FileSharing/FileEntry.jsx index c0fcdb3..4319cfa 100644 --- a/app/lib/components/FileSharing/FileEntry.jsx +++ b/app/lib/components/FileSharing/FileEntry.jsx @@ -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 && (
- - - + {WebTorrent.WEBRTC_SUPPORT ? ( + + + + ) : ( +

+ Your browser does not support downloading files using WebTorrent. +

+ )}

{magnet.decode(this.props.data.file.magnet).dn}

diff --git a/app/lib/components/FileSharing/index.jsx b/app/lib/components/FileSharing/index.jsx index 398d0b8..9eafbd0 100644 --- a/app/lib/components/FileSharing/index.jsx +++ b/app/lib/components/FileSharing/index.jsx @@ -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 (
@@ -109,9 +116,11 @@ class FileSharing extends Component
- Share file + {buttonDescription}
diff --git a/app/package-lock.json b/app/package-lock.json index 2af90be..3173cc2 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -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", diff --git a/app/stylus/components/FileSharing.styl b/app/stylus/components/FileSharing.styl index dd158da..c5b9bc7 100644 --- a/app/stylus/components/FileSharing.styl +++ b/app/stylus/components/FileSharing.styl @@ -8,6 +8,10 @@ padding: 1rem; border-bottom: 5px solid #151515; border-radius: 3px 3px 0 0; + + &.disabled { + cursor: not-allowed; + } } }