progress

app/browser/webtorrent.js

@@ -65,7 +65,7 @@ function setupFiltering () {
 
     return {
       responseHeaders: {
-        'Location': viewerUrl
+        'Location': [ viewerUrl ]
       },
       statusLine: 'HTTP/1.1 301 Moved Permanently',
       resourceName: 'webtorrent'

app/extensions.js

@@ -166,7 +166,7 @@ let generateTorrentManifest = () => {
   let cspDirectives = {
     'default-src': '\'self\'',
     // TODO(bridiver) - remove example.com when webtorrent no longer requires it
-    'connect-src': '\'self\' https://example.com',
+    'connect-src': '*', // so .torrent files can be downloaded and displayed
     'media-src': '\'self\' http://localhost:*',
     'form-action': '\'none\'',
     'referrer': 'no-referrer',
@@ -178,7 +178,6 @@ let generateTorrentManifest = () => {
     // allow access to webpack dev server resources
     let devServer = 'localhost:' + process.env.npm_package_config_port
     cspDirectives['default-src'] = '\'self\' http://' + devServer
-    cspDirectives['connect-src'] += ' http://' + devServer + ' ws://' + devServer
     cspDirectives['media-src'] = '\'self\' http://localhost:* http://' + devServer
     cspDirectives['frame-src'] = '\'self\' http://' + devServer
     cspDirectives['style-src'] = '\'self\' \'unsafe-inline\' http://' + devServer

app/filtering.js

@@ -284,7 +284,6 @@ function registerForBeforeSendHeaders (session, partition) {
  */
 function registerForHeadersReceived (session, partition) {
   const isPrivate = module.exports.isPrivate(partition)
-  // Note that onBeforeRedirect listener doesn't take a callback
   session.webRequest.onHeadersReceived(function (details, cb) {
     // Using an electron binary which isn't from Brave
     if (shouldIgnoreUrl(details)) {
@@ -303,7 +302,10 @@ function registerForHeadersReceived (session, partition) {
         continue
       }
       if (results.responseHeaders) {
-        cb({ responseHeaders: results.responseHeaders, statusLine: results.statusLine })
+        cb({
+          responseHeaders: results.responseHeaders,
+          statusLine: results.statusLine,
+        })
         return
       }
     }

js/webtorrent/components/app.js

@@ -0,0 +1,28 @@
+const React = require('react')
+
+const MediaViewer = require('./mediaViewer')
+const TorrentViewer = require('./torrentViewer')
+
+class App extends React.Component {
+  render () {
+    const {torrent, torrentID, errorMessage, parsedTorrent} = this.props.store
+    const ix = parsedTorrent && parsedTorrent.ix // Selected file index
+    let name = parsedTorrent && parsedTorrent.name
+    if (name) document.title = name
+
+    if (torrent && ix != null) {
+      return <MediaViewer torrent={torrent} ix={ix} />
+    } else {
+      return (
+        <TorrentViewer
+          name={name}
+          torrent={torrent}
+          torrentID={torrentID}
+          errorMessage={errorMessage}
+          dispatch={this.props.dispatch} />
+      )
+    }
+  }
+}
+
+module.exports = App

js/webtorrent/entry.js

@@ -7,33 +7,35 @@ const React = require('react')
 const ReactDOM = require('react-dom')
 const WebTorrentRemoteClient = require('webtorrent-remote/client')
 
-// React Components
-const MediaViewer = require('./components/mediaViewer')
-const TorrentViewer = require('./components/torrentViewer')
+// React Component
+const App = require('./components/app')
 
 // Stylesheets
 require('../../less/webtorrent.less')
 require('../../node_modules/font-awesome/css/font-awesome.css')
 
-// UI state object. Pure function from `state` -> React element.
-const state = {
+// UI state object. Pure function from state -> React element.
+const store = {
   torrentID: window.decodeURIComponent(window.location.hash.substring(1)),
   parsedTorrent: null,
   client: null,
   torrent: null,
   errorMessage: null
 }
-window.state = state /* for easier debugging */
+window.store = store /* for easier debugging */
 
-state.parsedTorrent = parseTorrent(state.torrentID)
+parseTorrent.remote(store.torrentID, function (err, parsedTorrent) {
+  if (err) return onError(err)
+  store.parsedTorrent = parsedTorrent
+})
 
 // Create the client, set up IPC to the WebTorrentRemoteServer
-state.client = new WebTorrentRemoteClient(send)
-state.client.on('warning', onWarning)
-state.client.on('error', onError)
+store.client = new WebTorrentRemoteClient(send)
+store.client.on('warning', onWarning)
+store.client.on('error', onError)
 
 ipc.on(messages.TORRENT_MESSAGE, function (e, msg) {
-  state.client.receive(msg)
+  store.client.receive(msg)
 })
 
 function send (msg) {
@@ -42,26 +44,23 @@ function send (msg) {
 
 // Clean up the client before the window exits
 window.addEventListener('beforeunload', function () {
-  state.client.destroy({delay: 1000})
+  store.client.destroy({delay: 1000})
 })
 
 // Check whether we're already part of this swarm. If not, show a Start button.
-state.client.get(state.torrentID, function (err, torrent) {
+store.client.get('' /*store.torrentID*/, function (err, torrent) {
   if (!err) {
-    state.torrent = torrent
+    store.torrent = torrent
     addTorrentEvents(torrent)
   }
-  render()
-})
 
-// Page starts blank, once you call render() it shows a continuously updating torrent UI
-function render () {
+  // Page starts blank. This shows a continuously updating torrent UI
   update()
   setInterval(update, 1000)
-}
+})
 
 function update () {
-  const elem = <App />
+  const elem = <App store={store} dispatch={dispatch} />
   ReactDOM.render(elem, document.querySelector('#appContainer'))
 }
 
@@ -75,28 +74,28 @@ function onWarning (err) {
 }
 
 function onError (err) {
-  state.errorMessage = err.message
+  store.errorMessage = err.message
 }
 
 function start () {
-  state.client.add(state.torrentID, onAdded, {server: {}})
+  store.client.add(store.torrentID, onAdded, {server: {}})
 }
 
 function onAdded (err, torrent) {
   if (err) {
-    state.errorMessage = err.message
+    store.errorMessage = err.message
     return console.error(err)
   }
-  state.torrent = torrent
+  store.torrent = torrent
   addTorrentEvents(torrent)
   update()
 }
 
 function saveTorrentFile () {
-  let parsedTorrent = parseTorrent(state.torrentID)
+  let parsedTorrent = parseTorrent(store.torrentID)
   let torrentFile = parseTorrent.toTorrentFile(parsedTorrent)
 
-  let torrentFileName = state.parsedTorrent.name + '.torrent'
+  let torrentFileName = parsedTorrent.name + '.torrent'
   let torrentFileBlobURL = URL.createObjectURL(
     new Blob([torrentFile],
     { type: 'application/x-bittorrent' }
@@ -109,40 +108,13 @@ function saveTorrentFile () {
   a.click()
 }
 
-class App extends React.Component {
-  constructor () {
-    super()
-    this.dispatch = this.dispatch.bind(this)
-  }
-
-  dispatch (action) {
-    switch (action) {
-      case 'start':
-        return start()
-      case 'saveTorrentFile':
-        return saveTorrentFile()
-      default:
-        console.error('Ignoring unknown dispatch type: ' + JSON.stringify(action))
-    }
-  }
-
-  render () {
-    const {torrent, torrentID, errorMessage, parsedTorrent} = state
-    const ix = parsedTorrent && parsedTorrent.ix // Selected file index
-    let name = parsedTorrent && parsedTorrent.name
-    if (name) document.title = name
-
-    if (state.torrent && ix != null) {
-      return <MediaViewer torrent={torrent} ix={ix} />
-    } else {
-      return (
-        <TorrentViewer
-          name={name}
-          torrent={torrent}
-          torrentID={torrentID}
-          errorMessage={errorMessage}
-          dispatch={this.dispatch} />
-      )
-    }
+function dispatch (action) {
+  switch (action) {
+    case 'start':
+      return start()
+    case 'saveTorrentFile':
+      return saveTorrentFile()
+    default:
+      console.error('Ignoring unknown dispatch type: ' + JSON.stringify(action))
   }
 }

package.json

@@ -162,7 +162,6 @@
     "muon-winstaller": "^2.5.4",
     "ncp": "^2.0.0",
     "node-gyp": "^3.2.1",
-    "node-libs-browser": "^1.0.0",
     "node-static": "^0.7.7",
     "node-uuid": "^1.4.7",
     "nsp": "^2.2.0",
@@ -176,7 +175,7 @@
     "style-loader": "^0.13.0",
     "uglify-js": "https://github.com/mishoo/UglifyJS2#harmony",
     "webdriverio": "4.2.5",
-    "webpack": "^1.12.9",
+    "webpack": "https://github.com/feross/webpack#webpack-1",
     "webpack-dev-server": "^1.14.0",
     "webpack-notifier": "^1.2.1",
     "xml2js": "^0.4.15"