app.js

var Ctx = Morearty.createContext(React, Immutable,
  { // initial state
    page: 'HOME',
    zoom: 5,
    cursor: 0,
    videos: {},
    segments: [],
    speakers: {}
  },
  { // configuration
    requestAnimationFrameEnabled: true
  }
);

var Bootstrap = React.createClass({
  componentWillMount: function () {
    Ctx.init(this);
  },

  render: function () {
    return React.withContext({ morearty: Ctx }, function () {
      return App({ binding: Ctx.getBinding() });
    });
  }
});

var INIT = Object.freeze({ HOME: 'HOME', VIDEOS: 'VIDEOS', VIDEO: 'VIDEO' });

var App = React.createClass({
  mixins: [Morearty.Mixin],

  componentDidMount: function () {
    var binding = this.getDefaultBinding();

    binding.set.bind(binding, 'videos', Immutable.fromJS({
      'V12345': {
        title: 'V12345 Video',
        zoom: 5,
        poster: 'http://placehold.it/560x315',
        source: {
          'video/mp4': '/media/V12345/video.mp4'
        }
      }
    }))();

    var router = window.router = Router({
      '/': binding.set.bind(binding, 'page', INIT.HOME),
      '/videos': binding.set.bind(binding, 'page', INIT.VIDEOS),
      '/video/:id': [
          function(id){
            queue()
              .defer(d3.csv,
                'media/' + id + '/segments.csv',
                function (d) {
                    return {//just map the to the same values now
                        A: d.A,
                        B: d.B,
                        C: d.C
                    }
                })
              .defer(function (callback) {
                var xhr = new XMLHttpRequest();
                xhr.responseType = 'arraybuffer';
                xhr.open('GET', 'media/' + id + '/wave.dat');
                xhr.addEventListener("load", function onResponse(progressEvent){
                  var waveform = window.waveform = WaveformData.create(progressEvent.target);
                  console.log(waveform.duration);
                  callback(null, waveform);
                });
                xhr.send();
              })
              .defer(function (callback) {
                $.ajax({
                  dataType: 'json',
                  url: 'media/' + id + '/speaker.json',
                  success: function (speakers) {
                    callback(null, speakers);
                    console.log(speakers);
                  }
                });
              })
              .await(function(error, segments, waveform, speakers) {
                binding.set.bind(binding, 'page', INIT.VIDEO)();
                binding.set.bind(binding, 'id', id)();
                binding.set.bind(binding, 'segments', Immutable.fromJS(segments))();
                binding.set.bind(binding, 'speakers', Immutable.fromJS(speakers))();
                window.speakers = speakers;
              });
          }
        ]
    }).init();
  },