Add bandwidth counter to file viewer

pixelapi/file.go

@@ -18,6 +18,7 @@ type FileInfo struct {
 	Name          string    `json:"name"`
 	Size          uint64    `json:"size"`
 	Views         int64     `json:"views"`
+	BandwidthUsed uint64    `json:"bandwidth_used"`
 	DateUpload    time.Time `json:"date_upload"`
 	DateLastView  time.Time `json:"date_last_view"`
 	MimeType      string    `json:"mime_type"`

pixelapi/list.go

@@ -26,6 +26,7 @@ type ListFile struct {
 	DateCreated   time.Time `json:"date_created"`
 	DateLastView  time.Time `json:"date_last_view"`
 	Views         int64     `json:"views"`
+	BandwidthUsed uint64    `json:"bandwidth_used"`
 }
 
 // GetList get a List from the pixeldrain API. Errors will be available through

res/static/script/ListNavigator.js

@@ -209,12 +209,6 @@ var ListNavigator = {
 			document.getElementById("button-expand-toolbar").style.top = navHeight+"px";
 			document.getElementById("sharebar").style.top              = navHeight+"px";
 			document.getElementById("info_popup").style.top            = (navHeight+20)+"px";
-			// $("#listNavigator").animate(        {top: 0},        {"duration": 1500, "queue": false});
-			// $("#filepreview").animate(          {top: navHeight},{"duration": 1500, "queue": false});
-			// $("#toolbar").animate(              {top: navHeight},{"duration": 1500, "queue": false});
-			// $("#button-expand-toolbar").animate({top: navHeight},{"duration": 1500, "queue": false});
-			// $("#sharebar").animate(             {top: navHeight},{"duration": 1500, "queue": false});
-			// $("#info_popup").css("top", "120px");
 		}, 200);
 	}
 };

res/static/script/Toolbar.js

@@ -55,8 +55,9 @@ var Toolbar = {
 			document.getElementById("btnCopy").classList.remove("button_highlight")
 		}, 60000);
 	},
-	setViews: function(amount){
+	setStats: function(views, downloads){
-		document.getElementById("views").innerText = "Views: "+amount;
+		document.getElementById("stat_views").innerText = views
+		document.getElementById("stat_downloads").innerText = Math.round(downloads*10)/10;
 	}
 };
 
@@ -127,12 +128,14 @@ var DetailsWindow = {
 						+ "<tr><td>Name<td><td>" + escapeHTML(data.name) + "</td></tr>"
 						+ "<tr><td>Url<td><td><a href=\"/u/" + data.id + "\">/u/" + data.id + "</a></td></tr>"
 						+ "<tr><td>Mime Type<td><td>" + escapeHTML(data.mime_type) + "</td></tr>"
-						+ "<tr><td>IS<td><td>" + data.id + "</td></tr>"
+						+ "<tr><td>ID<td><td>" + data.id + "</td></tr>"
 						+ "<tr><td>Size<td><td class=\"bytecounter\">" + data.size + "</td></tr>"
+						+ "<tr><td>Bandwidth<td><td class=\"bytecounter\">" + data.bandwidth_used + "</td></tr>"
 						+ "<tr><td>Upload Date<td><td>" + data.date_upload + "</td></tr>"
 						+ "<tr><td>Description<td><td>" + escapeHTML(file.description) + "</td></tr>"
 						+ "</table>"
 					);
+					Toolbar.setStats(data.views, data.bandwidth_used/data.size);
 				}
 			});
 		} else {
@@ -142,9 +145,11 @@ var DetailsWindow = {
 				+ "<tr><td>Mime Type<td><td>" + escapeHTML(file.mime_type) + "</td></tr>"
 				+ "<tr><td>ID<td><td>" + file.id + "</td></tr>"
 				+ "<tr><td>Size<td><td class=\"bytecounter\">" + file.size + "</td></tr>"
+				+ "<tr><td>Bandwidth<td><td class=\"bytecounter\">" + file.bandwidth_used + "</td></tr>"
 				+ "<tr><td>Upload Date<td><td>" + file.date_upload + "</td></tr>"
 				+ "</table>"
 			);
+			Toolbar.setStats(file.views, file.bandwidth_used/file.size);
 		}
 	}
 };

res/static/script/Viewer.js

@@ -40,7 +40,6 @@ var Viewer = {
 		});
 
 		DetailsWindow.setDetails(file);
-		Toolbar.setViews(file.views);
 	}
 };
 

res/static/style/viewer.css

@@ -148,6 +148,13 @@ body{
 	vertical-align: 6px;
 }
 
+.toolbar_label {
+	text-align: left;
+	padding-left: 10px;
+	font-size: 0.8em;
+	line-height: 0.7em;
+}
+
 #sponsors{
 	position: relative;
 	height: 600px;

res/template/file_viewer.html

@@ -45,7 +45,10 @@
 				<div>
 					<button class="toolbar_button button_full_width" onClick="Toolbar.toggle();">Hide Toolbar</button>
 
-					<div id="views" style="text-align: center;">Views: No</div>
+					<div id="stat_views_label" class="toolbar_label">Views</div>
+					<div id="stat_views" style="text-align: center;">N/A</div>
+					<div id="stat_downloads_label" class="toolbar_label">Downloads</div>
+					<div id="stat_downloads" style="text-align: center;">N/A</div>
 
 					<a href="/" id="btnHome" class="button toolbar_button button_full_width">
 						<img src="/res/img/pixeldrain_small.png" alt="Back to the Home page"/>

res/template/fragments/api/file.html

@@ -158,6 +158,7 @@
 	"date_last_view": 1485894987, // Timestamp
 	"size": 5694837, // Bytes
 	"views" 1234, // Amount of unique file views
+	"bandwidth_used": 1234567890, // Bytes
 	"mime_type" "image/png",
 	"description": "File description",
 	"mime_image": "http://pixeldra.in/res/img/mime/image-png.png", // Image associated with the mime type

res/template/fragments/api/list.html

@@ -130,7 +130,8 @@
 			"description": "",
 			"date_created": 1513033304,
 			"date_last_view": 1513033304,
-			"views": 1
+			"views": 1,
+			"bandwidth_used": 1234567890
 		},
 		{
 			"detail_href": "/file/RKwgZb/info",
@@ -139,7 +140,8 @@
 			"description": "",
 			"date_created": 1513033304,
 			"date_last_view": 1513033304,
-			"views": 2
+			"views": 2,
+			"bandwidth_used": 1234567890
 		},
 		{
 			"detail_href": "/file/DRaL_e/info",
@@ -148,7 +150,8 @@
 			"description": "",
 			"date_created": 1513033304,
 			"date_last_view": 1513033304,
-			"views": 3
+			"views": 3,
+			"bandwidth_used": 1234567890
 		}
 	]
 }

webcontroller/file_viewer.go

@@ -88,6 +88,7 @@ func (wc *WebController) serveFileViewerDemo(w http.ResponseWriter, r *http.Requ
 			"date_lastview":  "2017-01-01 12:34:56",
 			"size":           123456789,
 			"views":          1,
+			"bandwidth_used": 123456789,
 			"mime_type":      "text/demo",
 			"description":    "A file to demonstrate the viewer page",
 			"mime_image":     "/res/img/mime/text.png",