2017-09-11 04:33:49 -06:00
|
|
|
/* global WaveSurfer URI */
|
2017-02-11 06:59:02 -07:00
|
|
|
|
2015-07-01 10:01:20 -06:00
|
|
|
$(document).ready(function() {
|
|
|
|
'use strict';
|
2014-10-07 07:47:16 -06:00
|
|
|
|
2017-09-11 04:33:49 -06:00
|
|
|
// Format time for the player
|
|
|
|
function formatTime(timeSeconds) {
|
|
|
|
var minute = Math.floor(timeSeconds / 60);
|
|
|
|
var tmp = Math.round(timeSeconds - (minute * 60));
|
|
|
|
var second = (tmp < 10 ? '0' : '') + tmp;
|
|
|
|
return String(minute + ':' + second);
|
|
|
|
}
|
2015-07-01 10:01:20 -06:00
|
|
|
|
2017-03-27 13:05:24 -06:00
|
|
|
// Set width for not selected tabs
|
2017-09-11 04:33:49 -06:00
|
|
|
var panelWidth = $('.tab-content').first().width();
|
2017-03-27 13:05:24 -06:00
|
|
|
$('.tab-pane').css('width', panelWidth);
|
|
|
|
|
2015-07-01 10:01:20 -06:00
|
|
|
// Waveform loading
|
2017-02-11 06:59:02 -07:00
|
|
|
$('.wave').each(function(){
|
2016-02-21 04:09:43 -07:00
|
|
|
var $this = $(this);
|
|
|
|
var wid = $this.data('id');
|
2015-07-01 10:01:20 -06:00
|
|
|
var wavesurfer = Object.create(WaveSurfer);
|
2016-02-21 04:09:43 -07:00
|
|
|
var data_payload_url = $this.data('payload');
|
2015-07-06 06:12:33 -06:00
|
|
|
var container_el = '#data-' + wid;
|
2017-02-11 08:06:33 -07:00
|
|
|
$(container_el).css('opacity', '0');
|
2017-02-11 07:34:30 -07:00
|
|
|
var loading = '#loading-' + wid;
|
2016-02-21 04:09:43 -07:00
|
|
|
var $playbackTime = $('#playback-time-' + wid);
|
2017-02-11 08:06:33 -07:00
|
|
|
var progressDiv = $('#progress-bar-' + wid);
|
|
|
|
var progressBar = $('.progress-bar', progressDiv);
|
|
|
|
|
|
|
|
var showProgress = function (percent) {
|
|
|
|
if (percent == 100) {
|
|
|
|
$(loading).text('Analyzing data...');
|
|
|
|
}
|
|
|
|
progressDiv.css('display', 'block');
|
|
|
|
progressBar.css('width', percent + '%');
|
|
|
|
progressBar.text(percent + '%');
|
|
|
|
};
|
|
|
|
|
|
|
|
var hideProgress = function () {
|
|
|
|
progressDiv.css('display', 'none');
|
|
|
|
};
|
|
|
|
|
2015-07-01 10:01:20 -06:00
|
|
|
wavesurfer.init({
|
2017-02-11 06:59:02 -07:00
|
|
|
container: container_el,
|
|
|
|
waveColor: '#bf7fbf',
|
|
|
|
progressColor: 'purple'
|
2015-07-01 10:01:20 -06:00
|
|
|
});
|
|
|
|
|
2017-02-11 08:06:33 -07:00
|
|
|
wavesurfer.on('destroy', hideProgress);
|
|
|
|
wavesurfer.on('error', hideProgress);
|
|
|
|
|
|
|
|
wavesurfer.on('loading', function(percent) {
|
|
|
|
showProgress(percent);
|
2015-07-06 06:12:33 -06:00
|
|
|
$(loading).show();
|
|
|
|
});
|
|
|
|
|
2016-02-21 04:09:43 -07:00
|
|
|
$this.parents('.observation-data').find('.playpause').click( function(){
|
2015-07-01 10:01:20 -06:00
|
|
|
wavesurfer.playPause();
|
|
|
|
});
|
|
|
|
|
2017-09-11 04:33:49 -06:00
|
|
|
$('a[href="#tab-audio"]').on('shown.bs.tab', function () {
|
2017-07-06 12:04:39 -06:00
|
|
|
wavesurfer.load(data_payload_url);
|
2017-09-11 04:33:49 -06:00
|
|
|
$('a[href="#tab-audio"]').off('shown.bs.tab');
|
2017-07-06 12:04:39 -06:00
|
|
|
});
|
2015-07-06 06:12:33 -06:00
|
|
|
|
|
|
|
wavesurfer.on('ready', function() {
|
2017-02-11 08:06:33 -07:00
|
|
|
hideProgress();
|
2017-02-11 08:07:22 -07:00
|
|
|
var spectrogram = Object.create(WaveSurfer.Spectrogram);
|
|
|
|
spectrogram.init({
|
|
|
|
wavesurfer: wavesurfer,
|
2017-09-11 04:33:49 -06:00
|
|
|
container: '#wave-spectrogram',
|
2017-02-11 08:07:22 -07:00
|
|
|
fftSamples: 256,
|
|
|
|
windowFunc: 'hann'
|
|
|
|
});
|
2017-02-11 08:06:33 -07:00
|
|
|
|
2017-09-11 04:33:49 -06:00
|
|
|
//$playbackTime.text(formatTime(wavesurfer.getCurrentTime()));
|
2016-02-21 04:09:43 -07:00
|
|
|
$playbackTime.text(formatTime(wavesurfer.getCurrentTime()));
|
|
|
|
|
|
|
|
wavesurfer.on('audioprocess', function(evt) {
|
|
|
|
$playbackTime.text(formatTime(evt));
|
|
|
|
});
|
|
|
|
wavesurfer.on('seek', function(evt) {
|
|
|
|
$playbackTime.text(formatTime(wavesurfer.getDuration() * evt));
|
|
|
|
});
|
2015-07-06 06:12:33 -06:00
|
|
|
$(loading).hide();
|
2017-02-11 08:06:33 -07:00
|
|
|
$(container_el).css('opacity', '1');
|
2015-07-06 06:12:33 -06:00
|
|
|
});
|
2015-04-07 10:00:57 -06:00
|
|
|
});
|
2016-03-26 08:46:50 -06:00
|
|
|
|
2017-09-30 08:32:10 -06:00
|
|
|
// Handle Observation tabs
|
2017-02-11 06:59:02 -07:00
|
|
|
var uri = new URI(location.href);
|
2017-09-30 08:32:10 -06:00
|
|
|
var tab = uri.hash();
|
|
|
|
$('.observation-tabs li a[href="' + tab + '"]').tab('show');
|
2016-04-25 08:53:18 -06:00
|
|
|
|
2016-03-29 15:09:46 -06:00
|
|
|
// Delete confirmation
|
2017-02-11 06:59:02 -07:00
|
|
|
var message = 'Do you really want to delete this Observation?';
|
2016-03-29 15:09:46 -06:00
|
|
|
var actions = $('#obs-delete');
|
|
|
|
if (actions.length) {
|
2017-02-11 06:59:02 -07:00
|
|
|
actions[0].addEventListener('click', function(e) {
|
2016-03-29 15:09:46 -06:00
|
|
|
if (! confirm(message)) {
|
|
|
|
e.preventDefault();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
2014-10-07 12:23:29 -06:00
|
|
|
});
|