File details

renderer/index.css

@@ -26,6 +26,10 @@ body {
   line-height: 1.5em;
 }
 
+table {
+  table-layout: fixed;
+}
+
 ::-webkit-scrollbar {
   width: 10px;
   background-color: rgb(40, 40, 40);
@@ -245,7 +249,8 @@ a:not(.disabled):hover, i:not(.disabled):hover {
 .content {
   position: relative;
   width: 100%;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   flex: 1 1 auto;
   margin-top: 37px;
 }
@@ -508,7 +513,37 @@ body.drag .torrent-placeholder span {
  * TORRENT LIST: EXPANDED TORRENT DETAILS
  */
 .torrent.selected {
-  height: 240px;
+  height: auto;
+}
+
+.torrent-details {
+  padding: 8em 20px 20px 20px;
+}
+
+.torrent-details table {
+  width: 100%;
+  max-width: 1000px;
+  white-space: nowrap;
+}
+
+.torrent-details td {
+  overflow: hidden;
+  padding: 0;
+}
+
+.torrent-details td.col-name {
+  width: auto;
+  text-overflow: ellipsis;
+}
+
+.torrent-details td.col-progress {
+  width: 4em;
+  text-align: right;
+}
+
+.torrent-details td.col-size {
+  width: 4em;
+  text-align: right;
 }
 
 /*

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>
+  `
+}