@checksub_team/peaks_timeline 1.16.1 → 2.0.0-alpha.2

package/src/main.js

@@ -9,22 +9,24 @@
 define([
   'colors.css',
   'eventemitter2',
-  './timeline-segments',
-  './timeline-sources',
+  './segment-handler',
+  './source-handler',
+  './line-handler',
   './keyboard-handler',
   './player',
-  './marker-factories',
-  './timeline-zoomview',
+  './view',
+  './components/marker-factories',
   './utils'
   ], function(
     Colors,
     EventEmitter,
-    TimelineSegments,
-    TimelineSources,
+    SegmentHandler,
+    SourceHandler,
+    LineHandler,
     KeyboardHandler,
     Player,
+    View,
     MarkerFactories,
-    TimelineZoomView,
     Utils) {
   'use strict';
 
@@ -133,6 +135,11 @@ define([
        */
       randomizeSegmentColor: true,
 
+      /**
+       * Block mouse clicks if a control key is pressed
+       */
+      blockUpdatingOnMouseClickWithCtrlKey: false,
+
       /**
        * Block mouse clicks if a meta key is pressed
        */
@@ -183,11 +190,7 @@ define([
       /**
        *
        */
-      template:              [
-                               '<div class="timeline">',
-                               '<div class="zoom-container"></div>',
-                               '</div>'
-                             ].join(''),
+      template:              '<div class="timeline"></div>',
 
       /**
        * An object containing an AudioContext, used when creating waveform data
@@ -204,28 +207,6 @@ define([
       createSegmentMarker: MarkerFactories.createSegmentMarker,
       createSegmentLabel:  MarkerFactories.createSegmentLabel,
 
-      /**
-       * External sources information.
-       *
-       * ```js
-       * sources: {
-       *   id: 'unique-identifier-for-this-source',
-       *   title: 'Source #1',
-       *   url: 'https://my-website/my-resource.mp3',
-       *   dataUri: {
-       *     arraybuffer: 'url/to/data.dat',
-       *     json: 'url/to/data.json'
-       *   },
-       *   start: 1.03,
-       *   end: 5.06,
-       *   color: #0000ff,
-       *   wrapped: false,  //show only a line or peaks/preview
-       *   position: 0  //position in the timeline (here on the first line)
-       * }
-       * ```
-       */
-      sources:               null,
-
       /**
        * Height of a line, in pixels.
        * This height will correspond to the height of the background when the element is unwrapped.
@@ -409,7 +390,26 @@ define([
        * Indicates whether or not sources can be dragged
        * from one line to another
        */
-      canMoveSourcesBetweenLines: true
+      canMoveSourcesBetweenLines: true,
+
+      /**
+       * Delay in milliseconds before a new line is created
+       * when dragging a source between 2 lines.
+       */
+      automaticLineCreationDelay: 100,
+
+      /**
+       * Default type of line indicator.
+       * Can be 'default', 'volume', 'noVolume', 'visibility', 'noVisibility'.
+       * This will be used when a new line is automatically created by a component.
+       */
+      defaultLineIndicatorType: 'default',
+
+      /**
+       * Default text of the line indicator.
+       * This will be used when a new line is automatically created by a component.
+       */
+      defaultLineIndicatorText: ''
     };
 
     /**
@@ -467,32 +467,31 @@ define([
     });
 
     /*
-     Setup the layout
+     * Setup the layout
      */
-    if (!instance.options.containers) {
-      callback(new TypeError('Peaks.init(): The containers option must be a valid DOM object'));
+    if (!instance.options.container) {
+      callback(new TypeError('Peaks.init(): The container option must be a valid DOM object'));
       return;
     }
 
-    var zoomviewContainer = instance.options.containers.zoomview;
-
-    if (!Utils.isHTMLElement(zoomviewContainer)) {
-      callback(new TypeError('Peaks.init(): The containers options must be valid HTML elements'));
+    if (!Utils.isHTMLElement(instance.options.container)) {
+      callback(new TypeError('Peaks.init(): The container must be a valid HTML element'));
       return;
     }
 
-    if (zoomviewContainer && zoomviewContainer.clientWidth <= 0) {
+    if (instance.options.container && instance.options.container.clientWidth <= 0) {
       callback(new TypeError('Peaks.init(): Please ensure that the container is visible and has non-zero width'));
       return;
     }
 
     instance.player = new Player(instance);
-    instance.segments = new TimelineSegments(instance);
-    instance.sources = new TimelineSources(instance);
+    instance.segmentHandler = new SegmentHandler(instance);
+    instance.sourceHandler = new SourceHandler(instance);
+    instance.lineHandler = new LineHandler(instance);
 
     // Setup the UI components
-    instance.view = new TimelineZoomView(
-      zoomviewContainer,
+    instance.view = new View(
+      instance.options.container,
       instance
     );
 
@@ -502,10 +501,6 @@ define([
 
     instance._addWindowResizeHandler();
 
-    if (instance.options.sources) {
-      instance.sources.add(instance.options.sources);
-    }
-
     document.fonts.ready.then(function() {
       setTimeout(function() {
         instance.emit('peaks.ready');
@@ -646,17 +641,34 @@ define([
    */
 
   Peaks.prototype.addSource = function(source) {
-    this.sources.add(source);
+    this.sourceHandler.add(source);
   };
 
   /**
    * Destroy a source from the {@link Peaks} instance.
    *
    * @param {String} sourceId
+   * @param {Boolean} [notify=false] If true, emits a
+   *   <code>source.destroyed</code> event with the destroyed {@link Source}
+   *   object.
    */
 
   Peaks.prototype.destroySource = function(sourceId, notify) {
-    this.sources.destroyById(sourceId, !notify);
+    const sources = this.sourceHandler.destroyById(sourceId);
+
+    if (notify && sources.length > 0) {
+      this.emit('source.destroyed', sources[0]);
+    }
+  };
+
+  /**
+   * Cut a source on the cutting time.
+   *
+   * @param {Object} sourceToCut The source to cut.
+   * @param {Number} cuttingTime The time in seconds where to cut the source.
+   */
+  Peaks.prototype.cutSource = function(sourceToCut, cuttingTime) {
+    this.sourceHandler.cutSource(sourceToCut, cuttingTime);
   };
 
   /**
@@ -666,7 +678,7 @@ define([
    */
 
   Peaks.prototype.showSource = function(sourceId) {
-    this.sources.showById(sourceId);
+    this.sourceHandler.showById(sourceId);
   };
 
   /**
@@ -676,11 +688,47 @@ define([
    */
 
   Peaks.prototype.hideSource = function(sourceId) {
-    this.sources.hideById(sourceId);
+    this.sourceHandler.hideById(sourceId);
+  };
+
+  /**
+   * Add a new line to the {@link Peaks} instance.
+   *
+   * @param {LineOptions} lineOptions
+   */
+  Peaks.prototype.addLine = function(lineOptions, notify) {
+    const lines = this.lineHandler.add(lineOptions);
+
+    if (notify && lines.length > 0) {
+      this.emit('line.added', lines[0]);
+    }
+  };
+
+  /**
+   * Destroy a line from the {@link Peaks} instance.
+   *
+   * @param {String} lineId
+   */
+  Peaks.prototype.destroyLine = function(lineId, notify) {
+    const lines = this.lineHandler.removeById(lineId);
+
+    if (notify && lines.length > 0) {
+      this.emit('line.destroyed', lines[0]);
+    }
   };
 
-  Peaks.prototype.showSegments = function(lineId, position) {
-    this.segments.addSegmentsToPosition(lineId, position);
+  /**
+   * Move a line to a new position.
+   *
+   * @param {String} lineId The ID of the line to move.
+   * @param {Number} position The new position.
+   */
+  Peaks.prototype.moveLine = function(lineId, position) {
+    this.lineHandler.moveById(lineId, position);
+  };
+
+  Peaks.prototype.showSegments = function(segmentsGroupId, lineId) {
+    this.segmentHandler.addSegmentsToLine(segmentsGroupId, lineId);
   };
 
   /**
@@ -690,15 +738,15 @@ define([
    */
 
   Peaks.prototype.destroySegment = function(segmentId) {
-    this.segments.removeById(segmentId);
+    this.segmentHandler.removeById(segmentId);
   };
 
   Peaks.prototype.setDefaultMode = function() {
-    this.emit('default_mode');
+    this.emit('handler.view.defaultmode');
   };
 
   Peaks.prototype.setCutMode = function() {
-    this.emit('cut_mode');
+    this.emit('handler.view.cutmode');
   };
 
   Peaks.prototype.setIndicatorType = function(linePosition, type) {
@@ -724,13 +772,11 @@ define([
   };
 
   Peaks.prototype.overrideInteractions = function(bool, areInteractionsAllowed) {
-    return this.view
-            .overrideInteractions(bool, areInteractionsAllowed);
+    this.emit('main.overrideInteractions', bool, areInteractionsAllowed);
   };
 
   Peaks.prototype.allowInteractions = function(forSources, forSegments) {
-    return this.view
-            .allowInteractions(forSources, forSegments);
+    this.emit('main.allowInteractions', forSources, forSegments);
   };
 
   Peaks.prototype.getSelectedElements = function() {
@@ -771,13 +817,6 @@ 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);
-  };
-
   Peaks.prototype.zoomIn = function() {
     this.view.setZoom(
       this.view.getTimeToPixelsScale() + Math.floor(this.view.getTimeToPixelsScale() / 10) + 1

package/src/models/line.js

@@ -0,0 +1,156 @@
+/**
+ * @file
+ *
+ * Defines the {@link Line} class.
+ *
+ * @module line
+ */
+
+define([
+  '../utils'
+], function(Utils) {
+  'use strict';
+
+  function validateLine(options, context) {
+    if (!Utils.isInteger(options.position) || options.position < 0) {
+      throw new TypeError('peaks.lines.' + context + ': position must be a non-negative integer');
+    }
+
+    if (Utils.isNullOrUndefined(options.indicatorType)) {
+      options.indicatorType = 'default';
+    }
+    else if (!Utils.isValidIndicatorType(options.indicatorType)) {
+      throw new TypeError('peaks.lines.' + context + ': indicatorType must be a valid indicator type');
+    }
+
+    if (Utils.isNullOrUndefined(options.indicatorText)) {
+      options.indicatorText = '';
+    }
+    else if (!Utils.isString(options.indicatorText)) {
+      throw new TypeError('peaks.lines.' + context + ': indicatorText must be a string');
+    }
+  }
+
+  /**
+   * A line is a horizontal line that can be placed on the timeline.
+   * It can contain sources or segments.
+   *
+   * @class
+   * @alias Segment
+   * @param {Peaks} peaks The parent {@link Peaks} object.
+   * @param {String} id A unique identifier for the line.
+   * @param {Number} position Position of the line on the timeline.
+   * @param {String} indicatorType Type of the line indicator.
+   * @param {String} indicatorText Text to display above the line indicator.
+   */
+
+  function Line(peaks, id, position, indicatorType, indicatorText) {
+    var opts = {
+      position:       position,
+      indicatorType:  indicatorType,
+      indicatorText:  indicatorText
+    };
+
+    validateLine(opts, 'add()');
+
+    this._peaks           = peaks;
+    this._id              = id;
+    this._position        = opts.position;
+    this._indicatorType   = opts.indicatorType;
+    this._indicatorText   = opts.indicatorText;
+  }
+
+  Object.defineProperties(Line.prototype, {
+    id: {
+      enumerable: true,
+      get: function() {
+        return this._id;
+      }
+    },
+    position: {
+      enumerable: true,
+      get: function() {
+        return this._position;
+      },
+
+      set: function(pos) {
+        if (!Utils.isInteger(pos) || pos < 0) {
+          throw new TypeError('peaks.lines.setPosition(): position must be a non-negative integer');
+        }
+        this._position = pos;
+      }
+    },
+    indicatorType: {
+      enumerable: true,
+      get: function() {
+        return this._indicatorType;
+      }
+    },
+    indicatorText: {
+      enumerable: true,
+      get: function() {
+        return this._indicatorText;
+      }
+    }
+  });
+
+  Line.prototype.update = function(options) {
+    var opts = {
+      position:       this.position,
+      indicatorType:  this.indicatorType,
+      indicatorText:  this.indicatorText
+    };
+
+    Utils.extend(opts, options);
+
+    validateLine(this._peaks, opts, 'update()');
+
+    this._startTime       = opts.startTime;
+    this._endTime         = opts.endTime;
+    this._duration        = opts.duration;
+    this._labelText       = opts.labelText;
+    this._color           = opts.color;
+    this._textColor       = opts.textColor;
+    this._handleTextColor = opts.handleTextColor;
+    this._hoverColor      = opts.hoverColor;
+    this._warningColor    = opts.warningColor;
+    this._opacity         = opts.opacity;
+    this._borderColor     = opts.borderColor;
+    this._borderWidth     = opts.borderWidth;
+    this._borderRadius    = opts.borderRadius;
+    this._editable        = opts.editable;
+    this._allowDeletion   = opts.allowDeletion;
+    this._line            = opts.line;
+    this._indicators      = opts.indicators;
+
+    this._peaks.emit('model.line.update', this);
+  };
+
+  /**
+   * Returns a serializable object containing only the properties defined with Object.defineProperties.
+   * This includes all enumerable properties that can be safely serialized.
+   *
+   * @returns {Object} A plain object containing the serializable properties of the line.
+   */
+  Line.prototype.toSerializable = function() {
+    var serializable = {};
+
+    // Add all the enumerable properties from the prototype
+    var proto = Object.getPrototypeOf(this);
+    var descriptors = Object.getOwnPropertyDescriptors(proto);
+
+    for (var prop in descriptors) {
+      if (Object.prototype.hasOwnProperty.call(descriptors, prop)) {
+        var descriptor = descriptors[prop];
+
+        if (descriptor.enumerable && descriptor.get && typeof descriptor.get === 'function') {
+          serializable[prop] = this[prop];
+        }
+      }
+    }
+
+    return serializable;
+  };
+
+  return Line;
+});