From 8108c407d3bd0fc452f4819c855c031de33b0ce1 Mon Sep 17 00:00:00 2001
From: DC <dcposch@dcpos.ch>
Date: Mon, 14 Mar 2016 00:51:00 -0700
Subject: [PATCH] Torrent details

Show file list, open folder containing downloaded files, open individual files, play/pause individual videos
---
 main/ipc.js                    |  11 +-
 renderer/index.css             |  65 +++++--
 renderer/index.js              |  70 ++++---
 renderer/lib/torrent-player.js |  13 ++
 renderer/state.js              |  17 +-
 renderer/views/player.js       |   4 +-
 renderer/views/torrent-list.js | 332 ++++++++++++++++++---------------
 7 files changed, 316 insertions(+), 196 deletions(-)
 create mode 100644 renderer/lib/torrent-player.js

diff --git a/main/ipc.js b/main/ipc.js
index 7c34c7b3..81e51b2c 100644
--- a/main/ipc.js
+++ b/main/ipc.js
@@ -4,13 +4,13 @@ module.exports = {
 
 var debug = require('debug')('webtorrent-app:ipcMain')
 var electron = require('electron')
-var menu = require('./menu')
-var windows = require('./windows')
-
 var app = electron.app
 var ipcMain = electron.ipcMain
 var powerSaveBlocker = electron.powerSaveBlocker
 
+var menu = require('./menu')
+var windows = require('./windows')
+
 // has to be a number, not a boolean, and undefined throws an error
 var powerSaveBlocked = 0
 
@@ -56,6 +56,11 @@ function init () {
       powerSaveBlocker.stop(powerSaveBlocked)
     }
   })
+
+  ipcMain.on('openItem', function (e, path) {
+    console.log('opening file or folder: ' + path)
+    electron.shell.openItem(path)
+  })
 }
 
 function setBounds (bounds) {
diff --git a/renderer/index.css b/renderer/index.css
index 7a3ca34f..5d3812e2 100644
--- a/renderer/index.css
+++ b/renderer/index.css
@@ -145,12 +145,14 @@ table {
  * BUTTONS
  */
 
-a, i {
+a,
+i {
   cursor: default;
   -webkit-app-region: no-drag;
 }
 
-a:not(.disabled):hover, i:not(.disabled):hover {
+a:not(.disabled):hover,
+i:not(.disabled):hover {
   -webkit-filter: brightness(1.3);
 }
 
@@ -210,7 +212,7 @@ a:not(.disabled):hover, i:not(.disabled):hover {
 
 .header .nav {
   font-weight: bold;
-  margin-right: 7px;
+  margin-right: 9px;
 }
 
 .header .nav.left {
@@ -237,7 +239,8 @@ a:not(.disabled):hover, i:not(.disabled):hover {
   opacity: 1;
 }
 
-.header .nav .back, .header .nav .forward {
+.header .nav .back,
+.header .nav .forward {
   font-size: 30px;
   margin-top: -3px;
 }
@@ -370,7 +373,8 @@ input {
   animation: fadein .4s;
 }
 
-.torrent, .torrent-placeholder {
+.torrent,
+.torrent-placeholder {
   height: 120px;
 }
 
@@ -390,11 +394,14 @@ input {
   text-shadow: rgba(0, 0, 0, 0.5) 0 0 4px;
 }
 
+.torrent .metadata span:not(:last-child)::after {
+  content: ' — ';
+}
+
 .torrent .buttons {
   position: absolute;
   top: 25px;
-  right: 0;
-  height: 100%;
+  right: 10px;
   display: none;
 }
 
@@ -403,7 +410,7 @@ input {
 }
 
 .torrent .buttons > * {
-  margin-right: 6px; /* space buttons apart, align the Xs under the + */
+  margin-left: 6px; /* space buttons apart */
 }
 
 .torrent .buttons .download {
@@ -413,7 +420,6 @@ input {
   border-radius: 14px;
   font-size: 18px;
   padding-top: 6px;
-  margin-right: 10px; /* download and play btns need more space to look good */
 }
 
 .torrent .buttons .download.downloading {
@@ -467,24 +473,27 @@ input {
 }
 
 .torrent .buttons .delete {
+  position: relative;
+  top: 2px;
   opacity: 0.5;
 }
 
+.torrent .buttons .delete:hover {
+  opacity: 0.7;
+}
+
 .torrent .name {
   font-size: 1.5em;
   font-weight: bold;
   line-height: 1.5em;
 }
 
-.torrent .status, .torrent .status2 {
+.torrent .status,
+.torrent .status2 {
   font-size: 1em;
   line-height: 1.5em;
 }
 
-.torrent span:not(:last-child)::after {
-  content: ' — ';
-}
-
 /*
  * TORRENT LIST: DRAG-DROP TARGET
  */
@@ -520,10 +529,20 @@ body.drag .torrent-placeholder span {
   padding: 8em 20px 20px 20px;
 }
 
+.torrent-details .open-folder {
+  float: right;
+}
+
 .torrent-details table {
   width: 100%;
-  max-width: 1000px;
   white-space: nowrap;
+  border: none;
+  border-spacing: 0;
+}
+
+.torrent-details tr:hover,
+.torrent-details .open-folder:hover {
+  background-color: rgba(200, 200, 200, 0.3);
 }
 
 .torrent-details td {
@@ -531,6 +550,16 @@ body.drag .torrent-placeholder span {
   padding: 0;
 }
 
+.torrent-details td.col-icon {
+  width: 2em;
+}
+
+.torrent-details td.col-icon .icon {
+  font-size: 18px;
+  position: relative;
+  top: 3px;
+}
+
 .torrent-details td.col-name {
   width: auto;
   text-overflow: ellipsis;
@@ -667,7 +696,8 @@ body.drag .torrent-placeholder span {
     font-size: 16px;
     line-height: 1.5em;
   }
-  .torrent, .torrent-placeholder {
+  .torrent,
+  .torrent-placeholder {
     height: 150px;
   }
 }
@@ -677,7 +707,8 @@ body.drag .torrent-placeholder span {
     font-size: 18px;
     line-height: 1.5em;
   }
-  .torrent, .torrent-placeholder {
+  .torrent,
+  .torrent-placeholder {
     height: 180px;
   }
 }
diff --git a/renderer/index.js b/renderer/index.js
index 5126e09f..53774fc3 100644
--- a/renderer/index.js
+++ b/renderer/index.js
@@ -21,6 +21,7 @@ var patch = require('virtual-dom/patch')
 var App = require('./views/app')
 var config = require('../config')
 var torrentPoster = require('./lib/torrent-poster')
+var TorrentPlayer = require('./lib/torrent-player')
 
 // Electron apps have two processes: a main process (node) runs first and starts
 // a renderer process (essentially a Chrome window). We're in the renderer process,
@@ -169,8 +170,15 @@ function dispatch (action, ...args) {
   if (action === 'seed') {
     seed(args[0] /* files */)
   }
-  if (action === 'openPlayer') {
-    openPlayer(args[0] /* torrentSummary */)
+  if (action === 'play') {
+    // TODO: handle audio. video only for now.
+    openPlayer(args[0] /* torrentSummary */, args[1] /* index */)
+  }
+  if (action === 'openFile') {
+    openFile(args[0] /* torrentSummary */, args[1] /* index */)
+  }
+  if (action === 'openFolder') {
+    openFolder(args[0] /* torrentSummary */)
   }
   if (action === 'toggleTorrent') {
     toggleTorrent(args[0] /* torrentSummary */)
@@ -453,32 +461,33 @@ function generateTorrentPoster (torrent, torrentSummary) {
   })
 }
 
-function startServer (infoHash, cb) {
+function startServer (infoHash, index, cb) {
   if (state.server) return cb()
 
   var torrent = getTorrent(infoHash)
   if (!torrent) torrent = startTorrenting(infoHash)
-  if (torrent.ready) startServerFromReadyTorrent(torrent, cb)
-  else torrent.on('ready', () => startServerFromReadyTorrent(torrent, cb))
+  if (torrent.ready) startServerFromReadyTorrent(torrent, index, cb)
+  else torrent.on('ready', () => startServerFromReadyTorrent(torrent, index, cb))
 }
 
-function startServerFromReadyTorrent (torrent, cb) {
-  // filter out file formats that the <video> tag definitely can't play
-  var files = torrent.files.filter(function (file) {
-    var extname = path.extname(file.name)
-    return ['.mp4', '.m4v', '.webm', '.mov', '.mkv'].indexOf(extname) !== -1
-  })
+function startServerFromReadyTorrent (torrent, index, cb) {
+  // automatically choose which file in the torrent to play, if necessary
+  if (!index) {
+    // filter out file formats that the <video> tag definitely can't play
+    var files = torrent.files.filter(TorrentPlayer.isPlayable)
+    if (files.length === 0) return cb(new Error('cannot play any files in torrent'))
+    // use largest file
+    var largestFile = files.reduce(function (a, b) {
+      return a.length > b.length ? a : b
+    })
+    index = torrent.files.indexOf(largestFile)
+  }
 
-  if (files.length === 0) return cb(new Error('cannot play any files in torrent'))
+  // update state
+  state.playing.infoHash = torrent.infoHash
+  state.playing.fileIndex = index
 
-  // use largest file
-  state.torrentPlaying = files.reduce(function (a, b) {
-    return a.length > b.length ? a : b
-  })
-
-  var index = torrent.files.indexOf(state.torrentPlaying)
   var server = torrent.createServer()
-
   server.listen(0, function () {
     var port = server.address().port
     var urlSuffix = ':' + port + '/' + index
@@ -495,9 +504,12 @@ function stopServer () {
   if (!state.server) return
   state.server.server.destroy()
   state.server = null
+  state.playing.infoHash = null
+  state.playing.fileIndex = null
 }
 
-function openPlayer (torrentSummary) {
+// Opens the video player
+function openPlayer (torrentSummary, index) {
   var torrent = state.client.get(torrentSummary.infoHash)
   if (!torrent || !torrent.done) playInterfaceSound(config.SOUND_PLAY)
   torrentSummary.playStatus = 'requested'
@@ -509,7 +521,7 @@ function openPlayer (torrentSummary) {
     update()
   }, 10000) /* give it a few seconds */
 
-  startServer(torrentSummary.infoHash, function (err) {
+  startServer(torrentSummary.infoHash, index, function (err) {
     if (err) return onError(err)
 
     // if we timed out (user clicked play a long time ago), don't autoplay
@@ -525,6 +537,22 @@ function openPlayer (torrentSummary) {
   })
 }
 
+function openFile (torrentSummary, index) {
+  var torrent = state.client.get(torrentSummary.infoHash)
+  if (!torrent) return
+
+  var filePath = path.join(torrent.path, torrent.files[index].path)
+  ipcRenderer.send('openItem', filePath)
+}
+
+function openFolder (torrentSummary) {
+  var torrent = state.client.get(torrentSummary.infoHash)
+  if (!torrent) return
+
+  var folderPath = path.join(torrent.path, torrent.name)
+  ipcRenderer.send('openItem', folderPath)
+}
+
 function closePlayer () {
   state.url = 'home'
   state.window.title = config.APP_NAME
diff --git a/renderer/lib/torrent-player.js b/renderer/lib/torrent-player.js
new file mode 100644
index 00000000..b11dbd9b
--- /dev/null
+++ b/renderer/lib/torrent-player.js
@@ -0,0 +1,13 @@
+module.exports = {
+  isPlayable: isPlayable
+}
+
+var path = require('path')
+
+/**
+ * Determines whether a file in a torrent is audio/video we can play
+ */
+function isPlayable (file) {
+  var extname = path.extname(file.name)
+  return ['.mp4', '.m4v', '.webm', '.mov', '.mkv'].indexOf(extname) !== -1
+}
diff --git a/renderer/state.js b/renderer/state.js
index 98858b40..f16355d9 100644
--- a/renderer/state.js
+++ b/renderer/state.js
@@ -4,14 +4,18 @@ var path = require('path')
 var config = require('../config')
 
 module.exports = {
-  /* Temporary state disappears once the program exits.
+  /*
+   * Temporary state disappears once the program exits.
    * It can contain complex objects like open connections, etc.
    */
   client: null, /* the WebTorrent client */
-  prev: {}, /* used for state diffing in updateElectron() */
   server: null, /* local WebTorrent-to-HTTP server */
-  torrentPlaying: null, /* the torrent we're streaming. see client.torrents */
+  prev: {}, /* used for state diffing in updateElectron() */
   selectedInfoHash: null, /* the torrent we've selected to view details. see state.torrents */
+  playing: {
+    infoHash: null, /* the info hash of the torrent we're playing */
+    fileIndex: null /* the zero-based index within the torrent */
+  },
   // history: [], /* track how we got to the current view. enables Back button */
   // historyIndex: 0,
   url: 'home',
@@ -36,7 +40,8 @@ module.exports = {
     mouseStationarySince: 0 /* Unix time in ms */
   },
 
-  /* Saved state is read from and written to a file every time the app runs.
+  /*
+   * Saved state is read from and written to a file every time the app runs.
    * It should be simple and minimal and must be JSON.
    *
    * Config path:
@@ -49,9 +54,7 @@ module.exports = {
    *
    * Also accessible via `require('application-config')('WebTorrent').filePath`
    */
-  saved: {
-    torrents: []
-  },
+  saved: {},
 
   /* If the saved state file doesn't exist yet, here's what we use instead */
   defaultSavedState: {
diff --git a/renderer/views/player.js b/renderer/views/player.js
index 33f307b3..794eb207 100644
--- a/renderer/views/player.js
+++ b/renderer/views/player.js
@@ -64,7 +64,7 @@ function Player (state, dispatch) {
 function renderPlayerControls (state, dispatch) {
   var positionPercent = 100 * state.video.currentTime / state.video.duration
   var playbackCursorStyle = { left: 'calc(' + positionPercent + '% - 8px)' }
-  var torrent = state.torrentPlaying._torrent
+  var torrent = state.client.get(state.playing.infoHash)
 
   var elements = [
     hx`
@@ -132,7 +132,7 @@ function renderPlayerControls (state, dispatch) {
 // Renders the loading bar. Shows which parts of the torrent are loaded, which
 // can be "spongey" / non-contiguous
 function renderLoadingBar (state) {
-  var torrent = state.torrentPlaying._torrent
+  var torrent = state.client.get(state.playing.infoHash)
   if (torrent === null) {
     return []
   }
diff --git a/renderer/views/torrent-list.js b/renderer/views/torrent-list.js
index e3377f93..af0004dd 100644
--- a/renderer/views/torrent-list.js
+++ b/renderer/views/torrent-list.js
@@ -5,165 +5,205 @@ var hyperx = require('hyperx')
 var hx = hyperx(h)
 var prettyBytes = require('prettier-bytes')
 
+var TorrentPlayer = require('../lib/torrent-player')
+
 function TorrentList (state, dispatch) {
-  var list = state.saved.torrents.map(
-    (torrentSummary) => renderTorrent(torrentSummary, state, dispatch))
+  var torrentRows = state.saved.torrents.map(
+    (torrentSummary) => renderTorrent(torrentSummary))
   return hx`
     <div class='torrent-list'>
-      ${list}
+      ${torrentRows}
       <div class='torrent-placeholder'>
         <span class='ellipsis'>Drop a torrent file here or paste a magnet link</span>
       </div>
     </div>`
-}
 
-// Renders a torrent in the torrent list
-// Includes name, download status, play button, background image
-// May be expanded for additional info, including the list of files inside
-function renderTorrent (torrentSummary, state, dispatch) {
-  // Get ephemeral data (like progress %) directly from the WebTorrent handle
-  var infoHash = torrentSummary.infoHash
-  var torrent = state.client.torrents.find((x) => x.infoHash === infoHash)
-  var isSelected = state.selectedInfoHash === infoHash
+  // Renders a torrent in the torrent list
+  // Includes name, download status, play button, background image
+  // May be expanded for additional info, including the list of files inside
+  function renderTorrent (torrentSummary) {
+    // Get ephemeral data (like progress %) directly from the WebTorrent handle
+    var infoHash = torrentSummary.infoHash
+    var torrent = state.client.torrents.find((x) => x.infoHash === infoHash)
+    var isSelected = state.selectedInfoHash === infoHash
 
-  // Background image: show some nice visuals, like a frame from the movie, if possible
-  var style = {}
-  if (torrentSummary.posterURL) {
-    var gradient = isSelected
-      ? 'linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%)'
-      : 'linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)'
-    style['background-image'] = gradient + `, url('${torrentSummary.posterURL}')`
-  }
-
-  // Foreground: name of the torrent, basic info like size, play button,
-  // cast buttons if available, and delete
-  var classes = ['torrent']
-  //  playStatus turns the play button into a loading spinner or error icon
-  if (torrent && torrent.playStatus) classes.push(torrent.playStatus)
-  if (isSelected) classes.push('selected')
-  classes = classes.join(' ')
-  return hx`
-    <div style=${style} class=${classes} onclick=${() => dispatch('toggleSelectTorrent', infoHash)}>
-      ${renderTorrentMetadata(torrent, torrentSummary)}
-      ${renderTorrentButtons(torrentSummary, dispatch)}
-      ${isSelected ? renderTorrentDetails(torrent, torrentSummary) : ''}
-    </div>
-  `
-}
-
-// Show name, download status, % complete
-function renderTorrentMetadata (torrent, torrentSummary) {
-  var name = torrentSummary.displayName || torrentSummary.name || 'Loading torrent...'
-  var elements = [hx`
-    <div class='name ellipsis'>${name}</div>
-  `]
-
-  // If a torrent is paused and we only get the torrentSummary
-  // If it's downloading/seeding then we have more information
-  if (torrent) {
-    var progress = Math.floor(100 * torrent.progress)
-    var downloaded = prettyBytes(torrent.downloaded)
-    var total = prettyBytes(torrent.length || 0)
-    if (downloaded !== total) downloaded += ` / ${total}`
-
-    elements.push(hx`
-      <div class='status ellipsis'>
-        ${getFilesLength()}
-        <span>${getPeers()}</span>
-        <span>↓ ${prettyBytes(torrent.downloadSpeed || 0)}/s</span>
-        <span>↑ ${prettyBytes(torrent.uploadSpeed || 0)}/s</span>
-      </div>
-    `)
-    elements.push(hx`
-      <div class='status2 ellipsis'>
-        <span class='progress'>${progress}%</span>
-        <span>${downloaded}</span>
-      </div>
-    `)
-  }
-
-  return hx`<div class='metadata'>${elements}</div>`
-
-  function getPeers () {
-    var count = torrent.numPeers === 1 ? 'peer' : 'peers'
-    return `${torrent.numPeers} ${count}`
-  }
-
-  function getFilesLength () {
-    if (torrent.ready && torrent.files.length > 1) {
-      return hx`<span class='files'>${torrent.files.length} files</span>`
+    // Background image: show some nice visuals, like a frame from the movie, if possible
+    var style = {}
+    if (torrentSummary.posterURL) {
+      var gradient = isSelected
+        ? 'linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%)'
+        : 'linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)'
+      style['background-image'] = gradient + `, url('${torrentSummary.posterURL}')`
     }
-  }
-}
 
-// Download button toggles between torrenting (DL/seed) and paused
-// Play button starts streaming the torrent immediately, unpausing if needed
-function renderTorrentButtons (torrentSummary, dispatch) {
-  return hx`
-    <div class='buttons'>
-      <i.btn.icon.download
-        class='${torrentSummary.status}'
-        onclick=${(e) => handleButton('toggleTorrent', e)}>
-        ${torrentSummary.status === 'seeding' ? 'file_upload' : 'file_download'}
-      </i>
-      <i.btn.icon.play
-        onclick=${(e) => handleButton('openPlayer', e)}>
-        ${torrentSummary.playStatus === 'timeout' ? 'warning' : 'play_arrow'}
-      </i>
-      <i
-        class='icon delete'
-        onclick=${(e) => handleButton('deleteTorrent', e)}>
-        close
-      </i>
-    </div>
-  `
-
-  function handleButton (action, e) {
-    // Prevent propagation so that we don't select/unselect the torrent
-    e.stopPropagation()
-    dispatch(action, torrentSummary)
-  }
-}
-
-// Show files, per-file download status and play buttons, and so on
-function renderTorrentDetails (torrent, torrentSummary) {
-  var filesElement
-  if (!torrent || !torrent.files) {
-    // We don't know what files this torrent contains
-    var message = torrent
-      ? 'Downloading torrent data using magnet link...'
-      : 'Failed to download torrent data from magnet link. Click the download button to try again...'
-    filesElement = hx`<div class='files warning'>${message}</div>`
-  } else {
-    // We do know the files. List them and show download stats for each one
-    var fileRows = torrent.files.map(function (file) {
-      var numPieces = file._endPiece - file._startPiece + 1
-      var numPiecesPresent = 0
-      for (var piece = file._startPiece; piece <= file._endPiece; piece++) {
-        if (torrent.bitfield.get(piece)) numPiecesPresent++
-      }
-      var progress = Math.round(100 * numPiecesPresent / numPieces) + '%'
-      return hx`
-        <tr>
-          <td class='col-name'>${file.name}</td>
-          <td class='col-progress'>${progress}</td>
-          <td class='col-size'>${prettyBytes(file.length)}</td>
-        </li>
-      `
-    })
-    filesElement = hx`
-      <div class='files'>
-        <strong>Files</strong>
-        <table>
-          ${fileRows}
-        </table>
+    // Foreground: name of the torrent, basic info like size, play button,
+    // cast buttons if available, and delete
+    var classes = ['torrent']
+    //  playStatus turns the play button into a loading spinner or error icon
+    if (torrentSummary.playStatus) classes.push(torrentSummary.playStatus)
+    if (isSelected) classes.push('selected')
+    classes = classes.join(' ')
+    return hx`
+      <div style=${style} class=${classes} onclick=${() => dispatch('toggleSelectTorrent', infoHash)}>
+        ${renderTorrentMetadata(torrent, torrentSummary)}
+        ${renderTorrentButtons(torrentSummary)}
+        ${isSelected ? renderTorrentDetails(torrent, torrentSummary) : ''}
       </div>
     `
   }
 
-  return hx`
-    <div class='torrent-details'>
-      ${filesElement}
-    </div>
-  `
+  // Show name, download status, % complete
+  function renderTorrentMetadata (torrent, torrentSummary) {
+    var name = torrentSummary.displayName || torrentSummary.name || 'Loading torrent...'
+    var elements = [hx`
+      <div class='name ellipsis'>${name}</div>
+    `]
+
+    // If a torrent is paused and we only get the torrentSummary
+    // If it's downloading/seeding then we have more information
+    if (torrent) {
+      var progress = Math.floor(100 * torrent.progress)
+      var downloaded = prettyBytes(torrent.downloaded)
+      var total = prettyBytes(torrent.length || 0)
+      if (downloaded !== total) downloaded += ` / ${total}`
+
+      elements.push(hx`
+        <div class='status ellipsis'>
+          ${getFilesLength()}
+          <span>${getPeers()}</span>
+          <span>↓ ${prettyBytes(torrent.downloadSpeed || 0)}/s</span>
+          <span>↑ ${prettyBytes(torrent.uploadSpeed || 0)}/s</span>
+        </div>
+      `)
+      elements.push(hx`
+        <div class='status2 ellipsis'>
+          <span class='progress'>${progress}%</span>
+          <span>${downloaded}</span>
+        </div>
+      `)
+    }
+
+    return hx`<div class='metadata'>${elements}</div>`
+
+    function getPeers () {
+      var count = torrent.numPeers === 1 ? 'peer' : 'peers'
+      return `${torrent.numPeers} ${count}`
+    }
+
+    function getFilesLength () {
+      if (torrent.ready && torrent.files.length > 1) {
+        return hx`<span class='files'>${torrent.files.length} files</span>`
+      }
+    }
+  }
+
+  // Download button toggles between torrenting (DL/seed) and paused
+  // Play button starts streaming the torrent immediately, unpausing if needed
+  function renderTorrentButtons (torrentSummary) {
+    return hx`
+      <div class='buttons'>
+        <i.btn.icon.play
+          onclick=${(e) => handleButton('play', e)}>
+          ${torrentSummary.playStatus === 'timeout' ? 'warning' : 'play_arrow'}
+        </i>
+        <i.btn.icon.download
+          class='${torrentSummary.status}'
+          onclick=${(e) => handleButton('toggleTorrent', e)}>
+          ${torrentSummary.status === 'seeding' ? 'file_upload' : 'file_download'}
+        </i>
+        <i
+          class='icon delete'
+          onclick=${(e) => handleButton('deleteTorrent', e)}>
+          close
+        </i>
+      </div>
+    `
+
+    function handleButton (action, e) {
+      // Prevent propagation so that we don't select/unselect the torrent
+      e.stopPropagation()
+      dispatch(action, torrentSummary)
+    }
+  }
+
+  // Show files, per-file download status and play buttons, and so on
+  function renderTorrentDetails (torrent, torrentSummary) {
+    var filesElement
+    if (!torrent || !torrent.files) {
+      // We don't know what files this torrent contains
+      var message = torrent
+        ? 'Downloading torrent data using magnet link...'
+        : 'Failed to download torrent data from magnet link. Click the download button to try again...'
+      filesElement = hx`<div class='files warning'>${message}</div>`
+    } else {
+      // We do know the files. List them and show download stats for each one
+      var fileRows = torrent.files.map((file, index) => renderFileRow(torrent, torrentSummary, file, index))
+      filesElement = hx`
+        <div class='files'>
+          <strong>Files</strong>
+          <span class='open-folder' onclick=${handleOpenFolder}>Open folder</span>
+          <table>
+            ${fileRows}
+          </table>
+        </div>
+      `
+    }
+
+    return hx`
+      <div class='torrent-details'>
+        ${filesElement}
+      </div>
+    `
+
+    function handleOpenFolder (e) {
+      e.stopPropagation()
+      dispatch('openFolder', torrentSummary)
+    }
+  }
+
+  // Show a single file in the details view for a single torrent
+  function renderFileRow (torrent, torrentSummary, file, index) {
+    // First, find out how much of the file we've downloaded
+    var numPieces = file._endPiece - file._startPiece + 1
+    var numPiecesPresent = 0
+    for (var piece = file._startPiece; piece <= file._endPiece; piece++) {
+      if (torrent.bitfield.get(piece)) numPiecesPresent++
+    }
+    var progress = Math.round(100 * numPiecesPresent / numPieces) + '%'
+    var isDone = numPieces === numPiecesPresent
+
+    // Second, render the file as a table row
+    var icon
+    var iconClass = ''
+    if (state.playing.infoHash === torrent.infoHash && state.playing.fileIndex === index) {
+      icon = 'pause_arrow' /* playing? add option to pause */
+    } else if (TorrentPlayer.isPlayable(file)) {
+      icon = 'play_arrow' /* playable? add option to play */
+    } else {
+      icon = 'description' /* file icon, opens in OS default app */
+      iconClass = isDone ? '' : 'disabled'
+    }
+    return hx`
+      <tr onclick=${handleClick}>
+        <td class='col-icon'>
+          <i class='icon ${iconClass}'>${icon}</i>
+        </td>
+        <td class='col-name'>${file.name}</td>
+        <td class='col-progress'>${progress}</td>
+        <td class='col-size'>${prettyBytes(file.length)}</td>
+      </tr>
+    `
+
+    // Finally, let the user click on the row to play media or open files
+    function handleClick (e) {
+      e.stopPropagation()
+      if (icon === 'pause_arrow') {
+        throw new Error('Unimplemented') // TODO: pause audio
+      } else if (icon === 'play_arrow') {
+        dispatch('play', torrentSummary, index)
+      } else if (isDone) {
+        dispatch('openFile', torrentSummary, index)
+      }
+    }
+  }
 }