1 IriSP.ArrowWidget = function(Popcorn, config, Serializer) { |
1 IriSP.ArrowWidget = function(Popcorn, config, Serializer) { |
2 IriSP.Widget.call(this, Popcorn, config, Serializer); |
2 IriSP.Widget.call(this, Popcorn, config, Serializer); |
|
3 |
|
4 this._oldAnnotation = null; |
3 |
5 |
4 }; |
6 }; |
5 |
7 |
6 |
8 |
7 IriSP.ArrowWidget.prototype = new IriSP.Widget(); |
9 IriSP.ArrowWidget.prototype = new IriSP.Widget(); |
14 }; |
16 }; |
15 |
17 |
16 IriSP.ArrowWidget.prototype.draw = function() { |
18 IriSP.ArrowWidget.prototype.draw = function() { |
17 var templ = Mustache.to_html(IriSP.arrowWidget_template, {}); |
19 var templ = Mustache.to_html(IriSP.arrowWidget_template, {}); |
18 this.selector.append(templ); |
20 this.selector.append(templ); |
19 this._Popcorn.listen("IriSP.SegmentsWidget.segmentClick", IriSP.wrap(this, this.segmentClickHandler)); |
21 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeUpdateHandler)); |
20 }; |
22 }; |
21 |
23 |
22 IriSP.ArrowWidget.prototype.segmentClickHandler = function(percents) { |
24 IriSP.ArrowWidget.prototype.timeUpdateHandler = function(percents) { |
23 // we need to apply a fix because the arrow has a certain length |
25 var currentTime = this._Popcorn.currentTime(); |
24 // it's half the length of the arrow (27 / 2). We need to convert |
26 var currentAnnotation = this._serializer.currentAnnotations(currentTime)[0]; // FIXME : use the others ? |
25 // it in percents though. |
27 |
26 var totalWidth = this.selector.width(); |
28 /* move the arrow only if the current annotation changes */ |
27 var correction = ((27 / 2) / totalWidth) * 100; |
29 if (currentAnnotation != this._oldAnnotation) { |
28 var corrected_percents = percents - correction; |
30 var begin = (+ currentAnnotation.begin) / 1000; |
29 this.selector.children(".Ldt-arrowWidget").animate({"left" : corrected_percents + "%"}); |
31 var end = (+ currentAnnotation.end) / 1000; |
|
32 |
|
33 var duration = +this._serializer.currentMedia().meta["dc:duration"] / 1000; |
|
34 var middle_time = (begin + end) / 2; |
|
35 var percents = Math.floor((middle_time / duration) * 100); |
|
36 |
|
37 // we need to apply a fix because the arrow has a certain length |
|
38 // it's half the length of the arrow (27 / 2). We need to convert |
|
39 // it in percents though. |
|
40 var totalWidth = this.selector.width(); |
|
41 var correction = ((27 / 2) / totalWidth) * 100; |
|
42 var corrected_percents = percents - correction; |
|
43 this.selector.children(".Ldt-arrowWidget").animate({"left" : corrected_percents + "%"}); |
|
44 |
|
45 this._oldAnnotation = currentAnnotation; |
|
46 } |
30 } |
47 } |