More Butter Hacking

It's been difficult to be very productive over the past few days thanks to the network trouble we're experiencing at CDOT.  When I left on Friday I couldn't pull or push changes to GitHub and I was only able to get a stable connection to Moznet using Mibbit.

I did some work on a ticket for butter that was related to the scrubber.  "Scrubber" - an odd term, but for those who are as confused as I was initially, the scrubber in butter.js is the thin red line overlaying the butter time line that is used to visualize the target media's "currentTime" value.

The problem was that if the media element was playing, and the scrubber was grabbed using the mouse by the user, the media would continue to play.  For example, if I clicked the scrubber and held it in one position, the media would continue playback but the scrubber's position would remain the same.

The solution to this was simple, and one line:

!$popcorn.media.paused && $popcorn.media.pause();
This would pause the video only if the left side evaluates to true.  This was all cool, but It didn't feel right to have the video stay paused after the scrubber is released if the video was playing to begin with. My expected behaviour would be that it should continue playback after you release the scrubber (ONLY if the video was originally playing when the scrubber is picked up) this is what the solution looked like:

(function() {
  //original playing state of the video
var wasPaused = false;

$scrubberHandle.draggable({
axis: "x",
containment: "#ui-track-editting",
grid: [ increment / 8, 0 ],
start: function() {
TrackEditor.isScrubbing = true;
      //added this if block
if ( !$popcorn.media.paused ) {
$popcorn.media.pause();
wasPaused = true;
}
},
stop: function() {
TrackEditor.isScrubbing = false;
      //added this if block
      if (wasPaused) {
$popcorn.media.play();
wasPaused = false;
}
},
drag: function( event, ui ) {
      //if dragging and the video is playing for some reason, pause it.
      !$popcorn.media.paused && $popcorn.media.pause();
var scrubPosition = ui.position.left - $tracktimecanvas.position().left,
updateTo = $popcorn.video.duration / $tracktimecanvas.innerWidth() * scrubPosition,
quarterTime = _( updateTo ).fourth();

$popcorn.video.currentTime = quarterTime;
});
})()


This is up for SR now on lighthouse.

I'm gonna work on Popcorn today while I wait for Scott's new track management library.