@checksub_team/peaks_timeline 1.4.47 → 1.4.50

package/package.json

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

package/peaks.js

@@ -16693,21 +16693,26 @@ module.exports = function (Konva, SegmentMarker, Utils) {
 module.exports = function (Utils) {
     'use strict';
     function validateSegment(peaks, options, context) {
+        var shouldNotifyUpdate = false;
         if (!Utils.isValidTime(options.startTime)) {
             throw new TypeError('peaks.segments.' + context + ': startTime should be a valid number');
         }
         if (!Utils.isValidTime(options.endTime)) {
             options.endTime = options.startTime;
+            shouldNotifyUpdate = true;
         }
         options.startTime = Utils.roundTime(options.startTime);
         options.endTime = Utils.roundTime(options.endTime);
         if (options.startTime < 0) {
             options.startTime = 0;
+            shouldNotifyUpdate = true;
         }
         if (options.endTime < 0) {
             options.endTime = 0;
+            shouldNotifyUpdate = true;
         } else if (options.endTime - options.startTime < peaks.options.minSegmentSize) {
             options.endTime = options.startTime + peaks.options.minSegmentSize;
+            shouldNotifyUpdate = true;
         }
         options.startTime = Utils.roundTime(options.startTime);
         options.endTime = Utils.roundTime(options.endTime);
@@ -16732,6 +16737,7 @@ module.exports = function (Utils) {
         } else if (!Utils.isValidColor(options.hoverColor)) {
             throw new TypeError('peaks.segments.' + context + ': hoverColor must be a boolean');
         }
+        return shouldNotifyUpdate;
     }
     function Segment(peaks, id, startTime, endTime, labelText, color, textColor, handleTextColor, hoverColor, opacity, editable, allowDeletion, line, indicators) {
         var opts = {
@@ -16748,7 +16754,7 @@ module.exports = function (Utils) {
             line: line,
             indicators: indicators
         };
-        validateSegment(peaks, opts, 'add()');
+        var shouldNotifyUpdate = validateSegment(peaks, opts, 'add()');
         this._peaks = peaks;
         this._id = id;
         this._startTime = opts.startTime;
@@ -16764,6 +16770,9 @@ module.exports = function (Utils) {
         this._line = opts.line;
         this._indicators = opts.indicators;
         this._minSize = peaks.options.minSegmentSize;
+        if (shouldNotifyUpdate) {
+            peaks.emit('segments.updated', [this]);
+        }
     }
     Object.defineProperties(Segment.prototype, {
         id: {
@@ -16873,7 +16882,7 @@ module.exports = function (Utils) {
             indicators: this.indicators
         };
         Utils.extend(opts, options);
-        validateSegment(this._peaks, opts, 'update()');
+        var shouldNotifyUpdate = validateSegment(this._peaks, opts, 'update()');
         this._startTime = opts.startTime;
         this._endTime = opts.endTime;
         this._labelText = opts.labelText;
@@ -16887,6 +16896,9 @@ module.exports = function (Utils) {
         this._line = opts.line;
         this._indicators = opts.indicators;
         this._peaks.emit('segment.updated', this);
+        if (shouldNotifyUpdate) {
+            this._peaks.emit('segments.updated', [this]);
+        }
     };
     Segment.prototype.isVisible = function (startTime, endTime) {
         return this.startTime < endTime && startTime < this.endTime;
@@ -17452,6 +17464,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         this._group.on('dragend', this._onSourceGroupDragEnd.bind(this));
         this._addWrap(true);
         this._addUnwrap(true);
+        this._addTitle(true);
         this._addHandles(true);
         this.setWrapping(source.wrapped);
     }
@@ -17504,12 +17517,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             this._width = newWidth;
             this._rightHandle.x(newWidth - HANDLE_WIDTH);
             this.updatePreviews();
-            var title = this._wrap.getChildren(function (node) {
-                return node.getClassName() === 'Text';
-            });
-            if (title) {
-                title.width(newWidth - 10);
-            }
+            this._title.width(newWidth - 10);
         }
     };
     SourceGroup.prototype.setWrapping = function (wrap) {
@@ -17736,10 +17744,20 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 }
             });
         }
+        wrap.add(background);
+        return wrap;
+    };
+    SourceGroup.prototype._addTitle = function (forceCreate) {
+        if (!this._title || forceCreate) {
+            this._title = this._createTitle();
+        }
+        this._group.add(this._title);
+    };
+    SourceGroup.prototype._createTitle = function () {
         var title = new Konva.Text({
             x: 5,
+            y: 5,
             width: this._width - 10,
-            height: this._wrappedHeight,
             text: Utils.removeLineBreaks(this._source.title),
             textAlign: 'left',
             verticalAlign: 'middle',
@@ -17750,9 +17768,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             ellipsis: true,
             listening: false
         });
-        wrap.add(background);
-        wrap.add(title);
-        return wrap;
+        return title;
     };
     SourceGroup.prototype.getWidth = function () {
         return this._width;
@@ -18244,13 +18260,14 @@ module.exports = function (Utils) {
             options.wrapped = false;
         }
     }
-    function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, 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, borderColor, selectedColor, textColor, borderWidth, wrapped, position, draggable, resizable, wrapping, previewHeight, binaryHeight) {
         var opts = {
             title: title,
             url: url,
             previewUrl: previewUrl,
             binaryUrl: binaryUrl,
             kind: kind,
+            subkind: subkind,
             duration: duration,
             startTime: startTime,
             endTime: endTime,
@@ -18279,6 +18296,7 @@ module.exports = function (Utils) {
         this._previewUrl = opts.previewUrl;
         this._binaryUrl = opts.binaryUrl;
         this._kind = opts.kind;
+        this._subkind = opts.subkind;
         this._duration = opts.duration;
         this._startTime = opts.startTime;
         this._endTime = opts.endTime;
@@ -18353,6 +18371,15 @@ module.exports = function (Utils) {
                 this._kind = kind;
             }
         },
+        subkind: {
+            enumerable: true,
+            get: function () {
+                return this._subkind;
+            },
+            set: function (subkind) {
+                this._subkind = subkind;
+            }
+        },
         duration: {
             enumerable: true,
             get: function () {
@@ -18595,6 +18622,7 @@ module.exports = function (Utils) {
             previewUrl: this.previewUrl,
             binaryUrl: this.binaryUrl,
             kind: this.kind,
+            subkind: this.subkind,
             duration: this.duration,
             startTime: this.startTime,
             endTime: this.endTime,
@@ -18620,6 +18648,7 @@ module.exports = function (Utils) {
         this._previewUrl = opts.previewUrl;
         this._binaryUrl = opts.binaryUrl;
         this._kind = opts.kind;
+        this._subkind = opts.subkind;
         this._duration = opts.duration;
         this._startTime = opts.startTime;
         this._endTime = opts.endTime;
@@ -19313,6 +19342,7 @@ module.exports = function (Source, Utils) {
                 previewUrl: sourceToCut.previewUrl,
                 binaryUrl: sourceToCut.binaryUrl,
                 kind: sourceToCut.kind,
+                subkind: sourceToCut.subkind,
                 duration: sourceToCut.duration,
                 startTime: sourceToCut.endTime,
                 endTime: originalEndTime,
@@ -19344,7 +19374,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.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.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 () {

package/src/segment.js

@@ -12,25 +12,31 @@ define([
   'use strict';
 
   function validateSegment(peaks, options, context) {
+    var shouldNotifyUpdate = false;
+
     if (!Utils.isValidTime(options.startTime)) {
       throw new TypeError('peaks.segments.' + context + ': startTime should be a valid number');
     }
 
     if (!Utils.isValidTime(options.endTime)) {
       options.endTime = options.startTime;
+      shouldNotifyUpdate = true;
     }
 
     options.startTime = Utils.roundTime(options.startTime);
     options.endTime = Utils.roundTime(options.endTime);
     if (options.startTime < 0) {
       options.startTime = 0;
+      shouldNotifyUpdate = true;
     }
 
     if (options.endTime < 0) {
       options.endTime = 0;
+      shouldNotifyUpdate = true;
     }
     else if (options.endTime - options.startTime < peaks.options.minSegmentSize) {
       options.endTime = options.startTime + peaks.options.minSegmentSize;
+      shouldNotifyUpdate = true;
     }
 
     options.startTime = Utils.roundTime(options.startTime);
@@ -64,6 +70,8 @@ define([
     else if (!Utils.isValidColor(options.hoverColor)) {
       throw new TypeError('peaks.segments.' + context + ': hoverColor must be a boolean');
     }
+
+    return shouldNotifyUpdate;
   }
 
   /**
@@ -106,7 +114,7 @@ define([
       indicators:      indicators
     };
 
-    validateSegment(peaks, opts, 'add()');
+    var shouldNotifyUpdate = validateSegment(peaks, opts, 'add()');
 
     this._peaks           = peaks;
     this._id              = id;
@@ -123,6 +131,10 @@ define([
     this._line            = opts.line;
     this._indicators      = opts.indicators;
     this._minSize         = peaks.options.minSegmentSize;
+
+    if (shouldNotifyUpdate) {
+      peaks.emit('segments.updated', [this]);
+    }
   }
 
   Object.defineProperties(Segment.prototype, {
@@ -238,7 +250,7 @@ define([
 
     Utils.extend(opts, options);
 
-    validateSegment(this._peaks, opts, 'update()');
+    var shouldNotifyUpdate = validateSegment(this._peaks, opts, 'update()');
 
     this._startTime       = opts.startTime;
     this._endTime         = opts.endTime;
@@ -254,6 +266,10 @@ define([
     this._indicators      = opts.indicators;
 
     this._peaks.emit('segment.updated', this);
+
+    if (shouldNotifyUpdate) {
+      this._peaks.emit('segments.updated', [this]);
+    }
   };
 
   /**

package/src/source-group.js

@@ -86,6 +86,7 @@ define([
 
     this._addWrap(true);
     this._addUnwrap(true);
+    this._addTitle(true);
     this._addHandles(true);
 
     this.setWrapping(source.wrapped);
@@ -205,13 +206,7 @@ define([
       this.updatePreviews();
 
       // update wrap
-      var title = this._wrap.getChildren(function(node) {
-        return node.getClassName() === 'Text';
-      });
-
-      if (title) {
-        title.width(newWidth - 10);
-      }
+      this._title.width(newWidth - 10);
     }
   };
 
@@ -498,10 +493,24 @@ define([
       });
     }
 
+    wrap.add(background);
+
+    return wrap;
+  };
+
+  SourceGroup.prototype._addTitle = function(forceCreate) {
+    if (!this._title || forceCreate) {
+      this._title = this._createTitle();
+    }
+
+    this._group.add(this._title);
+  };
+
+  SourceGroup.prototype._createTitle = function() {
     var title = new Konva.Text({
       x: 5,
+      y: 5,
       width: this._width - 10,
-      height: this._wrappedHeight,
       text: Utils.removeLineBreaks(this._source.title),
       textAlign: 'left',
       verticalAlign: 'middle',
@@ -513,10 +522,7 @@ define([
       listening: false
     });
 
-    wrap.add(background);
-    wrap.add(title);
-
-    return wrap;
+    return title;
   };
 
   SourceGroup.prototype.getWidth = function() {

package/src/source.js

@@ -220,7 +220,7 @@ define([
    */
 
   function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind,
-    duration, startTime, endTime, mediaStartTime, mediaEndTime, color, borderColor,
+    subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, borderColor,
     selectedColor, textColor, borderWidth, wrapped, position, draggable, resizable, wrapping,
     previewHeight, binaryHeight) {
     var opts = {
@@ -229,6 +229,7 @@ define([
       previewUrl: previewUrl,
       binaryUrl: binaryUrl,
       kind: kind,
+      subkind: subkind,
       duration: duration,
       startTime: startTime,
       endTime: endTime,
@@ -259,6 +260,7 @@ define([
     this._previewUrl = opts.previewUrl;
     this._binaryUrl = opts.binaryUrl;
     this._kind = opts.kind;
+    this._subkind = opts.subkind;
     this._duration = opts.duration;
     this._startTime = opts.startTime;
     this._endTime = opts.endTime;
@@ -336,6 +338,16 @@ define([
         this._kind = kind;
       }
     },
+    subkind: {
+      enumerable: true,
+      get: function() {
+        return this._subkind;
+      },
+
+      set: function(subkind) {
+        this._subkind = subkind;
+      }
+    },
     duration: {
       enumerable: true,
       get: function() {
@@ -622,6 +634,7 @@ define([
       previewUrl: this.previewUrl,
       binaryUrl: this.binaryUrl,
       kind: this.kind,
+      subkind: this.subkind,
       duration: this.duration,
       startTime: this.startTime,
       endTime: this.endTime,
@@ -650,6 +663,7 @@ define([
     this._previewUrl = opts.previewUrl;
     this._binaryUrl = opts.binaryUrl;
     this._kind = opts.kind;
+    this._subkind = opts.subkind;
     this._duration = opts.duration;
     this._startTime = opts.startTime;
     this._endTime = opts.endTime;

package/src/timeline-sources.js

@@ -71,6 +71,7 @@ define([
       previewUrl: sourceToCut.previewUrl,
       binaryUrl: sourceToCut.binaryUrl,
       kind: sourceToCut.kind,
+      subkind: sourceToCut.subkind,
       duration: sourceToCut.duration,
       startTime: sourceToCut.endTime,
       endTime: originalEndTime,
@@ -143,6 +144,7 @@ define([
       options.previewUrl,
       options.binaryUrl,
       options.kind,
+      options.subkind,
       options.duration,
       options.startTime,
       options.endTime,