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 |
|
19 modified programatically. We use it for unit tests */ |
|
20 change: function(event, ui) { |
|
21 self._Popcorn.trigger("test.fixture", ui.value); |
|
22 } |
|
23 |
|
24 }); |
|
25 |
18 |
26 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater)); |
19 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater)); |
27 }; |
20 }; |
28 |
21 |
29 /* updates the slider as time passes */ |
22 /* updates the slider as time passes */ |
30 IriSP.SliderWidget.prototype.sliderUpdater = function() { |
23 IriSP.SliderWidget.prototype.sliderUpdater = function() { |
31 var currentPosition = this._Popcorn.currentTime(); |
24 var time = this._Popcorn.currentTime(); |
32 this.selector.slider( "value", currentPosition); |
25 |
|
26 var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000; |
|
27 var percent = ((time / duration) * 100).toFixed(2); |
|
28 this.sliderForeground.css("width", percent + "%"); |
|
29 this.positionMarker.css("left", percent + "%"); |
|
30 |
33 }; |
31 }; |