added basic 'scrolling' through a moment with a range input

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() {

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];
+    });
+});

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}}