File details

renderer/views/torrent-list.js

@@ -24,13 +24,15 @@ 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
 
   // Background image: show some nice visuals, like a frame from the movie, if possible
   var style = {}
   if (torrentSummary.posterURL) {
-    style['background-image'] = 'linear-gradient(to bottom, ' +
-      'rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%), ' +
-      `url("${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,
@@ -38,11 +40,13 @@ function renderTorrent (torrentSummary, state, dispatch) {
   var classes = ['torrent']
   //  playStatus turns the play button into a loading spinner or error icon
   if (torrent && torrent.playStatus) classes.push(torrent.playStatus)
-  if (state.selectedInfoHash === infoHash) classes.push('selected')
+  if (isSelected) classes.push('selected')
+  classes = classes.join(' ')
   return hx`
-    <div class='${classes.join(' ')}' style=${style} onclick=${() => dispatch('toggleSelectTorrent', infoHash)}>
+    <div style=${style} class=${classes} onclick=${() => dispatch('toggleSelectTorrent', infoHash)}>
       ${renderTorrentMetadata(torrent, torrentSummary)}
       ${renderTorrentButtons(torrentSummary, dispatch)}
+      ${isSelected ? renderTorrentDetails(torrent, torrentSummary) : ''}
     </div>
   `
 }
@@ -96,7 +100,7 @@ function renderTorrentMetadata (torrent, torrentSummary) {
 // Play button starts streaming the torrent immediately, unpausing if needed
 function renderTorrentButtons (torrentSummary, dispatch) {
   return hx`
-    <div class="buttons">
+    <div class='buttons'>
       <i.btn.icon.download
         class='${torrentSummary.status}'
         onclick=${() => dispatch('toggleTorrent', torrentSummary)}>
@@ -114,3 +118,45 @@ function renderTorrentButtons (torrentSummary, dispatch) {
     </div>
   `
 }
+
+// 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 = 0
+      for (var piece = file._startPiece; piece < file._endPiece; piece++) {
+        if (torrent.bitfield.get(piece)) numPieces++
+      }
+      var progress = Math.round(100 * numPieces / (file._endPiece - file._startPiece)) + '%'
+      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>
+      </div>
+    `
+  }
+
+  return hx`
+    <div class='torrent-details'>
+      ${filesElement}
+    </div>
+  `
+}