@checksub_team/peaks_timeline 1.8.1 → 1.8.3

package/package.json

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

package/peaks.js

@@ -17565,11 +17565,15 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
     var SPACING_BETWEEN_PREVIEW_AND_BORDER_RATIO = 0.15;
     var SPACING_BETWEEN_PREVIEWS = 1.5;
     var CORNER_RADIUS = 8;
+    var INDICATOR_RADIUS = 4;
+    var INDICATORS_MARGIN_LEFT = 8;
+    var INDICATORS_MARGIN_TOP = 12;
     function SourceGroup(source, peaks, layer, view) {
         this._source = source;
         this._peaks = peaks;
         this._layer = layer;
         this._view = view;
+        this._indicators = {};
         var self = this;
         this._x = this._view.timeToPixels(source.startTime);
         this._width = this._view.timeToPixels(source.endTime - source.startTime);
@@ -17615,6 +17619,9 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         }
         this._addHandles();
         this.setWrapping(source.wrapped);
+        this._indicatorsGroup = new Konva.Group();
+        this._group.add(this._indicatorsGroup);
+        this.createIndicators();
     }
     SourceGroup.prototype._onSourceGroupDragStart = function () {
         this._dragged = true;
@@ -18298,6 +18305,54 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
     SourceGroup.prototype.destroy = function () {
         this._group.destroy();
     };
+    SourceGroup.prototype.createIndicators = function () {
+        var newIndicatorsColors = this._source.indicators;
+        var oldIndicators = this._indicators;
+        var newIndicators = {};
+        if (newIndicatorsColors) {
+            newIndicatorsColors.forEach(function (indicatorColor) {
+                var oldIndicator = oldIndicators[indicatorColor];
+                if (oldIndicator) {
+                    newIndicators[indicatorColor] = oldIndicator;
+                    delete oldIndicators[indicatorColor];
+                } else {
+                    newIndicators[indicatorColor] = null;
+                }
+            });
+            for (var color in oldIndicators) {
+                if (Utils.objectHasProperty(oldIndicators, color)) {
+                    oldIndicators[color].destroy();
+                }
+            }
+        }
+        this._indicators = Object.keys(newIndicators).sort().reverse().reduce(function (objEntries, key) {
+            objEntries[key] = newIndicators[key];
+            return objEntries;
+        }, {});
+        this._createIndicators();
+    };
+    SourceGroup.prototype._createIndicators = function () {
+        var currentX = 0;
+        var zIndex = 0;
+        for (var color in this._indicators) {
+            if (Utils.objectHasProperty(this._indicators, color)) {
+                if (!this._indicators[color]) {
+                    this._indicators[color] = new Konva.Circle({
+                        radius: INDICATOR_RADIUS,
+                        fill: color,
+                        strokeEnabled: false
+                    });
+                    this._indicatorsGroup.add(this._indicators[color]);
+                }
+                this._indicators[color].x(currentX);
+                this._indicators[color].zIndex(zIndex);
+                currentX -= INDICATOR_RADIUS;
+                zIndex += 1;
+            }
+        }
+        this._indicatorsGroup.offsetX(currentX - INDICATORS_MARGIN_LEFT);
+        this._indicatorsGroup.offsetY(-INDICATORS_MARGIN_TOP);
+    };
     return SourceGroup;
 }(_dereq_('./waveform-builder'), _dereq_('./waveform-shape'), _dereq_('./utils'), _dereq_('konva'));
 },{"./utils":112,"./waveform-builder":113,"./waveform-shape":114,"konva":43}],105:[function(_dereq_,module,exports){
@@ -18468,8 +18523,11 @@ module.exports = function (Utils) {
         } else if (options.wrapping === 'complete') {
             options.wrapped = false;
         }
+        if (Utils.isNullOrUndefined(options.indicators)) {
+            options.indicators = [];
+        }
     }
-    function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, borderColor, selectedColor, textFont, textFontSize, textColor, textBackgroundColor, textPosition, borderWidth, borderRadius, wrapped, position, draggable, orderable, resizable, cuttable, deletable, wrapping, previewHeight, binaryHeight) {
+    function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, borderColor, selectedColor, textFont, textFontSize, textColor, textBackgroundColor, textPosition, borderWidth, borderRadius, wrapped, position, draggable, orderable, resizable, cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators) {
         var opts = {
             title: title,
             url: url,
@@ -18502,7 +18560,8 @@ module.exports = function (Utils) {
             deletable: deletable,
             wrapping: wrapping,
             previewHeight: previewHeight,
-            binaryHeight: binaryHeight
+            binaryHeight: binaryHeight,
+            indicators: indicators
         };
         validateSource(peaks, opts, 'add()');
         this._peaks = peaks;
@@ -18541,6 +18600,7 @@ module.exports = function (Utils) {
         this._wrapping = opts.wrapping;
         this._previewHeight = opts.previewHeight;
         this._binaryHeight = opts.binaryHeight;
+        this._indicators = opts.indicators;
         this._minSize = peaks.options.minSourceSize;
     }
     Object.defineProperties(Source.prototype, {
@@ -18823,6 +18883,12 @@ module.exports = function (Utils) {
                 this._binaryHeight = binaryHeight;
             }
         },
+        indicators: {
+            enumerable: true,
+            get: function () {
+                return this._indicators;
+            }
+        },
         minSize: {
             enumerable: true,
             get: function () {
@@ -18947,7 +19013,8 @@ module.exports = function (Utils) {
             deletable: this.deletable,
             wrapping: this.wrapping,
             previewHeight: this.previewHeight,
-            binaryHeight: this.binaryHeight
+            binaryHeight: this.binaryHeight,
+            indicators: this.indicators
         };
         Utils.extend(opts, options);
         validateSource(this._peaks, opts, 'update()');
@@ -18983,11 +19050,16 @@ module.exports = function (Utils) {
         this._wrapping = opts.wrapping;
         this._previewHeight = opts.previewHeight;
         this._binaryHeight = opts.binaryHeight;
+        this._indicators = opts.indicators;
         this._peaks.emit('source.update', this);
     };
     Source.prototype.isVisible = function (startTime, endTime) {
         return this._startTime < endTime && startTime < this._endTime;
     };
+    Source.prototype.setIndicators = function (newIndicators) {
+        this._indicators = newIndicators;
+        this._peaks.emit('source.setIndicators', this);
+    };
     return Source;
 }(_dereq_('./utils'));
 },{"./utils":112}],106:[function(_dereq_,module,exports){
@@ -19013,6 +19085,7 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         this._peaks.on('sources.refresh', this._onSourcesRefresh.bind(this));
         this._peaks.on('segments.show', this._onSegmentsShow.bind(this));
         this._peaks.on('options.set.line_height', this._onOptionsLineHeightChange.bind(this));
+        this._peaks.on('source.setIndicators', this.setIndicators.bind(this));
     }
     SourcesLayer.prototype.fitToView = function () {
         this._lines.fitToView();
@@ -19159,6 +19232,13 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         this._dataRetriever.retrieveData(source);
         return sourceGroup;
     };
+    SourcesLayer.prototype.setIndicators = function (source) {
+        var sourceGroup = this._sourcesGroup[source.id];
+        if (sourceGroup) {
+            sourceGroup.createIndicators();
+            this._layer.draw();
+        }
+    };
     SourcesLayer.prototype.updateSources = function (startTime, endTime) {
         this._lines.updateSegments(startTime, endTime);
         var sources = this.findSources(startTime, endTime);
@@ -19330,6 +19410,7 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         this._peaks.off('data.retrieved', this._onDataRetrieved);
         this._peaks.off('sources.refresh', this._onSourcesRefresh);
         this._peaks.off('segments.show', this._onSegmentsShow);
+        this._peaks.off('source.setIndicators', this.setIndicators);
     };
     SourcesLayer.prototype.getHeight = function () {
         return this._layer.getHeight();
@@ -19728,7 +19809,7 @@ module.exports = function (Source, Utils) {
                 wrapping: sourceToCut.wrapping,
                 previewHeight: sourceToCut.previewHeight,
                 binaryHeight: sourceToCut.binaryHeight
-            }]);
+            }])[0];
         this._peaks.emit('sources.updated', [
             sourceToCut,
             newSource
@@ -19745,7 +19826,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.backgroundColor, options.borderColor, options.selectedColor, options.textFont, options.textFontSize, options.textColor, options.textBackgroundColor, options.textPosition, options.borderWidth, options.borderRadius, options.wrapped, options.position, options.draggable, options.orderable, options.resizable, options.cuttable, options.deletable, 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.textFont, options.textFontSize, options.textColor, options.textBackgroundColor, options.textPosition, options.borderWidth, options.borderRadius, options.wrapped, options.position, options.draggable, options.orderable, options.resizable, options.cuttable, options.deletable, options.wrapping, options.previewHeight, options.binaryHeight, options.indicators);
         return source;
     };
     TimelineSources.prototype.getSources = function () {
@@ -19790,6 +19871,7 @@ module.exports = function (Source, Utils) {
             self._addSource(source);
         });
         this._peaks.emit('sources.add', sources);
+        return sources;
     };
     TimelineSources.prototype._findSource = function (predicate) {
         var indexes = [];

package/src/source-group.js

@@ -21,6 +21,9 @@ define([
   var SPACING_BETWEEN_PREVIEW_AND_BORDER_RATIO = 0.15;
   var SPACING_BETWEEN_PREVIEWS = 1.5;
   var CORNER_RADIUS = 8;
+  var INDICATOR_RADIUS = 4; // px
+  var INDICATORS_MARGIN_LEFT = 8; // px
+  var INDICATORS_MARGIN_TOP = 12; // px
 
   /**
    * Creates a source group for the given source.
@@ -39,6 +42,7 @@ define([
     this._peaks         = peaks;
     this._layer         = layer;
     this._view          = view;
+    this._indicators    = {};
 
     var self = this;
 
@@ -94,6 +98,11 @@ define([
     this._addHandles();
 
     this.setWrapping(source.wrapped);
+
+    this._indicatorsGroup = new Konva.Group();
+    this._group.add(this._indicatorsGroup);
+
+    this.createIndicators();
   }
 
   // SourceGroup.prototype.rescale = function() {
@@ -1039,5 +1048,69 @@ define([
     this._group.destroy();
   };
 
+  SourceGroup.prototype.createIndicators = function() {
+    var newIndicatorsColors = this._source.indicators;
+
+    var oldIndicators = this._indicators;
+    var newIndicators = {};
+
+    if (newIndicatorsColors) {
+      newIndicatorsColors.forEach(function(indicatorColor) {
+        var oldIndicator = oldIndicators[indicatorColor];
+
+        if (oldIndicator) {
+          newIndicators[indicatorColor] = oldIndicator;
+          delete oldIndicators[indicatorColor];
+        }
+        else {
+          newIndicators[indicatorColor] = null;
+        }
+      });
+
+      for (var color in oldIndicators) {
+        if (Utils.objectHasProperty(oldIndicators, color)) {
+          oldIndicators[color].destroy();
+        }
+      }
+    }
+
+    this._indicators = Object.keys(newIndicators)
+      .sort()
+      .reverse()
+      .reduce(function(objEntries, key) {
+        objEntries[key] = newIndicators[key];
+        return objEntries;
+        }, {}
+      );
+
+    this._createIndicators();
+  };
+
+  SourceGroup.prototype._createIndicators = function() {
+    var currentX = 0;
+    var zIndex = 0;
+
+    for (var color in this._indicators) {
+      if (Utils.objectHasProperty(this._indicators, color)) {
+        if (!this._indicators[color]) {
+          this._indicators[color] = new Konva.Circle({
+            radius: INDICATOR_RADIUS,
+            fill: color,
+            strokeEnabled: false
+          });
+          this._indicatorsGroup.add(this._indicators[color]);
+        }
+
+        this._indicators[color].x(currentX);
+        this._indicators[color].zIndex(zIndex);
+        currentX -= INDICATOR_RADIUS;
+        zIndex += 1;
+      }
+    }
+
+    this._indicatorsGroup.offsetX(currentX - INDICATORS_MARGIN_LEFT);
+    this._indicatorsGroup.offsetY(-INDICATORS_MARGIN_TOP);
+  };
+
   return SourceGroup;
 });

package/src/source.js

@@ -246,6 +246,10 @@ define([
     else if (options.wrapping === 'complete') {
       options.wrapped = false;
     }
+
+    if (Utils.isNullOrUndefined(options.indicators)) {
+      options.indicators = [];
+    }
   }
 
   /**
@@ -266,13 +270,14 @@ define([
    * @param {Number} position Position of the source on the timeline.
    *                          Correspond to the index of the line.
    * @param {Boolean} segments If <code>true</code> this source will integrate the segments.
+   * @param {Array<String>} indicators Array containing the colors of all indicators.
    */
 
   function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind,
     subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor,
     borderColor, selectedColor, textFont, textFontSize, textColor, textBackgroundColor,
     textPosition, borderWidth, borderRadius, wrapped, position, draggable, orderable, resizable,
-    cuttable, deletable, wrapping, previewHeight, binaryHeight) {
+    cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators) {
     var opts = {
       title: title,
       url: url,
@@ -305,7 +310,8 @@ define([
       deletable: deletable,
       wrapping: wrapping,
       previewHeight: previewHeight,
-      binaryHeight: binaryHeight
+      binaryHeight: binaryHeight,
+      indicators: indicators
     };
 
     validateSource(peaks, opts, 'add()');
@@ -346,6 +352,7 @@ define([
     this._wrapping = opts.wrapping;
     this._previewHeight = opts.previewHeight;
     this._binaryHeight = opts.binaryHeight;
+    this._indicators = opts.indicators;
     this._minSize = peaks.options.minSourceSize;
   }
 
@@ -650,6 +657,12 @@ define([
         this._binaryHeight = binaryHeight;
       }
     },
+    indicators: {
+      enumerable: true,
+      get: function() {
+        return this._indicators;
+      }
+    },
     minSize: {
       enumerable: true,
       get: function() {
@@ -806,7 +819,8 @@ define([
       deletable: this.deletable,
       wrapping: this.wrapping,
       previewHeight: this.previewHeight,
-      binaryHeight: this.binaryHeight
+      binaryHeight: this.binaryHeight,
+      indicators: this.indicators
     };
 
     Utils.extend(opts, options);
@@ -845,6 +859,7 @@ define([
     this._wrapping = opts.wrapping;
     this._previewHeight = opts.previewHeight;
     this._binaryHeight = opts.binaryHeight;
+    this._indicators = opts.indicators;
 
     this._peaks.emit('source.update', this);
   };
@@ -862,5 +877,16 @@ define([
     return this._startTime < endTime && startTime < this._endTime;
   };
 
+  /**
+   * Update the indicators of this source.
+   *
+   * @param {Array<String>} newIndicators The new indicators.
+   */
+
+  Source.prototype.setIndicators = function(newIndicators) {
+    this._indicators = newIndicators;
+    this._peaks.emit('source.setIndicators', this);
+  };
+
   return Source;
 });

package/src/sources-layer.js

@@ -58,6 +58,7 @@ define([
     this._peaks.on('sources.refresh', this._onSourcesRefresh.bind(this));
     this._peaks.on('segments.show', this._onSegmentsShow.bind(this));
     this._peaks.on('options.set.line_height', this._onOptionsLineHeightChange.bind(this));
+    this._peaks.on('source.setIndicators', this.setIndicators.bind(this));
   }
 
   SourcesLayer.prototype.fitToView = function() {
@@ -280,6 +281,15 @@ define([
     return sourceGroup;
   };
 
+  SourcesLayer.prototype.setIndicators = function(source) {
+    var sourceGroup = this._sourcesGroup[source.id];
+
+    if (sourceGroup) {
+      sourceGroup.createIndicators();
+      this._layer.draw();
+    }
+  };
+
   /**
    * Updates the positions of all displayed sources in the view.
    *
@@ -568,6 +578,7 @@ define([
     this._peaks.off('data.retrieved', this._onDataRetrieved);
     this._peaks.off('sources.refresh', this._onSourcesRefresh);
     this._peaks.off('segments.show', this._onSegmentsShow);
+    this._peaks.off('source.setIndicators', this.setIndicators);
   };
 
   SourcesLayer.prototype.getHeight = function() {

package/src/timeline-sources.js

@@ -98,7 +98,7 @@ define([
       wrapping: sourceToCut.wrapping,
       previewHeight: sourceToCut.previewHeight,
       binaryHeight: sourceToCut.binaryHeight
-    }]);
+    }])[0];
 
     this._peaks.emit('sources.updated', [sourceToCut, newSource]);
   };
@@ -179,7 +179,8 @@ define([
       options.deletable,
       options.wrapping,
       options.previewHeight,
-      options.binaryHeight
+      options.binaryHeight,
+      options.indicators
     );
 
     return source;
@@ -283,6 +284,8 @@ define([
     });
 
     this._peaks.emit('sources.add', sources);
+
+    return sources;
   };
 
   /**