xGif React

gistfile1.js

var React = React.createClass({
  componentDidMount() {
    // this.props instead of attrs
    var xGif = this.xGif = Object.create(this.props, {
      fire: {
        value: function (event) {
          console.log(event);
        }
      }
    });

    if (xGif.exploded != null) {
      xGif.playbackStrategy = 'noop'
    } else if (xGif.sync != null) {
      xGif.playbackStrategy = 'noop';
    } else if (xGif.hardBpm) {
      xGif.playbackStrategy = 'hardBpm';
    } else if (xGif.bpm) {
      xGif.playbackStrategy = 'bpm';
    } else {
      xGif.speed = xGif.speed || 1.0;
      xGif.playbackStrategy = 'speed';
    }

    // this.getDOMNode() instead of elements[0]
    this.getDOMNode().clock = function (beatNr, beatDuration, beatFraction) {
      if (xGif.playback && xGif.playback.gif) xGif.playback.fromClock(beatNr, beatDuration, beatFraction);
    }

    this.getDOMNode().relayout = function () {
      if (xGif.playback && xGif.fill != null) xGif.playback.scaleToFill();
    }
  },

  componentWillReceiveProps(nextProps) {
    var xGif = this.xGif;
    // copy over props to xGif
    for (var key in nextProps) {
      xGif[key] = nextProps[key];
    }

    // Do a if check on componentWillReceiveProps instead of using attr.observe
    if (nextProps.src && this.props.src !== nextProps.src) {
      var playbackStrategy = Strategies[xGif.playbackStrategy];
      xGif.playback = new Playback(xGif, this.getDOMNode().querySelector('.x-gif__frames'), xGif.src, {
        pingPong: xGif.pingPong != null,
        fill: xGif.fill != null,
        stopped: xGif.stopped != null
      });
      xGif.playback.ready.then(playbackStrategy.bind(xGif));
    }

    if (nextProps.speed && this.props.speed !== nextProps.speed) {
      if (xGif.playback) xGif.playback.speed = speed;
    }
  }

  render() {
    // React.createElement instead of template
    return React.createElement('div', { className: 'frames-wrapper' },
      React.createElement('div', { className: 'x-gif__frames' })
    );
  }
});