@checksub_team/peaks_timeline 1.4.17 → 1.4.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checksub_team/peaks_timeline",
-  "version": "1.4.17",
+  "version": "1.4.18",
   "description": "JavaScript UI component for displaying audio waveforms",
   "main": "./peaks.js",
   "types": "./peaks.js.d.ts",
@@ -75,7 +75,7 @@
     "eventemitter2": "~6.0.0",
     "konva": "~4.1.3",
     "uuid": "^8.3.2",
-    "waveform-data": "~3.1.0"
+    "waveform-data": "~4.0.0"
   },
   "bugs": {
     "url": "https://github.com/bbc/peaks.js/issues"

package/peaks.js

@@ -14338,7 +14338,56 @@ module.exports = function (Utils, Konva) {
     };
     return DefaultSegmentMarker;
 }(_dereq_('./utils'), _dereq_('konva'));
-},{"./utils":109,"konva":43}],88:[function(_dereq_,module,exports){
+},{"./utils":110,"konva":43}],88:[function(_dereq_,module,exports){
+module.exports = function () {
+    'use strict';
+    function Invoker() {
+        this._throttledFunc = {};
+    }
+    Invoker.prototype.throttle = function (id, func, wait) {
+        var self = this;
+        if (this._throttledFunc[id]) {
+            this._throttledFunc[id].func = func;
+            this._throttledFunc[id].continue = true;
+        } else {
+            this._throttledFunc[id] = {
+                func: func,
+                timer: null,
+                continue: true
+            };
+            this._throttledFunc[id].timer = setInterval(function () {
+                if (self._throttledFunc[id].continue) {
+                    func();
+                    self._throttledFunc[id].continue = false;
+                } else {
+                    clearInterval(self._throttledFunc[id].timer);
+                    delete self._throttledFunc[id];
+                }
+            }, wait);
+        }
+    };
+    Invoker.prototype.debounce = function (func, wait, immediate) {
+        var timeout;
+        return function executedFunction() {
+            var _self = this;
+            var args = arguments;
+            function later() {
+                timeout = null;
+                if (!immediate) {
+                    func.apply(_self, args);
+                }
+            }
+            var callNow = immediate && !timeout;
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+            if (callNow) {
+                func.apply(_self, args);
+            }
+        };
+    };
+    return Invoker;
+}();
+},{}],89:[function(_dereq_,module,exports){
 module.exports = function () {
     'use strict';
     var nodes = [
@@ -14421,7 +14470,7 @@ module.exports = function () {
     };
     return KeyboardHandler;
 }();
-},{}],89:[function(_dereq_,module,exports){
+},{}],90:[function(_dereq_,module,exports){
 module.exports = function (Konva, Utils) {
     'use strict';
     function LineIndicator(peaks, view, container) {
@@ -14642,7 +14691,7 @@ module.exports = function (Konva, Utils) {
     };
     return LineIndicator;
 }(_dereq_('konva'), _dereq_('./utils'));
-},{"./utils":109,"konva":43}],90:[function(_dereq_,module,exports){
+},{"./utils":110,"konva":43}],91:[function(_dereq_,module,exports){
 module.exports = function (Konva, Utils) {
     'use strict';
     function Line(peaks, view, y, id, position) {
@@ -15048,13 +15097,6 @@ module.exports = function (Konva, Utils) {
         }
         return newXs;
     };
-    Line.prototype.rescale = function () {
-        for (var sourceId in this._sourcesGroup) {
-            if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
-                this._sourcesGroup[sourceId].rescale();
-            }
-        }
-    };
     Line.prototype.updatePosition = function (pos) {
         for (var sourceId in this._sources) {
             if (Utils.objectHasProperty(this._sources, sourceId)) {
@@ -15074,7 +15116,7 @@ module.exports = function (Konva, Utils) {
     };
     return Line;
 }(_dereq_('konva'), _dereq_('./utils'));
-},{"./utils":109,"konva":43}],91:[function(_dereq_,module,exports){
+},{"./utils":110,"konva":43}],92:[function(_dereq_,module,exports){
 module.exports = function (Line, LineIndicator, Utils) {
     'use strict';
     function Lines(peaks, view, layer) {
@@ -15294,13 +15336,6 @@ module.exports = function (Line, LineIndicator, Utils) {
     Lines.prototype.manageSourceOrder = function (source, newStartX, newEndX) {
         return this._linesBySourceId[source.id].manageSourceOrder(source, newStartX, newEndX);
     };
-    Lines.prototype.rescale = function () {
-        for (var position in this._linesByPosition) {
-            if (Utils.objectHasProperty(this._linesByPosition, position)) {
-                this._linesByPosition[position].rescale();
-            }
-        }
-    };
     Lines.prototype._setInteractions = function (position) {
         var line = this._linesByPosition[position];
         if (this._areInteractionsOverridden) {
@@ -15329,7 +15364,7 @@ module.exports = function (Line, LineIndicator, Utils) {
     };
     return Lines;
 }(_dereq_('./line'), _dereq_('./line-indicator'), _dereq_('./utils'));
-},{"./line":90,"./line-indicator":89,"./utils":109}],92:[function(_dereq_,module,exports){
+},{"./line":91,"./line-indicator":90,"./utils":110}],93:[function(_dereq_,module,exports){
 module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSources, KeyboardHandler, Player, MarkerFactories, TimelineZoomView, Utils) {
     'use strict';
     function Peaks() {
@@ -15553,7 +15588,7 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
     };
     return Peaks;
 }(_dereq_('colors.css'), _dereq_('eventemitter2'), _dereq_('./timeline-segments'), _dereq_('./timeline-sources'), _dereq_('./keyboard-handler'), _dereq_('./player'), _dereq_('./marker-factories'), _dereq_('./timeline-zoomview'), _dereq_('./utils'));
-},{"./keyboard-handler":88,"./marker-factories":93,"./player":96,"./timeline-segments":106,"./timeline-sources":107,"./timeline-zoomview":108,"./utils":109,"colors.css":1,"eventemitter2":2}],93:[function(_dereq_,module,exports){
+},{"./keyboard-handler":89,"./marker-factories":94,"./player":97,"./timeline-segments":107,"./timeline-sources":108,"./timeline-zoomview":109,"./utils":110,"colors.css":1,"eventemitter2":2}],94:[function(_dereq_,module,exports){
 module.exports = function (DefaultSegmentMarker, Utils, Konva) {
     'use strict';
     function createSegmentMarker(options) {
@@ -15585,7 +15620,7 @@ module.exports = function (DefaultSegmentMarker, Utils, Konva) {
         createSegmentLabel: createSegmentLabel
     };
 }(_dereq_('./default-segment-marker'), _dereq_('./utils'), _dereq_('konva'));
-},{"./default-segment-marker":87,"./utils":109,"konva":43}],94:[function(_dereq_,module,exports){
+},{"./default-segment-marker":87,"./utils":110,"konva":43}],95:[function(_dereq_,module,exports){
 module.exports = function (Utils, SourceGroup, Konva) {
     'use strict';
     var TIME_X_OFFSET = 20;
@@ -15832,7 +15867,7 @@ module.exports = function (Utils, SourceGroup, Konva) {
     };
     return ModeLayer;
 }(_dereq_('./utils'), _dereq_('./source-group'), _dereq_('konva'));
-},{"./source-group":102,"./utils":109,"konva":43}],95:[function(_dereq_,module,exports){
+},{"./source-group":103,"./utils":110,"konva":43}],96:[function(_dereq_,module,exports){
 module.exports = function (Konva) {
     'use strict';
     function getMarkerObject(obj) {
@@ -15928,7 +15963,7 @@ module.exports = function (Konva) {
     };
     return MouseDragHandler;
 }(_dereq_('konva'));
-},{"konva":43}],96:[function(_dereq_,module,exports){
+},{"konva":43}],97:[function(_dereq_,module,exports){
 module.exports = function (Utils) {
     'use strict';
     function Player(peaks) {
@@ -16012,7 +16047,7 @@ module.exports = function (Utils) {
     };
     return Player;
 }(_dereq_('./utils'));
-},{"./utils":109}],97:[function(_dereq_,module,exports){
+},{"./utils":110}],98:[function(_dereq_,module,exports){
 module.exports = function (Utils, Konva) {
     'use strict';
     var HANDLE_RADIUS = 10;
@@ -16252,7 +16287,7 @@ module.exports = function (Utils, Konva) {
     };
     return PlayheadLayer;
 }(_dereq_('./utils'), _dereq_('konva'));
-},{"./utils":109,"konva":43}],98:[function(_dereq_,module,exports){
+},{"./utils":110,"konva":43}],99:[function(_dereq_,module,exports){
 module.exports = function (Konva) {
     'use strict';
     function SegmentMarker(options) {
@@ -16338,7 +16373,7 @@ module.exports = function (Konva) {
     };
     return SegmentMarker;
 }(_dereq_('konva'));
-},{"konva":43}],99:[function(_dereq_,module,exports){
+},{"konva":43}],100:[function(_dereq_,module,exports){
 module.exports = function (Konva, SegmentMarker) {
     'use strict';
     var SEGMENT_WIDTH = 10;
@@ -16569,7 +16604,7 @@ module.exports = function (Konva, SegmentMarker) {
     };
     return SegmentShape;
 }(_dereq_('konva'), _dereq_('./segment-marker'));
-},{"./segment-marker":98,"konva":43}],100:[function(_dereq_,module,exports){
+},{"./segment-marker":99,"konva":43}],101:[function(_dereq_,module,exports){
 module.exports = function (Utils) {
     'use strict';
     function validateSegment(peaks, options, context) {
@@ -16727,7 +16762,7 @@ module.exports = function (Utils) {
     };
     return Segment;
 }(_dereq_('./utils'));
-},{"./utils":109}],101:[function(_dereq_,module,exports){
+},{"./utils":110}],102:[function(_dereq_,module,exports){
 module.exports = function (SegmentShape, Utils, Konva) {
     'use strict';
     function SegmentsGroup(peaks, view, allowEditing) {
@@ -17180,7 +17215,7 @@ module.exports = function (SegmentShape, Utils, Konva) {
     };
     return SegmentsGroup;
 }(_dereq_('./segment-shape'), _dereq_('./utils'), _dereq_('konva'));
-},{"./segment-shape":99,"./utils":109,"konva":43}],102:[function(_dereq_,module,exports){
+},{"./segment-shape":100,"./utils":110,"konva":43}],103:[function(_dereq_,module,exports){
 module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
     'use strict';
     var SPACING_BETWEEN_PREVIEW_AND_BORDER_RATIO = 0.15;
@@ -17233,21 +17268,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         this._addHandles(true);
         this.setWrapping(source.wrapped);
     }
-    SourceGroup.prototype.rescale = function () {
-        this.update();
-        this._previewList.forEach(function (preview) {
-            if (preview.loaded) {
-                switch (preview.type) {
-                case 'audio':
-                    preview.group.getChildren()[0].rescale();
-                    break;
-                case 'video':
-                case 'image':
-                default:
-                }
-            }
-        });
-    };
     SourceGroup.prototype._onSourceGroupDragStart = function () {
         this._dragged = true;
         this._mouseDownX = this._view.getPointerPosition().x;
@@ -17659,7 +17679,8 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             group: new Konva.Group({
                 height: this._source.binaryUrl && this._source.previewUrl ? this._source.binaryHeight : this._unwrappedHeight,
                 listening: false
-            })
+            }),
+            url: url
         };
         var self = this;
         var audioData = this._layer.getLoadedData(url);
@@ -17686,6 +17707,10 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                     self._view.setTimeToPixelsMaxZoom(originalWaveformData.sample_rate / self._minScale);
                 }
                 self._layer.setLoadedData(url, originalWaveformData);
+                self._layer.setLoadedData(url + '-scaled', {
+                    data: originalWaveformData,
+                    scale: originalWaveformData.sample_rate / self._minScale
+                });
                 preview.loaded = true;
                 self._createAudioPreview(preview, originalWaveformData, redraw);
             });
@@ -17716,20 +17741,26 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
     SourceGroup.prototype._createAudioPreview = function (preview, waveformData, redraw) {
         if (waveformData.hasAudio) {
             var waveform = new WaveformShape({
+                layer: this._layer,
                 view: this._view,
                 color: this._peaks.options.zoomWaveformColor,
-                waveformData: waveformData,
                 source: this._source,
-                height: preview.group.height()
+                height: preview.group.height(),
+                url: preview.url
             });
             preview.group.add(waveform);
             this._unwrap.add(preview.group);
             if (redraw) {
-                this._group.draw();
+                this._layer.rescale(true);
             }
             this._previewList.push(preview);
         }
     };
+    SourceGroup.prototype.getAudioPreview = function () {
+        return this._previewList.filter(function (preview) {
+            return preview.type === 'audio';
+        });
+    };
     SourceGroup.prototype.setSelected = function (isSelected) {
         var background = this._unwrap.getChildren(function (node) {
             return node.getClassName() === 'Shape';
@@ -17889,7 +17920,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
     };
     return SourceGroup;
 }(_dereq_('./waveform-builder'), _dereq_('./waveform-shape'), _dereq_('./utils'), _dereq_('konva'));
-},{"./utils":109,"./waveform-builder":110,"./waveform-shape":111,"konva":43}],103:[function(_dereq_,module,exports){
+},{"./utils":110,"./waveform-builder":111,"./waveform-shape":112,"konva":43}],104:[function(_dereq_,module,exports){
 module.exports = function (Utils) {
     'use strict';
     function validateSource(peaks, options, context) {
@@ -18426,8 +18457,8 @@ module.exports = function (Utils) {
     };
     return Source;
 }(_dereq_('./utils'));
-},{"./utils":109}],104:[function(_dereq_,module,exports){
-module.exports = function (SourceGroup, SegmentsGroup, Lines, DataRetriever, Utils, Konva) {
+},{"./utils":110}],105:[function(_dereq_,module,exports){
+module.exports = function (SourceGroup, SegmentsGroup, Lines, DataRetriever, Utils, Invoker, Konva) {
     'use strict';
     function SourcesLayer(peaks, view, allowEditing) {
         this._peaks = peaks;
@@ -18440,6 +18471,7 @@ module.exports = function (SourceGroup, SegmentsGroup, Lines, DataRetriever, Uti
         this._lines.addToLayer(this);
         this._segmentsGroup = new SegmentsGroup(peaks, view, true);
         this._loadedData = {};
+        this._debouncedRescale = new Invoker().debounce(this._rescale, 150);
         this._peaks.on('sources.add', this._onSourcesAdd.bind(this));
         this._peaks.on('sources.destroy', this._onSourcesDestroy.bind(this));
         this._peaks.on('sources.show', this._onSourcesShow.bind(this));
@@ -18699,10 +18731,37 @@ module.exports = function (SourceGroup, SegmentsGroup, Lines, DataRetriever, Uti
         var startsEarlier = source1.startTime > source2.startTime && source1.startTime < source2.endTime;
         return endsLater || startsEarlier;
     };
-    SourcesLayer.prototype.rescale = function () {
-        this._lines.rescale();
+    SourcesLayer.prototype.rescale = function (debounce) {
+        if (debounce) {
+            this._debouncedRescale();
+        } else {
+            this._rescale();
+        }
+    };
+    SourcesLayer.prototype._rescale = function () {
+        var id, audioPreviews, urls = [], self = this;
+        for (id in this._sourcesGroup) {
+            if (Utils.objectHasProperty(this._sourcesGroup, id)) {
+                audioPreviews = this._sourcesGroup[id].getAudioPreview();
+                audioPreviews.forEach(function (audioPreview) {
+                    if (self._shouldResampleAudio(audioPreview.url, urls)) {
+                        self._loadedData[audioPreview.url + '-scaled'] = {
+                            data: self._resampleAudio(audioPreview.url),
+                            scale: self._view.getTimeToPixelsScale()
+                        };
+                        urls.push(audioPreview.url);
+                    }
+                });
+            }
+        }
         this._layer.draw();
     };
+    SourcesLayer.prototype._shouldResampleAudio = function (audioUrl, urls) {
+        return this._loadedData[audioUrl + '-scaled'] && !urls.includes(audioUrl) && this._loadedData[audioUrl + '-scaled'].scale !== this._view.getTimeToPixelsScale();
+    };
+    SourcesLayer.prototype._resampleAudio = function (audioUrl) {
+        return this._loadedData[audioUrl].resample({ scale: this._loadedData[audioUrl].sample_rate / this._view.getTimeToPixelsScale() });
+    };
     SourcesLayer.prototype.destroy = function () {
         this._peaks.off('sources.add', this._onSourcesAdd);
         this._peaks.off('sources.destroy', this._onSourcesDestroy);
@@ -18720,8 +18779,8 @@ module.exports = function (SourceGroup, SegmentsGroup, Lines, DataRetriever, Uti
         return this._lines.linesLength();
     };
     return SourcesLayer;
-}(_dereq_('./source-group'), _dereq_('./segments-group'), _dereq_('./lines'), _dereq_('./data-retriever'), _dereq_('./utils'), _dereq_('konva'));
-},{"./data-retriever":85,"./lines":91,"./segments-group":101,"./source-group":102,"./utils":109,"konva":43}],105:[function(_dereq_,module,exports){
+}(_dereq_('./source-group'), _dereq_('./segments-group'), _dereq_('./lines'), _dereq_('./data-retriever'), _dereq_('./utils'), _dereq_('./invoker'), _dereq_('konva'));
+},{"./data-retriever":85,"./invoker":88,"./lines":92,"./segments-group":102,"./source-group":103,"./utils":110,"konva":43}],106:[function(_dereq_,module,exports){
 module.exports = function (Utils, Konva) {
     'use strict';
     var LEFT_PADDING = 4;
@@ -18862,7 +18921,7 @@ module.exports = function (Utils, Konva) {
     };
     return TimelineAxis;
 }(_dereq_('./utils'), _dereq_('konva'));
-},{"./utils":109,"konva":43}],106:[function(_dereq_,module,exports){
+},{"./utils":110,"konva":43}],107:[function(_dereq_,module,exports){
 module.exports = function (Colors, Segment, Utils) {
     'use strict';
     function TimelineSegments(peaks) {
@@ -19010,7 +19069,7 @@ module.exports = function (Colors, Segment, Utils) {
     };
     return TimelineSegments;
 }(_dereq_('colors.css'), _dereq_('./segment'), _dereq_('./utils'));
-},{"./segment":100,"./utils":109,"colors.css":1}],107:[function(_dereq_,module,exports){
+},{"./segment":101,"./utils":110,"colors.css":1}],108:[function(_dereq_,module,exports){
 module.exports = function (Source, Utils) {
     'use strict';
     function TimelineSources(peaks) {
@@ -19177,7 +19236,7 @@ module.exports = function (Source, Utils) {
     };
     return TimelineSources;
 }(_dereq_('./source'), _dereq_('./utils'));
-},{"./source":103,"./utils":109}],108:[function(_dereq_,module,exports){
+},{"./source":104,"./utils":110}],109:[function(_dereq_,module,exports){
 module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLayer, TimelineAxis, Utils, Konva) {
     'use strict';
     function TimelineZoomView(container, peaks) {
@@ -19554,10 +19613,10 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         this._timeToPixelsScale = newScale;
         var apexPixel = this.timeToPixels(apexTime);
         this.setFrameOffset(apexPixel - playheadOffsetPixels);
-        this.updateTimeline(this._frameOffset);
+        this.updateTimeline(this._frameOffset, undefined, undefined, true);
+        this._sourcesLayer.rescale(true);
         this._playheadLayer.zoomLevelChanged();
         this._playheadLayer.updatePlayheadTime(currentTime);
-        this._sourcesLayer.rescale();
         this._peaks.emit('zoom.update', newScale, prevScale);
         return true;
     };
@@ -19630,7 +19689,7 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
     TimelineZoomView.prototype.getAmplitudeScale = function () {
         return this._amplitudeScale;
     };
-    TimelineZoomView.prototype.updateTimeline = function (frameOffset, frameOffsetY, fixPlayhead) {
+    TimelineZoomView.prototype.updateTimeline = function (frameOffset, frameOffsetY, fixPlayhead, ignoreRescale) {
         var frameStartTime = null;
         var frameEndTime = null;
         if (frameOffset !== undefined && frameOffset !== null) {
@@ -19656,6 +19715,9 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         if (frameEndTime === null) {
             frameEndTime = this.pixelsToTime(this._frameOffset + this._width);
         }
+        if (!ignoreRescale) {
+            this._sourcesLayer.rescale();
+        }
         this._sourcesLayer.updateSources(frameStartTime, frameEndTime);
     };
     TimelineZoomView.prototype.toggleMainCursor = function (on, type) {
@@ -19717,7 +19779,7 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
     };
     return TimelineZoomView;
 }(_dereq_('./mouse-drag-handler'), _dereq_('./playhead-layer'), _dereq_('./sources-layer'), _dereq_('./mode-layer'), _dereq_('./timeline-axis'), _dereq_('./utils'), _dereq_('konva'));
-},{"./mode-layer":94,"./mouse-drag-handler":95,"./playhead-layer":97,"./sources-layer":104,"./timeline-axis":105,"./utils":109,"konva":43}],109:[function(_dereq_,module,exports){
+},{"./mode-layer":95,"./mouse-drag-handler":96,"./playhead-layer":98,"./sources-layer":105,"./timeline-axis":106,"./utils":110,"konva":43}],110:[function(_dereq_,module,exports){
 module.exports = function (UUID) {
     'use strict';
     if (typeof Number.isFinite !== 'function') {
@@ -19881,7 +19943,7 @@ module.exports = function (UUID) {
         }
     };
 }(_dereq_('uuid'));
-},{"uuid":62}],110:[function(_dereq_,module,exports){
+},{"uuid":62}],111:[function(_dereq_,module,exports){
 module.exports = function (WaveformData, Utils) {
     'use strict';
     var isXhr2 = 'withCredentials' in new XMLHttpRequest();
@@ -20073,7 +20135,7 @@ module.exports = function (WaveformData, Utils) {
     };
     return WaveformBuilder;
 }(_dereq_('waveform-data'), _dereq_('./utils'));
-},{"./utils":109,"waveform-data":84}],111:[function(_dereq_,module,exports){
+},{"./utils":110,"waveform-data":84}],112:[function(_dereq_,module,exports){
 module.exports = function (Utils, Konva) {
     'use strict';
     function scaleY(amplitude, height, scale) {
@@ -20084,24 +20146,21 @@ module.exports = function (Utils, Konva) {
     }
     function WaveformShape(options) {
         Konva.Shape.call(this, { fill: options.color });
+        this._layer = options.layer;
         this._view = options.view;
         this._source = options.source;
-        this._originalWaveformData = options.waveformData;
-        this._waveformData = options.waveformData;
         this._height = options.height;
-        this.rescale();
+        this._url = options.url + '-scaled';
         this.sceneFunc(this._sceneFunc);
         this.hitFunc(this._waveformShapeHitFunc);
     }
     WaveformShape.prototype = Object.create(Konva.Shape.prototype);
-    WaveformShape.prototype.rescale = function () {
-        this._waveformData = this._originalWaveformData.resample({ scale: this._waveformData.sample_rate / this._view.getTimeToPixelsScale() });
-    };
     WaveformShape.prototype.setWaveformColor = function (color) {
         this.fill(color);
     };
     WaveformShape.prototype._sceneFunc = function (context) {
         var width = this._view.getWidth();
+        var waveformData = this._layer.getLoadedData(this._url).data;
         var startPixels = 0, startOffset = 0;
         if (this._source) {
             startPixels = this._view.timeToPixels(this._source.mediaStartTime) + Math.max(this._view.getFrameOffset() - this._view.timeToPixels(this._source.startTime), 0);
@@ -20109,9 +20168,9 @@ module.exports = function (Utils, Konva) {
         }
         var endPixels = width;
         if (this._source) {
-            endPixels = Math.min(this._view.timeToPixels(this._source.mediaEndTime) - Math.max(this._view.timeToPixels(this._source.endTime) - this._view.getFrameOffset() - this._view.getWidth(), 0), this._waveformData.length);
+            endPixels = Math.min(this._view.timeToPixels(this._source.mediaEndTime) - Math.max(this._view.timeToPixels(this._source.endTime) - this._view.getFrameOffset() - this._view.getWidth(), 0), waveformData.length);
         }
-        this._drawWaveform(context, this._waveformData, startPixels, startOffset, endPixels, this._height);
+        this._drawWaveform(context, waveformData, startPixels, startOffset, endPixels, this._height);
     };
     WaveformShape.prototype._drawWaveform = function (context, waveformData, startPixels, startOffset, endPixels, height) {
         var channels = waveformData.channels;
@@ -20169,6 +20228,6 @@ module.exports = function (Utils, Konva) {
     };
     return WaveformShape;
 }(_dereq_('./utils'), _dereq_('konva'));
-},{"./utils":109,"konva":43}]},{},[92])(92)
+},{"./utils":110,"konva":43}]},{},[93])(93)
 });
 //# sourceMappingURL=peaks.js.map

package/src/invoker.js

@@ -0,0 +1,81 @@
+/**
+ * @file
+ *
+ * Defines the {@link invoker} class.
+ *
+ * @module invoker
+ */
+
+ define([
+  ], function() {
+    'use strict';
+
+    /**
+     * An invoker class for throttling.
+     *
+     * @class
+     * @alias Invoker
+     */
+
+    function Invoker() {
+      this._throttledFunc = {};
+    }
+
+    Invoker.prototype.throttle = function(id, func, wait) {
+      var self = this;
+
+      if (this._throttledFunc[id]) {
+          // Already limiting
+          this._throttledFunc[id].func = func;
+          this._throttledFunc[id].continue = true;
+      }
+      else {
+          // Create a limit
+          this._throttledFunc[id] = {
+              func: func,
+              timer: null,
+              continue: true
+          };
+
+          this._throttledFunc[id].timer = setInterval(function() {
+              if (self._throttledFunc[id].continue) {
+                  func();
+                  self._throttledFunc[id].continue = false;
+              }
+              else {
+                  clearInterval(self._throttledFunc[id].timer);
+                  delete self._throttledFunc[id];
+              }
+          }, wait);
+      }
+    };
+
+    Invoker.prototype.debounce = function(func, wait, immediate) {
+      var timeout;
+
+      return function executedFunction() {
+        // eslint-disable-next-line consistent-this
+        var _self = this;
+        var args = arguments;
+
+        function later() {
+          timeout = null;
+          if (!immediate) {
+            func.apply(_self, args);
+          }
+        }
+
+        var callNow = immediate && !timeout;
+
+        clearTimeout(timeout);
+
+        timeout = setTimeout(later, wait);
+
+        if (callNow) {
+          func.apply(_self, args);
+        }
+      };
+    };
+
+    return Invoker;
+});

package/src/line.js

@@ -596,13 +596,13 @@ define([
     return newXs;
   };
 
-  Line.prototype.rescale = function() {
-    for (var sourceId in this._sourcesGroup) {
-      if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
-        this._sourcesGroup[sourceId].rescale();
-      }
-    }
-  };
+  // Line.prototype.rescale = function() {
+  //   for (var sourceId in this._sourcesGroup) {
+  //     if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
+  //       this._sourcesGroup[sourceId].rescale();
+  //     }
+  //   }
+  // };
 
   Line.prototype.updatePosition = function(pos) {
     for (var sourceId in this._sources) {

package/src/lines.js

@@ -305,13 +305,13 @@ define([
     return this._linesBySourceId[source.id].manageSourceOrder(source, newStartX, newEndX);
   };
 
-  Lines.prototype.rescale = function() {
-    for (var position in this._linesByPosition) {
-      if (Utils.objectHasProperty(this._linesByPosition, position)) {
-        this._linesByPosition[position].rescale();
-      }
-    }
-  };
+  // Lines.prototype.rescale = function() {
+  //   for (var position in this._linesByPosition) {
+  //     if (Utils.objectHasProperty(this._linesByPosition, position)) {
+  //       this._linesByPosition[position].rescale();
+  //     }
+  //   }
+  // };
 
   Lines.prototype._setInteractions = function(position) {
     var line = this._linesByPosition[position];

package/src/source-group.js

@@ -91,23 +91,23 @@ define([
     this.setWrapping(source.wrapped);
   }
 
-  SourceGroup.prototype.rescale = function() {
-    this.update();
-
-    this._previewList.forEach(function(preview) {
-      if (preview.loaded) {
-        switch (preview.type) {
-          case 'audio':
-            preview.group.getChildren()[0].rescale();
-            break;
-          case 'video':
-          case 'image':
-          default:
-            // No resampling
-        }
-      }
-    });
-  };
+  // SourceGroup.prototype.rescale = function() {
+  //   this.update();
+
+  //   this._previewList.forEach(function(preview) {
+  //     if (preview.loaded) {
+  //       switch (preview.type) {
+  //         case 'audio':
+  //           preview.group.getChildren()[0].rescale(true);
+  //           break;
+  //         case 'video':
+  //         case 'image':
+  //         default:
+  //           // No resampling
+  //       }
+  //     }
+  //   });
+  // };
 
   SourceGroup.prototype._onSourceGroupDragStart = function() {
     this._dragged = true;
@@ -667,7 +667,8 @@ define([
         height: this._source.binaryUrl && this._source.previewUrl ?
                 this._source.binaryHeight : this._unwrappedHeight,
         listening: false
-      })
+      }),
+      url: url
     };
 
     var self = this;
@@ -706,6 +707,10 @@ define([
         }
 
         self._layer.setLoadedData(url, originalWaveformData);
+        self._layer.setLoadedData(
+          url + '-scaled',
+          { data: originalWaveformData, scale: originalWaveformData.sample_rate / self._minScale }
+        );
         preview.loaded = true;
         self._createAudioPreview(preview, originalWaveformData, redraw);
       });
@@ -744,24 +749,31 @@ define([
   SourceGroup.prototype._createAudioPreview = function(preview, waveformData, redraw) {
     if (waveformData.hasAudio) {
       var waveform = new WaveformShape({
+        layer: this._layer,
         view: this._view,
         color: this._peaks.options.zoomWaveformColor,
-        waveformData: waveformData,
         source: this._source,
-        height: preview.group.height()
+        height: preview.group.height(),
+        url: preview.url
       });
 
       preview.group.add(waveform);
       this._unwrap.add(preview.group);
 
       if (redraw) {
-        this._group.draw();
+        this._layer.rescale(true);
       }
 
       this._previewList.push(preview);
     }
   };
 
+  SourceGroup.prototype.getAudioPreview = function() {
+    return this._previewList.filter(function(preview) {
+      return preview.type === 'audio';
+    });
+  };
+
   SourceGroup.prototype.setSelected = function(isSelected) {
     // update unwrap
     var background = this._unwrap.getChildren(function(node) {

package/src/sources-layer.js

@@ -12,6 +12,7 @@ define([
   './lines',
   './data-retriever',
   './utils',
+  './invoker',
   'konva'
 ], function(
   SourceGroup,
@@ -19,6 +20,7 @@ define([
   Lines,
   DataRetriever,
   Utils,
+  Invoker,
   Konva) {
   'use strict';
 
@@ -47,6 +49,10 @@ define([
 
     this._loadedData = {};
 
+    this._debouncedRescale = new Invoker().debounce(
+      this._rescale, 150
+    );
+
     this._peaks.on('sources.add', this._onSourcesAdd.bind(this));
     this._peaks.on('sources.destroy', this._onSourcesDestroy.bind(this));
     this._peaks.on('sources.show', this._onSourcesShow.bind(this));
@@ -472,11 +478,51 @@ define([
     return endsLater || startsEarlier;
   };
 
-  SourcesLayer.prototype.rescale = function() {
-    this._lines.rescale();
+  SourcesLayer.prototype.rescale = function(debounce) {
+    // this._lines.rescale();
+    if (debounce) {
+      this._debouncedRescale();
+    }
+    else {
+      this._rescale();
+    }
+  };
+
+  SourcesLayer.prototype._rescale = function() {
+    var id, audioPreviews, urls = [], self = this;
+
+    for (id in this._sourcesGroup) {
+      if (Utils.objectHasProperty(this._sourcesGroup, id)) {
+        audioPreviews = this._sourcesGroup[id].getAudioPreview();
+
+        audioPreviews.forEach(function(audioPreview) {
+          if (self._shouldResampleAudio(audioPreview.url, urls)) {
+            self._loadedData[audioPreview.url + '-scaled'] = {
+              data: self._resampleAudio(audioPreview.url),
+              scale: self._view.getTimeToPixelsScale()
+            };
+
+            urls.push(audioPreview.url);
+          }
+        });
+      }
+    }
     this._layer.draw();
   };
 
+  SourcesLayer.prototype._shouldResampleAudio = function(audioUrl, urls) {
+    return this._loadedData[audioUrl + '-scaled']
+      && !urls.includes(audioUrl)
+      && this._loadedData[audioUrl + '-scaled'].scale !== this._view.getTimeToPixelsScale();
+  };
+
+  SourcesLayer.prototype._resampleAudio = function(audioUrl) {
+    return this._loadedData[audioUrl].resample({
+      scale: this._loadedData[audioUrl].sample_rate
+              / this._view.getTimeToPixelsScale()
+    });
+  };
+
   SourcesLayer.prototype.destroy = function() {
     this._peaks.off('sources.add', this._onSourcesAdd);
     this._peaks.off('sources.destroy', this._onSourcesDestroy);

package/src/timeline-zoomview.js

@@ -588,15 +588,15 @@ define([
 
     this.setFrameOffset(apexPixel - playheadOffsetPixels);
 
-    this.updateTimeline(this._frameOffset);
+    this.updateTimeline(this._frameOffset, undefined, undefined, true);
+
+    this._sourcesLayer.rescale(true);
 
     this._playheadLayer.zoomLevelChanged();
 
     // Update the playhead position after zooming.
     this._playheadLayer.updatePlayheadTime(currentTime);
 
-    this._sourcesLayer.rescale();
-
     this._peaks.emit('zoom.update', newScale, prevScale);
 
     return true;
@@ -742,7 +742,8 @@ define([
    * @param {Number} frameOffset The new frame offset, in pixels.
    */
 
-  TimelineZoomView.prototype.updateTimeline = function(frameOffset, frameOffsetY, fixPlayhead) {
+  TimelineZoomView.prototype.updateTimeline = function(frameOffset, frameOffsetY, fixPlayhead,
+    ignoreRescale) {
     var frameStartTime = null;
     var frameEndTime = null;
 
@@ -783,6 +784,10 @@ define([
       frameEndTime = this.pixelsToTime(this._frameOffset + this._width);
     }
 
+    if (!ignoreRescale) {
+      this._sourcesLayer.rescale();
+    }
+
     this._sourcesLayer.updateSources(frameStartTime, frameEndTime);
   };
 

package/src/waveform-shape.js

@@ -54,13 +54,11 @@ define(['./utils', 'konva'], function(Utils, Konva) {
       fill: options.color
     });
 
+    this._layer = options.layer;
     this._view = options.view;
     this._source = options.source;
-    this._originalWaveformData = options.waveformData;
-    this._waveformData = options.waveformData;
     this._height = options.height;
-
-    this.rescale();
+    this._url = options.url + '-scaled';
 
     this.sceneFunc(this._sceneFunc);
 
@@ -69,18 +67,13 @@ define(['./utils', 'konva'], function(Utils, Konva) {
 
   WaveformShape.prototype = Object.create(Konva.Shape.prototype);
 
-  WaveformShape.prototype.rescale = function() {
-    this._waveformData = this._originalWaveformData.resample({
-      scale: this._waveformData.sample_rate / this._view.getTimeToPixelsScale()
-    });
-  };
-
   WaveformShape.prototype.setWaveformColor = function(color) {
     this.fill(color);
   };
 
   WaveformShape.prototype._sceneFunc = function(context) {
     var width = this._view.getWidth();
+    var waveformData = this._layer.getLoadedData(this._url).data;
 
     var startPixels = 0, startOffset = 0;
 
@@ -103,13 +96,13 @@ define(['./utils', 'konva'], function(Utils, Konva) {
             - this._view.getWidth(),
           0
         ),
-        this._waveformData.length
+        waveformData.length
       );
     }
 
     this._drawWaveform(
       context,
-      this._waveformData,
+      waveformData,
       startPixels,
       startOffset,
       endPixels,