Added a volume slider and added play/pause to clicking on the video

src/coffee/player.coffee

@@ -5,6 +5,7 @@
     settings = undefined # settings objects
     videoElem = undefined
     videoControls = undefined
+    volumeDragging = false
 
     # combine user settings with defaults
     settings = $.extend({
@@ -68,6 +69,7 @@
       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
@@ -91,20 +93,37 @@
         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(videoControls)
+        text: '>').appendTo(videoControlsLeft)
       playButton.on('click', (e) ->
         e.preventDefault()
-        toggleIsPlaying(this))
+        toggleIsPlaying())
 
       progressTime = $('<div/>',
         class: settings.class_prefix + 'control' + ' ' +
-          settings.class_prefix + 'progressTime').appendTo(videoControls)
+          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)
@@ -115,7 +134,7 @@
     # playVideo - start playing video
     playVideo = ->
       videoElem.get(0).play()
-      videoControls.children('.' + settings.class_prefix + 'play-button').text('||')
+      videoControls.find('.' + settings.class_prefix + 'play-button').text('||')
       isPlaying = true
 
       # end playVideo function
@@ -124,7 +143,7 @@
     # pauseVideo - pause video
     pauseVideo = ->
       videoElem.get(0).pause()
-      videoControls.children('.' + settings.class_prefix + 'play-button').text('>')
+      videoControls.find('.' + settings.class_prefix + 'play-button').text('>')
       isPlaying = false
 
       # end pauseVideo function
@@ -145,6 +164,10 @@
       # 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