Added a current time and duration of the video

src/coffee/player.coffee

@@ -29,6 +29,9 @@
       
       # create the video player
       createPlayer(wrapperElem)
+
+      # load the video now
+      videoElem.get(0).load()
       
       # end setup function
       return
@@ -64,6 +67,7 @@
         class: settings.class_prefix + 'video')
       videoElem.on('ended', resetVideo)
       videoElem.on('timeupdate', updateProgress)
+      videoElem.on('loadedmetadata', updateDuration)
       
       # loop through the video sources
       for source in settings.video_sources
@@ -79,15 +83,6 @@
         class: settings.class_prefix + 'controls')
       
       # create control elements
-      playButton = $('<button/>',
-        class: settings.class_prefix + 'control' + ' ' +
-          settings.class_prefix + 'play-button'
-        text: '>').appendTo(videoControls)
-      playButton.on('click', (e) ->
-        e.preventDefault()
-        toggleIsPlaying(this)
-      )
-
       progressBar = $('<span/>',
         class: settings.class_prefix + 'control' + ' ' +
           settings.class_prefix + 'progress-bar').appendTo(videoControls)
@@ -95,6 +90,20 @@
       progressFill = $('<span/>',
         class: settings.class_prefix + 'control' + ' ' +
           settings.class_prefix + 'progress-fill').appendTo(progressBar)
+
+      playButton = $('<button/>',
+        class: settings.class_prefix + 'control' + ' ' +
+          settings.class_prefix + 'play-button'
+        text: '>').appendTo(videoControls)
+      playButton.on('click', (e) ->
+        e.preventDefault()
+        toggleIsPlaying(this))
+
+      progressTime = $('<div/>',
+        class: settings.class_prefix + 'control' + ' ' +
+          settings.class_prefix + 'progressTime').appendTo(videoControls)
+      progressTime.html('<span class="currentTime">' + msToTime(videoElem.get(0).currentTime) + '</span> / ' +
+        '<span class="totalTime">' + msToTime(videoElem.get(0).duration) + '</span>')
       
       # add the elements to the player
       $(wrapperElem).append(videoElem)
@@ -144,18 +153,45 @@
 
       if typeof setProgress != 'number'
         # calculate position in video as percentage
-        progress = videoElem.get(0).currentTime / videoElem.get(0).duration
+        progress = videoElem.get(0).currentTime
       else
         progress = setProgress
 
       # calculate width for the progress fill
-      progressWidth = progress * progressBar.width()
+      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)

src/sass/mup.sass

@@ -5,16 +5,36 @@
   padding: 0
 
 .mup-controls
-  display: flex
   vertical-align: top
   white-space: nowrap
-  width: calc(100% - 10px)
   padding: 5px
   background: #212121
 
 .mup-control
   display: inline-block
-  flex: none
+
+  &:not(:last-child)
+    margin-right: 10px
+
+.mup-progress-bar, .mup-progress-fill
+  margin: 0
+  padding: 0
+  border: 0
+
+.mup-control.mup-progress-bar
+  display: block
+  height: 20px
+  margin: 0 0 5px
+  padding: 0
+  background: grey
+
+.mup-progress-fill
+  display: block
+  width: 0
+  height: 100%
+  margin: 0
+  padding: 0
+  background: green
 
 button.mup-control
   margin: 0
@@ -29,15 +49,5 @@ button.mup-control
     color: #212121
     cursor: pointer
 
-.mup-progress-bar, .mup-progress-fill
-  margin: 0
-  padding: 0
-  border: 0
-
-.mup-progress-bar
-  flex: 1
-  background: pink
-
-.mup-progress-fill
-  height: 100%
-  background: lime
+.mup-control
+  color: white