lots of refactoring for this widget, as well as changes to support the cinecast popcorn-port
authorhamidouk
Thu, 12 Jan 2012 13:15:34 +0100
branchpopcorn-port
changeset 614 116de1c38a7d
parent 613 c2726c5c6477
child 615 7eb41c26a8b7
lots of refactoring for this widget, as well as changes to support the cinecast scenario.
src/js/widgets/createAnnotationWidget.js
--- a/src/js/widgets/createAnnotationWidget.js	Thu Jan 12 13:00:25 2012 +0100
+++ b/src/js/widgets/createAnnotationWidget.js	Thu Jan 12 13:15:34 2012 +0100
@@ -26,7 +26,9 @@
   
 	this.selector.append(annotationMarkup);
   
-  this.selector.hide();
+  if (!this.cinecast_version)
+    this.selector.hide();
+  
   for (var i = 0; i < this.keywords.length; i++) {
     var keyword = this.keywords[i];
     var id = IriSP.guid("button_");
@@ -39,7 +41,9 @@
     this.selector.find("#" + id).click(function(keyword) { return function() {
       var contents = _this.selector.find(".Ldt-createAnnotation-Description").val();
       if (contents.indexOf(keyword) != -1) {
-        var newVal = contents.replace(" " + keyword, "");        
+        var newVal = contents.replace(" " + keyword, "");
+        if (newVal == contents)
+          newVal = contents.replace(keyword, "");
       } else {
         if (contents === "")
           var newVal = keyword;
@@ -59,43 +63,70 @@
   
   this.selector.find(".Ldt-createAnnotation-Description")
                .bind("propertychange keyup input paste", IriSP.wrap(this, this.handleTextChanges));
+               
+  /* the cinecast version of the player is supposed to pause when the user clicks on the button */
+  if (this.cinecast_version)
+    this.selector.find(".Ldt-createAnnotation-Description")
+                 .one("propertychange keyup input paste js_mod", 
+                 function() { if (!_this._Popcorn.media.paused) _this._Popcorn.pause() });
+  
+  /* the cinecast version expects the user to comment on a defined segment.
+     As the widget is always shown, we need a way to update it's content as
+     time passes. We do this like we did with the annotationsWidget : we schedule
+     a .code start function which will be called at the right time.
+  */
+  if (this.cinecast_version) {
+    var legal_ids;
+    if (typeof(this._serializer.getChapitrage()) !== "undefined")
+      legal_id = this._serializer.getChapitrage();
+    else 
+      legal_id = this._serializer.getNonTweetIds()[0];
+    
+    var annotations = this._serializer._data.annotations;
+    var i;
+  
+    for (i in annotations) {     
+      var annotation = annotations[i];
+      if (typeof(annotation.meta) !== "undefined" && typeof(annotation.meta["id-ref"]) !== "undefined"
+            && legal_id !== annotation.meta["id-ref"]) {
+          continue;
+      }
+      
+      code = {start: annotation.begin / 1000, end: annotation.end / 1000,
+              onStart: function(annotation) { return function() {
+                      console.log(annotation);
+                      if (typeof(annotation.content) !== "undefined")
+                        _this.selector.find(".Ldt-createAnnotation-Title").html(annotation.content.title);
+
+                      _this._currentAnnotation = annotation;
+                      var beginTime = IriSP.msToTime(annotation.begin);
+                      var endTime = IriSP.msToTime(annotation.end);
+                      var timeTemplate = IriSP.templToHTML("- ({{begin}} - {{ end }})", {begin: beginTime, end: endTime });
+                      _this.selector.find(".Ldt-createAnnotation-TimeFrame").html(timeTemplate);
+              } }(annotation)
+            };
+      
+      this._Popcorn.code(code);
+    }
+  }
   
   this.selector.find(".Ldt-createAnnotation-submitButton").click(IriSP.wrap(this, this.handleButtonClick));
-  this._Popcorn.listen("IriSP.PlayerWidget.AnnotateButton.clicked", 
-                        IriSP.wrap(this, this.handleAnnotateSignal));  
+  
+  if (!this.cinecast_version)
+    this._Popcorn.listen("IriSP.PlayerWidget.AnnotateButton.clicked", 
+                          IriSP.wrap(this, this.handleAnnotateSignal));  
 };
 
 IriSP.createAnnotationWidget.prototype.handleAnnotateSignal = function() {
+  // note : this signal is only handled by the non-cinecast version.
   if (this._hidden == false) {
     this.selector.hide();
     this._hidden = true;
-    /* reinit the fields */
-    
-    this.selector.find(".Ldt-createAnnotation-DoubleBorder").children().show();
-    this.selector.find("Ldt-createAnnotation-Description").val("");
-    this.selector.find(".Ldt-createAnnotation-endScreen").hide();
     
     // free the arrow.
     this._Popcorn.trigger("IriSP.ArrowWidget.releaseArrow");
   } else {
-    if (this.cinecast_version) {
-      var currentTime = this._Popcorn.currentTime();
-      var currentAnnotation = this._serializer.currentAnnotations(currentTime)[0];
-
-      var beginTime = IriSP.msToTime(currentAnnotation.begin);
-      var endTime = IriSP.msToTime(currentAnnotation.end);
-      
-      /* save the variable because the user may take some time writing his 
-         comment so the currentAnnottion may change when it's time to post it */
-      this._currentAnnotation = currentAnnotation;
-      
-      if (typeof(currentAnnotation.content) !== "undefined")
-        this.selector.find(".Ldt-createAnnotation-Title").html(currentAnnotation.content.title);
-
-      var timeTemplate = IriSP.templToHTML("- ({{begin}} - {{ end }})", {begin: beginTime, end: endTime });
-      this.selector.find(".Ldt-createAnnotation-TimeFrame").html(timeTemplate);
-    }
-    
+    this.showStartScreen();
     this.selector.show();
     this._hidden = false;
     
@@ -104,6 +135,7 @@
   }
 };
 
+
 /** watch for changes in the textfield and change the buttons accordingly */
 IriSP.createAnnotationWidget.prototype.handleTextChanges = function(event) {
   var contents = this.selector.find(".Ldt-createAnnotation-Description").val();
@@ -127,14 +159,37 @@
   }
 };
 
+IriSP.createAnnotationWidget.prototype.showStartScreen = function() {
+  this.selector.find(".Ldt-createAnnotation-DoubleBorder").children().show();
+  this.selector.find("Ldt-createAnnotation-Description").val("");
+  this.selector.find(".Ldt-createAnnotation-endScreen").hide();    
+};
+
+IriSP.createAnnotationWidget.prototype.showEndScreen = function() {
+  this.selector.find(".Ldt-createAnnotation-DoubleBorder").children().hide();
+  
+  if (this.cinecast_version) {
+    this.selector.find(".Ldt-createAnnotation-Title").parent().show();      
+  }
+
+  var twStatus = IriSP.mkTweetUrl(document.location.href);
+  var gpStatus = IriSP.mkGplusUrl(document.location.href);
+  var fbStatus = IriSP.mkFbUrl(document.location.href);
+  
+  this.selector.find(".Ldt-createAnnotation-endScreen-TweetLink").attr("href", twStatus);
+  this.selector.find(".Ldt-createAnnotation-endScreen-FbLink").attr("href", fbStatus);
+  this.selector.find(".Ldt-createAnnotation-endScreen-GplusLink").attr("href", gpStatus);
+          
+  this.selector.find(".Ldt-createAnnotation-endScreen").show();
+};
+
 /** handle clicks on "send annotation" button */
 IriSP.createAnnotationWidget.prototype.handleButtonClick = function(event) {
   var _this = this;
   var textfield = this.selector.find(".Ldt-createAnnotation-Description");
   var contents = textfield.val();
 
-  if (contents === "") {
-  
+  if (contents === "") {  
     if (this.selector.find(".Ldt-createAnnotation-errorMessage").length === 0) {
       this.selector.find(".Ldt-createAnnotation-Container")
                    .after(IriSP.templToHTML(IriSP.createAnnotation_errorMessage_template));
@@ -142,80 +197,75 @@
     } else {
       this.selector.find(".Ldt-createAnnotation-errorMessage").show();
     }
-      // use namespaced events to be able to unbind them quickly and without unbinding
-      // the other event handlers.
-      textfield.bind("js_mod.tmp propertychange.tmp keyup.tmp input.tmp paste.tmp", IriSP.wrap(this, function() {
+
+      textfield.one("js_mod propertychange keyup input paste", IriSP.wrap(this, function() {
                       var contents = textfield.val();
                       
                       if (contents !== "") {
                         this.selector.find(".Ldt-createAnnotation-errorMessage").hide();
                         textfield.css("background-color", "");
-                        textfield.unbind(".tmp");
                       }
                    }));
   } else {
-    this.selector.find(".Ldt-createAnnotation-DoubleBorder").children().hide();
-    
-    if (this.cinecast_version) {
-      this.selector.find(".Ldt-createAnnotation-Title").parent().show();      
-    }
-
-    var twStatus = IriSP.mkTweetUrl(document.location.href);
-    var gpStatus = IriSP.mkGplusUrl(document.location.href);
-    var fbStatus = IriSP.mkFbUrl(document.location.href);
-    
-    this.selector.find(".Ldt-createAnnotation-endScreen-TweetLink").attr("href", twStatus);
-    this.selector.find(".Ldt-createAnnotation-endScreen-FbLink").attr("href", fbStatus);
-    this.selector.find(".Ldt-createAnnotation-endScreen-GplusLink").attr("href", gpStatus);
-            
-    this.selector.find(".Ldt-createAnnotation-endScreen").show();
-
+    this.showEndScreen();
         
     if (typeof(this._currentAnnotation) === "undefined") {      
       console.log("this._currentAnnotation undefined");
       return;
     }
     
-    var apiJson = {annotations : [{}], meta: {}};
-    var annotation = apiJson["annotations"][0];
-    
-    annotation["media"] = this._serializer.currentMedia()["id"];
-    annotation["begin"] = this._currentAnnotation.begin;
-    annotation["end"] = this._currentAnnotation.end;
-    annotation["type"] = this._serializer.getContributions();
-    if (typeof(annotation["type"]) === "undefined")
-      annotation["type"] = "";
-    
-    annotation["type_title"] = "Contributions";
-    annotation.content = {};
-    annotation.content["data"] = contents;
-    
-    var meta = apiJson["meta"];
-    meta.creator = "An User";    
-    meta.created = Date().toString();
-    
-    annotation["tags"] = [];
-    
-    for (var i = 0; i < this.keywords.length; i++) {
-      var keyword = this.keywords[i];
-      if (contents.indexOf(keyword) != -1)
-        annotation["tags"].push(keyword);
-    }
-    
-    var jsonString = JSON.stringify(apiJson);
-    var project_id = this._serializer._data.meta.id;
-    
-    var url = Mustache.to_html("{{platf_url}}/ldtplatform/api/ldt/projects/{{id}}.json",
-                                {platf_url: IriSP.platform_url, id: project_id});
-    console.log(url, jsonString);
-    IriSP.jQuery.ajax({
-                url: url,
-                type: 'PUT',
-                contentType: 'application/json',
-                data: jsonString,
-                // bug with jquery >= 1.5, "json" adds a callback so we don't specify dataType
-                dataType: 'json',
-                success: function(json, textStatus, XMLHttpRequest) {
+    this.sendLdtData(contents, function() {
+                    if (_this.cinecast_version) {
+                        if (_this._Popcorn.media.paused)
+                          _this._Popcorn.play();
+                        
+                        window.setTimeout(IriSP.wrap(_this, function() { this.showStartScreen(); }), 5000);
+                    }
+                    });
+  }
+};
+
+IriSP.createAnnotationWidget.prototype.sendLdtData = function(contents, callback) {
+  var _this = this;
+  var apiJson = {annotations : [{}], meta: {}};
+  var annotation = apiJson["annotations"][0];
+  
+  annotation["media"] = this._serializer.currentMedia()["id"];
+  annotation["begin"] = this._currentAnnotation.begin;
+  annotation["end"] = this._currentAnnotation.end;
+  annotation["type"] = this._serializer.getContributions();
+  if (typeof(annotation["type"]) === "undefined")
+    annotation["type"] = "";
+  
+  annotation["type_title"] = "Contributions";
+  annotation.content = {};
+  annotation.content["data"] = contents;
+  
+  var meta = apiJson["meta"];
+  meta.creator = "An User";    
+  meta.created = Date().toString();
+  
+  annotation["tags"] = [];
+  
+  for (var i = 0; i < this.keywords.length; i++) {
+    var keyword = this.keywords[i];
+    if (contents.indexOf(keyword) != -1)
+      annotation["tags"].push(keyword);
+  }
+  
+  var jsonString = JSON.stringify(apiJson);
+  var project_id = this._serializer._data.meta.id;
+  
+  var url = Mustache.to_html("{{platf_url}}/ldtplatform/api/ldt/projects/{{id}}.json",
+                              {platf_url: IriSP.platform_url, id: project_id});
+                              
+  IriSP.jQuery.ajax({
+      url: url,
+      type: 'PUT',
+      contentType: 'application/json',
+      data: jsonString,               
+      dataType: 'json',
+      success: function(json, textStatus, XMLHttpRequest) {
                     /* add the annotation to the annotations and tell the world */
                     delete annotation.tags;
                     annotation.content.description = annotation.content.data;
@@ -227,10 +277,10 @@
                     // everything is shared so there's no need to propagate the change
                     _this._serializer._data.annotations.push(annotation);
                     _this._Popcorn.trigger("IriSP.createAnnotationWidget.addedAnnotation");
-                },
-                error: function(jqXHR, textStatus, errorThrown) {
-                    alert("ERROR = " + jqXHR.responseText + ", " + errorThrown);
-                }
-            });
-  }
+                    callback();
+      }, 
+      error: 
+              function() { 
+                            console.log("an error occured while contacting " 
+                            + url + " and sending " + jsonString); } });
 };
\ No newline at end of file