demo_player: comparison web/LdtPlayer-release.js

Mercurial Mercurial > demo_player / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

web/LdtPlayer-release.js

changeset 25	4f082f63e295
parent 24	36df3a25d7bd
child 26	b710fa62d522

equal deleted inserted replaced

-:36df3a25d7bd
+:4f082f63e295
 });
 }
 };
-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'>&nbsp;</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'>&nbsp;</span></a>		<a onclick='__IriSP.MyApiPlayer.share(\'facebook\');' title='partager avec facebook'> <span class='share shareFacebook'>&nbsp;</span></a><a onclick='__IriSP.MyApiPlayer.share(\'twitter\');' title='partager avec twitter'>  <span class='share shareTwitter'>&nbsp;</span></a><a onclick='__IriSP.MyApiPlayer.share(\'myspace\');' title='partager avec Myspace'>  <span class='share shareMySpace'>&nbsp;</span></a>";
 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>";
 IriSP.tooltip_template = "{{! template used by the jquery ui tooltip }}<div class='Ldt-tooltip'>  <div class='title'>{{title}}</div>  <div class='time'>{{begin}} : {{end}} </div>  <div class='description'>{{description}}</div></div>";
 var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
 var id = annotation.id;
 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 	= Math.floor(IriSP.timeToPourcent(end, duration) - startPourcent);
-var endPourcent 	= (IriSP.timeToPourcent(end, duration) - startPourcent - onePxPercent * 4.5).toFixed(1);
+var endPixel = Math.floor(this.selector.parent().width() * (endPourcent / 100)) - 2;
-}
-else
-var endPourcent 	= (IriSP.timeToPourcent(end, duration) - startPourcent - onePxPercent * 1.5).toFixed(1);
 if (i == 0) {
 endPourcent -= onePxPercent;
 }
 if (hexa_color.length == 4)
 hexa_color = hexa_color + '00';
 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'});
 };
 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 + "%");
 };
 IriSP.SliderWidget = function(Popcorn, config, Serializer) {
 // another special variable used by the timeout handler to
 // open or close the slider.
 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); });
 this.selector.hover(IriSP.wrap(this, this.mouseOverHandler), IriSP.wrap(this, this.mouseOutHandler));
 this.sliderMaximized = true;
 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");
 };

demo_player