From cdef2538748c9ee5463819ddf80519a411b4e8c6 Mon Sep 17 00:00:00 2001
From: Gregory Ballantine <gballantine555@gmail.com>
Date: Tue, 27 Feb 2018 17:45:41 -0500
Subject: [PATCH] Added a volume slider and added play/pause to clicking on the
 video

---
 src/coffee/player.coffee |  33 ++++++--
 src/sass/mup.sass        | 178 +++++++++++++++++++++++++++++++--------
 2 files changed, 171 insertions(+), 40 deletions(-)

diff --git a/src/coffee/player.coffee b/src/coffee/player.coffee
index 539bb32..c18575f 100644
--- a/src/coffee/player.coffee
+++ b/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
diff --git a/src/sass/mup.sass b/src/sass/mup.sass
index 61dc6ee..1b74bff 100644
--- a/src/sass/mup.sass
+++ b/src/sass/mup.sass
@@ -1,3 +1,15 @@
+//# general variables
+$main-color: red
+$text-color: white
+//# slider variables
+$slider-track-color: grey
+$slider-progress-color: red
+$slider-thumb-color: red
+$slider-thumb-height: calc(100% + 8px)
+$slider-thumb-width: 15px
+$slider-thumb-border-radius: 7px
+
+//# styles
 .mup-video
   vertical-align: top
   width: 100%
@@ -9,45 +21,141 @@
   white-space: nowrap
   padding: 5px
   background: #212121
+  overflow: auto
 
-.mup-control
-  display: inline-block
+  .mup-controls-left
+    float: left
+    margin: 0
+    padding: 0
+  
+  .mup-controls-right
+    float: right
+    margin: 0
+    padding: 0
 
-  &:not(:last-child)
-    margin-right: 10px
+  .mup-control
+    display: inline-block
+    color: $text-color
 
-.mup-progress-bar, .mup-progress-fill
-  margin: 0
-  padding: 0
-  border: 0
+    &:focus
+      outline: none
 
-.mup-control.mup-progress-bar
-  display: block
-  height: 20px
-  margin: 0 0 5px
-  padding: 0
-  background: grey
+    &:not(:last-child)
+      margin-right: 10px
 
-.mup-progress-fill
-  display: block
-  width: 0
-  height: 100%
-  margin: 0
-  padding: 0
-  background: green
+  .mup-progress-bar, .mup-progress-fill
+    margin: 0
+    padding: 0
+    border: 0
 
-button.mup-control
-  margin: 0
-  padding: 7px 12px
-  background: #eee
-  border: none
-  color: #000
-  font-size: 16px
-  transition: all 200ms ease-in-out
-  &:hover
-    background: #fff
-    color: #212121
-    cursor: pointer
+  .mup-control.mup-progress-bar
+    display: block
+    height: 8px
+    margin: 0 0 5px
+    padding: 0
+    background: $slider-track-color
 
-.mup-control
-  color: white
+  .mup-progress-fill
+    display: block
+    width: 0
+    height: 100%
+    margin: 0
+    padding: 0
+    background: $main-color
+
+  button.mup-control
+    margin: 0
+    padding: 7px 12px
+    background: #eee
+    border: none
+    color: #000
+    font-size: 16px
+    font-weight: bold
+    transition: all 200ms ease-in-out
+    &:hover
+      background: #fff
+      color: #212121
+      cursor: pointer
+  
+  .mup-volume-slider
+    display: inline-block
+    width: 120px
+    height: 10px
+    margin: 10px 0 0
+    padding: 0
+    background: none
+    border: none
+
+    &::-webkit-slider-runnable-track
+      width: 100%
+      height: 10px
+      cursor: pointer
+      animate: 0.2s
+      box-shadow: 0 0 0 #000000, 0 0 0 #0d0d0d
+      background: $slider-track-color
+      border-radius: 25px
+      border: 0px solid #000101
+      overflow: hidden
+    &::-webkit-slider-thumb
+      box-shadow: -100px 0 0 90px $main-color
+      border: 0px solid #000000
+      width: $slider-thumb-width
+      height: $slider-thumb-height
+      border-radius: $slider-thumb-border-radius
+      background: $main-color
+      cursor: pointer
+      -webkit-appearance: none
+      margin-top: -2.4px
+    &:focus::-webkit-slider-runnable-track
+      background: $slider-track-color
+    
+    &::-moz-range-track
+      width: 100%
+      height: 10px
+      cursor: pointer
+      animate: 0.2s
+      box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d
+      background: $slider-track-color
+      border-radius: 25px
+      border: 0px solid #000101
+    &::-moz-range-progress
+      height: 100%
+      background: $main-color
+      border-radius: $slider-thumb-border-radius
+    &::-moz-range-thumb
+      box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d
+      border: 0px solid #000000
+      width: $slider-thumb-width
+      height: $slider-thumb-height
+      border-radius: $slider-thumb-border-radius
+      background: $main-color
+      cursor: pointer
+    
+    &::-ms-track
+      width: 100%
+      height: 10px
+      cursor: pointer
+      animate: 0.2s
+      background: transparent
+      border-color: transparent
+      border-width: 39px 0
+      color: transparent
+    &::-ms-fill-lower, 
+    &::-ms-fill-upper
+      background: $slider-track-color
+      border: 0px solid #000101
+      border-radius: 50px
+      box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d
+    &::-ms-fill-lower
+      background: $slider-thumb-color
+    &::-ms-thumb
+      box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d
+      border: 0px solid #000000
+      width: $slider-thumb-width
+      height: $slider-thumb-height
+      border-radius: $slider-thumb-border-radius
+      background: $main-color
+      cursor: pointer
+    &:focus
+      &::-ms-fill-lower, &::-ms-fill-upper
+        background: #ac51b5