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 12	dbcb0dc6a844
parent 10	c0bfbc7be078
child 15	6d9cd6f47d95

equal deleted inserted replaced

-:cdfe29ce64da
+:dbcb0dc6a844
 });
 }
 };
-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:#{{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: {{endPourcent}}%;          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'></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>";
 	 while (dec>15){
 		  tmp = dec-(Math.floor(dec/16))*16;
 		  hex = hexa.charAt(tmp)+hex;
 		  dec = Math.floor(dec/16);
 	 }
 	 hex = hexa.charAt(dec)+hex;
-	 if (hex == "FFCC00"){ hex="";/* by default color of Ldt annotation */ }
 	 return(hex);
 };
 /* shortcut to have global variables in templates */
 IriSP.templToHTML = function(template, values) {
 endPourcent -= onePxPercent;
 }
 var divTitle = annotation.content.title.substr(0,55);
-var color = annotation.content.color
+if (typeof(annotation.content.color) !== "undefined")
+var color = annotation.content.color;
+else
+var color = annotation.color;
+var hexa_color = IriSP.DEC_HEXA_COLOR(color);
+console.log(hexa_color);
+if (hexa_color === "FFCC00")
+hexa_color = "333";
 var annotationTemplate = Mustache.to_html(IriSP.annotation_template,
 {"divTitle" : divTitle, "id" : id, "startPourcent" : startPourcent,
-"endPourcent" : endPourcent, "hexa_color" : IriSP.DEC_HEXA_COLOR(color),
+"endPourcent" : endPourcent, "hexa_color" : hexa_color,
 "seekPlace" : Math.round(begin/1000)});
 this.selector.append(annotationTemplate);
 }
 };
 /* restores the view after a search */
 IriSP.SegmentsWidget.prototype.clear = function() {
-this.selector.children(".Ldt-iri-chapter").css('border','none').animate({opacity:0.3}, 100);
+//this.selector.children(".Ldt-iri-chapter").css('border','none').animate({opacity:0.3}, 100);
 };
 IriSP.SegmentsWidget.prototype.clickHandler = function(annotation) {
 this._Popcorn.trigger("IriSP.SegmentsWidget.click", annotation.id);
 var begin = (+ annotation.begin) / 1000;
 this._Popcorn.listen("IriSP.PlayerWidget.MouseOut", IriSP.wrap(this, this.mouseOutHandler));
 };
 /* update the slider and the position marker as time passes */
 IriSP.SliderWidget.prototype.sliderUpdater = function() {
-if(this.draggingOngoing)
+if(this.draggingOngoing || this._disableUpdates)
 return;
 var time = this._Popcorn.currentTime();
 var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
 var percent = ((time / duration) * 100).toFixed(2);
 //  this.selector.addClass("Ldt-SliderMinimized");
 };
 // called when the user starts dragging the position indicator
 IriSP.SliderWidget.prototype.positionMarkerDraggingStartedHandler = function(event, ui) {
 this.draggingOngoing = true;
 };
 IriSP.SliderWidget.prototype.positionMarkerDraggedHandler = function(event, ui) {
+console.log(ui.offset.left);
+this._disableUpdate = true; // disable slider position updates while dragging is ongoing.
+window.setTimeout(IriSP.wrap(this, function() { this._disableUpdate = false; }), 500);
 var width = this.sliderBackground.width();
 var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
 var newTime = ((ui.offset.left / width) * duration).toFixed(2);
 this._Popcorn.currentTime(newTime);

demo_player