Server/WavesUI: link waveform selection and zoom

diff --git a/timeside/player/static/timeside/js/timeside-waves.js b/timeside/player/static/timeside/js/timeside-waves.js
index b85782709b8a8d82cfa0031722f1cab5f01bed95..2023afb2ab9af0850079acd8094e09cd49cd6f62 100644 (file)
--- a/timeside/player/static/timeside/js/timeside-waves.js
+++ b/timeside/player/static/timeside/js/timeside-waves.js
@@ -12,13 +12,16 @@ function waveform(div_id) {
     loader.load('download/ogg').then(function(audioBuffer) {
         try {
             var id = '#' + div_id;
-            
+
+           var audio_start = 0
+           var audio_end = Math.min(audioBuffer.duration, 30);
+
             var data = [{
-                start: audioBuffer.duration/4,
-                duration: audioBuffer.duration/2
+                start: audio_start,
+                duration: audio_end
             }];
 
-            var buffer = audioBuffer.getChannelData(0).buffer
+            var buffer = audioBuffer.getChannelData(0).buffer;
 
             // 1. creat graph
             var graph = wavesUI.timeline()
@@ -34,7 +37,7 @@ function waveform(div_id) {
                 // .opacity(0.8);
 
             var segmentLayer = wavesUI.segment()
-                .params({
+               .params({
                     interactions: { editable: true },
                     opacity: 0.4,
                     handlerOpacity: 0.6,
@@ -42,6 +45,36 @@ function waveform(div_id) {
                 .data(data)
                 .color('steelblue');
 
+           function update_waveform(graph, data) {
+               graph.xScale.domain([data[0].start, data[0].start + data[0].duration]);
+               graph.update();
+           };
+
+           function update_segment() {
+               seg_start = graph_sub.xScale.domain()[0]
+               seg_end = graph_sub.xScale.domain()[1]
+               
+               if ( seg_start < 0 || seg_end > audioBuffer.duration) {
+                   seg_start = Math.max(0, seg_start);
+                   seg_end = Math.min(audioBuffer.duration, seg_end);
+                   data[0].start = seg_start;
+                   data[0].duration = seg_end - seg_start;
+
+                   update_waveform(graph_sub, data);
+
+               } else {
+                   data[0].start = seg_start;
+                   data[0].duration = seg_end - seg_start;
+               }
+               graph.update();
+
+           };
+
+           
+           segmentLayer.on('drag', function(item, e) {
+               update_waveform(graph_sub, data)
+           });
+
             // 3. add layers to graph
             graph.add(waveformLayer);
             graph.add(segmentLayer);
@@ -90,23 +123,25 @@ function waveform(div_id) {
                .call(xAxis);
 
            var zoomLayer = wavesUI.zoomer()
-            .select(id_sub)
-            .on('mousemove', function(e) {
-               // update graph xZoom
-               graph_sub.xZoom(e);
-               graph_sub.update();
-
-               // update axis
-               axis.call(xAxis);
-               
-            })
-            .on('mouseup', function(e) {
-                // set the final xZoom value of the graph
-                graph_sub.xZoomSet();
-               // update axis
-               axis.call(xAxis);
-            });
-
+               .select(id_sub)
+               .on('mousemove', function(e) {
+                   // update graph xZoom
+                   graph_sub.xZoom(e);
+                   graph_sub.update();
+                   
+                   // update axis
+                   axis.call(xAxis);
+                   // Update zoom_segment
+                   update_segment()
+                   
+               })
+               .on('mouseup', function(e) {
+                    // set the final xZoom value of the graph
+                    graph_sub.xZoomSet();
+                   // update axis
+                   axis.call(xAxis);
+               });
+           
         } catch (err) {
             console.log(err);
         }