@checksub_team/peaks_timeline 1.4.34 → 1.4.37

package/src/source-group.js

@@ -1,987 +1,987 @@
-/**
- * @file
- *
- * Defines the {@link SourceGroup} class.
- *
- * @module source-group
- */
-
-define([
-  './waveform-builder',
-  './waveform-shape',
-  './utils',
-  'konva'
-  ], function(
-    WaveformBuilder,
-    WaveformShape,
-    Utils,
-    Konva) {
-  'use strict';
-
-  var SPACING_BETWEEN_PREVIEW_AND_BORDER_RATIO = 0.15;
-  var SPACING_BETWEEN_PREVIEWS = 1.5;
-  var HANDLE_WIDTH = 8;
-  var CORNER_RADIUS = 8;
-  var SELECTED_BORDER_WIDTH = 6;
-
-  /**
-   * 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;
-
-    var self = this;
-
-    this._x = this._view.timeToPixels(source.startTime);
-    this._width = this._view.timeToPixels(source.endTime - source.startTime);
-    this._unwrappedHeight = source.binaryHeight && source.previewHeight ?
-                            source.binaryHeight + source.previewHeight :
-                            this._peaks.options.lineHeight;
-    this._wrappedHeight = this._peaks.options.wrappedLineHeight;
-
-    this._previewList = [];
-
-    this._group = new Konva.Group({
-      x: this._x,
-      draggable: this._source.draggable,
-      dragBoundFunc: function() {
-        return {
-          x: this.absolutePosition().x,
-          y: this.absolutePosition().y
-        };
-      },
-      clipFunc: function(ctx) {
-        self.drawSourceShape(ctx);
-      }
-    });
-
-    this._group.on('dragstart', this._onSourceGroupDragStart.bind(this));
-    this._group.on('mouseover', function() {
-      self._view.setHoveredElement(self);
-      if (self._view.getCurrentMode() === 'cut') {
-        self.toggleDragging(false);
-        self.toggleResizing(false);
-      }
-    });
-    this._group.on('mouseout', function() {
-      self._view.setHoveredElement(null);
-      if (self._view.getCurrentMode() === 'cut') {
-        self.toggleDragging(true);
-        self.toggleResizing(true);
-      }
-    });
-    this._group.on('dragend', this._onSourceGroupDragEnd.bind(this));
-
-    this._addWrap(true);
-    this._addUnwrap(true);
-    this._addHandles(true);
-
-    this.setWrapping(source.wrapped);
-  }
-
-  // SourceGroup.prototype.rescale = function() {
-  //   this.update();
-
-  //   this._previewList.forEach(function(preview) {
-  //     if (preview.loaded) {
-  //       switch (preview.type) {
-  //         case 'audio':
-  //           preview.group.getChildren()[0].rescale(true);
-  //           break;
-  //         case 'video':
-  //         case 'image':
-  //         default:
-  //           // No resampling
-  //       }
-  //     }
-  //   });
-  // };
-
-  SourceGroup.prototype._onSourceGroupDragStart = function() {
-    this._dragged = true;
-    this._mouseDownX = this._view.getPointerPosition().x;
-    this._initialStartTime = this._source.startTime;
-    this._initialStartPixel = this._view.timeToPixels(this._initialStartTime);
-    this._initialEndTime = this._source.endTime;
-    this._initialEndPixel = this._view.timeToPixels(this._initialEndTime);
-    this._initialFrameOffset = this._view.getFrameOffset();
-  };
-
-  SourceGroup.prototype._onSourceGroupDragEnd = function() {
-    this._dragged = false;
-    this._view.updateTimelineLength();
-    this._peaks.emit('sources.updated');
-  };
-
-  SourceGroup.prototype._onSourceGroupDrag = function(draggedElement) {
-    var self = this;
-
-    var pos = this._view.updateWithAutoScroll(
-      draggedElement,
-      function() {
-        var mousePos = Math.min(
-          self._view.getWidth() - self._peaks.options.autoScrollThreshold * self._view.getWidth(),
-          Math.max(
-            0,
-            self._view.getPointerPosition().x
-          )
-        );
-
-        var diff = mousePos - self._mouseDownX;
-
-        self._layer.updateSource(
-          self._source,
-          self._initialStartPixel + diff + (self._view.getFrameOffset() - self._initialFrameOffset),
-          self._initialEndPixel + diff + (self._view.getFrameOffset() - self._initialFrameOffset),
-          self._view.getPointerPosition().y
-        );
-
-        self._view.setTimelineLength(
-          self._view.timeToPixels(self._source.endTime) + self._view.getWidth()
-        );
-      }
-    );
-
-    return {
-      x: pos.x,
-      y: pos.y
-    };
-  };
-
-  SourceGroup.prototype._onSourceGroupHandleDrag = function(draggedElement, dragPos, leftHandle) {
-    var self = this;
-
-    var pos = this._view.updateWithAutoScroll(
-      draggedElement,
-      function() {
-        self._layer.updateSource(
-          self._source,
-          leftHandle ? dragPos.x + self._view.getFrameOffset() : null,
-          leftHandle ? null : dragPos.x + draggedElement.width() + self._view.getFrameOffset()
-        );
-      }
-    );
-
-    this._view.setTimelineLength(
-      this._view.timeToPixels(this._source.endTime) + this._view.getWidth()
-    );
-
-    return {
-      x: pos.x,
-      y: pos.y
-    };
-  };
-
-  SourceGroup.prototype.update = function() {
-    var startPixel = this._view.timeToPixels(this._source.startTime);
-    var endPixel   = this._view.timeToPixels(this._source.endTime);
-    var frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
-
-    this._group.x(startPixel - frameOffset);
-
-    this._x = startPixel;
-
-    var newWidth = endPixel - startPixel;
-
-    if (newWidth !== this._width) {
-      this._width = newWidth;
-
-      // update handles
-      this._rightHandle.x(newWidth - HANDLE_WIDTH);
-
-      // update unwrap
-      this.updatePreviews();
-
-      // update wrap
-      var title = this._wrap.getChildren(function(node) {
-        return node.getClassName() === 'Text';
-      });
-
-      if (title) {
-        title.width(newWidth - 10);
-      }
-    }
-  };
-
-  SourceGroup.prototype.setWrapping = function(wrap) {
-    if (wrap) {
-      this.wrap();
-      this._height = this._wrappedHeight;
-    }
-    else {
-      this.unwrap();
-      this._height = this._unwrappedHeight;
-    }
-
-    this.setHandlesWrapping(wrap);
-  };
-
-  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._addHandles = function(forceCreate) {
-    var self = this;
-
-    if (!this._leftHandle || forceCreate) {
-      this._leftHandle = new Konva.Rect({
-        x: 0,
-        width: HANDLE_WIDTH,
-        height: this._unwrappedHeight,
-        visible: true,
-        draggable: this._source.resizable,
-        dragBoundFunc: function(pos) {
-          return self._onSourceGroupHandleDrag(this, pos, true);
-        }
-      });
-
-      if (this._source.resizable) {
-        this._leftHandle.on('dragend', function() {
-          if (this._scrollingInterval) {
-            clearInterval(this._scrollingInterval);
-            this._scrollingInterval = null;
-          }
-        });
-
-        this._leftHandle.on('mouseover', function() {
-          self._view.setCursor('ew-resize');
-        });
-
-        this._leftHandle.on('mouseout', function() {
-          self._view.setCursor('default');
-        });
-      }
-    }
-
-    if (!this._rightHandle || forceCreate) {
-      this._rightHandle = new Konva.Rect({
-        x: this._width - HANDLE_WIDTH,
-        width: HANDLE_WIDTH,
-        height: this._unwrappedHeight,
-        visible: true,
-        draggable: this._source.resizable,
-        dragBoundFunc: function(pos) {
-          return self._onSourceGroupHandleDrag(this, pos, false);
-        }
-      });
-
-      if (this._source.resizable) {
-        this._rightHandle.on('dragend', function() {
-          if (this._scrollingInterval) {
-            clearInterval(this._scrollingInterval);
-            this._scrollingInterval = null;
-          }
-        });
-
-        this._rightHandle.on('mouseover', function() {
-          self._view.setCursor('ew-resize');
-        });
-
-        this._rightHandle.on('mouseout', function() {
-          self._view.setCursor('default');
-        });
-      }
-    }
-
-    this._group.add(this._leftHandle);
-    this._group.add(this._rightHandle);
-  };
-
-  SourceGroup.prototype._addUnwrap = function(forceCreate) {
-    if (!this._unwrap || forceCreate) {
-      this._unwrap = this._createUnwrap();
-      this._unwrap.visible(false);
-    }
-
-    this._group.add(this._unwrap);
-  };
-
-  SourceGroup.prototype.toggleDragging = function(bool) {
-    var background;
-
-    if (this._wrap) {
-      background = this._wrap.getChildren(function(node) {
-        return node.getClassName() === 'Shape';
-      });
-
-      if (background) {
-        background.draggable(bool);
-      }
-    }
-    if (this._unwrap) {
-      background = this._unwrap.getChildren(function(node) {
-        return node.getClassName() === 'Shape';
-      });
-
-      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) {
-    var radius = 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 - radius
-    );
-    var width = Math.min(
-      this._width - x,
-      this._view.getOriginalWidth() + radius - Math.max(
-        0,
-        this._x - this._view.getFrameOffset()
-      )
-    );
-    var xWidth = x + width;
-
-    ctx.beginPath();
-    ctx.moveTo(x + radius, 0);
-    ctx.lineTo(xWidth - radius, 0);
-    ctx.quadraticCurveTo(xWidth, 0, xWidth, radius);
-    ctx.lineTo(xWidth, this._height - radius);
-    ctx.quadraticCurveTo(xWidth, this._height, xWidth - radius, this._height);
-    ctx.lineTo(x + radius, this._height);
-    ctx.quadraticCurveTo(x, this._height, x, this._height - radius);
-    ctx.lineTo(x, radius);
-    ctx.quadraticCurveTo(x, 0, x + radius, 0);
-    ctx.closePath();
-
-    if (shape) {
-      ctx.fillStrokeShape(shape);
-    }
-  };
-
-  SourceGroup.prototype._createUnwrap = function() {
-    var unwrap = new Konva.Group({
-      width: this._width,
-      height: this._unwrappedHeight,
-      draggable: this._source.draggable,
-      dragBoundFunc: function() {
-        return {
-          x: this.absolutePosition().x,
-          y: this.absolutePosition().y
-        };
-      }
-    });
-
-    var self = this;
-
-    var background = new Konva.Shape({
-      fill: this._source.color,
-      stroke: this._source.borderColor,
-      strokeWidth: this._source.borderWidth,
-      sceneFunc: function(ctx, shape) {
-        self.drawSourceShape(ctx, shape);
-      },
-      draggable: this._source.draggable,
-      dragBoundFunc: function() {
-        return self._onSourceGroupDrag(this);
-      }
-    });
-
-    if (this._source.draggable) {
-      background.on('mouseenter', function() {
-        self._view.setCursor('pointer');
-      });
-      background.on('mouseout', function() {
-        self._view.setCursor('default');
-      });
-
-      background.on('dragstart', function() {
-        this._scrollInterval = null;
-      });
-
-      background.on('dragend', function() {
-        if (this._scrollingInterval) {
-          clearInterval(this._scrollingInterval);
-          this._scrollingInterval = null;
-        }
-      });
-    }
-
-    unwrap.add(background);
-
-    return unwrap;
-  };
-
-  SourceGroup.prototype._addWrap = function(forceCreate) {
-    if (!this._wrap || forceCreate) {
-      this._wrap = this._createWrap();
-      this._wrap.visible(false);
-    }
-
-    this._group.add(this._wrap);
-  };
-
-  SourceGroup.prototype._createWrap = function() {
-    var wrap = new Konva.Group({
-      width: this._width,
-      height: this._wrappedHeight,
-      draggable: this._source.draggable,
-      dragBoundFunc: function() {
-        return {
-          x: this.absolutePosition().x,
-          y: this.absolutePosition().y
-        };
-      }
-    });
-
-    var self = this;
-
-    var background = new Konva.Shape({
-      fill: this._source.color,
-      stroke: this._source.borderColor,
-      strokeWidth: this._source.borderWidth,
-      sceneFunc: function(ctx, shape) {
-        self.drawSourceShape(ctx, shape);
-      },
-      draggable: this._source.draggable,
-      dragBoundFunc: function() {
-        return self._onSourceGroupDrag(this);
-      }
-    });
-
-    if (this._source.draggable) {
-      background.on('mouseenter', function() {
-        self._view.setCursor('pointer');
-      });
-      background.on('mouseout', function() {
-        self._view.setCursor('default');
-      });
-
-      background.on('dragstart', function() {
-        this._scrollInterval = null;
-      });
-
-      background.on('dragend', function() {
-        if (this._scrollingInterval) {
-          clearInterval(this._scrollingInterval);
-          this._scrollingInterval = null;
-        }
-      });
-    }
-
-    var title = new Konva.Text({
-      x: 5,
-      width: this._width - 10,
-      height: this._wrappedHeight,
-      text: Utils.removeLineBreaks(this._source.title),
-      textAlign: 'left',
-      verticalAlign: 'middle',
-      fontSize: 14,
-      fontFamily: 'Open Sans',
-      fill: this._source.textColor,
-      wrap: 'none',
-      ellipsis: true,
-      listening: false
-    });
-
-    wrap.add(background);
-    wrap.add(title);
-
-    return wrap;
-  };
-
-  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.add = function(element) {
-    this._group.add(element);
-  };
-
-  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,
-        color: this._peaks.options.zoomWaveformColor,
-        source: this._source,
-        height: preview.group.height(),
-        url: preview.url
-      });
-
-      preview.group.add(waveform);
-      this._unwrap.add(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(isSelected) {
-    // update unwrap
-    var background = this._unwrap.getChildren(function(node) {
-      return node.getClassName() === 'Shape';
-    });
-
-    if (background) {
-      if (isSelected) {
-        background.stroke(this._source.selectedColor);
-        background.strokeWidth(SELECTED_BORDER_WIDTH);
-      }
-      else {
-        background.stroke(this._source.borderColor);
-        background.strokeWidth(this._source.borderWidth);
-      }
-    }
-
-    // update wrap
-    background = this._wrap.getChildren(function(node) {
-      return node.getClassName() === 'Shape';
-    });
-
-    if (background) {
-      if (isSelected) {
-        background.stroke(this._source.selectedColor);
-        background.strokeWidth(SELECTED_BORDER_WIDTH);
-      }
-      else {
-        background.stroke(this._source.borderColor);
-        background.strokeWidth(this._source.borderWidth);
-      }
-    }
-
-    this._view.drawSourcesLayer();
-  };
-
-  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._unwrap.add(preview.group);
-
-    if (redraw) {
-      this._group.draw();
-    }
-
-    this._previewList.push(preview);
-  };
-
-  SourceGroup.prototype.isWrapped = function() {
-    return this._source.wrapped;
-  };
-
-  SourceGroup.prototype.getCurrentHeight = function() {
-    return this._height;
-  };
-
-  SourceGroup.prototype.wrap = function(notify) {
-    if (!this._wrap.visible()) {
-      if (this._wrap) {
-        this._wrap.visible(true);
-        if (this._unwrap) {
-          this._unwrap.visible(false);
-        }
-
-        this._source.wrapped = true;
-
-        if (notify) {
-          this._peaks.emit('source.wrappingChanged', this);
-        }
-      }
-    }
-  };
-
-  SourceGroup.prototype.unwrap = function(notify) {
-    if (!this._unwrap.visible()) {
-      if (this._unwrap) {
-        this._unwrap.visible(true);
-        if (this._wrap) {
-          this._wrap.visible(false);
-        }
-
-        this._source.wrapped = false;
-
-        if (notify) {
-          this._peaks.emit('source.wrappingChanged', this);
-        }
-      }
-    }
-  };
-
-  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.isDragged = function() {
-    return this._dragged;
-  };
-
-  SourceGroup.prototype.destroy = function() {
-    this._group.destroy();
-  };
-
-  return SourceGroup;
-});
+/**
+ * @file
+ *
+ * Defines the {@link SourceGroup} class.
+ *
+ * @module source-group
+ */
+
+define([
+  './waveform-builder',
+  './waveform-shape',
+  './utils',
+  'konva'
+  ], function(
+    WaveformBuilder,
+    WaveformShape,
+    Utils,
+    Konva) {
+  'use strict';
+
+  var SPACING_BETWEEN_PREVIEW_AND_BORDER_RATIO = 0.15;
+  var SPACING_BETWEEN_PREVIEWS = 1.5;
+  var HANDLE_WIDTH = 8;
+  var CORNER_RADIUS = 8;
+  var SELECTED_BORDER_WIDTH = 6;
+
+  /**
+   * 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;
+
+    var self = this;
+
+    this._x = this._view.timeToPixels(source.startTime);
+    this._width = this._view.timeToPixels(source.endTime - source.startTime);
+    this._unwrappedHeight = source.binaryHeight && source.previewHeight ?
+                            source.binaryHeight + source.previewHeight :
+                            this._peaks.options.lineHeight;
+    this._wrappedHeight = this._peaks.options.wrappedLineHeight;
+
+    this._previewList = [];
+
+    this._group = new Konva.Group({
+      x: this._x,
+      draggable: this._source.draggable,
+      dragBoundFunc: function() {
+        return {
+          x: this.absolutePosition().x,
+          y: this.absolutePosition().y
+        };
+      },
+      clipFunc: function(ctx) {
+        self.drawSourceShape(ctx);
+      }
+    });
+
+    this._group.on('dragstart', this._onSourceGroupDragStart.bind(this));
+    this._group.on('mouseover', function() {
+      self._view.setHoveredElement(self);
+      if (self._view.getCurrentMode() === 'cut') {
+        self.toggleDragging(false);
+        self.toggleResizing(false);
+      }
+    });
+    this._group.on('mouseout', function() {
+      self._view.setHoveredElement(null);
+      if (self._view.getCurrentMode() === 'cut') {
+        self.toggleDragging(true);
+        self.toggleResizing(true);
+      }
+    });
+    this._group.on('dragend', this._onSourceGroupDragEnd.bind(this));
+
+    this._addWrap(true);
+    this._addUnwrap(true);
+    this._addHandles(true);
+
+    this.setWrapping(source.wrapped);
+  }
+
+  // SourceGroup.prototype.rescale = function() {
+  //   this.update();
+
+  //   this._previewList.forEach(function(preview) {
+  //     if (preview.loaded) {
+  //       switch (preview.type) {
+  //         case 'audio':
+  //           preview.group.getChildren()[0].rescale(true);
+  //           break;
+  //         case 'video':
+  //         case 'image':
+  //         default:
+  //           // No resampling
+  //       }
+  //     }
+  //   });
+  // };
+
+  SourceGroup.prototype._onSourceGroupDragStart = function() {
+    this._dragged = true;
+    this._mouseDownX = this._view.getPointerPosition().x;
+    this._initialStartTime = this._source.startTime;
+    this._initialStartPixel = this._view.timeToPixels(this._initialStartTime);
+    this._initialEndTime = this._source.endTime;
+    this._initialEndPixel = this._view.timeToPixels(this._initialEndTime);
+    this._initialFrameOffset = this._view.getFrameOffset();
+  };
+
+  SourceGroup.prototype._onSourceGroupDragEnd = function() {
+    this._dragged = false;
+    this._view.updateTimelineLength();
+    this._peaks.emit('sources.updated');
+  };
+
+  SourceGroup.prototype._onSourceGroupDrag = function(draggedElement) {
+    var self = this;
+
+    var pos = this._view.updateWithAutoScroll(
+      draggedElement,
+      function() {
+        var mousePos = Math.min(
+          self._view.getWidth() - self._peaks.options.autoScrollThreshold * self._view.getWidth(),
+          Math.max(
+            0,
+            self._view.getPointerPosition().x
+          )
+        );
+
+        var diff = mousePos - self._mouseDownX;
+
+        self._layer.updateSource(
+          self._source,
+          self._initialStartPixel + diff + (self._view.getFrameOffset() - self._initialFrameOffset),
+          self._initialEndPixel + diff + (self._view.getFrameOffset() - self._initialFrameOffset),
+          self._view.getPointerPosition().y
+        );
+
+        self._view.setTimelineLength(
+          self._view.timeToPixels(self._source.endTime) + self._view.getWidth()
+        );
+      }
+    );
+
+    return {
+      x: pos.x,
+      y: pos.y
+    };
+  };
+
+  SourceGroup.prototype._onSourceGroupHandleDrag = function(draggedElement, dragPos, leftHandle) {
+    var self = this;
+
+    var pos = this._view.updateWithAutoScroll(
+      draggedElement,
+      function() {
+        self._layer.updateSource(
+          self._source,
+          leftHandle ? dragPos.x + self._view.getFrameOffset() : null,
+          leftHandle ? null : dragPos.x + draggedElement.width() + self._view.getFrameOffset()
+        );
+      }
+    );
+
+    this._view.setTimelineLength(
+      this._view.timeToPixels(this._source.endTime) + this._view.getWidth()
+    );
+
+    return {
+      x: pos.x,
+      y: pos.y
+    };
+  };
+
+  SourceGroup.prototype.update = function() {
+    var startPixel = this._view.timeToPixels(this._source.startTime);
+    var endPixel   = this._view.timeToPixels(this._source.endTime);
+    var frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
+
+    this._group.x(startPixel - frameOffset);
+
+    this._x = startPixel;
+
+    var newWidth = endPixel - startPixel;
+
+    if (newWidth !== this._width) {
+      this._width = newWidth;
+
+      // update handles
+      this._rightHandle.x(newWidth - HANDLE_WIDTH);
+
+      // update unwrap
+      this.updatePreviews();
+
+      // update wrap
+      var title = this._wrap.getChildren(function(node) {
+        return node.getClassName() === 'Text';
+      });
+
+      if (title) {
+        title.width(newWidth - 10);
+      }
+    }
+  };
+
+  SourceGroup.prototype.setWrapping = function(wrap) {
+    if (wrap) {
+      this.wrap();
+      this._height = this._wrappedHeight;
+    }
+    else {
+      this.unwrap();
+      this._height = this._unwrappedHeight;
+    }
+
+    this.setHandlesWrapping(wrap);
+  };
+
+  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._addHandles = function(forceCreate) {
+    var self = this;
+
+    if (!this._leftHandle || forceCreate) {
+      this._leftHandle = new Konva.Rect({
+        x: 0,
+        width: HANDLE_WIDTH,
+        height: this._unwrappedHeight,
+        visible: true,
+        draggable: this._source.resizable,
+        dragBoundFunc: function(pos) {
+          return self._onSourceGroupHandleDrag(this, pos, true);
+        }
+      });
+
+      if (this._source.resizable) {
+        this._leftHandle.on('dragend', function() {
+          if (this._scrollingInterval) {
+            clearInterval(this._scrollingInterval);
+            this._scrollingInterval = null;
+          }
+        });
+
+        this._leftHandle.on('mouseover', function() {
+          self._view.setCursor('ew-resize');
+        });
+
+        this._leftHandle.on('mouseout', function() {
+          self._view.setCursor('default');
+        });
+      }
+    }
+
+    if (!this._rightHandle || forceCreate) {
+      this._rightHandle = new Konva.Rect({
+        x: this._width - HANDLE_WIDTH,
+        width: HANDLE_WIDTH,
+        height: this._unwrappedHeight,
+        visible: true,
+        draggable: this._source.resizable,
+        dragBoundFunc: function(pos) {
+          return self._onSourceGroupHandleDrag(this, pos, false);
+        }
+      });
+
+      if (this._source.resizable) {
+        this._rightHandle.on('dragend', function() {
+          if (this._scrollingInterval) {
+            clearInterval(this._scrollingInterval);
+            this._scrollingInterval = null;
+          }
+        });
+
+        this._rightHandle.on('mouseover', function() {
+          self._view.setCursor('ew-resize');
+        });
+
+        this._rightHandle.on('mouseout', function() {
+          self._view.setCursor('default');
+        });
+      }
+    }
+
+    this._group.add(this._leftHandle);
+    this._group.add(this._rightHandle);
+  };
+
+  SourceGroup.prototype._addUnwrap = function(forceCreate) {
+    if (!this._unwrap || forceCreate) {
+      this._unwrap = this._createUnwrap();
+      this._unwrap.visible(false);
+    }
+
+    this._group.add(this._unwrap);
+  };
+
+  SourceGroup.prototype.toggleDragging = function(bool) {
+    var background;
+
+    if (this._wrap) {
+      background = this._wrap.getChildren(function(node) {
+        return node.getClassName() === 'Shape';
+      });
+
+      if (background) {
+        background.draggable(bool);
+      }
+    }
+    if (this._unwrap) {
+      background = this._unwrap.getChildren(function(node) {
+        return node.getClassName() === 'Shape';
+      });
+
+      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) {
+    var radius = 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 - radius
+    );
+    var width = Math.min(
+      this._width - x,
+      this._view.getOriginalWidth() + radius - Math.max(
+        0,
+        this._x - this._view.getFrameOffset()
+      )
+    );
+    var xWidth = x + width;
+
+    ctx.beginPath();
+    ctx.moveTo(x + radius, 0);
+    ctx.lineTo(xWidth - radius, 0);
+    ctx.quadraticCurveTo(xWidth, 0, xWidth, radius);
+    ctx.lineTo(xWidth, this._height - radius);
+    ctx.quadraticCurveTo(xWidth, this._height, xWidth - radius, this._height);
+    ctx.lineTo(x + radius, this._height);
+    ctx.quadraticCurveTo(x, this._height, x, this._height - radius);
+    ctx.lineTo(x, radius);
+    ctx.quadraticCurveTo(x, 0, x + radius, 0);
+    ctx.closePath();
+
+    if (shape) {
+      ctx.fillStrokeShape(shape);
+    }
+  };
+
+  SourceGroup.prototype._createUnwrap = function() {
+    var unwrap = new Konva.Group({
+      width: this._width,
+      height: this._unwrappedHeight,
+      draggable: this._source.draggable,
+      dragBoundFunc: function() {
+        return {
+          x: this.absolutePosition().x,
+          y: this.absolutePosition().y
+        };
+      }
+    });
+
+    var self = this;
+
+    var background = new Konva.Shape({
+      fill: this._source.color,
+      stroke: this._source.borderColor,
+      strokeWidth: this._source.borderWidth,
+      sceneFunc: function(ctx, shape) {
+        self.drawSourceShape(ctx, shape);
+      },
+      draggable: this._source.draggable,
+      dragBoundFunc: function() {
+        return self._onSourceGroupDrag(this);
+      }
+    });
+
+    if (this._source.draggable) {
+      background.on('mouseenter', function() {
+        self._view.setCursor('pointer');
+      });
+      background.on('mouseout', function() {
+        self._view.setCursor('default');
+      });
+
+      background.on('dragstart', function() {
+        this._scrollInterval = null;
+      });
+
+      background.on('dragend', function() {
+        if (this._scrollingInterval) {
+          clearInterval(this._scrollingInterval);
+          this._scrollingInterval = null;
+        }
+      });
+    }
+
+    unwrap.add(background);
+
+    return unwrap;
+  };
+
+  SourceGroup.prototype._addWrap = function(forceCreate) {
+    if (!this._wrap || forceCreate) {
+      this._wrap = this._createWrap();
+      this._wrap.visible(false);
+    }
+
+    this._group.add(this._wrap);
+  };
+
+  SourceGroup.prototype._createWrap = function() {
+    var wrap = new Konva.Group({
+      width: this._width,
+      height: this._wrappedHeight,
+      draggable: this._source.draggable,
+      dragBoundFunc: function() {
+        return {
+          x: this.absolutePosition().x,
+          y: this.absolutePosition().y
+        };
+      }
+    });
+
+    var self = this;
+
+    var background = new Konva.Shape({
+      fill: this._source.color,
+      stroke: this._source.borderColor,
+      strokeWidth: this._source.borderWidth,
+      sceneFunc: function(ctx, shape) {
+        self.drawSourceShape(ctx, shape);
+      },
+      draggable: this._source.draggable,
+      dragBoundFunc: function() {
+        return self._onSourceGroupDrag(this);
+      }
+    });
+
+    if (this._source.draggable) {
+      background.on('mouseenter', function() {
+        self._view.setCursor('pointer');
+      });
+      background.on('mouseout', function() {
+        self._view.setCursor('default');
+      });
+
+      background.on('dragstart', function() {
+        this._scrollInterval = null;
+      });
+
+      background.on('dragend', function() {
+        if (this._scrollingInterval) {
+          clearInterval(this._scrollingInterval);
+          this._scrollingInterval = null;
+        }
+      });
+    }
+
+    var title = new Konva.Text({
+      x: 5,
+      width: this._width - 10,
+      height: this._wrappedHeight,
+      text: Utils.removeLineBreaks(this._source.title),
+      textAlign: 'left',
+      verticalAlign: 'middle',
+      fontSize: 14,
+      fontFamily: 'Open Sans',
+      fill: this._source.textColor,
+      wrap: 'none',
+      ellipsis: true,
+      listening: false
+    });
+
+    wrap.add(background);
+    wrap.add(title);
+
+    return wrap;
+  };
+
+  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.add = function(element) {
+    this._group.add(element);
+  };
+
+  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,
+        color: this._peaks.options.zoomWaveformColor,
+        source: this._source,
+        height: preview.group.height(),
+        url: preview.url
+      });
+
+      preview.group.add(waveform);
+      this._unwrap.add(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(isSelected) {
+    // update unwrap
+    var background = this._unwrap.getChildren(function(node) {
+      return node.getClassName() === 'Shape';
+    });
+
+    if (background) {
+      if (isSelected) {
+        background.stroke(this._source.selectedColor);
+        background.strokeWidth(SELECTED_BORDER_WIDTH);
+      }
+      else {
+        background.stroke(this._source.borderColor);
+        background.strokeWidth(this._source.borderWidth);
+      }
+    }
+
+    // update wrap
+    background = this._wrap.getChildren(function(node) {
+      return node.getClassName() === 'Shape';
+    });
+
+    if (background) {
+      if (isSelected) {
+        background.stroke(this._source.selectedColor);
+        background.strokeWidth(SELECTED_BORDER_WIDTH);
+      }
+      else {
+        background.stroke(this._source.borderColor);
+        background.strokeWidth(this._source.borderWidth);
+      }
+    }
+
+    this._view.drawSourcesLayer();
+  };
+
+  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._unwrap.add(preview.group);
+
+    if (redraw) {
+      this._group.draw();
+    }
+
+    this._previewList.push(preview);
+  };
+
+  SourceGroup.prototype.isWrapped = function() {
+    return this._source.wrapped;
+  };
+
+  SourceGroup.prototype.getCurrentHeight = function() {
+    return this._height;
+  };
+
+  SourceGroup.prototype.wrap = function(notify) {
+    if (!this._wrap.visible()) {
+      if (this._wrap) {
+        this._wrap.visible(true);
+        if (this._unwrap) {
+          this._unwrap.visible(false);
+        }
+
+        this._source.wrapped = true;
+
+        if (notify) {
+          this._peaks.emit('source.wrappingChanged', this);
+        }
+      }
+    }
+  };
+
+  SourceGroup.prototype.unwrap = function(notify) {
+    if (!this._unwrap.visible()) {
+      if (this._unwrap) {
+        this._unwrap.visible(true);
+        if (this._wrap) {
+          this._wrap.visible(false);
+        }
+
+        this._source.wrapped = false;
+
+        if (notify) {
+          this._peaks.emit('source.wrappingChanged', this);
+        }
+      }
+    }
+  };
+
+  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.isDragged = function() {
+    return this._dragged;
+  };
+
+  SourceGroup.prototype.destroy = function() {
+    this._group.destroy();
+  };
+
+  return SourceGroup;
+});