From e4102dccb974e475428690d33c8fe8b35a9c721d Mon Sep 17 00:00:00 2001
From: BroodjeAap <davidzessen@gmail.com>
Date: Tue, 4 Aug 2020 19:53:41 +0000
Subject: [PATCH] added basic 'scrolling' through a moment with a range input

---
 main.go                |  4 ++--
 static/js/moments.js   | 15 +++++++++++++++
 templates/moments.html | 14 +++++++++++++-
 3 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100755 static/js/moments.js

diff --git a/main.go b/main.go
index 12d3f25..5d35691 100755
--- a/main.go
+++ b/main.go
@@ -218,7 +218,6 @@ func (server Server) streamRecordings(w http.ResponseWriter, r *http.Request) {
 		if i == 0 {
 			continue
 		}
-		log.Println(i)
 		previousImage := images[i-1]
 		previousTime, err := time.Parse(timeLayout, previousImage.Name())
 		if err != nil {
@@ -254,7 +253,7 @@ func (server Server) streamRecordings(w http.ResponseWriter, r *http.Request) {
 		log.Println(err)
 		return
 	}
-	momentsTemplate.Execute(w, struct {
+	err = momentsTemplate.Execute(w, struct {
 		Streams   map[string]*Stream
 		Moments   [][]string
 		Stream    *Stream
@@ -265,6 +264,7 @@ func (server Server) streamRecordings(w http.ResponseWriter, r *http.Request) {
 		stream,
 		watchArea,
 	})
+	log.Println(err)
 }
 
 func main() {
diff --git a/static/js/moments.js b/static/js/moments.js
new file mode 100755
index 0000000..0bf4026
--- /dev/null
+++ b/static/js/moments.js
@@ -0,0 +1,15 @@
+let current_moment = null;
+
+document.addEventListener("DOMContentLoaded", function(){
+    current_moment = moments[0];
+
+    let moment_current_image = document.getElementById("moment_current_image");
+    moment_current_image.src = "/streams/" + streamName + "/" + watchAreaName + "/" + current_moment[0];
+    let moment_slider = document.getElementById("moment_slider");
+    moment_slider.max = current_moment.length - 1;
+    moment_slider.value = 0;
+
+    moment_slider.addEventListener("change", e => {
+        moment_current_image.src = "/streams/" + streamName + "/" + watchAreaName + "/" + current_moment[moment_slider.value];
+    });
+});
\ No newline at end of file
diff --git a/templates/moments.html b/templates/moments.html
index d4dfeec..973ed95 100755
--- a/templates/moments.html
+++ b/templates/moments.html
@@ -3,9 +3,21 @@
 <script src="/static/js/moments.js"></script>
 {{end}}
 {{define "content"}}
+
+<img src="#" id="moment_current_image">
+<input type="range" min="0" max="1" value="0" id="moment_slider">
+
+<script>
+    let streamName = "{{.Stream.Name}}";
+    let watchAreaName = "{{.WatchArea.Name}}";
+    let moments = [
     {{range $moment := .Moments}}
+        [
         {{range $image := $moment}}
-            <img src="/streams/{{$.Stream.Name}}/{{$.WatchArea.Name}}/{{$image}}">
+            '{{$image}}',
         {{end}}
+],
     {{end}}
+    ];
+</script>
 {{end}}
\ No newline at end of file