--- a/web/LdtPlayer-release.js Mon Dec 19 13:10:08 2011 +0100
+++ b/web/LdtPlayer-release.js Mon Dec 19 16:10:39 2011 +0100
@@ -8670,11 +8670,11 @@
};
-IriSP.annotation_template = "{{! template for an annotation displayed in a segmentWidget }}<div title='{{divTitle}}' id='{{id}}' class='Ldt-iri-chapter' style='left: {{startPourcent}}%; width: {{endPourcent}}%; background-color:#{{hexa_color}};' ></div>";
+IriSP.annotation_template = "{{! template for an annotation displayed in a segmentWidget }}<div title='{{divTitle}}' id='{{id}}' class='Ldt-iri-chapter' style='left: {{startPourcent}}%; width: {{endPixel}}px; background-color:#{{hexa_color}};' ></div>";
IriSP.annotationWidget_template = "{{! template for the annotation widget }}<div class='Ldt-AnnotationsWidget'> <!-- ugly div because we want to have a double border --> <div class='Ldt-Annotation-DoubleBorder'> <div class='Ldt-AnnotationContent'> <div class='Ldt-AnnotationShareIcons'> <a class='Ldt-fbShare' href=''><img src='{{img_dir}}/facebook.png' alt='share on facebook'></img></a> <a class='Ldt-TwShare' href=''><img src='{{img_dir}}/twitter.png' alt='share on twitter'></img></a> <a class='Ldt-GplusShare' href=''><img src='{{img_dir}}/google.png' alt='share on google+'></img></a> </div> <div class='Ldt-SaTitle'></div> <div class='Ldt-SaDescription'></div> </div> </div></div>";
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.arrowWidget_template = "<div class='Ldt-arrowWidget'></div>";
-IriSP.overlay_marker_template = "{{! the template for the small white bars which is z-indexed over our segment widget }}<div class='positionMarker' style='background-color: #F7268E;'></div>";
+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'></div> <div class='Ldt-button Ldt-CtrlAnnotate'></div> <div class='Ldt-button Ldt-CtrlSearch'></div> </div> <div class='Ldt-RightPlayerControls'> <div class='Ldt-Time'> <div class='Ldt-ElapsedTime'></div> <div class='Ldt-TimeSeparator'>/</div> <div class='Ldt-TotalTime'></div> </div> <div class='Ldt-button Ldt-CtrlSound'></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.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>";
@@ -10500,14 +10500,11 @@
var startPourcent = IriSP.timeToPourcent(begin, duration);
/* surprisingly, the following code doesn't work on webkit - for some reason, most of the
- boxes are 3 pixels wider.
+ boxes are 3 pixels smaller.
*/
- if (IriSP.jQuery.browser.webkit) { console.log("webkit");
- var endPourcent = (IriSP.timeToPourcent(end, duration) - startPourcent - onePxPercent * 4.5).toFixed(1);
- }
- else
- var endPourcent = (IriSP.timeToPourcent(end, duration) - startPourcent - onePxPercent * 1.5).toFixed(1);
-
+ var endPourcent = Math.floor(IriSP.timeToPourcent(end, duration) - startPourcent);
+ var endPixel = Math.floor(this.selector.parent().width() * (endPourcent / 100)) - 2;
+
if (i == 0) {
endPourcent -= onePxPercent;
@@ -10529,10 +10526,9 @@
var annotationTemplate = Mustache.to_html(IriSP.annotation_template,
{"divTitle" : divTitle, "id" : id, "startPourcent" : startPourcent,
- "endPourcent" : endPourcent, "hexa_color" : hexa_color,
+ "endPixel" : endPixel, "hexa_color" : hexa_color,
"seekPlace" : Math.round(begin/1000)});
-
this.selector.append(annotationTemplate);
// IriSP.jQuery("#" + id).tooltip({ effect: 'slide'});
@@ -10617,6 +10613,7 @@
IriSP.SegmentsWidget.prototype.positionUpdater = function() {
var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
var time = this._Popcorn.currentTime();
+ //var position = ((time / duration) * 100).toFixed(2);
var position = ((time / duration) * 100).toFixed(2);
this.positionMarker.css("left", position + "%");
@@ -10647,12 +10644,14 @@
this.sliderMaximized = false;
this.timeOutId = null;
+
this.positionMarker.draggable({axis: "x",
start: IriSP.wrap(this, this.positionMarkerDraggingStartedHandler),
stop: IriSP.wrap(this, this.positionMarkerDraggedHandler),
containment: "parent"
});
-
+ this.positionMarker.css("position", "absolute");
+
this.sliderBackground.click(function(event) { self.backgroundClickHandler.call(self, event); });
this.sliderForeground.click(function(event) { self.foregroundClickHandler.call(self, event); });
@@ -10735,7 +10734,7 @@
this.sliderBackground.animate({"height": "9px"}, 100);
this.sliderForeground.animate({"height": "9px"}, 100);
this.positionMarker.animate({"height": "9px", "width": "9px"}, 100);
- this.positionMarker.css("margin-top", "-4px");
+ //this.positionMarker.css("margin-top", "-4px");
// this.selector.removeClass("Ldt-SliderMinimized");
// this.selector.addClass("Ldt-SliderMaximized");