added a spinner displayed while submitting an annotation. popcorn-port
authorhamidouk
Fri, 13 Jan 2012 14:18:21 +0100
branchpopcorn-port
changeset 627 13b9f14bf49a
parent 626 c66bf61262fa
child 628 55282f5ef477
added a spinner displayed while submitting an annotation.
src/css/imgs/spinner.gif
src/js/widgets/createAnnotationWidget.js
src/templates/createAnnotationWidget.html
Binary file src/css/imgs/spinner.gif has changed
--- a/src/js/widgets/createAnnotationWidget.js	Fri Jan 13 12:37:39 2012 +0100
+++ b/src/js/widgets/createAnnotationWidget.js	Fri Jan 13 14:18:21 2012 +0100
@@ -186,9 +186,14 @@
 };
 
 IriSP.createAnnotationWidget.prototype.showStartScreen = function() {
-  this.selector.find(".Ldt-createAnnotation-DoubleBorder").children().show();
-  this.selector.find("Ldt-createAnnotation-Description").val("Type your annotation here.");
-  this.selector.find(".Ldt-createAnnotation-endScreen").hide();    
+  this.selector.find(".Ldt-createAnnotation-DoubleBorder").children().hide();
+  this.selector.find(".Ldt-createAnnotation-startScreen").show();
+  this.selector.find("Ldt-createAnnotation-Description").val("Type your annotation here.");  
+};
+
+IriSP.createAnnotationWidget.prototype.showWaitScreen = function() {
+  this.selector.find(".Ldt-createAnnotation-DoubleBorder").children().hide();
+  this.selector.find(".Ldt-createAnnotation-waitScreen").show();  
 };
 
 IriSP.createAnnotationWidget.prototype.showEndScreen = function() {
@@ -233,15 +238,16 @@
                       }
                    }));
   } else {
-    this.showEndScreen();
+    this.showWaitScreen();
     
     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);
                     }
+                    debugger;
+                    _this.showEndScreen();
+                    window.setTimeout(IriSP.wrap(_this, function() { this.showStartScreen(); }), 5000);
                     });
   }
 };
@@ -267,7 +273,6 @@
     var duration = +this._serializer.currentMedia().meta["dc:duration"];
     annotation["begin"] = +((duration * (this.sliceLeft / 100)).toFixed(0));
     annotation["end"] = +((duration * ((this.sliceWidth + this.sliceLeft) / 100)).toFixed(0));
-    console.log(annotation["begin"], annotation["end"]);
   }
   
   annotation["type"] = this._serializer.getContributions();
@@ -295,7 +300,7 @@
   
   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',
@@ -303,13 +308,13 @@
       data: jsonString,               
       //dataType: 'json',
       success: function(json, textStatus, XMLHttpRequest) {
-                    debugger;
+
                     /* add the annotation to the annotations and tell the world */
                     delete annotation.tags;
                     annotation.content.description = annotation.content.data;
                     delete annotation.content.data;
                     annotation.id = json.annotations[0].id;
-                    annotation.title = _this._currentAnnotation.content.title;
+                    annotation.title = "";
                     annotation.meta = meta;
                     annotation.meta["id-ref"] = annotation["type"];
                     // everything is shared so there's no need to propagate the change
--- a/src/templates/createAnnotationWidget.html	Fri Jan 13 12:37:39 2012 +0100
+++ b/src/templates/createAnnotationWidget.html	Fri Jan 13 14:18:21 2012 +0100
@@ -2,26 +2,32 @@
 <div class='Ldt-createAnnotationWidget'>
   <!-- ugly div because we want to have a double border -->
   <div class='Ldt-createAnnotation-DoubleBorder'>
-    <div style='margin-bottom: 7px; overflow: auto;'>
-      <div class='Ldt-createAnnotation-Title'></div>
-      <div class='Ldt-createAnnotation-TimeFrame'></div>
-    </div>
-    
-    <div class='Ldt-createAnnotation-Container'>
-      <textarea class='Ldt-createAnnotation-Description'></textarea>
-      <div class='Ldt-createAnnotation-profileArrow'>
-        <img src='{{img_dir}}/annotate_arrow.png'></img>
+    <div class='Ldt-createAnnotation-startScreen'>
+      <div style='margin-bottom: 7px; overflow: auto;'>
+        <div class='Ldt-createAnnotation-Title'></div>
+        <div class='Ldt-createAnnotation-TimeFrame'></div>
       </div>
-      <div class='Ldt-createAnnotation-userAvatar'>        
-        <img src='https://si0.twimg.com/sticky/default_profile_images/default_profile_1_normal.png'></img>
+      
+      <div class='Ldt-createAnnotation-Container'>
+        <textarea class='Ldt-createAnnotation-Description'></textarea>
+        <div class='Ldt-createAnnotation-profileArrow'>
+          <img src='{{img_dir}}/annotate_arrow.png'></img>
+        </div>
+        <div class='Ldt-createAnnotation-userAvatar'>        
+          <img src='https://si0.twimg.com/sticky/default_profile_images/default_profile_1_normal.png'></img>
+        </div>
+      </div>
+      
+      <div class='Ldt-createAnnotation-keywords'>
+        Add keywords :       
+      </div>          
+      <div class='Ldt-createAnnotation-submitButton'>
+        <div style='position: absolute; bottom: 10pt; right: 11pt;'>Submit</div>
       </div>
     </div>
-    
-    <div class='Ldt-createAnnotation-keywords'>
-      Add keywords :       
-    </div>          
-    <div class='Ldt-createAnnotation-submitButton'>
-      <div style='position: absolute; bottom: 10pt; right: 11pt;'>Submit</div>
+    <div class='Ldt-createAnnotation-waitScreen' style='display: none; text-align: center'>
+      <img src='{{img_dir}}/spinner.gif'></img>
+      Please wait while your request is being processed...
     </div>
     
     <div class='Ldt-createAnnotation-endScreen' style='display: none'>