gistfile1.coffee

class Etaxi.Views.Videoplayer extends Backbone.View

  template: JST['base/videoplayer']

  tagName: "div"
  id: "overlay-wrapper"
  className: "videoplayer"

  options:
    title: "Video"
    src: null

  events:
    "tap .overlay" : "hide"
    "play video" : "test"

  test: ->
    alert "playing!"

  initialize: ->
    Etaxi.log "Videoplayer: initialized"

  render: ->
    $(@el).html(@template(video: @options))
    $("body").append(@el)

    $z(@el).animate
      opacity:1
      350
      "ease-out"
    .find('video').animate
      scale:1
      350
      "cubic-bezier(.32,.85,.35,1.2)"
      ->
        window.spinner = new Spinner(
          color:'#fff'
          radius: 7
          length: 6
          width: 3
          lines: 9
          trail: 34
        ).spin($(".overlay")[0])

    Etaxi.log "Videoplayer: rendered"
    this

  hide: ->
    $z(@el).animate
      opacity:0
      350
      "ease-in"
      =>
        # Move the element from screen before we remove it
        # to prevent the video from flickering.
        $(@el).css
          "top":"10000px"
        setTimeout =>
          $(@el).remove()
          Etaxi.log "Videoplayer: removed"
        , 100
    spinner.stop()

_.extend Etaxi.Views.Videoplayer,
    show: (title, poster,  src, options) ->
      # Only one videoplayer instance at once.
      if not $(".videoplayer").length
        new Etaxi.Views.Videoplayer(_.extend
          title: title
          poster: poster
          src: src
        , options).render()