rowsandall/rowers/templates/embedded_video.html

{% extends "newbase.html" %}
{% load staticfiles %}
{% load rowerfilters %}
{% load i18n %}
{% load leaflet_tags %}



{% block title %}Workout Video{% endblock %}

{% block meta %}
{% leaflet_js %}
{% leaflet_css %}
{% endblock %}

{% block main %}

<p>
  {% if workout|previousworkout:rower.user %}
  <a href="/rowers/workout/{{ workout|previousworkout:rower.user }}/stats"
     title="Jump to preceding workout"><em>Previous</em></a>&nbsp;
  {% endif %}
  {% if workout|nextworkout:rower.user %}
  <a href="/rowers/workout/{{ workout|nextworkout:rower.user }}/stats"
     title="Jump to following workout"><em>Next</em></a>
  {% endif %}
</p>

{% language 'en' %}
<h1>Workout Video for {{ workout.name }}</h1>
<ul class="main-content">
  <li class="grid_4">
    <p>
      This page will contain an embedded video
    </p>
  </li>
  <li class="grid_4">
    <div style="height:100%" id="theplot" class="flexplot mapdiv">
      {{ mapdiv | safe}}

    </div>
  </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_4">
    <div id="player"></div>
    <script>
      // 1. Code for the map
      {{ mapscript | safe }}
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      var videotime = 0;
      var data = JSON.parse('{{ data|safe }}');
      var boatspeed = data["boatspeed"];
      var latitude = data["latitude"];
      var longitude = data["longitude"];
      var spm = data["spm"]

      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: '{{ video_id }}',
          events: {
            'onReady': onPlayerReady
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
        function updateTime() {
          var oldTime = videotime;
          if(player && player.getCurrentTime) {
            videotime = player.getCurrentTime();
            velo = boatspeed[Math.round(videotime)];
            lat = latitude[Math.round(videotime)];
            lon = longitude[Math.round(videotime)];
            strokerate = spm[Math.round(videotime)];
            document.getElementById("time").innerHTML = Math.round(videotime);
            document.getElementById("speed").innerHTML = velo;
            document.getElementById("spm").innerHTML = strokerate;
            var newLatLng = new L.LatLng(lat, lon);
            marker.setLatLng(newLatLng);
          }
          if(videotime !== oldTime) {
            onProgress(videotime);
          }
        }
        timeupdater = setInterval(updateTime, 1000);
      }

      // when the time changes, this will be called.
      function onProgress(currentTime) {
        if(currentTime > 20) {
          console.log("the video reached 20 seconds!");
        }
      }

      function stopVideo() {
        player.stopVideo();
      }

    </script>
  </li>
  <li class="grid_4">
    {% if not video_id %}
    <p>
      To load your video, paste the URL of your YouTube video in the form below,
      and submit the form.
    </p>
    {% endif %}
    <p>
    <form enctype="multipart/form-data" action="" method="post">
      <table>
        {{ form.as_table }}
      </table>
      {% csrf_token %}
      <input type="submit" value="submit">
    </form>
    </p>
  </li>
</ul>
{% endlanguage %}

{% endblock %}

{% block sidebar %}
{% include 'menu_workout.html' %}
{% endblock %}