@checksub_team/peaks_timeline 2.0.0-alpha.14 → 2.0.0-alpha.16

package/peaks.js

@@ -14446,16 +14446,16 @@ module.exports = function (Utils, Konva) {
     Axis.prototype._onPlayheadMoved = function (playheadX, playheadWidth) {
         this._maskStart = playheadX + this._view.getFrameOffset();
         this._maskEnd = playheadX + this._view.getFrameOffset() + playheadWidth;
-        this._frontLayer.draw();
+        this._frontLayer.batchDraw();
     };
     Axis.prototype._onPlayheadHidden = function () {
         this._maskStart = null;
         this._maskEnd = null;
-        this._frontLayer.draw();
+        this._frontLayer.batchDraw();
     };
-    Axis.prototype.draw = function () {
-        this._backLayer.draw();
-        this._frontLayer.draw();
+    Axis.prototype.batchDraw = function () {
+        this._backLayer.batchDraw();
+        this._frontLayer.batchDraw();
     };
     Axis.prototype.addBackToStage = function (stage) {
         stage.add(this._backLayer);
@@ -14710,11 +14710,11 @@ module.exports = function (Utils, Konva) {
         if (self._options.draggable) {
             group.on('dragstart', function () {
                 self._label.show();
-                self._options.group.draw();
+                self._batchDraw();
             });
             group.on('dragend', function () {
                 self._label.hide();
-                self._options.group.draw();
+                self._batchDraw();
             });
         }
         if (self._handle) {
@@ -14722,12 +14722,12 @@ module.exports = function (Utils, Konva) {
                 self._options.view.setCursor('ew-resize');
                 self._label.show();
                 self._group.moveToTop();
-                self._options.view.drawSourcesLayer();
+                self._options.view.batchDrawSourcesLayer();
             });
             self._handle.on('mouseout touchend', function () {
                 self._options.view.setCursor('default');
                 self._label.hide();
-                self._options.view.drawSourcesLayer();
+                self._options.view.batchDrawSourcesLayer();
             });
         }
     };
@@ -14745,6 +14745,13 @@ module.exports = function (Utils, Konva) {
     DefaultSegmentMarker.prototype.timeUpdated = function (time) {
         this._label.setText(Utils.formatTime(time, false));
     };
+    DefaultSegmentMarker.prototype._batchDraw = function () {
+        const group = this._options.group;
+        const layer = group && group.getLayer && group.getLayer();
+        if (layer && typeof layer.batchDraw === 'function') {
+            layer.batchDraw();
+        }
+    };
     return DefaultSegmentMarker;
 }(_dereq_('../utils'), _dereq_('konva'));
 },{"../utils":116,"konva":43}],90:[function(_dereq_,module,exports){
@@ -15325,6 +15332,7 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
         this._peaks.on('main.allowInteractions', this.allowInteractions.bind(this));
         this._peaks.on('line.heightChanged', this._onLineHeightChanged.bind(this));
         this._peaks.on('segments.dragend', this._onSegmentUpdated.bind(this));
+        this._peaks.on('lineIndicator.drag', this._onIndicatorDrag.bind(this));
     }
     LineGroups.prototype.fitToView = function () {
         this._lineIndicator.fitToView();
@@ -15692,6 +15700,30 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
         this.refreshLineYs();
         return line.id;
     };
+    LineGroups.prototype._onIndicatorDrag = function (lineId, y) {
+        const lineGroup = this._lineGroupsById[lineId];
+        if (!lineGroup) {
+            return;
+        }
+        const positions = this.getLinesUnderY(y);
+        if (positions[0] !== positions[1] || positions[0] === lineGroup.getPosition()) {
+            return;
+        }
+        const targetPos = positions[0];
+        const targetLineGroup = this._lineGroupsByPosition[targetPos];
+        const targetCenterY = targetLineGroup.y() + targetLineGroup.lineHeight() / 2;
+        const movingDown = targetPos > lineGroup.getPosition();
+        if (movingDown && y < targetCenterY || !movingDown && y > targetCenterY) {
+            return;
+        }
+        if (targetPos === lineGroup.getPosition() + 1) {
+            this._setLinePosition(targetLineGroup.getId(), lineGroup.getPosition());
+        } else {
+            this._setLinePosition(lineId, targetPos);
+        }
+        this.refreshLineYs();
+        this._peaks.emit('line.moved', lineGroup.getLine());
+    };
     LineGroups.prototype.updateSegments = function (frameStartTime, frameEndTime) {
         for (var lineId in this._segmentsGroups) {
             if (Utils.objectHasProperty(this._segmentsGroups, lineId)) {
@@ -15775,7 +15807,12 @@ module.exports = function (Konva, SVGs, Utils) {
             listening: false
         });
         this._layer.add(this._separatingLine);
-        this._layer.draw();
+        this._layer.batchDraw();
+        this._isDragging = false;
+        this._dragLineId = null;
+        this._dragContainerRect = null;
+        this._onWindowMove = this._onWindowMove.bind(this);
+        this._onWindowUp = this._onWindowUp.bind(this);
     }
     LineIndicator.prototype.fitToView = function () {
         this._height = this._view.getHeight();
@@ -15855,19 +15892,30 @@ module.exports = function (Konva, SVGs, Utils) {
             indicator.getChildren().forEach(function (child) {
                 child.fill(child.getAttr('selectedColor'));
             });
-            self.draw();
+            self.batchDraw();
             self._stage.container().style.cursor = 'pointer';
         });
         indicator.on('mouseout', function () {
             indicator.getChildren().forEach(function (child) {
                 child.fill(child.getAttr('defaultColor'));
             });
-            self.draw();
-            self._stage.container().style.cursor = 'default';
+            self.batchDraw();
+            if (!self._isDragging) {
+                self._stage.container().style.cursor = 'default';
+            }
         });
         indicator.on('click', function (e) {
             self._peaks.emit('lineIndicator.click', self._indicators[lineGroup.getId()], e.evt);
         });
+        indicator.on('mousedown touchstart', function () {
+            self._dragLineId = lineGroup.getId();
+            self._dragContainerRect = self._stage.getContainer().getBoundingClientRect();
+            window.addEventListener('mousemove', self._onWindowMove, false);
+            window.addEventListener('touchmove', self._onWindowMove, false);
+            window.addEventListener('mouseup', self._onWindowUp, false);
+            window.addEventListener('touchend', self._onWindowUp, false);
+            window.addEventListener('blur', self._onWindowUp, false);
+        });
         return indicator;
     };
     LineIndicator.prototype.addIndicator = function (lineGroup) {
@@ -15897,7 +15945,7 @@ module.exports = function (Konva, SVGs, Utils) {
         indicatorData.indicator = indicator;
         indicatorData.type = line.indicatorType;
         indicatorData.text = line.indicatorText;
-        this.draw();
+        this.batchDraw();
     };
     LineIndicator.prototype.removeIndicator = function (lineId, keepInList) {
         if (this._indicators[lineId]) {
@@ -15946,12 +15994,39 @@ module.exports = function (Konva, SVGs, Utils) {
             }
         }
         if (anyChange) {
-            this.draw();
+            this.batchDraw();
         }
         return anyChange;
     };
-    LineIndicator.prototype.draw = function () {
-        this._layer.draw();
+    LineIndicator.prototype.batchDraw = function () {
+        this._layer.batchDraw();
+    };
+    LineIndicator.prototype._onWindowMove = function (event) {
+        if (!this._dragContainerRect) {
+            return;
+        }
+        if (!this._isDragging) {
+            this._stage.container().style.cursor = 'grabbing';
+        }
+        var clientY;
+        if (event.type === 'touchmove') {
+            clientY = Math.floor(event.changedTouches[0].clientY);
+        } else {
+            clientY = event.clientY;
+        }
+        const relY = clientY - this._dragContainerRect.top;
+        this._peaks.emit('lineIndicator.drag', this._dragLineId, relY);
+    };
+    LineIndicator.prototype._onWindowUp = function () {
+        window.removeEventListener('mousemove', this._onWindowMove, false);
+        window.removeEventListener('touchmove', this._onWindowMove, false);
+        window.removeEventListener('mouseup', this._onWindowUp, false);
+        window.removeEventListener('touchend', this._onWindowUp, false);
+        window.removeEventListener('blur', this._onWindowUp, false);
+        this._isDragging = false;
+        this._dragLineId = null;
+        this._dragContainerRect = null;
+        this._stage.container().style.cursor = 'pointer';
     };
     return LineIndicator;
 }(_dereq_('konva'), _dereq_('./svgs'), _dereq_('../utils'));
@@ -16198,7 +16273,7 @@ module.exports = function (SourceGroup, Source, Utils, Konva) {
             }
         } else {
             this.deselectDifference([], true);
-            this._view.drawSourcesLayer();
+            this._view.batchDrawSourcesLayer();
         }
     };
     ModeLayer.prototype._onKeyboardDelete = function () {
@@ -16219,7 +16294,7 @@ module.exports = function (SourceGroup, Source, Utils, Konva) {
     };
     ModeLayer.prototype._onMouseEnterInCutMode = function () {
         this._cutGroup.visible(true);
-        this._layer.draw();
+        this._layer.batchDraw();
     };
     ModeLayer.prototype._updateCursorTime = function (position) {
         var hoveredElement = this._view.getHoveredElement();
@@ -16291,11 +16366,11 @@ module.exports = function (SourceGroup, Source, Utils, Konva) {
         }
         this._updateCursorTime(cuttingPosition);
         this._updateCuttingLine(cuttingPosition);
-        this._layer.draw();
+        this._layer.batchDraw();
     };
     ModeLayer.prototype._onMouseLeaveInCutMode = function () {
         this._cutGroup.visible(false);
-        this._layer.draw();
+        this._layer.batchDraw();
     };
     ModeLayer.prototype._onMouseClickInCutMode = function () {
         var mousePosition = this._stage.getPointerPosition();
@@ -16324,7 +16399,7 @@ module.exports = function (SourceGroup, Source, Utils, Konva) {
                 this._view.setHoveredElement(null);
                 this._updateCursorTime(cuttingPosition);
                 this._updateCuttingLine(cuttingPosition);
-                this._layer.draw();
+                this._layer.batchDraw();
             }
         }
     };
@@ -16381,8 +16456,8 @@ module.exports = function (SourceGroup, Source, Utils, Konva) {
             return;
         }
         this._mode = mode;
-        this._layer.draw();
-        this._view.drawSourcesLayer();
+        this._layer.batchDraw();
+        this._view.batchDrawSourcesLayer();
     };
     ModeLayer.prototype.getCurrentMode = function () {
         return this._mode;
@@ -16641,7 +16716,7 @@ module.exports = function (Utils, Konva) {
             }
         }
         this._time = time;
-        this._playheadLayer.draw();
+        this._playheadLayer.batchDraw();
     };
     PlayheadLayer.prototype.getPlayheadOffset = function () {
         return this._playheadPixel - this._view.getFrameOffset();
@@ -16665,7 +16740,7 @@ module.exports = function (Utils, Konva) {
             }
         }
         if (updated) {
-            this._playheadLayer.draw();
+            this._playheadLayer.batchDraw();
         }
     };
     return PlayheadLayer;
@@ -17041,7 +17116,7 @@ module.exports = function (Konva, SegmentMarker, Utils) {
             0.65,
             this._segment.warningColor
         ]);
-        this._view.drawSourcesLayer();
+        this._view.batchDrawSourcesLayer();
         this._peaks.emit('segments.mouseenter', this._segment);
     };
     SegmentShape.prototype._onMouseLeave = function () {
@@ -17055,7 +17130,7 @@ module.exports = function (Konva, SegmentMarker, Utils) {
             0.65,
             this._segment.warningColor
         ]);
-        this._view.drawSourcesLayer();
+        this._view.batchDrawSourcesLayer();
         this._peaks.emit('segments.mouseleave', this._segment);
     };
     SegmentShape.prototype._onClick = function () {
@@ -17356,7 +17431,7 @@ module.exports = function (SegmentShape, Utils, Konva) {
         return visibleSegments;
     };
     SegmentsGroup.prototype._draw = function () {
-        this._view.drawSourcesLayer();
+        this._view.batchDrawSourcesLayer();
     };
     SegmentsGroup.prototype._updateSegment = function (segment) {
         var segmentShape = this._findOrAddSegmentShape(segment);
@@ -17654,6 +17729,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
     var SPACING_BETWEEN_PREVIEWS = 1.5;
     var CORNER_RADIUS = 8;
     var INDICATOR_RADIUS = 4;
+    var PREVIEW_CREATE_CHUNK = 8;
     function SourceGroup(source, peaks, layer, view) {
         this._source = source;
         this._peaks = peaks;
@@ -17673,6 +17749,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         this._hovered = false;
         this._isDragged = false;
         this._previewList = [];
+        this._previewBuildQueue = new Set();
         this._markersGroup = this._createMarkers();
         this._group = new Konva.Group({
             x: this._x,
@@ -17730,14 +17807,14 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         if (!this._source.loading) {
             this._showButtons();
         }
-        this._group.draw();
+        this._batchDraw();
     };
     SourceGroup.prototype._onHoverEnd = function () {
         this._hovered = false;
         this._manualHover = false;
         this._view.setHoveredElement(null);
         this._hideButtons();
-        this._group.draw();
+        this._batchDraw();
     };
     SourceGroup.prototype._onDragStart = function (element) {
         this._isDragged = true;
@@ -17786,7 +17863,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         const {start, end} = this._initialTimes;
         this._view.updateWithAutoScroll(function () {
             if (this._layer.manageSourceMovements([this._source], leftHandle ? start + diff + timeOffsetDiff : null, leftHandle ? null : end + diff + timeOffsetDiff)) {
-                this._layer.draw();
+                this._layer.batchDraw();
             }
         }.bind(this));
         return {
@@ -18258,64 +18335,40 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
                 if (err) {
                     throw err;
                 }
-                originalWaveformData.hasAudio = self._hasAudio(originalWaveformData);
-                if (originalWaveformData.hasAudio) {
-                    var newScale = originalWaveformData.sample_rate / self._view.getTimeToPixelsMaxZoom();
-                    if (newScale > originalWaveformData.scale) {
-                        self._minScale = newScale;
-                    } else {
-                        self._minScale = originalWaveformData.scale;
-                    }
-                    self._view.setTimeToPixelsMaxZoom(originalWaveformData.sample_rate / self._minScale);
+                var newScale = originalWaveformData.sample_rate / self._view.getTimeToPixelsMaxZoom();
+                if (newScale > originalWaveformData.scale) {
+                    self._minScale = newScale;
+                } else {
+                    self._minScale = originalWaveformData.scale;
                 }
+                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);
+                self._createAudioPreview(preview, redraw);
             });
         } else {
             preview.loaded = true;
-            this._createAudioPreview(preview, audioData, redraw);
-        }
-    };
-    SourceGroup.prototype._hasAudio = function (waveformData) {
-        var channels = waveformData.channels;
-        var channel, someIsNotZero = false;
-        for (var i = 0; i < channels; i++) {
-            channel = waveformData.channel(i);
-            someIsNotZero = channel.min_array().some(function (item) {
-                return item !== 0;
-            });
-            if (!someIsNotZero) {
-                someIsNotZero = channel.max_array().some(function (item) {
-                    return item !== 0;
-                });
-            }
-            if (someIsNotZero) {
-                break;
-            }
+            this._createAudioPreview(preview, redraw);
         }
-        return someIsNotZero;
     };
-    SourceGroup.prototype._createAudioPreview = function (preview, waveformData, redraw) {
-        if (waveformData.hasAudio) {
-            var waveform = new WaveformShape({
-                layer: this._layer,
-                view: this._view,
-                source: this._source,
-                height: preview.group.height(),
-                url: preview.url
-            });
-            preview.group.add(waveform);
-            this._addToUnwrap(preview.group);
-            if (redraw) {
-                this._layer.rescale(true);
-            }
-            this._previewList.push(preview);
+    SourceGroup.prototype._createAudioPreview = function (preview, redraw) {
+        var waveform = new WaveformShape({
+            layer: this._layer,
+            view: this._view,
+            source: this._source,
+            height: preview.group.height(),
+            url: preview.url
+        });
+        preview.group.add(waveform);
+        this._addToUnwrap(preview.group);
+        if (redraw) {
+            this._layer.rescale(true);
         }
+        this._previewList.push(preview);
     };
     SourceGroup.prototype.getAudioPreview = function () {
         return this._previewList.filter(function (preview) {
@@ -18382,31 +18435,81 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
                     } else {
                         imageNumber = 0;
                     }
-                    var imageList = preview.group.getChildren();
-                    var i = 0;
-                    for (i = 0; i < imageNumber; i++) {
-                        if (imageList.length > i) {
-                            imageList[i].visible(true);
-                        } else {
-                            var imagePreview = new Konva.Image({
-                                x: preview.imageData.borderSpacing + i * interImageSpacing,
-                                y: preview.imageData.borderSpacing,
-                                image: preview.imageData.image,
-                                width: preview.imageData.width,
-                                height: preview.imageData.height,
-                                listening: false,
-                                visible: true
-                            });
-                            preview.group.add(imagePreview);
-                        }
-                    }
-                    for (i = imageNumber; i < imageList.length; i++) {
-                        imageList[i].visible(false);
-                    }
+                    self._ensureImagePreviewCount(preview, imageNumber, interImageSpacing);
                 }
             }
         });
     };
+    SourceGroup.prototype._batchDraw = function () {
+        var layer = this._group && this._group.getLayer && this._group.getLayer();
+        if (layer && typeof layer.batchDraw === 'function') {
+            layer.batchDraw();
+        }
+    };
+    SourceGroup.prototype._scheduleIdle = function (fn) {
+        if (typeof window !== 'undefined' && window.requestIdleCallback) {
+            return window.requestIdleCallback(fn, { timeout: 50 });
+        }
+        if (typeof window !== 'undefined' && window.requestAnimationFrame) {
+            return window.requestAnimationFrame(function () {
+                fn({
+                    timeRemaining: function () {
+                        return 0;
+                    },
+                    didTimeout: true
+                });
+            });
+        }
+        return setTimeout(function () {
+            fn({
+                timeRemaining: function () {
+                    return 0;
+                },
+                didTimeout: true
+            });
+        }, 0);
+    };
+    SourceGroup.prototype._ensureImagePreviewCount = function (preview, targetCount, interImageSpacing) {
+        var imageList = preview.group.getChildren();
+        var currentCount = imageList.length;
+        for (var i = 0; i < Math.min(currentCount, targetCount); i++) {
+            imageList[i].visible(true);
+        }
+        for (var j = targetCount; j < currentCount; j++) {
+            imageList[j].visible(false);
+        }
+        if (currentCount >= targetCount || this._previewBuildQueue.has(preview)) {
+            this._batchDraw();
+            return;
+        }
+        this._previewBuildQueue.add(preview);
+        var self = this;
+        var nextIndex = currentCount;
+        function buildChunk() {
+            var added = 0;
+            while (nextIndex < targetCount && added < PREVIEW_CREATE_CHUNK) {
+                var imagePreview = new Konva.Image({
+                    x: preview.imageData.borderSpacing + nextIndex * interImageSpacing,
+                    y: preview.imageData.borderSpacing,
+                    image: preview.imageData.image,
+                    width: preview.imageData.width,
+                    height: preview.imageData.height,
+                    listening: false,
+                    visible: true
+                });
+                preview.group.add(imagePreview);
+                nextIndex += 1;
+                added += 1;
+            }
+            self._batchDraw();
+            if (nextIndex < targetCount) {
+                self._scheduleIdle(buildChunk);
+            } else {
+                self._previewBuildQueue.delete(preview);
+            }
+        }
+        this._scheduleIdle(buildChunk);
+    };
     SourceGroup.prototype._createImagePreview = function (preview, image, redraw) {
         preview.imageData = {
             image: image,
@@ -18423,22 +18526,15 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         preview.imageData.height = preview.imageData.referenceHeight - 2 * preview.imageData.borderSpacing;
         preview.imageData.width = preview.imageData.height * preview.imageData.dimRatio;
         preview.imageData.imageSpacing = preview.imageData.width * SPACING_BETWEEN_PREVIEWS;
-        var currentX = preview.imageData.borderSpacing;
-        while (currentX < this._width) {
-            var imagePreview = new Konva.Image({
-                x: currentX,
-                y: preview.imageData.borderSpacing,
-                image: image,
-                width: preview.imageData.width,
-                height: preview.imageData.height,
-                listening: false
-            });
-            preview.group.add(imagePreview);
-            currentX += preview.imageData.width + preview.imageData.imageSpacing;
-        }
         this._addToUnwrap(preview.group);
+        var interImageSpacing = preview.imageData.width + preview.imageData.imageSpacing;
+        var targetCount = 0;
+        if (this._width > preview.imageData.borderSpacing) {
+            targetCount = Math.trunc((this._width - preview.imageData.borderSpacing) / interImageSpacing) + 1;
+        }
+        this._ensureImagePreviewCount(preview, targetCount, interImageSpacing);
         if (redraw) {
-            this._group.draw();
+            this._batchDraw();
         }
         this._previewList.push(preview);
     };
@@ -18881,7 +18977,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
             volumeText.text((volume * 100).toFixed(0) + '%');
             self._source.volume = Math.max(self._source.volumeRange[0], Math.min(volume, self._source.volumeRange[1]));
             self._peaks.emit('source.volumeChanged', self._source);
-            self._group.draw();
+            self._batchDraw();
         });
         volumeSliderGroup.on('dragend', function () {
             volumeText.visible(false);
@@ -19016,7 +19112,7 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
                 sourceGroup.setSelected();
             }
         }.bind(this));
-        this.draw();
+        this.batchDraw();
     };
     SourcesLayer.prototype._onSourcesAdd = function (sources) {
         var self = this;
@@ -19036,21 +19132,21 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
             self._removeSource(source);
         });
         this._view.updateTimelineLength();
-        this._layer.draw();
+        this._layer.batchDraw();
     };
     SourcesLayer.prototype._onSourcesShow = function (sources) {
         var self = this;
         sources.forEach(function (source) {
             self._sourcesGroup[source.id].setWrapping(false, true);
         });
-        this._layer.draw();
+        this._layer.batchDraw();
     };
     SourcesLayer.prototype._onSourcesHide = function (sources) {
         var self = this;
         sources.forEach(function (source) {
             self._sourcesGroup[source.id].setWrapping(true, true);
         });
-        this._layer.draw();
+        this._layer.batchDraw();
     };
     SourcesLayer.prototype._onDataRetrieved = function (data, source, url) {
         if (data) {
@@ -19079,7 +19175,7 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
     SourcesLayer.prototype._onSegmentsShow = function (segmentsGroupId, lineId) {
         this._lineGroups.addSegments(segmentsGroupId, lineId);
         this._view.updateTimelineLength();
-        this._layer.draw();
+        this._layer.batchDraw();
     };
     SourcesLayer.prototype._createSourceGroup = function (source) {
         return new SourceGroup(source, this._peaks, this, this._view);
@@ -19097,7 +19193,7 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         var sourceGroup = this._sourcesGroup[source.id];
         if (sourceGroup) {
             sourceGroup.createIndicators();
-            this._layer.draw();
+            this._layer.batchDraw();
         }
     };
     SourcesLayer.prototype.updateSources = function (startTime, endTime) {
@@ -19107,7 +19203,7 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         sources.forEach(this._updateSource.bind(this));
         count += this._removeInvisibleSources(startTime, endTime);
         if (count > 0) {
-            this._layer.draw();
+            this._layer.batchDraw();
         }
     };
     SourcesLayer.prototype.onSourcesGroupDragStart = function (element) {
@@ -19144,7 +19240,7 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
             return source;
         }.bind(this));
         this._draggedElementId = null;
-        this._view.drawSourcesLayer();
+        this._view.batchDrawSourcesLayer();
         this._view.updateTimelineLength();
         this._peaks.emit('sources.updated', updatedSources);
     };
@@ -19167,7 +19263,7 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         }
         const shouldRedraw = this.manageSourceMovements(this._draggedElements, initialStartTime + timeOffsetDiff + timeDiff, initialEndTime + timeOffsetDiff + timeDiff, orderable, mousePosX, mousePosY);
         if (shouldRedraw) {
-            this.draw();
+            this.batchDraw();
         }
     };
     SourcesLayer.prototype.findSources = function (startTime, endTime) {
@@ -19292,8 +19388,8 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
     SourcesLayer.prototype.setVisible = function (visible) {
         this._layer.setVisible(visible);
     };
-    SourcesLayer.prototype.draw = function () {
-        this._layer.draw();
+    SourcesLayer.prototype.batchDraw = function () {
+        this._layer.batchDraw();
     };
     SourcesLayer.prototype.listening = function (bool) {
         this._layer.listening(bool);
@@ -19335,7 +19431,7 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
                 });
             }
         }
-        this._layer.draw();
+        this._layer.batchDraw();
     };
     SourcesLayer.prototype._shouldResampleAudio = function (audioUrl, urls) {
         return this._loadedData[audioUrl + '-scaled'] && !urls.includes(audioUrl) && this._loadedData[audioUrl + '-scaled'].scale !== this._view.getTimeToPixelsScale();
@@ -19399,6 +19495,12 @@ module.exports = function () {
 module.exports = function (WaveformData, Utils) {
     'use strict';
     var isXhr2 = 'withCredentials' in new XMLHttpRequest();
+    function scheduleIdle(fn) {
+        if (typeof window !== 'undefined' && window.requestIdleCallback) {
+            return window.requestIdleCallback(fn, { timeout: 80 });
+        }
+        return setTimeout(fn, 0);
+    }
     function WaveformBuilder(peaks) {
         this._peaks = peaks;
     }
@@ -19463,12 +19565,18 @@ module.exports = function (WaveformData, Utils) {
                 callback(new Error('Unable to fetch remote data. HTTP status ' + this.status));
                 return;
             }
-            var waveformData = WaveformData.create(event.target.response);
-            if (waveformData.channels !== 1 && waveformData.channels !== 2) {
-                callback(new Error('Peaks.init(): Only mono or stereo waveforms are currently supported'));
-                return;
-            }
-            callback(null, waveformData);
+            scheduleIdle(function () {
+                try {
+                    var waveformData = WaveformData.create(event.target.response);
+                    if (waveformData.channels !== 1 && waveformData.channels !== 2) {
+                        callback(new Error('Peaks.init(): Only mono or stereo waveforms are currently supported'));
+                        return;
+                    }
+                    callback(null, waveformData);
+                } catch (err) {
+                    callback(err);
+                }
+            });
         }, function () {
             callback(new Error('XHR Failed'));
         });
@@ -19492,16 +19600,18 @@ module.exports = function (WaveformData, Utils) {
             callback(new Error('Peaks.init(): Unable to determine a compatible waveformData format'));
             return;
         }
-        try {
-            var createdWaveformData = WaveformData.create(data);
-            if (createdWaveformData.channels !== 1 && createdWaveformData.channels !== 2) {
-                callback(new Error('Peaks.init(): Only mono or stereo waveforms are currently supported'));
-                return;
+        scheduleIdle(function () {
+            try {
+                var createdWaveformData = WaveformData.create(data);
+                if (createdWaveformData.channels !== 1 && createdWaveformData.channels !== 2) {
+                    callback(new Error('Peaks.init(): Only mono or stereo waveforms are currently supported'));
+                    return;
+                }
+                callback(null, createdWaveformData);
+            } catch (err) {
+                callback(err);
             }
-            callback(null, createdWaveformData);
-        } catch (err) {
-            callback(err);
-        }
+        });
     };
     WaveformBuilder.prototype._buildWaveformDataUsingWebAudio = function (options, callback) {
         var self = this;
@@ -22359,11 +22469,11 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
     View.prototype.overrideInteractions = function (areInteractionsAllowed) {
         this._playheadLayer.listening(areInteractionsAllowed);
         this._sourcesLayer.stopDrag();
-        this._sourcesLayer.draw();
+        this._sourcesLayer.batchDraw();
     };
     View.prototype.allowInteractions = function () {
         this._sourcesLayer.stopDrag();
-        this._sourcesLayer.draw();
+        this._sourcesLayer.batchDraw();
     };
     View.prototype.getSelectedElements = function () {
         return this._modeLayer.getSelectedElements();
@@ -22392,8 +22502,8 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
     View.prototype.isFocused = function () {
         return this._isFocused;
     };
-    View.prototype.drawSourcesLayer = function () {
-        this._sourcesLayer.draw();
+    View.prototype.batchDrawSourcesLayer = function () {
+        this._sourcesLayer.batchDraw();
     };
     View.prototype.refresh = function () {
         this._sourcesLayer.refresh();
@@ -22618,7 +22728,7 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
             this.setFrameOffset(frameOffset);
             const playheadPixel = this._playheadLayer.getPlayheadPixel();
             this._playheadLayer.updatePlayheadTime(this.pixelsToTime(playheadPixel));
-            this._axis.draw();
+            this._axis.batchDraw();
         }
         const frameStartTime = this.pixelsToTime(this._frameOffset);
         const frameEndTime = this.pixelsToTime(this._frameOffset + this._width);
@@ -22672,7 +22782,7 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
             this._sourcesLayer.fitToView();
             this._playheadLayer.fitToView();
             this.updateTimeline(this._frameOffset);
-            this._stage.draw();
+            this._stage.batchDraw();
         }
     };
     View.prototype.getFullHeight = function () {