From 9c8478dbe46cbe9f51ede450ecf7e30ca889bb6c Mon Sep 17 00:00:00 2001
From: DC <dcposch@dcpos.ch>
Date: Thu, 10 Mar 2016 23:39:38 -0800
Subject: [PATCH] Torrent selection

---
 renderer/index.css             | 56 ++++++++++++++++++++--------------
 renderer/index.js              | 15 +++++++--
 renderer/state.js              |  1 +
 renderer/views/torrent-list.js |  9 ++++--
 4 files changed, 53 insertions(+), 28 deletions(-)

diff --git a/renderer/index.css b/renderer/index.css
index 9caaf685..fc09f80d 100644
--- a/renderer/index.css
+++ b/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
  */
diff --git a/renderer/index.js b/renderer/index.js
index e5231615..64412c09 100644
--- a/renderer/index.js
+++ b/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, {
diff --git a/renderer/state.js b/renderer/state.js
index a028e01e..98858b40 100644
--- a/renderer/state.js
+++ b/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',
diff --git a/renderer/views/torrent-list.js b/renderer/views/torrent-list.js
index 3d75909b..e339fd67 100644
--- a/renderer/views/torrent-list.js
+++ b/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>