@checksub_team/peaks_timeline 1.4.21 → 1.4.25

package/package.json

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

package/peaks.js

@@ -15419,7 +15419,8 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
             autoScrollThreshold: 0.05,
             enableLineIndicatorContextMenu: true,
             minSourceSize: 0.05,
-            minSegmentSize: 0.2
+            minSegmentSize: 0.2,
+            canMoveSourcesBetweenLines: true
         };
         this.logger = console.error.bind(console);
         return this;
@@ -15561,9 +15562,6 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
     Peaks.prototype.allowInteractions = function (forSources, forSegments) {
         return this.view.allowInteractions(forSources, forSegments);
     };
-    Peaks.prototype.checkOverlapping = function (segment, message) {
-        return this.view.getSegmentsGroup().checkOverlapping(segment, message);
-    };
     Peaks.prototype._addWindowResizeHandler = function () {
         this._onResize = this._onResize.bind(this);
         window.addEventListener('resize', this._onResize);
@@ -15992,17 +15990,17 @@ module.exports = function (Utils) {
     };
     Player.prototype.play = function () {
         if (!this._playInterval) {
-            var prevTime = Date.now();
+            var prevTime = performance.now();
             var time;
             var self = this;
             this._isPlaying = true;
             this._peaks.overrideInteractions(true, false);
             this._playInterval = setInterval(function () {
-                time = Date.now();
+                time = performance.now();
                 self._currentTime += (time - prevTime) / 1000 * self._speed;
                 prevTime = time;
                 self._peaks.emit('timeline.update', self._currentTime);
-            }, 10);
+            }, 20);
             this._peaks.emit('timeline.play', this._currentTime);
         }
     };
@@ -16563,7 +16561,6 @@ module.exports = function (Konva, SegmentMarker) {
     };
     SegmentShape.prototype._onSegmentDragStart = function () {
         this._view.setCursor('grab');
-        this._group.checkOverlapping(this._segment, 'overlapping before dragging');
         this._mouseDownX = this._view.getPointerPosition().x;
         this._initialStartTime = this._segment.startTime;
         this._initialStartPixel = this._view.timeToPixels(this._initialStartTime);
@@ -16573,7 +16570,6 @@ module.exports = function (Konva, SegmentMarker) {
     };
     SegmentShape.prototype._onSegmentDragEnd = function () {
         this._view.setCursor('pointer');
-        this._group.checkOverlapping(this._segment, 'overlapping after dragging');
         this._peaks.emit('segments.dragend', this._segment);
     };
     SegmentShape.prototype._onSegmentHandleDrag = function () {
@@ -16581,12 +16577,10 @@ module.exports = function (Konva, SegmentMarker) {
     };
     SegmentShape.prototype._onSegmentHandleDragStart = function (segmentMarker) {
         var startMarker = segmentMarker.isStartMarker();
-        this._group.checkOverlapping(this._segment, 'overlapping before dragging');
         this._peaks.emit('segments.dragstart', this._segment, startMarker);
     };
     SegmentShape.prototype._onSegmentHandleDragEnd = function (segmentMarker) {
         var startMarker = segmentMarker.isStartMarker();
-        this._group.checkOverlapping(this._segment, 'overlapping after dragging');
         this._peaks.emit('segments.dragend', this._segment, startMarker);
     };
     SegmentShape.prototype.fitToView = function () {
@@ -16754,7 +16748,6 @@ module.exports = function (Utils) {
         };
         Utils.extend(opts, options);
         validateSegment(this._peaks, opts, 'update()');
-        this._peaks.checkOverlapping(this, 'overlapping before manual update');
         this._startTime = opts.startTime;
         this._endTime = opts.endTime;
         this._labelText = opts.labelText;
@@ -16763,7 +16756,6 @@ module.exports = function (Utils) {
         this._handleTextColor = opts.handleTextColor;
         this._opacity = opts.opacity;
         this._editable = opts.editable;
-        this._peaks.checkOverlapping(this, 'overlapping after manual update');
         this._peaks.emit('segment.updated', this);
     };
     Segment.prototype.isVisible = function (startTime, endTime) {
@@ -16784,7 +16776,6 @@ module.exports = function (SegmentShape, Utils, Konva) {
         this._segmentShapes = {};
         this._group = new Konva.Group();
         this._updatedSegments = [];
-        this._overlappingSegments = [];
         this._isMagnetized = false;
         this._peaks.on('segment.updated', this._onSegmentsUpdate.bind(this));
         this._peaks.on('segments.add', this._onSegmentsAdd.bind(this));
@@ -16834,7 +16825,6 @@ module.exports = function (SegmentShape, Utils, Konva) {
         return activeSegment;
     };
     SegmentsGroup.prototype._onSegmentsUpdate = function (segment) {
-        this._overlappingSegments = [];
         if (this._segments[segment.id]) {
             var redraw = false;
             var segmentShape = this._segmentShapes[segment.id];
@@ -16860,7 +16850,6 @@ module.exports = function (SegmentShape, Utils, Konva) {
     SegmentsGroup.prototype._onSegmentUpdated = function () {
         this._peaks.emit('segments.updated', this._updatedSegments);
         this._updatedSegments = [];
-        this._overlappingSegments = [];
     };
     SegmentsGroup.prototype._onSegmentsAdd = function (segments) {
         var self = this;
@@ -17058,19 +17047,6 @@ module.exports = function (SegmentShape, Utils, Konva) {
             this._draw();
         }
     };
-    SegmentsGroup.prototype.checkOverlapping = function (segment, message) {
-        if (this._segments[segment.id].prevSegmentId && this._segments[this._segments[segment.id].prevSegmentId].segment.endTime > segment.startTime || this._segments[segment.id].nextSegmentId && this._segments[this._segments[segment.id].nextSegmentId].segment.startTime < segment.endTime) {
-            if (!this._overlappingSegments.includes(segment.id)) {
-                this._peaks.emit('segments.overlap', {
-                    message: message,
-                    segment: segment,
-                    prevSegment: this._segments[segment.id].prevSegmentId ? this._segments[this._segments[segment.id].prevSegmentId].segment : null,
-                    nextSegment: this._segments[segment.id].nextSegmentId ? this._segments[this._segments[segment.id].nextSegmentId].segment : null
-                });
-                this._overlappingSegments.push(segment.id);
-            }
-        }
-    };
     SegmentsGroup.prototype.manageCollision = function (segment, newStartX, newEndX) {
         var newStartTime = null;
         var newEndTime = null;
@@ -18101,8 +18077,11 @@ module.exports = function (Utils) {
         } else if (options.wrapping === 'complete') {
             options.wrapped = false;
         }
+        if (!Utils.isNullOrUndefined(options.tts) && !Utils.isBoolean(options.tts)) {
+            throw new TypeError('peaks.sources.' + context + ': tts must be a boolean or undefined');
+        }
     }
-    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, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, borderColor, selectedColor, textColor, borderWidth, wrapped, position, draggable, resizable, wrapping, previewHeight, binaryHeight, tts) {
         var opts = {
             title: title,
             url: url,
@@ -18125,7 +18104,8 @@ module.exports = function (Utils) {
             resizable: resizable,
             wrapping: wrapping,
             previewHeight: previewHeight,
-            binaryHeight: binaryHeight
+            binaryHeight: binaryHeight,
+            tts: tts
         };
         validateSource(peaks, opts, 'add()');
         this._peaks = peaks;
@@ -18155,6 +18135,7 @@ module.exports = function (Utils) {
         this._previewHeight = opts.previewHeight;
         this._binaryHeight = opts.binaryHeight;
         this._minSize = peaks.options.minSourceSize;
+        this._tts = opts.tts;
     }
     Object.defineProperties(Source.prototype, {
         id: {
@@ -18360,6 +18341,14 @@ module.exports = function (Utils) {
             get: function () {
                 return this._minSize;
             }
+        },
+        tts: {
+            get: function () {
+                return this._tts;
+            },
+            set: function (tts) {
+                this._tts = tts;
+            }
         }
     });
     Source.prototype.updateTimes = function (newStartTime, newEndTime) {
@@ -18469,7 +18458,8 @@ module.exports = function (Utils) {
             resizable: this.resizable,
             wrapping: this.wrapping,
             previewHeight: this.previewHeight,
-            binaryHeight: this.binaryHeight
+            binaryHeight: this.binaryHeight,
+            tts: this._tts
         };
         Utils.extend(opts, options);
         validateSource(this._peaks, opts, 'update()');
@@ -18495,6 +18485,7 @@ module.exports = function (Utils) {
         this._wrapping = opts.wrapping;
         this._previewHeight = opts.previewHeight;
         this._binaryHeight = opts.binaryHeight;
+        this._tts = opts.tts;
         this._peaks.emit('source.update', this);
     };
     Source.prototype.isVisible = function (startTime, endTime) {
@@ -18673,7 +18664,9 @@ module.exports = function (SourceGroup, SegmentsGroup, Lines, DataRetriever, Uti
             endX: newEndX,
             updateWidth: false
         };
-        this.manageVerticalPosition(source, newY);
+        if (this._peaks.options.canMoveSourcesBetweenLines) {
+            this.manageVerticalPosition(source, newY);
+        }
         newXs = this.manageSourceOrder(source, newStartX, newEndX);
         newXs = this.manageCollision(source, newXs.startX, newXs.endX);
         source.updateTimes(newXs.startX !== null ? this._view.pixelsToTime(newXs.startX) : null, newXs.endX !== null ? this._view.pixelsToTime(newXs.endX) : null);
@@ -19157,7 +19150,8 @@ module.exports = function (Source, Utils) {
                 resizable: sourceToCut.resizable,
                 wrapping: sourceToCut.wrapping,
                 previewHeight: sourceToCut.previewHeight,
-                binaryHeight: sourceToCut.binaryHeight
+                binaryHeight: sourceToCut.binaryHeight,
+                tts: sourceToCut.tts
             }]);
         this._peaks.emit('sources.updated');
     };
@@ -19172,7 +19166,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.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, options.tts);
         return source;
     };
     TimelineSources.prototype.getSources = function () {

package/src/main.js

@@ -310,7 +310,13 @@ define([
       /**
        * The minimal size of a segment, in seconds
        */
-      minSegmentSize:           0.2
+      minSegmentSize:           0.2,
+
+      /**
+       * Indicates whether or not sources can be dragged
+       * from one line to another
+       */
+      canMoveSourcesBetweenLines: true
     };
 
     /**
@@ -622,12 +628,6 @@ define([
             .allowInteractions(forSources, forSegments);
   };
 
-  Peaks.prototype.checkOverlapping = function(segment, message) {
-    return this.view
-            .getSegmentsGroup()
-            .checkOverlapping(segment, message);
-  };
-
   Peaks.prototype._addWindowResizeHandler = function() {
     this._onResize = this._onResize.bind(this);
     window.addEventListener('resize', this._onResize);

package/src/player.js

@@ -66,7 +66,7 @@ define([
 
   Player.prototype.play = function() {
     if (!this._playInterval) {
-      var prevTime = Date.now();
+      var prevTime = performance.now();
       var time;
       var self = this;
 
@@ -75,11 +75,11 @@ define([
       this._peaks.overrideInteractions(true, false);
 
       this._playInterval = setInterval(function() {
-        time = Date.now();
+        time = performance.now();
         self._currentTime += ((time - prevTime) / 1000) * self._speed;
         prevTime = time;
         self._peaks.emit('timeline.update', self._currentTime);
-      }, 10);
+      }, 20);
 
       this._peaks.emit('timeline.play', this._currentTime);
     }

package/src/segment-shape.js

@@ -272,8 +272,6 @@ define([
   SegmentShape.prototype._onSegmentDragStart = function() {
     this._view.setCursor('grab');
 
-    this._group.checkOverlapping(this._segment, 'overlapping before dragging');
-
     this._mouseDownX = this._view.getPointerPosition().x;
     this._initialStartTime = this._segment.startTime;
     this._initialStartPixel = this._view.timeToPixels(this._initialStartTime);
@@ -286,8 +284,6 @@ define([
   SegmentShape.prototype._onSegmentDragEnd = function() {
     this._view.setCursor('pointer');
 
-    this._group.checkOverlapping(this._segment, 'overlapping after dragging');
-
     this._peaks.emit('segments.dragend', this._segment);
   };
 
@@ -306,8 +302,6 @@ define([
   SegmentShape.prototype._onSegmentHandleDragStart = function(segmentMarker) {
     var startMarker = segmentMarker.isStartMarker();
 
-    this._group.checkOverlapping(this._segment, 'overlapping before dragging');
-
     this._peaks.emit('segments.dragstart', this._segment, startMarker);
   };
 
@@ -318,8 +312,6 @@ define([
   SegmentShape.prototype._onSegmentHandleDragEnd = function(segmentMarker) {
     var startMarker = segmentMarker.isStartMarker();
 
-    this._group.checkOverlapping(this._segment, 'overlapping after dragging');
-
     this._peaks.emit('segments.dragend', this._segment, startMarker);
   };
 

package/src/segment.js

@@ -191,8 +191,6 @@ define([
 
     validateSegment(this._peaks, opts, 'update()');
 
-    this._peaks.checkOverlapping(this, 'overlapping before manual update');
-
     this._startTime       = opts.startTime;
     this._endTime         = opts.endTime;
     this._labelText       = opts.labelText;
@@ -202,8 +200,6 @@ define([
     this._opacity         = opts.opacity;
     this._editable        = opts.editable;
 
-    this._peaks.checkOverlapping(this, 'overlapping after manual update');
-
     this._peaks.emit('segment.updated', this);
   };
 

package/src/segments-group.js

@@ -41,7 +41,6 @@ define([
     this._group         = new Konva.Group();
 
     this._updatedSegments = [];
-    this._overlappingSegments = [];
 
     this._isMagnetized = false;
 
@@ -114,8 +113,6 @@ define([
   };
 
   SegmentsGroup.prototype._onSegmentsUpdate = function(segment) {
-    this._overlappingSegments = [];
-
     if (this._segments[segment.id]) {
       var redraw = false;
       var segmentShape = this._segmentShapes[segment.id];
@@ -146,7 +143,6 @@ define([
   SegmentsGroup.prototype._onSegmentUpdated = function() {
     this._peaks.emit('segments.updated', this._updatedSegments);
     this._updatedSegments = [];
-    this._overlappingSegments = [];
   };
 
   SegmentsGroup.prototype._onSegmentsAdd = function(segments) {
@@ -464,25 +460,6 @@ define([
     }
   };
 
-  SegmentsGroup.prototype.checkOverlapping = function(segment, message) {
-    /* eslint-disable max-len */
-    if ((this._segments[segment.id].prevSegmentId
-        && this._segments[this._segments[segment.id].prevSegmentId].segment.endTime > segment.startTime)
-      || (this._segments[segment.id].nextSegmentId
-        && this._segments[this._segments[segment.id].nextSegmentId].segment.startTime < segment.endTime)) {
-      if (!this._overlappingSegments.includes(segment.id)) {
-        this._peaks.emit('segments.overlap', {
-          message: message,
-          segment: segment,
-          prevSegment: this._segments[segment.id].prevSegmentId ? this._segments[this._segments[segment.id].prevSegmentId].segment : null,
-          nextSegment: this._segments[segment.id].nextSegmentId ? this._segments[this._segments[segment.id].nextSegmentId].segment : null
-        });
-        this._overlappingSegments.push(segment.id);
-      }
-    }
-    /* eslint-enable max-len */
-  };
-
   SegmentsGroup.prototype.manageCollision = function(segment, newStartX, newEndX) {
     var newStartTime = null;
     var newEndTime = null;

package/src/source.js

@@ -197,6 +197,10 @@ define([
     else if (options.wrapping === 'complete') {
       options.wrapped = false;
     }
+
+    if (!Utils.isNullOrUndefined(options.tts) && !Utils.isBoolean(options.tts)) {
+      throw new TypeError('peaks.sources.' + context + ': tts must be a boolean or undefined');
+    }
   }
 
   /**
@@ -222,7 +226,7 @@ define([
   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) {
+    previewHeight, binaryHeight, tts) {
     var opts = {
       title: title,
       url: url,
@@ -245,7 +249,8 @@ define([
       resizable: resizable,
       wrapping: wrapping,
       previewHeight: previewHeight,
-      binaryHeight: binaryHeight
+      binaryHeight: binaryHeight,
+      tts: tts
     };
 
     validateSource(peaks, opts, 'add()');
@@ -277,6 +282,7 @@ define([
     this._previewHeight = opts.previewHeight;
     this._binaryHeight = opts.binaryHeight;
     this._minSize = peaks.options.minSourceSize;
+    this._tts = opts.tts;
   }
 
   Object.defineProperties(Source.prototype, {
@@ -497,6 +503,15 @@ define([
       get: function() {
         return this._minSize;
       }
+    },
+    tts: {
+      get: function() {
+        return this._tts;
+      },
+
+      set: function(tts) {
+        this._tts = tts;
+      }
     }
   });
 
@@ -638,7 +653,8 @@ define([
       resizable: this.resizable,
       wrapping: this.wrapping,
       previewHeight: this.previewHeight,
-      binaryHeight: this.binaryHeight
+      binaryHeight: this.binaryHeight,
+      tts: this._tts
     };
 
     Utils.extend(opts, options);
@@ -667,6 +683,7 @@ define([
     this._wrapping = opts.wrapping;
     this._previewHeight = opts.previewHeight;
     this._binaryHeight = opts.binaryHeight;
+    this._tts = opts.tts;
 
     this._peaks.emit('source.update', this);
   };

package/src/sources-layer.js

@@ -297,7 +297,9 @@ define([
       updateWidth: false
     };
 
-    this.manageVerticalPosition(source, newY);
+    if (this._peaks.options.canMoveSourcesBetweenLines) {
+      this.manageVerticalPosition(source, newY);
+    }
 
     newXs = this.manageSourceOrder(source, newStartX, newEndX);
 

package/src/timeline-sources.js

@@ -87,7 +87,8 @@ define([
       resizable: sourceToCut.resizable,
       wrapping: sourceToCut.wrapping,
       previewHeight: sourceToCut.previewHeight,
-      binaryHeight: sourceToCut.binaryHeight
+      binaryHeight: sourceToCut.binaryHeight,
+      tts: sourceToCut.tts
     }]);
 
     this._peaks.emit('sources.updated');
@@ -159,7 +160,8 @@ define([
       options.resizable,
       options.wrapping,
       options.previewHeight,
-      options.binaryHeight
+      options.binaryHeight,
+      options.tts
     );
 
     return source;