Merge branch 'feature/improvedvideo' into develop

rowers/templates/embedded_video.html

@@ -157,10 +157,35 @@
         if(player && player.getCurrentTime) {
           videotime = player.getCurrentTime();
           var delay = document.getElementById("id_delay").value;
+          if (lock.checked) {
+            sliderpos = Math.round(videotime) + Math.round(delay);
+            slider.value = sliderpos;
+          }
+
+
+          // gauge.set(catch_now);
+
+        }
+        if(videotime !== oldTime) {
+          onProgress(videotime);
+        }
+      }
+
+      timeupdater = setInterval(updateTime, 1000);
+
+      // 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;
+        var output = document.getElementById("id_delay");
+        datatime = slider.value;
+
+        if (lock.checked) {
           sliderpos = Math.round(videotime) + Math.round(delay);
           slider.value = sliderpos;
-
+          // Setting Data
-          var datatime = parseFloat(videotime)+parseFloat(delay);
           // velo = boatspeed[Math.round(datatime)];
           lat = latitude[Math.round(datatime)];
           lon = longitude[Math.round(datatime)];
@@ -185,28 +210,17 @@
             set_{{ group }}();
           } catch (e) {}
           {% endfor %}
-          // gauge.set(catch_now);
           try {
             var newLatLng = new L.LatLng(lat, lon);
             // console.log(newLatLng);
             marker.setLatLng(newLatLng);
-          } catch (e) {}
+          } catch (e) {
-        }
+          }
-        if(videotime !== oldTime) {
-          onProgress(videotime);
-        }
-      }
 
-      timeupdater = setInterval(updateTime, 1000);
+        } else {
+          output.value = Math.round(datatime)-Math.round(videotime);
+        }
 
-      // 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() {
@@ -221,7 +235,6 @@
           playing = true;
         }
       }
-
     </script>
   </li>
   {% if user.is_authenticated and user == workout.user.user %}
@@ -296,7 +309,7 @@
   lock.checked = true;
   output.disabled = true;
   {% endif %}
-
+  var delay = output.value;
 
   // slider
   var slider = document.getElementById("myRange");
@@ -306,14 +319,87 @@
   document.getElementById("myRange").style.display = "none";
   {% endif %}
   var output = document.getElementById("id_delay");
-  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() {
+    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());
+    }
+    catch(err) {
+      output.value = Math.round(slider.value);
+      delay = Math.round(slider.value);
+    }
+    clearInterval(timeupdater)
+    var datatime = this.value
+    var videotime = Math.round(player.getCurrentTime());
+    if (lock.checked) {
+      if (this.value-output.value > 0) {
+        player.seekTo(this.value-output.value);
+        videotime = this.value-output.value;
+      } else {
+        if (playing) {
+          player.seekTo(0);
+          player.playVideo();
+        }
+        else {
+          player.seekTo(0);
+          player.pauseVideo();
+        }
+      }
+    } else {
+      // console.log('changing, not checked');
+      output.value = this.value-Math.round(player.getCurrentTime());
+    }
+
+    // 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) {
+    }
+    timeupdater = setInterval(updateTime, 1000);
+  }
+
+  output.oninput = function() {
+    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;
+    }
+  }
+  // Update the current slider value (each time the slider is changed)
+  slider.onchange = function() {
     clearInterval(timeupdater)
     if (lock.checked) {
       if (this.value-output.value > 0) {
@@ -329,10 +415,46 @@
         }
       }
     } else {
-      // console.log('changing');
+      console.log('changing, not checked');
       output.value = this.value-Math.round(player.getCurrentTime());
     }
-    timeupdater = setInterval(updateTime, 1000)
+    var datatime = this.value
+    var videotime = Math.round(player.getCurrentTime());
+    //
+    // 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) {
+      console.log('error')
+    }
+    console.log('changed all')
+    timeupdater = setInterval(updateTime, 1000);
   }
 
   output.oninput = function() {