709 lines
21 KiB
HTML
709 lines
21 KiB
HTML
{% extends "newbase.html" %}
|
|
{% load staticfiles %}
|
|
{% load rowerfilters %}
|
|
{% load i18n %}
|
|
{% load leaflet_tags %}
|
|
|
|
|
|
|
|
{% block title %}Workout Video{% endblock %}
|
|
{% block og_title %}{{ analysis.name }}{% endblock %}
|
|
{% block description %}Rowing Video Analysis:{{ analysis.name }}{% endblock %}
|
|
{% block og_description %}Rowing Video Analysis:{{ analysis.name }}{% endblock %}
|
|
{% block og_image %}
|
|
{% if analysis %}
|
|
<meta property="og:image" content="https://img.youtube.com/vi/{{ analysis.video_id }}/hqdefault.jpg" />
|
|
<meta property="og:image:secure_url" content="https://img.youtube.com/vi/{{ analysis.video_id }}/hqdefault.jpg" />
|
|
{% else %}
|
|
<meta property="og:image" content="http://rowsandall.com/static/img/logo_r.png" />
|
|
<meta property="og:image:secure_url" content="https://rowsandall.com/static/img/logo_r.png" />
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% if analysis %}
|
|
{% block image_src %}
|
|
<link rel="image_src" href="https://img.youtube.com/vi/{{ analysis.video_id }}/hqdefault.jpg" />
|
|
{% endblock %}
|
|
{% endif %}
|
|
|
|
{% block meta %}
|
|
{% leaflet_js %}
|
|
{% leaflet_css %}
|
|
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
<script type="text/javascript" src="{% static 'js/videogauges.js' %}"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('form').submit(function(e) {
|
|
$(':disabled').each(function(e) {
|
|
$(this).removeAttr('disabled');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
function copyText() {
|
|
var tempInput = document.createElement("input");
|
|
tempInput.style = "position: absolute; left: -1000px; top: -1000px";
|
|
tempInput.value = "https://rowsandall.com/rowers/video/{{ analysis.id|encode }}/";
|
|
document.body.appendChild(tempInput);
|
|
tempInput.select();
|
|
document.execCommand("copy");
|
|
alert("Copied to clipboard: " + tempInput.value);
|
|
document.body.removeChild(tempInput);
|
|
}
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block main %}
|
|
|
|
<style>
|
|
.slidecontainer {
|
|
width: 100%; /* Width of the outside container */
|
|
}
|
|
|
|
.bold { font-weight: bold; }
|
|
|
|
/* The slider itself */
|
|
.slider {
|
|
-webkit-appearance: none; /* Override default CSS styles */
|
|
appearance: none;
|
|
width: 100%; /* Full-width */
|
|
height: 25px; /* Specified height */
|
|
background: #d3d3d3; /* Grey background */
|
|
outline: none; /* Remove outline */
|
|
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
|
|
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
|
|
transition: opacity .2s;
|
|
}
|
|
|
|
/* Mouse-over effects */
|
|
.slider:hover {
|
|
opacity: 1; /* Fully shown on mouse-over */
|
|
}
|
|
|
|
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
|
|
.slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none; /* Override default look */
|
|
appearance: none;
|
|
width: 25px; /* Set a specific slider handle width */
|
|
height: 25px; /* Slider handle height */
|
|
background: #4CAF50; /* Green background */
|
|
cursor: pointer; /* Cursor on hover */
|
|
}
|
|
|
|
.slider::-moz-range-thumb {
|
|
width: 25px; /* Set a specific slider handle width */
|
|
height: 25px; /* Slider handle height */
|
|
background: #4CAF50; /* Green background */
|
|
cursor: pointer; /* Cursor on hover */
|
|
}
|
|
</style>
|
|
|
|
{% language 'en' %}
|
|
<h1>Video Analysis for {{ workout.name }}</h1>
|
|
<ul class="main-content">
|
|
{% if user.is_authenticated and user == workout.user.user and not locked %}
|
|
<li class="grid_2">
|
|
<p>Paste link to you tube video below</p>
|
|
<p>Use the slider to locate start point for video on workout map</p>
|
|
<p>Playing the video will advance the data in synchonization. Use the regular YouTube
|
|
controls
|
|
to move around in the video and play it.</p>
|
|
<p>You can make manual adjustments to the delay to fine tune the alignment.
|
|
Once you are finished, check "Lock Video and Data" to lock the video and the data.</p>
|
|
<p>Once you are happy with the alignment, you can save the analysis, and
|
|
share with other people.</p>
|
|
</li>
|
|
{% else %}
|
|
<li class="grid_2">
|
|
<p>Playing the video will advance the data in synchronization. Use the regular
|
|
YouTube controls to move around in the video and play it.</p>
|
|
</li>
|
|
{% endif %}
|
|
{% if analysis %}
|
|
<li class="grid_2">
|
|
<span class="fb-share-button" style="height:20px; vertical-align: top;"
|
|
data-href="https://rowsandall.com/rowers/video/{{ analysis.id|encode }}"
|
|
data-layout="button" data-size="small" data-mobile-iframe="false">
|
|
<a class="fb-xfbml-parse-ignore" target="_blank"
|
|
href="https://www.facebook.com/sharer/sharer.php?u=https://rowsandall.com/rowers/video/{{ analysis.id|encode }}/">
|
|
Share</a>
|
|
</span>
|
|
<span>
|
|
<a class="twitter-share-button"
|
|
href="https://twitter.com/intent/tweet"
|
|
data-url="https://rowsandall.com/rowers/video/{{ analysis.id|encode }}/"
|
|
data-text="@rowsandall #rowingdata">Tweet</a>
|
|
</span>
|
|
<span>
|
|
<button title="Copy Shareable Link" onclick="copyText()"
|
|
style="color:#1c75bc;background:none;border:0;"><i class="fas fa-copy"></i></button>
|
|
</span>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
<ul class="main-content">
|
|
<li class="grid_2">
|
|
<div id="theplot" class="flexplot mapdiv">
|
|
{{ mapdiv | safe}}
|
|
|
|
</div>
|
|
<div class="slidecontainer">
|
|
<input type="range" min="0" max="{{ maxtime }}" value="{{ analysis.delay }}"
|
|
id="myRange">
|
|
</div>
|
|
<div id="dataplay"></div>
|
|
<!-- <div id="datastop"></div> -->
|
|
</li>
|
|
<li class="grid_2">
|
|
<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 playing = false;
|
|
var dataplaying = false;
|
|
|
|
var videotime = 0;
|
|
var data = JSON.parse('{{ data|safe }}');
|
|
{% 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"];
|
|
|
|
function onYouTubeIframeAPIReady() {
|
|
player = new YT.Player('player', {
|
|
height: '315',
|
|
width: '560',
|
|
modestbranding: '1',
|
|
videoId: '{{ video_id }}',
|
|
events: {
|
|
'onReady': onPlayerReady,
|
|
'onStateChange': onPlayerStateChange
|
|
}
|
|
});
|
|
}
|
|
|
|
// 4. The API will call this function when the video player is ready.
|
|
function onPlayerReady(event) {
|
|
// 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("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) {
|
|
if (!dataplaying) { // set data values
|
|
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 %}
|
|
|
|
|
|
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) {
|
|
console.log(e);
|
|
}
|
|
{% endfor %}
|
|
try {
|
|
var newLatLng = new L.LatLng(lat, lon);
|
|
// console.log(newLatLng);
|
|
marker.setLatLng(newLatLng);
|
|
} catch (e) {
|
|
}
|
|
}
|
|
|
|
} else {
|
|
if (!dataplaying) {
|
|
output.value = Math.round(datatime)-Math.round(videotime);
|
|
document.getElementById("time").innerHTML = Math.round(videotime);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
function stopVideo() {
|
|
player.pauseVideo();
|
|
playing = false;
|
|
}
|
|
|
|
// call this function when player state changes
|
|
function onPlayerStateChange(event) {
|
|
if (event.data == YT.PlayerState.PLAYING && lock.checked) {
|
|
var dataplay = document.getElementById("dataplay").childNodes[0];
|
|
dataplay.value = String.fromCharCode(10074,10074);
|
|
} else if (lock.checked) {
|
|
var dataplay = document.getElementById("dataplay").childNodes[0];
|
|
dataplay.value = String.fromCharCode(9658);
|
|
}
|
|
}
|
|
</script>
|
|
</li>
|
|
{% if user.is_authenticated and user == workout.user.user %}
|
|
<li class="grid_4">
|
|
<input type="checkbox" name="lock" id="lock" value="Lock">Lock Data and Video
|
|
</li>
|
|
{% else %}
|
|
<li class="grid_4">
|
|
<input type="hidden" name="lock" id="lock" value="Lock">
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
<p> </p>
|
|
<form enctype="multipart/form-data" action="" method="post">
|
|
<ul class="main-content">
|
|
<li class="grid_2">
|
|
|
|
|
|
{% if form and user.is_authenticated and user == workout.user.user %}
|
|
|
|
<table>
|
|
{{ form.as_table }}
|
|
</table>
|
|
{% csrf_token %}
|
|
|
|
|
|
<table>
|
|
{{ metricsform.as_table }}
|
|
</table>
|
|
|
|
{% if not analysis.id %}
|
|
<input type="submit" name="reload_button" value="Reload">
|
|
{% endif %}
|
|
<input type="submit" name="save_button" value="Save">
|
|
|
|
{% else %}
|
|
<input type="hidden" id="id_delay" value="{{ analysis.delay }}">
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="grid_2" >
|
|
<ul class="main-content">
|
|
<li class="grid_2">
|
|
Data Time
|
|
<span id="datatime">
|
|
</span> seconds
|
|
</li>
|
|
<li class="grid_2">
|
|
Video Time
|
|
<span id="time">
|
|
</span> seconds
|
|
</li>
|
|
{% for id, metric in metrics.items %}
|
|
<li class="grid_2">
|
|
{{ metric.name }}
|
|
<span id="{{ id }}">
|
|
</span> {{ metric.unit }}
|
|
</li>
|
|
{% endfor %}
|
|
{% for group in metricsgroups %}
|
|
<li class="grid_2">
|
|
<div id="{{ group }}"></div>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</li>
|
|
<li class="grid_2">
|
|
{% if analysis and user.is_authenticated and user == analysis.workout.user.user %}
|
|
<p>
|
|
<a href="/rowers/video/{{ analysis.id }}/delete/">Delete Analysis</a>
|
|
</p>
|
|
{% endif %}
|
|
</li>
|
|
</ul>
|
|
</form>
|
|
<p> </p>
|
|
|
|
<script>
|
|
$(document).ready( function() {
|
|
// cookie reader
|
|
function createCookie(name,value,days) {
|
|
if (days) {
|
|
var date = new Date();
|
|
date.setTime(date.getTime()+(days*24*60*60*1000));
|
|
var expires = "; expires="+date.toGMTString();
|
|
}
|
|
else var expires = "";
|
|
document.cookie = name+"="+value+expires+"; path=/";
|
|
}
|
|
function readCookie(name) {
|
|
var nameEQ = name + "=";
|
|
var ca = document.cookie.split(';');
|
|
for(var i=0;i < ca.length;i++) {
|
|
var c = ca[i];
|
|
while (c.charAt(0)==' ') c = c.substring(1,c.length);
|
|
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
|
|
}
|
|
return null;
|
|
}
|
|
// lock
|
|
var lock = document.getElementById("lock");
|
|
var output = document.getElementById("id_delay");
|
|
var cookie = readCookie("lock{{ workout.id }}");
|
|
var delay = output.value;
|
|
if (cookie=="true") {
|
|
lock.checked = true;
|
|
output.disabled = true;
|
|
}
|
|
|
|
// lock.onchange nog doen
|
|
|
|
{% if locked %}
|
|
lock.checked = true;
|
|
output.disabled = true;
|
|
{% endif %}
|
|
|
|
|
|
// slider
|
|
var slider = document.getElementById("myRange");
|
|
{% if user.is_authenticated and user == workout.user.user %}
|
|
document.getElementById("myRange").style.display = "block";
|
|
{% else %}
|
|
document.getElementById("myRange").style.display = "none";
|
|
{% endif %}
|
|
var output = document.getElementById("id_delay");
|
|
|
|
// Update the current slider value (each time you drag the slider handle)
|
|
slider.oninput = function() {
|
|
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);
|
|
}
|
|
}
|
|
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 && !dataplaying) {
|
|
player.seekTo(0);
|
|
player.playVideo();
|
|
}
|
|
else if (!playing && !dataplaying) {
|
|
player.seekTo(0);
|
|
player.pauseVideo();
|
|
playing = false;
|
|
}
|
|
}
|
|
} 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());
|
|
}
|
|
|
|
|
|
// 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) {
|
|
player.seekTo(this.value-output.value);
|
|
if (playing) {
|
|
player.playVideo();
|
|
} else {
|
|
player.pauseVideo();
|
|
}
|
|
} else {
|
|
if (playing) {
|
|
player.seekTo(0);
|
|
player.playVideo();
|
|
}
|
|
else {
|
|
player.seekTo(0);
|
|
player.pauseVideo();
|
|
playing = false;
|
|
}
|
|
}
|
|
} else {
|
|
output.value = this.value-Math.round(player.getCurrentTime());
|
|
}
|
|
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) {
|
|
console.log(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() {
|
|
slider.value = this.value+Math.round(player.getCurrentTime());
|
|
}
|
|
|
|
// lock delay form field if checkbox checked
|
|
lock.oninput = function() {
|
|
if (this.checked) {
|
|
output.disabled = true;
|
|
createCookie("lock{{ workout.id}}","true",0);
|
|
} else {
|
|
output.disabled = false;
|
|
createCookie("lock{{ workout.id }}","false",0);
|
|
}
|
|
}
|
|
// Slider start stop
|
|
// moet de buttons pas hieronder definieren en dan in de html
|
|
// pluggen
|
|
var timer;
|
|
|
|
|
|
function clock() {
|
|
timer = setInterval(myClock, 1000);
|
|
var c = parseInt(slider.value,10);
|
|
console.log('starting clock');
|
|
|
|
function myClock() {
|
|
document.getElementById("datatime").innerHTML = c;
|
|
c = c+1;
|
|
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));
|
|
} else {
|
|
delay = Math.round(slider.value)-Math.round(player.getCurrentTime());
|
|
output.value = Math.round(slider.value)-Math.round(player.getCurrentTime());
|
|
}
|
|
|
|
if (c == latitude.length) {
|
|
clearInterval(timer);
|
|
c = 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// onderstaande alleen als lock.checked
|
|
var dataplay = document.createElement("input");
|
|
dataplay.type = "button";
|
|
dataplay.value = String.fromCharCode(9658);
|
|
document.getElementById("dataplay").appendChild(dataplay);
|
|
|
|
// var datastop = document.createElement("input");
|
|
// datastop.type = "button";
|
|
// datastop.value = "Stop";
|
|
// document.getElementById("datastop").appendChild(datastop)
|
|
|
|
|
|
|
|
dataplay.onclick = function() {
|
|
if (lock.checked) {
|
|
dataplaying = false;
|
|
if (playing == false) {
|
|
player.playVideo();
|
|
dataplay.value = String.fromCharCode(10074,10074);
|
|
playing = true;
|
|
} else {
|
|
player.pauseVideo();
|
|
dataplay.value = String.fromCharCode(9658);
|
|
playing = false;
|
|
}
|
|
} else {
|
|
if (!dataplaying) {
|
|
clock();
|
|
dataplay.value = String.fromCharCode(10074,10074);
|
|
dataplaying = true;
|
|
if (lock.checked) {
|
|
playing = true;
|
|
}
|
|
} else {
|
|
clearInterval(timer);
|
|
dataplay.value = String.fromCharCode(9658);
|
|
dataplaying = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
// datastop.onclick = function() {
|
|
// console.log('stopping');
|
|
// clearInterval(timer);
|
|
// }
|
|
|
|
});
|
|
</script>
|
|
{% endlanguage %}
|
|
|
|
{% endblock %}
|
|
|
|
{% block sidebar %}
|
|
{% include 'menu_workout.html' %}
|
|
{% endblock %}
|