1 IriSP.SliderWidget = function(Popcorn, config, Serializer) { 

     1 define(["IriSP", "widgets", "util"], function() {

     2   IriSP.Widget.call(this, Popcorn, config, Serializer);

     2   IriSP.SliderWidget = function(Popcorn, config, Serializer) { 

     3 };

     3     IriSP.Widget.call(this, Popcorn, config, Serializer);

     4   };

     5 IriSP.SliderWidget.prototype = new IriSP.Widget();

     6   IriSP.SliderWidget.prototype = new IriSP.Widget();

     7 IriSP.SliderWidget.prototype.draw = function() {

     8   IriSP.SliderWidget.prototype.draw = function() {

     8   var self = this;

     9     var self = this;

     9   

    10     

    10   this.selector.append("<div class='sliderBackground'></div>");

    11     this.selector.append("<div class='sliderBackground'></div>");

    11   this.sliderBackground = this.selector.children(".sliderBackground");

    12     this.sliderBackground = this.selector.children(".sliderBackground");

    12   

    13     

    13   this.selector.append("<div class='sliderForeground' style='position: absolute; top: 0%; width: 0%;'></div>");

    14     this.selector.append("<div class='sliderForeground' style='position: absolute; top: 0%; width: 0%;'></div>");

    14   this.sliderForeground = this.selector.children(".sliderForeground");

    15     this.sliderForeground = this.selector.children(".sliderForeground");

    15   

    16     

    16   this.selector.append(Mustache.to_html(IriSP.overlay_marker_template));

    17     this.selector.append(Mustache.to_html(IriSP.overlay_marker_template));

    17   this.positionMarker = this.selector.children(".positionMarker");

    18     this.positionMarker = this.selector.children(".positionMarker");

    18   

    19     

    19   this.sliderBackground.click(function(event) { self.clickHandler.call(self, event); });

    20     this.sliderBackground.click(function(event) { self.clickHandler.call(self, event); });

    20   

    21     

    21   this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater));

    22     this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater));

    22 };

    23   };

    24 /* updates the slider as time passes */

    25   /* updates the slider as time passes */

    25 IriSP.SliderWidget.prototype.sliderUpdater = function() {  

    26   IriSP.SliderWidget.prototype.sliderUpdater = function() {  

    26   var time = this._Popcorn.currentTime();

    27     var time = this._Popcorn.currentTime();

    27   

    28     

    28   var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;

    29     var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;

    29   var percent = ((time / duration) * 100).toFixed(2);

    30     var percent = ((time / duration) * 100).toFixed(2);

    30 	this.sliderForeground.css("width", percent + "%");

    31     this.sliderForeground.css("width", percent + "%");

    31 	this.positionMarker.css("left", percent + "%");

    32     this.positionMarker.css("left", percent + "%");

    32   

    33     

    33 };

    34   };

    35 IriSP.SliderWidget.prototype.clickHandler = function(event) {

    36   IriSP.SliderWidget.prototype.clickHandler = function(event) {

    36   /* this piece of code is a little bit convoluted - here's how it works :

    37     /* this piece of code is a little bit convoluted - here's how it works :

    37      we want to handle clicks on the progress bar and convert those to seeks in the media.

    38        we want to handle clicks on the progress bar and convert those to seeks in the media.

    38      However, jquery only gives us a global position, and we want a number of pixels relative

    39        However, jquery only gives us a global position, and we want a number of pixels relative

    39      to our container div, so we get the parent position, and compute an offset to this position,

    40        to our container div, so we get the parent position, and compute an offset to this position,

    40      and finally compute the progress ratio in the media.

    41        and finally compute the progress ratio in the media.

    41      Finally we multiply this ratio with the duration to get the correct time

    42        Finally we multiply this ratio with the duration to get the correct time

    42   */

    43     */

    43   

    44     

    44   var parentOffset = this.sliderBackground.parent().offset();

    45     var parentOffset = this.sliderBackground.parent().offset();

    45   var width = this.sliderBackground.width();

    46     var width = this.sliderBackground.width();

    46   var relX = event.pageX - parentOffset.left;

    47     var relX = event.pageX - parentOffset.left;

    47       

    48         

    48   var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;

    49     var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;

    49   var newTime = ((relX / width) * duration).toFixed(2);

    50     var newTime = ((relX / width) * duration).toFixed(2);

    50 	

    51     

    51   this._Popcorn.currentTime(newTime);

    52     this._Popcorn.currentTime(newTime);

    52 };

    53   };

    54 });