From a6e35644aba82c59b8e7e5888a0775aa5b39e88f Mon Sep 17 00:00:00 2001
From: Wim Brand <fornax@fornaxian.com>
Date: Tue, 7 Jul 2020 21:19:16 +0200
Subject: [PATCH] updating stats counter

---
 res/include/script/file_viewer/Toolbar.js | 38 +++++++++++++++++++++--
 res/include/script/file_viewer/Viewer.js  |  2 ++
 res/include/style/layout.css              |  2 +-
 3 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/res/include/script/file_viewer/Toolbar.js b/res/include/script/file_viewer/Toolbar.js
index 837d8c1..5f62ff2 100644
--- a/res/include/script/file_viewer/Toolbar.js
+++ b/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() {
diff --git a/res/include/script/file_viewer/Viewer.js b/res/include/script/file_viewer/Viewer.js
index f0d7860..484a6f9 100644
--- a/res/include/script/file_viewer/Viewer.js
+++ b/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
 }
diff --git a/res/include/style/layout.css b/res/include/style/layout.css
index f414f63..9c0604e 100644
--- a/res/include/style/layout.css
+++ b/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{