@checksub_team/peaks_timeline 1.4.44 → 1.4.46

package/package.json

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

package/peaks.js

@@ -16161,8 +16161,8 @@ module.exports = function (Utils, Konva) {
         this._playheadLayer.add(this._playheadGroup);
     };
     PlayheadLayer.prototype._onPlayheadDrag = function (time) {
-        if (self._peaks.player._seek(time)) {
-            self._peaks.emit('playhead.drag', self._peaks.player.getCurrentTime());
+        if (this._peaks.player._seek(time)) {
+            this._peaks.emit('playhead.drag', this._peaks.player.getCurrentTime());
         }
     };
     PlayheadLayer.prototype._onPlayheadDragStart = function () {
@@ -16371,9 +16371,13 @@ module.exports = function (Konva) {
     return SegmentMarker;
 }(_dereq_('konva'));
 },{"konva":43}],101:[function(_dereq_,module,exports){
-module.exports = function (Konva, SegmentMarker) {
+module.exports = function (Konva, SegmentMarker, Utils) {
     'use strict';
     var SEGMENT_WIDTH = 10;
+    var SEGMENT_CORNER_RADIUS = 10;
+    var INDICATOR_RADIUS = 4;
+    var INDICATORS_MARGIN_RIGHT = 4;
+    var INDICATORS_MARGIN_TOP = 8;
     function SegmentShape(segment, peaks, group, view) {
         this._segment = segment;
         this._peaks = peaks;
@@ -16383,22 +16387,33 @@ module.exports = function (Konva, SegmentMarker) {
         this._label = null;
         this._startMarker = null;
         this._endMarker = null;
+        this._shapeGroup = null;
         this._rectangle = null;
         this._isSelected = false;
+        this._indicators = {};
+        var self = this;
+        this._segmentWidth = this._view.timeToPixels(this._segment.endTime - this._segment.startTime);
         this._segmentHeight = this._peaks.options.segmentHeight;
-        this._rectangle = new Konva.Rect({
+        this._shapeGroup = new Konva.Group({
             x: this._view.timeToPixels(this._segment.startTime),
             y: 0,
+            width: this._segmentWidth,
+            height: this._segmentHeight,
+            draggable: this._segment.editable,
+            clipFunc: function (ctx) {
+                self._drawRect(ctx);
+            }
+        });
+        this._rectangle = new Konva.Rect({
             width: this._view.timeToPixels(this._segment.endTime - this._segment.startTime),
             height: this._segmentHeight,
-            cornerRadius: 10,
+            cornerRadius: SEGMENT_CORNER_RADIUS,
             fill: segment.color + Math.round(segment.opacity * 255).toString(16),
             stroke: segment.textColor + 'FF',
-            strokeWidth: 1,
-            draggable: this._segment.editable
+            strokeWidth: 2
         });
-        var self = this;
-        this._rectangle.dragBoundFunc(function () {
+        this._shapeGroup.add(this._rectangle);
+        this._shapeGroup.dragBoundFunc(function () {
             var diff = self._view.getPointerPosition().x - self._mouseDownX;
             self._group.updateSegment(self._segment, self._initialStartPixel + diff, self._initialEndPixel + diff);
             self._startMarker.timeUpdated(self._segment.startTime);
@@ -16408,11 +16423,11 @@ module.exports = function (Konva, SegmentMarker) {
                 y: this.absolutePosition().y
             };
         });
-        this._rectangle.on('mouseenter', this._onMouseEnter.bind(this));
-        this._rectangle.on('mouseleave', this._onMouseLeave.bind(this));
-        this._rectangle.on('click', this._onClick.bind(this));
-        this._rectangle.on('dragstart', this._onSegmentDragStart.bind(this));
-        this._rectangle.on('dragend', this._onSegmentDragEnd.bind(this));
+        this._shapeGroup.on('mouseenter', this._onMouseEnter.bind(this));
+        this._shapeGroup.on('mouseleave', this._onMouseLeave.bind(this));
+        this._shapeGroup.on('click', this._onClick.bind(this));
+        this._shapeGroup.on('dragstart', this._onSegmentDragStart.bind(this));
+        this._shapeGroup.on('dragend', this._onSegmentDragEnd.bind(this));
         this._onSegmentHandleDrag = this._onSegmentHandleDrag.bind(this);
         this._onSegmentHandleDragStart = this._onSegmentHandleDragStart.bind(this);
         this._onSegmentHandleDragEnd = this._onSegmentHandleDragEnd.bind(this);
@@ -16427,15 +16442,21 @@ module.exports = function (Konva, SegmentMarker) {
             fontSize: 12
         });
         this._createMarkers();
+        this._indicatorsGroup = new Konva.Group();
+        this._shapeGroup.add(this._indicatorsGroup);
+        this.createIndicators();
     }
     SegmentShape.prototype.update = function () {
         var startPixel = this._view.timeToPixels(this._segment.startTime);
         var endPixel = this._view.timeToPixels(this._segment.endTime);
         var frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
-        this._rectangle.x(startPixel - frameOffset);
-        this._rectangle.width(endPixel - startPixel);
-        var newWidth = Math.floor(this._rectangle.width() / 2);
-        if (this._rectangle.width() < this._startMarker.getHandleWidth() + this._endMarker.getHandleWidth()) {
+        this._shapeGroup.x(startPixel - frameOffset);
+        this._segmentWidth = endPixel - startPixel;
+        this._shapeGroup.width(this._segmentWidth);
+        this._rectangle.width(this._segmentWidth);
+        this._indicatorsGroup.x(this._segmentWidth);
+        var newWidth = Math.floor(this._segmentWidth / 2);
+        if (this._segmentWidth < this._startMarker.getHandleWidth() + this._endMarker.getHandleWidth()) {
             this._startMarker.setHandleWidth(newWidth);
             this._endMarker.setHandleWidth(newWidth);
         } else if (this._startMarker.getHandleWidth() < SEGMENT_WIDTH && newWidth > this._startMarker.getHandleWidth()) {
@@ -16477,7 +16498,7 @@ module.exports = function (Konva, SegmentMarker) {
         if (segmentsGroup) {
             this._segmentsGroup = segmentsGroup;
         }
-        group.add(this._rectangle);
+        group.add(this._shapeGroup);
         if (this._label) {
             group.add(this._label);
         }
@@ -16541,6 +16562,54 @@ module.exports = function (Konva, SegmentMarker) {
             });
         }
     };
+    SegmentShape.prototype.createIndicators = function () {
+        var newIndicatorsColors = this._segment.indicators;
+        var oldIndicators = this._indicators;
+        var newIndicators = {};
+        if (newIndicatorsColors) {
+            newIndicatorsColors.forEach(function (indicatorColor) {
+                var oldIndicator = oldIndicators[indicatorColor];
+                if (oldIndicator) {
+                    newIndicators[indicatorColor] = oldIndicator;
+                    delete oldIndicators[indicatorColor];
+                } else {
+                    newIndicators[indicatorColor] = null;
+                }
+            });
+            for (var color in oldIndicators) {
+                if (Utils.objectHasProperty(oldIndicators, color)) {
+                    oldIndicators[color].destroy();
+                }
+            }
+        }
+        this._indicators = Object.keys(newIndicators).sort().reverse().reduce(function (objEntries, key) {
+            objEntries[key] = newIndicators[key];
+            return objEntries;
+        }, {});
+        this._createIndicators();
+    };
+    SegmentShape.prototype._createIndicators = function () {
+        var currentX = 0;
+        var zIndex = 0;
+        for (var color in this._indicators) {
+            if (Utils.objectHasProperty(this._indicators, color)) {
+                if (!this._indicators[color]) {
+                    this._indicators[color] = new Konva.Circle({
+                        radius: INDICATOR_RADIUS,
+                        fill: color,
+                        strokeEnabled: false
+                    });
+                    this._indicatorsGroup.add(this._indicators[color]);
+                }
+                this._indicators[color].x(currentX);
+                this._indicators[color].zIndex(zIndex);
+                currentX += INDICATOR_RADIUS;
+                zIndex += 1;
+            }
+        }
+        this._indicatorsGroup.offsetX(currentX + INDICATORS_MARGIN_RIGHT);
+        this._indicatorsGroup.offsetY(-INDICATORS_MARGIN_TOP);
+    };
     SegmentShape.prototype._onMouseEnter = function () {
         this._view.setCursor('pointer');
         this._view.setHoveredElement(this);
@@ -16594,7 +16663,7 @@ module.exports = function (Konva, SegmentMarker) {
         }
     };
     SegmentShape.prototype.destroy = function () {
-        this._rectangle.destroy();
+        this._shapeGroup.destroy();
         if (this._label) {
             this._label.destroy();
         }
@@ -16605,9 +16674,22 @@ module.exports = function (Konva, SegmentMarker) {
             this._endMarker.destroy();
         }
     };
+    SegmentShape.prototype._drawRect = function (ctx) {
+        ctx.beginPath();
+        ctx.moveTo(SEGMENT_CORNER_RADIUS + 1.5, 0);
+        ctx.lineTo(this._segmentWidth - SEGMENT_CORNER_RADIUS - 1.5, 0);
+        ctx.quadraticCurveTo(this._segmentWidth, 0, this._segmentWidth, SEGMENT_CORNER_RADIUS + 1.5);
+        ctx.lineTo(this._segmentWidth, this._segmentHeight - SEGMENT_CORNER_RADIUS - 1.5);
+        ctx.quadraticCurveTo(this._segmentWidth, this._segmentHeight, this._segmentWidth - SEGMENT_CORNER_RADIUS - 1.5, this._segmentHeight);
+        ctx.lineTo(SEGMENT_CORNER_RADIUS + 1.5, this._segmentHeight);
+        ctx.quadraticCurveTo(0, this._segmentHeight, 0, this._segmentHeight - SEGMENT_CORNER_RADIUS - 1.5);
+        ctx.lineTo(0, SEGMENT_CORNER_RADIUS + 1.5);
+        ctx.quadraticCurveTo(0, 0, SEGMENT_CORNER_RADIUS + 1.5, 0);
+        ctx.closePath();
+    };
     return SegmentShape;
-}(_dereq_('konva'), _dereq_('./segment-marker'));
-},{"./segment-marker":100,"konva":43}],102:[function(_dereq_,module,exports){
+}(_dereq_('konva'), _dereq_('./segment-marker'), _dereq_('./utils'));
+},{"./segment-marker":100,"./utils":111,"konva":43}],102:[function(_dereq_,module,exports){
 module.exports = function (Utils) {
     'use strict';
     function validateSegment(peaks, options, context) {
@@ -16651,7 +16733,7 @@ module.exports = function (Utils) {
             throw new TypeError('peaks.segments.' + context + ': hoverColor must be a boolean');
         }
     }
-    function Segment(peaks, id, startTime, endTime, labelText, color, textColor, handleTextColor, hoverColor, opacity, editable, allowDeletion, line) {
+    function Segment(peaks, id, startTime, endTime, labelText, color, textColor, handleTextColor, hoverColor, opacity, editable, allowDeletion, line, indicators) {
         var opts = {
             startTime: startTime,
             endTime: endTime,
@@ -16663,7 +16745,8 @@ module.exports = function (Utils) {
             opacity: opacity,
             editable: editable,
             allowDeletion: allowDeletion,
-            line: line
+            line: line,
+            indicators: indicators
         };
         validateSegment(peaks, opts, 'add()');
         this._peaks = peaks;
@@ -16679,6 +16762,7 @@ module.exports = function (Utils) {
         this._editable = opts.editable;
         this._allowDeletion = opts.allowDeletion;
         this._line = opts.line;
+        this._indicators = opts.indicators;
         this._minSize = peaks.options.minSegmentSize;
     }
     Object.defineProperties(Segment.prototype, {
@@ -16760,6 +16844,12 @@ module.exports = function (Utils) {
                 return this._line;
             }
         },
+        indicators: {
+            enumerable: true,
+            get: function () {
+                return this._indicators;
+            }
+        },
         minSize: {
             enumerable: true,
             get: function () {
@@ -16779,7 +16869,8 @@ module.exports = function (Utils) {
             opacity: this.opacity,
             editable: this.editable,
             allowDeletion: this.allowDeletion,
-            line: this.line
+            line: this.line,
+            indicators: this.indicators
         };
         Utils.extend(opts, options);
         validateSegment(this._peaks, opts, 'update()');
@@ -16794,11 +16885,16 @@ module.exports = function (Utils) {
         this._editable = opts.editable;
         this._allowDeletion = opts.allowDeletion;
         this._line = opts.line;
+        this._indicators = opts.indicators;
         this._peaks.emit('segment.updated', this);
     };
     Segment.prototype.isVisible = function (startTime, endTime) {
         return this.startTime < endTime && startTime < this.endTime;
     };
+    Segment.prototype.setIndicators = function (newIndicators) {
+        this._indicators = newIndicators;
+        this._peaks.emit('segment.setIndicators', this);
+    };
     return Segment;
 }(_dereq_('./utils'));
 },{"./utils":111}],103:[function(_dereq_,module,exports){
@@ -16816,6 +16912,7 @@ module.exports = function (SegmentShape, Utils, Konva) {
         this._updatedSegments = [];
         this._isMagnetized = false;
         this._peaks.on('segments.setMagnetizing', this.setMagnetizing.bind(this));
+        this._peaks.on('segment.setIndicators', this.setIndicators.bind(this));
     }
     SegmentsGroup.prototype.addToGroup = function (group) {
         group.add(this._group);
@@ -17084,6 +17181,13 @@ module.exports = function (SegmentShape, Utils, Konva) {
     SegmentsGroup.prototype.isMagnetized = function () {
         return this._isMagnetized;
     };
+    SegmentsGroup.prototype.setIndicators = function (segment) {
+        var segmentShape = this._segmentShapes[segment.id];
+        if (segmentShape) {
+            segmentShape.createIndicators();
+            this._draw();
+        }
+    };
     SegmentsGroup.prototype.addToUpdatedSegments = function (segment) {
         if (this._updatedSegments.indexOf(segment) === -1) {
             this._updatedSegments.push(segment);
@@ -18895,6 +18999,7 @@ module.exports = function (Utils, Konva) {
     'use strict';
     var LEFT_PADDING = 4;
     function TimelineAxis(peaks, view, options) {
+        this._view = view;
         var self = this;
         peaks.on('playhead.moved', this._onPlayheadMoved.bind(this));
         peaks.on('playhead.hidden', this._onPlayheadHidden.bind(this));
@@ -18916,8 +19021,8 @@ module.exports = function (Utils, Konva) {
         self._frontLayer.add(self._timesShape);
     }
     TimelineAxis.prototype._onPlayheadMoved = function (playheadX, playheadWidth) {
-        this._maskStart = playheadX;
-        this._maskEnd = playheadX + playheadWidth;
+        this._maskStart = playheadX + this._view.getFrameOffset();
+        this._maskEnd = playheadX + this._view.getFrameOffset() + playheadWidth;
         this._frontLayer.draw();
     };
     TimelineAxis.prototype._onPlayheadHidden = function () {
@@ -19015,7 +19120,7 @@ module.exports = function (Utils, Konva) {
             var labelWidth = context.measureText(label).width;
             var labelX = x + LEFT_PADDING;
             var labelY = labelHeight;
-            if (!this._labelIsMasked(labelX, labelX + labelWidth)) {
+            if (!this._labelIsMasked(labelX + view.getFrameOffset(), labelX + view.getFrameOffset() + labelWidth)) {
                 context.fillText(label, labelX, labelY);
             }
             secs += axisLabelIntervalSecs;
@@ -19074,7 +19179,7 @@ module.exports = function (Colors, Segment, Utils) {
         if (!Utils.isObject(options)) {
             throw new TypeError('peaks.segments.add(): expected a Segment object parameter');
         }
-        var segment = new Segment(this._peaks, Utils.isNullOrUndefined(options.id) ? this._getNextSegmentId() : options.id, options.startTime, options.endTime, options.labelText, options.color || this._getSegmentColor(), options.textColor || '#000000', options.handleTextColor || '#000000', options.hoverColor, options.opacity || 1, options.editable, options.allowDeletion || false, options.line);
+        var segment = new Segment(this._peaks, Utils.isNullOrUndefined(options.id) ? this._getNextSegmentId() : options.id, options.startTime, options.endTime, options.labelText, options.color || this._getSegmentColor(), options.textColor || '#000000', options.handleTextColor || '#000000', options.hoverColor, options.opacity || 1, options.editable, options.allowDeletion || false, options.line, options.indicators);
         return segment;
     };
     TimelineSegments.prototype.getSegments = function () {

package/src/playhead-layer.js

@@ -207,8 +207,8 @@ define([
   };
 
   PlayheadLayer.prototype._onPlayheadDrag = function(time) {
-    if (self._peaks.player._seek(time)) {
-      self._peaks.emit('playhead.drag', self._peaks.player.getCurrentTime());
+    if (this._peaks.player._seek(time)) {
+      this._peaks.emit('playhead.drag', this._peaks.player.getCurrentTime());
     }
   };
 

package/src/segment-shape.js

@@ -8,13 +8,19 @@
 
 define([
   'konva',
-  './segment-marker'
+  './segment-marker',
+  './utils'
 ], function(
   Konva,
-  SegmentMarker) {
+  SegmentMarker,
+  Utils) {
   'use strict';
 
   var SEGMENT_WIDTH = 10;
+  var SEGMENT_CORNER_RADIUS = 10;
+  var INDICATOR_RADIUS = 4; // px
+  var INDICATORS_MARGIN_RIGHT = 4; // px
+  var INDICATORS_MARGIN_TOP = 8; // px
 
   /**
    * Creates a waveform segment shape with optional start and end markers.
@@ -38,26 +44,39 @@ define([
     this._label         = null;
     this._startMarker   = null;
     this._endMarker     = null;
+    this._shapeGroup    = null;
     this._rectangle     = null;
     this._isSelected    = false;
+    this._indicators    = {};
 
+    var self = this;
+
+    this._segmentWidth = this._view.timeToPixels(this._segment.endTime - this._segment.startTime);
     this._segmentHeight = this._peaks.options.segmentHeight;
 
-    this._rectangle = new Konva.Rect({
+    this._shapeGroup = new Konva.Group({
       x: this._view.timeToPixels(this._segment.startTime),
       y: 0,
+      width: this._segmentWidth,
+      height: this._segmentHeight,
+      draggable: this._segment.editable,
+      clipFunc: function(ctx) {
+        self._drawRect(ctx);
+      }
+    });
+
+    this._rectangle = new Konva.Rect({
       width: this._view.timeToPixels(this._segment.endTime - this._segment.startTime),
       height: this._segmentHeight,
-      cornerRadius: 10,
+      cornerRadius: SEGMENT_CORNER_RADIUS,
       fill: segment.color + Math.round(segment.opacity * 255).toString(16),
       stroke: segment.textColor + 'FF',
-      strokeWidth: 1,
-      draggable: this._segment.editable
+      strokeWidth: 2
     });
 
-    var self = this;
+    this._shapeGroup.add(this._rectangle);
 
-    this._rectangle.dragBoundFunc(function() {
+    this._shapeGroup.dragBoundFunc(function() {
       var diff = self._view.getPointerPosition().x - self._mouseDownX;
 
       self._group.updateSegment(
@@ -76,12 +95,12 @@ define([
 
     // Set up event handlers to show/hide the segment label text when the user
     // hovers the mouse over the segment.
-    this._rectangle.on('mouseenter', this._onMouseEnter.bind(this));
-    this._rectangle.on('mouseleave', this._onMouseLeave.bind(this));
-    this._rectangle.on('click', this._onClick.bind(this));
+    this._shapeGroup.on('mouseenter', this._onMouseEnter.bind(this));
+    this._shapeGroup.on('mouseleave', this._onMouseLeave.bind(this));
+    this._shapeGroup.on('click', this._onClick.bind(this));
 
-    this._rectangle.on('dragstart', this._onSegmentDragStart.bind(this));
-    this._rectangle.on('dragend', this._onSegmentDragEnd.bind(this));
+    this._shapeGroup.on('dragstart', this._onSegmentDragStart.bind(this));
+    this._shapeGroup.on('dragend', this._onSegmentDragEnd.bind(this));
 
     // Event handlers for markers
     this._onSegmentHandleDrag      = this._onSegmentHandleDrag.bind(this);
@@ -100,6 +119,11 @@ define([
     });
 
     this._createMarkers();
+
+    this._indicatorsGroup = new Konva.Group();
+    this._shapeGroup.add(this._indicatorsGroup);
+
+    this.createIndicators();
   }
 
   SegmentShape.prototype.update = function() {
@@ -107,13 +131,17 @@ define([
     var endPixel    = this._view.timeToPixels(this._segment.endTime);
     var frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
 
-    this._rectangle.x(startPixel - frameOffset);
+    this._shapeGroup.x(startPixel - frameOffset);
 
-    this._rectangle.width(endPixel - startPixel);
+    this._segmentWidth = endPixel - startPixel;
 
-    var newWidth = Math.floor(this._rectangle.width() / 2);
+    this._shapeGroup.width(this._segmentWidth);
+    this._rectangle.width(this._segmentWidth);
+    this._indicatorsGroup.x(this._segmentWidth);
 
-    if (this._rectangle.width()
+    var newWidth = Math.floor(this._segmentWidth / 2);
+
+    if (this._segmentWidth
       < this._startMarker.getHandleWidth() + this._endMarker.getHandleWidth()) {
       this._startMarker.setHandleWidth(newWidth);
       this._endMarker.setHandleWidth(newWidth);
@@ -169,7 +197,7 @@ define([
       this._segmentsGroup = segmentsGroup;
     }
 
-    group.add(this._rectangle);
+    group.add(this._shapeGroup);
 
     if (this._label) {
       group.add(this._label);
@@ -242,6 +270,69 @@ define([
     }
   };
 
+  SegmentShape.prototype.createIndicators = function() {
+    var newIndicatorsColors = this._segment.indicators;
+    var oldIndicators = this._indicators;
+    var newIndicators = {};
+
+    if (newIndicatorsColors) {
+      newIndicatorsColors.forEach(function(indicatorColor) {
+        var oldIndicator = oldIndicators[indicatorColor];
+
+        if (oldIndicator) {
+          newIndicators[indicatorColor] = oldIndicator;
+          delete oldIndicators[indicatorColor];
+        }
+        else {
+          newIndicators[indicatorColor] = null;
+        }
+      });
+
+      for (var color in oldIndicators) {
+        if (Utils.objectHasProperty(oldIndicators, color)) {
+          oldIndicators[color].destroy();
+        }
+      }
+    }
+
+    this._indicators = Object.keys(newIndicators)
+      .sort()
+      .reverse()
+      .reduce(function(objEntries, key) {
+        objEntries[key] = newIndicators[key];
+        return objEntries;
+        }, {}
+      );
+
+    this._createIndicators();
+  };
+
+  SegmentShape.prototype._createIndicators = function() {
+    var currentX = 0;
+    var zIndex = 0;
+
+    for (var color in this._indicators) {
+      if (Utils.objectHasProperty(this._indicators, color)) {
+        if (!this._indicators[color]) {
+          this._indicators[color] = new Konva.Circle({
+            radius: INDICATOR_RADIUS,
+            fill: color,
+            strokeEnabled: false
+          });
+          this._indicatorsGroup.add(this._indicators[color]);
+        }
+
+        this._indicators[color].x(currentX);
+        this._indicators[color].zIndex(zIndex);
+        currentX += INDICATOR_RADIUS;
+        zIndex += 1;
+      }
+    }
+
+    this._indicatorsGroup.offsetX(currentX + INDICATORS_MARGIN_RIGHT);
+    this._indicatorsGroup.offsetY(-INDICATORS_MARGIN_TOP);
+  };
+
   SegmentShape.prototype._onMouseEnter = function() {
     this._view.setCursor('pointer');
 
@@ -335,7 +426,7 @@ define([
   };
 
   SegmentShape.prototype.destroy = function() {
-    this._rectangle.destroy();
+    this._shapeGroup.destroy();
 
     if (this._label) {
       this._label.destroy();
@@ -350,5 +441,26 @@ define([
     }
   };
 
+  SegmentShape.prototype._drawRect = function(ctx) {
+    ctx.beginPath();
+    ctx.moveTo(SEGMENT_CORNER_RADIUS + 1.5, 0);
+    ctx.lineTo(this._segmentWidth - SEGMENT_CORNER_RADIUS - 1.5, 0);
+    ctx.quadraticCurveTo(this._segmentWidth, 0, this._segmentWidth, SEGMENT_CORNER_RADIUS + 1.5);
+    ctx.lineTo(this._segmentWidth, this._segmentHeight - SEGMENT_CORNER_RADIUS - 1.5);
+    ctx.quadraticCurveTo(
+      this._segmentWidth,
+      this._segmentHeight,
+      this._segmentWidth - SEGMENT_CORNER_RADIUS - 1.5,
+      this._segmentHeight
+    );
+    ctx.lineTo(SEGMENT_CORNER_RADIUS + 1.5, this._segmentHeight);
+    ctx.quadraticCurveTo(
+      0, this._segmentHeight, 0, this._segmentHeight - SEGMENT_CORNER_RADIUS - 1.5
+    );
+    ctx.lineTo(0, SEGMENT_CORNER_RADIUS + 1.5);
+    ctx.quadraticCurveTo(0, 0, SEGMENT_CORNER_RADIUS + 1.5, 0);
+    ctx.closePath();
+  };
+
   return SegmentShape;
 });

package/src/segment.js

@@ -85,11 +85,16 @@ define([
    * @param {Number} opacity Segment waveform opacity.
    * @param {Boolean} editable If <code>true</code> the segment start and
    *   end times can be adjusted via the user interface.
+   * @param {Boolean} allowDeletion If <code>true</code> the segment can be
+   *   deleted using the delete key.
+   * @param {Number} line The id of the line to add the segment to.
+   * @param {Array<String>} indicators Array containing the colors
+   *   of all indicators.
    */
 
   function Segment(peaks, id, startTime, endTime, labelText, color,
     textColor, handleTextColor, hoverColor, opacity, editable,
-    allowDeletion, line) {
+    allowDeletion, line, indicators) {
     var opts = {
       startTime:       startTime,
       endTime:         endTime,
@@ -101,7 +106,8 @@ define([
       opacity:         opacity,
       editable:        editable,
       allowDeletion:   allowDeletion,
-      line:            line
+      line:            line,
+      indicators:      indicators
     };
 
     validateSegment(peaks, opts, 'add()');
@@ -119,6 +125,7 @@ define([
     this._editable        = opts.editable;
     this._allowDeletion   = opts.allowDeletion;
     this._line            = opts.line;
+    this._indicators      = opts.indicators;
     this._minSize         = peaks.options.minSegmentSize;
   }
 
@@ -203,6 +210,12 @@ define([
         return this._line;
       }
     },
+    indicators: {
+      enumerable: true,
+      get: function() {
+        return this._indicators;
+      }
+    },
     minSize: {
       enumerable: true,
       get: function() {
@@ -223,7 +236,8 @@ define([
       opacity:         this.opacity,
       editable:        this.editable,
       allowDeletion:   this.allowDeletion,
-      line:            this.line
+      line:            this.line,
+      indicators:      this.indicators
     };
 
     Utils.extend(opts, options);
@@ -241,6 +255,7 @@ define([
     this._editable        = opts.editable;
     this._allowDeletion   = opts.allowDeletion;
     this._line            = opts.line;
+    this._indicators      = opts.indicators;
 
     this._peaks.emit('segment.updated', this);
   };
@@ -259,5 +274,16 @@ define([
     return this.startTime < endTime && startTime < this.endTime;
   };
 
+  /**
+   * Update the indicators of this segment.
+   *
+   * @param {Array<String>} newIndicators The new indicators.
+   */
+
+  Segment.prototype.setIndicators = function(newIndicators) {
+    this._indicators = newIndicators;
+    this._peaks.emit('segment.setIndicators', this);
+  };
+
   return Segment;
 });

package/src/segments-group.js

@@ -45,6 +45,7 @@ define([
     this._isMagnetized = false;
 
     this._peaks.on('segments.setMagnetizing', this.setMagnetizing.bind(this));
+    this._peaks.on('segment.setIndicators', this.setIndicators.bind(this));
   }
 
   /**
@@ -459,6 +460,15 @@ define([
     return this._isMagnetized;
   };
 
+  SegmentsGroup.prototype.setIndicators = function(segment) {
+    var segmentShape = this._segmentShapes[segment.id];
+
+    if (segmentShape) {
+      segmentShape.createIndicators();
+      this._draw();
+    }
+  };
+
   SegmentsGroup.prototype.addToUpdatedSegments = function(segment) {
     if (this._updatedSegments.indexOf(segment) === -1) {
       this._updatedSegments.push(segment);

package/src/timeline-axis.js

@@ -27,6 +27,8 @@ define([
    */
 
   function TimelineAxis(peaks, view, options) {
+    this._view = view;
+
     var self = this;
 
     peaks.on('playhead.moved', this._onPlayheadMoved.bind(this));
@@ -59,8 +61,8 @@ define([
   }
 
   TimelineAxis.prototype._onPlayheadMoved = function(playheadX, playheadWidth) {
-    this._maskStart = playheadX;
-    this._maskEnd = playheadX + playheadWidth;
+    this._maskStart = playheadX + this._view.getFrameOffset();
+    this._maskEnd = playheadX + this._view.getFrameOffset() + playheadWidth;
     this._frontLayer.draw();
   };
 
@@ -217,7 +219,10 @@ define([
       var labelX      = x + LEFT_PADDING;
       var labelY      = labelHeight;
 
-      if (!this._labelIsMasked(labelX, labelX + labelWidth)) {
+      if (!this._labelIsMasked(
+        labelX + view.getFrameOffset(),
+        labelX + view.getFrameOffset() + labelWidth
+      )) {
         context.fillText(label, labelX, labelY);
       }
 

package/src/timeline-segments.js

@@ -139,7 +139,8 @@ define([
       options.opacity || 1,
       options.editable,
       options.allowDeletion || false,
-      options.line
+      options.line,
+      options.indicators
     );
 
     return segment;