Torrent viewer: Add 'Stop Download' button

app/extensions/torrent/locales/en-US/app.properties

@@ -20,3 +20,4 @@ torrentLoadingInfo=Loading torrent info...
 torrentLoadingMedia=Loading...
 copyMagnetLink=Copy Magnet Link
 webtorrentPage=WebTorrent
+stopDownload=Stop Download

js/webtorrent/components/torrentViewer.js

@@ -22,17 +22,36 @@ class TorrentViewer extends React.Component {
       dispatch
     } = this.props
 
-    let titleElem, mainButtonId, saveButton
+    let titleElem, mainButton, saveButton, legalNotice
 
     if (torrent) {
       if (name) {
         // No localization, just use the torrent name
         titleElem = <div className='sectionTitle'>{name}</div>
       } else {
         // 'Loading torrent information...'
-        titleElem = <div className='sectionTitle' data-l10n-id='torrentLoadingInfo' />
+        titleElem = (
+          <div
+            className='sectionTitle'
+            data-l10n-id='torrentLoadingInfo'
+          />
+        )
       }
-      mainButtonId = torrent.progress < 1 ? 'downloading' : 'seeding'
+      mainButton = (
+        <Button
+          l10nId='stopDownload'
+          className='primaryButton mainButton'
+          onClick={() => dispatch('stop')}
+        />
+      )
+      legalNotice = (
+        <a
+          className='legalNotice'
+          data-l10n-id='poweredByWebTorrent'
+          href='https://webtorrent.io'
+          target='_blank'
+        />
+      )
     } else {
       const l10nStart = name ? 'startPrompt' : 'startPromptUntitled'
       const l10nArgs = {name}
@@ -42,7 +61,14 @@ class TorrentViewer extends React.Component {
           data-l10n-args={JSON.stringify(l10nArgs)}
           className='sectionTitle' />
       )
-      mainButtonId = 'startDownload'
+      mainButton = (
+        <Button
+          l10nId='startDownload'
+          className='primaryButton mainButton'
+          onClick={() => dispatch('start')}
+        />
+      )
+      legalNotice = <div className='legalNotice' data-l10n-id='legalNotice' />
     }
 
     if (torrentIdProtocol === 'magnet:') {
@@ -63,21 +89,13 @@ class TorrentViewer extends React.Component {
       )
     }
 
-    const legalNotice = torrent != null
-      ? <a className='legalNotice' data-l10n-id='poweredByWebTorrent' href='https://webtorrent.io' target='_blank' />
-      : <div className='legalNotice' data-l10n-id='legalNotice' />
-
     return (
       <div className='siteDetailsPage'>
         <div className='siteDetailsPageHeader'>
           {titleElem}
+
           <div className='headerActions'>
-            <Button
-              l10nId={mainButtonId}
-              className='primaryButton mainButton'
-              disabled={!!torrent}
-              onClick={() => dispatch('start')}
-            />
+            {mainButton}
             {saveButton}
           </div>
         </div>
@@ -90,6 +108,7 @@ class TorrentViewer extends React.Component {
             serverUrl={serverUrl}
             stateOwner={this}
           />
+
           {legalNotice}
         </div>
       </div>

js/webtorrent/entry.js

@@ -54,16 +54,16 @@ function init () {
     return onError(new Error('Invalid torrent identifier'))
   }
 
-  // Create the client, set up IPC to the WebTorrentRemoteServer
-  client = new WebTorrentRemoteClient(send)
-  client.on('warning', onWarning)
-  client.on('error', onError)
-
+  // Setup IPC to webtorrent-remote server
   ipc.on(messages.TORRENT_MESSAGE, function (e, msg) {
-    client.receive(msg)
+    if (client) client.receive(msg)
   })
 
-  // Check whether we're already part of this swarm. If not, show a Start button.
+  // Create a webtorrent-remote client
+  initClient()
+
+  // Check whether torrent is already added by another webtorrent-remote client.
+  // If it's not, a 'Start Download' button will be shown.
   client.get(store.torrentId, function (err, torrent) {
     if (!err) initTorrent(torrent)
     update()
@@ -73,9 +73,7 @@ function init () {
   // 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()
-  })
+  window.addEventListener('beforeunload', destroyClient)
 
   // Update the UI (to show download speed) every 1s.
   update()
@@ -102,9 +100,20 @@ function update () {
   document.title = store.name || 'WebTorrent'
 }
 
-function onServerListening () {
-  store.serverUrl = 'http://localhost:' + server.address().port
-  update()
+function initClient () {
+  if (client) return
+  client = new WebTorrentRemoteClient(send)
+  client.on('warning', onWarning)
+  client.on('error', onError)
+}
+
+function destroyClient () {
+  client.destroy()
+  client.removeListener('warning', onWarning)
+  client.removeListener('error', onError)
+  client = null
+  store.torrent = null
+  store.serverUrl = null
 }
 
 function initTorrent (torrent) {
@@ -129,10 +138,17 @@ function initTorrent (torrent) {
   torrent.on('done', update)
 }
 
+function onServerListening () {
+  store.serverUrl = 'http://localhost:' + server.address().port
+  update()
+}
+
 function dispatch (action) {
   switch (action) {
     case 'start':
       return start()
+    case 'stop':
+      return stop()
     case 'saveTorrentFile':
       return saveTorrentFile()
     case 'copyMagnetLink':
@@ -143,13 +159,19 @@ function dispatch (action) {
 }
 
 function start () {
+  initClient()
   client.add(store.torrentId, function (err, torrent) {
     if (err) return onError(err)
     initTorrent(torrent)
     update()
   })
 }
 
+function stop () {
+  destroyClient()
+  update()
+}
+
 function saveTorrentFile () {
   let a = document.createElement('a')
   a.target = '_blank'