@checksub_team/peaks_timeline 2.0.0-alpha.9 → 2.0.1

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);
@@ -14561,7 +14561,7 @@ module.exports = function (Utils, Konva) {
     return Axis;
 }(_dereq_('../utils'), _dereq_('konva'));
 },{"../utils":116,"konva":43}],87:[function(_dereq_,module,exports){
-module.exports = function (Data) {
+module.exports = function (Data, Utils) {
     'use strict';
     function DataRetriever(peaks) {
         this._peaks = peaks;
@@ -14607,11 +14607,10 @@ module.exports = function (Data) {
                     throw new Error('HTTP ' + response.status + ': ' + response.statusText);
                 }
                 return response.blob();
-            }).catch(function (err) {
-                return later(delay).then(function () {
-                    return recur(timesTried + 1, err);
-                });
             }).then(function (blob) {
+                if (Utils.isNullOrUndefined(blob)) {
+                    throw new Error('Failed to retrieve blob');
+                }
                 var type = blob.type;
                 if (type) {
                     type = type.split('/')[0];
@@ -14625,13 +14624,17 @@ module.exports = function (Data) {
                         self._peaks.emit('data.retrieved', data, src, url);
                     });
                 }
+            }).catch(function (err) {
+                return later(delay).then(function () {
+                    return recur(timesTried + 1, err);
+                });
             });
         }
         return recur(0);
     };
     return DataRetriever;
-}(_dereq_('./data'));
-},{"./data":88}],88:[function(_dereq_,module,exports){
+}(_dereq_('./data'), _dereq_('../utils'));
+},{"../utils":116,"./data":88}],88:[function(_dereq_,module,exports){
 module.exports = function () {
     'use strict';
     function Data(type, content) {
@@ -14710,11 +14713,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 +14725,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 +14748,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 +15335,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();
@@ -15502,11 +15513,18 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
         this._automaticLineCreationPosition = newLinePosition;
         this._automaticLineCreationTimeout = setTimeout(function () {
             this._automaticLineCreationTimeout = null;
-            var currentLine = this._lineGroupsByPosition[initialPosition];
+            const currentLine = this._lineGroupsByPosition[initialPosition];
             sources = sources.filter(function (source) {
                 return currentLine.hasSource(source.id);
             });
-            if (sources.length === 0 || sources.length === currentLine.countRemainingElements()) {
+            if (sources.length === 0) {
+                this.stopAutomaticLineCreation();
+                return;
+            }
+            const posAround = this.getLinesAroundPos(currentLine.getPosition());
+            const targetPosIsJustBefore = newLinePosition <= currentLine.getPosition() && newLinePosition > posAround[0];
+            const targetPosIsJustAfter = newLinePosition >= currentLine.getPosition() && newLinePosition <= posAround[1];
+            if (sources.length === currentLine.countRemainingElements() && (targetPosIsJustBefore || targetPosIsJustAfter)) {
                 this.stopAutomaticLineCreation();
                 return;
             }
@@ -15583,6 +15601,24 @@ module.exports = function (SegmentsGroup, LineGroup, LineIndicator, Utils) {
         }
         return pos;
     };
+    LineGroups.prototype.getLinesAroundPos = function (pos) {
+        var returnPos = [
+            -1,
+            this.getLastPosition() + 1
+        ];
+        for (var position in this._lineGroupsByPosition) {
+            if (Utils.objectHasProperty(this._lineGroupsByPosition, position)) {
+                var p = parseInt(position, 10);
+                if (p < pos) {
+                    returnPos[0] = p;
+                } else if (p > pos) {
+                    returnPos[1] = p;
+                    break;
+                }
+            }
+        }
+        return returnPos;
+    };
     LineGroups.prototype._moveSourcesToPositionIfPossible = function (sources, targetPosition, targetTime, sourcesDuration) {
         const lineGroup = this._lineGroupsByPosition[targetPosition];
         if (!lineGroup || lineGroup.isSegmentsLine()) {
@@ -15667,6 +15703,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)) {
@@ -15750,7 +15810,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();
@@ -15830,19 +15895,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) {
@@ -15853,7 +15929,8 @@ module.exports = function (Konva, SVGs, Utils) {
             this._indicators[line.id] = {
                 lineGroup: lineGroup,
                 indicator: indicator,
-                type: line.indicatorType
+                type: line.indicatorType,
+                text: line.indicatorText
             };
         }
     };
@@ -15872,7 +15949,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]) {
@@ -15921,12 +15998,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'));
@@ -16173,7 +16277,7 @@ module.exports = function (SourceGroup, Source, Utils, Konva) {
             }
         } else {
             this.deselectDifference([], true);
-            this._view.drawSourcesLayer();
+            this._view.batchDrawSourcesLayer();
         }
     };
     ModeLayer.prototype._onKeyboardDelete = function () {
@@ -16194,7 +16298,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();
@@ -16266,11 +16370,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();
@@ -16299,7 +16403,7 @@ module.exports = function (SourceGroup, Source, Utils, Konva) {
                 this._view.setHoveredElement(null);
                 this._updateCursorTime(cuttingPosition);
                 this._updateCuttingLine(cuttingPosition);
-                this._layer.draw();
+                this._layer.batchDraw();
             }
         }
     };
@@ -16356,8 +16460,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;
@@ -16616,7 +16720,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();
@@ -16640,7 +16744,7 @@ module.exports = function (Utils, Konva) {
             }
         }
         if (updated) {
-            this._playheadLayer.draw();
+            this._playheadLayer.batchDraw();
         }
     };
     return PlayheadLayer;
@@ -17016,7 +17120,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 () {
@@ -17030,7 +17134,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 () {
@@ -17331,7 +17435,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);
@@ -17629,6 +17733,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;
@@ -17648,6 +17753,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,
@@ -17663,18 +17769,8 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         this._group.on('dragstart', this._onDragStart.bind(this));
         this._group.on('dragend', this._onDragEnd.bind(this));
         this._cursor = null;
-        this._group.on('mouseenter', function () {
-            self._setHovered(true);
-            self._view.setHoveredElement(self);
-            if (!self._source.loading) {
-                self._showButtons();
-            }
-        });
-        this._group.on('mouseleave', function () {
-            self._setHovered(false);
-            self._view.setHoveredElement(null);
-            self._hideButtons();
-        });
+        this._group.on('mouseenter', this._onHoverStart.bind(this));
+        this._group.on('mouseleave', this._onHoverEnd.bind(this));
         this._group.on('mouseover', function () {
             if (self._source.draggable) {
                 self._view.setCursor(self._cursor || 'pointer');
@@ -17709,9 +17805,20 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
         this.createIndicators();
         this.setLoadingState(this._source.loading);
     }
-    SourceGroup.prototype._setHovered = function (newValue) {
-        this._hovered = newValue;
-        this._group.draw();
+    SourceGroup.prototype._onHoverStart = function () {
+        this._hovered = true;
+        this._view.setHoveredElement(this);
+        if (!this._source.loading) {
+            this._showButtons();
+        }
+        this._batchDraw();
+    };
+    SourceGroup.prototype._onHoverEnd = function () {
+        this._hovered = false;
+        this._manualHover = false;
+        this._view.setHoveredElement(null);
+        this._hideButtons();
+        this._batchDraw();
     };
     SourceGroup.prototype._onDragStart = function (element) {
         this._isDragged = true;
@@ -17719,8 +17826,25 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
     };
     SourceGroup.prototype._onDragEnd = function (element) {
         this._isDragged = false;
+        this._manageManualHoverStop();
         this._layer.onSourcesGroupDragEnd(element);
     };
+    SourceGroup.prototype._manageManualHoverStop = function () {
+        if (!this._manualHover) {
+            return;
+        }
+        var pointer = this._view.getPointerPosition();
+        if (pointer) {
+            var absPos = this._group.absolutePosition();
+            var inside = pointer.x >= absPos.x && pointer.x <= absPos.x + this._width && pointer.y >= absPos.y && pointer.y <= absPos.y + this._height;
+            if (!inside) {
+                this.stopHover();
+            }
+        }
+    };
+    SourceGroup.prototype.isHovered = function () {
+        return this._hovered;
+    };
     SourceGroup.prototype.isActive = function () {
         return this._isDragged;
     };
@@ -17743,7 +17867,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 {
@@ -18108,6 +18232,13 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
     SourceGroup.prototype.getSource = function () {
         return this._source;
     };
+    SourceGroup.prototype.startHover = function () {
+        this._manualHover = true;
+        this._group.fire('mouseenter', { evt: new MouseEvent('mouseenter') }, true);
+    };
+    SourceGroup.prototype.stopHover = function () {
+        this._group.fire('mouseleave', { evt: new MouseEvent('mouseleave') }, true);
+    };
     SourceGroup.prototype.startDrag = function () {
         return this._group.startDrag();
     };
@@ -18208,64 +18339,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);
+            this._createAudioPreview(preview, 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;
-            }
-        }
-        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) {
@@ -18332,31 +18439,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,
@@ -18373,22 +18530,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);
     };
@@ -18688,6 +18838,13 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
                 this._buttonsAnimation.destroy();
                 this._buttonsAnimation = null;
             }
+            if (!this._buttonsGroup.getLayer()) {
+                if (!this._buttonsGroup.getLayer()) {
+                    this._buttonsGroup.visible(true);
+                    this._buttonsGroup.opacity(1);
+                    return;
+                }
+            }
             var self = this;
             this._buttonsGroup.visible(true);
             this._buttonsAnimation = new Konva.Tween({
@@ -18709,6 +18866,11 @@ module.exports = function (WaveformBuilder, WaveformShape, Loader, Utils, Konva)
                 this._buttonsAnimation.destroy();
                 this._buttonsAnimation = null;
             }
+            if (!this._buttonsGroup.getLayer()) {
+                this._buttonsGroup.visible(false);
+                this._buttonsGroup.opacity(0);
+                return;
+            }
             var self = this;
             this._buttonsAnimation = new Konva.Tween({
                 node: this._buttonsGroup,
@@ -18819,7 +18981,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);
@@ -18881,7 +19043,14 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         this._peaks.on('data.retrieved', this._onDataRetrieved.bind(this));
         this._peaks.on('handler.segments.show', this._onSegmentsShow.bind(this));
         this._peaks.on('model.source.setIndicators', this.setIndicators.bind(this));
+        this._peaks.on('handler.view.mouseup', this._stopDrag.bind(this));
     }
+    SourcesLayer.prototype._stopDrag = function () {
+        const draggedSourceGroup = this._sourcesGroup[this._draggedElementId];
+        if (draggedSourceGroup) {
+            draggedSourceGroup.stopDrag();
+        }
+    };
     SourcesLayer.prototype.fitToView = function () {
         this._lineGroups.fitToView();
     };
@@ -18912,18 +19081,28 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         this.updateSources(this._view.pixelsToTime(frameOffset), this._view.pixelsToTime(frameOffset + width));
     };
     SourcesLayer.prototype._onSourceUpdate = function (source) {
+        const sourceGroup = this._sourcesGroup[source.id];
+        const frameOffset = this._view.getFrameOffset();
+        const width = this._view.getWidth();
+        const frameStartTime = this._view.pixelsToTime(frameOffset);
+        const frameEndTime = this._view.pixelsToTime(frameOffset + width);
         var redraw = false;
-        var sourceGroup = this._sourcesGroup[source.id];
-        var frameOffset = this._view.getFrameOffset();
-        var width = this._view.getWidth();
-        var frameStartTime = this._view.pixelsToTime(frameOffset);
-        var frameEndTime = this._view.pixelsToTime(frameOffset + width);
+        var isSourceGroupHovered = false;
+        var isSourceGroupActive = false;
         if (sourceGroup) {
+            isSourceGroupHovered = sourceGroup.isHovered();
+            isSourceGroupActive = sourceGroup.isActive();
             this._destroySourceGroup(source);
             redraw = true;
         }
-        if (source.isVisible(frameStartTime, frameEndTime)) {
-            this._addSourceGroup(source);
+        if (source.isVisible(frameStartTime, frameEndTime) || isSourceGroupActive) {
+            const newSourceGroup = this._addSourceGroup(source);
+            if (isSourceGroupHovered) {
+                newSourceGroup.startHover();
+            }
+            if (isSourceGroupActive) {
+                newSourceGroup.startDrag();
+            }
             redraw = true;
         }
         if (redraw) {
@@ -18937,7 +19116,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;
@@ -18957,21 +19136,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) {
@@ -19000,7 +19179,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);
@@ -19018,7 +19197,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) {
@@ -19028,19 +19207,19 @@ 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) {
         this._initialTimeOffset = this._view.getTimeOffset();
         this._mouseDownX = this._view.getPointerPosition().x;
-        const draggedElementId = element.currentTarget.attrs.sourceId;
+        this._draggedElementId = element.currentTarget.attrs.sourceId;
         var selectedElements = this._view.getSelectedElements();
-        const shouldDragSelectedElements = Object.keys(selectedElements).includes(draggedElementId);
+        const shouldDragSelectedElements = Object.keys(selectedElements).includes(this._draggedElementId);
         if (shouldDragSelectedElements) {
             this._draggedElements = Object.values(selectedElements).sort((a, b) => a.startTime - b.startTime);
         } else {
-            this._draggedElements = [this._sourcesGroup[draggedElementId].getSource()];
+            this._draggedElements = [this._sourcesGroup[this._draggedElementId].getSource()];
             this._view.deselectAll();
         }
         this._draggedElementsData = this._draggedElements.reduce(function (bounds, source) {
@@ -19064,7 +19243,8 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
             }
             return source;
         }.bind(this));
-        this._view.drawSourcesLayer();
+        this._draggedElementId = null;
+        this._view.batchDrawSourcesLayer();
         this._view.updateTimelineLength();
         this._peaks.emit('sources.updated', updatedSources);
     };
@@ -19087,7 +19267,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) {
@@ -19212,8 +19392,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);
@@ -19255,7 +19435,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();
@@ -19272,6 +19452,7 @@ module.exports = function (SourceGroup, LineGroups, DataRetriever, Invoker, Util
         this._peaks.off('data.retrieved', this._onDataRetrieved);
         this._peaks.off('handler.segments.show', this._onSegmentsShow);
         this._peaks.off('model.source.setIndicators', this.setIndicators);
+        this._peaks.off('handler.view.mouseup', this._stopDrag);
     };
     SourcesLayer.prototype.getHeight = function () {
         return this._layer.getHeight();
@@ -19318,6 +19499,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;
     }
@@ -19382,12 +19569,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'));
         });
@@ -19411,16 +19604,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;
@@ -21661,7 +21856,6 @@ module.exports = function (Source, Utils) {
         this._peaks = peaks;
         this._sources = [];
         this._sourcesById = {};
-        this._sourcesByLineId = {};
         this._colorIndex = 0;
     }
     SourceHandler.prototype.cutSource = function (sourceToCut, cuttingTime) {
@@ -21741,10 +21935,6 @@ module.exports = function (Source, Utils) {
     SourceHandler.prototype._addSource = function (source) {
         this._sources.push(source);
         this._sourcesById[source.id] = source;
-        if (Utils.isNullOrUndefined(this._sourcesByLineId[source.lineId])) {
-            this._sourcesByLineId[source.lineId] = {};
-        }
-        this._sourcesByLineId[source.lineId][source.id] = source;
     };
     SourceHandler.prototype._createSource = function (options) {
         if (!Utils.isObject(options)) {
@@ -21762,9 +21952,6 @@ module.exports = function (Source, Utils) {
     SourceHandler.prototype.getSources = function () {
         return this._sources;
     };
-    SourceHandler.prototype.getSourcesByLineId = function (lineId) {
-        return Utils.isNullOrUndefined(lineId) ? this._sourcesByLineId : this._sourcesByLineId[lineId];
-    };
     SourceHandler.prototype.getSourcesSerialized = function () {
         return this._sources.map(function (source) {
             return source.toSerializable();
@@ -21821,7 +22008,6 @@ module.exports = function (Source, Utils) {
             var index = indexes[i] - destroyed.length;
             var itemDestroyed = this._sources.splice(index, 1)[0];
             delete this._sourcesById[itemDestroyed.id];
-            delete this._sourcesByLineId[itemDestroyed.lineId][itemDestroyed.id];
             destroyed.push(itemDestroyed);
         }
         return destroyed;
@@ -22231,6 +22417,7 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
     }
     View.prototype._mouseUp = function () {
         this.clearScrollingInterval();
+        this._peaks.emit('handler.view.mouseup');
     };
     View.prototype.setClickable = function (clickable) {
         this._isClickable = clickable;
@@ -22286,11 +22473,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();
@@ -22319,8 +22506,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();
@@ -22545,7 +22732,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);
@@ -22599,7 +22786,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 () {