Added progress bar

src/coffee/player.coffee

@@ -57,7 +57,8 @@
       # create video element
       videoElem = $('<video/>',
         class: settings.class_prefix + 'video')
-      videoElem.on('ended', pauseVideo)
+      videoElem.on('ended', resetVideo)
+      videoElem.on('timeupdate', updateProgress)
       
       # loop through the video sources
       for source in settings.video_sources
@@ -74,7 +75,7 @@
       
       # create control elements
       playButton = $('<button/>',
-        class: settings.class_prefix + 'button' + ' ' +
+        class: settings.class_prefix + 'control' + ' ' +
           settings.class_prefix + 'play-button'
         text: '>').appendTo(videoControls)
       playButton.on('click', (e) ->
@@ -82,6 +83,14 @@
         toggleIsPlaying(this)
       )
 
+      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)
+      
       # add the elements to the player
       $(wrapperElem).append(videoElem)
       $(wrapperElem).append(videoControls)
@@ -95,14 +104,25 @@
       videoControls.children('.' + settings.class_prefix + 'play-button').text('||')
       isPlaying = true
 
+      # end playVideo function
+      return
+
     # pauseVideo - pause video
     pauseVideo = ->
       videoElem.get(0).pause()
       videoControls.children('.' + 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 = () ->
+    toggleIsPlaying = ->
       if !videoElem.get(0).paused
         pauseVideo()
       else
@@ -111,6 +131,27 @@
       # end toggleIsPlaying function
       return
 
+    # 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 / videoElem.get(0).duration
+      else
+        progress = setProgress
+
+      # calculate width for the progress fill
+      progressWidth = progress * progressBar.width()
+      # set the width on the progress foreground element
+      progressFill.css('width', progressWidth + 'px')
+
+      # end updateProgress function
+      return
+
+
     # run the setup function
     setup(this)