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 = $('
', + class: settings.class_prefix + 'controls-left').appendTo(videoControls) + videoControlsRight = $('', + class: settings.class_prefix + 'controls-right').appendTo(videoControls) + playButton = $('', 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 = $('', class: settings.class_prefix + 'control' + ' ' + - settings.class_prefix + 'progressTime').appendTo(videoControls) + settings.class_prefix + 'progressTime').appendTo(videoControlsLeft) progressTime.html('' + msToTime(videoElem.get(0).currentTime) + ' / ' + '' + msToTime(videoElem.get(0).duration) + '') + volumeSlider = $('', + 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