diff --git a/src/coffee/player.coffee b/src/coffee/player.coffee index 61b62d2..539bb32 100644 --- a/src/coffee/player.coffee +++ b/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 = $('', - class: settings.class_prefix + 'control' + ' ' + - settings.class_prefix + 'play-button' - text: '>').appendTo(videoControls) - playButton.on('click', (e) -> - e.preventDefault() - toggleIsPlaying(this) - ) - progressBar = $('', class: settings.class_prefix + 'control' + ' ' + settings.class_prefix + 'progress-bar').appendTo(videoControls) @@ -95,6 +90,20 @@ progressFill = $('', class: settings.class_prefix + 'control' + ' ' + settings.class_prefix + 'progress-fill').appendTo(progressBar) + + playButton = $('', + class: settings.class_prefix + 'control' + ' ' + + settings.class_prefix + 'play-button' + text: '>').appendTo(videoControls) + playButton.on('click', (e) -> + e.preventDefault() + toggleIsPlaying(this)) + + progressTime = $('
', + class: settings.class_prefix + 'control' + ' ' + + settings.class_prefix + 'progressTime').appendTo(videoControls) + progressTime.html('' + msToTime(videoElem.get(0).currentTime) + ' / ' + + '' + msToTime(videoElem.get(0).duration) + '') # 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) diff --git a/src/sass/mup.sass b/src/sass/mup.sass index eedd58d..61dc6ee 100644 --- a/src/sass/mup.sass +++ b/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 \ No newline at end of file +.mup-control + color: white