Use href instead of onClick (allows right click -> open in new window)

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

@@ -14,3 +14,4 @@ downloadingTorrent=Downloading Torrent
 files=Files
 num=#
 torrentStatus=Torrent Status
+backToTorrent=Back to Torrent

js/components/sortableTable.js

@@ -332,12 +332,10 @@ class SortableTable extends React.Component {
             if (dataType === 'object' && firstEntry.value) {
               dataType = typeof firstEntry.value
             }
-            const headerClasses = {
+            return <th className={cx({
               'sort-header': true,
-              'sort-default': this.sortingDisabled || heading === this.props.defaultHeading
-            }
-            headerClasses['heading-' + heading] = true
-            return <th className={cx(headerClasses)}
+              'sort-default': this.sortingDisabled || heading === this.props.defaultHeading,
+              [`heading-${heading}`]: true})}
               data-sort-method={dataType === 'number' ? 'number' : undefined}
               data-sort-order={this.props.defaultHeadingSortOrder}>
               {

js/webtorrent/components/mediaViewer.js

@@ -2,12 +2,16 @@ const React = require('react')
 
 class MediaViewer extends React.Component {
   render () {
-    const torrent = this.props.torrent
+    const {torrent} = this.props
     const ix = this.props.ix
 
     let content
     if (torrent.serverURL != null) {
-      content = <iframe src={torrent.serverURL + '/' + ix} sandbox='allow-same-origin allow-scripts' />
+      content = (
+        <iframe
+          src={torrent.serverURL + '/' + ix}
+          sandbox='allow-same-origin allow-scripts' />
+      )
     } else {
       content = <div>Loading...</div>
     }

js/webtorrent/components/torrentFileList.js

@@ -1,15 +1,15 @@
+const parseTorrent = require('parse-torrent')
 const prettierBytes = require('prettier-bytes')
 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)
+  // Return the torrentID of a particular file, by index
+  getFileHref (index) {
+    // const index = this.props.files.indexOf(file)
+    const parsedTorrent = Object.assign({}, this.props.parsedTorrent, {ix: index})
+    return parseTorrent.toMagnetURI(parsedTorrent)
   }
 
   render () {
@@ -28,15 +28,23 @@ class TorrentFileList extends React.Component {
           defaultHeading='num'
           defaultHeadingSortOrder='asc'
           rows={files.map((file, i) => [
-            String(i + 1),
-            file.name,
-            prettierBytes(file.length)
+            {
+              cell: <a href={this.getFileHref(i)}>{i + 1}</a>,
+              value: i + 1
+            },
+            {
+              cell: <a href={this.getFileHref(i)}>{file.name}</a>,
+              value: file.name
+            },
+            {
+              cell: <a href={this.getFileHref(i)}>{prettierBytes(file.length)}</a>,
+              value: file.length
+            }
           ])}
           rowObjects={files}
           columnClassNames={['num', 'name', 'size']}
           addHoverClass
-          stateOwner={this.props.stateOwner}
-          onClick={this.onClick} />
+          stateOwner={this.props.stateOwner} />
       ]
     }
 

js/webtorrent/components/torrentViewer.js

@@ -12,7 +12,7 @@ class TorrentViewer extends React.Component {
   }
 
   render () {
-    const {torrent, torrentID, errorMessage, dispatch} = this.props
+    const {torrent, parsedTorrent, errorMessage, dispatch} = this.props
 
     let titleElem, mainButtonId
     if (torrent) {
@@ -55,9 +55,9 @@ class TorrentViewer extends React.Component {
         <div className='siteDetailsPageContent'>
           <TorrentStatus torrent={torrent} errorMessage={errorMessage} />
           <TorrentFileList
+            parsedTorrent={parsedTorrent}
             files={torrent && torrent.files}
-            stateOwner={this}
-            torrentID={torrentID} />
+            stateOwner={this} />
           {legalNotice}
         </div>
       </div>

js/webtorrent/entry.js

@@ -106,19 +106,16 @@ class App extends React.Component {
     this.dispatch = this.dispatch.bind(this)
   }
 
-  dispatch (action) {
+  dispatch (action, ...args) {
     switch (action) {
-      case 'start':
-        return start()
-      case 'saveTorrentFile':
-        return saveTorrentFile()
-      default:
-        console.error('Ignoring unknown dispatch type: ' + JSON.stringify(action))
+      case 'start': return start(...args)
+      case 'saveTorrentFile': return saveTorrentFile(...args)
+      default: console.error('Ignoring unknown dispatch type: ' + action)
     }
   }
 
   render () {
-    const {torrent, torrentID, errorMessage, parsedTorrent} = state
+    const {torrent, errorMessage, parsedTorrent} = state
     const ix = parsedTorrent && parsedTorrent.ix // Selected file index
     let name = parsedTorrent && parsedTorrent.name
     if (!name) {
@@ -135,7 +132,7 @@ class App extends React.Component {
         <TorrentViewer
           name={name}
           torrent={torrent}
-          torrentID={torrentID}
+          parsedTorrent={parsedTorrent}
           errorMessage={errorMessage}
           dispatch={this.dispatch} />
       )

less/webtorrent.less

@@ -35,9 +35,13 @@
       -webkit-user-select: none;
       table-layout: fixed;
 
-      td {
+      a {
+        display: block;
+        width: 100%;
+        height: 100%;
         padding-left: 5px;
         padding-right: 5px;
+        text-decoration: none;
       }
 
       .num {
@@ -117,3 +121,10 @@ iframe {
   margin-top: 20px;
   margin-bottom: 20px;
 }
+
+.backToTorrent {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+  z-index: 1000;
+}