timeline: re-render on zoom; resolve #825

katspaugh · Dec 3, 2016 · 210f93f · 210f93f
1 parent 0699fc7
commit 210f93f
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 0 deletions.
diff --git a/example/zoom/index.html b/example/zoom/index.html
@@ -17,6 +17,7 @@
         <script src="../../dist/wavesurfer.min.js"></script>
 
         <script src="../../plugin/wavesurfer.regions.js"></script>
+        <script src="../../plugin/wavesurfer.timeline.js"></script>
 
         <!-- Demo -->
         <script src="main.js"></script>
@@ -37,6 +38,8 @@ <h1 itemprop="name">Zooming Feature Example</h1>
                     <!-- Here be the waveform -->
                 </div>
 
+                <div id="timeline"></div>
+
                 <div class="controls">
                     <div class="row">
                         <div class="col-sm-7">

diff --git a/example/zoom/main.js b/example/zoom/main.js
@@ -31,6 +31,10 @@ document.addEventListener('DOMContentLoaded', function () {
             end: 100,
             color: 'hsla(200, 50%, 70%, 0.1)'
         });
+
+      // Init Timeline plugin
+      var timeline = Object.create(WaveSurfer.Timeline);
+      timeline.init({ wavesurfer: wavesurfer, container: '#timeline' });
     });
 
     // Zoom slider

diff --git a/plugin/wavesurfer.timeline.js b/plugin/wavesurfer.timeline.js
@@ -44,12 +44,14 @@ WaveSurfer.Timeline = {
         }.bind(this));
 
         this._onRedraw = wavesurfer.on('redraw', this.render.bind(this));
+        this._onZoom = wavesurfer.on('zoom', this.render.bind(this));
         this._onDestroy = wavesurfer.on('destroy', this.destroy.bind(this));
     },
 
     destroy: function () {
         // Unsubscribe from internal wavesurfer events
         this._onRedraw.un();
+        this._onZoom.un();
         this._onDestroy.un();
 
         // Unsubscribe from external timeline events