@checksub_team/peaks_timeline 1.4.17

package/src/source.js

@@ -0,0 +1,688 @@
+/**
+ * @file
+ *
+ * Defines the {@link source} class.
+ *
+ * @module source
+ */
+
+define([
+  './utils'
+], function(Utils) {
+  'use strict';
+
+  function validateSource(peaks, options, context) {
+    if (!Utils.isValidTime(options.startTime)) {
+      throw new TypeError('peaks.sources.' + context + ': startTime should be a valid number');
+    }
+
+    if (!Utils.isValidTime(options.endTime)) {
+      throw new TypeError('peaks.sources.' + context + ': endTime should be a valid number');
+    }
+
+    if (!Utils.isValidTime(options.duration) || options.duration <= 0) {
+      options.duration = 0;
+    }
+    else if (options.duration < peaks.options.minSourceSize) {
+      options.duration = peaks.options.minSourceSize;
+    }
+
+    options.duration = Utils.roundTime(options.duration);
+
+    if (options.startTime < 0) {
+      throw new RangeError('peaks.sources.' + context + ': startTime should be positive');
+    }
+
+    if (options.endTime < 0) {
+      throw new RangeError('peaks.sources.' + context + ': endTime should be positive');
+    }
+
+    if (options.endTime <= options.startTime) {
+      throw new RangeError(
+        'peaks.sources.' + context + ': endTime should be greater than startTime'
+      );
+    }
+
+    if (options.endTime - options.startTime < peaks.options.minSourceSize) {
+      options.endTime = options.startTime + peaks.options.minSourceSize;
+    }
+
+    if (!Utils.isValidTime(options.mediaStartTime) || options.mediaStartTime < 0) {
+      options.mediaStartTime = 0;
+    }
+
+    if (!Utils.isValidTime(options.mediaEndTime)
+      || (options.mediaEndTime < options.mediaStartTime)
+      || (options.mediaEndTime - options.mediaStartTime !== options.endTime - options.startTime)) {
+      options.mediaEndTime = options.mediaStartTime + (options.endTime - options.startTime);
+    }
+
+    if (options.duration && options.mediaEndTime > options.duration) {
+      var timeWidth = options.mediaEndTime - options.mediaStartTime;
+
+      options.mediaEndTime = options.duration;
+      if (options.duration > timeWidth) {
+        options.mediaStartTime = options.mediaEndTime - timeWidth;
+        options.endTime = options.startTime + timeWidth;
+      }
+      else {
+        options.mediaStartTime = 0;
+        options.endTime = options.startTime + options.duration;
+      }
+    }
+
+    options.startTime = Utils.roundTime(options.startTime);
+    options.endTime = Utils.roundTime(options.endTime);
+    options.mediaStartTime = Utils.roundTime(options.mediaStartTime);
+    options.mediaEndTime = Utils.roundTime(options.mediaEndTime);
+
+    if (Utils.isNullOrUndefined(options.title)) {
+      options.title = '';
+    }
+    else if (!Utils.isString(options.title)) {
+      throw new TypeError('peaks.sources.' + context + ': title must be a string');
+    }
+
+    if (Utils.isNullOrUndefined(options.url)) {
+      options.url = '';
+    }
+    else if (!Utils.isString(options.url)) {
+      throw new TypeError('peaks.sources.' + context + ': url must be a string');
+    }
+
+    if (Utils.isNullOrUndefined(options.previewUrl)) {
+      options.previewUrl = '';
+    }
+    else if (!Utils.isString(options.previewUrl)) {
+      throw new TypeError('peaks.sources.' + context + ': previewUrl must be a string');
+    }
+
+    if (Utils.isNullOrUndefined(options.binaryUrl)) {
+      options.binaryUrl = '';
+    }
+    else if (!Utils.isString(options.binaryUrl)) {
+      throw new TypeError('peaks.sources.' + context + ': binaryUrl must be a string');
+    }
+
+    if (!Utils.isValidColor(options.color)) {
+      throw new TypeError('peaks.sources.' + context + ': color should be a valid CSS color');
+    }
+
+    if (!Utils.isValidColor(options.borderColor)) {
+      options.borderColor = options.color;
+    }
+
+    if (Utils.isNullOrUndefined(options.selectedColor)) {
+      options.selectedColor = null;
+    }
+    else if (!Utils.isValidColor(options.selectedColor)) {
+      throw new TypeError(
+        'peaks.sources.' + context + ': selectedColor should be a valid CSS color'
+      );
+    }
+
+    if (Utils.isNullOrUndefined(options.textColor)) {
+      options.textColor = '#000000';
+    }
+    else if (!Utils.isValidColor(options.textColor)) {
+      throw new TypeError('peaks.sources.' + context + ': textColor should be a valid CSS color');
+    }
+
+    if (Utils.isNullOrUndefined(options.borderWidth)) {
+      options.borderWidth = 0;
+    }
+
+    if (Utils.isNullOrUndefined(options.wrapped)) {
+      options.wrapped = false;
+    }
+    else if (!Utils.isBoolean(options.wrapped)) {
+      throw new TypeError('peaks.sources.' + context + ': wrapped must be a boolean');
+    }
+
+    if (!Utils.isInteger(options.position)) {
+      throw new TypeError('peaks.sources.' + context + ': position must be an integer');
+    }
+
+    if (Utils.isNullOrUndefined(options.draggable)) {
+      options.draggable = true;
+    }
+    else if (!Utils.isBoolean(options.draggable)) {
+      throw new TypeError('peaks.sources.' + context + ': draggable must be a boolean');
+    }
+
+    if (Utils.isNullOrUndefined(options.resizable)) {
+      options.resizable = true;
+    }
+    else if (!Utils.isBoolean(options.resizable)) {
+      throw new TypeError('peaks.sources.' + context + ': resizable must be a boolean');
+    }
+
+    if (Utils.isNullOrUndefined(options.wrapping)) {
+      options.wrapping = 'both';
+    }
+    else if (!Utils.isString(options.wrapping)) {
+      throw new TypeError('peaks.sources.' + context + ': wrapping must be a string');
+    }
+
+    if (Utils.isNullOrUndefined(options.previewHeight)) {
+      options.previewHeight = 0;
+    }
+    else if (!Utils.isInteger(options.previewHeight)) {
+      throw new TypeError('peaks.sources.' + context + ': previewHeight must be an integer');
+    }
+
+    if (Utils.isNullOrUndefined(options.binaryHeight)) {
+      options.binaryHeight = 0;
+    }
+    else if (!Utils.isInteger(options.binaryHeight)) {
+      throw new TypeError('peaks.sources.' + context + ': binaryHeight must be an integer');
+    }
+
+    if (options.previewUrl && !options.previewHeight) {
+      if (options.binaryHeight) {
+        options.previewHeight = Math.max(peaks.options.lineHeight - options.binaryHeight, 0);
+      }
+      else {
+        options.previewHeight = peaks.options.lineHeight / 2;
+      }
+    }
+
+    if (options.binaryUrl && !options.binaryHeight) {
+      options.binaryHeight = Math.max(peaks.options.lineHeight - options.previewHeight, 0);
+    }
+
+    if (options.wrapping === 'reduced') {
+      options.wrapped = true;
+    }
+    else if (options.wrapping === 'complete') {
+      options.wrapped = false;
+    }
+  }
+
+  /**
+   * A source is an external media resource, represented on the timeline.
+   *
+   * @class
+   * @alias Source
+   *
+   * @param {Peaks} peaks A reference to the Peaks instance.
+   * @param {String} id A unique identifier for the source.
+   * @param {String} title Name of the source.
+   * @param {String} url Reference to the media element this source is representing.
+   * @param {Number} startTime Source start time, in seconds.
+   * @param {Number} endTime Source end time, in seconds.
+   * @param {String} color Color of the background.
+   * @param {Boolean} wrapped If <code>true</code> the source representation will
+   *                          be reduced to a line, taking less space.
+   * @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.
+   */
+
+  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) {
+    var opts = {
+      title: title,
+      url: url,
+      previewUrl: previewUrl,
+      binaryUrl: binaryUrl,
+      kind: kind,
+      duration: duration,
+      startTime: startTime,
+      endTime: endTime,
+      mediaStartTime: mediaStartTime,
+      mediaEndTime: mediaEndTime,
+      color: color,
+      borderColor: borderColor,
+      selectedColor: selectedColor,
+      textColor: textColor,
+      borderWidth: borderWidth,
+      wrapped: wrapped,
+      position: position,
+      draggable: draggable,
+      resizable: resizable,
+      wrapping: wrapping,
+      previewHeight: previewHeight,
+      binaryHeight: binaryHeight
+    };
+
+    validateSource(peaks, opts, 'add()');
+
+    this._peaks = peaks;
+    this._id = id;
+    this._originId = originId;
+    this._elementId = elementId;
+    this._title = opts.title;
+    this._url = opts.url;
+    this._previewUrl = opts.previewUrl;
+    this._binaryUrl = opts.binaryUrl;
+    this._kind = opts.kind;
+    this._duration = opts.duration;
+    this._startTime = opts.startTime;
+    this._endTime = opts.endTime;
+    this._mediaStartTime = opts.mediaStartTime;
+    this._mediaEndTime = opts.mediaEndTime;
+    this._color = opts.color;
+    this._borderColor = opts.borderColor;
+    this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.color, 30);
+    this._textColor = opts.textColor;
+    this._borderWidth = opts.borderWidth;
+    this._wrapped = opts.wrapped;
+    this._position = opts.position;
+    this._draggable = opts.draggable;
+    this._resizable = opts.resizable;
+    this._wrapping = opts.wrapping;
+    this._previewHeight = opts.previewHeight;
+    this._binaryHeight = opts.binaryHeight;
+    this._minSize = peaks.options.minSourceSize;
+  }
+
+  Object.defineProperties(Source.prototype, {
+    id: {
+      enumerable: true,
+      get: function() {
+        return this._id;
+      }
+    },
+    originId: {
+      enumerable: true,
+      get: function() {
+        return this._originId;
+      }
+    },
+    elementId: {
+      enumerable: true,
+      get: function() {
+        return this._elementId;
+      }
+    },
+    title: {
+      enumerable: true,
+      get: function() {
+        return this._title;
+      },
+
+      set: function(title) {
+        this._title = title;
+      }
+    },
+    url: {
+      enumerable: true,
+      get: function() {
+        return this._url;
+      }
+    },
+    previewUrl: {
+      enumerable: true,
+      get: function() {
+        return this._previewUrl;
+      }
+    },
+    binaryUrl: {
+      enumerable: true,
+      get: function() {
+        return this._binaryUrl;
+      }
+    },
+    kind: {
+      enumerable: true,
+      get: function() {
+        return this._kind;
+      },
+
+      set: function(kind) {
+        this._kind = kind;
+      }
+    },
+    duration: {
+      enumerable: true,
+      get: function() {
+        return this._duration;
+      }
+    },
+    startTime: {
+      enumerable: true,
+      get: function() {
+        return this._startTime;
+      }
+    },
+    endTime: {
+      enumerable: true,
+      get: function() {
+        return this._endTime;
+      }
+    },
+    mediaStartTime: {
+      enumerable: true,
+      get: function() {
+        return this._mediaStartTime;
+      },
+
+      set: function(mediaStartTime) {
+        this._mediaStartTime = mediaStartTime;
+      }
+    },
+    mediaEndTime: {
+      enumerable: true,
+      get: function() {
+        return this._mediaEndTime;
+      },
+
+      set: function(mediaEndTime) {
+        this._mediaEndTime = mediaEndTime;
+      }
+    },
+    color: {
+      enumerable: true,
+      get: function() {
+        return this._color;
+      },
+
+      set: function(color) {
+        this._color = color;
+      }
+    },
+    borderColor: {
+      enumerable: true,
+      get: function() {
+        return this._borderColor;
+      },
+
+      set: function(borderColor) {
+        this._borderColor = borderColor;
+      }
+    },
+    selectedColor: {
+      enumerable: true,
+      get: function() {
+        return this._selectedColor;
+      },
+
+      set: function(selectedColor) {
+        this._selectedColor = selectedColor;
+      }
+    },
+    textColor: {
+      enumerable: true,
+      get: function() {
+        return this._textColor;
+      },
+
+      set: function(textColor) {
+        this._textColor = textColor;
+      }
+    },
+    borderWidth: {
+      enumerable: true,
+      get: function() {
+        return this._borderWidth;
+      },
+
+      set: function(borderWidth) {
+        this._borderWidth = borderWidth;
+      }
+    },
+    wrapped: {
+      enumerable: true,
+      get: function() {
+        return this._wrapped;
+      },
+
+      set: function(wrapped) {
+        this._wrapped = wrapped;
+      }
+    },
+    position: {
+      enumerable: true,
+      get: function() {
+        return this._position;
+      },
+
+      set: function(position) {
+        this._position = position;
+      }
+    },
+    segments: {
+      enumerable: true,
+      get: function() {
+        return this._segments;
+      }
+    },
+    draggable: {
+      enumerable: true,
+      get: function() {
+        return this._draggable;
+      }
+    },
+    resizable: {
+      enumerable: true,
+      get: function() {
+        return this._resizable;
+      }
+    },
+    wrapping: {
+      enumerable: true,
+      get: function() {
+        return this._wrapping;
+      },
+
+      set: function(wrapping) {
+        this._wrapping = wrapping;
+      }
+    },
+    previewHeight: {
+      enumerable: true,
+      get: function() {
+        return this._previewHeight;
+      },
+
+      set: function(previewHeight) {
+        this._previewHeight = previewHeight;
+      }
+    },
+    binaryHeight: {
+      enumerable: true,
+      get: function() {
+        return this._binaryHeight;
+      },
+
+      set: function(binaryHeight) {
+        this._binaryHeight = binaryHeight;
+      }
+    },
+    minSize: {
+      enumerable: true,
+      get: function() {
+        return this._minSize;
+      }
+    }
+  });
+
+  Source.prototype.updateTimes = function(newStartTime, newEndTime) {
+    if (newStartTime !== null) {
+      if (this._duration && newEndTime === null) {
+        newStartTime = Utils.roundTime(Math.max(this._endTime - this._duration, newStartTime));
+      }
+      else {
+        newStartTime = Utils.roundTime(newStartTime);
+      }
+    }
+
+    if (newEndTime !== null) {
+      if (this._duration && newStartTime === null) {
+        newEndTime = Utils.roundTime(Math.min(this._startTime + this._duration, newEndTime));
+      }
+      else {
+        newEndTime = Utils.roundTime(newEndTime);
+      }
+    }
+
+    if ((newStartTime === null && newEndTime !== null)
+        || (newStartTime !== null && newEndTime === null)) {
+      this._updateMediaRange(this._startTime, newStartTime, this._endTime, newEndTime);
+    }
+
+    if (newStartTime !== null) {
+      this._startTime = newStartTime;
+    }
+    if (newEndTime !== null) {
+      this._endTime = newEndTime;
+    }
+  };
+
+  Source.prototype._updateMediaRange = function(oldStartTime, newStartTime, oldEndTime,
+    newEndTime) {
+    var startDiff = 0;
+    var endDiff = 0;
+    var upperLimit;
+
+    if (this._duration) {
+      upperLimit = this._duration;
+    }
+    else {
+      upperLimit = Number.POSITIVE_INFINITY;
+    }
+
+    if (newStartTime !== null && oldStartTime !== null) {
+      startDiff = newStartTime - oldStartTime;
+    }
+    if (newEndTime !== null && oldEndTime !== null) {
+      endDiff = newEndTime - oldEndTime;
+    }
+
+    var newMediaStartTime = this._mediaStartTime;
+    var newMediaEndTime = this._mediaEndTime;
+
+    if (startDiff) {
+      if (startDiff < 0) {
+        // Try reducing mediaStartTime
+        if (newMediaStartTime > 0) {
+          var minStartTime = newMediaStartTime + startDiff;
+
+          newMediaStartTime = Math.max(0, minStartTime);
+          if (minStartTime < 0) {
+            // Try increasing mediaEndTime
+            newMediaEndTime = Math.min(upperLimit, newMediaEndTime - minStartTime);
+          }
+        }
+        else {
+          // Try increasing mediaEndTime
+          newMediaEndTime = Math.min(upperLimit, newMediaEndTime - startDiff);
+        }
+      }
+      else {
+        // Try increasing mediaStartTime
+        if (newMediaStartTime < upperLimit) {
+          newMediaStartTime = Math.min(upperLimit, newMediaStartTime + startDiff);
+        }
+      }
+    }
+
+    if (endDiff) {
+      if (endDiff > 0) {
+        // Try increasing mediaEndTime
+        if (newMediaEndTime < upperLimit) {
+          var maxEndTime = newMediaEndTime + endDiff;
+
+          newMediaEndTime = Math.min(upperLimit, maxEndTime);
+          if (maxEndTime > upperLimit) {
+            // Try reducing mediaStartTime
+            newMediaStartTime = Math.max(0, newMediaStartTime - (maxEndTime - upperLimit));
+          }
+        }
+        else {
+          // Try reducing mediaStartTime
+          newMediaStartTime = Math.max(0, newMediaStartTime - endDiff);
+        }
+      }
+      else {
+        if (newEndTime - oldStartTime < upperLimit) {
+          if (oldEndTime - oldStartTime > upperLimit) {
+            endDiff += (oldEndTime - oldStartTime) - upperLimit;
+          }
+
+          // Try reducing mediaEndTime
+          if (newMediaEndTime > 0) {
+            newMediaEndTime = Math.max(0, newMediaEndTime + endDiff);
+          }
+        }
+      }
+    }
+
+    this._mediaStartTime = Utils.roundTime(newMediaStartTime);
+    this._mediaEndTime = Utils.roundTime(newMediaEndTime);
+  };
+
+  Source.prototype.update = function(options) {
+    var opts = {
+      title: this.title,
+      url: this.url,
+      previewUrl: this.previewUrl,
+      binaryUrl: this.binaryUrl,
+      kind: this.kind,
+      duration: this.duration,
+      startTime: this.startTime,
+      endTime: this.endTime,
+      mediaStartTime: this.mediaStartTime,
+      mediaEndTime: this.mediaEndTime,
+      color: this.color,
+      borderColor: this.borderColor,
+      selectedColor: this.selectedColor,
+      textColor: this.textColor,
+      borderWidth: this.borderWidth,
+      wrapped: this.wrapped,
+      position: this.position,
+      draggable: this.draggable,
+      resizable: this.resizable,
+      wrapping: this.wrapping,
+      previewHeight: this.previewHeight,
+      binaryHeight: this.binaryHeight
+    };
+
+    Utils.extend(opts, options);
+
+    validateSource(this._peaks, opts, 'update()');
+
+    this._title = opts.title;
+    this._url = opts.url;
+    this._previewUrl = opts.previewUrl;
+    this._binaryUrl = opts.binaryUrl;
+    this._kind = opts.kind;
+    this._duration = opts.duration;
+    this._startTime = opts.startTime;
+    this._endTime = opts.endTime;
+    this._mediaStartTime = opts.mediaStartTime;
+    this._mediaEndTime = opts.mediaEndTime;
+    this._color = opts.color;
+    this._borderColor = opts.borderColor;
+    this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.color, 30);
+    this._textColor = opts.textColor;
+    this._borderWidth = opts.borderWidth;
+    this._wrapped = opts.wrapped;
+    this._position = opts.position;
+    this._draggable = opts.draggable;
+    this._resizable = opts.resizable;
+    this._wrapping = opts.wrapping;
+    this._previewHeight = opts.previewHeight;
+    this._binaryHeight = opts.binaryHeight;
+
+    this._peaks.emit('source.update', this);
+  };
+
+  /**
+   * Returns <code>true</code> if the source overlaps a given time region.
+   *
+   * @param {Number} startTime The start of the time region, in seconds.
+   * @param {Number} endTime The end of the time region, in seconds.
+   * @returns {Boolean}
+   *
+   * @see http://wiki.c2.com/?TestIfDateRangesOverlap
+   */
+  Source.prototype.isVisible = function(startTime, endTime) {
+    return this._startTime < endTime && startTime < this._endTime;
+  };
+
+  return Source;
+});