Enable showing download details

Author: Nicolas Joyard

client/downloads.js

@@ -59,10 +59,16 @@ define([
 	}
 
 
+	var showDetails = [];
 	var contentListConfig = {
 		resource: resources.downloads,
 		dataMapper: function(downloads) {
-			return { downloads: downloads };
+			return {
+				downloads: downloads.map(function(download) {
+					download.showDetails = showDetails.indexOf(download._id) !== -1;
+					return download;
+				})
+			};
 		},
 
 		root: {
@@ -97,6 +103,22 @@ define([
 
 			"!cancel/:id": function(view, err, req, next) {
 				resources.downloads.cancel(req.match.id);
+				next();
+			},
+
+			"!details/:id": function(view, err, req, next) {
+				var download = view.$(".download[data-id='" + req.match.id + "']");
+				var visible = download.classList.toggle("show-details");
+				var idx = showDetails.indexOf(req.match.id);
+
+				if (idx !== -1) {
+					showDetails.splice(idx, 1);
+				}
+
+				if (visible) {
+					showDetails.push(req.match.id);
+				}
+
 				next();
 			}
 		}
@@ -114,6 +136,7 @@ define([
 		renderApplet(appletView);
 
 		var downloadsView = ui.view("downloads");
+		var showDetails = [];
 
 		contentListConfig.fetcher = getDownloadsFetcher();
 		ui.helpers.setupContentList(downloadsView, contentListConfig);

client/public/style/downloads.less

@@ -1,5 +1,28 @@
-.download .progress {
-	flex-basis: 100%;
+.download {
+	.progress {
+		flex-basis: 100%;
+	}
+
+	.files {
+		display: none;
+		list-style-type: none;
+		color: @mlGray;
+		margin: @contentBoxMargin;
+
+		.file {
+			display: flex;
+			flex-flow: row;
+
+			.size {
+				margin-left: auto;
+				text-align: right;
+			}
+		}
+	}
+
+	&.show-details .files {
+		display: block;
+	}
 }
 
 .download[data-state="error"] .progress {

client/templates/downloadlist.ist

@@ -1,5 +1,8 @@
 @define "downloads-download"
-	li.list-item.download[data-id={{ _id }}][data-state={{ state }}]
+	li \
+	  [data-id={{ _id }}] \
+	  [data-state={{ state }}] \
+	  [class=list-item download{{ showDetails ? " show-details" : "" }}]
 		.list-item-head
 			@with size ? 100 * downloaded / size : 0
 				@use "progress-bar"
@@ -27,8 +30,19 @@
 					@icon icon
 				"{{ size === -1 ? '-' : humanSize(size, 'B') }}"
 
+			ul.list-item-details.files
+				@eachkey files
+					li.file
+						.name "{{ key }}"
+						.size "{{ humanSize(value, 'B') }}"
+
+
 			@if-right "downloads:change"
 				.list-item-actions
+					a.action-with-icon[href={{ uri("#!downloads/details/%s", _id) }}]
+						@icon "more"
+						"Details"
+
 					@if state !== "paused" && state !== "complete" && state !== "error"
 						a.action-with-icon[title=Pause][href={{ uri("#!downloads/pause/%s", _id) }}]
 							@icon "pause"

http.js

@@ -361,7 +361,7 @@ httpProvider.init = function(mongoose, logger, config) {
 
 	HTTPDownloadSchema.virtual("files").get(function() {
 		var files = {};
-		files[this.path] = this.size;
+		files[path.relative(incoming, this.path)] = this.size;
 		return files;
 	});