updating stats counter

res/include/script/file_viewer/Toolbar.js

@@ -5,6 +5,11 @@ function Toolbar(viewer) {
 	this.currentFile      = null
 	this.editWindow       = null
 
+	this.views            = 0
+	this.bandwidth        = 0
+	this.statsInterval    = 1000
+	this.statsTimeout     = null
+
 	this.divToolbar       = document.getElementById("toolbar")
 	this.divFilePreview   = document.getElementById("filepreview")
 	this.downloadFrame    = document.getElementById("download_frame")
@@ -27,9 +32,38 @@ function Toolbar(viewer) {
 
 Toolbar.prototype.setFile = function(file) {
 	this.currentFile = file
-	this.spanViews.innerText = formatThousands(file.views)
-	this.spanDownloads.innerText = formatThousands(Math.round(file.bandwidth_used/file.size))
 	this.spanSize.innerText = formatDataVolume(file.size, 3)
+
+	this.setStats()
+}
+
+// This function periodically updates the stats using an exponential backoff
+// timer. It starts with one query per second, and it increases by one second
+// every run. When the stats change it resets back to one second.
+Toolbar.prototype.setStats = function() {
+	clearTimeout(this.statsTimeout)
+
+	let size = this.currentFile.size
+
+	fetch(this.currentFile.stats_href).then(resp => {
+		return resp.json()
+	}).then(resp => {
+		if (resp.views != this.views || resp.bandwidth != this.bandwidth) {
+			this.statsInterval = 1000
+		} else {
+			this.statsInterval = this.statsInterval + 1000
+		}
+
+		this.views = resp.views
+		this.spanViews.innerText = formatThousands(this.views)
+		this.bandwidth = resp.bandwidth
+		this.spanDownloads.innerText = formatThousands(Math.round(this.bandwidth/size))
+
+		this.statsTimeout = setTimeout(() => { this.setStats() }, this.statsInterval)
+	}).catch(err => {
+		console.error("Failed to update stats:", err)
+		this.statsTimeout = setTimeout(() => { this.setStats() }, 10000)
+	})
 }
 
 Toolbar.prototype.toggle = function() {

res/include/script/file_viewer/Viewer.js

@@ -228,6 +228,7 @@ function fileFromAPIResp(resp) {
 	resp.download_href   = apiEndpoint+"/file/"+resp.id+"?download"
 	resp.view_href       = apiEndpoint+"/file/"+resp.id+"/view"
 	resp.timeseries_href = apiEndpoint+"/file/"+resp.id+"/timeseries"
+	resp.stats_href      = apiEndpoint+"/file/"+resp.id+"/stats"
 	resp.link            = domainURL()+"/u/"+resp.id
 	if (resp.description === undefined) {
 		resp.description = ""
@@ -245,6 +246,7 @@ function fileFromSkyNet(resp) {
 	file.download_href     = "https://skydrain.net/file/"+resp.id+"?attachment=1"
 	file.view_href         = ""
 	file.timeseries_href   = ""
+	file.stats_href        = ""
 	file.link              = domainURL()+"/s/"+resp.id
 	return file
 }

res/include/style/layout.css

@@ -357,7 +357,7 @@ pre{
 }
 .file_button:hover,
 .file_button_selected {
-	box-shadow: 0px 0px 3px 3px var(--highlight_color);
+	box-shadow: 0 0 2px 2px var(--highlight_color), inset 0 0 1px 1px var(--highlight_color);
 	text-decoration: none;
 }
 .file_button > img{