@checksub_team/peaks_timeline 1.4.17 → 1.4.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checksub_team/peaks_timeline",
-  "version": "1.4.17",
+  "version": "1.4.20",
   "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() {
@@ -15526,6 +15561,9 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
     Peaks.prototype.allowInteractions = function (forSources, forSegments) {
         return this.view.allowInteractions(forSources, forSegments);
     };
+    Peaks.prototype.checkOverlapping = function (segment, message) {
+        return this.view.getSegmentsGroup().checkOverlapping(segment, message);
+    };
     Peaks.prototype._addWindowResizeHandler = function () {
         this._onResize = this._onResize.bind(this);
         window.addEventListener('resize', this._onResize);
@@ -15553,7 +15591,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 +15623,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 +15870,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 +15966,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 +16050,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 +16290,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 +16376,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 +16607,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) {
@@ -16712,6 +16750,7 @@ module.exports = function (Utils) {
         };
         Utils.extend(opts, options);
         validateSegment(this._peaks, opts, 'update()');
+        this._peaks.checkOverlapping(this, 'overlapping before manual update');
         this._startTime = opts.startTime;
         this._endTime = opts.endTime;
         this._labelText = opts.labelText;
@@ -16720,6 +16759,7 @@ module.exports = function (Utils) {
         this._handleTextColor = opts.handleTextColor;
         this._opacity = opts.opacity;
         this._editable = opts.editable;
+        this._peaks.checkOverlapping(this, 'overlapping after manual update');
         this._peaks.emit('segment.updated', this);
     };
     Segment.prototype.isVisible = function (startTime, endTime) {
@@ -16727,7 +16767,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) {
@@ -16740,6 +16780,7 @@ module.exports = function (SegmentShape, Utils, Konva) {
         this._segmentShapes = {};
         this._group = new Konva.Group();
         this._updatedSegments = [];
+        this._overlappingSegments = [];
         this._isMagnetized = false;
         this._peaks.on('segment.updated', this._onSegmentsUpdate.bind(this));
         this._peaks.on('segments.add', this._onSegmentsAdd.bind(this));
@@ -16789,6 +16830,7 @@ module.exports = function (SegmentShape, Utils, Konva) {
         return activeSegment;
     };
     SegmentsGroup.prototype._onSegmentsUpdate = function (segment) {
+        this._overlappingSegments = [];
         if (this._segments[segment.id]) {
             var redraw = false;
             var segmentShape = this._segmentShapes[segment.id];
@@ -16814,6 +16856,7 @@ module.exports = function (SegmentShape, Utils, Konva) {
     SegmentsGroup.prototype._onSegmentUpdated = function () {
         this._peaks.emit('segments.updated', this._updatedSegments);
         this._updatedSegments = [];
+        this._overlappingSegments = [];
     };
     SegmentsGroup.prototype._onSegmentsAdd = function (segments) {
         var self = this;
@@ -16998,6 +17041,7 @@ module.exports = function (SegmentShape, Utils, Konva) {
         }
     };
     SegmentsGroup.prototype.updateSegment = function (segment, newStartX, newEndX) {
+        this.checkOverlapping(segment, 'overlapping before dragging');
         var newXs = this.manageCollision(segment, newStartX, newEndX);
         if (newXs.startX !== null) {
             segment.startTime = this._view.pixelsToTime(newXs.startX);
@@ -17006,17 +17050,31 @@ module.exports = function (SegmentShape, Utils, Konva) {
             segment.endTime = this._view.pixelsToTime(newXs.endX);
         }
         if (newXs) {
+            this.checkOverlapping(segment, 'overlapping after dragging');
             this._updateSegment(segment);
             this.addToUpdatedSegments(segment);
             this._draw();
         }
     };
+    SegmentsGroup.prototype.checkOverlapping = function (segment, message) {
+        if (this._segments[segment.id].prevSegmentId && this._segments[this._segments[segment.id].prevSegmentId].segment.endTime > segment.startTime || this._segments[segment.id].nextSegmentId && this._segments[this._segments[segment.id].nextSegmentId].segment.startTime < segment.endTime) {
+            if (!this._overlappingSegments.includes(segment.id)) {
+                this._peaks.emit('segments.overlap', {
+                    message: message,
+                    segment: segment,
+                    prevSegment: this._segments[segment.id].prevSegmentId ? this._segments[this._segments[segment.id].prevSegmentId].segment : null,
+                    nextSegment: this._segments[segment.id].nextSegmentId ? this._segments[this._segments[segment.id].nextSegmentId].segment : null
+                });
+                this._overlappingSegments.push(segment.id);
+            }
+        }
+    };
     SegmentsGroup.prototype.manageCollision = function (segment, newStartX, newEndX) {
         var newStartTime = null;
         var newEndTime = null;
         var startLimited = false;
         var endLimited = false;
-        var segmentMagnetThreshold, width;
+        var segmentMagnetThreshold, width, previousSegment, nextSegment, newXs;
         if (this._isMagnetized) {
             segmentMagnetThreshold = this._view.pixelsToTime(this._peaks.options.segmentMagnetThreshold);
             if (newStartX !== null && newEndX !== null) {
@@ -17026,7 +17084,7 @@ module.exports = function (SegmentShape, Utils, Konva) {
         if (newStartX !== null) {
             newStartTime = this._view.pixelsToTime(newStartX);
             if (this._segments[segment.id].prevSegmentId) {
-                var previousSegment = this._segments[this._segments[segment.id].prevSegmentId].segment;
+                previousSegment = this._segments[this._segments[segment.id].prevSegmentId].segment;
                 if (this._isMagnetized) {
                     if (newStartTime < previousSegment.endTime + segmentMagnetThreshold) {
                         newStartX = this._view.timeToPixels(previousSegment.endTime);
@@ -17038,14 +17096,20 @@ module.exports = function (SegmentShape, Utils, Konva) {
                             endX: newEndX
                         };
                     }
-                } else if (segment.startTime > newStartTime) {
+                } else if (segment.startTime >= newStartTime) {
                     if (newStartTime < previousSegment.endTime) {
                         if (previousSegment.startTime + previousSegment.minSize > newStartTime) {
                             newStartTime = previousSegment.startTime + previousSegment.minSize;
                             startLimited = true;
                         }
                         if (previousSegment.endTime !== newStartTime) {
-                            previousSegment.endTime = newStartTime;
+                            newXs = this.manageCollision(previousSegment, this._view.timeToPixels(previousSegment.startTime), this._view.timeToPixels(newStartTime));
+                            if (newXs.startX !== null) {
+                                previousSegment.startTime = this._view.pixelsToTime(newXs.startX);
+                            }
+                            if (newXs.endX !== null) {
+                                previousSegment.endTime = this._view.pixelsToTime(newXs.endX);
+                            }
                             this._updateSegment(previousSegment);
                             this.addToUpdatedSegments(previousSegment);
                         }
@@ -17061,7 +17125,7 @@ module.exports = function (SegmentShape, Utils, Konva) {
         if (newEndX !== null) {
             newEndTime = this._view.pixelsToTime(newEndX);
             if (this._segments[segment.id].nextSegmentId) {
-                var nextSegment = this._segments[this._segments[segment.id].nextSegmentId].segment;
+                nextSegment = this._segments[this._segments[segment.id].nextSegmentId].segment;
                 if (this._isMagnetized) {
                     if (newEndTime > nextSegment.startTime - segmentMagnetThreshold) {
                         newEndX = this._view.timeToPixels(nextSegment.startTime);
@@ -17073,14 +17137,20 @@ module.exports = function (SegmentShape, Utils, Konva) {
                             endX: newEndX
                         };
                     }
-                } else if (segment.endTime < newEndTime) {
+                } else if (segment.endTime <= newEndTime) {
                     if (newEndTime > nextSegment.startTime) {
                         if (nextSegment.endTime - nextSegment.minSize < newEndTime) {
                             newEndTime = nextSegment.endTime - nextSegment.minSize;
                             endLimited = true;
                         }
                         if (nextSegment.startTime !== newEndTime) {
-                            nextSegment.startTime = newEndTime;
+                            newXs = this.manageCollision(nextSegment, this._view.timeToPixels(newEndTime), this._view.timeToPixels(nextSegment.endTime));
+                            if (newXs.startX !== null) {
+                                nextSegment.startTime = this._view.pixelsToTime(newXs.startX);
+                            }
+                            if (newXs.endX !== null) {
+                                nextSegment.endTime = this._view.pixelsToTime(newXs.endX);
+                            }
                             this._updateSegment(nextSegment);
                             this.addToUpdatedSegments(nextSegment);
                         }
@@ -17090,7 +17160,15 @@ module.exports = function (SegmentShape, Utils, Konva) {
             }
         }
         if (newStartTime !== null && newEndTime !== null) {
-            if (newEndTime - newStartTime < segment.minSize) {
+            if (Utils.roundTime(newEndTime - newStartTime) < segment.minSize) {
+                if (previousSegment && nextSegment) {
+                    if (Utils.roundTime(nextSegment.startTime - previousSegment.endTime) < segment.minSize) {
+                        return {
+                            startX: null,
+                            endX: null
+                        };
+                    }
+                }
                 if (startLimited) {
                     newEndTime = newStartTime + segment.minSize;
                 } else if (endLimited) {
@@ -17098,11 +17176,11 @@ module.exports = function (SegmentShape, Utils, Konva) {
                 }
             }
         } else if (newStartTime !== null) {
-            if (segment.endTime - newStartTime < segment.minSize) {
+            if (Utils.roundTime(segment.endTime - newStartTime) < segment.minSize) {
                 newStartTime = segment.endTime - segment.minSize;
             }
         } else if (newEndTime !== null) {
-            if (newEndTime - segment.startTime < segment.minSize) {
+            if (Utils.roundTime(newEndTime - segment.startTime) < segment.minSize) {
                 newEndTime = segment.startTime + segment.minSize;
             }
         }
@@ -17180,7 +17258,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 +17311,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 +17722,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 +17750,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 +17784,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 +17963,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 +18500,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 +18514,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 +18774,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 +18822,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 +18964,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 +19112,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 +19279,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 +19656,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 +19732,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 +19758,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 +19822,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 +19986,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 +20178,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 +20189,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 +20211,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 +20271,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/main.js

@@ -622,6 +622,12 @@ define([
             .allowInteractions(forSources, forSegments);
   };
 
+  Peaks.prototype.checkOverlapping = function(segment, message) {
+    return this.view
+            .getSegmentsGroup()
+            .checkOverlapping(segment, message);
+  };
+
   Peaks.prototype._addWindowResizeHandler = function() {
     this._onResize = this._onResize.bind(this);
     window.addEventListener('resize', this._onResize);

package/src/segment.js

@@ -199,6 +199,8 @@ define([
 
     validateSegment(this._peaks, opts, 'update()');
 
+    this._peaks.checkOverlapping(this, 'overlapping before manual update');
+
     this._startTime       = opts.startTime;
     this._endTime         = opts.endTime;
     this._labelText       = opts.labelText;
@@ -208,6 +210,8 @@ define([
     this._opacity         = opts.opacity;
     this._editable        = opts.editable;
 
+    this._peaks.checkOverlapping(this, 'overlapping after manual update');
+
     this._peaks.emit('segment.updated', this);
   };
 

package/src/segments-group.js

@@ -41,6 +41,7 @@ define([
     this._group         = new Konva.Group();
 
     this._updatedSegments = [];
+    this._overlappingSegments = [];
 
     this._isMagnetized = false;
 
@@ -113,6 +114,8 @@ define([
   };
 
   SegmentsGroup.prototype._onSegmentsUpdate = function(segment) {
+    this._overlappingSegments = [];
+
     if (this._segments[segment.id]) {
       var redraw = false;
       var segmentShape = this._segmentShapes[segment.id];
@@ -143,6 +146,7 @@ define([
   SegmentsGroup.prototype._onSegmentUpdated = function() {
     this._peaks.emit('segments.updated', this._updatedSegments);
     this._updatedSegments = [];
+    this._overlappingSegments = [];
   };
 
   SegmentsGroup.prototype._onSegmentsAdd = function(segments) {
@@ -441,6 +445,8 @@ define([
   };
 
   SegmentsGroup.prototype.updateSegment = function(segment, newStartX, newEndX) {
+    this.checkOverlapping(segment, 'overlapping before dragging');
+
     var newXs = this.manageCollision(segment, newStartX, newEndX);
 
     if (newXs.startX !== null) {
@@ -452,6 +458,8 @@ define([
     }
 
     if (newXs) {
+      this.checkOverlapping(segment, 'overlapping after dragging');
+
       this._updateSegment(segment);
 
       this.addToUpdatedSegments(segment);
@@ -460,12 +468,33 @@ define([
     }
   };
 
+  SegmentsGroup.prototype.checkOverlapping = function(segment, message) {
+    /* eslint-disable max-len */
+    if ((this._segments[segment.id].prevSegmentId
+        && this._segments[this._segments[segment.id].prevSegmentId].segment.endTime > segment.startTime)
+      || (this._segments[segment.id].nextSegmentId
+        && this._segments[this._segments[segment.id].nextSegmentId].segment.startTime < segment.endTime)) {
+
+      if (!this._overlappingSegments.includes(segment.id)) {
+        this._peaks.emit('segments.overlap', {
+          message: message,
+          segment: segment,
+          prevSegment: this._segments[segment.id].prevSegmentId ? this._segments[this._segments[segment.id].prevSegmentId].segment : null,
+          nextSegment: this._segments[segment.id].nextSegmentId ? this._segments[this._segments[segment.id].nextSegmentId].segment : null
+        });
+        this._overlappingSegments.push(segment.id);
+      }
+
+    }
+    /* eslint-enable max-len */
+  };
+
   SegmentsGroup.prototype.manageCollision = function(segment, newStartX, newEndX) {
     var newStartTime = null;
     var newEndTime = null;
     var startLimited = false;
     var endLimited = false;
-    var segmentMagnetThreshold, width;
+    var segmentMagnetThreshold, width, previousSegment, nextSegment, newXs;
 
     if (this._isMagnetized) {
       segmentMagnetThreshold = this._view.pixelsToTime(
@@ -483,7 +512,7 @@ define([
 
       if (this._segments[segment.id].prevSegmentId) {
         // there is another segment to the left
-        var previousSegment = this._segments[this._segments[segment.id].prevSegmentId].segment;
+        previousSegment = this._segments[this._segments[segment.id].prevSegmentId].segment;
 
         if (this._isMagnetized) {
           if (newStartTime < previousSegment.endTime + segmentMagnetThreshold) {
@@ -498,7 +527,7 @@ define([
             };
           }
         }
-        else if (segment.startTime > newStartTime) {
+        else if (segment.startTime >= newStartTime) {
           // startMarker moved to the left
           if (newStartTime < previousSegment.endTime) {
             // there is collision
@@ -508,7 +537,15 @@ define([
             }
 
             if (previousSegment.endTime !== newStartTime) {
-              previousSegment.endTime = newStartTime;
+              newXs = this.manageCollision(previousSegment, this._view.timeToPixels(previousSegment.startTime), this._view.timeToPixels(newStartTime));
+
+              if (newXs.startX !== null) {
+                previousSegment.startTime = this._view.pixelsToTime(newXs.startX);
+              }
+
+              if (newXs.endX !== null) {
+                previousSegment.endTime = this._view.pixelsToTime(newXs.endX);
+              }
               this._updateSegment(previousSegment);
               this.addToUpdatedSegments(previousSegment);
             }
@@ -529,7 +566,7 @@ define([
 
       if (this._segments[segment.id].nextSegmentId) {
         // there is another segment to the right
-        var nextSegment = this._segments[this._segments[segment.id].nextSegmentId].segment;
+        nextSegment = this._segments[this._segments[segment.id].nextSegmentId].segment;
 
         if (this._isMagnetized) {
           if (newEndTime > nextSegment.startTime - segmentMagnetThreshold) {
@@ -544,7 +581,7 @@ define([
             };
           }
         }
-        else if (segment.endTime < newEndTime) {
+        else if (segment.endTime <= newEndTime) {
           // endMarker moved to the right
           if (newEndTime > nextSegment.startTime) {
             // there is collision
@@ -554,7 +591,15 @@ define([
             }
 
             if (nextSegment.startTime !== newEndTime) {
-              nextSegment.startTime = newEndTime;
+              newXs = this.manageCollision(nextSegment, this._view.timeToPixels(newEndTime), this._view.timeToPixels(nextSegment.endTime));
+
+              if (newXs.startX !== null) {
+                nextSegment.startTime = this._view.pixelsToTime(newXs.startX);
+              }
+
+              if (newXs.endX !== null) {
+                nextSegment.endTime = this._view.pixelsToTime(newXs.endX);
+              }
               this._updateSegment(nextSegment);
               this.addToUpdatedSegments(nextSegment);
             }
@@ -568,7 +613,16 @@ define([
 
     // Check for minimal size of segment
     if (newStartTime !== null && newEndTime !== null) {
-      if (newEndTime - newStartTime < segment.minSize) {
+      if (Utils.roundTime(newEndTime - newStartTime) < segment.minSize) {
+        if (previousSegment && nextSegment) {
+          if (Utils.roundTime(nextSegment.startTime - previousSegment.endTime) < segment.minSize) {
+            return {
+              startX: null,
+              endX: null
+            };
+          }
+        }
+
         if (startLimited) {
           newEndTime = newStartTime + segment.minSize;
         }
@@ -578,12 +632,12 @@ define([
       }
     }
     else if (newStartTime !== null) {
-      if (segment.endTime - newStartTime < segment.minSize) {
+      if (Utils.roundTime(segment.endTime - newStartTime) < segment.minSize) {
         newStartTime = segment.endTime - segment.minSize;
       }
     }
     else if (newEndTime !== null) {
-      if (newEndTime - segment.startTime < segment.minSize) {
+      if (Utils.roundTime(newEndTime - segment.startTime) < segment.minSize) {
         newEndTime = segment.startTime + segment.minSize;
       }
     }

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,