@checksub_team/peaks_timeline 1.4.17

package/peaks.js.d.ts

@@ -0,0 +1,332 @@
+/**
+ * Peaks.js TypeScript Definitions
+ * @author Evan Louie <evan.louie@microsoft.com> (https://evanlouie.com)
+ */
+
+declare module 'peaks.js' {
+  interface SegmentAddOptions {
+    startTime: number;
+    endTime: number;
+    editable?: boolean;
+    color?: string;
+    labelText?: string;
+    id?: string;
+  }
+
+  interface SegmentUpdateOptions {
+    startTime?: number;
+    endTime?: number;
+    editable?: boolean;
+    color?: string;
+    labelText?: string;
+  }
+
+  interface Segment extends SegmentAddOptions {
+    update: (options: SegmentUpdateOptions) => void;
+  }
+
+  interface PointAddOptions {
+    time: number;
+    editable?: boolean;
+    color?: string;
+    labelText?: string;
+    id?: string;
+  }
+
+  interface PointUpdateOptions {
+    time?: number;
+    editable?: boolean;
+    color?: string;
+    labelText?: string;
+  }
+
+  interface Point extends PointAddOptions {
+    update: (options: PointUpdateOptions) => void;
+  }
+
+  interface RequiredOptions {
+    /** HTML5 Media element containing an audio track */
+    mediaElement: Element;
+  }
+
+  interface SingleContainerOptions {
+    /** Container element for the waveform views */
+    container: HTMLElement;
+  }
+
+  interface ViewContainerOptions {
+    containers: {
+      /** Container element for the overview (non-zoomable) waveform view */
+      overview?: HTMLElement | null;
+      /** Container element for the zoomable waveform view */
+      zoomview?: HTMLElement | null;
+    }
+  }
+
+  type ContainerOptions = SingleContainerOptions | ViewContainerOptions;
+
+  interface PreGeneratedWaveformOptions {
+    /** URI to waveform data file in binary or JSON */
+    dataUri?: {
+      arraybuffer?: string;
+      json?: string;
+    }
+    /** raw waveform data file in binary or JSON */
+    waveformData?: {
+      arraybuffer?: ArrayBuffer;
+      json?: JsonWaveformData;
+    }
+  }
+
+  interface WebAudioOptions {
+    webAudio: {
+      /**
+       * A Web Audio AudioContext instance which can be used
+       * to render the waveform if dataUri is not provided
+       */
+      audioContext?: AudioContext;
+      /**
+       * Alternatively, provide an AudioBuffer containing the decoded audio
+       * samples. In this case, an AudioContext is not needed
+       */
+      audioBuffer?: AudioBuffer;
+      scale?: number;
+      multiChannel?: boolean;
+    }
+  }
+
+  type AudioOptions = WebAudioOptions | PreGeneratedWaveformOptions;
+
+  interface PointMarker {
+    init: (group: object) => void; // TODO: group: Konva.Group
+    fitToView: () => void;
+    timeUpdated?: (time: number) => void;
+    destroy?: () => void;
+  }
+
+  interface SegmentMarker {
+    init: (group: object) => void; // TODO: group: Konva.Group
+    fitToView: () => void;
+    timeUpdated?: (time: number) => void;
+    destroy?: () => void;
+  }
+
+  interface Layer {
+    getHeight: () => number;
+    draw: () => void;
+  }
+
+  interface CreatePointMarkerOptions {
+    point: Point;
+    view: string;
+    draggable: boolean;
+    color: string;
+    layer: Layer;
+  }
+
+  interface CreateSegmentMarkerOptions {
+    segment: Segment;
+    view: string;
+    draggable: boolean;
+    color: string;
+    layer: Layer;
+    startMarker: boolean;
+  }
+
+  interface CreateSegmentLabelOptions {
+    segment: Segment;
+    view: string;
+    layer: Layer;
+  }
+
+  interface OptionalOptions {
+    /**
+     * If true, peaks will send credentials with all network requests
+     * - i.e. when fetching waveform data.
+     */
+    withCredentials?: boolean;
+    /** async logging function */
+    logger?: (...args: any[]) => void;
+    /** default height of the waveform canvases in pixels */
+    height?: number;
+    /** Array of zoom levels in samples per pixel (big >> small) */
+    zoomLevels?: number[];
+    /** Bind keyboard controls */
+    keyboard?: boolean;
+    /** Keyboard nudge increment in seconds (left arrow/right arrow) */
+    nudgeIncrement?: number;
+    /** Color for segment start marker handles */
+    segmentStartMarkerColor?: string;
+    /** Color for segment end marker handles */
+    segmentEndMarkerColor?: string;
+    /** Color for the zoomed in waveform */
+    zoomWaveformColor?: string;
+    /** Color for the overview waveform */
+    overviewWaveformColor?: string;
+    /**
+     * Color for the overview waveform rectangle
+     * that shows what the zoom view shows
+     */
+    overviewHighlightColor?: string;
+    /**
+     * The default number of pixels from the top and bottom of the canvas
+     * that the overviewHighlight takes up
+     */
+    overviewHighlightOffset?: number;
+    /** Color for segments on the waveform */
+    segmentColor?: string;
+    /** Color of the play head */
+    playheadColor?: string;
+    /** Color of the play head text */
+    playheadTextColor?: string;
+    /**
+     * Show current time next to the play head
+     * - (zoom view only)
+     */
+    showPlayheadTime?: boolean;
+    /** The color of a point marker */
+    pointMarkerColor?: string;
+    /** Color of the axis gridlines */
+    axisGridlineColor?: string;
+    /** Color of the axis labels */
+    axisLabelColor?: string;
+    /** Random color per segment (overrides segmentColor) */
+    randomizeSegmentColor?: boolean;
+    /**
+     * Zoom view adapter to use.
+     * - Valid adapters are: `'animated'` (default) and `'static'`
+     */
+    zoomAdapter?: string;
+    /** Array of initial segment objects */
+    segments?: Segment[];
+    /** Array of initial point objects */
+    points?: Point[];
+    /** Emit cue events when playing */
+    emitCueEvents?: boolean;
+    /** Custom segment marker factory function */
+    createSegmentMarker?: (options: CreateSegmentMarkerOptions) => SegmentMarker;
+    /** Custom segment label factory function */
+    createSegmentLabel?: (options: CreateSegmentLabelOptions) => object; // Konva.Node;
+    /** Custom point marker factory function */
+    createPointMarker?: (options: CreatePointMarkerOptions) => PointMarker;
+  }
+
+  interface SetSourceRequiredOptions {
+    mediaUrl: string;
+    withCredentials?: boolean;
+  }
+
+  type SetSourceOptions = SetSourceRequiredOptions & AudioOptions;
+
+  type SetSourceCallback = (error: Error) => void;
+
+  interface InstanceEvents {
+    'peaks.ready': () => void;
+    'points.add': (points: Point[]) => void;
+    'points.dblclick': (point: Point) => void;
+    'points.dragend': (point: Point) => void;
+    'points.dragmove': (point: Point) => void;
+    'points.dragstart': (point: Point) => void;
+    'points.mouseenter': (point: Point) => void;
+    'points.mouseleave': (point: Point) => void;
+    'points.remove_all': () => void;
+    'points.remove': (points: Point[]) => void;
+    'points.enter': (point: Point) => void;
+    'segments.add': (segments: Segment[]) => void;
+    'segments.dragstart': (segment: Segment, startMarker: boolean) => void;
+    'segments.dragged': (segment: Segment, startMarker: boolean) => void;
+    'segments.dragend': (segment: Segment, startMarker: boolean) => void;
+    'segments.remove_all': () => void;
+    'segments.remove': (segments: Segment[]) => void;
+    'segments.mouseenter': (segment: Segment) => void;
+    'segments.mouseleave': (segment: Segment) => void;
+    'segments.click': (segment: Segment) => void;
+    'segments.enter': (segment: Segment) => void;
+    'segments.exit': (segment: Segment) => void;
+    'overview.dblclick': (time: number) => void;
+    'zoomview.dblclick': (time: number) => void;
+    'zoom.update': (currentZoomLevel: number, previousZoomLevel: number) => void;
+    player_seek: (time: number) => void;
+    user_seek: (time: number) => void;
+  }
+
+  interface WaveformView {
+    setAmplitudeScale: (scale: number) => void;
+    setWaveformColor: (color: string) => void;
+    showPlayheadTime: (show: boolean) => void;
+    enableAutoScroll: (enable: boolean) => void;
+    enableMarkerEditing: (enable: boolean) => void;
+    fitToContainer: () => void;
+    setZoom: (options: XOR<{ scale: number | 'auto' }, { seconds: number | 'auto' }>) => void;
+    setStartTime: (time: number) => void;
+  }
+
+  type Without<T> = { [K in keyof T]?: undefined };
+  type XOR<T, U> = (Without<T> & U) | (T & Without<U>);
+
+  interface PeaksInstance {
+    setSource: (options: SetSourceOptions, callback: SetSourceCallback) => void;
+    destroy: () => void;
+    /** Player API */
+    player: {
+      play: () => void;
+      pause: () => void;
+      getCurrentTime: () => number;
+      getDuration: () => number;
+      seek: (time: number) => void;
+      playSegment: (segment: Segment) => void;
+    };
+    /** Views API */
+    views: {
+      createOverview: (container: HTMLElement) => WaveformView;
+      createZoomview: (container: HTMLElement) => WaveformView;
+      destroyOverview: () => void;
+      destroyZoomview: () => void;
+      getView: (name?: 'overview' | 'zoomview' ) => WaveformView | null;
+    };
+    /** Zoom API */
+    zoom: {
+      zoomOut: () => void;
+      zoomIn: () => void;
+      setZoom: (index: number) => void;
+      getZoom: () => number;
+    };
+    /** Segments API */
+    segments: {
+      add: (segments: SegmentAddOptions | SegmentAddOptions[]) => void;
+      getSegments: () => Segment[];
+      getSegment: (id: string) => Segment | null;
+      removeByTime: (startTime: number, endTime?: number) => Segment[];
+      removeById: (segmentId: string) => Segment[];
+      removeAll: () => void;
+    };
+    /** Points API */
+    points: {
+      add: (points: PointAddOptions | PointAddOptions[]) => void;
+      getPoints: () => Point[];
+      getPoint: (id: string) => Point | null;
+      removeByTime: (time: number) => Point[];
+      removeById: (id: string) => Point[];
+      removeAll: () => void;
+    };
+    /** Events */
+    on: <E extends keyof InstanceEvents>(event: E, listener: InstanceEvents[E]) => void;
+  }
+
+  type PeaksInitCallback = (error: Error, peaks?: PeaksInstance) => void;
+
+  interface PeaksOptionsWithoutAudioOptions extends RequiredOptions, OptionalOptions {}
+
+  export interface JsonWaveformData {
+    version: number;
+    channels: number;
+    sample_rate: number;
+    samples_per_pixel: number;
+    bits: number;
+    length: number;
+    data: number[];
+  }
+
+  export type PeaksOptions = PeaksOptionsWithoutAudioOptions & AudioOptions & ContainerOptions;
+  export function init(options: PeaksOptions, callback?: PeaksInitCallback): PeaksInstance;
+}

package/src/data-retriever.js

@@ -0,0 +1,90 @@
+/**
+ * @file
+ *
+ * Retrieving functions for external or internal media data.
+ *
+ * @module data-retriever
+ */
+
+define([
+    './data'
+    ], function(Data) {
+    'use strict';
+
+    /**
+     * Creates a DataRetriever that will look for and download sources data.
+     *
+     * @class
+     * @alias DataRetriever
+     *
+     * @param {Peaks} peaks
+     */
+
+    function DataRetriever(peaks) {
+        this._peaks = peaks;
+        this._data = {};
+        this._waitingForData = {};
+    }
+
+    /**
+     * Retrieves data for the given source.
+     *
+     * @param {Source} options
+     */
+
+    DataRetriever.prototype.retrieveData = function(source) {
+        this._retrieveDataByUrl(source, source.previewUrl);
+        this._retrieveDataByUrl(source, source.binaryUrl);
+    };
+
+    DataRetriever.prototype._retrieveDataByUrl = function(source, url) {
+        if (url && url !== '') {
+            if (!this._data[url]) {
+                this._retireveDataOnline(source, url);
+            }
+            else {
+                if (this._data[url].isComplete()) {
+                    this._peaks.emit('data.retrieved', this._data[url], source, url);
+                }
+                else {
+                    this._waitingForData[url].push(source);
+                }
+            }
+        }
+    };
+
+    DataRetriever.prototype._retireveDataOnline = function(source, url) {
+        var self = this;
+
+        var data = new Data();
+
+        this._data[url] = data;
+        this._waitingForData[url] = [source];
+
+        fetch(url)
+            .then(function(response) {
+                return response.blob();
+            })
+            .then(function(blob) {
+                var type = blob.type;
+
+                if (type) {
+                    type = type.split('/')[0];
+                }
+                else {
+                    type = 'other';
+                }
+
+                data.type = type;
+                data.content = URL.createObjectURL(blob);
+
+                if (self._waitingForData[url]) {
+                    self._waitingForData[url].forEach(function(src) {
+                        self._peaks.emit('data.retrieved', data, src, url);
+                    });
+                }
+            });
+    };
+
+    return DataRetriever;
+});

package/src/data.js

@@ -0,0 +1,56 @@
+/**
+ * @file
+ *
+ * Defines the {@link data} class.
+ *
+ * @module data
+ */
+
+define([
+], function() {
+  'use strict';
+
+  /**
+   * A data object associated with a source.
+   *
+   * @class
+   * @alias Data
+   *
+   * @param {String} type The MIME type (image, video, audio...)
+   * @param {Object} content Content of the data retrieved.
+   */
+
+  function Data(type, content) {
+    this._type = type;
+    this._content = content;
+  }
+
+  Object.defineProperties(Data.prototype, {
+    type: {
+      enumerable: true,
+      get: function() {
+        return this._type;
+      },
+
+      set: function(type) {
+        this._type = type;
+      }
+    },
+    content: {
+      enumerable: true,
+      get: function() {
+        return this._content;
+      },
+
+      set: function(content) {
+        this._content = content;
+      }
+    }
+  });
+
+  Data.prototype.isComplete = function() {
+    return this._type && this._content;
+  };
+
+  return Data;
+});

package/src/default-segment-marker.js

@@ -0,0 +1,132 @@
+/**
+ * @file
+ *
+ * Defines the {@link DefaultSegmentMarker} class.
+ *
+ * @module default-segment-marker
+ */
+
+define([
+  './utils',
+  'konva'
+  ], function(
+    Utils,
+    Konva) {
+  'use strict';
+
+  /**
+   * Creates a segment marker handle.
+   *
+   * @class
+   * @alias DefaultSegmentMarker
+   *
+   * @param {CreateSegmentMarkerOptions} options
+   */
+
+  function DefaultSegmentMarker(options) {
+    this._options = options;
+  }
+
+  DefaultSegmentMarker.prototype.init = function(group) {
+    this._handleWidth  = this._options.segmentWidth;
+    this._handleHeight = this._options.segmentHeight;
+
+    this._group = group;
+
+    // var handleX      = -(this._handleWidth / 2) + 0.5; // Place in the middle of the marker
+
+    var time = this._options.startMarker ? this._options.segment.startTime :
+                                           this._options.segment.endTime;
+
+    // Label - create with default y, the real value is set in fitToView().
+    this._label = new Konva.Text({
+      x:          0,
+      y:          0,
+      text:       Utils.removeLineBreaks(Utils.formatTime(time, false)),
+      fontSize:   10,
+      fontFamily: 'sans-serif',
+      fontStyle:  'bold',
+      fill:       this._options.segment.handleTextColor,
+      textAlign:  'center'
+    });
+
+    this._label.hide();
+
+    // Handle - create with default y, the real value is set in fitToView().
+    if (this._options.segment.editable && this._options.showSegmentMarkers) {
+      this._handle = new Konva.Rect({
+        x:           0,
+        y:           this._options.y,
+        width:       this._handleWidth,
+        height:      this._handleHeight,
+        opacity:     0
+      });
+    }
+
+    var positionX = this._options.startMarker ? -this._label.width() - 1 : this._handleWidth + 1;
+
+    this._label.setX(positionX);
+
+    group.add(this._label);
+
+    if (this._handle) {
+      group.add(this._handle);
+    }
+
+    this.bindEventHandlers(group);
+  };
+
+  DefaultSegmentMarker.prototype.getHandleWidth = function() {
+    return this._handleWidth;
+  };
+
+  DefaultSegmentMarker.prototype.bindEventHandlers = function(group) {
+    var self = this;
+
+    if (self._options.draggable) {
+      group.on('dragstart', function() {
+        self._label.show();
+        self._options.group.draw();
+      });
+
+      group.on('dragend', function() {
+        self._label.hide();
+        self._options.group.draw();
+      });
+    }
+
+    if (self._handle) {
+      self._handle.on('mouseover touchstart', function() {
+        self._options.view.setCursor('ew-resize');
+        self._label.show();
+        self._group.moveToTop();
+        self._options.view.drawSourcesLayer();
+      });
+
+      self._handle.on('mouseout touchend', function() {
+        self._options.view.setCursor('default');
+        self._label.hide();
+        self._options.view.drawSourcesLayer();
+      });
+    }
+  };
+
+  DefaultSegmentMarker.prototype.getWidth = function() {
+    return this._handle ? this._handle.width() : 0;
+  };
+
+  DefaultSegmentMarker.prototype.setWidth = function(value) {
+    if (this._handle) {
+      this._handle.width(value);
+      if (!this._options.startMarker) {
+        this._label.setX(value + 1);
+      }
+    }
+  };
+
+  DefaultSegmentMarker.prototype.timeUpdated = function(time) {
+    this._label.setText(Utils.formatTime(time, false));
+  };
+
+  return DefaultSegmentMarker;
+});