5 IriSP.SliderWidget.prototype = new IriSP.Widget(); |
5 IriSP.SliderWidget.prototype = new IriSP.Widget(); |
6 |
6 |
7 IriSP.SliderWidget.prototype.draw = function() { |
7 IriSP.SliderWidget.prototype.draw = function() { |
8 var self = this; |
8 var self = this; |
9 |
9 |
10 this.selector.slider( { //range: "min", |
10 this.selector.append("<div class='sliderBackground'></div>"); |
11 value: 0, |
11 this.sliderBackground = this.selector.children(".sliderBackground"); |
12 min: 1, |
12 |
13 max: this._serializer.currentMedia().meta["dc:duration"]/1000,//1:54:52.66 = 3600+3240+ |
13 this.selector.append("<div class='sliderForeground' style='position: absolute; top: 0%; width: 0%;'></div>"); |
14 step: 0.1, |
14 this.sliderForeground = this.selector.children(".sliderForeground"); |
15 slide: function(event, ui) { |
15 |
16 self._Popcorn.currentTime(ui.value); |
16 this.selector.append(Mustache.to_html(IriSP.overlay_marker_template)); |
17 }, |
17 this.positionMarker = this.selector.children(".positionMarker"); |
18 /* change event is similar to slide, but it happens when the slider position is |
18 |
19 modified programatically. We use it for unit tests */ |
19 this.sliderBackground.click(function(event) { self.clickHandler.call(self, event); }); |
20 change: function(event, ui) { |
|
21 self._Popcorn.trigger("test.fixture", ui.value); |
|
22 } |
|
23 |
|
24 }); |
|
25 |
20 |
26 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater)); |
21 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater)); |
27 }; |
22 }; |
28 |
23 |
29 /* updates the slider as time passes */ |
24 /* updates the slider as time passes */ |
30 IriSP.SliderWidget.prototype.sliderUpdater = function() { |
25 IriSP.SliderWidget.prototype.sliderUpdater = function() { |
31 var currentPosition = this._Popcorn.currentTime(); |
26 var time = this._Popcorn.currentTime(); |
32 this.selector.slider( "value", currentPosition); |
27 |
|
28 var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000; |
|
29 var percent = ((time / duration) * 100).toFixed(2); |
|
30 this.sliderForeground.css("width", percent + "%"); |
|
31 this.positionMarker.css("left", percent + "%"); |
|
32 |
33 }; |
33 }; |
|
34 |
|
35 IriSP.SliderWidget.prototype.clickHandler = function(event) { |
|
36 /* 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 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 and finally compute the progress ratio in the media. |
|
41 Finally we multiply this ratio with the duration to get the correct time |
|
42 */ |
|
43 |
|
44 var parentOffset = this.sliderBackground.parent().offset(); |
|
45 var width = this.sliderBackground.width(); |
|
46 var relX = event.pageX - parentOffset.left; |
|
47 |
|
48 var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000; |
|
49 var newTime = ((relX / width) * duration).toFixed(2); |
|
50 |
|
51 this._Popcorn.currentTime(newTime); |
|
52 }; |