Merge https://github.com/kern/filepizza into localfonts

Conflicts:
	src/components/App.js

README.md

@@ -13,6 +13,10 @@ A hosted instance of FilePizza is available at [file.pizza](http://file.pizza).
 
 ## Installation
 
+The recommended way to deploy FilePizza is as a [Docker container](https://hub.docker.com/r/kern/filepizza).
+
+You can also install FilePizza via the command-line:
+
     $ npm install filepizza -g
     $ filepizza
 

package.json

@@ -34,10 +34,12 @@
   "dependencies": {
     "alt": "^0.14.4",
     "babel-cli": "^6.6.5",
+    "babel-core": "^6.14.0",
     "babel-loader": "^6.2.4",
     "babel-plugin-add-module-exports": "^0.1.2",
     "babel-plugin-transform-react-jsx": "^6.7.4",
-    "babel-preset-es2015": "^6.6.0",
+    "babel-polyfill": "^6.16.0",
+    "babel-preset-es2015": "^6.14.0",
     "babel-preset-stage-0": "^6.5.0",
     "classnames": "^1.2.0",
     "express": "^4.12.0",
@@ -56,12 +58,18 @@
     "stylus": "^0.50.0",
     "twilio": "^2.9.1",
     "webpack": "^1.12.14",
-    "webrtcsupport": "^2.1.2",
-    "webtorrent": "^0.90.3",
+    "webrtcsupport": "^2.2.0",
     "winston": "^1.0.1",
     "xkcd-password": "^1.2.0"
   },
   "devDependencies": {
+    "babel-cli": "^6.16.0",
+    "babel-core": "^6.17.0",
+    "babel-loader": "^6.2.5",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-transform-react-jsx": "^6.8.0",
+    "babel-preset-es2015": "^6.16.0",
+    "babel-preset-stage-0": "^6.16.0",
     "json-loader": "^0.5.4",
     "nodemon": "^1.4.1",
     "webpack-dev-middleware": "^1.6.1"

src/client.js

@@ -1,3 +1,4 @@
+import 'babel-polyfill'
 import React from 'react'
 import ReactRouter from 'react-router'
 import routes from './routes'

src/components/App.js

@@ -24,7 +24,7 @@ export default class App extends React.Component {
     SupportStore.listen(this._onChange)
   }
 
-  componentDidUnmount() {
+  componentWillUnmount() {
     SupportStore.unlisten(this._onChange)
   }
 
@@ -39,12 +39,11 @@ export default class App extends React.Component {
         <meta property="og:description" content="Peer-to-peer file transfers in your web browser." />
         <meta property="og:image" content="http://file.pizza/images/fb.png" />
         <title>FilePizza - Your files, delivered.</title>
-
         <link rel="stylesheet" href="/fonts/fonts.css" />
-        <link rel="stylesheet" href="/css" />
-
+        <link rel="stylesheet" href="/app.css" />
         <Bootstrap data={this.props.data} />
-        <script src="/js" />
+        <script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js" />
+        <script src="/app.js" />
 
       </FrozenHead>
 

src/components/ChromeNotice.js

@@ -4,7 +4,7 @@ import SupportStore from '../stores/SupportStore'
 
 function getState() {
   return {
-    active: SupportStore.getState().isChrome && DownloadStore.getState().fileSize >= 500000000 
+    active: SupportStore.getState().isChrome && DownloadStore.getState().fileSize >= 500000000
   }
 }
 
@@ -24,7 +24,7 @@ export default class ChromeNotice extends React.Component {
     SupportStore.listen(this._onChange)
   }
 
-  componentDidUnmount() {
+  componentWillUnmount() {
     DownloadStore.unlisten(this._onChange)
     SupportStore.unlisten(this._onChange)
   }

src/components/DownloadButton.js

@@ -1,6 +1,10 @@
 import React from 'react'
 
 export default class DownloadButton extends React.Component {
+  constructor() {
+    super()
+    this.onClick = this.onClick.bind(this)
+  }
 
   onClick(e) {
     this.props.onClick(e)
@@ -9,7 +13,7 @@ export default class DownloadButton extends React.Component {
   render() {
     return <button
       className="download-button"
-      onClick={this.onClick.bind(this)}>
+      onClick={this.onClick}>
       Download
     </button>
   }

src/components/DownloadPage.js

@@ -17,13 +17,15 @@ export default class DownloadPage extends React.Component {
     this._onChange = () => {
       this.setState(DownloadStore.getState())
     }
+
+    this.downloadFile = this.downloadFile.bind(this)
   }
 
   componentDidMount() {
     DownloadStore.listen(this._onChange)
   }
 
-  componentDidUnmount() {
+  componentWillUnmount() {
     DownloadStore.unlisten(this._onChange)
   }
 
@@ -43,7 +45,7 @@ export default class DownloadPage extends React.Component {
 
           <ChromeNotice />
           <p className="notice">Peers: {this.state.peers} &middot; Up: {formatSize(this.state.speedUp)} &middot; Down: {formatSize(this.state.speedDown)}</p>
-          <DownloadButton onClick={this.downloadFile.bind(this)} />
+          <DownloadButton onClick={this.downloadFile} />
 
         </div>
 

src/components/DropZone.js

@@ -5,6 +5,11 @@ export default class DropZone extends React.Component {
   constructor() {
     super()
     this.state = { focus: false }
+
+    this.onDragEnter = this.onDragEnter.bind(this)
+    this.onDragLeave = this.onDragLeave.bind(this)
+    this.onDragOver = this.onDragOver.bind(this)
+    this.onDrop = this.onDrop.bind(this)
   }
 
   onDragEnter() {
@@ -31,10 +36,10 @@ export default class DropZone extends React.Component {
 
   render() {
     return <div className="drop-zone" ref="root"
-      onDragEnter={this.onDragEnter.bind(this)}
-      onDragLeave={this.onDragLeave.bind(this)}
-      onDragOver={this.onDragOver.bind(this)}
-      onDrop={this.onDrop.bind(this)}>
+      onDragEnter={this.onDragEnter}
+      onDragLeave={this.onDragLeave}
+      onDragOver={this.onDragOver}
+      onDrop={this.onDrop}>
 
       <div className="drop-zone-overlay"
         hidden={!this.state.focus}

src/components/ErrorPage.js

@@ -17,7 +17,7 @@ export default class ErrorPage extends React.Component {
     ErrorStore.listen(this._onChange)
   }
 
-  componentDidUnmount() {
+  componentWillUnmount() {
     ErrorStore.unlisten(this._onChange)
   }
 

src/components/Tempalink.js

@@ -1,6 +1,10 @@
 import React from 'react'
 
 export default class Tempalink extends React.Component {
+  constructor() {
+    super()
+    this.onClick = this.onClick.bind(this)
+  }
 
   onClick() {
     this.refs.input.getDOMNode().setSelectionRange(0, 9999)
@@ -10,7 +14,7 @@ export default class Tempalink extends React.Component {
     var url = window.location.origin + '/' + this.props.token
     return <input
       className="tempalink"
-      onClick={this.onClick.bind(this)}
+      onClick={this.onClick}
       readOnly
       ref="input"
       type="text"

src/components/UploadPage.js

@@ -12,40 +12,42 @@ export default class UploadPage extends React.Component {
   constructor() {
     super()
     this.state = UploadStore.getState()
-  
+
     this._onChange = () => {
       this.setState(UploadStore.getState())
     }
+
+    this.uploadFile = this.uploadFile.bind(this)
   }
-  
+
   componentDidMount() {
     UploadStore.listen(this._onChange)
   }
-  
-  componentDidUnmount() {
+
+  componentWillUnmount() {
     UploadStore.unlisten(this._onChange)
   }
-  
+
   uploadFile(file) {
     UploadActions.uploadFile(file)
   }
-  
+
   handleSelectedFile(event) {
     let files = event.target.files
     if (files.length > 0) {
       UploadActions.uploadFile(files[0])
     }
   }
-  
+
   render() {
     switch (this.state.status) {
       case 'ready':
-  
-        return <DropZone onDrop={this.uploadFile.bind(this)}>
+
+        return <DropZone onDrop={this.uploadFile}>
           <div className="page">
-  
+
             <Spinner dir="up" />
-  
+
             <h1>FilePizza</h1>
             <p>Free peer-to-peer file transfers in your browser.</p>
             <p>We never store anything. Files only served fresh.</p>
@@ -57,30 +59,30 @@ export default class UploadPage extends React.Component {
             </p>
           </div>
         </DropZone>
-  
+
       case 'processing':
         return <div className="page">
-  
+
           <Spinner dir="up" animated />
-  
+
           <h1>FilePizza</h1>
           <p>Processing...</p>
-  
+
         </div>
-  
+
       case 'uploading':
         return <div className="page">
-  
+
           <h1>FilePizza</h1>
           <Spinner dir="up" animated
             name={this.state.fileName}
             size={this.state.fileSize} />
-  
+
           <p>Send someone this link to download.</p>
           <p>This link will work as long as this page is open.</p>
           <p>Peers: {this.state.peers} &middot; Up: {formatSize(this.state.speedUp)}</p>
           <Tempalink token={this.state.token} />
-  
+
         </div>
     }
   }

src/components/Uploader.js

@@ -3,6 +3,10 @@ import React from 'react';
 import UploadActions from '@app/actions/UploadActions';
 
 export default class UploadPage extends React.Component {
+  constructor() {
+    super()
+    this.uploadFile = this.uploadFile.bind(this)
+  }
 
   uploadFile(file) {
     UploadActions.uploadFile(file);
@@ -12,7 +16,7 @@ export default class UploadPage extends React.Component {
     switch (this.props.status) {
       case 'ready':
         return <div>
-          <DropZone onDrop={this.uploadFile.bind(this)} />
+          <DropZone onDrop={this.uploadFile} />
           <Arrow dir="up" />
         </div>;
         break;

src/middleware/javascript.js

@@ -10,7 +10,7 @@ if (process.env.NODE_ENV === 'production') {
   const webpackMiddleware = require('webpack-dev-middleware')
   const webpack = require('webpack')
   const config = require('../../webpack.config.js')
-  config.output.filename = '/js'
+  config.output.filename = '/app.js'
   config.output.path = '/'
   module.exports = webpackMiddleware(webpack(config))
 }

src/middleware/react.js

@@ -20,6 +20,7 @@ module.exports = function (req, res) {
     var html = React.renderToString(<Handler data={alt.takeSnapshot()} />)
     alt.flush()
   
+    res.setHeader('Content-Type', 'text/html');
     if (isNotFound(state)) res.status(404)
     res.write('<!DOCTYPE html>\n')
     res.end(html)

src/server.js

@@ -26,6 +26,7 @@ if (process.env.SECURE) {
 }
 
 var io = socketIO(server)
+io.set('transports', ['polling'])
 
 var logDir = path.resolve(__dirname, '../log')
 
@@ -79,8 +80,8 @@ if (process.env.FORCE_SSL) {
   app.use(forceSSL)
 }
 
-app.get('/js', require('./middleware/javascript'))
-app.get('/css', require('./middleware/css'))
+app.get('/app.js', require('./middleware/javascript'))
+app.get('/app.css', require('./middleware/css'))
 app.use(require('./middleware/static'))
 
 app.use([

src/stores/DownloadStore.js

@@ -40,9 +40,9 @@ export default alt.createStore(class DownloadStore {
 
         const updateSpeed = () => {
           this.setState({
-            speedUp: torrent.swarm.uploadSpeed(),
-            speedDown: torrent.swarm.downloadSpeed(),
-            peers: torrent.swarm.wires.length
+            speedUp: torrent.uploadSpeed,
+            speedDown: torrent.downloadSpeed,
+            peers: torrent.numPeers
           })
         }
 

src/stores/UploadStore.js

@@ -29,8 +29,8 @@ export default alt.createStore(class UploadStore {
 
         const updateSpeed = () => {
           this.setState({
-            speedUp: torrent.swarm.uploadSpeed(),
-            peers: torrent.swarm.wires.length
+            speedUp: torrent.uploadSpeed,
+            peers: torrent.numPeers
           })
         }
 

src/wt.js

@@ -1,10 +1,11 @@
-import WebTorrent from 'webtorrent'
 import socket from 'filepizza-socket'
 
 export function getClient() {
   return new Promise((resolve, reject) => {
     socket.emit('rtcConfig', {}, (rtcConfig) => {
-      const client = new WebTorrent({ rtcConfig: rtcConfig })
+      const client = new WebTorrent({
+        tracker: { rtcConfig }
+      })
       resolve(client)
     })
   })