Refactor: prep for next version of webtorrent-remote

brave · Mar 17, 2017 · 7ae3d03 · 7ae3d03
1 parent f572e3f
commit 7ae3d03
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 65 deletions.
diff --git 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
@@ -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
@@ -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
@@ -12,16 +12,27 @@ class TorrentViewer extends React.Component {
   }
 
   render () {
-    const {torrent, torrentId, name, errorMessage, dispatch} = this.props
+    const {
+      name,
+      torrentId,
+      torrent,
+      serverUrl,
+      errorMessage,
+      dispatch
+    } = this.props
 
     const l10nTitle = name
       ? '' // No localization, just use the torrent name
       : torrent
-      ? 'torrentLoadingInfo' // eg 'Loading torrent information...'
-      : 'torrentUntitled' // eg 'Untitled torrent'
-    const l10nStart = name ? 'startPrompt' : 'startPromptUntitled'
+        ? 'torrentLoadingInfo' // eg 'Loading torrent information...'
+        : 'torrentUntitled' // eg 'Untitled torrent'
+
+    const l10nStart = name
+      ? 'startPrompt'
+      : 'startPromptUntitled'
 
     let titleElem, mainButtonId
+
     if (torrent) {
       titleElem = <div className='sectionTitle' data-l10n-id={l10nTitle}>{name}</div>
       mainButtonId = torrent.progress < 1 ? 'downloading' : 'seeding'
@@ -60,9 +71,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
@@ -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