From 824005f315f77297a9b4757e93af2fba9f45e290 Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Fri, 6 Dec 2019 17:27:58 +0100
Subject: [PATCH] added play/pause for slider button

---
 rowers/templates/embedded_video.html | 175 ++++++++++++++++++---------
 1 file changed, 118 insertions(+), 57 deletions(-)

diff --git a/rowers/templates/embedded_video.html b/rowers/templates/embedded_video.html
index b8bd7814..374bc716 100644
--- a/rowers/templates/embedded_video.html
+++ b/rowers/templates/embedded_video.html
@@ -100,7 +100,7 @@
       id="myRange">
     </div>
     <div id="dataplay"></div>
-    <div id="datastop"></div>
+    <!-- <div id="datastop"></div> -->
   </li>
   <li class="grid_2">
     <div id="player"></div>
@@ -119,7 +119,8 @@
       // 3. This function creates an <iframe> (and YouTube player)
       //    after the API code downloads.
       var player;
-      var playing;
+      var playing = false;
+      var dataplaying = false;
       var videotime = 0;
       var data = JSON.parse('{{ data|safe }}');
       {% for id, metric in metrics.items %}
@@ -185,56 +186,65 @@
         datatime = slider.value;
 
         if (lock.checked) {
-          sliderpos = Math.round(videotime) + Math.round(delay);
-          slider.value = sliderpos;
-          // Setting Data
-          // velo = boatspeed[Math.round(datatime)];
-          lat = latitude[Math.round(datatime)];
-          lon = longitude[Math.round(datatime)];
-          // strokerate = spm[Math.round(datatime)];
-          // catchangle = ctch[Math.round(datatime)];
-          {% for id, metric in metrics.items %}
-          {{ id }}_now = {{ id }}_values[Math.round(datatime)];
-          // console.log(datatime,{{ id }}_now, "{{ metric.name }}")
-          {% endfor %}
+          if (!dataplaying) { // set data values
+            sliderpos = Math.round(videotime) + Math.round(delay);
+            slider.value = sliderpos;
 
-          document.getElementById("time").innerHTML = Math.round(videotime);
-          document.getElementById("datatime").innerHTML = Math.round(datatime);
-          // document.getElementById("speed").innerHTML = velo;
-          // document.getElementById("spm").innerHTML = strokerate;
-          // document.getElementById("catch").innerHTML = catchangle;
-          {% for id, metric in metrics.items %}
-          document.getElementById("{{ id }}").innerHTML = {{ id }}_now;
-          document.getElementById("{{ id }}").className = 'bold';
-          {% endfor %}
-          {% for group in metricsgroups %}
-          try {
-            set_{{ group }}();
-          } catch (e) {}
-          {% endfor %}
-          try {
-            var newLatLng = new L.LatLng(lat, lon);
-            // console.log(newLatLng);
-            marker.setLatLng(newLatLng);
-          } catch (e) {
+            // Setting Data
+            // velo = boatspeed[Math.round(datatime)];
+            lat = latitude[Math.round(datatime)];
+            lon = longitude[Math.round(datatime)];
+            // strokerate = spm[Math.round(datatime)];
+            // catchangle = ctch[Math.round(datatime)];
+            {% for id, metric in metrics.items %}
+            {{ id }}_now = {{ id }}_values[Math.round(datatime)];
+            // console.log(datatime,{{ id }}_now, "{{ metric.name }}")
+            {% endfor %}
+
+
+            document.getElementById("time").innerHTML = Math.round(videotime);
+
+            document.getElementById("datatime").innerHTML = Math.round(datatime);
+
+            // document.getElementById("speed").innerHTML = velo;
+            // document.getElementById("spm").innerHTML = strokerate;
+            // document.getElementById("catch").innerHTML = catchangle;
+            {% for id, metric in metrics.items %}
+            document.getElementById("{{ id }}").innerHTML = {{ id }}_now;
+            document.getElementById("{{ id }}").className = 'bold';
+            {% endfor %}
+            {% for group in metricsgroups %}
+            try {
+              set_{{ group }}();
+            } catch (e) {}
+            {% endfor %}
+            try {
+              var newLatLng = new L.LatLng(lat, lon);
+              // console.log(newLatLng);
+              marker.setLatLng(newLatLng);
+            } catch (e) {
+            }
           }
 
         } else {
-          output.value = Math.round(datatime)-Math.round(videotime);
+          if (!dataplaying) {
+            output.value = Math.round(datatime)-Math.round(videotime);
+          }
         }
 
       }
 
       function stopVideo() {
-        player.stopVideo();
+        player.pauseVideo();
+        playing = false;
       }
 
       // call this function when player state changes
       function onPlayerStateChange(event) {
         if (event.data == YT.PlayerState.PLAYING) {
-          playing = false;
+
         } else {
-          playing = true;
+
         }
       }
     </script>
@@ -325,15 +335,18 @@
 
   // Update the current slider value (each time you drag the slider handle)
   slider.oninput = function() {
-    try {
-      output.value = Math.round(slider.value)-Math.round(player.getCurrentTime()); // Display the default slider value
-      delay = Math.round(slider.value)-Math.round(player.getCurrentTime());
+    if (!lock.checked) {
+      try {
+
+        delay = Math.round(slider.value)-Math.round(player.getCurrentTime());
+        output.value = Math.round(slider.value)-Math.round(player.getCurrentTime()); // Display the default slider value
+      }
+      catch(err) {
+        output.value = Math.round(slider.value);
+        delay = Math.round(slider.value);
+      }
     }
-    catch(err) {
-      output.value = Math.round(slider.value);
-      delay = Math.round(slider.value);
-    }
-    clearInterval(timeupdater)
+    clearInterval(timeupdater);
     var datatime = this.value
     var videotime = Math.round(player.getCurrentTime());
     if (lock.checked) {
@@ -341,13 +354,14 @@
         player.seekTo(this.value-output.value);
         videotime = this.value-output.value;
       } else {
-        if (playing) {
+        if (playing && !dataplaying) {
           player.seekTo(0);
           player.playVideo();
         }
-        else {
+        else if (!playing && !dataplaying) {
           player.seekTo(0);
           player.pauseVideo();
+          playing = false;
         }
       }
     } else {
@@ -415,10 +429,10 @@
         else {
           player.seekTo(0);
           player.pauseVideo();
+          playing = false;
         }
       }
     } else {
-      console.log('changing, not checked');
       output.value = this.value-Math.round(player.getCurrentTime());
     }
     var datatime = this.value
@@ -477,6 +491,7 @@
 // pluggen
 var timer;
 
+
 function clock() {
   timer = setInterval(myClock, 1000);
   var c = parseInt(slider.value,10);
@@ -488,6 +503,28 @@ function clock() {
     slider.value = c;
 
     // update data fields
+    lat = latitude[Math.round(c)];
+    lon = longitude[Math.round(c)];
+    {% for id, metric in metrics.items %}
+    {{ id }}_now = {{ id }}_values[Math.round(c)];
+    // console.log(datatime,{{ id }}_now, "{{ metric.name }}")
+    {% endfor %}
+
+    {% for id, metric in metrics.items %}
+    document.getElementById("{{ id }}").innerHTML = {{ id }}_now;
+    document.getElementById("{{ id }}").className = 'bold';
+    {% endfor %}
+    {% for group in metricsgroups %}
+    try {
+      set_{{ group }}();
+    } catch (e) {}
+    {% endfor %}
+    try {
+      var newLatLng = new L.LatLng(lat, lon);
+      // console.log(newLatLng);
+      marker.setLatLng(newLatLng);
+    } catch (e) {
+    }
 
     if (lock.checked) {
       player.seekTo(c+parseInt(output.value));
@@ -505,19 +542,43 @@ dataplay.type = "button";
 dataplay.value = "Play";
 document.getElementById("dataplay").appendChild(dataplay);
 
-var datastop = document.createElement("input");
-datastop.type = "button";
-datastop.value = "Stop";
-document.getElementById("datastop").appendChild(datastop)
+// var datastop = document.createElement("input");
+// datastop.type = "button";
+// datastop.value = "Stop";
+// document.getElementById("datastop").appendChild(datastop)
 
 dataplay.onclick = function() {
-  clock();
+  if (lock.checked) {
+    dataplaying = false;
+    if (playing == false) {
+      player.playVideo();
+      dataplay.value = "Pause";
+      playing = true;
+    } else {
+      player.pauseVideo();
+      dataplay.value = "Play";
+      playing = false;
+    }
+  } else {
+    if (!dataplaying) {
+      clock();
+      dataplay.value = "Pause";
+      dataplaying = true;
+      if (lock.checked) {
+        playing = true;
+      }
+    } else {
+      clearInterval(timer);
+      dataplay.value = "Play";
+      dataplaying = false;
+    }
+  }
 }
 
-datastop.onclick = function() {
-  console.log('stopping');
-  clearInterval(timer);
-}
+// datastop.onclick = function() {
+//   console.log('stopping');
+//   clearInterval(timer);
+// }
 
 });
 </script>