@checksub_team/peaks_timeline 1.16.0-alpha.1 → 1.16.0

package/src/lines.js

@@ -22,15 +22,12 @@ define([
     this._peaks = peaks;
     this._view = view;
     this._layer = layer;
+    this._linesBySourceId = {};
     this._linesByPosition = {};
     this._autoAddToLayer = false;
     this._areSourceInteractionsAllowed = true;
     this._areSegmentInteractionsAllowed = true;
 
-    this._automaticallyCreatedLineId = null;
-    this._automaticLineCreationPosition = null;
-    this._automaticLineCreationTimeout = null;
-
     this._segmentsGroups = {};
     this._segmentsGroupToLine = {};
 
@@ -46,9 +43,6 @@ define([
     this._peaks.on('line.add', this._onLineAdd.bind(this));
     this._peaks.on('line.remove', this._onLineRemove.bind(this));
 
-    this._peaks.on('sources.show', this._onSourcesWrappingChanged.bind(this));
-    this._peaks.on('sources.hide', this._onSourcesWrappingChanged.bind(this));
-
     this._peaks.on('segment.updated', this._onSegmentsUpdate.bind(this));
     this._peaks.on('segments.add', this._onSegmentsAdd.bind(this));
     this._peaks.on('segments.remove', this._onSegmentsRemove.bind(this));
@@ -111,16 +105,10 @@ define([
   };
 
   Lines.prototype._onLineRemove = function(position) {
-    this.removeLine(position);
-    this._updateLinesPosition(position);
-  };
+    var oldLine = this.removeLine(position);
+    var lineNewY = oldLine.getY();
 
-  Lines.prototype._onSourcesWrappingChanged = function(sources) {
-    sources.forEach(function(source) {
-      if (this._linesByPosition[source.position]) {
-        this._linesByPosition[source.position].updateLineHeight(source, 'wrappingChanged');
-      }
-    }.bind(this));
+    this._updateLinesPosition(position, lineNewY);
   };
 
   Lines.prototype.changeLineHeight = function(from, to) {
@@ -133,14 +121,15 @@ define([
     }
   };
 
-  Lines.prototype.addSourceGroup = function(source, sourceGroup, position) {
+  Lines.prototype.addSourceGroup = function(sourceGroup, position) {
     if (!this._linesByPosition[position] || this._linesByPosition[position].isSegmentsLine()) {
       this._createLine(position);
       this._setInteractions(position);
     }
 
-    source.position = position;
-    this._linesByPosition[position].addSourceGroup(source, sourceGroup);
+    sourceGroup.getSource().position = position;
+    this._linesByPosition[position].addSourceGroup(sourceGroup);
+    this._linesBySourceId[sourceGroup.getSource().id] = this._linesByPosition[position];
   };
 
   Lines.prototype.addSegments = function(lineId, position) {
@@ -157,13 +146,10 @@ define([
   };
 
   Lines.prototype.removeSourceGroup = function(source, isPermanent) {
-    if (!this._linesByPosition[source.position]) {
-      return null;
-    }
-
     var sourceGroup = this._linesByPosition[source.position].removeSourceGroup(source, isPermanent);
 
     if (isPermanent) {
+      delete this._linesBySourceId[source.id];
       this._updateLinesPosition(source.position);
     }
 
@@ -172,22 +158,18 @@ define([
 
   Lines.prototype.removeLine = function(pos) {
     var oldLine = this._linesByPosition[pos];
-    var lineId = oldLine.getId();
 
-    if (this._automaticallyCreatedLineId === lineId) {
-      this._automaticallyCreatedLineId = null;
-    }
     oldLine.destroy();
 
     delete this._linesByPosition[pos];
 
-    this._lineIndicator.removeIndicator(lineId, false);
+    this._lineIndicator.removeIndicator(oldLine.getId(), false);
 
     return oldLine;
   };
 
   Lines.prototype.isLineVisible = function(position) {
-    return this._linesByPosition[position] ? this._linesByPosition[position].isVisible() : false;
+    return this._linesByPosition[position].isVisible();
   };
 
   Lines.prototype.getVisibleLines = function() {
@@ -225,22 +207,16 @@ define([
     this._updateLinesPosition(position);
   };
 
-  Lines.prototype._updateLinesPosition = function(position) {
+  Lines.prototype._updateLinesPosition = function(position, forceNewY) {
     var line = this._linesByPosition[position];
     var dy = null;
     var newY;
 
-    if (line) {
-      newY = line.getY() + line.lineHeight() + this._peaks.options.interline;
+    if (forceNewY) {
+      newY = forceNewY;
     }
     else {
-      var previousLine;
-
-      while ((previousLine === undefined || previousLine === null) && position > 0) {
-        previousLine = this._linesByPosition[--position];
-      }
-
-      newY = previousLine ? previousLine.getY() + previousLine.lineHeight() + this._peaks.options.interline : 0;
+      newY = line.getY() + line.lineHeight() + this._peaks.options.interline;
     }
 
     for (var pos in this._linesByPosition) {
@@ -259,7 +235,8 @@ define([
 
     this._lineIndicator.updateIndicators();
     this._lineIndicator.draw();
-    this._view.refresh();
+
+    this._view.drawSourcesLayer();
   };
 
   Lines.prototype.setOffsetY = function(frameOffset) {
@@ -305,112 +282,25 @@ define([
     return length;
   };
 
-  Lines.prototype.stopAutomaticLineCreation = function() {
-    if (this._automaticLineCreationTimeout) {
-      clearTimeout(this._automaticLineCreationTimeout);
-    }
-    this._automaticLineCreationTimeout = null;
-    this._automaticLineCreationPosition = null;
-    this._automaticallyCreatedLineId = null;
-  };
-
-  Lines.prototype.manageAutomaticLineCreation = function(newLinePosition, initialPosition, sources) {
-    if (this._automaticallyCreatedLineId !== null) {
-      return;
-    }
-    else if (
-      this._automaticLineCreationPosition !== null
-      && this._automaticLineCreationPosition !== newLinePosition
-    ) {
-      this.stopAutomaticLineCreation();
-    }
-
-    if (this._automaticLineCreationTimeout) {
-      return;
-    }
-
-    this._automaticLineCreationPosition = newLinePosition;
-    this._automaticLineCreationTimeout = setTimeout(function() {
-      this._automaticLineCreationTimeout = null;
-
-      var currentLine = this._linesByPosition[initialPosition];
-
-      if (currentLine.countRemainingElements() === sources.length) {
-        this.stopAutomaticLineCreation();
-        return;
-      }
-
-      this._automaticallyCreatedLineId = this._createLine(newLinePosition);
-      this._setInteractions(newLinePosition);
-      this.moveSourcesToPosition(sources, currentLine.getPosition(), newLinePosition);
-    }.bind(this), this._peaks.options.automaticLineCreationDelay);
-  };
-
-  Lines.prototype.manageVerticalPosition = function(sources, startTime, endTime, mouseX, mouseY) {
-    if (mouseX === null || mouseX === undefined) {
-      return;
-    }
-
-    const position = sources[0].position;
-    const linePos = this.getLinesUnderY(mouseY);
+  Lines.prototype.manageVerticalPosition = function(source, newY) {
+    if (newY !== null && newY !== undefined) {
+      var pos = this.getLineOnPosition(newY);
 
-    if (linePos[0] !== linePos[1]) {
-      this.manageAutomaticLineCreation(linePos[0] + 1, position, sources);
-    }
-    else {
-      this.stopAutomaticLineCreation();
-
-      if (
-        mouseX !== null && mouseX !== undefined
-        && linePos[0] !== position
-        && !this._linesByPosition[linePos[0]].isSegmentsLine()
-      ) {
-        var mouseTime = this._view.pixelsToTime(mouseX + this._view.getFrameOffset());
-        var sourceDuration = Utils.roundTime(endTime - startTime);
-
-        if (this._hasSpaceForSourceAt(linePos[0], mouseTime, sourceDuration)) {
-          this.moveSourcesToPosition(sources, position, linePos[0]);
-        }
+      if (pos[0] === pos[1]
+        && pos[0] !== source.position
+        && !this._linesByPosition[pos[0]].isSegmentsLine()) {
+        this.moveSourceToPosition(source, pos[0]);
       }
     }
   };
 
-  Lines.prototype._hasSpaceForSourceAt = function(linePosition, mouseTime, sourceDuration) {
-    var line = this._linesByPosition[linePosition];
-
-    if (!line || line.isSegmentsLine()) {
-      return false;
-    }
-
-    var sourcesAround = line.getSourcesAround(mouseTime);
-
-    if (sourcesAround.overlapping) {
-      return false;
-    }
-    else if (!sourcesAround.right) {
-      return true;
-    }
-    else {
-      var leftLimit = sourcesAround.left ? sourcesAround.left.endTime : 0;
-      var rightLimit = sourcesAround.right.startTime;
-
-      return sourceDuration <= Utils.roundTime(rightLimit - leftLimit);
-    }
-  };
-
   Lines.prototype.getLineByPosition = function(pos) {
     return this._linesByPosition[pos];
   };
 
-  Lines.prototype.getLastPosition = function() {
-    var keys = Object.keys(this._linesByPosition);
-
-    return keys.pop();
-  };
-
-  Lines.prototype.getLinesUnderY = function(y) {
+  Lines.prototype.getLineOnPosition = function(y) {
     var height;
-    var pos = [-1, this.getLastPosition() + 1];
+    var pos = [-1, Number.MAX_VALUE];
 
     for (var position in this._linesByPosition) {
       if (Utils.objectHasProperty(this._linesByPosition, position)) {
@@ -429,18 +319,16 @@ define([
     return pos;
   };
 
-  Lines.prototype.moveSourcesToPosition = function(sources, initialPosition, targetPosition) {
-    sources.forEach(function(source) {
-      var sourceGroup = this._linesByPosition[initialPosition].removeSourceGroup(source, true);
+  Lines.prototype.moveSourceToPosition = function(source, pos) {
+    var sourceGroup = this._linesByPosition[source.position].removeSourceGroup(source, true);
 
-      if (sourceGroup) {
-        sourceGroup.moveTo(this._linesByPosition[targetPosition].getKonvaGroup());
-      }
+    delete this._linesBySourceId[source.id];
+
+    sourceGroup.moveTo(this._linesByPosition[pos].getKonvaGroup());
 
-      this.addSourceGroup(source, sourceGroup, targetPosition);
-    }.bind(this));
+    this._updateLinesPosition(source.position);
 
-    this._updateLinesPosition(initialPosition);
+    this.addSourceGroup(sourceGroup, pos);
   };
 
   Lines.prototype._getNextLineId = function() {
@@ -460,17 +348,9 @@ define([
           y += this._linesByPosition[pos].lineHeight() + this._peaks.options.interline;
         }
         else {
-          // This code assumes that lines are ordered in ascending order of position
-          // This is the case as the keys are integers
-          if (Utils.objectHasProperty(this._linesByPosition, position)) {
-            var newPosition = currentPos + 1;
-
-            this._linesByPosition[currentPos].updatePosition(newPosition);
-            newLinesByPosition[newPosition] = this._linesByPosition[currentPos];
-
-            if (!this._linesByPosition[newPosition]) {
-              break;
-            }
+          if (this._linesByPosition[position]) {
+            this._linesByPosition[currentPos].updatePosition(currentPos + 1);
+            newLinesByPosition[currentPos + 1] = this._linesByPosition[currentPos];
           }
         }
       }
@@ -486,8 +366,6 @@ define([
 
     newLinesByPosition[position] = line;
     this._linesByPosition = newLinesByPosition;
-
-    return line.getId();
   };
 
   Lines.prototype.updateSegments = function(frameStartTime, frameEndTime) {
@@ -498,13 +376,12 @@ define([
     }
   };
 
-  Lines.prototype.manageCollision = function(sources, newStartTime, newEndTime) {
-    return this._linesByPosition[sources[0].position].manageCollision(sources, newStartTime, newEndTime);
+  Lines.prototype.manageCollision = function(source, newTimes) {
+    return this._linesBySourceId[source.id].manageCollision(source, newTimes);
   };
 
-  Lines.prototype.manageOrder = function(sources, startTime, endTime) {
-    // Assuming all ordered elements have the same position
-    return this._linesByPosition[sources[0].position].manageOrder(sources, startTime, endTime);
+  Lines.prototype.manageSourceOrder = function(source, newTimes) {
+    return this._linesBySourceId[source.id].manageSourceOrder(source, newTimes);
   };
 
   Lines.prototype._setInteractions = function(position) {

package/src/main.js

@@ -409,13 +409,7 @@ define([
        * Indicates whether or not sources can be dragged
        * from one line to another
        */
-      canMoveSourcesBetweenLines: true,
-
-      /**
-       * Delay in milliseconds before a new line is created
-       * when dragging a source between 2 lines.
-       */
-      automaticLineCreationDelay: 100
+      canMoveSourcesBetweenLines: true
     };
 
     /**

package/src/segments-group.js

@@ -72,10 +72,6 @@ define([
     return Object.keys(this._segments).length === 0;
   };
 
-  SegmentsGroup.prototype.countRemainingElements = function() {
-    return Object.keys(this._segments).length;
-  };
-
   /**
    * Adds the group to the given {Konva.Group}.
    *

package/src/source-group.js

@@ -50,12 +50,12 @@ define([
     this._roundedX = Math.round(this._x);
     this._width = this._view.timeToPixels(source.endTime - source.startTime);
     this._roundedWidth = Math.round(this._width);
-    var heights = SourceGroup.getHeights(source, peaks);
-
-    this._unwrappedHeight = heights.unwrapped;
-    this._wrappedHeight = heights.wrapped;
-    this._height = heights.current;
+    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;
@@ -81,6 +81,7 @@ define([
 
     this._cursor = null;
     this._group.on('mouseenter', function() {
+      self._hovered = true;
       self._view.setHoveredElement(self);
       if (!self._source.loading) {
         self._showButtons();
@@ -88,6 +89,7 @@ define([
     });
 
     this._group.on('mouseleave', function() {
+      self._hovered = false;
       self._view.setHoveredElement(null);
       self._hideButtons();
     });
@@ -174,8 +176,8 @@ define([
 
     this._view.updateWithAutoScroll(
       function() {
-        if (this._layer.manageSourceMovements(
-          [this._source],
+        if (this._layer.updateSource(
+          this._source,
           leftHandle ? start + diff + timeOffsetDiff : null,
           leftHandle ? null : end + diff + timeOffsetDiff
         )) {
@@ -424,13 +426,25 @@ define([
     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, this._source.backgroundColor);
+          gradient.addColorStop(rightStopPosition, backgroundColor);
           gradient.addColorStop(1, this._source.warningColor);
         }
 
@@ -438,14 +452,14 @@ define([
           var leftStopPosition = Math.min(this._source.warningWidth / this._roundedWidth, 0.5);
 
           gradient.addColorStop(0, this._source.warningColor);
-          gradient.addColorStop(leftStopPosition, this._source.backgroundColor);
+          gradient.addColorStop(leftStopPosition, backgroundColor);
         }
 
         ctx.fillStyle = gradient;
         ctx.fill();
       }
       else {
-        ctx.fillStyle = this._source.backgroundColor;
+        ctx.fillStyle = backgroundColor;
         ctx.fill();
       }
     }
@@ -882,7 +896,7 @@ define([
     this._selected = this._source.selected;
     if (this._border) {
       if (this._selected) {
-        this._border.fill(this._source.selectedColor);
+        this._border.fill(this._source.selectedBorderColor);
         this._borderWidth = this._peaks.options.sourceSelectedBorderWidth;
       }
       else {
@@ -899,7 +913,7 @@ define([
 
         if (unwrap_background) {
           if (this._selected) {
-            unwrap_background.stroke(this._source.selectedColor);
+            unwrap_background.stroke(this._source.selectedBorderColor);
             unwrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
           }
           else {
@@ -916,7 +930,7 @@ define([
 
         if (wrap_background) {
           if (this._selected) {
-            wrap_background.stroke(this._source.selectedColor);
+            wrap_background.stroke(this._source.selectedBorderColor);
             wrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
           }
           else {
@@ -1117,14 +1131,6 @@ define([
     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);
   };
@@ -1625,25 +1631,5 @@ define([
     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;
 });

package/src/source.js

@@ -121,16 +121,34 @@ define([
       );
     }
 
+    if (Utils.isNullOrUndefined(options.selectedBackgroundColor)) {
+      options.selectedBackgroundColor = options.backgroundColor;
+    }
+    else if (!Utils.isValidColor(options.selectedBackgroundColor)) {
+      throw new TypeError(
+        'peaks.sources.' + context + ': selectedBackgroundColor should be a valid CSS color'
+      );
+    }
+
+    if (Utils.isNullOrUndefined(options.hoverBackgroundColor)) {
+      options.hoverBackgroundColor = Utils.shadeColor(options.backgroundColor, 30);
+    }
+    else if (!Utils.isValidColor(options.hoverBackgroundColor)) {
+      throw new TypeError(
+        'peaks.sources.' + context + ': hoverBackgroundColor should be a valid CSS color'
+      );
+    }
+
     if (!Utils.isValidColor(options.borderColor)) {
       options.borderColor = options.color;
     }
 
-    if (Utils.isNullOrUndefined(options.selectedColor)) {
-      options.selectedColor = null;
+    if (Utils.isNullOrUndefined(options.selectedBorderColor)) {
+      options.selectedBorderColor = Utils.shadeColor(options.borderColor, 30);
     }
-    else if (!Utils.isValidColor(options.selectedColor)) {
+    else if (!Utils.isValidColor(options.selectedBorderColor)) {
       throw new TypeError(
-        'peaks.sources.' + context + ': selectedColor should be a valid CSS color'
+        'peaks.sources.' + context + ': selectedBorderColor should be a valid CSS color'
       );
     }
 
@@ -377,7 +395,7 @@ define([
    * @param {String} color Primary color of the source representation.
    * @param {String} backgroundColor Background color of the source.
    * @param {String} borderColor Border color of the source.
-   * @param {String} selectedColor Color when the source is selected.
+   * @param {String} selectedBorderColor Color when the source is selected.
    * @param {String} warningColor Color used for warning states.
    * @param {String} volumeSliderColor Color of the volume slider.
    * @param {Number} volumeSliderWidth Width of the volume slider.
@@ -412,11 +430,11 @@ define([
 
   function Source(peaks, id, originId, elementId, title, titleAlignments, url, previewUrl, binaryUrl, kind,
     subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor,
-    borderColor, selectedColor, warningColor, warningWidth, volumeSliderColor, volumeSliderWidth,
-    volumeSliderDraggingWidth, textFont, textFontSize, textColor, textBackgroundColor, textPosition,
-    textAutoScroll, borderWidth, borderRadius, wrapped, position, draggable, orderable, resizable,
-    cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers, buttons, markerColor,
-    markerWidth, volume, volumeRange, loading, ...customParams) {
+    hoverBackgroundColor, selectedBackgroundColor, borderColor, selectedBorderColor, warningColor, warningWidth,
+    volumeSliderColor, volumeSliderWidth, volumeSliderDraggingWidth, textFont, textFontSize, textColor,
+    textBackgroundColor, textPosition, textAutoScroll, borderWidth, borderRadius, wrapped, position, draggable,
+    orderable, resizable, cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers,
+    buttons, markerColor, markerWidth, volume, volumeRange, loading, ...customParams) {
     var opts = {
       title: title,
       titleAlignments: titleAlignments,
@@ -432,8 +450,10 @@ define([
       mediaEndTime: mediaEndTime,
       color: color,
       backgroundColor: backgroundColor,
+      hoverBackgroundColor: hoverBackgroundColor,
+      selectedBackgroundColor: selectedBackgroundColor,
       borderColor: borderColor,
-      selectedColor: selectedColor,
+      selectedBorderColor: selectedBorderColor,
       warningColor: warningColor,
       warningWidth: warningWidth,
       textFont: textFont,
@@ -487,8 +507,10 @@ define([
     this._mediaEndTime = opts.mediaEndTime;
     this._color = opts.color;
     this._backgroundColor = opts.backgroundColor;
+    this._hoverBackgroundColor = opts.hoverBackgroundColor;
+    this._selectedBackgroundColor = opts.selectedBackgroundColor;
     this._borderColor = opts.borderColor;
-    this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
+    this._selectedBorderColor = opts.selectedBorderColor;
     this._warningColor = opts.warningColor;
     this._warningWidth = opts.warningWidth;
     this._volumeSliderColor = opts.volumeSliderColor;
@@ -664,6 +686,26 @@ define([
         this._backgroundColor = backgroundColor;
       }
     },
+    hoverBackgroundColor: {
+      enumerable: true,
+      get: function() {
+        return this._hoverBackgroundColor;
+      },
+
+      set: function(hoverBackgroundColor) {
+        this._hoverBackgroundColor = hoverBackgroundColor;
+      }
+    },
+    selectedBackgroundColor: {
+      enumerable: true,
+      get: function() {
+        return this._selectedBackgroundColor;
+      },
+
+      set: function(selectedBackgroundColor) {
+        this._selectedBackgroundColor = selectedBackgroundColor;
+      }
+    },
     borderColor: {
       enumerable: true,
       get: function() {
@@ -674,14 +716,14 @@ define([
         this._borderColor = borderColor;
       }
     },
-    selectedColor: {
+    selectedBorderColor: {
       enumerable: true,
       get: function() {
-        return this._selectedColor;
+        return this._selectedBorderColor;
       },
 
-      set: function(selectedColor) {
-        this._selectedColor = selectedColor;
+      set: function(selectedBorderColor) {
+        this._selectedBorderColor = selectedBorderColor;
       }
     },
     warningColor: {
@@ -1089,8 +1131,10 @@ define([
       mediaEndTime: this.mediaEndTime,
       color: this.color,
       backgroundColor: this.backgroundColor,
+      hoverBackgroundColor: this.hoverBackgroundColor,
+      selectedBackgroundColor: this.selectedBackgroundColor,
       borderColor: this.borderColor,
-      selectedColor: this.selectedColor,
+      selectedBorderColor: this.selectedBorderColor,
       warningColor: this.warningColor,
       warningWidth: this.warningWidth,
       volumeSliderColor: this.volumeSliderColor,
@@ -1142,8 +1186,10 @@ define([
     this._mediaEndTime = opts.mediaEndTime;
     this._color = opts.color;
     this._backgroundColor = opts.backgroundColor;
+    this._hoverBackgroundColor = opts.hoverBackgroundColor;
+    this._selectedBackgroundColor = opts.selectedBackgroundColor;
     this._borderColor = opts.borderColor;
-    this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
+    this._selectedBorderColor = opts.selectedBorderColor;
     this._warningColor = opts.warningColor;
     this._warningWidth = opts.warningWidth;
     this._volumeSliderColor = opts.volumeSliderColor;