Torrent Viewer: add download links

brave · Nov 19, 2016 · 6ffe619 · 6ffe619
1 parent 9761cee
commit 6ffe619
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 39 deletions.
diff --git a/app/extensions/torrent/locales/en-US/app.properties b/app/extensions/torrent/locales/en-US/app.properties
@@ -14,6 +14,7 @@ downloading=Downloading
 downloadingTorrent=Downloading Torrent
 files=Files
 num=#
+downloadFile=Download
 torrentStatus=Torrent Status
 torrentLoadingInfo=Loading torrent info...
 torrentUntitled=Untitled torrent

diff --git a/js/components/sortableTable.js b/js/components/sortableTable.js
@@ -336,14 +336,15 @@ class SortableTable extends React.Component {
               'sort-header': true,
               'sort-default': this.sortingDisabled || heading === this.props.defaultHeading
             }
-            headerClasses['heading-' + heading] = true
+            const isString = typeof heading === 'string'
+            if (isString) headerClasses['heading-' + heading] = true
             return <th className={cx(headerClasses)}
               data-sort-method={dataType === 'number' ? 'number' : undefined}
               data-sort-order={this.props.defaultHeadingSortOrder}>
               {
-                typeof heading === 'string'
-                ? <div className='th-inner' data-l10n-id={heading} />
-                : heading
+                isString
+                  ? <div className='th-inner' data-l10n-id={heading} />
+                  : heading
               }
             </th>
           })}

diff --git a/js/webtorrent/components/mediaViewer.js b/js/webtorrent/components/mediaViewer.js
@@ -25,30 +25,19 @@ module.exports = class MediaViewer extends React.Component {
     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)
 
     let content
     if (torrent.serverURL == null) {
       content = <div data-l10n-id='torrentLoadingMedia' />
     } else if (isVideo) {
-      content = (
-        <video
-          src={torrent.serverURL + '/' + ix}
-          autoplay='true'
-          controls='true' />
-      )
+      content = <video src={fileURL} autoPlay controls />
     } else if (isAudio) {
-      content = (
-        <audio
-          src={torrent.serverURL + '/' + ix}
-          autoplay='true'
-          controls='true' />
-      )
+      content = <audio src={fileURL} autoPlay controls />
     } else {
-      content = (
-        <iframe
-          src={torrent.serverURL + '/' + ix}
-          sandbox='allow-same-origin' />
-      )
+      // For security, sandbox and disallow scripts.
+      // We need allow-same-origin so that the iframe can load from http://localhost:...
+      content = <iframe src={fileURL} sandbox='allow-same-origin' />
     }
 
     return (

diff --git a/js/webtorrent/components/torrentFileList.js b/js/webtorrent/components/torrentFileList.js
@@ -3,40 +3,31 @@ const React = require('react')
 const SortableTable = require('../../components/sortableTable')
 
 class TorrentFileList extends React.Component {
-  constructor () {
-    super()
-    this.onClick = this.onClick.bind(this)
-  }
-
-  onClick (file) {
-    window.location = this.props.torrentID + '&ix=' + this.props.files.indexOf(file)
-  }
-
   render () {
-    const files = this.props.files
+    const torrent = this.props.torrent
+    const files = torrent && torrent.files
 
     let content
     if (files == null) {
       content = <div data-l10n-id='missingFilesList' />
     } else if (files.length === 0) {
       content = <div data-l10n-id='loadingFilesList' />
     } else {
-      // TODO(feross): Add context menu support, like History page has.
       content = [
         <SortableTable
-          headings={['num', 'name', 'size']}
+          headings={['num', 'name', 'downloadFile', 'size']}
           defaultHeading='num'
           defaultHeadingSortOrder='asc'
           rows={files.map((file, i) => [
             String(i + 1),
-            file.name,
+            {cell: this.renderFileLink(file, false)},
+            {cell: this.renderFileLink(file, true)},
             prettierBytes(file.length)
           ])}
           rowObjects={files}
-          columnClassNames={['num', 'name', 'size']}
+          columnClassNames={['num', 'name', 'downloadFile', 'size']}
           addHoverClass
-          stateOwner={this.props.stateOwner}
-          onClick={this.onClick} />
+          stateOwner={this.props.stateOwner} />
       ]
     }
 
@@ -47,6 +38,22 @@ class TorrentFileList extends React.Component {
       </div>
     )
   }
+
+  renderFileLink (file, isDownload) {
+    const { torrent, torrentID } = this.props
+    const ix = torrent.files.indexOf(file)
+    if (isDownload) {
+      if (torrent.serverURL) {
+        const httpURL = torrent.serverURL + '/' + ix
+        return <a href={httpURL} download={file.name}>⇩</a>
+      } else {
+        return <div /> // No download links until the server is ready
+      }
+    } else {
+      const magnetURL = torrentID + '&ix=' + ix
+      return <a href={magnetURL}>{file.name}</a>
+    }
+  }
 }
 
 module.exports = TorrentFileList
diff --git a/js/webtorrent/components/torrentViewer.js b/js/webtorrent/components/torrentViewer.js
@@ -60,7 +60,7 @@ class TorrentViewer extends React.Component {
         <div className='siteDetailsPageContent'>
           <TorrentStatus torrent={torrent} errorMessage={errorMessage} />
           <TorrentFileList
-            files={torrent && torrent.files}
+            torrent={torrent}
             stateOwner={this}
             torrentID={torrentID} />
           {legalNotice}

diff --git a/less/webtorrent.less b/less/webtorrent.less
@@ -55,8 +55,16 @@
         width: 60px;
       }
 
+      .heading-downloadFile {
+        width: 100px;
+      }
+
       .heading-size {
-        width: 120px;
+        width: 100px;
+      }
+
+      a {
+        text-decoration: none;
       }
     }
   }