widget works now more or less like in samuel's crea.
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>