From 0f19dddb3027370277201632b37bc91850198084 Mon Sep 17 00:00:00 2001
From: BroodjeAap <davidzessen@gmail.com>
Date: Thu, 6 Aug 2020 18:26:20 +0000
Subject: [PATCH] working 'play' functionality for a moment

---
 static/js/moments.js   | 29 +++++++++++++++++++++++++----
 templates/moments.html |  3 ++-
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/static/js/moments.js b/static/js/moments.js
index 3994afd..5e26f45 100755
--- a/static/js/moments.js
+++ b/static/js/moments.js
@@ -2,6 +2,8 @@ let current_moment = null;
 let moment_current_image = null;
 let moment_slider = null;
 
+let interval_id = null;
+
 document.addEventListener("DOMContentLoaded", function(){
     current_moment = moments[0];
 
@@ -25,14 +27,33 @@ function set_current_moment(i){
 
     moment_slider.max = current_moment.length - 1;
     moment_slider.value = 0;
+    if (interval_id != null){
+        clearInterval(interval_id);
+        interval_id = null;
+    }
 }
 
 function next_moment(){
-    console.log(moment_slider.value)
-    moment_slider.value++;
-    console.log(moment_slider.value)
-    if (moment_slider.value >= moment_slider.max){
+    if (parseInt(moment_slider.value) >= parseInt(moment_slider.max)){
         moment_slider.value = "0";
+    } else {
+        moment_slider.value++;    
     }
     update_moment_image();
+}
+
+function play_moment(){
+    next_moment();
+    if (interval_id != null){
+        return
+    }
+    interval_id = setInterval(next_moment, interval);
+}
+
+function pause_moment(){
+    if (interval_id == null){
+        return
+    }
+    clearInterval(interval_id);
+    interval_id = null;
 }
\ No newline at end of file
diff --git a/templates/moments.html b/templates/moments.html
index 16881ad..e48f651 100755
--- a/templates/moments.html
+++ b/templates/moments.html
@@ -5,8 +5,9 @@
 {{define "content"}}
 
 <img src="#" id="moment_current_image">
+<input type="button" onclick="play_moment()" value="Play">
+<input type="button" onclick="pause_moment()" value="Pause">
 <input type="range" min="0" max="1" value="0" id="moment_slider">
-<a href="#" onclick="next_moment()">View</a>
 <table class="pure-table pure-table-horizontal pure-table-striped">
     <thead>
         <th>Moment</th>