Arrow Positioning that Just Works (tm)
cleaned up the code, removed useless signal IriSP.SegmentClick. The arrowWidget
now watches time changes and updates itself accordingly.
--- a/src/js/widgets/arrowWidget.js Thu Nov 24 12:39:46 2011 +0100
+++ b/src/js/widgets/arrowWidget.js Thu Nov 24 12:40:54 2011 +0100
@@ -1,5 +1,7 @@
IriSP.ArrowWidget = function(Popcorn, config, Serializer) {
IriSP.Widget.call(this, Popcorn, config, Serializer);
+
+ this._oldAnnotation = null;
};
@@ -16,15 +18,30 @@
IriSP.ArrowWidget.prototype.draw = function() {
var templ = Mustache.to_html(IriSP.arrowWidget_template, {});
this.selector.append(templ);
- this._Popcorn.listen("IriSP.SegmentsWidget.segmentClick", IriSP.wrap(this, this.segmentClickHandler));
+ this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeUpdateHandler));
};
-IriSP.ArrowWidget.prototype.segmentClickHandler = function(percents) {
- // we need to apply a fix because the arrow has a certain length
- // it's half the length of the arrow (27 / 2). We need to convert
- // it in percents though.
- var totalWidth = this.selector.width();
- var correction = ((27 / 2) / totalWidth) * 100;
- var corrected_percents = percents - correction;
- this.selector.children(".Ldt-arrowWidget").animate({"left" : corrected_percents + "%"});
+IriSP.ArrowWidget.prototype.timeUpdateHandler = function(percents) {
+ var currentTime = this._Popcorn.currentTime();
+ var currentAnnotation = this._serializer.currentAnnotations(currentTime)[0]; // FIXME : use the others ?
+
+ /* move the arrow only if the current annotation changes */
+ if (currentAnnotation != this._oldAnnotation) {
+ var begin = (+ currentAnnotation.begin) / 1000;
+ var end = (+ currentAnnotation.end) / 1000;
+
+ var duration = +this._serializer.currentMedia().meta["dc:duration"] / 1000;
+ var middle_time = (begin + end) / 2;
+ var percents = Math.floor((middle_time / duration) * 100);
+
+ // we need to apply a fix because the arrow has a certain length
+ // it's half the length of the arrow (27 / 2). We need to convert
+ // it in percents though.
+ var totalWidth = this.selector.width();
+ var correction = ((27 / 2) / totalWidth) * 100;
+ var corrected_percents = percents - correction;
+ this.selector.children(".Ldt-arrowWidget").animate({"left" : corrected_percents + "%"});
+
+ this._oldAnnotation = currentAnnotation;
+ }
}
--- a/src/js/widgets/segmentsWidget.js Thu Nov 24 12:39:46 2011 +0100
+++ b/src/js/widgets/segmentsWidget.js Thu Nov 24 12:40:54 2011 +0100
@@ -118,15 +118,7 @@
IriSP.SegmentsWidget.prototype.clickHandler = function(annotation) {
var begin = (+ annotation.begin) / 1000;
- var end = (+ annotation.end) / 1000;
this._Popcorn.currentTime(Math.floor(begin));
-
- var duration = +this._serializer.currentMedia().meta["dc:duration"] / 1000;
- var middle_time = (begin + end) / 2;
- var percents = Math.floor((middle_time / duration) * 100);
-
- console.log(begin, end, duration, middle_time, percents);
- this._Popcorn.trigger("IriSP.SegmentsWidget.segmentClick", percents);
};
IriSP.SegmentsWidget.prototype.searchHandler = function(searchString) {
--- a/unittests/tests/widgets/segmentsWidget.js Thu Nov 24 12:39:46 2011 +0100
+++ b/unittests/tests/widgets/segmentsWidget.js Thu Nov 24 12:40:54 2011 +0100
@@ -44,14 +44,12 @@
var spy_segmentClick = this.spy();
var spy_handler = sinon.spy(widget, "clickHandler");
this.Popcorn.listen("timeupdate", spy_timeupdate);
- this.Popcorn.listen("IriSP.SegmentsWidget.segmentClick", spy_segmentClick);
var selector = IriSP.jQuery("#widget-div :not(first-child)");
var random = Math.round(Math.random() * selector.length) + 1;
selector.eq(random).click();
ok(spy_timeupdate.called, "the timeupdate signal has been sent");
- ok(spy_segmentClick.called, "the IriSP.segmentClick signal has been sent");
ok(spy_handler.called, "handling function has been called");
});