Emulate video tag api, for testing in phantomjs

usage.coffee

React.createClass(


  componentDidMount: ->
    video = @getVideoElement()

    video.addEventListener "ended", @ended, false
    video.addEventListener "durationchange", @durationChange, false
    video.addEventListener "timeupdate", @timeUpdate, false
    video.play()

  componentWillUnmount: ->
    video = @getVideoElement()

    video.pause()
    video.removeEventListener("ended", @ended)
    video.removeEventListener("durationchange", @durationChange)
    video.removeEventListener("timeupdate", @timeUpdate)
    
  getVideoElement: ->
    # here could be more sofisticated check
    if window.RailsEnv == 'test'
      video = new VideoTagEmulator()
    else
      video = @getDOMNode()
    
  render: ->
    `<video src={this.props.url} poster={this.props.poster} ></video>`

video_tag_emulator.coffee

class window.VideoTagEmulator
  speed: 0.1
  constructor: ->
    @handlers = {}
    @duration = 5
    @target = {
      duration: 0,
      currentTime: 0,
      ended: false
    }

  addEventListener: (eventType, handler) ->
    @handlers[eventType] = handler

  removeEventListener: ->
    @_stopLoop()
    @handlers = {}

  play: ->
    @_startLoop()

  pause: ->
    @_stopLoop()

  _playFrame: ->
    @target.currentTime += 1
    @handlers.timeupdate(target: @target)

    if @target.currentTime == 1
      @target.duration = @duration
      @handlers.durationchange(target: @target)

    else if @target.currentTime > @duration
      @_stopLoop()
      @target.ended = true
      @handlers.ended(target: @target)

  _startLoop: ->
    @timerId = window.setInterval(
      @_playFrame.bind(@),
      1000 * @speed
    )

  _stopLoop: ->
    window.clearInterval(@timerId)