@checksub_team/peaks_timeline 1.4.52 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checksub_team/peaks_timeline",
-  "version": "1.4.52",
+  "version": "1.5.0",
   "description": "JavaScript UI component for displaying audio waveforms",
   "main": "./peaks.js",
   "types": "./peaks.js.d.ts",

package/peaks.js

@@ -15983,51 +15983,7 @@ module.exports = function (Utils) {
         var self = this;
         self._peaks = peaks;
         self._currentTime = 0;
-        self._isPlaying = false;
-        self._speed = 1;
-        self._segmentPlayInterval = null;
     }
-    Player.prototype.setSpeed = function (newSpeed) {
-        this._speed = newSpeed;
-    };
-    Player.prototype.destroy = function () {
-        if (this._segmentPlayInterval !== null) {
-            clearInterval(this._segmentPlayInterval);
-            this._segmentPlayInterval = null;
-        }
-        if (this._playInterval !== null) {
-            clearInterval(this._playInterval);
-            this._playInterval = null;
-        }
-    };
-    Player.prototype.play = function () {
-        if (!this._playInterval) {
-            var prevTime = performance.now();
-            var time;
-            var self = this;
-            this._isPlaying = true;
-            this._peaks.overrideInteractions(true, false);
-            this._playInterval = setInterval(function () {
-                time = performance.now();
-                self._currentTime += (time - prevTime) / 1000 * self._speed;
-                prevTime = time;
-                self._peaks.emit('timeline.update', self._currentTime);
-            }, 20);
-            this._peaks.emit('timeline.play', this._currentTime);
-        }
-    };
-    Player.prototype.pause = function () {
-        if (this._playInterval) {
-            this._isPlaying = false;
-            clearInterval(this._playInterval);
-            this._playInterval = null;
-            this._peaks.overrideInteractions(false);
-            this._peaks.emit('timeline.pause', this._currentTime);
-        }
-    };
-    Player.prototype.isPlaying = function () {
-        return this._isPlaying;
-    };
     Player.prototype.getCurrentTime = function () {
         return this._currentTime;
     };
@@ -16037,6 +15993,12 @@ module.exports = function (Utils) {
         }
         this._peaks.emit('timeline.seek', this._currentTime);
     };
+    Player.prototype.update = function (time) {
+        if (!this._seek(time)) {
+            return;
+        }
+        this._peaks.emit('timeline.update', this._currentTime);
+    };
     Player.prototype._seek = function (time) {
         if (!Utils.isValidTime(time)) {
             this._peaks.logger('peaks.player.seek(): parameter must be a valid time, in seconds');
@@ -16045,24 +16007,6 @@ module.exports = function (Utils) {
         this._currentTime = Math.max(0, time);
         return true;
     };
-    Player.prototype.playSegment = function (segment) {
-        var self = this;
-        if (!segment || !Utils.isValidTime(segment.startTime) || !Utils.isValidTime(segment.endTime)) {
-            self._peaks.logger('peaks.player.playSegment(): parameter must be a segment object');
-            return;
-        }
-        clearInterval(self._segmentPlayInterval);
-        self._segmentPlayInterval = null;
-        self.seek(segment.startTime);
-        self.play();
-        self._segmentPlayInterval = setInterval(function () {
-            if (self.getCurrentTime() >= segment.endTime || !self._isPlaying) {
-                clearInterval(self._segmentPlayInterval);
-                self._segmentPlayInterval = null;
-                self.pause();
-            }
-        }, 10);
-    };
     return Player;
 }(_dereq_('./utils'));
 },{"./utils":111}],99:[function(_dereq_,module,exports){
@@ -16074,7 +16018,6 @@ module.exports = function (Utils, Konva) {
         this._view = view;
         this._lines = lines;
         this._playheadPixel = 0;
-        this._playheadLineAnimation = null;
         this._playheadVisible = false;
         this._playheadColor = peaks.options.playheadColor;
         this._playheadTextColor = peaks.options.playheadTextColor;
@@ -16086,7 +16029,6 @@ module.exports = function (Utils, Konva) {
             this._createPlayheadText(this._playheadTextColor);
         }
         this.fitToView();
-        this.zoomLevelChanged();
         this._peaks.on('segments.remove_all', this._onSegmentsRemoveAll.bind(this));
         this._peaks.on('segments.remove', this._onSegmentsRemove.bind(this));
     }
@@ -16111,21 +16053,6 @@ module.exports = function (Utils, Konva) {
     PlayheadLayer.prototype.listening = function (bool) {
         this._playheadLayer.listening(bool);
     };
-    PlayheadLayer.prototype.zoomLevelChanged = function () {
-        var pixelsPerSecond = this._view.timeToPixels(1);
-        var time;
-        this._useAnimation = pixelsPerSecond >= 5;
-        if (this._useAnimation) {
-            if (this._peaks.player.isPlaying() && !this._playheadLineAnimation) {
-                this._start();
-            }
-        } else {
-            if (this._playheadLineAnimation) {
-                time = this._peaks.player.getCurrentTime();
-                this.stop(time);
-            }
-        }
-    };
     PlayheadLayer.prototype.fitToView = function () {
         var height = this._view.getHeight();
         this._playheadLine.points([
@@ -16208,9 +16135,6 @@ module.exports = function (Utils, Konva) {
     };
     PlayheadLayer.prototype.updatePlayheadTime = function (time) {
         this._syncPlayhead(time);
-        if (this._peaks.player.isPlaying()) {
-            this._start();
-        }
     };
     PlayheadLayer.prototype._syncPlayhead = function (time) {
         var pixelIndex = this._view.timeToPixels(time);
@@ -16244,33 +16168,6 @@ module.exports = function (Utils, Konva) {
         this._time = time;
         this._playheadLayer.draw();
     };
-    PlayheadLayer.prototype._start = function () {
-        var self = this;
-        if (self._playheadLineAnimation) {
-            self._playheadLineAnimation.stop();
-            self._playheadLineAnimation = null;
-        }
-        if (!self._useAnimation) {
-            return;
-        }
-        var lastPlayheadPosition = null;
-        self._playheadLineAnimation = new Konva.Animation(function () {
-            var time = self._peaks.player.getCurrentTime();
-            var playheadPosition = self._view.timeToPixels(time);
-            if (playheadPosition !== lastPlayheadPosition) {
-                self._syncPlayhead(time);
-                lastPlayheadPosition = playheadPosition;
-            }
-        }, self._playheadLayer);
-        self._playheadLineAnimation.start();
-    };
-    PlayheadLayer.prototype.stop = function (time) {
-        if (this._playheadLineAnimation) {
-            this._playheadLineAnimation.stop();
-            this._playheadLineAnimation = null;
-        }
-        this._syncPlayhead(time);
-    };
     PlayheadLayer.prototype.getPlayheadOffset = function () {
         return this._playheadPixel - this._view.getFrameOffset();
     };
@@ -17675,7 +17572,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         });
         var self = this;
         var background = new Konva.Shape({
-            fill: this._source.color,
+            fill: this._source.backgroundColor,
             stroke: this._source.borderColor,
             strokeWidth: this._source.borderWidth,
             sceneFunc: function (ctx, shape) {
@@ -17727,7 +17624,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         });
         var self = this;
         var background = new Konva.Shape({
-            fill: this._source.color,
+            fill: this._source.backgroundColor,
             stroke: this._source.borderColor,
             strokeWidth: this._source.borderWidth,
             sceneFunc: function (ctx, shape) {
@@ -17957,7 +17854,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             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
@@ -18204,7 +18100,10 @@ module.exports = function (Utils) {
             throw new TypeError('peaks.sources.' + context + ': binaryUrl must be a string');
         }
         if (!Utils.isValidColor(options.color)) {
-            throw new TypeError('peaks.sources.' + context + ': color should be a valid CSS color');
+            options.color = peaks.options.zoomWaveformColor;
+        }
+        if (!Utils.isValidColor(options.backgroundColor)) {
+            throw new TypeError('peaks.sources.' + context + ': backgroundColor should be a valid CSS color');
         }
         if (!Utils.isValidColor(options.borderColor)) {
             options.borderColor = options.color;
@@ -18271,7 +18170,7 @@ module.exports = function (Utils) {
             options.wrapped = false;
         }
     }
-    function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, borderColor, selectedColor, textColor, borderWidth, wrapped, position, draggable, resizable, wrapping, previewHeight, binaryHeight) {
+    function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, borderColor, selectedColor, textColor, borderWidth, wrapped, position, draggable, resizable, wrapping, previewHeight, binaryHeight) {
         var opts = {
             title: title,
             url: url,
@@ -18285,6 +18184,7 @@ module.exports = function (Utils) {
             mediaStartTime: mediaStartTime,
             mediaEndTime: mediaEndTime,
             color: color,
+            backgroundColor: backgroundColor,
             borderColor: borderColor,
             selectedColor: selectedColor,
             textColor: textColor,
@@ -18314,8 +18214,9 @@ module.exports = function (Utils) {
         this._mediaStartTime = opts.mediaStartTime;
         this._mediaEndTime = opts.mediaEndTime;
         this._color = opts.color;
+        this._backgroundColor = opts.backgroundColor;
         this._borderColor = opts.borderColor;
-        this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.color, 30);
+        this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
         this._textColor = opts.textColor;
         this._borderWidth = opts.borderWidth;
         this._wrapped = opts.wrapped;
@@ -18436,6 +18337,15 @@ module.exports = function (Utils) {
                 this._color = color;
             }
         },
+        backgroundColor: {
+            enumerable: true,
+            get: function () {
+                return this._backgroundColor;
+            },
+            set: function (backgroundColor) {
+                this._backgroundColor = backgroundColor;
+            }
+        },
         borderColor: {
             enumerable: true,
             get: function () {
@@ -18640,6 +18550,7 @@ module.exports = function (Utils) {
             mediaStartTime: this.mediaStartTime,
             mediaEndTime: this.mediaEndTime,
             color: this.color,
+            backgroundColor: this.backgroundColor,
             borderColor: this.borderColor,
             selectedColor: this.selectedColor,
             textColor: this.textColor,
@@ -18666,8 +18577,9 @@ module.exports = function (Utils) {
         this._mediaStartTime = opts.mediaStartTime;
         this._mediaEndTime = opts.mediaEndTime;
         this._color = opts.color;
+        this._backgroundColor = opts.backgroundColor;
         this._borderColor = opts.borderColor;
-        this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.color, 30);
+        this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
         this._textColor = opts.textColor;
         this._borderWidth = opts.borderWidth;
         this._wrapped = opts.wrapped;
@@ -19363,6 +19275,7 @@ module.exports = function (Source, Utils) {
                 mediaStartTime: sourceToCut.mediaEndTime,
                 mediaEndTime: originalMediaEndTime,
                 color: sourceToCut.color,
+                backgroundColor: sourceToCut.backgroundColor,
                 borderColor: sourceToCut.borderColor,
                 selectedColor: sourceToCut.selectedColor,
                 textColor: sourceToCut.textColor,
@@ -19388,7 +19301,7 @@ module.exports = function (Source, Utils) {
         if (!Utils.isObject(options)) {
             throw new TypeError('peaks.sources.add(): expected a Source object parameter');
         }
-        var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.originId, options.elementId, options.title, options.url, options.previewUrl, options.binaryUrl, options.kind, options.subkind, options.duration, options.startTime, options.endTime, options.mediaStartTime, options.mediaEndTime, options.color, options.borderColor, options.selectedColor, options.textColor, options.borderWidth, options.wrapped, options.position, options.draggable, options.resizable, options.wrapping, options.previewHeight, options.binaryHeight);
+        var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.originId, options.elementId, options.title, options.url, options.previewUrl, options.binaryUrl, options.kind, options.subkind, options.duration, options.startTime, options.endTime, options.mediaStartTime, options.mediaEndTime, options.color, options.backgroundColor, options.borderColor, options.selectedColor, options.textColor, options.borderWidth, options.wrapped, options.position, options.draggable, options.resizable, options.wrapping, options.previewHeight, options.binaryHeight);
         return source;
     };
     TimelineSources.prototype.getSources = function () {
@@ -19889,7 +19802,6 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         this.setFrameOffset(apexPixel - playheadOffsetPixels);
         this.updateTimeline(this._frameOffset, undefined, undefined, true);
         this._sourcesLayer.rescale(true);
-        this._playheadLayer.zoomLevelChanged();
         this._playheadLayer.updatePlayheadTime(currentTime);
         this._peaks.emit('zoom.update', newScale, prevScale);
         return true;
@@ -20424,7 +20336,7 @@ module.exports = function (Utils, Konva) {
         return height - Utils.clamp(height - scaledAmplitude, 0, height);
     }
     function WaveformShape(options) {
-        Konva.Shape.call(this, { fill: options.color });
+        Konva.Shape.call(this, { fill: options.source.color });
         this._layer = options.layer;
         this._view = options.view;
         this._source = options.source;
@@ -20434,9 +20346,6 @@ module.exports = function (Utils, Konva) {
         this.hitFunc(this._waveformShapeHitFunc);
     }
     WaveformShape.prototype = Object.create(Konva.Shape.prototype);
-    WaveformShape.prototype.setWaveformColor = function (color) {
-        this.fill(color);
-    };
     WaveformShape.prototype._sceneFunc = function (context) {
         var width = this._view.getWidth();
         var waveformData = this._layer.getLoadedData(this._url).data;

package/src/player.js

@@ -26,91 +26,8 @@ define([
 
     self._peaks = peaks;
     self._currentTime = 0;
-    self._isPlaying = false;
-
-    self._speed = 1;
-
-    self._segmentPlayInterval = null;
   }
 
-  /**
-   * Set the playing speed.
-   *
-   * @param {Number} newSpeed The new speed, 1.0 is the normal (and default) speed.
-   */
-
-  Player.prototype.setSpeed = function(newSpeed) {
-    this._speed = newSpeed;
-  };
-
-  /**
-   * Cleans up the player object, removing all event listeners from the
-   * associated media element.
-   */
-
-  Player.prototype.destroy = function() {
-    if (this._segmentPlayInterval !== null) {
-      clearInterval(this._segmentPlayInterval);
-      this._segmentPlayInterval = null;
-    }
-
-    if (this._playInterval !== null) {
-      clearInterval(this._playInterval);
-      this._playInterval = null;
-    }
-  };
-
-  /**
-   * Starts playback.
-   */
-
-  Player.prototype.play = function() {
-    if (!this._playInterval) {
-      var prevTime = performance.now();
-      var time;
-      var self = this;
-
-      this._isPlaying = true;
-
-      this._peaks.overrideInteractions(true, false);
-
-      this._playInterval = setInterval(function() {
-        time = performance.now();
-        self._currentTime += ((time - prevTime) / 1000) * self._speed;
-        prevTime = time;
-        self._peaks.emit('timeline.update', self._currentTime);
-      }, 20);
-
-      this._peaks.emit('timeline.play', this._currentTime);
-    }
-  };
-
-  /**
-   * Pauses playback.
-   */
-
-  Player.prototype.pause = function() {
-    if (this._playInterval) {
-      this._isPlaying = false;
-
-      clearInterval(this._playInterval);
-      this._playInterval = null;
-
-      this._peaks.overrideInteractions(false);
-
-      this._peaks.emit('timeline.pause', this._currentTime);
-    }
-  };
-
-  /**
-   * @returns {Boolean} <code>true</code> if playing, <code>false</code>
-   * otherwise.
-   */
-
-  Player.prototype.isPlaying = function() {
-    return this._isPlaying;
-  };
-
   /**
    * Returns the current playback time position, in seconds.
    *
@@ -135,49 +52,26 @@ define([
     this._peaks.emit('timeline.seek', this._currentTime);
   };
 
-  Player.prototype._seek = function(time) {
-    if (!Utils.isValidTime(time)) {
-      this._peaks.logger('peaks.player.seek(): parameter must be a valid time, in seconds');
-      return false;
-    }
-
-    this._currentTime = Math.max(0, time);
-    return true;
-  };
-
   /**
-   * Plays the given segment.
-   *
-   * @param {Segment} segment The segment denoting the time region to play.
+   * Update the time (variation of seek, with a different event).
    */
 
-  Player.prototype.playSegment = function(segment) {
-    var self = this;
-
-    if (!segment ||
-        !Utils.isValidTime(segment.startTime) ||
-        !Utils.isValidTime(segment.endTime)) {
-      self._peaks.logger('peaks.player.playSegment(): parameter must be a segment object');
+  Player.prototype.update = function(time) {
+    if (!this._seek(time)) {
       return;
     }
 
-    clearInterval(self._segmentPlayInterval);
-    self._segmentPlayInterval = null;
-
-    // Set time to segment start time
-    self.seek(segment.startTime);
+    this._peaks.emit('timeline.update', this._currentTime);
+  };
 
-    // Start playing
-    self.play();
+  Player.prototype._seek = function(time) {
+    if (!Utils.isValidTime(time)) {
+      this._peaks.logger('peaks.player.seek(): parameter must be a valid time, in seconds');
+      return false;
+    }
 
-    self._segmentPlayInterval = setInterval(function() {
-      if (self.getCurrentTime() >= segment.endTime || !self._isPlaying) {
-        clearInterval(self._segmentPlayInterval);
-        self._segmentPlayInterval = null;
-        self.pause();
-        // self.seek(segment.endTime);
-      }
-    }, 10);
+    this._currentTime = Math.max(0, time);
+    return true;
   };
 
   return Player;

package/src/playhead-layer.js

@@ -31,7 +31,6 @@ define([
     this._view = view;
     this._lines = lines;
     this._playheadPixel = 0;
-    this._playheadLineAnimation = null;
     this._playheadVisible = false;
     this._playheadColor = peaks.options.playheadColor;
     this._playheadTextColor = peaks.options.playheadTextColor;
@@ -49,8 +48,6 @@ define([
 
     this.fitToView();
 
-    this.zoomLevelChanged();
-
     this._peaks.on('segments.remove_all', this._onSegmentsRemoveAll.bind(this));
     this._peaks.on('segments.remove', this._onSegmentsRemove.bind(this));
   }
@@ -89,38 +86,6 @@ define([
     this._playheadLayer.listening(bool);
   };
 
-  /**
-   * Decides whether to use an animation to update the playhead position.
-   *
-   * If the zoom level is such that the number of pixels per second of audio is
-   * low, we can use timeupdate events from the HTMLMediaElement to
-   * set the playhead position. Otherwise, we use an animation to update the
-   * playhead position more smoothly. The animation is CPU intensive, so we
-   * avoid using it where possible.
-   */
-
-  PlayheadLayer.prototype.zoomLevelChanged = function() {
-    var pixelsPerSecond = this._view.timeToPixels(1.0);
-    var time;
-
-    this._useAnimation = pixelsPerSecond >= 5;
-
-    if (this._useAnimation) {
-      if (this._peaks.player.isPlaying() && !this._playheadLineAnimation) {
-        // Start the animation
-        this._start();
-      }
-    }
-    else {
-      if (this._playheadLineAnimation) {
-        // Stop the animation
-        time = this._peaks.player.getCurrentTime();
-
-        this.stop(time);
-      }
-    }
-  };
-
   /**
    * Resizes the playhead UI objects to fit the available space in the
    * view.
@@ -252,10 +217,6 @@ define([
 
   PlayheadLayer.prototype.updatePlayheadTime = function(time) {
     this._syncPlayhead(time);
-
-    if (this._peaks.player.isPlaying()) {
-      this._start();
-    }
   };
 
   /**
@@ -313,48 +274,6 @@ define([
     this._playheadLayer.draw();
   };
 
-  /**
-   * Starts a playhead animation in sync with the media playback.
-   *
-   * @private
-   */
-
-  PlayheadLayer.prototype._start = function() {
-    var self = this;
-
-    if (self._playheadLineAnimation) {
-      self._playheadLineAnimation.stop();
-      self._playheadLineAnimation = null;
-    }
-
-    if (!self._useAnimation) {
-      return;
-    }
-
-    var lastPlayheadPosition = null;
-
-    self._playheadLineAnimation = new Konva.Animation(function() {
-      var time = self._peaks.player.getCurrentTime();
-      var playheadPosition = self._view.timeToPixels(time);
-
-      if (playheadPosition !== lastPlayheadPosition) {
-        self._syncPlayhead(time);
-        lastPlayheadPosition = playheadPosition;
-      }
-    }, self._playheadLayer);
-
-    self._playheadLineAnimation.start();
-  };
-
-  PlayheadLayer.prototype.stop = function(time) {
-    if (this._playheadLineAnimation) {
-      this._playheadLineAnimation.stop();
-      this._playheadLineAnimation = null;
-    }
-
-    this._syncPlayhead(time);
-  };
-
   /**
    * Returns the position of the playhead marker, in pixels relative to the
    * left hand side of the waveform view.

package/src/source-group.js

@@ -399,7 +399,7 @@ define([
     var self = this;
 
     var background = new Konva.Shape({
-      fill: this._source.color,
+      fill: this._source.backgroundColor,
       stroke: this._source.borderColor,
       strokeWidth: this._source.borderWidth,
       sceneFunc: function(ctx, shape) {
@@ -461,7 +461,7 @@ define([
     var self = this;
 
     var background = new Konva.Shape({
-      fill: this._source.color,
+      fill: this._source.backgroundColor,
       stroke: this._source.borderColor,
       strokeWidth: this._source.borderWidth,
       sceneFunc: function(ctx, shape) {
@@ -757,7 +757,6 @@ define([
       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

package/src/source.js

@@ -105,7 +105,13 @@ define([
     }
 
     if (!Utils.isValidColor(options.color)) {
-      throw new TypeError('peaks.sources.' + context + ': color should be a valid CSS color');
+      options.color = peaks.options.zoomWaveformColor;
+    }
+
+    if (!Utils.isValidColor(options.backgroundColor)) {
+      throw new TypeError(
+        'peaks.sources.' + context + ': backgroundColor should be a valid CSS color'
+      );
     }
 
     if (!Utils.isValidColor(options.borderColor)) {
@@ -220,9 +226,9 @@ define([
    */
 
   function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind,
-    subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, borderColor,
-    selectedColor, textColor, borderWidth, wrapped, position, draggable, resizable, wrapping,
-    previewHeight, binaryHeight) {
+    subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor,
+    borderColor, selectedColor, textColor, borderWidth, wrapped, position, draggable, resizable,
+    wrapping, previewHeight, binaryHeight) {
     var opts = {
       title: title,
       url: url,
@@ -236,6 +242,7 @@ define([
       mediaStartTime: mediaStartTime,
       mediaEndTime: mediaEndTime,
       color: color,
+      backgroundColor: backgroundColor,
       borderColor: borderColor,
       selectedColor: selectedColor,
       textColor: textColor,
@@ -267,8 +274,9 @@ define([
     this._mediaStartTime = opts.mediaStartTime;
     this._mediaEndTime = opts.mediaEndTime;
     this._color = opts.color;
+    this._backgroundColor = opts.backgroundColor;
     this._borderColor = opts.borderColor;
-    this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.color, 30);
+    this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
     this._textColor = opts.textColor;
     this._borderWidth = opts.borderWidth;
     this._wrapped = opts.wrapped;
@@ -396,6 +404,16 @@ define([
         this._color = color;
       }
     },
+    backgroundColor: {
+      enumerable: true,
+      get: function() {
+        return this._backgroundColor;
+      },
+
+      set: function(backgroundColor) {
+        this._backgroundColor = backgroundColor;
+      }
+    },
     borderColor: {
       enumerable: true,
       get: function() {
@@ -641,6 +659,7 @@ define([
       mediaStartTime: this.mediaStartTime,
       mediaEndTime: this.mediaEndTime,
       color: this.color,
+      backgroundColor: this.backgroundColor,
       borderColor: this.borderColor,
       selectedColor: this.selectedColor,
       textColor: this.textColor,
@@ -670,8 +689,9 @@ define([
     this._mediaStartTime = opts.mediaStartTime;
     this._mediaEndTime = opts.mediaEndTime;
     this._color = opts.color;
+    this._backgroundColor = opts.backgroundColor;
     this._borderColor = opts.borderColor;
-    this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.color, 30);
+    this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
     this._textColor = opts.textColor;
     this._borderWidth = opts.borderWidth;
     this._wrapped = opts.wrapped;

package/src/timeline-sources.js

@@ -78,6 +78,7 @@ define([
       mediaStartTime: sourceToCut.mediaEndTime,
       mediaEndTime: originalMediaEndTime,
       color: sourceToCut.color,
+      backgroundColor: sourceToCut.backgroundColor,
       borderColor: sourceToCut.borderColor,
       selectedColor: sourceToCut.selectedColor,
       textColor: sourceToCut.textColor,
@@ -151,6 +152,7 @@ define([
       options.mediaStartTime,
       options.mediaEndTime,
       options.color,
+      options.backgroundColor,
       options.borderColor,
       options.selectedColor,
       options.textColor,

package/src/timeline-zoomview.js

@@ -608,8 +608,6 @@ define([
 
     this._sourcesLayer.rescale(true);
 
-    this._playheadLayer.zoomLevelChanged();
-
     // Update the playhead position after zooming.
     this._playheadLayer.updatePlayheadTime(currentTime);
 

package/src/waveform-shape.js

@@ -51,7 +51,7 @@ define(['./utils', 'konva'], function(Utils, Konva) {
 
   function WaveformShape(options) {
     Konva.Shape.call(this, {
-      fill: options.color
+      fill: options.source.color
     });
 
     this._layer = options.layer;
@@ -67,10 +67,6 @@ define(['./utils', 'konva'], function(Utils, Konva) {
 
   WaveformShape.prototype = Object.create(Konva.Shape.prototype);
 
-  WaveformShape.prototype.setWaveformColor = function(color) {
-    this.fill(color);
-  };
-
   WaveformShape.prototype._sceneFunc = function(context) {
     var width = this._view.getWidth();
     var waveformData = this._layer.getLoadedData(this._url).data;