From cf86b2c260037d4d7d2d35df278f0eaf7fe8a196 Mon Sep 17 00:00:00 2001
From: katspaugh <ivan@mycs.com>
Date: Sat, 3 Dec 2016 12:23:37 +0100
Subject: [PATCH] timeline: re-render on zoom; resolve #825

---
 example/zoom/index.html |  4 ++++
 example/zoom/main.js    | 20 +++++++++++++++++++-
 src/plugin/timeline.js  |  3 +++
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/example/zoom/index.html b/example/zoom/index.html
index 2ba4e4130..2ce3aec30 100644
--- 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
index e08853865..33161a51e 100644
--- 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
index ce1739de1..c97bd3849 100644
--- 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) {