From 87822b461772ad5b4ab52b5de6755aa002aaf167 Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Mon, 11 Nov 2019 21:54:37 +0100
Subject: [PATCH] player Lock function & prep for more metrics

---
 rowers/templates/embedded_video.html | 140 ++++++++++++++++++++-------
 rowers/views/workoutviews.py         |  27 +++++-
 2 files changed, 129 insertions(+), 38 deletions(-)

diff --git a/rowers/templates/embedded_video.html b/rowers/templates/embedded_video.html
index a1ebdd87..505560a3 100644
--- a/rowers/templates/embedded_video.html
+++ b/rowers/templates/embedded_video.html
@@ -59,26 +59,6 @@
 {% language 'en' %}
 <h1>Video Analysis for {{ workout.name }}</h1>
 <ul class="main-content">
-  <li>
-    Data Time
-    <span id="datatime">
-    </span> seconds
-  </li>
-  <li>
-    Video Time
-    <span id="time">
-    </span> seconds
-  </li>
-  <li>
-    SPM
-    <span id="spm">
-    </span>
-  </li>
-  <li>
-    Boat Speed
-    <span id="speed">
-    </span> m/s
-  </li>
   <li class="grid_2">
     <div style="height:100%" id="theplot" class="flexplot mapdiv">
       {{ mapdiv | safe}}
@@ -104,13 +84,18 @@
       // 3. This function creates an <iframe> (and YouTube player)
       //    after the API code downloads.
       var player;
+      var playing;
       var videotime = 0;
       var data = JSON.parse('{{ data|safe }}');
-      var boatspeed = data["boatspeed"];
+      {% for id, metric in metrics.items %}
+      var {{ id }}_values = data["{{ id }}"];
+      // console.log("{{ id }}_values",{{ id }}_values);
+      {% endfor %}
+      // var boatspeed = data["boatspeed"];
       var latitude = data["latitude"];
       var longitude = data["longitude"];
-      var spm = data["spm"];
-      var ctch = data["catch"];
+      // var spm = data["spm"];
+      // var ctch = data["catch"];
 
       function onYouTubeIframeAPIReady() {
         player = new YT.Player('player', {
@@ -118,7 +103,8 @@
           width: '640',
           videoId: '{{ video_id }}',
           events: {
-            'onReady': onPlayerReady
+            'onReady': onPlayerReady,
+            'onStateChange': onPlayerStateChange
           }
         });
       }
@@ -128,21 +114,34 @@
         // event.target.playVideo();
         function updateTime() {
           var oldTime = videotime;
+          var slider = document.getElementById("myRange");
+          var lock = document.getElementById("lock");
           if(player && player.getCurrentTime) {
             videotime = player.getCurrentTime();
-            var delay = document.getElementById("myRange").value;
+            var delay = document.getElementById("id_delay").value;
+            sliderpos = Math.round(videotime) + Math.round(delay);
+            slider.value = sliderpos;
+
             var datatime = parseFloat(videotime)+parseFloat(delay);
-            velo = boatspeed[Math.round(datatime)];
+            // 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)];
+            // 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;
-            gauge.set(catchangle);
+            // 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;
+            {% endfor %}
+            gauge.set(catch_now);
             var newLatLng = new L.LatLng(lat, lon);
             marker.setLatLng(newLatLng);
           }
@@ -155,14 +154,49 @@
 
       // when the time changes, this will be called.
       function onProgress(currentTime) {
+        var slider = document.getElementById("myRange");
+        var lock = document.getElementById("lock");
+        videotime = player.getCurrentTime();
+        var delay = document.getElementById("id_delay").value;
+        sliderpos = Math.round(videotime) + Math.round(delay);
+        slider.value = sliderpos;
       }
 
       function stopVideo() {
         player.stopVideo();
       }
 
+      // call this function when player state changes
+      function onPlayerStateChange(event) {
+        if (event.data == YT.PlayerState.PLAYING) {
+          playing = false;
+        } else {
+          playing = true;
+        }
+      }
+
     </script>
   </li>
+  <li class="grid_4">
+    <input type="checkbox" name="lock" id="lock" value="Lock">Lock Video
+  </li>
+  <li>
+    Data Time
+    <span id="datatime">
+    </span> seconds
+  </li>
+  <li>
+    Video Time
+    <span id="time">
+    </span> seconds
+  </li>
+  {% for id, metric in metrics.items %}
+  <li>
+    {{ metric.name }}
+    <span id="{{ id }}">
+    </span> {{ metric.unit }}
+  </li>
+  {% endfor %}
   <li class="grid">
     <canvas id="angles"></canvas>
     <script type="text/javascript" src="https://bernii.github.io/gauge.js/dist/gauge.js"></script>
@@ -226,6 +260,13 @@
   </li>
 </ul>
 <script>
+  // lock
+  var lock = document.getElementById("lock");
+  {% if locked %}
+  lock.checked = true;
+  {% endif %}
+
+
   // slider
   var slider = document.getElementById("myRange");
   {% if analysis and user.is_authenticated and user == rower.user %}
@@ -234,15 +275,44 @@
   document.getElementById("myRange").style.display = "none";
   {% endif %}
   var output = document.getElementById("id_delay");
-  output.value = slider.value; // Display the default slider value
-
+  try {
+    output.value = Math.round(slider.value)-Math.round(player.getCurrentTime()); // Display the default slider value
+  }
+  catch(err) {
+    output.value = Math.round(slider.value);
+  }
   // Update the current slider value (each time you drag the slider handle)
   slider.oninput = function() {
-    output.value = this.value;
+    if (lock.checked) {
+      if (this.value-output.value > 0) {
+        player.seekTo(this.value-output.value);
+      } else {
+        if (playing) {
+          player.seekTo(0);
+          player.startVideo();
+        }
+        else {
+          player.seekTo(0);
+          player.pauseVideo();
+        }
+      }
+    } else {
+      console.log('changing');
+      output.value = this.value-Math.round(player.getCurrentTime());
+    }
   }
 
   output.oninput = function() {
-    slider.value = this.value;
+    slider.value = this.value+Math.round(player.getCurrentTime());
+  }
+
+  // lock delay form field if checkbox checked
+  lock.oninput = function() {
+    if (this.checked) {
+      output.disabled = true;
+    } else {
+      output.disabled = false;
+    }
   }
 </script>
 {% endlanguage %}
diff --git a/rowers/views/workoutviews.py b/rowers/views/workoutviews.py
index 48bb5aa2..261a456e 100644
--- a/rowers/views/workoutviews.py
+++ b/rowers/views/workoutviews.py
@@ -90,7 +90,25 @@ def get_video_data(w):
 
     maxtime = coordinates['time'].max()
 
-    return data, mapscript, mapdiv, maxtime
+    metrics = {
+        'spm': {
+            'unit': '',
+            'metric': 'spm',
+            'name': 'SPM',
+        },
+        'boatspeed': {
+            'unit': 'm/s',
+            'metric': 'boatspeed',
+            'name': 'Boat Speed'
+        },
+        'catch': {
+            'unit': 'degrees',
+            'metric': 'catch',
+            'name': 'Catch Angle'
+        }
+    }
+
+    return data, metrics, mapscript, mapdiv, maxtime
 
 # Show a video compared with data
 def workout_video_view(request,id=''):
@@ -141,7 +159,7 @@ def workout_video_view(request,id=''):
         form = None
 
     # get data
-    data, mapscript, mapdiv, maxtime = get_video_data(w)
+    data, metrics, mapscript, mapdiv, maxtime = get_video_data(w)
 
     breadcrumbs = [
             {
@@ -172,6 +190,7 @@ def workout_video_view(request,id=''):
                       'breadcrumbs':breadcrumbs,
                       'analysis':analysis,
                       'maxtime':maxtime,
+                      'metrics':metrics,
                       })
 
 
@@ -221,7 +240,7 @@ def workout_video_create_view(request,id=0):
         delay = 0
 
     # get data
-    data, mapscript, mapdiv, maxtime = get_video_data(w)
+    data, metrics, mapscript, mapdiv, maxtime = get_video_data(w)
 
     breadcrumbs = [
             {
@@ -254,6 +273,8 @@ def workout_video_create_view(request,id=0):
                       'analysis':analysis,
                       'breadcrumbs':breadcrumbs,
                       'maxtime':maxtime,
+                      'metrics':metrics,
+                      'locked': False,
                       })
 
 # Show the EMpower Oarlock generated Stroke Profile