Arrow Positioning that Just Works (tm) popcorn-port
authorhamidouk
Thu, 24 Nov 2011 12:40:54 +0100
branchpopcorn-port
changeset 321 21d840371c6b
parent 320 b693ba1a83be
child 322 6fc87426ecd4
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.
src/js/widgets/arrowWidget.js
src/js/widgets/segmentsWidget.js
unittests/tests/widgets/segmentsWidget.js
--- 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");           
   });