add support for timestamps in description text

diff --git a/panikweb_templates/static/css/_specifics.scss b/panikweb_templates/static/css/_specifics.scss
index d2c213595eeded095aa3f5027dba8ad7c16f2545..564ec4a13937680c446ab7d58d9a5297abb4f1f3 100644 (file)
--- a/panikweb_templates/static/css/_specifics.scss
+++ b/panikweb_templates/static/css/_specifics.scss
@@ -1453,6 +1453,11 @@ h3.episode-subtitle {
        font-weight: bold;
 }
 
+span.timestamp {
+       cursor: pointer;
+       border-bottom: 1px dotted #666;
+}
+
 div.fragment-sound {
        position: relative;
 }

diff --git a/panikweb_templates/static/js/specifics.js b/panikweb_templates/static/js/specifics.js
index c4c0dab8dab554047dfe51466fb30e94daa65189..8768ea905302556d2da88a4e8cc67bd7cba04995 100644 (file)
--- a/panikweb_templates/static/js/specifics.js
+++ b/panikweb_templates/static/js/specifics.js
@@ -502,6 +502,24 @@ $(function() {
                        return false;
                });
 
+               if ($('.sound + .content .text  ').length) {
+                       var text_content = $('.sound + .content .text')[0];
+                       text_content.innerHTML = text_content.innerHTML.replace(
+                               /[0-9][0-9]+:[0-9][0-9]/g,
+                               function(x) { return '<span class="timestamp">' + x + "</span>"; });
+                       $(text_content).find('span.timestamp').on('click', function() {
+                               var $waveform = $('div.waveform');
+                               var total_duration = parseFloat($waveform.data('duration'));
+                               var nb_ticks = $waveform.find('span').length;
+                               var timestamp = $(this).text().split(':');
+                               var timestamp_position = timestamp[0] * 60 + timestamp[1] * 1;
+                               var tick_idx = parseInt(nb_ticks * timestamp_position / total_duration);
+                               // twice to get play then set position
+                               $('span[data-tick-index=' + tick_idx + ']').trigger('click');
+                               $('span[data-tick-index=' + tick_idx + ']').trigger('click');
+                       });
+               }
+
                if (document.cookie.indexOf('panikdb=on') != -1) {
                        panikdb_path = null;
                        if (window.location.pathname.indexOf('/emissions/') == 0) {