Torrent selection

renderer/index.css

@@ -355,26 +355,6 @@ input {
  * TORRENT LIST
  */
 
-.torrent-placeholder {
-  padding: 10px;
-  font-size: 1.1em;
-}
-
-.torrent-placeholder span {
-  border: 5px #444 dashed;
-  border-radius: 5px;
-  color: #666;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-body.drag .torrent-placeholder span {
-  border-color: #def;
-  color: #def;
-}
-
 .torrent {
   background: linear-gradient(to bottom right, #4B79A1, #283E51);
   background-repeat: no-repeat;
@@ -407,15 +387,14 @@ body.drag .torrent-placeholder span {
 
 .torrent .buttons {
   position: absolute;
-  top: 0;
+  top: 25px;
   right: 0;
   height: 100%;
-  align-items: center; /* flexbox: center buttons vertically */
   display: none;
 }
 
 .torrent:hover .buttons {
-  display: flex;
+  display: block;
 }
 
 .torrent .buttons > * {
@@ -501,6 +480,37 @@ body.drag .torrent-placeholder span {
   content: ' — ';
 }
 
+/*
+ * TORRENT LIST: DRAG-DROP TARGET
+ */
+
+.torrent-placeholder {
+  padding: 10px;
+  font-size: 1.1em;
+}
+
+.torrent-placeholder span {
+  border: 5px #444 dashed;
+  border-radius: 5px;
+  color: #666;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+body.drag .torrent-placeholder span {
+  border-color: #def;
+  color: #def;
+}
+
+/*
+ * TORRENT LIST: EXPANDED TORRENT DETAILS
+ */
+.torrent.selected {
+  height: 240px;
+}
+
 /*
  * PLAYER CONTROLS
  */

renderer/index.js

@@ -170,13 +170,16 @@ function dispatch (action, ...args) {
     seed(args[0] /* files */)
   }
   if (action === 'openPlayer') {
-    openPlayer(args[0] /* infoHash */)
+    openPlayer(args[0] /* torrentSummary */)
   }
   if (action === 'toggleTorrent') {
-    toggleTorrent(args[0] /* infoHash */)
+    toggleTorrent(args[0] /* torrentSummary */)
   }
   if (action === 'deleteTorrent') {
-    deleteTorrent(args[0] /* infoHash */)
+    deleteTorrent(args[0] /* torrentSummary */)
+  }
+  if (action === 'toggleSelectTorrent') {
+    toggleSelectTorrent(args[0] /* infoHash */)
   }
   if (action === 'openChromecast') {
     openChromecast(args[0] /* infoHash */)
@@ -555,6 +558,12 @@ function deleteTorrent (torrentSummary) {
   playInterfaceSound(config.SOUND_DELETE)
 }
 
+function toggleSelectTorrent (infoHash) {
+  // toggle selection
+  state.selectedInfoHash = state.selectedInfoHash === infoHash ? null : infoHash
+  update()
+}
+
 function openChromecast (infoHash) {
   var torrentSummary = getTorrentSummary(infoHash)
   state.devices.chromecast.play(state.server.networkURL, {

renderer/state.js

@@ -11,6 +11,7 @@ module.exports = {
   prev: {}, /* used for state diffing in updateElectron() */
   server: null, /* local WebTorrent-to-HTTP server */
   torrentPlaying: null, /* the torrent we're streaming. see client.torrents */
+  selectedInfoHash: null, /* the torrent we've selected to view details. see state.torrents */
   // history: [], /* track how we got to the current view. enables Back button */
   // historyIndex: 0,
   url: 'home',

renderer/views/torrent-list.js

@@ -22,7 +22,8 @@ function TorrentList (state, dispatch) {
 // 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 torrent = state.client.torrents.find((x) => x.infoHash === torrentSummary.infoHash)
+  var infoHash = torrentSummary.infoHash
+  var torrent = state.client.torrents.find((x) => x.infoHash === infoHash)
 
   // Background image: show some nice visuals, like a frame from the movie, if possible
   var style = {}
@@ -34,8 +35,12 @@ function renderTorrent (torrentSummary, state, dispatch) {
 
   // 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 (state.selectedInfoHash === infoHash) classes.push('selected')
   return hx`
-    <div class='torrent ${torrentSummary.playStatus || ''}' style=${style}>
+    <div class='${classes.join(' ')}' style=${style} onclick=${() => dispatch('toggleSelectTorrent', infoHash)}>
       ${renderTorrentMetadata(torrent, torrentSummary)}
       ${renderTorrentButtons(torrentSummary, dispatch)}
     </div>