Check if WebRTC is supported before enabling file sharing

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,

app/lib/components/FileSharing/DragDropSharing.jsx

@@ -1,10 +1,14 @@
 import React from 'react';
+import WebTorrent from 'webtorrent';
 import dragDrop from 'drag-drop';
 import { shareFiles } from './index';
 
 export const configureDragDrop = () =>
+{
+	if (WebTorrent.WEBRTC_SUPPORT)
 	{
 		dragDrop('body', async (files) => await shareFiles(files));
+	}
 };
 
 export const HoldingOverlay = () => (

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 && (
 						<div className='file-info'>
+							{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>

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
@@ -87,14 +88,20 @@ class FileSharing extends Component
 	};
 
 	handleClick = () =>
+	{
+		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>
 

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",

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;
+			}
 		}
 	}