timeline: re-render on zoom; resolve #825

katspaugh · Aug 20, 2017 · cf86b2c · cf86b2c
1 parent 8665f78
commit cf86b2c
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 1 deletion.
diff --git a/example/zoom/index.html b/example/zoom/index.html
@@ -15,6 +15,8 @@
 
         <!-- wavesurfer.js -->
         <script src="../../dist/wavesurfer.js"></script>
+        <script src="../../dist/plugin/wavesurfer.timeline.js"></script>
+        <script src="../../dist/plugin/wavesurfer.regions.js"></script>
 
         <!-- Demo -->
         <script src="main.js"></script>
@@ -35,6 +37,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
@@ -10,7 +10,25 @@ document.addEventListener('DOMContentLoaded', function () {
         container: document.querySelector('#waveform'),
         waveColor: '#A8DBA8',
         progressColor: '#3B8686',
-        backend: 'MediaElement'
+        backend: 'MediaElement',
+        plugins: [
+            WaveSurfer.regions.create({
+                regions: [
+                    {
+                        start: 0,
+                        end: 5,
+                        color: 'hsla(400, 100%, 30%, 0.1)'
+                    }, {
+                        start: 10,
+                        end: 100,
+                        color: 'hsla(200, 50%, 70%, 0.1)'
+                    }
+                ]
+            }),
+            WaveSurfer.timeline.create({
+                container: '#timeline'
+            })
+        ]
     });
 
 

diff --git a/src/plugin/timeline.js b/src/plugin/timeline.js
@@ -126,6 +126,7 @@ export default class TimelinePlugin {
 
         this.canvases = [];
 
+        this._onZoom = () => this.render();
         this._onScroll = () => {
             if (this.wrapper && this.drawer.wrapper) {
                 this.wrapper.scrollLeft = this.drawer.wrapper.scrollLeft;
@@ -142,6 +143,7 @@ export default class TimelinePlugin {
             this.render();
             ws.drawer.wrapper.addEventListener('scroll', this._onScroll);
             ws.on('redraw', this._onRedraw);
+            ws.on('zoom', this._onZoom);
         };
     }
 
@@ -156,6 +158,7 @@ export default class TimelinePlugin {
     destroy() {
         this.unAll();
         this.wavesurfer.un('redraw', this._onRedraw);
+        this.wavesurfer.un('zoom', this._onZoom);
         this.wavesurfer.un('ready', this._onReady);
         this.wavesurfer.drawer.wrapper.removeEventListener('scroll', this._onScroll);
         if (this.wrapper && this.wrapper.parentNode) {