@checksub_team/peaks_timeline 1.4.23 → 1.4.26

package/package.json

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

package/peaks.js

@@ -14754,6 +14754,35 @@ module.exports = function (Konva, Utils) {
     Line.prototype.lineHeight = function () {
         return this._height;
     };
+    Line.prototype.changeHeight = function (from, to) {
+        if (this._sourceHeights[from]) {
+            var oldHeight = this._height;
+            if (this._sourceHeights[to]) {
+                this._sourceHeights[to] += this._sourceHeights[from];
+            } else {
+                this._sourceHeights[to] = this._sourceHeights[from];
+            }
+            if (to > this._height) {
+                this._height = to;
+            } else if (from === this._height) {
+                this._height = 0;
+                for (var height in this._sourceHeights) {
+                    if (Utils.objectHasProperty(this._sourceHeights, height)) {
+                        var parsedHeight = parseInt(height, 10);
+                        if (parsedHeight !== from) {
+                            if (parsedHeight > this._height) {
+                                this._height = parsedHeight;
+                            }
+                        }
+                    }
+                }
+            }
+            if (this._height !== oldHeight) {
+                this._peaks.emit('line.heightChanged', this._position);
+            }
+            delete this._sourceHeights[from];
+        }
+    };
     Line.prototype.updateLineHeight = function (sourceGroup, action) {
         var oldHeight = this._height;
         var sourceGroupHeight;
@@ -14782,7 +14811,7 @@ module.exports = function (Konva, Utils) {
                     for (var height in this._sourceHeights) {
                         if (Utils.objectHasProperty(this._sourceHeights, height)) {
                             var parsedHeight = parseInt(height, 10);
-                            if (parseInt(height, 10) > this._height) {
+                            if (parsedHeight > this._height) {
                                 this._height = parsedHeight;
                             }
                         }
@@ -15148,6 +15177,15 @@ module.exports = function (Line, LineIndicator, Utils) {
         var lineNewY = oldLine.getY();
         this._updateLinesPosition(position, lineNewY);
     };
+    Lines.prototype.changeLineHeight = function (from, to) {
+        for (var position in this._linesByPosition) {
+            if (Utils.objectHasProperty(this._linesByPosition, position)) {
+                if (!this._linesByPosition[position].isSegmentsLine()) {
+                    this._linesByPosition[position].changeHeight(from, to);
+                }
+            }
+        }
+    };
     Lines.prototype.addSourceGroup = function (sourceGroup, position) {
         if (!this._linesByPosition[position]) {
             this._createLine(position);
@@ -15419,7 +15457,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;
@@ -15571,6 +15610,11 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
     Peaks.prototype._removeWindowResizeHandler = function () {
         window.removeEventListener('resize', this._onResize);
     };
+    Peaks.prototype.setLineHeight = function (newLineHeight) {
+        var oldHeight = this.options.lineHeight;
+        this.options.lineHeight = newLineHeight;
+        this.emit('options.set.line_height', oldHeight);
+    };
     Peaks.prototype.destroy = function () {
         this._removeWindowResizeHandler();
         if (this.keyboardHandler) {
@@ -15696,12 +15740,15 @@ module.exports = function (Utils, SourceGroup, Konva) {
         if (hoveredElement) {
             if (this._selectedElement) {
                 this._selectedElement.setSelected(false);
+                this._peaks.emit('source.deselected', this._selectedElement.getSource());
             }
             this._selectedElement = hoveredElement;
             this._selectedElement.setSelected(true);
+            this._peaks.emit('source.selected', this._selectedElement.getSource());
         } else {
             if (this._selectedElement) {
                 this._selectedElement.setSelected(false);
+                this._peaks.emit('source.deselected', this._selectedElement.getSource());
                 this._selectedElement = null;
             }
         }
@@ -18076,8 +18123,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,
@@ -18100,7 +18150,8 @@ module.exports = function (Utils) {
             resizable: resizable,
             wrapping: wrapping,
             previewHeight: previewHeight,
-            binaryHeight: binaryHeight
+            binaryHeight: binaryHeight,
+            tts: tts
         };
         validateSource(peaks, opts, 'add()');
         this._peaks = peaks;
@@ -18130,6 +18181,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: {
@@ -18335,6 +18387,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) {
@@ -18444,7 +18504,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()');
@@ -18470,6 +18531,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) {
@@ -18500,6 +18562,7 @@ module.exports = function (SourceGroup, SegmentsGroup, Lines, DataRetriever, Uti
         this._peaks.on('data.retrieved', this._onDataRetrieved.bind(this));
         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));
     }
     SourcesLayer.prototype.getLoadedData = function (id) {
         return this._loadedData[id];
@@ -18522,6 +18585,25 @@ module.exports = function (SourceGroup, SegmentsGroup, Lines, DataRetriever, Uti
     SourcesLayer.prototype.isEditingEnabled = function () {
         return this._allowEditing;
     };
+    SourcesLayer.prototype._onOptionsLineHeightChange = function (oldHeight) {
+        var positions = [];
+        for (var sourceId in this._sourcesGroup) {
+            if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
+                var source = this._sourcesGroup[sourceId].getSource();
+                if (!positions.includes(source.position)) {
+                    this._lines.changeLineHeight(oldHeight, this._peaks.options.lineHeight);
+                    positions.push(source.position);
+                }
+                this._removeSource(source);
+                this._addSourceGroup(source);
+            }
+        }
+        if (positions) {
+            var frameOffset = this._view.getFrameOffset();
+            var width = this._view.getWidth();
+            this.updateSources(this._view.pixelsToTime(frameOffset), this._view.pixelsToTime(frameOffset + width));
+        }
+    };
     SourcesLayer.prototype._onSourceUpdate = function (source) {
         var redraw = false;
         var sourceGroup = this._sourcesGroup[source.id];
@@ -18648,7 +18730,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);
@@ -19132,7 +19216,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');
     };
@@ -19147,7 +19232,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/line.js

@@ -91,6 +91,43 @@ define([
     return this._height;
   };
 
+  Line.prototype.changeHeight = function(from, to) {
+    if (this._sourceHeights[from]) {
+      var oldHeight = this._height;
+
+      if (this._sourceHeights[to]) {
+        this._sourceHeights[to] += this._sourceHeights[from];
+      }
+      else {
+        this._sourceHeights[to] = this._sourceHeights[from];
+      }
+
+      if (to > this._height) {
+        this._height = to;
+      }
+      else if (from === this._height) {
+        this._height = 0;
+        for (var height in this._sourceHeights) {
+          if (Utils.objectHasProperty(this._sourceHeights, height)) {
+            var parsedHeight = parseInt(height, 10);
+
+            if (parsedHeight !== from) {
+              if (parsedHeight > this._height) {
+                this._height = parsedHeight;
+              }
+            }
+          }
+        }
+      }
+
+      if (this._height !== oldHeight) {
+        this._peaks.emit('line.heightChanged', this._position);
+      }
+
+      delete this._sourceHeights[from];
+    }
+  };
+
   Line.prototype.updateLineHeight = function(sourceGroup, action) {
     var oldHeight = this._height;
     var sourceGroupHeight;
@@ -127,7 +164,7 @@ define([
               if (Utils.objectHasProperty(this._sourceHeights, height)) {
                 var parsedHeight = parseInt(height, 10);
 
-                if (parseInt(height, 10) > this._height) {
+                if (parsedHeight > this._height) {
                   this._height = parsedHeight;
                 }
               }

package/src/lines.js

@@ -57,6 +57,16 @@ define([
     this._updateLinesPosition(position, lineNewY);
   };
 
+  Lines.prototype.changeLineHeight = function(from, to) {
+    for (var position in this._linesByPosition) {
+      if (Utils.objectHasProperty(this._linesByPosition, position)) {
+        if (!this._linesByPosition[position].isSegmentsLine()) {
+          this._linesByPosition[position].changeHeight(from, to);
+        }
+      }
+    }
+  };
+
   Lines.prototype.addSourceGroup = function(sourceGroup, position) {
     if (!this._linesByPosition[position]) {
       this._createLine(position);

package/src/main.js

@@ -233,7 +233,7 @@ define([
       lineHeight:               80,
 
       /**
-       * Ratio by which lineHeight must be multiplied to obtain the segment's line height.
+       * Height of a segment, in pixels.
        */
       segmentHeight:            32,
 
@@ -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
     };
 
     /**
@@ -635,6 +641,13 @@ define([
     window.removeEventListener('resize', this._onResize);
   };
 
+  Peaks.prototype.setLineHeight = function(newLineHeight) {
+    var oldHeight = this.options.lineHeight;
+
+    this.options.lineHeight = newLineHeight;
+    this.emit('options.set.line_height', oldHeight);
+  };
+
   /**
    * Cleans up a Peaks instance after use.
    */

package/src/mode-layer.js

@@ -121,15 +121,19 @@ define([
     if (hoveredElement) {
       if (this._selectedElement) {
         this._selectedElement.setSelected(false);
+        this._peaks.emit('source.deselected', this._selectedElement.getSource());
       }
 
       this._selectedElement = hoveredElement;
 
       this._selectedElement.setSelected(true);
+
+      this._peaks.emit('source.selected', this._selectedElement.getSource());
     }
     else {
       if (this._selectedElement) {
         this._selectedElement.setSelected(false);
+        this._peaks.emit('source.deselected', this._selectedElement.getSource());
         this._selectedElement = 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

@@ -61,6 +61,7 @@ define([
     this._peaks.on('data.retrieved', this._onDataRetrieved.bind(this));
     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));
   }
 
   SourcesLayer.prototype.getLoadedData = function(id) {
@@ -97,6 +98,36 @@ define([
     return this._allowEditing;
   };
 
+  SourcesLayer.prototype._onOptionsLineHeightChange = function(oldHeight) {
+    var positions = [];
+
+    for (var sourceId in this._sourcesGroup) {
+      if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
+        var source = this._sourcesGroup[sourceId].getSource();
+
+        if (!positions.includes(source.position)) {
+          this._lines.changeLineHeight(
+            oldHeight,
+            this._peaks.options.lineHeight
+          );
+          positions.push(source.position);
+        }
+        this._removeSource(source);
+        this._addSourceGroup(source);
+      }
+    }
+
+    if (positions) {
+      var frameOffset = this._view.getFrameOffset();
+      var width = this._view.getWidth();
+
+      this.updateSources(
+        this._view.pixelsToTime(frameOffset),
+        this._view.pixelsToTime(frameOffset + width)
+      );
+    }
+  };
+
   SourcesLayer.prototype._onSourceUpdate = function(source) {
     var redraw = false;
     var sourceGroup = this._sourcesGroup[source.id];
@@ -297,7 +328,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;