equal
deleted
inserted
replaced
14 this.sliderForeground = this.selector.children(".sliderForeground"); |
14 this.sliderForeground = this.selector.children(".sliderForeground"); |
15 |
15 |
16 this.selector.append(Mustache.to_html(IriSP.overlay_marker_template)); |
16 this.selector.append(Mustache.to_html(IriSP.overlay_marker_template)); |
17 this.positionMarker = this.selector.children(".positionMarker"); |
17 this.positionMarker = this.selector.children(".positionMarker"); |
18 |
18 |
|
19 this.sliderBackground.click(function(event) { self.clickHandler.call(self, event); }); |
|
20 |
19 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater)); |
21 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater)); |
20 }; |
22 }; |
21 |
23 |
22 /* updates the slider as time passes */ |
24 /* updates the slider as time passes */ |
23 IriSP.SliderWidget.prototype.sliderUpdater = function() { |
25 IriSP.SliderWidget.prototype.sliderUpdater = function() { |
27 var percent = ((time / duration) * 100).toFixed(2); |
29 var percent = ((time / duration) * 100).toFixed(2); |
28 this.sliderForeground.css("width", percent + "%"); |
30 this.sliderForeground.css("width", percent + "%"); |
29 this.positionMarker.css("left", percent + "%"); |
31 this.positionMarker.css("left", percent + "%"); |
30 |
32 |
31 }; |
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 }; |