widget works now more or less like in samuel's crea. popcorn-port
authorhamidouk
Fri, 30 Dec 2011 16:01:09 +0100
branchpopcorn-port
changeset 553 10d08f43c534
parent 552 3e8be3e6bdfb
child 554 de53cbe1b052
widget works now more or less like in samuel's crea.
assets/gplus_button.psd
assets/tweet_button.psd
src/css/LdtPlayer.css
src/css/imgs/facebook_button.png
src/css/imgs/gplus_button.png
src/css/imgs/tweet_button.png
src/js/utils.js
src/js/widgets/createAnnotationWidget.js
src/templates/createAnnotationWidget.html
src/templates/createAnnotationWidget_festivalCinecast.html
Binary file assets/gplus_button.psd has changed
Binary file assets/tweet_button.psd has changed
--- a/src/css/LdtPlayer.css	Fri Dec 30 14:56:46 2011 +0100
+++ b/src/css/LdtPlayer.css	Fri Dec 30 16:01:09 2011 +0100
@@ -662,4 +662,17 @@
   background-repeat: no-repeat;
   height: 48px;
   width: 48px;
+}
+
+.Ldt-createAnnotation-endScreen {
+  background-color: #ffffff;
+  margin-left: 5px;
+  margin-right: 5px;
+  display: table-cell;
+  border: 1px solid #d6d6d6;
+  padding: 10px;
+  font-size: 13px;
+  font-weight: bold;
+  color : #f7268e;
+  text-align: center;
 }
\ No newline at end of file
Binary file src/css/imgs/facebook_button.png has changed
Binary file src/css/imgs/gplus_button.png has changed
Binary file src/css/imgs/tweet_button.png has changed
--- a/src/js/utils.js	Fri Dec 30 14:56:46 2011 +0100
+++ b/src/js/utils.js	Fri Dec 30 16:01:09 2011 +0100
@@ -38,6 +38,13 @@
     return num.toString();
   }
 };
+
+/* convert a number of milliseconds to a tuple of the form 
+   [hours, minutes, seconds]
+*/
+IriSP.msToTime = function(ms) {
+  return IriSP.secondsToTime(ms / 1000);
+}
 /* convert a number of seconds to a tuple of the form 
    [hours, minutes, seconds]
 */
--- a/src/js/widgets/createAnnotationWidget.js	Fri Dec 30 14:56:46 2011 +0100
+++ b/src/js/widgets/createAnnotationWidget.js	Fri Dec 30 16:01:09 2011 +0100
@@ -2,6 +2,7 @@
   IriSP.Widget.call(this, Popcorn, config, Serializer);
   this._hidden = true;
   this.keywords = IriSP.widgetsDefaults["createAnnotationWidget"].keywords;
+  this.cinecast_version = IriSP.widgetsDefaults["createAnnotationWidget"].cinecast_version;
   this.ids = {}; /* a dictionnary linking buttons ids to keywords */
 };
 
@@ -14,24 +15,15 @@
     this.selector.find(".Ldt-SaKeywordText").text("");
 };
 
-IriSP.createAnnotationWidget.prototype.showWidget = function() {
-  this.layoutManager.slice.after("ArrowWidget")
-                          .before("createAnnotationWidget")
-                          .jQuerySelector().hide();
-  this.selector.show();
-};
-
-IriSP.createAnnotationWidget.prototype.hideWidget = function() {
-  this.selector.hide();
-  this.layoutManager.slice.after("ArrowWidget")
-                          .before("createAnnotationWidget")
-                          .jQuerySelector().show();
-};
-
 IriSP.createAnnotationWidget.prototype.draw = function() {
   var _this = this;
 
-  var annotationMarkup = IriSP.templToHTML(IriSP.createAnnotationWidget_template);
+  if (this.cinecast_version) {    
+    var annotationMarkup = IriSP.templToHTML(IriSP.createAnnotationWidget_festivalCinecast_template);
+  } else {
+    var annotationMarkup = IriSP.templToHTML(IriSP.createAnnotationWidget_template);
+  }
+  
 	this.selector.append(annotationMarkup);
   
   this.selector.hide();
@@ -62,6 +54,7 @@
   this.selector.find(".Ldt-createAnnotation-Description")
                .bind("propertychange keyup input paste", IriSP.wrap(this, this.handleTextChanges));
   
+  this.selector.find(".Ldt-createAnnotation-submitButton").click(IriSP.wrap(this, this.handleButtonClick));
   this._Popcorn.listen("IriSP.PlayerWidget.AnnotateButton.clicked", 
                         IriSP.wrap(this, this.handleAnnotateSignal));  
 };
@@ -70,7 +63,25 @@
   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();
   } 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);
+      
+      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.selector.show();
     this._hidden = false;
   }
@@ -97,4 +108,10 @@
       }
     }
   }
+};
+
+/** handle clicks on "send annotation" button */
+IriSP.createAnnotationWidget.prototype.handleButtonClick = function(event) {
+  this.selector.find(".Ldt-createAnnotation-DoubleBorder").children().hide();
+  this.selector.find(".Ldt-createAnnotation-endScreen").show();
 };
\ No newline at end of file
--- a/src/templates/createAnnotationWidget.html	Fri Dec 30 14:56:46 2011 +0100
+++ b/src/templates/createAnnotationWidget.html	Fri Dec 30 16:01:09 2011 +0100
@@ -14,7 +14,7 @@
       </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>
     
     <div class='Ldt-createAnnotation-keywords'>
@@ -23,5 +23,14 @@
     <div class='Ldt-createAnnotation-submitButton'>
       <div style='position: absolute; bottom: 10pt; right: 11pt;'>Submit</div>
     </div>
+    
+    <div class='Ldt-createAnnotation-endScreen' style='display: none'>
+      Thank you, your annotation has been saved.
+      <div style='margin-top: 12px;'>
+        <img src='{{img_dir}}/tweet_button.png' style='margin-right: 20px; display: table-cell'></img>
+        <img src='{{img_dir}}/facebook_button.png' style='margin-right: 20px; display: table-cell'></img>
+        <img src='{{img_dir}}/gplus_button.png' style='margin-right: 20px; display: table-cell'></img>                
+      </div>
+    </div>
   </div>
 </div>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/templates/createAnnotationWidget_festivalCinecast.html	Fri Dec 30 16:01:09 2011 +0100
@@ -0,0 +1,36 @@
+{{! template for the annotation creation widget }}
+<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>
+      <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 class='Ldt-createAnnotation-endScreen' style='display: none'>
+      Thank you, your annotation has been saved.
+      <div style='margin-top: 12px;'>
+        <img src='{{img_dir}}/tweet_button.png' style='margin-right: 20px; display: table-cell'></img>
+        <img src='{{img_dir}}/facebook_button.png' style='margin-right: 20px; display: table-cell'></img>
+        <img src='{{img_dir}}/gplus_button.png' style='margin-right: 20px; display: table-cell'></img>                
+      </div>
+    </div>
+  </div>
+</div>