working 'play' functionality for a moment

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

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>