--- a/src/ldt/ldt/static/ldt/js/LdtPlayer-release.js Fri Feb 03 12:13:24 2012 +0100
+++ b/src/ldt/ldt/static/ldt/js/LdtPlayer-release.js Fri Feb 03 16:02:04 2012 +0100
@@ -1092,12 +1092,12 @@
IriSP.annotation_loading_template = "{{! template shown while the annotation widget is loading }}<div id='Ldt-load-container'><div id='Ldt-loader'> </div> Chargement... </div>";
IriSP.annotationsListWidget_template = "{{! template for the annotation list widget }}<div class='Ldt-AnnotationsListWidget'> <!-- ugly div because we want to have a double border --> <div class='Ldt-Annotation-DoubleBorder'> <ul> {{#annotations}} <li> {{! if the url is not present, it means that the annotation exists in the current project }} {{^url}} <a href='#id={{id}}'> {{/url}} {{! otherwise link to url }} {{#url}} <a href='{{url}}#id={{id}}'> {{/url}} <div style='overflow: auto; margin-top: 5px; margin-bottom: 5px;'> <div class='Ldt-AnnotationsList-Caption'> <img src='http://i.imgur.com/aoUlC.jpg'></img> </div> <div class='Ldt-AnnotationsList-Duration'>{{begin}} - {{end}}</div> <div class='Ldt-AnnotationsList-Title'>{{title}}</div> <div class='Ldt-AnnotationsList-Description'>{{desc}}</div> </div> </a> </li> {{/annotations}} </ul> </div></div>";
IriSP.arrowWidget_template = "<div class='Ldt-arrowWidget'></div>";
-IriSP.createAnnotationWidget_template = "{{! 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 class='Ldt-createAnnotation-startScreen'> <div style='margin-bottom: 7px; overflow: auto;'> <div class='Ldt-createAnnotation-Title'></div> <div class='Ldt-createAnnotation-TimeFrame'></div> {{^cinecast_version}} <div class='Ldt-createAnnotation-Minimize' title='Cancel'></img> {{/cinecast_version}} </div> <div class='Ldt-createAnnotation-Container'> <textarea class='Ldt-createAnnotation-Description'></textarea> <div class='Ldt-createAnnotation-profileArrow'> </div> <div class='Ldt-createAnnotation-userAvatar'> {{^user_avatar}} <img src='https://si0.twimg.com/sticky/default_profile_images/default_profile_1_normal.png'></img> {{/user_avatar}} {{#user_avatar}} <img src='{{ user_avatar }}'></img> {{/user_avatar}} </div> </div> <div class='Ldt-createAnnotation-submitButton'> <div style='position: absolute; bottom: 5px; right: 5px;'>Submit</div> </div> <div class='Ldt-createAnnotation-keywords'> Add keywords : </div> {{#polemic_mode}} <div class='Ldt-createAnnotation-polemics'> Add polemic keywords </div> {{/polemic_mode}} </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-errorScreen' style='display: none; text-align: center'> An error happened while contacting the server. Your annotation has not been saved. </div> <div class='Ldt-createAnnotation-endScreen' style='display: none'> Thank you, your annotation has been saved.<br> Would you like to share it on social networks ? <div style='margin-top: 12px; text-align: center;'> <a target='_blank' class='Ldt-createAnnotation-endScreen-TweetLink'><img src='{{img_dir}}/tweet_button.png' style='margin-right: 20px;'></img></a> <a target='_blank' class='Ldt-createAnnotation-endScreen-FbLink'><img src='{{img_dir}}/facebook_button.png' style='margin-right: 20px;'></img></a> <a target='_blank' class='Ldt-createAnnotation-endScreen-GplusLink'><img src='{{img_dir}}/gplus_button.png' style='margin-right: 20px;'></img></a> </div> </div> </div></div>";
+IriSP.createAnnotationWidget_template = "{{! 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 class='Ldt-createAnnotation-startScreen'> <div style='margin-bottom: 7px; overflow: auto;'> <div class='Ldt-createAnnotation-Title'></div> <div class='Ldt-createAnnotation-TimeFrame'></div> {{^cinecast_version}} <div class='Ldt-createAnnotation-Minimize' title='Cancel'></div> {{/cinecast_version}} </div> <div class='Ldt-createAnnotation-Container'> <textarea class='Ldt-createAnnotation-Description'></textarea> <div class='Ldt-createAnnotation-profileArrow'> </div> <div class='Ldt-createAnnotation-userAvatar'> {{^user_avatar}} <img src='https://si0.twimg.com/sticky/default_profile_images/default_profile_1_normal.png'></img> {{/user_avatar}} {{#user_avatar}} <img src='{{ user_avatar }}'></img> {{/user_avatar}} </div> </div> <div class='Ldt-createAnnotation-submitButton'> <div style='position: absolute; bottom: 5px; right: 5px;'>Submit</div> </div> <div class='Ldt-createAnnotation-keywords'> Add keywords : </div> {{#polemic_mode}} <div class='Ldt-createAnnotation-polemics'> Add polemic keywords </div> {{/polemic_mode}} </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-errorScreen' style='display: none; text-align: center'> <div class='Ldt-createAnnotation-Minimize' title='Hide'></div> An error happened while contacting the server. Your annotation has not been saved. </div> <div class='Ldt-createAnnotation-endScreen' style='display: none'> <div class='Ldt-createAnnotation-Minimize' title='Hide'></div> Thank you, your annotation has been saved.<br> Would you like to share it on social networks ? <div style='margin-top: 12px; text-align: center;'> <a target='_blank' class='Ldt-createAnnotation-endScreen-TweetLink'><img src='{{img_dir}}/tweet_button.png' style='margin-right: 20px;'></img></a> <a target='_blank' class='Ldt-createAnnotation-endScreen-FbLink'><img src='{{img_dir}}/facebook_button.png' style='margin-right: 20px;'></img></a> <a target='_blank' class='Ldt-createAnnotation-endScreen-GplusLink'><img src='{{img_dir}}/gplus_button.png' style='margin-right: 20px;'></img></a> </div> </div> </div></div>";
IriSP.createAnnotationWidget_festivalCinecast_template = "{{! template for the annotation creation widget specific for the cinecast festival}}<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.<br> Would you like to share it on social networks ? <div style='margin-top: 12px; text-align: center;'> <a target='_blank' class='Ldt-createAnnotation-endScreen-TweetLink'><img src='{{img_dir}}/tweet_button.png' style='margin-right: 20px;'></img></a> <a target='_blank' class='Ldt-createAnnotation-endScreen-FbLink'><img src='{{img_dir}}/facebook_button.png' style='margin-right: 20px;'></img></a> <a target='_blank' class='Ldt-createAnnotation-endScreen-GplusLink'><img src='{{img_dir}}/gplus_button.png' style='margin-right: 20px;'></img></a> </div> </div> </div></div>";
IriSP.createAnnotation_errorMessage_template = "<p class='Ldt-createAnnotation-errorMessage'> You must enter text to submit an annotation</p>";
IriSP.overlay_marker_template = "{{! the template for the small bars which is z-indexed over our segment widget }}<div class='Ldt-SegmentPositionMarker' style='background-color: #F7268E;'></div>";
IriSP.player_template = "{{! template for the radio player }}<div class='Ldt-controler demo'> <div class='Ldt-LeftPlayerControls'> <div class='Ldt-button Ldt-CtrlPlay' title='Play/Pause'></div> <div class='Ldt-button Ldt-CtrlAnnotate' title='Annotate'></div> <div class='Ldt-button Ldt-CtrlSearch' title='Search'></div> <div class='LdtSearch'> <input class='LdtSearchInput' style='margin-top: 2px; margin-bottom: 2px;'></input> </div> </div> <div class='Ldt-RightPlayerControls'> <div class='Ldt-Time'> <div class='Ldt-ElapsedTime' title='Elapsed time'>00:00</div> <div class='Ldt-TimeSeparator'>/</div> <div class='Ldt-TotalTime' title='Total time'>00:00</div> </div> <div class='Ldt-button Ldt-CtrlSound' title='Mute/Unmute'></div> </div></div>";
-IriSP.search_template = "{{! template for the search container }}<div class='LdtSearchContainer' style='margin-left: {{margin_left}}; position: absolute; margin-top: -60px;'> <div class='LdtSearch' style='display: none; background-color: #EEE; width: 165px; boder: 1px; border-color: #CFCFCF; position: absolute; text-align: center;'> <input class='LdtSearchInput' style='margin-top: 2px; margin-bottom: 2px;' /> </div></div><div class='cleaner'></div>";
+IriSP.search_template = "{{! template for the search container }}<div class='LdtSearchContainer' style='margin-left: {{margin_left}}; position: absolute; margin-top: -60px;'> <div class='LdtSearch' style='display: none; background-color: #EEE; width: 165px; border-color: #CFCFCF; position: absolute; text-align: center;'> <input class='LdtSearchInput' style='margin-top: 1px; margin-bottom: 2px;' /> </div></div><div class='cleaner'></div>";
IriSP.share_template = "{{! social network sharing template }}<a onclick='__IriSP.MyApiPlayer.share(\'delicious\');' title='partager avec delicious'><span class='share shareDelicious'> </span></a> <a onclick='__IriSP.MyApiPlayer.share(\'facebook\');' title='partager avec facebook'> <span class='share shareFacebook'> </span></a><a onclick='__IriSP.MyApiPlayer.share(\'twitter\');' title='partager avec twitter'> <span class='share shareTwitter'> </span></a><a onclick='__IriSP.MyApiPlayer.share(\'myspace\');' title='partager avec Myspace'> <span class='share shareMySpace'> </span></a>";
IriSP.sliceWidget_template = "{{! template for the slice widget }}<div class='Ldt-sliceWidget'> {{! the whole bar }} <div class='Ldt-sliceBackground'></div> <div class='Ldt-sliceLeftHandle'></div> {{! the zone which represents our slice }} <div class='Ldt-sliceZone'></div> <div class='Ldt-sliceRightHandle'></div></div>";
IriSP.sliderWidget_template = "{{! template for the slider widget - it's composed of two divs we one overlayed on top of the other }}<div class='Ldt-sliderBackground'></div><div class='Ldt-sliderForeground'></div><div class='Ldt-sliderPositionMarker'></div>";
@@ -1920,6 +1920,12 @@
var pop;
var ret = layoutManager.createDiv();
var containerDiv = ret[0];
+ var spacerDiv = ret[1];
+
+ /* insert one pixel of margin between the video and the first widget, using the
+ spacer.
+ */
+ IriSP.jQuery("#" + spacerDiv).css("height", "1px");
switch(options.type) {
/*
@@ -2035,8 +2041,8 @@
for (index = 0; index < guiOptions.widgets.length; index++) {
var widgetConfig = guiOptions.widgets[index];
var widget = IriSP.instantiateWidget(popcornInstance, serialFactory, layoutManager, widgetConfig);
- ret_widgets.push(widget);
-
+
+ ret_widgets.push(widget);
};
return ret_widgets;
@@ -2731,6 +2737,7 @@
if (!this.cinecast_version)
this.selector.hide();
+ // add the keywords.
for (var i = 0; i < this.keywords.length; i++) {
var keyword = this.keywords[i];
var id = IriSP.guid("button_");
@@ -2950,7 +2957,7 @@
IriSP.createAnnotationWidget.prototype.showStartScreen = function() {
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.");
+ this.selector.find(".Ldt-createAnnotation-Description").val("Type your annotation here.");
};
IriSP.createAnnotationWidget.prototype.showWaitScreen = function() {
@@ -2963,6 +2970,7 @@
this.selector.find(".Ldt-createAnnotation-errorScreen").show();
};
+/** update show the final screen with links to share the created annotation */
IriSP.createAnnotationWidget.prototype.showEndScreen = function(annotation) {
this.selector.find(".Ldt-createAnnotation-DoubleBorder").children().hide();
@@ -2993,7 +3001,7 @@
this.selector.find(".Ldt-createAnnotation-Container")
.after(IriSP.templToHTML(IriSP.createAnnotation_errorMessage_template));
textfield.css("background-color", "#d93c71");
- } else {
+ } else {
this.selector.find(".Ldt-createAnnotation-errorMessage").show();
}
@@ -3121,7 +3129,8 @@
error:
function(jqXHR, textStatus, errorThrown) {
console.log("an error occured while contacting "
- + url + " and sending " + jsonString + textStatus ); _this.showErrorScreen(); } });
+ + url + " and sending " + jsonString + textStatus );
+ _this.showErrorScreen(); } });
};IriSP.HelloWorldWidget = function(Popcorn, config, Serializer) {
IriSP.Widget.call(this, Popcorn, config, Serializer);
}
@@ -3878,7 +3887,7 @@
this.positionMarker = this.selector.children(":first");
this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.positionUpdater));
-
+
var i = 0;
@@ -3973,10 +3982,33 @@
self.TooltipWidget.hide();
});
+ // react to mediafragment messages.
+ this._Popcorn.listen("IriSP.Mediafragment.showAnnotation",
+ function(id, divTitle) {
+ return function(annotation_id) {
+ if (annotation_id !== id)
+ return;
+
+ var divObject = IriSP.jQuery("#" + id);
+ divObject.animate({opacity: 0.6}, 5);
+ var offset = divObject.offset();
+ var correction = divObject.outerWidth() / 2;
+
+ var offset_x = offset.left + correction - 106;
+ if (offset_x < 0)
+ offset_x = 0;
+
+ var offset_y = offset.top;
+
+ self.TooltipWidget.show(divTitle, color, offset_x, offset_y - 160);
+ IriSP.jQuery(document).one("mousemove", function() { divObject.animate({opacity: 0.3}, 5);
+ self.TooltipWidget.hide(); });
+ }; }(id, divTitle));
+
IriSP.jQuery("#" + id).click(function(_this, annotation) {
return function() { _this.clickHandler(annotation)};
}(this, annotation));
- }
+ }
};
/* restores the view after a search */
@@ -4033,6 +4065,10 @@
this.positionMarker.css("left", position + "%");
};
+
+IriSP.SegmentsWidget.prototype.showAnnotation = function() {
+
+};
/** A widget to create a new segment */
IriSP.SliceWidget = function(Popcorn, config, Serializer) {
IriSP.Widget.call(this, Popcorn, config, Serializer);
@@ -4056,14 +4092,27 @@
this.leftHandle = this.selector.find(".Ldt-sliceLeftHandle");
this.rightHandle = this.selector.find(".Ldt-sliceRightHandle");
+ var left = this.selector.offset().left;
+ var top = this.selector.offset().top;
+ console.log("width %d, offset : %d", this.selector.width(), this.selector.offset().left);
+ // contain the handles correctly - we cannot set
+ // containment: parent because it wouldn't allow to select the
+ // whole slice, so we have to compute a box in which the slice is
+ // allowed to move.
+ var containment = [left - 8, top, this.selector.width() + left, top];
+ console.log(containment);
+ //if (browser.
+ // var containment = [left - 16, top, this.selector.width() + left - 8, top];
this.leftHandle.draggable({axis: "x",
drag: IriSP.wrap(this, this.leftHandleDragged),
- containment: "parent"
+ containment: containment
});
+ containment = [left, top, this.selector.width() + left, top];
+ // containment = [left, top, this.selector.width() + left - 8, top];
this.rightHandle.draggable({axis: "x",
drag: IriSP.wrap(this, this.rightHandleDragged),
- containment: "parent"
+ containment: containment
});
this.leftHandle.css("position", "absolute");
@@ -4103,9 +4152,11 @@
is the handle being dragged
*/
- var currentX = this.leftHandle.position()["left"];
+ var currentX = this.leftHandle.offset().left;
var rightHandleX = Math.floor(this.rightHandle.position()["left"]);
+ var container_offset = this.selector.offset().left;
+
if (Math.floor(ui.position.left) >= rightHandleX - 7) {
/* prevent the handle from moving past the right handle */
ui.position.left = rightHandleX - 7;
@@ -4116,7 +4167,8 @@
this.sliceZone.css("width", this.zoneWidth);
this.sliceZone.css("left", this.zoneLeft + "px");
- this._leftHandleOldLeft = Math.floor(this._leftHandleOldLeft);
+
+ this._leftHandleOldLeft = ui.position.left;
this.broadcastChanges();
};
@@ -4130,9 +4182,11 @@
var currentX = this.leftHandle.position()["left"];
var leftHandleX = Math.floor(this.leftHandle.position()["left"]);
+
+ var container_offset = this.selector.offset().left + this.selector.width();
if (Math.floor(ui.position.left) < leftHandleX + 7) {
- /* prevent the handle from moving past the right handle */
+ /* prevent the handle from moving past the left handle */
ui.position.left = leftHandleX + 7;
}
@@ -4150,7 +4204,7 @@
IriSP.SliceWidget.prototype.broadcastChanges = function() {
var leftPercent = (this.zoneLeft / this.selector.width()) * 100;
var zonePercent = (this.zoneWidth / this.selector.width()) * 100;
-
+
this._Popcorn.trigger("IriSP.SliceWidget.zoneChange", [leftPercent, zonePercent]);
};