From 866019a925195cdbe35636a151dcda27f7d2c2b8 Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Thu, 2 Mar 2017 14:01:07 -0800
Subject: [PATCH 01/13] Handle .torrent files in Torrent Viewer

---
 app/browser/webtorrent.js | 69 ++++++++++++++++++++++++++++++++++++++-
 app/filtering.js          |  6 ++--
 2 files changed, 72 insertions(+), 3 deletions(-)

diff --git a/app/browser/webtorrent.js b/app/browser/webtorrent.js
index f5a44945c9d..54fefd3c7bf 100644
--- a/app/browser/webtorrent.js
+++ b/app/browser/webtorrent.js
@@ -1,11 +1,20 @@
 const electron = require('electron')
 const ipc = electron.ipcMain
+const appUrlUtil = require('../../js/lib/appUrlUtil')
 const messages = require('../../js/constants/messages')
+const Filtering = require('../filtering')
 
 // Set to see communication between WebTorrent and torrent viewer tabs
 const DEBUG_IPC = false
 if (DEBUG_IPC) console.log('WebTorrent IPC debugging enabled')
 
+// var VIEWER_URL = chrome.extension.getURL('../extensions/torrent/webtorrent.html')
+var VIEWER_URL = appUrlUtil.getTorrentExtUrl('webtorrent.html')
+
+function getViewerURL (torrentUrl) {
+  return VIEWER_URL + '#' + encodeURIComponent(torrentUrl)
+}
+
 // Connects to the BitTorrent network
 // Communicates with the WebTorrentRemoteClients via message passing
 let server = null
@@ -23,7 +32,7 @@ function init (state, action) {
     channels[msg.clientKey] = e.sender
     server.receive(msg)
   })
-
+  setupFiltering()
   return state
 }
 
@@ -43,6 +52,64 @@ function send (msg) {
   channel.send(messages.TORRENT_MESSAGE, msg)
 }
 
+function setupFiltering () {
+  Filtering.registerHeadersReceivedFilteringCB(function (details, isPrivate) {
+    if (details.method !== 'GET') {
+      return {}
+    }
+    if (!isTorrentFile(details)) {
+      return {}
+    }
+
+    var viewerUrl = getViewerURL(details.url)
+
+    return {
+      responseHeaders: {
+        'Location': [ viewerUrl ]
+      },
+      statusLine: 'HTTP/1.1 301 Moved Permanently',
+      resourceName: 'webtorrent'
+    }
+  })
+}
+
+/**
+ * Check if the request is a torrent file.
+ * @param {Object} details First argument of the webRequest.onHeadersReceived
+ *                         event. The properties "responseHeaders" and "url"
+ *                         are read.
+ * @return {boolean} True if the resource is a torrent file.
+ */
+function isTorrentFile (details) {
+  var header = getHeader(details.responseHeaders, 'content-type')
+  if (header) {
+    var headerValue = header.toLowerCase().split(';', 1)[0].trim()
+    if (headerValue === 'application/x-bittorrent') {
+      return true
+    }
+    if (headerValue === 'application/octet-stream') {
+      if (details.url.toLowerCase().indexOf('.torrent') > 0) {
+        return true
+      }
+      var cdHeader =
+        getHeader(details.responseHeaders, 'content-disposition')
+      if (cdHeader && /\.torrent(["']|$)/i.test(cdHeader)) {
+        return true
+      }
+    }
+  }
+  return false
+}
+
+function getHeader (headers, headerName) {
+  var headerNames = Object.keys(headers)
+  for (var i = 0; i < headerNames.length; ++i) {
+    if (headerNames[i].toLowerCase() === headerName) {
+      return headers[headerNames[i]][0]
+    }
+  }
+}
+
 module.exports = {
   init,
   resourceName: 'webtorrent'
diff --git a/app/filtering.js b/app/filtering.js
index c604c1667f4..1a05dc115d7 100644
--- a/app/filtering.js
+++ b/app/filtering.js
@@ -287,7 +287,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)) {
@@ -306,7 +305,10 @@ function registerForHeadersReceived (session, partition) {
         continue
       }
       if (results.responseHeaders) {
-        cb({responseHeaders: results.responseHeaders})
+        cb({
+          responseHeaders: results.responseHeaders,
+          statusLine: results.statusLine
+        })
         return
       }
     }

From 13475b52073f85b4d2c0b35210bd35ca004014d4 Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Thu, 16 Mar 2017 14:39:10 -0700
Subject: [PATCH 02/13] break out torrent viewer into multiple components

---
 js/webtorrent/components/app.js             | 34 +++++++
 js/webtorrent/components/torrentFileList.js |  4 +-
 js/webtorrent/components/torrentViewer.js   |  4 +-
 js/webtorrent/entry.js                      | 98 ++++++++-------------
 4 files changed, 74 insertions(+), 66 deletions(-)
 create mode 100644 js/webtorrent/components/app.js

diff --git a/js/webtorrent/components/app.js b/js/webtorrent/components/app.js
new file mode 100644
index 00000000000..02d0bab2aee
--- /dev/null
+++ b/js/webtorrent/components/app.js
@@ -0,0 +1,34 @@
+const React = require('react')
+
+const MediaViewer = require('./mediaViewer')
+const TorrentViewer = require('./torrentViewer')
+
+class App extends React.Component {
+  render () {
+    const {
+      torrent,
+      torrentId,
+      errorMessage,
+      parsedTorrent,
+      dispatch
+    } = this.props.store
+
+    const ix = parsedTorrent && parsedTorrent.ix // Selected file index
+    const name = parsedTorrent && parsedTorrent.name
+
+    if (torrent && ix != null) {
+      return <MediaViewer torrent={torrent} ix={ix} />
+    } else {
+      return (
+        <TorrentViewer
+          name={name}
+          torrent={torrent}
+          torrentId={torrentId}
+          errorMessage={errorMessage}
+          dispatch={dispatch} />
+      )
+    }
+  }
+}
+
+module.exports = App
diff --git a/js/webtorrent/components/torrentFileList.js b/js/webtorrent/components/torrentFileList.js
index c837139d442..859983807e3 100644
--- a/js/webtorrent/components/torrentFileList.js
+++ b/js/webtorrent/components/torrentFileList.js
@@ -40,7 +40,7 @@ class TorrentFileList extends React.Component {
   }
 
   renderFileLink (file, isDownload) {
-    const { torrent, torrentID } = this.props
+    const { torrent, torrentId } = this.props
     const ix = torrent.files.indexOf(file)
     if (isDownload) {
       if (torrent.serverURL) {
@@ -50,7 +50,7 @@ class TorrentFileList extends React.Component {
         return <div /> // No download links until the server is ready
       }
     } else {
-      const magnetURL = torrentID + '&ix=' + ix
+      const magnetURL = torrentId + '&ix=' + ix
       return <a href={magnetURL}>{file.name}</a>
     }
   }
diff --git a/js/webtorrent/components/torrentViewer.js b/js/webtorrent/components/torrentViewer.js
index 94b7544c469..307de7469cf 100644
--- a/js/webtorrent/components/torrentViewer.js
+++ b/js/webtorrent/components/torrentViewer.js
@@ -12,7 +12,7 @@ class TorrentViewer extends React.Component {
   }
 
   render () {
-    const {torrent, torrentID, name, errorMessage, dispatch} = this.props
+    const {torrent, torrentId, name, errorMessage, dispatch} = this.props
 
     let titleElem, mainButtonId
     if (torrent) {
@@ -62,7 +62,7 @@ class TorrentViewer extends React.Component {
           <TorrentFileList
             torrent={torrent}
             stateOwner={this}
-            torrentID={torrentID} />
+            torrentId={torrentId} />
           {legalNotice}
         </div>
       </div>
diff --git a/js/webtorrent/entry.js b/js/webtorrent/entry.js
index 026dd7a9543..3b730e3d286 100644
--- a/js/webtorrent/entry.js
+++ b/js/webtorrent/entry.js
@@ -7,33 +7,32 @@ 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 = {
-  torrentID: window.decodeURIComponent(window.location.hash.substring(1)),
+// 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)
+store.parsedTorrent = parseTorrent(store.torrentId)
 
 // 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,27 +41,29 @@ 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'))
+
+  // Update page title
+  if (store.parsedTorrent && store.parsedTorrent.name) {
+    document.title = store.parsedTorrent.name
+  }
 }
 
 function addTorrentEvents (torrent) {
@@ -75,28 +76,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 +110,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))
   }
 }

From 9b5061d2bde3ae7885e2e2236c34323119875a28 Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Thu, 16 Mar 2017 18:01:28 -0700
Subject: [PATCH 03/13] Refactor: prep for next version of webtorrent-remote

---
 js/webtorrent/components/app.js             | 19 ++--
 js/webtorrent/components/mediaViewer.js     |  8 +-
 js/webtorrent/components/torrentFileList.js | 10 +--
 js/webtorrent/components/torrentViewer.js   | 14 ++-
 js/webtorrent/entry.js                      | 97 ++++++++++++---------
 5 files changed, 86 insertions(+), 62 deletions(-)

diff --git a/js/webtorrent/components/app.js b/js/webtorrent/components/app.js
index 02d0bab2aee..6fb3b721893 100644
--- a/js/webtorrent/components/app.js
+++ b/js/webtorrent/components/app.js
@@ -6,26 +6,25 @@ const TorrentViewer = require('./torrentViewer')
 class App extends React.Component {
   render () {
     const {
-      torrent,
+      ix,
+      name,
       torrentId,
-      errorMessage,
-      parsedTorrent,
-      dispatch
+      torrent,
+      serverUrl,
+      errorMessage
     } = this.props.store
 
-    const ix = parsedTorrent && parsedTorrent.ix // Selected file index
-    const name = parsedTorrent && parsedTorrent.name
-
     if (torrent && ix != null) {
-      return <MediaViewer torrent={torrent} ix={ix} />
+      return <MediaViewer torrent={torrent} serverUrl={serverUrl} ix={ix} />
     } else {
       return (
         <TorrentViewer
           name={name}
-          torrent={torrent}
           torrentId={torrentId}
+          torrent={torrent}
+          serverUrl={serverUrl}
           errorMessage={errorMessage}
-          dispatch={dispatch} />
+          dispatch={this.props.dispatch} />
       )
     }
   }
diff --git a/js/webtorrent/components/mediaViewer.js b/js/webtorrent/components/mediaViewer.js
index 95588155e3d..3bc07a9432a 100644
--- a/js/webtorrent/components/mediaViewer.js
+++ b/js/webtorrent/components/mediaViewer.js
@@ -19,16 +19,16 @@ const SUPPORTED_AUDIO_EXTENSIONS = [
 
 module.exports = class MediaViewer extends React.Component {
   render () {
-    const torrent = this.props.torrent
-    const ix = this.props.ix
+    const { torrent, serverUrl, ix } = this.props
+
     const file = torrent.files[ix]
     const fileExt = file && getExtension(file.name)
     const isVideo = SUPPORTED_VIDEO_EXTENSIONS.includes(fileExt)
     const isAudio = SUPPORTED_AUDIO_EXTENSIONS.includes(fileExt)
-    const fileURL = torrent.serverURL && (torrent.serverURL + '/' + ix)
+    const fileURL = serverUrl && (serverUrl + '/' + ix)
 
     let content
-    if (torrent.serverURL == null) {
+    if (serverUrl == null) {
       content = <div data-l10n-id='torrentLoadingMedia' />
     } else if (isVideo) {
       content = <video src={fileURL} autoPlay controls />
diff --git a/js/webtorrent/components/torrentFileList.js b/js/webtorrent/components/torrentFileList.js
index 859983807e3..235bbfa6c29 100644
--- a/js/webtorrent/components/torrentFileList.js
+++ b/js/webtorrent/components/torrentFileList.js
@@ -4,7 +4,7 @@ const SortableTable = require('../../components/sortableTable')
 
 class TorrentFileList extends React.Component {
   render () {
-    const torrent = this.props.torrent
+    const { torrent, stateOwner } = this.props
     const files = torrent && torrent.files
 
     let content
@@ -27,7 +27,7 @@ class TorrentFileList extends React.Component {
           rowObjects={files}
           columnClassNames={['num', 'name', 'downloadFile', 'size']}
           addHoverClass
-          stateOwner={this.props.stateOwner} />
+          stateOwner={stateOwner} />
       ]
     }
 
@@ -40,11 +40,11 @@ class TorrentFileList extends React.Component {
   }
 
   renderFileLink (file, isDownload) {
-    const { torrent, torrentId } = this.props
+    const { torrentId, torrent, serverUrl } = this.props
     const ix = torrent.files.indexOf(file)
     if (isDownload) {
-      if (torrent.serverURL) {
-        const httpURL = torrent.serverURL + '/' + ix
+      if (serverUrl) {
+        const httpURL = serverUrl + '/' + ix
         return <a href={httpURL} download={file.name}>⇩</a>
       } else {
         return <div /> // No download links until the server is ready
diff --git a/js/webtorrent/components/torrentViewer.js b/js/webtorrent/components/torrentViewer.js
index 307de7469cf..4f56a45f686 100644
--- a/js/webtorrent/components/torrentViewer.js
+++ b/js/webtorrent/components/torrentViewer.js
@@ -12,9 +12,17 @@ class TorrentViewer extends React.Component {
   }
 
   render () {
-    const {torrent, torrentId, name, errorMessage, dispatch} = this.props
+    const {
+      name,
+      torrentId,
+      torrent,
+      serverUrl,
+      errorMessage,
+      dispatch
+    } = this.props
 
     let titleElem, mainButtonId
+
     if (torrent) {
       if (name) {
         // No localization, just use the torrent name
@@ -60,9 +68,11 @@ class TorrentViewer extends React.Component {
         <div className='siteDetailsPageContent'>
           <TorrentStatus torrent={torrent} errorMessage={errorMessage} />
           <TorrentFileList
+            torrentId={torrentId}
             torrent={torrent}
+            serverUrl={serverUrl}
             stateOwner={this}
-            torrentId={torrentId} />
+          />
           {legalNotice}
         </div>
       </div>
diff --git a/js/webtorrent/entry.js b/js/webtorrent/entry.js
index 3b730e3d286..bae703aef55 100644
--- a/js/webtorrent/entry.js
+++ b/js/webtorrent/entry.js
@@ -14,25 +14,26 @@ const App = require('./components/app')
 require('../../less/webtorrent.less')
 require('../../node_modules/font-awesome/css/font-awesome.css')
 
-// UI state object. Pure function from state -> React element.
+const torrentId = window.decodeURIComponent(window.location.hash.substring(1))
+const parsedTorrent = parseTorrent(torrentId)
+
+// Pure function from state -> React elements.
 const store = {
-  torrentId: window.decodeURIComponent(window.location.hash.substring(1)),
-  parsedTorrent: null,
-  client: null,
+  ix: parsedTorrent && parsedTorrent.ix, // Selected file index
+  name: parsedTorrent && parsedTorrent.name,
+  torrentId: torrentId,
   torrent: null,
+  serverUrl: null,
   errorMessage: null
 }
-window.store = store /* for easier debugging */
-
-store.parsedTorrent = parseTorrent(store.torrentId)
 
 // Create the client, set up IPC to the WebTorrentRemoteServer
-store.client = new WebTorrentRemoteClient(send)
-store.client.on('warning', onWarning)
-store.client.on('error', onError)
+const client = new WebTorrentRemoteClient(send)
+client.on('warning', onWarning)
+client.on('error', onError)
 
 ipc.on(messages.TORRENT_MESSAGE, function (e, msg) {
-  store.client.receive(msg)
+  client.receive(msg)
 })
 
 function send (msg) {
@@ -41,11 +42,11 @@ function send (msg) {
 
 // Clean up the client before the window exits
 window.addEventListener('beforeunload', function () {
-  store.client.destroy({delay: 1000})
+  client.destroy()
 })
 
 // Check whether we're already part of this swarm. If not, show a Start button.
-store.client.get(store.torrentId, function (err, torrent) {
+client.get(store.torrentId, function (err, torrent) {
   if (!err) {
     store.torrent = torrent
     addTorrentEvents(torrent)
@@ -61,36 +62,48 @@ function update () {
   ReactDOM.render(elem, document.querySelector('#appContainer'))
 
   // Update page title
-  if (store.parsedTorrent && store.parsedTorrent.name) {
-    document.title = store.parsedTorrent.name
+  if (store.name) {
+    document.title = store.name
   }
 }
 
+function onAdded (err, torrent) {
+  if (err) return onError(err)
+
+  // Once torrent's canonical name is available, use it
+  if (torrent.name) store.name = torrent.name
+
+  store.torrent = torrent
+  addTorrentEvents(torrent)
+
+  const server = torrent.createServer()
+  server.listen(function () {
+    console.log('ON LISTENING')
+    store.serverUrl = 'http://localhost:' + server.address().port
+    update()
+  })
+
+  update()
+}
+
 function addTorrentEvents (torrent) {
   torrent.on('warning', onWarning)
   torrent.on('error', onError)
 }
 
-function onWarning (err) {
-  console.warn(err.message)
-}
-
-function onError (err) {
-  store.errorMessage = err.message
+function dispatch (action) {
+  switch (action) {
+    case 'start':
+      return start()
+    case 'saveTorrentFile':
+      return saveTorrentFile()
+    default:
+      console.error('Ignoring unknown dispatch type: ' + JSON.stringify(action))
+  }
 }
 
 function start () {
-  store.client.add(store.torrentId, onAdded, {server: {}})
-}
-
-function onAdded (err, torrent) {
-  if (err) {
-    store.errorMessage = err.message
-    return console.error(err)
-  }
-  store.torrent = torrent
-  addTorrentEvents(torrent)
-  update()
+  client.add(store.torrentId, onAdded)
 }
 
 function saveTorrentFile () {
@@ -110,13 +123,15 @@ function saveTorrentFile () {
   a.click()
 }
 
-function dispatch (action) {
-  switch (action) {
-    case 'start':
-      return start()
-    case 'saveTorrentFile':
-      return saveTorrentFile()
-    default:
-      console.error('Ignoring unknown dispatch type: ' + JSON.stringify(action))
-  }
+function onWarning (err) {
+  console.warn(err.message)
+}
+
+function onError (err) {
+  store.errorMessage = err.message
+  console.error(err.message)
 }
+
+/* for easier debugging */
+window.store = store
+window.client = client

From 2fefbf221b1b0f6358ac7e3ccac8de376bee8167 Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Thu, 16 Mar 2017 18:16:27 -0700
Subject: [PATCH 04/13] Fix race condition where media is briefly added to
 <iframe>

If there is no file object yet, but there is a serverUrl, then an
iframe is added to the page, instead of a "Loading..." message
---
 js/webtorrent/components/mediaViewer.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/js/webtorrent/components/mediaViewer.js b/js/webtorrent/components/mediaViewer.js
index 3bc07a9432a..2073a989902 100644
--- a/js/webtorrent/components/mediaViewer.js
+++ b/js/webtorrent/components/mediaViewer.js
@@ -22,13 +22,14 @@ module.exports = class MediaViewer extends React.Component {
     const { torrent, serverUrl, ix } = this.props
 
     const file = torrent.files[ix]
+    const fileURL = serverUrl && (serverUrl + '/' + ix)
+
     const fileExt = file && getExtension(file.name)
     const isVideo = SUPPORTED_VIDEO_EXTENSIONS.includes(fileExt)
     const isAudio = SUPPORTED_AUDIO_EXTENSIONS.includes(fileExt)
-    const fileURL = serverUrl && (serverUrl + '/' + ix)
 
     let content
-    if (serverUrl == null) {
+    if (!file || !serverUrl) {
       content = <div data-l10n-id='torrentLoadingMedia' />
     } else if (isVideo) {
       content = <video src={fileURL} autoPlay controls />

From ef21ddc7bde65219c894f47c97effd54dbb90fe0 Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Fri, 17 Mar 2017 11:00:48 -0700
Subject: [PATCH 05/13] Add support for .torrent files

---
 js/webtorrent/components/mediaViewer.js     |   3 +-
 js/webtorrent/components/torrentFileList.js |   7 +-
 js/webtorrent/entry.js                      | 113 +++++++++++++-------
 3 files changed, 80 insertions(+), 43 deletions(-)

diff --git a/js/webtorrent/components/mediaViewer.js b/js/webtorrent/components/mediaViewer.js
index 2073a989902..09ebd41260b 100644
--- a/js/webtorrent/components/mediaViewer.js
+++ b/js/webtorrent/components/mediaViewer.js
@@ -37,7 +37,8 @@ module.exports = class MediaViewer extends React.Component {
       content = <audio src={fileURL} autoPlay controls />
     } else {
       // For security, sandbox and disallow scripts.
-      // We need allow-same-origin so that the iframe can load from http://localhost:...
+      // We need allow-same-origin so that the iframe can load from
+      // http://localhost:...
       content = <iframe src={fileURL} sandbox='allow-same-origin' />
     }
 
diff --git a/js/webtorrent/components/torrentFileList.js b/js/webtorrent/components/torrentFileList.js
index 235bbfa6c29..4df5619b4fb 100644
--- a/js/webtorrent/components/torrentFileList.js
+++ b/js/webtorrent/components/torrentFileList.js
@@ -50,8 +50,11 @@ class TorrentFileList extends React.Component {
         return <div /> // No download links until the server is ready
       }
     } else {
-      const magnetURL = torrentId + '&ix=' + ix
-      return <a href={magnetURL}>{file.name}</a>
+      const suffix = /^https?:/.test(torrentId)
+        ? '#ix=' + ix
+        : '&ix=' + ix
+      const href = torrentId + suffix
+      return <a href={href}>{file.name}</a>
     }
   }
 }
diff --git a/js/webtorrent/entry.js b/js/webtorrent/entry.js
index bae703aef55..2d837f39488 100644
--- a/js/webtorrent/entry.js
+++ b/js/webtorrent/entry.js
@@ -1,61 +1,94 @@
 /* global Blob, URL */
 
 const ipc = window.chrome.ipcRenderer
-const messages = require('../constants/messages')
 const parseTorrent = require('parse-torrent')
+const path = require('path')
+const querystring = require('querystring')
 const React = require('react')
 const ReactDOM = require('react-dom')
+const url = require('url')
 const WebTorrentRemoteClient = require('webtorrent-remote/client')
 
-// React Component
 const App = require('./components/app')
+const messages = require('../constants/messages')
 
 // Stylesheets
 require('../../less/webtorrent.less')
 require('../../node_modules/font-awesome/css/font-awesome.css')
 
-const torrentId = window.decodeURIComponent(window.location.hash.substring(1))
-const parsedTorrent = parseTorrent(torrentId)
-
 // Pure function from state -> React elements.
 const store = {
-  ix: parsedTorrent && parsedTorrent.ix, // Selected file index
-  name: parsedTorrent && parsedTorrent.name,
-  torrentId: torrentId,
+  name: null, // Torrent name
+  ix: null, // Selected file index
+  torrentId: window.decodeURIComponent(window.location.hash.substring(1)),
   torrent: null,
   serverUrl: null,
   errorMessage: null
 }
 
-// Create the client, set up IPC to the WebTorrentRemoteServer
-const client = new WebTorrentRemoteClient(send)
-client.on('warning', onWarning)
-client.on('error', onError)
+let client, server
+
+init()
+
+function init () {
+  const parsedUrl = url.parse(store.torrentId)
+
+  // `ix` param can be set by query param or hash, e.g. ?ix=1 or #ix=1
+  if (parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:') {
+    store.name = path.basename(parsedUrl.pathname)
+    store.ix = getIxQuery(parsedUrl) || getIxHash(parsedUrl)
+  } else {
+    let parsedTorrent
+    try {
+      parsedTorrent = parseTorrent(store.torrentId)
+    } catch (err) {
+      return onError(new Error('Invalid torrent identifier'))
+    }
+    store.name = parsedTorrent.name
+    store.ix = parsedTorrent.ix || getIxHash(parsedUrl)
+  }
 
-ipc.on(messages.TORRENT_MESSAGE, function (e, msg) {
-  client.receive(msg)
-})
+  // Create the client, set up IPC to the WebTorrentRemoteServer
+  client = new WebTorrentRemoteClient(send)
+  client.on('warning', onWarning)
+  client.on('error', onError)
 
-function send (msg) {
-  ipc.send(messages.TORRENT_MESSAGE, msg)
-}
+  ipc.on(messages.TORRENT_MESSAGE, function (e, msg) {
+    client.receive(msg)
+  })
 
-// Clean up the client before the window exits
-window.addEventListener('beforeunload', function () {
-  client.destroy()
-})
+  // Check whether we're already part of this swarm. If not, show a Start button.
+  client.get(store.torrentId, function (err, torrent) {
+    if (!err) {
+      store.torrent = torrent
+      addTorrentEvents(torrent)
+      update()
+    }
+  })
 
-// Check whether we're already part of this swarm. If not, show a Start button.
-client.get(store.torrentId, function (err, torrent) {
-  if (!err) {
-    store.torrent = torrent
-    addTorrentEvents(torrent)
-  }
+  // Clean up the client before the window exits
+  window.addEventListener('beforeunload', function () {
+    client.destroy()
+  })
 
   // Page starts blank. This shows a continuously updating torrent UI
   update()
   setInterval(update, 1000)
-})
+}
+
+function getIxQuery (parsedUrl) {
+  const ix = Number(querystring.parse(parsedUrl.query).ix)
+  return Number.isNaN(ix) ? null : ix
+}
+
+function getIxHash (parsedUrl) {
+  const ix = Number(querystring.parse((parsedUrl.hash || '').slice(1)).ix)
+  return Number.isNaN(ix) ? null : ix
+}
+
+function send (msg) {
+  ipc.send(messages.TORRENT_MESSAGE, msg)
+}
 
 function update () {
   const elem = <App store={store} dispatch={dispatch} />
@@ -76,13 +109,14 @@ function onAdded (err, torrent) {
   store.torrent = torrent
   addTorrentEvents(torrent)
 
-  const server = torrent.createServer()
-  server.listen(function () {
-    console.log('ON LISTENING')
-    store.serverUrl = 'http://localhost:' + server.address().port
-    update()
-  })
+  server = torrent.createServer()
+  server.listen(onServerListening)
+
+  update()
+}
 
+function onServerListening () {
+  store.serverUrl = 'http://localhost:' + server.address().port
   update()
 }
 
@@ -107,12 +141,9 @@ function start () {
 }
 
 function saveTorrentFile () {
-  let parsedTorrent = parseTorrent(store.torrentId)
-  let torrentFile = parseTorrent.toTorrentFile(parsedTorrent)
-
-  let torrentFileName = parsedTorrent.name + '.torrent'
+  let torrentFileName = store.name + '.torrent'
   let torrentFileBlobURL = URL.createObjectURL(
-    new Blob([torrentFile],
+    new Blob([store.torrent.torrentFile],
     { type: 'application/x-bittorrent' }
   ))
 
@@ -130,8 +161,10 @@ function onWarning (err) {
 function onError (err) {
   store.errorMessage = err.message
   console.error(err.message)
+  update()
 }
 
 /* for easier debugging */
 window.store = store
 window.client = client
+window.server = server

From b81798fffcbc670f88e71a7b2d03841d1eec57aa Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Fri, 17 Mar 2017 11:25:14 -0700
Subject: [PATCH 06/13] Make renders happen more quickly (initial and important
 events)

---
 app/extensions/torrent/webtorrent.html |  2 +-
 js/webtorrent/entry.js                 | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/extensions/torrent/webtorrent.html b/app/extensions/torrent/webtorrent.html
index b22cfbe6a17..6826dd3825a 100644
--- a/app/extensions/torrent/webtorrent.html
+++ b/app/extensions/torrent/webtorrent.html
@@ -10,10 +10,10 @@
     <link rel="shortcut icon" type="image/x-icon" href="img/webtorrent-128.png">
     <title data-l10n-id="webtorrentPage"></title>
     <script src="ext/l20n.min.js"></script>
-    <script src='gen/webtorrentPage.entry.js'></script>
     <link rel="localization" href="locales/{locale}/app.properties">
   </head>
   <body>
     <div id="appContainer" />
+    <script src='gen/webtorrentPage.entry.js'></script>
   </body>
 </html>
diff --git a/js/webtorrent/entry.js b/js/webtorrent/entry.js
index 2d837f39488..545647f2c26 100644
--- a/js/webtorrent/entry.js
+++ b/js/webtorrent/entry.js
@@ -62,8 +62,8 @@ function init () {
     if (!err) {
       store.torrent = torrent
       addTorrentEvents(torrent)
-      update()
     }
+    update()
   })
 
   // Clean up the client before the window exits
@@ -71,7 +71,7 @@ function init () {
     client.destroy()
   })
 
-  // Page starts blank. This shows a continuously updating torrent UI
+  // Update the UI (to show download speed) every 1s.
   update()
   setInterval(update, 1000)
 }
@@ -123,6 +123,13 @@ function onServerListening () {
 function addTorrentEvents (torrent) {
   torrent.on('warning', onWarning)
   torrent.on('error', onError)
+
+  // These event listeners aren't strictly required, but it's better to update the
+  // UI immediately when important events happen instead of waiting for the regular
+  // update() call that happens on a 1 second interval.
+  torrent.on('infohash', update)
+  torrent.on('metadata', update)
+  torrent.on('done', update)
 }
 
 function dispatch (action) {

From fad4acfe211591e9349e892ad3c8497e7c825a67 Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Fri, 17 Mar 2017 11:25:33 -0700
Subject: [PATCH 07/13] Fix bugs in ix query parsing

---
 js/webtorrent/entry.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/js/webtorrent/entry.js b/js/webtorrent/entry.js
index 545647f2c26..750dcb80f8b 100644
--- a/js/webtorrent/entry.js
+++ b/js/webtorrent/entry.js
@@ -36,7 +36,8 @@ function init () {
   // `ix` param can be set by query param or hash, e.g. ?ix=1 or #ix=1
   if (parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:') {
     store.name = path.basename(parsedUrl.pathname)
-    store.ix = getIxQuery(parsedUrl) || getIxHash(parsedUrl)
+    store.ix = getIxQuery(parsedUrl)
+    if (store.ix == null) store.ix = getIxHash(parsedUrl)
   } else {
     let parsedTorrent
     try {
@@ -45,7 +46,8 @@ function init () {
       return onError(new Error('Invalid torrent identifier'))
     }
     store.name = parsedTorrent.name
-    store.ix = parsedTorrent.ix || getIxHash(parsedUrl)
+    store.ix = parsedTorrent.ix
+    if (store.ix == null) store.ix = getIxHash(parsedUrl)
   }
 
   // Create the client, set up IPC to the WebTorrentRemoteServer

From e7702561e683408150d6deb14dd840851d0f0883 Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Fri, 17 Mar 2017 16:45:44 -0700
Subject: [PATCH 08/13] Change "Save Torrent File" button to "Copy Magnet Link"
 for magnet links

Fixes: https://github.com/brave/browser-laptop/issues/7772
---
 .../torrent/locales/en-US/app.properties      |  3 +-
 js/webtorrent/components/app.js               |  2 +
 js/webtorrent/components/torrentViewer.js     | 27 ++++++++--
 js/webtorrent/entry.js                        | 49 +++++++++++--------
 package.json                                  |  1 +
 5 files changed, 55 insertions(+), 27 deletions(-)

diff --git a/app/extensions/torrent/locales/en-US/app.properties b/app/extensions/torrent/locales/en-US/app.properties
index 1cfc2137536..eadc17a5d71 100644
--- a/app/extensions/torrent/locales/en-US/app.properties
+++ b/app/extensions/torrent/locales/en-US/app.properties
@@ -1,7 +1,7 @@
 startPrompt=Start Downloading "{{name}}"?
 startPromptUntitled=Start Downloading?
 startDownload=Start Download
-saveTorrentFile=Save Torrent File
+saveTorrentFile=Save Torrent File...
 legalNotice=When you start a torrent, its data will be made available to others by means of upload. You are responsible for abiding by your local laws.
 missingFilesList=Click "Start Download" to load the torrent file list.
 loadingFilesList=Loading the torrent file list...
@@ -18,3 +18,4 @@ downloadFile=Save File
 torrentStatus=Torrent Status
 torrentLoadingInfo=Loading torrent info...
 torrentLoadingMedia=Loading...
+copyMagnetLink=Copy Magnet Link
diff --git a/js/webtorrent/components/app.js b/js/webtorrent/components/app.js
index 6fb3b721893..3af58d12261 100644
--- a/js/webtorrent/components/app.js
+++ b/js/webtorrent/components/app.js
@@ -9,6 +9,7 @@ class App extends React.Component {
       ix,
       name,
       torrentId,
+      torrentIdProtocol,
       torrent,
       serverUrl,
       errorMessage
@@ -21,6 +22,7 @@ class App extends React.Component {
         <TorrentViewer
           name={name}
           torrentId={torrentId}
+          torrentIdProtocol={torrentIdProtocol}
           torrent={torrent}
           serverUrl={serverUrl}
           errorMessage={errorMessage}
diff --git a/js/webtorrent/components/torrentViewer.js b/js/webtorrent/components/torrentViewer.js
index 4f56a45f686..2ef6427df20 100644
--- a/js/webtorrent/components/torrentViewer.js
+++ b/js/webtorrent/components/torrentViewer.js
@@ -18,6 +18,7 @@ class TorrentViewer extends React.Component {
       torrent,
       serverUrl,
       errorMessage,
+      torrentIdProtocol,
       dispatch
     } = this.props
 
@@ -44,6 +45,24 @@ class TorrentViewer extends React.Component {
       mainButtonId = 'startDownload'
     }
 
+    if (torrentIdProtocol === 'magnet:') {
+      saveButton = (
+        <Button
+          l10nId='copyMagnetLink'
+          className='whiteButton copyMagnetLink'
+          onClick={() => dispatch('copyMagnetLink')}
+        />
+      )
+    } else {
+      saveButton = (
+        <Button
+          l10nId='saveTorrentFile'
+          className='whiteButton saveTorrentFile'
+          onClick={() => dispatch('saveTorrentFile')}
+        />
+      )
+    }
+
     const legalNotice = torrent != null
       ? <a className='legalNotice' data-l10n-id='poweredByWebTorrent' href='https://webtorrent.io' target='_blank' />
       : <div className='legalNotice' data-l10n-id='legalNotice' />
@@ -57,11 +76,9 @@ class TorrentViewer extends React.Component {
               l10nId={mainButtonId}
               className='primaryButton mainButton'
               disabled={!!torrent}
-              onClick={() => dispatch('start')} />
-            <Button
-              l10nId='saveTorrentFile'
-              className='whiteButton saveTorrentFile'
-              onClick={() => dispatch('saveTorrentFile')} />
+              onClick={() => dispatch('start')}
+            />
+            {saveButton}
           </div>
         </div>
 
diff --git a/js/webtorrent/entry.js b/js/webtorrent/entry.js
index 750dcb80f8b..f9f497ae998 100644
--- a/js/webtorrent/entry.js
+++ b/js/webtorrent/entry.js
@@ -1,6 +1,6 @@
-/* global Blob, URL */
-
 const ipc = window.chrome.ipcRenderer
+
+const clipboardCopy = require('clipboard-copy')
 const parseTorrent = require('parse-torrent')
 const path = require('path')
 const querystring = require('querystring')
@@ -21,6 +21,7 @@ const store = {
   name: null, // Torrent name
   ix: null, // Selected file index
   torrentId: window.decodeURIComponent(window.location.hash.substring(1)),
+  torrentIdProtocol: null,
   torrent: null,
   serverUrl: null,
   errorMessage: null
@@ -32,13 +33,14 @@ init()
 
 function init () {
   const parsedUrl = url.parse(store.torrentId)
+  store.torrentIdProtocol = parsedUrl.protocol
 
   // `ix` param can be set by query param or hash, e.g. ?ix=1 or #ix=1
   if (parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:') {
     store.name = path.basename(parsedUrl.pathname)
     store.ix = getIxQuery(parsedUrl)
     if (store.ix == null) store.ix = getIxHash(parsedUrl)
-  } else {
+  } else if (parsedUrl.protocol === 'magnet:') {
     let parsedTorrent
     try {
       parsedTorrent = parseTorrent(store.torrentId)
@@ -48,6 +50,8 @@ function init () {
     store.name = parsedTorrent.name
     store.ix = parsedTorrent.ix
     if (store.ix == null) store.ix = getIxHash(parsedUrl)
+  } else {
+    return onError(new Error('Invalid torrent identifier'))
   }
 
   // Create the client, set up IPC to the WebTorrentRemoteServer
@@ -63,12 +67,15 @@ function init () {
   client.get(store.torrentId, function (err, torrent) {
     if (!err) {
       store.torrent = torrent
-      addTorrentEvents(torrent)
+      initTorrent(torrent)
     }
     update()
   })
 
-  // Clean up the client before the window exits
+  // Clean up the client. Note: Since this does IPC, it's not guaranteed to send
+  // before the page is closed. But that's okay; webtorrent-remote expects regular
+  // heartbeats and assumes clients are dead after 30s without one. So basically,
+  // this is an optimization to destroy the client sooner.
   window.addEventListener('beforeunload', function () {
     client.destroy()
   })
@@ -105,14 +112,8 @@ function update () {
 function onAdded (err, torrent) {
   if (err) return onError(err)
 
-  // Once torrent's canonical name is available, use it
-  if (torrent.name) store.name = torrent.name
-
   store.torrent = torrent
-  addTorrentEvents(torrent)
-
-  server = torrent.createServer()
-  server.listen(onServerListening)
+  initTorrent(torrent)
 
   update()
 }
@@ -122,10 +123,16 @@ function onServerListening () {
   update()
 }
 
-function addTorrentEvents (torrent) {
+function initTorrent (torrent) {
+  // Once torrent's canonical name is available, use it
+  if (torrent.name) store.name = torrent.name
+
   torrent.on('warning', onWarning)
   torrent.on('error', onError)
 
+  server = torrent.createServer()
+  server.listen(onServerListening)
+
   // These event listeners aren't strictly required, but it's better to update the
   // UI immediately when important events happen instead of waiting for the regular
   // update() call that happens on a 1 second interval.
@@ -140,6 +147,8 @@ function dispatch (action) {
       return start()
     case 'saveTorrentFile':
       return saveTorrentFile()
+    case 'copyMagnetLink':
+      return copyMagnetLink()
     default:
       console.error('Ignoring unknown dispatch type: ' + JSON.stringify(action))
   }
@@ -150,19 +159,17 @@ function start () {
 }
 
 function saveTorrentFile () {
-  let torrentFileName = store.name + '.torrent'
-  let torrentFileBlobURL = URL.createObjectURL(
-    new Blob([store.torrent.torrentFile],
-    { type: 'application/x-bittorrent' }
-  ))
-
   let a = document.createElement('a')
   a.target = '_blank'
-  a.download = torrentFileName
-  a.href = torrentFileBlobURL
+  a.download = true
+  a.href = store.torrentId
   a.click()
 }
 
+function copyMagnetLink () {
+  clipboardCopy(store.torrentId)
+}
+
 function onWarning (err) {
   console.warn(err.message)
 }
diff --git a/package.json b/package.json
index 3c0a40f192b..cc5f0917b22 100644
--- a/package.json
+++ b/package.json
@@ -87,6 +87,7 @@
     "ad-block": "^2.0.0",
     "aphrodite": "^1.0.0",
     "async": "^2.0.1",
+    "clipboard-copy": "^1.0.0",
     "electron-localshortcut": "^0.6.0",
     "electron-prebuilt": "brave/electron-prebuilt",
     "electron-squirrel-startup": "brave/electron-squirrel-startup",

From 6df25078d0e562303c5bd446578cf272568adca5 Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Fri, 17 Mar 2017 16:56:27 -0700
Subject: [PATCH 09/13] Update webtorrent-remote to v2

(All the previous changes assume this version)
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index cc5f0917b22..ca05ccf69ff 100644
--- a/package.json
+++ b/package.json
@@ -124,7 +124,7 @@
     "tracking-protection": "1.1.x",
     "underscore": "1.8.3",
     "url-loader": "^0.5.7",
-    "webtorrent-remote": "^1.0.0"
+    "webtorrent-remote": "^2.0.0"
   },
   "devDependencies": {
     "asar": "^0.11.0",

From fabc31bc42b64c201e9cd2a6a2a94bc9baf04530 Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Fri, 17 Mar 2017 17:23:40 -0700
Subject: [PATCH 10/13] only update document.title when it changes

---
 app/browser/webtorrent.js |  1 -
 js/webtorrent/entry.js    | 12 ++++++------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/browser/webtorrent.js b/app/browser/webtorrent.js
index 54fefd3c7bf..7f08ba2e2be 100644
--- a/app/browser/webtorrent.js
+++ b/app/browser/webtorrent.js
@@ -8,7 +8,6 @@ const Filtering = require('../filtering')
 const DEBUG_IPC = false
 if (DEBUG_IPC) console.log('WebTorrent IPC debugging enabled')
 
-// var VIEWER_URL = chrome.extension.getURL('../extensions/torrent/webtorrent.html')
 var VIEWER_URL = appUrlUtil.getTorrentExtUrl('webtorrent.html')
 
 function getViewerURL (torrentUrl) {
diff --git a/js/webtorrent/entry.js b/js/webtorrent/entry.js
index f9f497ae998..c083b5a35eb 100644
--- a/js/webtorrent/entry.js
+++ b/js/webtorrent/entry.js
@@ -54,6 +54,8 @@ function init () {
     return onError(new Error('Invalid torrent identifier'))
   }
 
+  document.title = store.name
+
   // Create the client, set up IPC to the WebTorrentRemoteServer
   client = new WebTorrentRemoteClient(send)
   client.on('warning', onWarning)
@@ -102,11 +104,6 @@ function send (msg) {
 function update () {
   const elem = <App store={store} dispatch={dispatch} />
   ReactDOM.render(elem, document.querySelector('#appContainer'))
-
-  // Update page title
-  if (store.name) {
-    document.title = store.name
-  }
 }
 
 function onAdded (err, torrent) {
@@ -125,7 +122,10 @@ function onServerListening () {
 
 function initTorrent (torrent) {
   // Once torrent's canonical name is available, use it
-  if (torrent.name) store.name = torrent.name
+  if (torrent.name) {
+    store.name = torrent.name
+    document.title = store.name
+  }
 
   torrent.on('warning', onWarning)
   torrent.on('error', onError)

From b790137c12e3a1a8a2ad9100af026d7287d93a1a Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Fri, 17 Mar 2017 17:40:40 -0700
Subject: [PATCH 11/13] Better title handling with internationalization code

Always show torrent title -- even if internationalization code runs
after it's set.
---
 app/extensions/torrent/locales/en-US/app.properties | 1 +
 js/webtorrent/entry.js                              | 4 +---
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/extensions/torrent/locales/en-US/app.properties b/app/extensions/torrent/locales/en-US/app.properties
index eadc17a5d71..c714874277a 100644
--- a/app/extensions/torrent/locales/en-US/app.properties
+++ b/app/extensions/torrent/locales/en-US/app.properties
@@ -19,3 +19,4 @@ torrentStatus=Torrent Status
 torrentLoadingInfo=Loading torrent info...
 torrentLoadingMedia=Loading...
 copyMagnetLink=Copy Magnet Link
+webtorrentPage=WebTorrent
diff --git a/js/webtorrent/entry.js b/js/webtorrent/entry.js
index c083b5a35eb..809b25034d7 100644
--- a/js/webtorrent/entry.js
+++ b/js/webtorrent/entry.js
@@ -54,8 +54,6 @@ function init () {
     return onError(new Error('Invalid torrent identifier'))
   }
 
-  document.title = store.name
-
   // Create the client, set up IPC to the WebTorrentRemoteServer
   client = new WebTorrentRemoteClient(send)
   client.on('warning', onWarning)
@@ -104,6 +102,7 @@ function send (msg) {
 function update () {
   const elem = <App store={store} dispatch={dispatch} />
   ReactDOM.render(elem, document.querySelector('#appContainer'))
+  document.title = store.name || 'WebTorrent'
 }
 
 function onAdded (err, torrent) {
@@ -124,7 +123,6 @@ function initTorrent (torrent) {
   // Once torrent's canonical name is available, use it
   if (torrent.name) {
     store.name = torrent.name
-    document.title = store.name
   }
 
   torrent.on('warning', onWarning)

From 9c44d03e71cebe5d6fb149ef1b2e6322f922f1f2 Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Mon, 20 Mar 2017 17:00:13 -0700
Subject: [PATCH 12/13] standard

---
 js/webtorrent/components/torrentViewer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/webtorrent/components/torrentViewer.js b/js/webtorrent/components/torrentViewer.js
index 2ef6427df20..bb829c365eb 100644
--- a/js/webtorrent/components/torrentViewer.js
+++ b/js/webtorrent/components/torrentViewer.js
@@ -22,7 +22,7 @@ class TorrentViewer extends React.Component {
       dispatch
     } = this.props
 
-    let titleElem, mainButtonId
+    let titleElem, mainButtonId, saveButton
 
     if (torrent) {
       if (name) {

From a03d8c02c45c4d0d3f5f86abaf7b4d03e63c04fe Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Thu, 23 Mar 2017 14:36:09 -0700
Subject: [PATCH 13/13] simplify initTorrent()

---
 js/webtorrent/entry.js | 22 ++++++++--------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/js/webtorrent/entry.js b/js/webtorrent/entry.js
index 809b25034d7..495062bc9dc 100644
--- a/js/webtorrent/entry.js
+++ b/js/webtorrent/entry.js
@@ -65,10 +65,7 @@ function init () {
 
   // Check whether we're already part of this swarm. If not, show a Start button.
   client.get(store.torrentId, function (err, torrent) {
-    if (!err) {
-      store.torrent = torrent
-      initTorrent(torrent)
-    }
+    if (!err) initTorrent(torrent)
     update()
   })
 
@@ -105,21 +102,14 @@ function update () {
   document.title = store.name || 'WebTorrent'
 }
 
-function onAdded (err, torrent) {
-  if (err) return onError(err)
-
-  store.torrent = torrent
-  initTorrent(torrent)
-
-  update()
-}
-
 function onServerListening () {
   store.serverUrl = 'http://localhost:' + server.address().port
   update()
 }
 
 function initTorrent (torrent) {
+  store.torrent = torrent
+
   // Once torrent's canonical name is available, use it
   if (torrent.name) {
     store.name = torrent.name
@@ -153,7 +143,11 @@ function dispatch (action) {
 }
 
 function start () {
-  client.add(store.torrentId, onAdded)
+  client.add(store.torrentId, function (err, torrent) {
+    if (err) return onError(err)
+    initTorrent(torrent)
+    update()
+  })
 }
 
 function saveTorrentFile () {