metaunix-player-js/src/coffee/player.coffee

(($) ->

  $.fn.MUPlayer = (opt) ->
    # define global variables
    settings = undefined # settings objects
    videoElem = undefined
    videoControls = undefined
    volumeDragging = false

    # combine user settings with defaults
    settings = $.extend({
      'use_default_css': false
      'class_prefix': 'mup-'
      'default_volume': 50
      'default_position': 0
      'video_sources': []
      'video_width': false
    }, opt)

    ## Functions
    # setup - performs initial setup of the MUPlayer element
    setup = (wrapperElem) ->
      # add default CSS if needed
      if settings.use_default_css
        addStylesheet('build/css/mup.css')
      
      # set player width
      if typeof settings.video_width == 'string'
        wrapperElem.width(settings.video_width)
      
      # create the video player
      createPlayer(wrapperElem)

      # load the video now
      videoElem.get(0).load()
      
      # end setup function
      return

    # addStylesheet - adds a stylesheet to the head element
    addStylesheet = (filename) ->
      # create link element
      cssElem = $('<link/>',
        rel: 'stylesheet'
        type: 'text/css'
        href: filename)
      
      # find stylesheet links
      loadedStylesheets = $('head link[rel=stylesheet]')
      # check if there are any loaded stylesheets
      if loadedStylesheets.length > 0
        # get last stylesheet
        lastStylesheet = loadedStylesheets[loadedStylesheets.length - 1]

        # append new stylesheet after the last one
        lastStylesheet.after(cssElem)
      else
        # append the new element to the head element
        $('head').append(cssElem)

      # end addStylesheet function
      return

    # createPlayer - add HTML elements for the video player
    createPlayer = (wrapperElem) ->
      # create video element
      videoElem = $('<video/>',
        class: settings.class_prefix + 'video')
      videoElem.on('ended', resetVideo)
      videoElem.on('timeupdate', updateProgress)
      videoElem.on('loadedmetadata', updateDuration)
      videoElem.on('click', toggleIsPlaying)
      
      # loop through the video sources
      for source in settings.video_sources
        # create new source element
        newSrc = $('<source/>',
          src: source.link
          type: source.type)
        # append source element to the newly created video element
        videoElem.append(newSrc)
      
      # create video controls wrapper
      videoControls = $('<div/>',
        class: settings.class_prefix + 'controls')
      
      # create control elements
      progressBar = $('<span/>',
        class: settings.class_prefix + 'control' + ' ' +
          settings.class_prefix + 'progress-bar').appendTo(videoControls)

      progressFill = $('<span/>',
        class: settings.class_prefix + 'control' + ' ' +
          settings.class_prefix + 'progress-fill').appendTo(progressBar)

      videoControlsLeft = $('<div/>',
        class: settings.class_prefix + 'controls-left').appendTo(videoControls)
      videoControlsRight = $('<div/>',
        class: settings.class_prefix + 'controls-right').appendTo(videoControls)

      playButton = $('<button/>',
        class: settings.class_prefix + 'control' + ' ' +
          settings.class_prefix + 'play-button'
        text: '>').appendTo(videoControlsLeft)
      playButton.on('click', (e) ->
        e.preventDefault()
        toggleIsPlaying())

      progressTime = $('<div/>',
        class: settings.class_prefix + 'control' + ' ' +
          settings.class_prefix + 'progressTime').appendTo(videoControlsLeft)
      progressTime.html('<span class="currentTime">' + msToTime(videoElem.get(0).currentTime) + '</span> / ' +
        '<span class="totalTime">' + msToTime(videoElem.get(0).duration) + '</span>')
      
      volumeSlider = $('<input/>',
        class: settings.class_prefix + 'control' + ' ' +
          settings.class_prefix + 'volume-slider'
        type: 'range'
        min: 0
        max: 100
        step: 1
      ).appendTo(videoControlsRight)
      volumeSlider.on('input', ->
        setVolume(this.value)
      )

      # add the elements to the player
      $(wrapperElem).append(videoElem)
      $(wrapperElem).append(videoControls)

      # end createPlayer function
      return
    
    # playVideo - start playing video
    playVideo = ->
      videoElem.get(0).play()
      videoControls.find('.' + settings.class_prefix + 'play-button').text('||')
      isPlaying = true

      # end playVideo function
      return

    # pauseVideo - pause video
    pauseVideo = ->
      videoElem.get(0).pause()
      videoControls.find('.' + settings.class_prefix + 'play-button').text('>')
      isPlaying = false

      # end pauseVideo function
      return

    # resetVideo - reset the video back to the beginning
    resetVideo = ->
      pauseVideo()
      updateProgress(0)

    # toggleIsPlaying - toggle between play and pause
    toggleIsPlaying = ->
      if !videoElem.get(0).paused
        pauseVideo()
      else
        playVideo()

      # end toggleIsPlaying function
      return

    # setVolume - set the video player's volume
    setVolume = (vol) ->
      videoElem.get(0).volume = (vol / 100)

    # updateProgress - perform actions when the video's progress updates
    updateProgress = (setProgress = false) ->
      # get the progress bar element
      progressBar = videoControls.children('.' + settings.class_prefix + 'progress-bar')
      progressFill = progressBar.children('.' + settings.class_prefix + 'progress-fill')

      if typeof setProgress != 'number'
        # calculate position in video as percentage
        progress = videoElem.get(0).currentTime
      else
        progress = setProgress

      # calculate width for the progress fill
      progressWidth = (progress / videoElem.get(0).duration) * progressBar.width()
      # set the width on the progress foreground element
      progressFill.css('width', progressWidth + 'px')

      # update the progress time while we're at it
      videoControls.find('.currentTime').text(msToTime(progress))

      # end updateProgress function
      return
    
    # updateDuration - updates the video's duration time
    updateDuration = ->
      currentTime = videoControls.find('.currentTime')
      totalTime = videoControls.find('.totalTime')

      currentTime.text(msToTime(videoElem.get(0).currentTime))
      totalTime.text(msToTime(videoElem.get(0).duration))
    
    # msToTime - converts seconds to a human-readable time
    msToTime = (time) ->
      secs = Math.floor(time % 60)
      time = (time - secs) / 60
      mins = Math.floor(time % 60)
      hrs = Math.floor((time - mins) / 60)

      if secs < 10
        secs = '0' + secs
      if hrs > 0 and mins < 10
        mins = '0' + mins

      if hrs > 0
        return hrs + ':' + mins + ':' + secs
      else
        return mins + ':' + secs

    # run the setup function
    setup(this)

    # end MUPlayer function
    return

  return
) jQuery