@checksub_team/peaks_timeline 1.16.1 → 2.0.0-alpha.10

package/src/{source-group.js → components/source-group.js}

@@ -1,1640 +1,1663 @@
-/**
- * @file
- *
- * Defines the {@link SourceGroup} class.
- *
- * @module source-group
- */
-
-define([
-  './waveform-builder',
-  './waveform-shape',
-  './utils',
-  './loader',
-  'konva'
-  ], function(
-    WaveformBuilder,
-    WaveformShape,
-    Utils,
-    Loader,
-    Konva) {
-  'use strict';
-
-  var SPACING_BETWEEN_PREVIEW_AND_BORDER_RATIO = 0.15;
-  var SPACING_BETWEEN_PREVIEWS = 1.5;
-  var CORNER_RADIUS = 8;
-  var INDICATOR_RADIUS = 4; // px
-
-  /**
-   * Creates a source group for the given source.
-   *
-   * @class
-   * @alias SourceGroup
-   *
-   * @param {Source} source
-   * @param {Peaks} peaks
-   * @param {SourcesLayer} layer
-   * @param {WaveformOverview|WaveformZoomView} view
-   */
-
-  function SourceGroup(source, peaks, layer, view) {
-    this._source        = source;
-    this._peaks         = peaks;
-    this._layer         = layer;
-    this._view          = view;
-    this._indicators    = {};
-
-    var self = this;
-
-    this._x = this._view.timeToPixels(source.startTime);
-    this._roundedX = Math.round(this._x);
-    this._width = this._view.timeToPixels(source.endTime - source.startTime);
-    this._roundedWidth = Math.round(this._width);
-    this._unwrappedHeight = source.binaryHeight && source.previewHeight ?
-                            source.binaryHeight + source.previewHeight :
-                            this._peaks.options.lineHeight;
-    this._wrappedHeight = this._peaks.options.wrappedLineHeight;
-    this._borderWidth = this._source.borderWidth || 0;
-    this._height = this._unwrappedHeight;
-    this._currentTimeToPixelsScaleUsed = this._view.getTimeToPixelsScale();
-    this._selected = this._source.selected;
-    this._isDragged = false;
-
-    this._previewList = [];
-
-    this._markersGroup = this._createMarkers();
-
-    this._group = new Konva.Group({
-      x: this._x,
-      sourceId: this._source.id,
-      draggable: this._source.draggable,
-      dragBoundFunc: function() {
-        return self._layer.onSourcesGroupDrag(this);
-      },
-      clipFunc: function(ctx) {
-        self.drawSourceShape(ctx, null);
-      }
-    });
-
-    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('mouseover', function() {
-      if (self._source.draggable) {
-        self._view.setCursor(self._cursor || 'pointer');
-      }
-      if (self._view.getCurrentMode() === 'cut') {
-        self.toggleDragging(false);
-        self.toggleResizing(false);
-      }
-    });
-
-    this._group.on('mouseout', function() {
-      self._view.setCursor('default');
-      if (self._view.getCurrentMode() === 'cut') {
-        self.toggleDragging(true);
-        self.toggleResizing(true);
-      }
-    });
-
-    this._group.add(new Konva.Group());
-
-    if (this._borderWidth) {
-      this._border = new Konva.Shape({
-        fill: this._source.borderColor,
-        sceneFunc: function(ctx, shape) {
-          self.drawSourceShape(ctx, shape);
-        }
-      });
-      this._group.getChildren()[0].add(this._border);
-    }
-    this._addHandles();
-
-    this.setWrapping(source.wrapped);
-
-    this.setSelected();
-
-    this._indicatorsGroup = new Konva.Group();
-    this.addToContent(this._indicatorsGroup);
-
-    this.createIndicators();
-
-    this.setLoadingState(this._source.loading);
-  }
-
-  SourceGroup.prototype._setHovered = function(newValue) {
-    this._hovered = newValue;
-    this._group.draw();
-  };
-
-  SourceGroup.prototype._onDragStart = function(element) {
-    this._isDragged = true;
-    this._layer.onSourcesGroupDragStart(element);
-  };
-
-  SourceGroup.prototype._onDragEnd = function(element) {
-    this._isDragged = false;
-    this._layer.onSourcesGroupDragEnd(element);
-  };
-
-  SourceGroup.prototype.isActive = function() {
-    return this._isDragged;
-  };
-
-  SourceGroup.prototype.addToContent = function(newChild) {
-    if (this._source.wrapped) {
-      this._wrap.add(newChild);
-    }
-    else {
-      this._unwrap.add(newChild);
-    }
-  };
-
-  SourceGroup.prototype.prepareDragEnd = function() {
-    var handleWidth = Math.min(this._peaks.options.sourceHandleWidth, this._width / 2);
-
-    this._leftHandle.width(handleWidth);
-    this._rightHandle.width(handleWidth);
-    this._rightHandle.x(this._width - handleWidth);
-  };
-
-  SourceGroup.prototype._onSourceGroupHandleDrag = function(draggedElement, dragPos, leftHandle) {
-    const diff = this._view.pixelsToTime(dragPos.x - this._mouseDownX);
-    const timeOffsetDiff = this._view.getTimeOffset() - this._initialTimeOffset;
-
-    const { start, end } = this._initialTimes;
-
-    this._view.updateWithAutoScroll(
-      function() {
-        if (this._layer.updateSource(
-          this._source,
-          leftHandle ? start + diff + timeOffsetDiff : null,
-          leftHandle ? null : end + diff + timeOffsetDiff
-        )) {
-          this._layer.draw();
-        }
-      }.bind(this)
-    );
-
-    this._view.setTimelineLength(
-      this._view.timeToPixels(this._source.endTime) + this._view.getWidth()
-    );
-
-    return {
-      x: draggedElement.absolutePosition().x,
-      y: draggedElement.absolutePosition().y
-    };
-  };
-
-  SourceGroup.prototype.update = function() {
-    const startPixel = this._view.timeToPixels(this._source.startTime);
-    const endPixel   = this._view.timeToPixels(this._source.endTime);
-    const frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
-    const newTimeToPixelsScale = this._view.getTimeToPixelsScale();
-
-    this._group.x(startPixel - frameOffset);
-
-    this._x = startPixel;
-    this._roundedX = Math.round(this._x);
-
-    const newWidth = endPixel - startPixel;
-
-    if (newWidth !== this._width) {
-      this._width = newWidth;
-      this._roundedWidth = Math.round(this._width);
-
-      // the zoom was changed
-      if (newTimeToPixelsScale !== this._currentTimeToPixelsScaleUsed) {
-        this._currentTimeToPixelsScaleUsed = newTimeToPixelsScale;
-
-        this._updateMarkers();
-
-        this._rightHandle.x(this._width - this._rightHandle.width());
-      }
-      else {
-        // the zoom was not changed, but the source was resized
-        const newTitle = Utils.removeLineBreaks(this._source.getVisibleTitle());
-
-        if (this._wrappedTitle && this._wrappedTitle.text() !== newTitle) {
-          this._wrap.add(this._createTitle(true));
-        }
-        if (this._unwrappedTitle && this._unwrappedTitle.text() !== newTitle) {
-          this._unwrap.add(this._createTitle(false));
-        }
-      }
-
-      this._updateVolumeSlider();
-      this._updateButtons();
-      this._updateLoadingOverlay();
-
-      // update unwrap
-      this.updatePreviews();
-    }
-  };
-
-  SourceGroup.prototype.setWrapping = function(wrap, forceCreate, notify) {
-    if (wrap) {
-      this._removeUnwrap();
-      this._height = this._wrappedHeight;
-      this._addWrap(forceCreate);
-    }
-    else {
-      this._removeWrap();
-      this._height = this._unwrappedHeight;
-      this._addUnwrap(forceCreate);
-    }
-
-    this.setHandlesWrapping(wrap);
-
-    if (notify) {
-      this._peaks.emit('source.wrappingChanged', this);
-    }
-  };
-
-  SourceGroup.prototype.setHandlesWrapping = function(wrap) {
-    if (wrap) {
-      this._leftHandle.height(this._wrappedHeight);
-      this._rightHandle.height(this._wrappedHeight);
-    }
-    else {
-      this._leftHandle.height(this._unwrappedHeight);
-      this._rightHandle.height(this._unwrappedHeight);
-    }
-  };
-
-  SourceGroup.prototype._onHandleDragStart = function() {
-    this._initialTimeOffset = this._view.getTimeOffset();
-    this._mouseDownX = this._view.getPointerPosition().x;
-    this._initialTimes = {
-      start: this._source.startTime,
-      end: this._source.endTime
-    };
-
-    this._hideButtons();
-  };
-
-  SourceGroup.prototype._onHandleDragEnd = function() {
-    this._showButtons();
-  };
-
-  SourceGroup.prototype._addHandles = function(forceCreate) {
-    var self = this;
-    var handleWidth = Math.min(this._peaks.options.sourceHandleWidth, this._width / 2);
-
-    if (!this._leftHandle || forceCreate) {
-      this._leftHandle = new Konva.Rect({
-        x: 0,
-        width: handleWidth,
-        height: this._unwrappedHeight,
-        visible: true,
-        draggable: this._source.resizable,
-        dragBoundFunc: function(pos) {
-          return self._onSourceGroupHandleDrag(this, pos, true);
-        }
-      });
-
-      this._leftHandle.on('dragstart', this._onHandleDragStart.bind(this));
-
-      this._leftHandle.on('dragend', this._onHandleDragEnd.bind(this));
-
-      if (this._source.resizable) {
-        this._leftHandle.on('mouseover', function() {
-          self._cursor = 'ew-resize';
-        });
-
-        this._leftHandle.on('mouseout', function() {
-          self._cursor = null;
-        });
-      }
-    }
-
-    if (!this._rightHandle || forceCreate) {
-      this._rightHandle = new Konva.Rect({
-        x: this._width - handleWidth,
-        width: handleWidth,
-        height: this._unwrappedHeight,
-        visible: true,
-        draggable: this._source.resizable,
-        dragBoundFunc: function(pos) {
-          return self._onSourceGroupHandleDrag(this, pos, false);
-        }
-      });
-
-      this._rightHandle.on('dragstart', this._onHandleDragStart.bind(this));
-
-      this._rightHandle.on('dragend', this._onHandleDragEnd.bind(this));
-
-      if (this._source.resizable) {
-        this._rightHandle.on('mouseover', function() {
-          self._cursor = 'ew-resize';
-        });
-
-        this._rightHandle.on('mouseout', function() {
-          self._cursor = null;
-        });
-      }
-    }
-
-    this._group.add(this._leftHandle);
-    this._group.add(this._rightHandle);
-  };
-
-  SourceGroup.prototype.toggleDragging = function(bool) {
-    var background;
-
-    if (this._wrap) {
-      background = this._wrap.getChildren(function(node) {
-        return node.getClassName() === 'Shape';
-      })[0];
-
-      if (background) {
-        background.draggable(bool);
-      }
-    }
-    if (this._unwrap) {
-      background = this._unwrap.getChildren(function(node) {
-        return node.getClassName() === 'Shape';
-      })[0];
-
-      if (background) {
-        background.draggable(bool);
-      }
-    }
-  };
-
-  SourceGroup.prototype.toggleResizing = function(bool) {
-    if (this._leftHandle) {
-      this._leftHandle.draggable(bool);
-    }
-    if (this._rightHandle) {
-      this._rightHandle.draggable(bool);
-    }
-  };
-
-  SourceGroup.prototype.drawSourceShape = function(ctx, shape, addBorderWidth, fill) {
-    var offset = addBorderWidth ? this._borderWidth : 0;
-    var radius = this._source.borderRadius !== undefined && this._source.borderRadius !== null ?
-    this._source.borderRadius :
-    Math.max(
-      1,
-      Math.min(
-        this._roundedWidth / 2,
-        Math.min(
-          CORNER_RADIUS,
-          this._height / 2
-        )
-      )
-    );
-    var x = Math.max(
-      0,
-      this._view.getFrameOffset() - this._roundedX - radius
-    );
-    var width = Math.min(
-      this._roundedWidth - x,
-      this._view.getWidth() + radius - Math.max(
-        0,
-        this._roundedX - this._view.getFrameOffset()
-      )
-    );
-    var xWidth = x + width;
-
-    ctx.beginPath();
-    ctx.moveTo(x + radius, offset);
-    ctx.lineTo(xWidth - radius, offset);
-    ctx.quadraticCurveTo(xWidth - offset, offset, xWidth - offset, radius);
-    ctx.lineTo(xWidth - offset, this._height - radius);
-    ctx.quadraticCurveTo(
-      xWidth - offset,
-      this._height - offset,
-      xWidth - radius,
-      this._height - offset
-    );
-    ctx.lineTo(x + radius, this._height - offset);
-    ctx.quadraticCurveTo(x + offset, this._height - offset, x + offset, this._height - radius);
-    ctx.lineTo(x + offset, radius);
-    ctx.quadraticCurveTo(x + offset, offset, x + radius, offset);
-    ctx.closePath();
-
-    if (fill) {
-      var backgroundColor;
-
-      if (this._selected) {
-        backgroundColor = this._source.selectedBackgroundColor;
-      }
-      else if (this._hovered) {
-        backgroundColor = this._source.hoverBackgroundColor;
-      }
-      else {
-        backgroundColor = this._source.backgroundColor;
-      }
-
-      if (this._source.shouldShowWarning()) {
-        var gradient = ctx.createLinearGradient(0, 0, this._roundedWidth, 0);
-
-        if (this._source.mediaEndTime < this._source.duration) {
-          var rightStopPosition = Math.max(1 - (this._source.warningWidth / this._roundedWidth), 0.5);
-
-          gradient.addColorStop(rightStopPosition, backgroundColor);
-          gradient.addColorStop(1, this._source.warningColor);
-        }
-
-        if (this._source.mediaStartTime > 0) {
-          var leftStopPosition = Math.min(this._source.warningWidth / this._roundedWidth, 0.5);
-
-          gradient.addColorStop(0, this._source.warningColor);
-          gradient.addColorStop(leftStopPosition, backgroundColor);
-        }
-
-        ctx.fillStyle = gradient;
-        ctx.fill();
-      }
-      else {
-        ctx.fillStyle = backgroundColor;
-        ctx.fill();
-      }
-    }
-
-    if (shape) {
-      ctx.fillStrokeShape(shape);
-    }
-  };
-
-  SourceGroup.prototype._addUnwrap = function(forceCreate) {
-    if (!this._unwrap || forceCreate) {
-      this._unwrap = this._createUnwrap();
-    }
-
-    this._group.getChildren()[0].add(this._unwrap);
-  };
-
-  SourceGroup.prototype._createUnwrap = function() {
-    var self = this;
-
-    var unwrap = new Konva.Group({
-      width: this._width,
-      height: this._unwrappedHeight,
-      clipFunc: function(ctx) {
-        self.drawSourceShape(ctx, null, true);
-      }
-    });
-
-    var background = new Konva.Group();
-
-    background.add(new Konva.Shape({
-      sceneFunc: function(ctx, shape) {
-        self.drawSourceShape(ctx, shape, true, true);
-      }
-    }));
-
-    unwrap.add(background);
-    unwrap.add(this._markersGroup);
-    if (this._source.volumeRange && this._source.volume !== undefined) {
-      unwrap.add(this._getVolumeSlider());
-    }
-    if (this._source.buttons.length > 0) {
-      unwrap.add(this._getButtons());
-    }
-    unwrap.add(this._createTitle(false));
-
-    return unwrap;
-  };
-
-  SourceGroup.prototype._addToUnwrap = function(element, inForeground) {
-    if (inForeground) {
-      this._unwrap.add(element);
-    }
-    else {
-      this._unwrap.getChildren()[0].add(element);
-    }
-  };
-
-  SourceGroup.prototype._removeUnwrap = function() {
-    if (this._unwrap) {
-      this._unwrap.remove();
-    }
-  };
-
-  SourceGroup.prototype._addWrap = function(forceCreate) {
-    if (!this._wrap || forceCreate) {
-      this._wrap = this._createWrap();
-    }
-
-    this._group.getChildren()[0].add(this._wrap);
-  };
-
-  SourceGroup.prototype._createWrap = function() {
-    var self = this;
-
-    var wrap = new Konva.Group({
-      width: this._width,
-      height: this._wrappedHeight,
-      clipFunc: function(ctx) {
-        self.drawSourceShape(ctx, null, true);
-      }
-    });
-
-    var background = new Konva.Group();
-
-    background.add(new Konva.Shape({
-      sceneFunc: function(ctx, shape) {
-        self.drawSourceShape(ctx, shape, true, true);
-      }
-    }));
-
-    wrap.add(background);
-    wrap.add(this._markersGroup);
-    if (this._source.volumeRange && this._source.volume !== undefined) {
-      wrap.add(this._getVolumeSlider());
-    }
-    if (this._source.buttons.length > 0) {
-      wrap.add(this._getButtons());
-    }
-    wrap.add(this._createTitle(true));
-
-    return wrap;
-  };
-
-  SourceGroup.prototype._addToWrap = function(element, inForeground) {
-    if (inForeground) {
-      this._wrap.add(element);
-    }
-    else {
-      this._wrap.getChildren()[0].add(element);
-    }
-  };
-
-  SourceGroup.prototype._removeWrap = function() {
-    if (this._wrap) {
-      this._wrap.remove();
-    }
-  };
-
-  SourceGroup.prototype._createTitle = function(isWrap) {
-    var self = this;
-    var defaultWidth;
-    var y = (this._source.textPosition === 'bottom') ?
-      Math.max(
-        (isWrap ? this._wrappedHeight : this._unwrappedHeight)
-          - this._source.textFontSize - this._peaks.options.sourceTextYOffset,
-        this._peaks.options.sourceTextYOffset
-      ) : this._peaks.options.sourceTextYOffset;
-    var defaultXOffset = this._peaks.options.sourceTextXOffset;
-    var maxXOffset = this._width - 2 * defaultXOffset;
-
-    if (isWrap) {
-      if (this._wrappedTitle) {
-        this._wrappedTitle.destroy();
-        this._wrappedTitle = null;
-      }
-    }
-    else {
-      if (this._unwrappedTitle) {
-        this._unwrappedTitle.destroy();
-        this._unwrappedTitle = null;
-      }
-    }
-
-    var title = new Konva.Text({
-      x: defaultXOffset,
-      y: y,
-      text: Utils.removeLineBreaks(this._source.getVisibleTitle()),
-      textAlign: 'left',
-      verticalAlign: 'middle',
-      fontSize: this._source.textFontSize,
-      fontFamily: this._source.textFont,
-      fill: this._source.textColor,
-      wrap: 'none',
-      ellipsis: true,
-      listening: false,
-      sceneFunc: function(context, shape) {
-        var absX = this.absolutePosition().x;
-
-        if (self._source.textAutoScroll && absX < defaultXOffset) {
-          this.offsetX(Math.max(Math.min(0, absX - defaultXOffset), -(maxXOffset - shape.width())));
-        }
-        defaultWidth = defaultWidth ? defaultWidth : shape.width();
-        shape.width(Math.min(self._width - 10, defaultWidth));
-        if (self._source.textBackgroundColor) {
-          context.fillStyle = self._source.textBackgroundColor;
-          context.fillRect(-5, -5, shape.width() + 10, shape.height() ? shape.height() + 10 : 0);
-        }
-        shape._sceneFunc(context);
-      }
-    });
-
-    if (isWrap) {
-      this._wrappedTitle = title;
-    }
-    else {
-      this._unwrappedTitle = title;
-    }
-
-    return title;
-  };
-
-  SourceGroup.prototype.getWidth = function() {
-    return this._width;
-  };
-
-  SourceGroup.prototype.getX = function() {
-    return this._x;
-  };
-
-  SourceGroup.prototype.getY = function() {
-    return this._group.absolutePosition().y;
-  };
-
-  SourceGroup.prototype.x = function(value) {
-    if (value) {
-      return this._group.x(value);
-    }
-    else {
-      return this._group.x();
-    }
-  };
-
-  SourceGroup.prototype.y = function(value) {
-    if (value) {
-      return this._group.y(value);
-    }
-    else {
-      return this._group.y();
-    }
-  };
-
-  SourceGroup.prototype.getSource = function() {
-    return this._source;
-  };
-
-  SourceGroup.prototype.startDrag = function() {
-    return this._group.startDrag();
-  };
-
-  SourceGroup.prototype.stopDrag = function() {
-    return this._group.stopDrag();
-  };
-
-  SourceGroup.prototype.addToGroup = function(group) {
-    group.add(this._group);
-  };
-
-  SourceGroup.prototype.isDescendantOf = function(group) {
-    group.isAncestorOf(this._group);
-  };
-
-  SourceGroup.prototype.moveTo = function(group) {
-    this._group.moveTo(group);
-  };
-
-  SourceGroup.prototype.getParent = function() {
-    return this._group.getParent();
-  };
-
-  SourceGroup.prototype.remove = function() {
-    this._group.remove();
-  };
-
-  SourceGroup.prototype.addImagePreview = function(content, url, redraw) {
-    var preview = {
-      type: 'image',
-      group: new Konva.Group({
-        height: this._unwrappedHeight,
-        listening: false
-      })
-    };
-
-    var imageData = this._layer.getLoadedData(url);
-
-    if (!imageData) {
-      imageData = new Image();
-
-      var self = this;
-
-      imageData.onload = function() {
-        self._layer.setLoadedData(url, this);
-        preview.loaded = true;
-        self._createImagePreview(preview, imageData, redraw);
-      };
-
-      imageData.src = content;
-    }
-    else {
-      preview.loaded = true;
-      this._createImagePreview(preview, imageData, redraw);
-    }
-  };
-
-  SourceGroup.prototype.addVideoPreview = function(content, url, redraw) {
-    var preview = {
-      type: 'video',
-      group: new Konva.Group({
-        y: this._source.binaryUrl && this._source.previewUrl ? this._source.binaryHeight : 0,
-        height: this._source.binaryUrl && this._source.previewUrl ?
-                  this._source.previewHeight : this._unwrappedHeight,
-        listening: false
-      })
-    };
-
-    var imageData = this._layer.getLoadedData(url);
-
-    if (!imageData) {
-      var video = document.createElement('video');
-      var self = this;
-
-      video.onloadeddata = function() {
-        this.currentTime = this.duration / 2;
-
-        var canvas = document.createElement('canvas');
-
-        canvas.width = this.videoWidth;
-        canvas.height = this.videoHeight;
-        canvas.getContext('2d').drawImage(this, 0, 0, canvas.width, canvas.height);
-
-        imageData = new Image();
-
-        imageData.onload = function() {
-          self._layer.setLoadedData(url, this);
-          preview.loaded = true;
-          self._createImagePreview(preview, imageData, redraw);
-        };
-
-        imageData.src = canvas.toDataURL();
-      };
-
-      video.src = content;
-    }
-    else {
-      preview.loaded = true;
-      this._createImagePreview(preview, imageData, redraw);
-    }
-  };
-
-  SourceGroup.prototype.addAudioPreview = function(type, content, url, redraw) {
-    var preview = {
-      type: 'audio',
-      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);
-
-    if (!audioData) {
-      var waveformBuilder = new WaveformBuilder(this._peaks);
-      var options = Object.assign({},this._peaks.options);
-
-      if (type === 'audio') {
-        options.objectUrl = content;
-      }
-      else {
-        options.dataUri = content;
-      }
-
-      waveformBuilder.init(options, function(err, originalWaveformData) {
-        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);
-        }
-
-        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);
-      });
-    }
-    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;
-      }
-    }
-
-    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.getAudioPreview = function() {
-    return this._previewList.filter(function(preview) {
-      return preview.type === 'audio';
-    });
-  };
-
-  SourceGroup.prototype.setSelected = function() {
-    this._selected = this._source.selected;
-    if (this._border) {
-      if (this._selected) {
-        this._border.fill(this._source.selectedBorderColor);
-        this._borderWidth = this._peaks.options.sourceSelectedBorderWidth;
-      }
-      else {
-        this._border.fill(this._source.borderColor);
-        this._borderWidth = this._source.borderWidth;
-      }
-    }
-    else {
-      if (this._unwrap) {
-        // update unwrap
-        var unwrap_background = this._unwrap.getChildren(function(node) {
-          return node.getClassName() === 'Shape';
-        })[0];
-
-        if (unwrap_background) {
-          if (this._selected) {
-            unwrap_background.stroke(this._source.selectedBorderColor);
-            unwrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
-          }
-          else {
-            unwrap_background.strokeWidth(0);
-          }
-        }
-      }
-
-      if (this._wrap) {
-        // update wrap
-        var wrap_background = this._wrap.getChildren(function(node) {
-          return node.getClassName() === 'Shape';
-        })[0];
-
-        if (wrap_background) {
-          if (this._selected) {
-            wrap_background.stroke(this._source.selectedBorderColor);
-            wrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
-          }
-          else {
-            wrap_background.strokeWidth(0);
-          }
-        }
-      }
-    }
-  };
-
-  SourceGroup.prototype.updatePreviews = function() {
-    var self = this;
-
-    this._previewList.forEach(function(preview) {
-      if (preview.loaded) {
-        switch (preview.type) {
-          case 'video':
-          case 'image':
-            // image or video preview
-            if (self._unwrappedHeight !== preview.imageData.referenceHeight) {
-              preview.imageData.referenceHeight = preview.group.height();
-              preview.imageData.borderSpacing   = SPACING_BETWEEN_PREVIEW_AND_BORDER_RATIO
-                                                  * preview.imageData.referenceHeight;
-              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 interImageSpacing = preview.imageData.width + preview.imageData.imageSpacing;
-            var imageNumber;
-
-            if (self._width > preview.imageData.borderSpacing) {
-              imageNumber = Math.trunc(
-                (self._width - preview.imageData.borderSpacing)
-                  / interImageSpacing
-              ) + 1;
-            }
-            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);
-            }
-        }
-      }
-    });
-  };
-
-  SourceGroup.prototype._createImagePreview = function(preview, image, redraw) {
-    preview.imageData = {
-      image: image,
-      referenceHeight: null,
-      dimRatio: null,
-      borderSpacing: null,
-      height: null,
-      width: null,
-      imageSpacing: null
-    };
-
-    preview.imageData.referenceHeight = preview.group.height();
-    preview.imageData.dimRatio = image.width / image.height;
-    preview.imageData.borderSpacing = SPACING_BETWEEN_PREVIEW_AND_BORDER_RATIO
-                                      * preview.imageData.referenceHeight;
-    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);
-
-    if (redraw) {
-      this._group.draw();
-    }
-
-    this._previewList.push(preview);
-  };
-
-  SourceGroup.prototype.setLoadingState = function(isLoading) {
-    if (isLoading && !this._loadingOverlay) {
-      this._createLoadingOverlay();
-    }
-    else if (!isLoading && this._loadingOverlay) {
-      this._removeLoadingOverlay();
-    }
-
-    if (this._loadingOverlay) {
-      this._loadingOverlay.visible(isLoading);
-    }
-  };
-
-  SourceGroup.prototype._createLoadingOverlay = function() {
-    this._loadingOverlay = new Konva.Group({
-      x: 0,
-      y: 0,
-      width: this._width,
-      height: this._height,
-      listening: false
-    });
-
-    // Semi-transparent background
-    var loadingBackground = new Konva.Rect({
-      x: 0,
-      y: 0,
-      width: this._width,
-      height: this._height,
-      fill: 'rgba(0, 0, 0, 0.7)'
-    });
-
-    this._loader = new Loader();
-    this._loader.x(this._width / 2);
-    this._loader.y(this._height / 2);
-
-    // Add overlay to the main group
-    this._loadingOverlay.add(loadingBackground);
-    this._loader.addTo(this._loadingOverlay);
-    this.addToContent(this._loadingOverlay);
-  };
-
-  SourceGroup.prototype._removeLoadingOverlay = function() {
-    if (this._loadingOverlay) {
-      if (this._loader) {
-        this._loader.destroy();
-        this._loader = null;
-      }
-      this._loadingOverlay.destroy();
-      this._loadingOverlay = null;
-    }
-  };
-
-  SourceGroup.prototype._updateLoadingOverlay = function() {
-    if (this._loadingOverlay) {
-      var self = this;
-
-      this._loadingOverlay.width(self._width);
-      this._loadingOverlay.height(self._height);
-
-      this._loadingOverlay.getChildren().forEach(function(child) {
-        if (child instanceof Konva.Rect) {
-          child.width(self._width);
-          child.height(self._height);
-        }
-        else {
-          child.x(self._width / 2);
-        }
-      });
-    }
-  };
-
-  SourceGroup.prototype.isWrapped = function() {
-    return this._source.wrapped;
-  };
-
-  SourceGroup.prototype.getCurrentHeight = function() {
-    return this._height;
-  };
-
-  SourceGroup.prototype.setVisible = function(boolean) {
-    this._group.visible(boolean);
-  };
-
-  SourceGroup.prototype.setListening = function(boolean) {
-    this._group.listening(boolean);
-  };
-
-  SourceGroup.prototype.isVisible = function() {
-    return this._group.visible();
-  };
-
-  SourceGroup.prototype.isCuttable = function() {
-    return this._source.cuttable;
-  };
-
-  SourceGroup.prototype.isDeletable = function() {
-    return this._source.deletable;
-  };
-
-  SourceGroup.prototype.getLine = function() {
-    return this._source.position;
-  };
-
-  SourceGroup.prototype.getAbsoluteBoundingBox = function() {
-    var stageContainer = this._group.getStage().container();
-    var containerRect = stageContainer.getBoundingClientRect();
-
-    var elementPos = this._group.getAbsolutePosition();
-
-    return {
-      left: containerRect.left + elementPos.x,
-      top: containerRect.top + elementPos.y,
-      width: this._width,
-      height: this._height
-    };
-  };
-
-  SourceGroup.prototype.getButtonBoundingBox = function(buttonId) {
-    if (!this._buttonsGroup) {
-      return null;
-    }
-
-    var buttonIdx = this._source.buttons.findIndex(function(button) {
-      return button.id === buttonId;
-    });
-
-    if (buttonIdx === -1) {
-      return null;
-    }
-
-    var button = this._source.buttons[buttonIdx];
-    var buttonGroup = this._buttonsGroup.getChildren()[buttonIdx];
-    var buttonPos = buttonGroup.getAbsolutePosition(this._group);
-
-    return {
-      left: buttonPos.x,
-      top: buttonPos.y,
-      width: button.width,
-      height: button.height
-    };
-  };
-
-  SourceGroup.prototype.createIndicators = function() {
-    var newIndicatorsColors = this._source.indicators;
-
-    var oldIndicators = this._indicators;
-    var newIndicators = {};
-
-    if (newIndicatorsColors) {
-      newIndicatorsColors.forEach(function(indicatorColor) {
-        var oldIndicator = oldIndicators[indicatorColor];
-
-        if (oldIndicator) {
-          newIndicators[indicatorColor] = oldIndicator;
-          delete oldIndicators[indicatorColor];
-        }
-        else {
-          newIndicators[indicatorColor] = null;
-        }
-      });
-
-      for (var color in oldIndicators) {
-        if (Utils.objectHasProperty(oldIndicators, color)) {
-          oldIndicators[color].destroy();
-        }
-      }
-    }
-
-    this._indicators = Object.keys(newIndicators)
-      .sort()
-      .reverse()
-      .reduce(function(objEntries, key) {
-        objEntries[key] = newIndicators[key];
-        return objEntries;
-        }, {}
-      );
-
-    this._createIndicators();
-  };
-
-  SourceGroup.prototype._createIndicators = function() {
-    var currentX = 0;
-    var zIndex = 0;
-
-    for (var color in this._indicators) {
-      if (Utils.objectHasProperty(this._indicators, color)) {
-        if (!this._indicators[color]) {
-          this._indicators[color] = new Konva.Circle({
-            radius: INDICATOR_RADIUS,
-            fill: color,
-            strokeEnabled: false
-          });
-          this._indicatorsGroup.add(this._indicators[color]);
-        }
-
-        this._indicators[color].x(currentX);
-        this._indicators[color].zIndex(zIndex);
-        currentX -= INDICATOR_RADIUS;
-        zIndex += 1;
-      }
-    }
-
-    this._indicatorsGroup.offsetX(currentX - this._peaks.options.sourceIndicatorsXOffset);
-    this._indicatorsGroup.offsetY(-this._peaks.options.sourceIndicatorsYOffset);
-  };
-
-  SourceGroup.prototype._createMarkers = function() {
-    const markersGroup = new Konva.Group({
-      listening: false
-    });
-
-    this._source.markers.forEach(function(marker) {
-      const markerX = this._view.timeToPixels(marker - this._source.mediaStartTime);
-
-      var markerLine = new Konva.Line({
-        points: [markerX, 0, markerX, this._unwrappedHeight],
-        stroke: this._source.markerColor,
-        strokeWidth: this._source.markerWidth
-      });
-
-      markersGroup.add(markerLine);
-    }.bind(this));
-
-    return markersGroup;
-  };
-
-  SourceGroup.prototype._createButtons = function() {
-    var buttonsGroup = new Konva.Group({
-      listening: true,
-      x: this._width,
-      visible: false,
-      opacity: 0
-    });
-    var buttonsGroupWidth = 0;
-    var buttonsGap = this._peaks.options.sourceButtonsGap;
-    var self = this;
-
-    this._source.buttons.forEach(function(button) {
-      const {
-        id,
-        width,
-        height,
-        cornerRadius,
-        color,
-        hoverColor,
-        borderColor,
-        borderWidth,
-        svg,
-        image
-      } = button;
-
-      if (buttonsGroupWidth > 0) {
-        buttonsGroupWidth += buttonsGap;
-      }
-
-      var buttonGroup = new Konva.Group({
-        x: buttonsGroupWidth,
-        y: 0,
-        listening: true
-      });
-
-      var buttonRect = new Konva.Rect({
-        width: width,
-        height: height,
-        fill: color,
-        stroke: borderColor,
-        strokeWidth: borderWidth,
-        cornerRadius: cornerRadius
-      });
-
-      buttonsGroupWidth += width;
-
-      buttonGroup.add(buttonRect);
-
-      if (svg) {
-        var svgIcon = new Konva.Path({
-          x: width / 2,
-          y: height / 2,
-          data: svg.path,
-          fill: svg.color,
-          offsetX: svg.width / 2,
-          offsetY: svg.height / 2,
-          listening: false
-        });
-
-        buttonGroup.add(svgIcon);
-      }
-      else if (image) {
-        var imageObj = new Image();
-
-        imageObj.onload = function() {
-          var imageIcon = new Konva.Image({
-            x: width / 2,
-            y: height / 2,
-            image: imageObj,
-            offsetX: image.width / 2,
-            offsetY: image.height / 2,
-            listening: false
-          });
-
-          buttonGroup.add(imageIcon);
-        };
-
-        imageObj.src = image.data;
-      }
-
-      buttonGroup.on('mouseover', function() {
-        self._view.setClickable(false);
-        if (hoverColor) {
-          buttonRect.fill(hoverColor);
-        }
-        self._peaks.emit('source.buttonEnter', self._source, id);
-      });
-
-      buttonGroup.on('mouseout', function() {
-        self._view.setClickable(true);
-        if (buttonRect.fill() !== color) {
-          buttonRect.fill(color);
-        }
-        self._peaks.emit('source.buttonLeave', self._source, id);
-      });
-
-      buttonGroup.on('click', function() {
-        self._peaks.emit('source.buttonClicked', self._source, id);
-      });
-
-      buttonsGroup.add(buttonGroup);
-    });
-
-    buttonsGroup.offsetX(
-      buttonsGroupWidth
-      + this._borderWidth
-      + this._peaks.options.sourceButtonsPadding
-      + this._peaks.options.sourceButtonsXOffset
-    );
-    buttonsGroup.offsetY(
-      -this._borderWidth
-      - this._peaks.options.sourceButtonsPadding
-      - this._peaks.options.sourceButtonsYOffset
-    );
-
-    return buttonsGroup;
-  };
-
-  SourceGroup.prototype._updateMarkers = function() {
-    const self = this;
-
-    if (this._markersGroup) {
-      this._markersGroup.getChildren().forEach(function(markerLine, index) {
-        const marker = self._source.markers[index];
-        const markerX = self._view.timeToPixels(marker - self._source.mediaStartTime);
-
-        markerLine.points([markerX, 0, markerX, self._unwrappedHeight]);
-      });
-    }
-  };
-
-  SourceGroup.prototype._updateButtons = function() {
-    if (this._buttonsGroup) {
-      this._buttonsGroup.x(this._width);
-    }
-  };
-
-  SourceGroup.prototype._getButtons = function() {
-    if (!this._buttonsGroup) {
-      this._buttonsGroup = this._createButtons();
-    }
-
-    return this._buttonsGroup;
-  };
-
-  SourceGroup.prototype._showButtons = function() {
-    if (this._buttonsGroup) {
-      if (this._buttonsAnimation) {
-        this._buttonsAnimation.destroy();
-        this._buttonsAnimation = null;
-      }
-
-      var self = this;
-
-      this._buttonsGroup.visible(true);
-      this._buttonsAnimation = new Konva.Tween({
-        node: this._buttonsGroup,
-        opacity: 1,
-        duration: 0.2,
-        easing: Konva.Easings.EaseOut,
-        onFinish: function() {
-          self._buttonsAnimation.destroy();
-          self._buttonsAnimation = null;
-        }
-      });
-      this._buttonsAnimation.play();
-    }
-  };
-
-  SourceGroup.prototype._hideButtons = function() {
-    if (this._buttonsGroup) {
-      if (this._buttonsAnimation) {
-        this._buttonsAnimation.destroy();
-        this._buttonsAnimation = null;
-      }
-
-      var self = this;
-
-      this._buttonsAnimation = new Konva.Tween({
-        node: this._buttonsGroup,
-        opacity: 0,
-        duration: 0.2,
-        easing: Konva.Easings.EaseOut,
-        onFinish: function() {
-          self._buttonsGroup.visible(false);
-          self._buttonsAnimation.destroy();
-          self._buttonsAnimation = null;
-        }
-      });
-      this._buttonsAnimation.play();
-    }
-  };
-
-  SourceGroup.prototype._getYFromVolume = function(volume) {
-    return this._borderWidth + (this._height - 2 * this._borderWidth) * (
-      this._source.volumeRange[1] - volume
-    ) / (
-      this._source.volumeRange[1] - this._source.volumeRange[0]
-    );
-  };
-
-  SourceGroup.prototype._getVolumeFromY = function(y) {
-    return this._source.volumeRange[1] - (
-      (y - this._borderWidth) / (this._height - 2 * this._borderWidth)
-    ) * (
-      this._source.volumeRange[1] - this._source.volumeRange[0]
-    );
-  };
-
-  SourceGroup.prototype._updateVolumeSlider = function() {
-    const width = this._width;
-
-    if (this._volumeSliderGroup) {
-      this._volumeSliderGroup.getChildren().forEach(function(child) {
-        if (child instanceof Konva.Group) {
-          child.width(width);
-          child.getChildren().forEach(function(node) {
-            if (node instanceof Konva.Line) {
-              node.points([0, 0, width, 0]);
-            }
-          });
-        }
-      });
-    }
-  };
-
-  SourceGroup.prototype._getVolumeSlider = function() {
-    if (!this._volumeSliderGroup) {
-      this._volumeSliderGroup = this._createVolumeSlider();
-    }
-
-    return this._volumeSliderGroup;
-  };
-
-  SourceGroup.prototype._createVolumeSlider = function() {
-    var self = this;
-
-    var volumeY = this._getYFromVolume(this._source.volume);
-
-    var volumeGroup = new Konva.Group({
-      x: 0,
-      y: 0
-    });
-
-    var volumeText = new Konva.Text({
-      x: 0,
-      y: volumeY - 20,
-      text: '100%',
-      fontSize: 12,
-      fill: this._source.volumeSliderColor,
-      visible: false
-    });
-
-    var maxTextWidth = volumeText.width();
-    var maxTextHeight = volumeText.height();
-
-    var volumeSliderGroup = new Konva.Group({
-      x: 0,
-      y: volumeY,
-      draggable: true,
-      dragBoundFunc: function(pos) {
-        var y = Math.min(
-          volumeGroup.absolutePosition().y + self._height - self._borderWidth,
-          Math.max(
-            volumeGroup.absolutePosition().y + self._borderWidth,
-            pos.y
-          )
-        );
-
-        var textX = Math.min(
-          volumeGroup.absolutePosition().x + self._width - maxTextWidth - self._borderWidth,
-          Math.max(
-            volumeGroup.absolutePosition().x + self._borderWidth,
-            self._view.getPointerPosition().x - maxTextWidth
-          )
-        );
-        var textY = y - (self._source.volumeSliderWidth / 2) - maxTextHeight;
-
-        volumeText.absolutePosition({
-          x: textX,
-          y: textY < volumeGroup.absolutePosition().y + self._borderWidth ?
-            y + self._source.volumeSliderWidth :
-            textY
-        });
-
-        return { x: this.absolutePosition().x, y: y };
-      }
-    });
-
-    var volumeSliderLine = new Konva.Line({
-      points: [0, 0, this._width, 0],
-      stroke: this._source.volumeSliderColor,
-      strokeWidth: this._source.volumeSliderWidth
-    });
-
-    var volumeSliderRect = new Konva.Rect({
-      x: 0,
-      y: -this._source.volumeSliderDraggingWidth / 2,
-      width: this._width,
-      height: this._source.volumeSliderDraggingWidth,
-      opacity: 0
-    });
-
-    volumeSliderGroup.add(volumeSliderRect);
-    volumeSliderGroup.add(volumeSliderLine);
-
-    volumeSliderGroup.on('dragstart', function() {
-      volumeText.visible(true);
-    });
-
-    volumeSliderGroup.on('dragmove', function() {
-      var volume = self._getVolumeFromY(volumeSliderGroup.y());
-
-      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();
-    });
-
-    volumeSliderGroup.on('dragend', function() {
-      volumeText.visible(false);
-    });
-
-    volumeSliderGroup.on('mouseover', function() {
-      self._cursor = 'ns-resize';
-    });
-
-    volumeSliderGroup.on('mouseout', function() {
-      self._cursor = null;
-    });
-
-    volumeGroup.add(volumeSliderGroup);
-    volumeGroup.add(volumeText);
-
-    return volumeGroup;
-  };
-
-  SourceGroup.prototype.destroy = function() {
-    if (this._buttonsAnimation) {
-      this._buttonsAnimation.destroy();
-      this._buttonsAnimation = null;
-    }
-
-    if (this._loader) {
-      this._loader.destroy();
-      this._loader = null;
-    }
-
-    this._group.destroy();
-  };
-
-  return SourceGroup;
-});
+/**
+ * @file
+ *
+ * Defines the {@link SourceGroup} class.
+ *
+ * @module source-group
+ */
+
+define([
+  './waveform-builder',
+  './waveform-shape',
+  './loader',
+  '../utils',
+  'konva'
+  ], function(
+    WaveformBuilder,
+    WaveformShape,
+    Loader,
+    Utils,
+    Konva) {
+  'use strict';
+
+  var SPACING_BETWEEN_PREVIEW_AND_BORDER_RATIO = 0.15;
+  var SPACING_BETWEEN_PREVIEWS = 1.5;
+  var CORNER_RADIUS = 8;
+  var INDICATOR_RADIUS = 4; // px
+
+  /**
+   * Creates a source group for the given source.
+   *
+   * @class
+   * @alias SourceGroup
+   *
+   * @param {Source} source
+   * @param {Peaks} peaks
+   * @param {SourcesLayer} layer
+   * @param {WaveformOverview|WaveformZoomView} view
+   */
+
+  function SourceGroup(source, peaks, layer, view) {
+    this._source        = source;
+    this._peaks         = peaks;
+    this._layer         = layer;
+    this._view          = view;
+    this._indicators    = {};
+
+    var self = this;
+
+    this._x = this._view.timeToPixels(source.startTime);
+    this._width = this._view.timeToPixels(source.endTime - source.startTime);
+    var heights = SourceGroup.getHeights(source, peaks);
+
+    this._unwrappedHeight = heights.unwrapped;
+    this._wrappedHeight = heights.wrapped;
+    this._height = heights.current;
+    this._borderWidth = this._source.borderWidth || 0;
+    this._currentTimeToPixelsScaleUsed = this._view.getTimeToPixelsScale();
+    this._selected = this._source.selected;
+    this._hovered = false;
+    this._isDragged = false;
+
+    this._previewList = [];
+
+    this._markersGroup = this._createMarkers();
+
+    this._group = new Konva.Group({
+      x: this._x,
+      sourceId: this._source.id,
+      draggable: this._source.draggable,
+      dragBoundFunc: function() {
+        return self._layer.onSourcesGroupDrag(this);
+      },
+      clipFunc: function(ctx) {
+        self.drawSourceShape(ctx, null);
+      }
+    });
+
+    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('mouseover', function() {
+      if (self._source.draggable) {
+        self._view.setCursor(self._cursor || 'pointer');
+      }
+      if (self._view.getCurrentMode() === 'cut') {
+        self.toggleDragging(false);
+        self.toggleResizing(false);
+      }
+    });
+
+    this._group.on('mouseout', function() {
+      self._view.setCursor('default');
+      if (self._view.getCurrentMode() === 'cut') {
+        self.toggleDragging(true);
+        self.toggleResizing(true);
+      }
+    });
+
+    this._group.add(new Konva.Group());
+
+    if (this._borderWidth) {
+      this._border = new Konva.Shape({
+        fill: this._source.borderColor,
+        sceneFunc: function(ctx, shape) {
+          self.drawSourceShape(ctx, shape);
+        }
+      });
+      this._group.getChildren()[0].add(this._border);
+    }
+    this._addHandles();
+
+    this.setWrapping(source.wrapped);
+
+    this.setSelected();
+
+    this._indicatorsGroup = new Konva.Group();
+    this.addToContent(this._indicatorsGroup);
+
+    this.createIndicators();
+
+    this.setLoadingState(this._source.loading);
+  }
+
+  SourceGroup.prototype._setHovered = function(newValue) {
+    this._hovered = newValue;
+    this._group.draw();
+  };
+
+  SourceGroup.prototype._onDragStart = function(element) {
+    this._isDragged = true;
+    this._layer.onSourcesGroupDragStart(element);
+  };
+
+  SourceGroup.prototype._onDragEnd = function(element) {
+    this._isDragged = false;
+    this._layer.onSourcesGroupDragEnd(element);
+  };
+
+  SourceGroup.prototype.isActive = function() {
+    return this._isDragged;
+  };
+
+  SourceGroup.prototype.addToContent = function(newChild) {
+    if (this._source.wrapped) {
+      this._wrap.add(newChild);
+    }
+    else {
+      this._unwrap.add(newChild);
+    }
+  };
+
+  SourceGroup.prototype.prepareDragEnd = function() {
+    var handleWidth = Math.min(this._peaks.options.sourceHandleWidth, this._width / 2);
+
+    this._leftHandle.width(handleWidth);
+    this._rightHandle.width(handleWidth);
+    this._rightHandle.x(this._width - handleWidth);
+  };
+
+  SourceGroup.prototype._onSourceGroupHandleDrag = function(draggedElement, dragPos, leftHandle) {
+    const diff = this._view.pixelsToTime(dragPos.x - this._mouseDownX);
+    const timeOffsetDiff = this._view.getTimeOffset() - this._initialTimeOffset;
+
+    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();
+        }
+      }.bind(this)
+    );
+
+    return {
+      x: draggedElement.absolutePosition().x,
+      y: draggedElement.absolutePosition().y
+    };
+  };
+
+  SourceGroup.prototype.update = function() {
+    const startPixel = this._view.timeToPixels(this._source.startTime);
+    const endPixel   = this._view.timeToPixels(this._source.endTime);
+    const frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
+    const newTimeToPixelsScale = this._view.getTimeToPixelsScale();
+
+    this._group.x(startPixel - frameOffset);
+
+    this._x = startPixel;
+
+    const newWidth = endPixel - startPixel;
+
+    if (newWidth !== this._width) {
+      this._width = newWidth;
+
+      // the zoom was changed
+      if (newTimeToPixelsScale !== this._currentTimeToPixelsScaleUsed) {
+        this._currentTimeToPixelsScaleUsed = newTimeToPixelsScale;
+
+        this._updateMarkers();
+
+        this._rightHandle.x(this._width - this._rightHandle.width());
+      }
+      else {
+        // the zoom was not changed, but the source was resized
+        const newTitle = Utils.removeLineBreaks(this._source.getVisibleTitle());
+
+        if (this._wrappedTitle && this._wrappedTitle.text() !== newTitle) {
+          this._wrap.add(this._createTitle(true));
+        }
+        if (this._unwrappedTitle && this._unwrappedTitle.text() !== newTitle) {
+          this._unwrap.add(this._createTitle(false));
+        }
+      }
+
+      this._updateVolumeSlider();
+      this._updateButtons();
+      this._updateLoadingOverlay();
+
+      // update unwrap
+      this.updatePreviews();
+    }
+  };
+
+  SourceGroup.prototype.setWrapping = function(wrap, forceCreate, notify) {
+    if (wrap) {
+      this._removeUnwrap();
+      this._height = this._wrappedHeight;
+      this._addWrap(forceCreate);
+    }
+    else {
+      this._removeWrap();
+      this._height = this._unwrappedHeight;
+      this._addUnwrap(forceCreate);
+    }
+
+    this.setHandlesWrapping(wrap);
+
+    if (notify) {
+      this._peaks.emit('source.wrappingChanged', this);
+    }
+  };
+
+  SourceGroup.prototype.setHandlesWrapping = function(wrap) {
+    if (wrap) {
+      this._leftHandle.height(this._wrappedHeight);
+      this._rightHandle.height(this._wrappedHeight);
+    }
+    else {
+      this._leftHandle.height(this._unwrappedHeight);
+      this._rightHandle.height(this._unwrappedHeight);
+    }
+  };
+
+  SourceGroup.prototype._onHandleDragStart = function() {
+    this._initialTimeOffset = this._view.getTimeOffset();
+    this._mouseDownX = this._view.getPointerPosition().x;
+    this._initialTimes = {
+      start: this._source.startTime,
+      end: this._source.endTime
+    };
+    this._isDragged = true;
+
+    this._hideButtons();
+  };
+
+  SourceGroup.prototype._onHandleDragEnd = function() {
+    this._isDragged = false;
+    this._showButtons();
+  };
+
+  SourceGroup.prototype._addHandles = function(forceCreate) {
+    var self = this;
+    var handleWidth = Math.min(this._peaks.options.sourceHandleWidth, this._width / 2);
+
+    if (!this._leftHandle || forceCreate) {
+      this._leftHandle = new Konva.Rect({
+        x: 0,
+        width: handleWidth,
+        height: this._unwrappedHeight,
+        visible: true,
+        draggable: this._source.resizable,
+        dragBoundFunc: function(pos) {
+          return self._onSourceGroupHandleDrag(this, pos, true);
+        }
+      });
+
+      this._leftHandle.on('dragstart', this._onHandleDragStart.bind(this));
+
+      this._leftHandle.on('dragend', this._onHandleDragEnd.bind(this));
+
+      if (this._source.resizable) {
+        this._leftHandle.on('mouseover', function() {
+          self._cursor = 'ew-resize';
+        });
+
+        this._leftHandle.on('mouseout', function() {
+          self._cursor = null;
+        });
+      }
+    }
+
+    if (!this._rightHandle || forceCreate) {
+      this._rightHandle = new Konva.Rect({
+        x: this._width - handleWidth,
+        width: handleWidth,
+        height: this._unwrappedHeight,
+        visible: true,
+        draggable: this._source.resizable,
+        dragBoundFunc: function(pos) {
+          return self._onSourceGroupHandleDrag(this, pos, false);
+        }
+      });
+
+      this._rightHandle.on('dragstart', this._onHandleDragStart.bind(this));
+
+      this._rightHandle.on('dragend', this._onHandleDragEnd.bind(this));
+
+      if (this._source.resizable) {
+        this._rightHandle.on('mouseover', function() {
+          self._cursor = 'ew-resize';
+        });
+
+        this._rightHandle.on('mouseout', function() {
+          self._cursor = null;
+        });
+      }
+    }
+
+    this._group.add(this._leftHandle);
+    this._group.add(this._rightHandle);
+  };
+
+  SourceGroup.prototype.toggleDragging = function(bool) {
+    var background;
+
+    if (this._wrap) {
+      background = this._wrap.getChildren(function(node) {
+        return node.getClassName() === 'Shape';
+      })[0];
+
+      if (background) {
+        background.draggable(bool);
+      }
+    }
+    if (this._unwrap) {
+      background = this._unwrap.getChildren(function(node) {
+        return node.getClassName() === 'Shape';
+      })[0];
+
+      if (background) {
+        background.draggable(bool);
+      }
+    }
+  };
+
+  SourceGroup.prototype.toggleResizing = function(bool) {
+    if (this._leftHandle) {
+      this._leftHandle.draggable(bool);
+    }
+    if (this._rightHandle) {
+      this._rightHandle.draggable(bool);
+    }
+  };
+
+  SourceGroup.prototype.drawSourceShape = function(ctx, shape, addBorderWidth, fill) {
+    var offset = addBorderWidth ? this._borderWidth : 0;
+    var radius = !Utils.isNullOrUndefined(this._source.borderRadius) ?
+      this._source.borderRadius :
+      Math.max(
+        1,
+        Math.min(
+          this._width / 2,
+          Math.min(
+            CORNER_RADIUS,
+            this._height / 2
+          )
+        )
+      );
+    var x = Math.max(
+      0,
+      this._view.getFrameOffset() - this._x - 2 * radius
+    );
+    var width = Math.min(
+      this._width - x,
+      this._view.getWidth() + 4 * radius - Math.max(
+        0,
+        this._x - this._view.getFrameOffset()
+      )
+    );
+    var xWidth = x + width;
+
+    if (width > 0) {
+      ctx.beginPath();
+      ctx.moveTo(x + radius, offset);
+      ctx.lineTo(xWidth - radius, offset);
+      ctx.quadraticCurveTo(xWidth - offset, offset, xWidth - offset, radius);
+      ctx.lineTo(xWidth - offset, this._height - radius);
+      ctx.quadraticCurveTo(
+        xWidth - offset,
+        this._height - offset,
+        xWidth - radius,
+        this._height - offset
+      );
+      ctx.lineTo(x + radius, this._height - offset);
+      ctx.quadraticCurveTo(x + offset, this._height - offset, x + offset, this._height - radius);
+      ctx.lineTo(x + offset, radius);
+      ctx.quadraticCurveTo(x + offset, offset, x + radius, offset);
+      ctx.closePath();
+
+      if (fill) {
+        var backgroundColor;
+
+        if (this._selected) {
+          backgroundColor = this._source.selectedBackgroundColor;
+        }
+        else if (this._hovered) {
+          backgroundColor = this._source.hoverBackgroundColor;
+        }
+        else {
+          backgroundColor = this._source.backgroundColor;
+        }
+
+        if (this._source.shouldShowWarning()) {
+          var gradient = ctx.createLinearGradient(0, 0, this._width, 0);
+
+          if (this._source.mediaEndTime < this._source.duration) {
+            var rightStopPosition = Math.max(1 - (this._source.warningWidth / this._width), 0.5);
+
+            gradient.addColorStop(rightStopPosition, backgroundColor);
+            gradient.addColorStop(1, this._source.warningColor);
+          }
+
+          if (this._source.mediaStartTime > 0) {
+            var leftStopPosition = Math.min(this._source.warningWidth / this._width, 0.5);
+
+            gradient.addColorStop(0, this._source.warningColor);
+            gradient.addColorStop(leftStopPosition, backgroundColor);
+          }
+
+          ctx.fillStyle = gradient;
+          ctx.fill();
+        }
+        else {
+          ctx.fillStyle = backgroundColor;
+          ctx.fill();
+        }
+      }
+
+      if (shape) {
+        ctx.fillStrokeShape(shape);
+      }
+    }
+  };
+
+  SourceGroup.prototype._addUnwrap = function(forceCreate) {
+    if (!this._unwrap || forceCreate) {
+      this._unwrap = this._createUnwrap();
+    }
+
+    this._group.getChildren()[0].add(this._unwrap);
+  };
+
+  SourceGroup.prototype._createUnwrap = function() {
+    var self = this;
+
+    var unwrap = new Konva.Group({
+      width: this._width,
+      height: this._unwrappedHeight,
+      clipFunc: function(ctx) {
+        self.drawSourceShape(ctx, null, true);
+      }
+    });
+
+    var background = new Konva.Group();
+
+    background.add(new Konva.Shape({
+      sceneFunc: function(ctx, shape) {
+        self.drawSourceShape(ctx, shape, true, true);
+      }
+    }));
+
+    unwrap.add(background);
+    unwrap.add(this._markersGroup);
+    if (this._source.volumeRange && this._source.volume !== undefined) {
+      unwrap.add(this._getVolumeSlider());
+    }
+    if (this._source.buttons.length > 0) {
+      unwrap.add(this._getButtons());
+    }
+    unwrap.add(this._createTitle(false));
+
+    return unwrap;
+  };
+
+  SourceGroup.prototype._addToUnwrap = function(element, inForeground) {
+    if (inForeground) {
+      this._unwrap.add(element);
+    }
+    else {
+      this._unwrap.getChildren()[0].add(element);
+    }
+  };
+
+  SourceGroup.prototype._removeUnwrap = function() {
+    if (this._unwrap) {
+      this._unwrap.remove();
+    }
+  };
+
+  SourceGroup.prototype._addWrap = function(forceCreate) {
+    if (!this._wrap || forceCreate) {
+      this._wrap = this._createWrap();
+    }
+
+    this._group.getChildren()[0].add(this._wrap);
+  };
+
+  SourceGroup.prototype._createWrap = function() {
+    var self = this;
+
+    var wrap = new Konva.Group({
+      width: this._width,
+      height: this._wrappedHeight,
+      clipFunc: function(ctx) {
+        self.drawSourceShape(ctx, null, true);
+      }
+    });
+
+    var background = new Konva.Group();
+
+    background.add(new Konva.Shape({
+      sceneFunc: function(ctx, shape) {
+        self.drawSourceShape(ctx, shape, true, true);
+      }
+    }));
+
+    wrap.add(background);
+    wrap.add(this._markersGroup);
+    if (this._source.volumeRange && this._source.volume !== undefined) {
+      wrap.add(this._getVolumeSlider());
+    }
+    if (this._source.buttons.length > 0) {
+      wrap.add(this._getButtons());
+    }
+    wrap.add(this._createTitle(true));
+
+    return wrap;
+  };
+
+  SourceGroup.prototype._addToWrap = function(element, inForeground) {
+    if (inForeground) {
+      this._wrap.add(element);
+    }
+    else {
+      this._wrap.getChildren()[0].add(element);
+    }
+  };
+
+  SourceGroup.prototype._removeWrap = function() {
+    if (this._wrap) {
+      this._wrap.remove();
+    }
+  };
+
+  SourceGroup.prototype._createTitle = function(isWrap) {
+    var self = this;
+    var defaultWidth;
+    var y = (this._source.textPosition === 'bottom') ?
+      Math.max(
+        (isWrap ? this._wrappedHeight : this._unwrappedHeight)
+          - this._source.textFontSize - this._peaks.options.sourceTextYOffset,
+        this._peaks.options.sourceTextYOffset
+      ) : this._peaks.options.sourceTextYOffset;
+    var defaultXOffset = this._peaks.options.sourceTextXOffset;
+    var maxXOffset = this._width - 2 * defaultXOffset;
+
+    if (isWrap) {
+      if (this._wrappedTitle) {
+        this._wrappedTitle.destroy();
+        this._wrappedTitle = null;
+      }
+    }
+    else {
+      if (this._unwrappedTitle) {
+        this._unwrappedTitle.destroy();
+        this._unwrappedTitle = null;
+      }
+    }
+
+    var title = new Konva.Text({
+      x: defaultXOffset,
+      y: y,
+      text: Utils.removeLineBreaks(this._source.getVisibleTitle()),
+      textAlign: 'left',
+      verticalAlign: 'middle',
+      fontSize: this._source.textFontSize,
+      fontFamily: this._source.textFont,
+      fill: this._source.textColor,
+      wrap: 'none',
+      ellipsis: true,
+      listening: false,
+      sceneFunc: function(context, shape) {
+        var absX = this.absolutePosition().x;
+
+        if (self._source.textAutoScroll && absX < defaultXOffset) {
+          this.offsetX(Math.max(Math.min(0, absX - defaultXOffset), -(maxXOffset - shape.width())));
+        }
+        defaultWidth = defaultWidth ? defaultWidth : shape.width();
+        shape.width(Math.min(self._width - 10, defaultWidth));
+        if (self._source.textBackgroundColor) {
+          context.fillStyle = self._source.textBackgroundColor;
+          context.fillRect(-5, -5, shape.width() + 10, shape.height() ? shape.height() + 10 : 0);
+        }
+        shape._sceneFunc(context);
+      }
+    });
+
+    if (isWrap) {
+      this._wrappedTitle = title;
+    }
+    else {
+      this._unwrappedTitle = title;
+    }
+
+    return title;
+  };
+
+  SourceGroup.prototype.getWidth = function() {
+    return this._width;
+  };
+
+  SourceGroup.prototype.getX = function() {
+    return this._x;
+  };
+
+  SourceGroup.prototype.getAbsoluteY = function() {
+    return this._group.absolutePosition().y;
+  };
+
+  SourceGroup.prototype.x = function(value) {
+    if (typeof value !== 'number') {
+      return this._group.x();
+    }
+    return this._group.x(value);
+  };
+
+  SourceGroup.prototype.y = function(value) {
+    if (typeof value !== 'number') {
+      return this._group.y();
+    }
+    return this._group.y(value);
+  };
+
+  SourceGroup.prototype.getSource = function() {
+    return this._source;
+  };
+
+  SourceGroup.prototype.startDrag = function() {
+    return this._group.startDrag();
+  };
+
+  SourceGroup.prototype.stopDrag = function() {
+    return this._group.stopDrag();
+  };
+
+  SourceGroup.prototype.moveTo = function(group) {
+    this._group.moveTo(group);
+  };
+
+  SourceGroup.prototype.isDescendantOf = function(group) {
+    return group.isAncestorOf(this._group);
+  };
+
+  SourceGroup.prototype.hideButKeepFocus = function() {
+    this._group.moveTo(this._view.getTempGroup());
+  };
+
+  SourceGroup.prototype.getParent = function() {
+    return this._group.getParent();
+  };
+
+  SourceGroup.prototype.remove = function() {
+    this._group.remove();
+  };
+
+  SourceGroup.prototype.addImagePreview = function(content, url, redraw) {
+    var preview = {
+      type: 'image',
+      group: new Konva.Group({
+        height: this._unwrappedHeight,
+        listening: false
+      })
+    };
+
+    var imageData = this._layer.getLoadedData(url);
+
+    if (!imageData) {
+      imageData = new Image();
+
+      var self = this;
+
+      imageData.onload = function() {
+        self._layer.setLoadedData(url, this);
+        preview.loaded = true;
+        self._createImagePreview(preview, imageData, redraw);
+      };
+
+      imageData.src = content;
+    }
+    else {
+      preview.loaded = true;
+      this._createImagePreview(preview, imageData, redraw);
+    }
+  };
+
+  SourceGroup.prototype.addVideoPreview = function(content, url, redraw) {
+    var preview = {
+      type: 'video',
+      group: new Konva.Group({
+        y: this._source.binaryUrl && this._source.previewUrl ? this._source.binaryHeight : 0,
+        height: this._source.binaryUrl && this._source.previewUrl ?
+                  this._source.previewHeight : this._unwrappedHeight,
+        listening: false
+      })
+    };
+
+    var imageData = this._layer.getLoadedData(url);
+
+    if (!imageData) {
+      var video = document.createElement('video');
+      var self = this;
+
+      video.onloadeddata = function() {
+        this.currentTime = this.duration / 2;
+
+        var canvas = document.createElement('canvas');
+
+        canvas.width = this.videoWidth;
+        canvas.height = this.videoHeight;
+        canvas.getContext('2d').drawImage(this, 0, 0, canvas.width, canvas.height);
+
+        imageData = new Image();
+
+        imageData.onload = function() {
+          self._layer.setLoadedData(url, this);
+          preview.loaded = true;
+          self._createImagePreview(preview, imageData, redraw);
+        };
+
+        imageData.src = canvas.toDataURL();
+      };
+
+      video.src = content;
+    }
+    else {
+      preview.loaded = true;
+      this._createImagePreview(preview, imageData, redraw);
+    }
+  };
+
+  SourceGroup.prototype.addAudioPreview = function(type, content, url, redraw) {
+    var preview = {
+      type: 'audio',
+      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);
+
+    if (!audioData) {
+      var waveformBuilder = new WaveformBuilder(this._peaks);
+      var options = Object.assign({},this._peaks.options);
+
+      if (type === 'audio') {
+        options.objectUrl = content;
+      }
+      else {
+        options.dataUri = content;
+      }
+
+      waveformBuilder.init(options, function(err, originalWaveformData) {
+        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);
+        }
+
+        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);
+      });
+    }
+    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;
+      }
+    }
+
+    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.getAudioPreview = function() {
+    return this._previewList.filter(function(preview) {
+      return preview.type === 'audio';
+    });
+  };
+
+  SourceGroup.prototype.setSelected = function() {
+    this._selected = this._source.selected;
+    if (this._border) {
+      if (this._selected) {
+        this._border.fill(this._source.selectedBorderColor);
+        this._borderWidth = this._peaks.options.sourceSelectedBorderWidth;
+      }
+      else {
+        this._border.fill(this._source.borderColor);
+        this._borderWidth = this._source.borderWidth;
+      }
+    }
+    else {
+      if (this._unwrap) {
+        // update unwrap
+        var unwrap_background = this._unwrap.getChildren(function(node) {
+          return node.getClassName() === 'Shape';
+        })[0];
+
+        if (unwrap_background) {
+          if (this._selected) {
+            unwrap_background.stroke(this._source.selectedBorderColor);
+            unwrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
+          }
+          else {
+            unwrap_background.strokeWidth(0);
+          }
+        }
+      }
+
+      if (this._wrap) {
+        // update wrap
+        var wrap_background = this._wrap.getChildren(function(node) {
+          return node.getClassName() === 'Shape';
+        })[0];
+
+        if (wrap_background) {
+          if (this._selected) {
+            wrap_background.stroke(this._source.selectedBorderColor);
+            wrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
+          }
+          else {
+            wrap_background.strokeWidth(0);
+          }
+        }
+      }
+    }
+  };
+
+  SourceGroup.prototype.updatePreviews = function() {
+    var self = this;
+
+    this._previewList.forEach(function(preview) {
+      if (preview.loaded) {
+        switch (preview.type) {
+          case 'video':
+          case 'image':
+            // image or video preview
+            if (self._unwrappedHeight !== preview.imageData.referenceHeight) {
+              preview.imageData.referenceHeight = preview.group.height();
+              preview.imageData.borderSpacing   = SPACING_BETWEEN_PREVIEW_AND_BORDER_RATIO
+                                                  * preview.imageData.referenceHeight;
+              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 interImageSpacing = preview.imageData.width + preview.imageData.imageSpacing;
+            var imageNumber;
+
+            if (self._width > preview.imageData.borderSpacing) {
+              imageNumber = Math.trunc(
+                (self._width - preview.imageData.borderSpacing)
+                  / interImageSpacing
+              ) + 1;
+            }
+            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);
+            }
+        }
+      }
+    });
+  };
+
+  SourceGroup.prototype._createImagePreview = function(preview, image, redraw) {
+    preview.imageData = {
+      image: image,
+      referenceHeight: null,
+      dimRatio: null,
+      borderSpacing: null,
+      height: null,
+      width: null,
+      imageSpacing: null
+    };
+
+    preview.imageData.referenceHeight = preview.group.height();
+    preview.imageData.dimRatio = image.width / image.height;
+    preview.imageData.borderSpacing = SPACING_BETWEEN_PREVIEW_AND_BORDER_RATIO
+                                      * preview.imageData.referenceHeight;
+    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);
+
+    if (redraw) {
+      this._group.draw();
+    }
+
+    this._previewList.push(preview);
+  };
+
+  SourceGroup.prototype.setLoadingState = function(isLoading) {
+    if (isLoading && !this._loadingOverlay) {
+      this._createLoadingOverlay();
+    }
+    else if (!isLoading && this._loadingOverlay) {
+      this._removeLoadingOverlay();
+    }
+
+    if (this._loadingOverlay) {
+      this._loadingOverlay.visible(isLoading);
+    }
+  };
+
+  SourceGroup.prototype._createLoadingOverlay = function() {
+    this._loadingOverlay = new Konva.Group({
+      x: 0,
+      y: 0,
+      width: this._width,
+      height: this._height,
+      listening: false
+    });
+
+    // Semi-transparent background
+    var loadingBackground = new Konva.Rect({
+      x: 0,
+      y: 0,
+      width: this._width,
+      height: this._height,
+      fill: 'rgba(0, 0, 0, 0.7)'
+    });
+
+    this._loader = new Loader();
+    this._loader.x(this._width / 2);
+    this._loader.y(this._height / 2);
+
+    // Add overlay to the main group
+    this._loadingOverlay.add(loadingBackground);
+    this._loader.addTo(this._loadingOverlay);
+    this.addToContent(this._loadingOverlay);
+  };
+
+  SourceGroup.prototype._removeLoadingOverlay = function() {
+    if (this._loadingOverlay) {
+      if (this._loader) {
+        this._loader.destroy();
+        this._loader = null;
+      }
+      this._loadingOverlay.destroy();
+      this._loadingOverlay = null;
+    }
+  };
+
+  SourceGroup.prototype._updateLoadingOverlay = function() {
+    if (this._loadingOverlay) {
+      var self = this;
+
+      this._loadingOverlay.width(self._width);
+      this._loadingOverlay.height(self._height);
+
+      this._loadingOverlay.getChildren().forEach(function(child) {
+        if (child instanceof Konva.Rect) {
+          child.width(self._width);
+          child.height(self._height);
+        }
+        else {
+          child.x(self._width / 2);
+        }
+      });
+    }
+  };
+
+  SourceGroup.prototype.isWrapped = function() {
+    return this._source.wrapped;
+  };
+
+  SourceGroup.prototype.getCurrentHeight = function() {
+    return this._height;
+  };
+
+  SourceGroup.prototype.getHeights = function() {
+    return {
+      unwrapped: this._unwrappedHeight,
+      wrapped: this._wrappedHeight,
+      current: this._height
+    };
+  };
+
+  SourceGroup.prototype.setVisible = function(boolean) {
+    this._group.visible(boolean);
+  };
+
+  SourceGroup.prototype.setListening = function(boolean) {
+    this._group.listening(boolean);
+  };
+
+  SourceGroup.prototype.isVisible = function() {
+    return this._group.visible();
+  };
+
+  SourceGroup.prototype.isCuttable = function() {
+    return this._source.cuttable;
+  };
+
+  SourceGroup.prototype.isDeletable = function() {
+    return this._source.deletable;
+  };
+
+  SourceGroup.prototype.getLine = function() {
+    return this._source.lineId;
+  };
+
+  SourceGroup.prototype.getAbsoluteBoundingBox = function() {
+    var stageContainer = this._group.getStage().container();
+    var containerRect = stageContainer.getBoundingClientRect();
+
+    var elementPos = this._group.getAbsolutePosition();
+
+    return {
+      left: containerRect.left + elementPos.x,
+      top: containerRect.top + elementPos.y,
+      width: this._width,
+      height: this._height
+    };
+  };
+
+  SourceGroup.prototype.getButtonBoundingBox = function(buttonId) {
+    if (!this._buttonsGroup) {
+      return null;
+    }
+
+    var buttonIdx = this._source.buttons.findIndex(function(button) {
+      return button.id === buttonId;
+    });
+
+    if (buttonIdx === -1) {
+      return null;
+    }
+
+    var button = this._source.buttons[buttonIdx];
+    var buttonGroup = this._buttonsGroup.getChildren()[buttonIdx];
+    var buttonPos = buttonGroup.getAbsolutePosition(this._group);
+
+    return {
+      left: buttonPos.x,
+      top: buttonPos.y,
+      width: button.width,
+      height: button.height
+    };
+  };
+
+  SourceGroup.prototype.createIndicators = function() {
+    var newIndicatorsColors = this._source.indicators;
+
+    var oldIndicators = this._indicators;
+    var newIndicators = {};
+
+    if (newIndicatorsColors) {
+      newIndicatorsColors.forEach(function(indicatorColor) {
+        var oldIndicator = oldIndicators[indicatorColor];
+
+        if (oldIndicator) {
+          newIndicators[indicatorColor] = oldIndicator;
+          delete oldIndicators[indicatorColor];
+        }
+        else {
+          newIndicators[indicatorColor] = null;
+        }
+      });
+
+      for (var color in oldIndicators) {
+        if (Utils.objectHasProperty(oldIndicators, color)) {
+          oldIndicators[color].destroy();
+        }
+      }
+    }
+
+    this._indicators = Object.keys(newIndicators)
+      .sort()
+      .reverse()
+      .reduce(function(objEntries, key) {
+        objEntries[key] = newIndicators[key];
+        return objEntries;
+        }, {}
+      );
+
+    this._createIndicators();
+  };
+
+  SourceGroup.prototype._createIndicators = function() {
+    var currentX = 0;
+    var zIndex = 0;
+
+    for (var color in this._indicators) {
+      if (Utils.objectHasProperty(this._indicators, color)) {
+        if (!this._indicators[color]) {
+          this._indicators[color] = new Konva.Circle({
+            radius: INDICATOR_RADIUS,
+            fill: color,
+            strokeEnabled: false
+          });
+          this._indicatorsGroup.add(this._indicators[color]);
+        }
+
+        this._indicators[color].x(currentX);
+        this._indicators[color].zIndex(zIndex);
+        currentX -= INDICATOR_RADIUS;
+        zIndex += 1;
+      }
+    }
+
+    this._indicatorsGroup.offsetX(currentX - this._peaks.options.sourceIndicatorsXOffset);
+    this._indicatorsGroup.offsetY(-this._peaks.options.sourceIndicatorsYOffset);
+  };
+
+  SourceGroup.prototype._createMarkers = function() {
+    const markersGroup = new Konva.Group({
+      listening: false
+    });
+
+    this._source.markers.forEach(function(marker) {
+      const markerX = this._view.timeToPixels(marker - this._source.mediaStartTime);
+
+      var markerLine = new Konva.Line({
+        points: [markerX, 0, markerX, this._unwrappedHeight],
+        stroke: this._source.markerColor,
+        strokeWidth: this._source.markerWidth
+      });
+
+      markersGroup.add(markerLine);
+    }.bind(this));
+
+    return markersGroup;
+  };
+
+  SourceGroup.prototype._createButtons = function() {
+    var buttonsGroup = new Konva.Group({
+      listening: true,
+      x: this._width,
+      visible: false,
+      opacity: 0
+    });
+    var buttonsGroupWidth = 0;
+    var buttonsGap = this._peaks.options.sourceButtonsGap;
+    var self = this;
+
+    this._source.buttons.forEach(function(button) {
+      const {
+        id,
+        width,
+        height,
+        cornerRadius,
+        color,
+        hoverColor,
+        borderColor,
+        borderWidth,
+        svg,
+        image
+      } = button;
+
+      if (buttonsGroupWidth > 0) {
+        buttonsGroupWidth += buttonsGap;
+      }
+
+      var buttonGroup = new Konva.Group({
+        x: buttonsGroupWidth,
+        y: 0,
+        listening: true
+      });
+
+      var buttonRect = new Konva.Rect({
+        width: width,
+        height: height,
+        fill: color,
+        stroke: borderColor,
+        strokeWidth: borderWidth,
+        cornerRadius: cornerRadius
+      });
+
+      buttonsGroupWidth += width;
+
+      buttonGroup.add(buttonRect);
+
+      if (svg) {
+        var svgIcon = new Konva.Path({
+          x: width / 2,
+          y: height / 2,
+          data: svg.path,
+          fill: svg.color,
+          offsetX: svg.width / 2,
+          offsetY: svg.height / 2,
+          listening: false
+        });
+
+        buttonGroup.add(svgIcon);
+      }
+      else if (image) {
+        var imageObj = new Image();
+
+        imageObj.onload = function() {
+          var imageIcon = new Konva.Image({
+            x: width / 2,
+            y: height / 2,
+            image: imageObj,
+            offsetX: image.width / 2,
+            offsetY: image.height / 2,
+            listening: false
+          });
+
+          buttonGroup.add(imageIcon);
+        };
+
+        imageObj.src = image.data;
+      }
+
+      buttonGroup.on('mouseover', function() {
+        self._view.setClickable(false);
+        if (hoverColor) {
+          buttonRect.fill(hoverColor);
+        }
+        self._peaks.emit('source.buttonEnter', self._source, id);
+      });
+
+      buttonGroup.on('mouseout', function() {
+        self._view.setClickable(true);
+        if (buttonRect.fill() !== color) {
+          buttonRect.fill(color);
+        }
+        self._peaks.emit('source.buttonLeave', self._source, id);
+      });
+
+      buttonGroup.on('click', function() {
+        self._peaks.emit('source.buttonClicked', self._source, id);
+      });
+
+      buttonsGroup.add(buttonGroup);
+    });
+
+    buttonsGroup.offsetX(
+      buttonsGroupWidth
+      + this._borderWidth
+      + this._peaks.options.sourceButtonsPadding
+      + this._peaks.options.sourceButtonsXOffset
+    );
+    buttonsGroup.offsetY(
+      -this._borderWidth
+      - this._peaks.options.sourceButtonsPadding
+      - this._peaks.options.sourceButtonsYOffset
+    );
+
+    return buttonsGroup;
+  };
+
+  SourceGroup.prototype._updateMarkers = function() {
+    const self = this;
+
+    if (this._markersGroup) {
+      this._markersGroup.getChildren().forEach(function(markerLine, index) {
+        const marker = self._source.markers[index];
+        const markerX = self._view.timeToPixels(marker - self._source.mediaStartTime);
+
+        markerLine.points([markerX, 0, markerX, self._unwrappedHeight]);
+      });
+    }
+  };
+
+  SourceGroup.prototype._updateButtons = function() {
+    if (this._buttonsGroup) {
+      this._buttonsGroup.x(this._width);
+    }
+  };
+
+  SourceGroup.prototype._getButtons = function() {
+    if (!this._buttonsGroup) {
+      this._buttonsGroup = this._createButtons();
+    }
+
+    return this._buttonsGroup;
+  };
+
+  SourceGroup.prototype._showButtons = function() {
+    if (this._buttonsGroup) {
+      if (this._buttonsAnimation) {
+        this._buttonsAnimation.destroy();
+        this._buttonsAnimation = null;
+      }
+
+      var self = this;
+
+      this._buttonsGroup.visible(true);
+      this._buttonsAnimation = new Konva.Tween({
+        node: this._buttonsGroup,
+        opacity: 1,
+        duration: 0.2,
+        easing: Konva.Easings.EaseOut,
+        onFinish: function() {
+          self._buttonsAnimation.destroy();
+          self._buttonsAnimation = null;
+        }
+      });
+      this._buttonsAnimation.play();
+    }
+  };
+
+  SourceGroup.prototype._hideButtons = function() {
+    if (this._buttonsGroup) {
+      if (this._buttonsAnimation) {
+        this._buttonsAnimation.destroy();
+        this._buttonsAnimation = null;
+      }
+
+      var self = this;
+
+      this._buttonsAnimation = new Konva.Tween({
+        node: this._buttonsGroup,
+        opacity: 0,
+        duration: 0.2,
+        easing: Konva.Easings.EaseOut,
+        onFinish: function() {
+          self._buttonsGroup.visible(false);
+          self._buttonsAnimation.destroy();
+          self._buttonsAnimation = null;
+        }
+      });
+      this._buttonsAnimation.play();
+    }
+  };
+
+  SourceGroup.prototype._getYFromVolume = function(volume) {
+    return this._borderWidth + (this._height - 2 * this._borderWidth) * (
+      this._source.volumeRange[1] - volume
+    ) / (
+      this._source.volumeRange[1] - this._source.volumeRange[0]
+    );
+  };
+
+  SourceGroup.prototype._getVolumeFromY = function(y) {
+    return this._source.volumeRange[1] - (
+      (y - this._borderWidth) / (this._height - 2 * this._borderWidth)
+    ) * (
+      this._source.volumeRange[1] - this._source.volumeRange[0]
+    );
+  };
+
+  SourceGroup.prototype._updateVolumeSlider = function() {
+    const width = this._width;
+
+    if (this._volumeSliderGroup) {
+      this._volumeSliderGroup.getChildren().forEach(function(child) {
+        if (child instanceof Konva.Group) {
+          child.width(width);
+          child.getChildren().forEach(function(node) {
+            if (node instanceof Konva.Line) {
+              node.points([0, 0, width, 0]);
+            }
+          });
+        }
+      });
+    }
+  };
+
+  SourceGroup.prototype._getVolumeSlider = function() {
+    if (!this._volumeSliderGroup) {
+      this._volumeSliderGroup = this._createVolumeSlider();
+    }
+
+    return this._volumeSliderGroup;
+  };
+
+  SourceGroup.prototype._createVolumeSlider = function() {
+    var self = this;
+
+    var volumeY = this._getYFromVolume(this._source.volume);
+
+    var volumeGroup = new Konva.Group({
+      x: 0,
+      y: 0
+    });
+
+    var volumeText = new Konva.Text({
+      x: 0,
+      y: volumeY - 20,
+      text: '100%',
+      fontSize: 12,
+      fill: this._source.volumeSliderColor,
+      visible: false
+    });
+
+    var maxTextWidth = volumeText.width();
+    var maxTextHeight = volumeText.height();
+
+    var volumeSliderGroup = new Konva.Group({
+      x: 0,
+      y: volumeY,
+      draggable: true,
+      dragBoundFunc: function(pos) {
+        var y = Math.min(
+          volumeGroup.absolutePosition().y + self._height - self._borderWidth,
+          Math.max(
+            volumeGroup.absolutePosition().y + self._borderWidth,
+            pos.y
+          )
+        );
+
+        var textX = Math.min(
+          volumeGroup.absolutePosition().x + self._width - maxTextWidth - self._borderWidth,
+          Math.max(
+            volumeGroup.absolutePosition().x + self._borderWidth,
+            self._view.getPointerPosition().x - maxTextWidth
+          )
+        );
+        var textY = y - (self._source.volumeSliderWidth / 2) - maxTextHeight;
+
+        volumeText.absolutePosition({
+          x: textX,
+          y: textY < volumeGroup.absolutePosition().y + self._borderWidth ?
+            y + self._source.volumeSliderWidth :
+            textY
+        });
+
+        return { x: this.absolutePosition().x, y: y };
+      }
+    });
+
+    var volumeSliderLine = new Konva.Line({
+      points: [0, 0, this._width, 0],
+      stroke: this._source.volumeSliderColor,
+      strokeWidth: this._source.volumeSliderWidth
+    });
+
+    var volumeSliderRect = new Konva.Rect({
+      x: 0,
+      y: -this._source.volumeSliderDraggingWidth / 2,
+      width: this._width,
+      height: this._source.volumeSliderDraggingWidth,
+      opacity: 0
+    });
+
+    volumeSliderGroup.add(volumeSliderRect);
+    volumeSliderGroup.add(volumeSliderLine);
+
+    volumeSliderGroup.on('dragstart', function() {
+      volumeText.visible(true);
+      self._peaks.emit('source.startVolumeChange', self._source);
+    });
+
+    volumeSliderGroup.on('dragmove', function() {
+      var volume = self._getVolumeFromY(volumeSliderGroup.y());
+
+      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();
+    });
+
+    volumeSliderGroup.on('dragend', function() {
+      volumeText.visible(false);
+      self._peaks.emit('source.endVolumeChange', self._source);
+    });
+
+    volumeSliderGroup.on('mouseover', function() {
+      self._cursor = 'ns-resize';
+    });
+
+    volumeSliderGroup.on('mouseout', function() {
+      self._cursor = null;
+    });
+
+    volumeGroup.add(volumeSliderGroup);
+    volumeGroup.add(volumeText);
+
+    return volumeGroup;
+  };
+
+  SourceGroup.prototype.destroy = function() {
+    if (this._buttonsAnimation) {
+      this._buttonsAnimation.destroy();
+      this._buttonsAnimation = null;
+    }
+
+    if (this._loader) {
+      this._loader.destroy();
+      this._loader = null;
+    }
+
+    this._group.destroy();
+  };
+
+  /**
+   * Static method to get height for a source
+   * @param {Source} source - The source object
+   * @param {Object} peaks - The peaks instance (for options)
+   * @returns {number} The calculated height
+   */
+  SourceGroup.getHeights = function(source, peaks) {
+    var unwrappedHeight = source.binaryHeight && source.previewHeight ?
+                          source.binaryHeight + source.previewHeight :
+                          peaks.options.lineHeight;
+    var wrappedHeight = peaks.options.wrappedLineHeight;
+    var height = source.wrapped ? wrappedHeight : unwrappedHeight;
+
+    return {
+      unwrapped: unwrappedHeight,
+      wrapped: wrappedHeight,
+      current: height
+    };
+  };
+
+  return SourceGroup;
+});