Views API

[thom4parisot]

Peaks should provide an easier way to add, remove and order views.

Using native views with default settings:

peaks.init({
  views: ['zoom', 'overview']
});

Using only one configured native views:

require(['peaks', 'peaks/views/zoom'], function(Peaks, ZoomView){
  var zoom = new ZoomView({
    height: 240,
    backgroundColor: '#fff',
    textColor: 'red'
  });

  var p = Peaks.init({
    views: [zoom]
  });
});

Combining a default native view and your custom metadata view:

require(['peaks', 'my/html/view'], function(Peaks, CustomView){
  var tableView = new CustomView({
    speakersDataUrl: '//localhost:3000/speakers/worldcup/france-vs-switzerland.json'
  });

  var p = Peaks.init({
    views: [tableView, 'overview']
  });
});

View

A view is an asynchronous renderer, performing actions based on peaks timed interactions.

var ZoomView = Object.create(BaseView.prototype, {
  id: 'zoom',
  init: function(config, peaks){
    peaks.on('segment.add', this.onAddSegment.bind(this);

    peaks.emit('load.views.' + id, this);
  },

  onAddSegment: function(segment){

  },

  timeUpdate: function(time){

  },

  render: function(){

  }
});

closes #2
closes #46
closes #59

[chrisn]

This is resolved in release 0.10.0, please see the demo folder for examples.