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 9	61d507c98678
parent 0	d4dc097a6083
child 10	c0bfbc7be078

equal deleted inserted replaced

-:3e62fc730d8c
+:61d507c98678
 }
 };
 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.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 href=''><img src='{{img_dir}}/facebook.png' alt='share on facebook'></img></a>         <a href=''><img src='{{img_dir}}/twitter.png' alt='share on twitter'></img></a>         <a 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.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>";
 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.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>";
 IriSP.tooltipWidget_template = "{{! template for the tooltip widget }}<div class='tip'>	<div class='tipcolor' style='height:10px;width:10px'></div>	<div class='tiptext'></div>";
 IriSP.tweetWidget_template = "{{! template for the tweet widget }}<div class='Ldt-tweetWidget'>  <div class='Ldt-tweet-DoubleBorder'>      <img src='{{img_dir}}/minimize.png' class='Ldt-tweetWidgetKeepOpen' alt='dont minimize automatically'></img>      <img src='{{img_dir}}/minimize.png' class='Ldt-tweetWidgetMinimize' alt='minimize window'></img>      <div class='Ldt-tweetAvatar'></div>      <img src='{{img_dir}}/profile_arrow.png' class='Ldt-tweetAvatar-profileArrow'></img>      <div class='Ldt-tweetContents'></div>      <a href='' target='_blank' class='Ldt-Retweet'><div class='Ldt-RetweetIcon'></div> - Retweet </a>      <a href='' target='_blank' class='Ldt-TweetReply'><div class='Ldt-TweetReplyIcon'></div> - Reply</a>  </div></div>";/* wrapper that simulates popcorn.js because
 popcorn is a bit unstable at the time */
 IriSP.config = undefined;
 IriSP.widgetsDefaults = {
 "LayoutManager" : {spacer_div_height : "0px" },
 "PlayerWidget" : {},
-"AnnotationsWidget": {},
+"AnnotationsWidget": {
+"share_text" : "I'm watching ",
+"fb_link" : "http://www.facebook.com/share.php?u=",
+"tw_link" : "http://twitter.com/home?status=",
+"gplus_link" : ""
+},
 "TweetsWidget" : {
 default_profile_picture : "https://si0.twimg.com/sticky/default_profile_images/default_profile_1_normal.png",
 tweet_display_period: 10000 // how long do we show a tweet ?
 },
 "SliderWidget" : {
 }
 };
 IriSP.paths = {
 //  "imgs": "/tweetlive/res/metadataplayer/src/css/imgs"
-"imgs": "/mdp/src/css/imgs"
+"imgs": "imgs"
 };
 IriSP.default_templates_vars = {
 "img_dir" : IriSP.paths.imgs
 };
 this.selector.find(".Ldt-SaTitle").text("");
 this.selector.find(".Ldt-SaDescription").text("");
 this.selector.find(".Ldt-SaKeywordText").text("");
 };
 IriSP.AnnotationsWidget.prototype.displayAnnotation = function(annotation) {
 var title = annotation.content.title;
 var description = annotation.content.description;
 var keywords =  "" // FIXME;
 var begin = +annotation.begin / 1000;
 var end = +annotation.end / 1000;
 var duration = +this._serializer.currentMedia().meta["dc:duration"];
 var title_templ = "{{title}} - ( {{begin}} - {{end}} )";
 var endstr = Mustache.to_html(title_templ, {title: title, begin: IriSP.secondsToTime(begin), end: IriSP.secondsToTime(end)});
 this.selector.find(".Ldt-SaTitle").text(endstr);
 this.selector.find(".Ldt-SaDescription").text(description);
+// update sharing buttons
+var defaults = IriSP.widgetsDefaults.AnnotationsWidget;
+var text = defaults.share_text;
+var fb_link = defaults.fb_link;
+var tw_link = defaults.tw_link;
+var gplus_link = defaults.gplus_link;
+var url = document.location.href + "#a=" + annotation.id;
+this.selector.find(".Ldt-fbShare").attr("href", fb_link + IriSP.encodeURI(text) + IriSP.encodeURI(url));
+this.selector.find(".Ldt-TwShare").attr("href", tw_link + IriSP.encodeURI(text) + IriSP.encodeURI(url));
+this.selector.find(".Ldt-GplusShare").attr("href", fb_link + IriSP.encodeURI(text) + IriSP.encodeURI(url));
 };
 IriSP.AnnotationsWidget.prototype.clearWidget = function() {
 this.sliderMaximized = true;
 this.sliderBackground.animate({"height": "9px"}, 100);
 this.sliderForeground.animate({"height": "9px"}, 100);
+this.positionMarker.animate({"height": "9px", "width": "9px", "margin-top": "-4px"}, 100);
 //  this.selector.removeClass("Ldt-SliderMinimized");
 //  this.selector.addClass("Ldt-SliderMaximized");
 };
 };
 IriSP.SliderWidget.prototype.minimizeOnTimeout = function(event) {
 this.sliderBackground.animate({"height": "5px"}, 100);
 this.sliderForeground.animate({"height": "5px"}, 100);
+this.positionMarker.animate({"height": "5px", "width": "5px", "margin-top": "0px"}, 100);
 this.sliderMinimized = true;
 //  this.selector.removeClass("Ldt-SliderMaximized");
 //  this.selector.addClass("Ldt-SliderMinimized");

demo_player