# HG changeset patch
# User hamidouk
# Date 1321869102 -3600
# Node ID 6252f951d11cdd86f1c4a265fdbbf746e5312f5f
# Parent  2c65775623cbc641ebf6629b3743de1604fe84da# Parent  b7aa28af2c1033f62ae7e88bd0eb1dccc027eb29
Merge with tweet-widget

diff -r 2c65775623cb -r 6252f951d11c src/css/LdtPlayer.css
--- a/src/css/LdtPlayer.css	Fri Nov 18 16:26:52 2011 +0100
+++ b/src/css/LdtPlayer.css	Mon Nov 21 10:51:42 2011 +0100
@@ -234,4 +234,23 @@
       height: 20px; 
       background-color: white;
     }
+    
+    .Ldt-tweetWidget {
+      font-size: 62.5%;
+      font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
+      background-color:#eeeeee;    
+      padding:5px;
+      overflow: auto;
+    }
+    
+    .Ldt-tweetAvatar {
+      float: left;
+    }
+    
+    .Ldt-tweetContents {
+    
+    }
 
+    .Ldt-tweetWidgetMinimize {
+      float: right;
+    }
\ No newline at end of file
diff -r 2c65775623cb -r 6252f951d11c src/js/site.js
--- a/src/js/site.js	Fri Nov 18 16:26:52 2011 +0100
+++ b/src/js/site.js	Mon Nov 21 10:51:42 2011 +0100
@@ -20,6 +20,10 @@
 
 IriSP.widgetsDefaults = {
   "PlayerWidget" : {},
-  "AnnotationsWidget": {}
+  "AnnotationsWidget": {},
+  "TweetsWidget" : {
+      default_profile_picture : "https://twimg0-a.akamaihd.net/sticky/default_profile_images/default_profile_3_bigger.png",
+      tweet_display_period: 10000 // how long do we show a tweet ?
+  }
 };
 
diff -r 2c65775623cb -r 6252f951d11c src/js/utils.js
--- a/src/js/utils.js	Fri Nov 18 16:26:52 2011 +0100
+++ b/src/js/utils.js	Mon Nov 21 10:51:42 2011 +0100
@@ -47,7 +47,18 @@
   var seconds = parseFloat(Math.abs(secs % 60).toFixed(0));
   
   return {"hours" : hours, "minutes" : minutes, "seconds" : seconds};
-}
+};
+
+/* format a tweet - replaces @name by a link to the profile, #hashtag, etc. */
+IriSP.formatTweet = function(tweet) {
+  var rNickname = /@(\w+)/; // matches a @handle
+  var rHashtag = /#(\w+)/;  // matches a hashtag
+  var i1 = tweet.replace(rNickname, "<a href='http://twitter.com/$1'>@$1</a>");
+  var i2 = i1.replace(rHashtag, "<a href='http://twitter.com/search?q=%23$1'>#$1</a>");
+  
+  return i2;
+};
+
 /* for ie compatibility
 if (Object.prototype.__defineGetter__&&!Object.defineProperty) {
    Object.defineProperty=function(obj,prop,desc) {
diff -r 2c65775623cb -r 6252f951d11c src/js/widgets/tweetsWidget.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/js/widgets/tweetsWidget.js	Mon Nov 21 10:51:42 2011 +0100
@@ -0,0 +1,88 @@
+/* a widget that displays tweet - used in conjunction with the polemicWidget */
+
+IriSP.TweetsWidget = function(Popcorn, config, Serializer) {
+  IriSP.Widget.call(this, Popcorn, config, Serializer);
+
+  this._displayingTweet = false;
+  this._timeoutId = undefined;  
+};
+
+
+IriSP.TweetsWidget.prototype = new IriSP.Widget();
+
+
+IriSP.TweetsWidget.prototype.drawTweet = function(annotation) {
+    
+    var title = IriSP.formatTweet(annotation.content.title);
+    var img = annotation.content.img.src;
+    if (typeof(img) === "undefined" || img === "" || img === "None") {
+      img = IriSP.widgetsDefaults.TweetsWidget.default_profile_picture;
+    }
+    
+    var imageMarkup = Mustache.to_html("<img src='{{src}}' alt='avatar'></img>", 
+                                       {src : img});
+
+    this.selector.find(".Ldt-tweetContents").html(title);
+    this.selector.find(".Ldt-tweetAvatar").html(imageMarkup);
+    this.selector.show("blind", 250); 
+};
+
+IriSP.TweetsWidget.prototype.displayTweet = function(annotation) {
+  if (this._displayingTweet === false) {
+    this._displayingTweet = true;
+  } else {
+    window.clearTimeout(this._timeoutId);
+  }
+
+  this.drawTweet(annotation);
+
+  var time = this._Popcorn.currentTime();  
+  this._timeoutId = window.setTimeout(IriSP.wrap(this, this.clearPanel), IriSP.widgetsDefaults.TweetsWidget.tweet_display_period);
+};
+
+
+IriSP.TweetsWidget.prototype.clearPanel = function() {  
+    this._displayingTweet = false;
+    this._timeoutId = undefined;
+    this.closePanel();
+    
+};
+
+IriSP.TweetsWidget.prototype.closePanel = function() {
+    if (this._timeoutId != undefined) {
+      /* we're called from the "close window" link */
+      /* cancel the timeout */
+      window.clearTimeout(this._timeoutId);
+    }
+    
+    this.selector.hide("blind", 400);
+    
+};
+
+IriSP.TweetsWidget.prototype.draw = function() {
+  var _this = this;
+  
+  var tweetMarkup = Mustache.to_html(IriSP.tweetWidget_template, {"share_template" : IriSP.share_template});
+  this.selector.append(tweetMarkup);
+  this.selector.hide();
+  this.selector.find(".Ldt-tweetWidgetMinimize").click(IriSP.wrap(this, this.closePanel));
+  
+  this._Popcorn.listen("IriSP.PolemicTweet.click", IriSP.wrap(this, this.PolemicTweetClickHandler));
+};
+
+IriSP.TweetsWidget.prototype.PolemicTweetClickHandler = function(tweet_id) {  
+  var index, annotation;
+  for (index in this._serializer._data.annotations) {
+    annotation = this._serializer._data.annotations[index];
+    
+    if (annotation.id === tweet_id)
+      break;
+  }
+    
+  if (annotation.id !== tweet_id)
+      /* we haven't found it */
+      return;
+  
+  this.displayTweet(annotation);
+  return;
+};
\ No newline at end of file
diff -r 2c65775623cb -r 6252f951d11c src/templates/tweetWidget.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/templates/tweetWidget.html	Mon Nov 21 10:51:42 2011 +0100
@@ -0,0 +1,10 @@
+{{! template for the tweet widget }}
+<div class='Ldt-tweetWidget'>
+  <div class='Ldt-tweetWidgetMinimize'>Minimize</div>
+  <div class='Ldt-tweetAvatar'>
+
+  </div>
+  <div class='Ldt-tweetContents'>
+
+  </div>
+</div>
\ No newline at end of file
diff -r 2c65775623cb -r 6252f951d11c test/integration/polemic-youtube.htm
--- a/test/integration/polemic-youtube.htm	Fri Nov 18 16:26:52 2011 +0100
+++ b/test/integration/polemic-youtube.htm	Mon Nov 21 10:51:42 2011 +0100
@@ -58,7 +58,7 @@
 						  format:'cinelab',
 						  src:'polemic_fr.json',
 						  type:'json'}
-						}
+						},
 						{type: "PlayerWidget", // please note that type refers directly to the constructor of the widget.
 						 mode: "radio",
 						 metadata:{
@@ -71,7 +71,13 @@
 						  format:'cinelab',
 						  src:'polemic_fr.json',
 						  type:'json'}
-						},					  	
+						},
+            {type: "TweetsWidget",
+						 metadata:{
+						  format:'cinelab',
+						  src:'polemic_fr.json',
+						  type:'json'}
+						}
 					  ]
 			  },
 			player:{
diff -r 2c65775623cb -r 6252f951d11c test/integration/polemic.htm
--- a/test/integration/polemic.htm	Fri Nov 18 16:26:52 2011 +0100
+++ b/test/integration/polemic.htm	Mon Nov 21 10:51:42 2011 +0100
@@ -71,8 +71,13 @@
 						  format:'cinelab',
 						  src:'polemic_fr.json',
 						  type:'json'}
-						},            
-              
+						},
+            {type: "TweetsWidget",
+						 metadata:{
+						  format:'cinelab',
+						  src:'polemic_fr.json',
+						  type:'json'}
+						}      
             ]
         },
       player:{
diff -r 2c65775623cb -r 6252f951d11c unittests/index.html
--- a/unittests/index.html	Fri Nov 18 16:26:52 2011 +0100
+++ b/unittests/index.html	Mon Nov 21 10:51:42 2011 +0100
@@ -40,12 +40,14 @@
 	<script src="tests/widgets/tooltipWidget.js" type="text/javascript"></script>
 	<script src="tests/widgets/polemicWidget.js" type="text/javascript"></script>
 	<script src="tests/widgets/sliderWidget.js" type="text/javascript"></script>
+	<script src="tests/widgets/tweetsWidget.js" type="text/javascript"></script>
 </head>
 <script>
  $(document).ready(function(){ 
 		/* only for unit-testing ! */
 		IriSP.jQuery = jQuery;
-		
+		jQuery.fx.off = true;
+    
 		test_dataloader();
 		test_serializer();    
 		test_mockSerializer();
@@ -62,6 +64,7 @@
 		test_tooltip_widget();
 		test_polemic_widget();
     test_slider_widget();
+    test_tweets_widget();
 });
 </script>	
 <body>
diff -r 2c65775623cb -r 6252f951d11c unittests/tests/utils.js
--- a/unittests/tests/utils.js	Fri Nov 18 16:26:52 2011 +0100
+++ b/unittests/tests/utils.js	Mon Nov 21 10:51:42 2011 +0100
@@ -37,4 +37,10 @@
     t = -t;
     deepEqual(IriSP.secondsToTime(t),  {"hours" : h, "minutes" : m, "seconds" : s}, "the function is immune to negative numbers.");
   });
+  
+  test("test function to format a tweet", function() {
+    var input = "@handle #hashtag ";
+    var output = "<a href='http://twitter.com/handle'>@handle</a> <a href='http://twitter.com/search?q=%23hashtag'>#hashtag</a> ";
+    equal(IriSP.formatTweet(input), output, "the correct output is given");
+  });
 }
\ No newline at end of file
diff -r 2c65775623cb -r 6252f951d11c unittests/tests/widgets/annotationsWidget.js
--- a/unittests/tests/widgets/annotationsWidget.js	Fri Nov 18 16:26:52 2011 +0100
+++ b/unittests/tests/widgets/annotationsWidget.js	Mon Nov 21 10:51:42 2011 +0100
@@ -29,7 +29,6 @@
     widget.draw();
 
     equal(widget.selector.children(".Ldt-AnnotationsWidget").length, 1, "test if the div has been added correctly");
-    equal(widget.selector.children(".Ldt-AnnotationsWidget").find(".Ldt-SaKeyword").length, 1, "test if sub-div has been added correctly");
   });
   
   test("test annotation display function", function() {
diff -r 2c65775623cb -r 6252f951d11c unittests/tests/widgets/tweetsWidget.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/unittests/tests/widgets/tweetsWidget.js	Mon Nov 21 10:51:42 2011 +0100
@@ -0,0 +1,75 @@
+/* tweetsWidget.js */
+
+function test_tweets_widget() {
+  module("tweet widget testing", 
+  {setup : function() {    
+    this.Popcorn = Popcorn.youtube("#popcorn-div", "http://www.youtube.com/watch?v=QH2-TGUlwu4");
+    
+    this.dt = new IriSP.DataLoader();
+    this.ser = new IriSP.MockTweetSerializer(this.dt, "/url"); /* dummy serializer */
+
+    this.config = {
+							width:650,
+							height:1,
+							mode:'radio',
+							container:'widget-div',
+							debug:true,
+							css:'../src/css/LdtPlayer.css'};
+    },
+  teardown: function() {
+    /* free the popcorn object because it has signal handlers attached to it */
+    this.Popcorn = Popcorn.youtube("#popcorn-div", "http://www.youtube.com/watch?v=QH2-TGUlwu4");
+  }
+  });
+  
+  test("test widget initialization", function() {  
+    var widget = new IriSP.TweetsWidget(this.Popcorn, this.config, this.ser);    
+    widget.draw();
+
+    equal(widget.selector.find(".Ldt-tweetAvatar").length, 1, "test if the div has been added correctly");
+    equal(widget.selector.find(".Ldt-tweetContents").length, 1, "test if sub-div has been added correctly");
+  });
+  
+  test("test tweet display function", function() {    
+    // tweak the display period so that our tests don't timeout
+    IriSP.widgetsDefaults.TweetsWidget.tweet_display_period = 10;
+    
+    var widget = new IriSP.TweetsWidget(this.Popcorn, this.config, this.ser);    
+    widget.draw();
+    var annotation = {content: {"title": "title", "description": "description", "keywords": "keywords", "img": {"src" : "http://yop.com"}}};
+    widget.displayTweet(annotation);
+    
+    equal(widget.selector.find(".Ldt-tweetContents").text(), "title", "title set correctly");    
+    equal(widget.selector.find(".Ldt-tweetAvatar").children().attr("src"), "http://yop.com", "user avatar set correctly");
+    
+    var annotation2 = {content: {"title": "title", "description": "description", "keywords": "keywords", "img" : {}}};
+    widget.displayTweet(annotation2);
+    equal(widget.selector.find(".Ldt-tweetAvatar").children().attr("src"), 
+                               IriSP.widgetsDefaults.TweetsWidget.default_profile_picture, "default avatar set correctly");
+    
+    widget.selector.find(".Ldt-tweetWidgetMinimize").click();
+    
+    ok(!widget.selector.is(":visible"), "the widget is hidden after a click");    
+  });
+  
+  test("test async clear", function() {
+  /*
+    expect(1);
+    
+    // tweak the display period so that our tests don't timeout
+    IriSP.widgetsDefaults.TweetsWidget.tweet_display_period = 10;
+    stop();
+    
+    var widget = new IriSP.TweetsWidget(this.Popcorn, this.config, this.ser);    
+    widget.draw();
+    var annotation = {content: {"title": "title", "description": "description", "keywords": "keywords", "img": {"src" : "http://yop.com"}}};
+    widget.displayTweet(annotation);
+  
+
+    window.setTimeout(function() { console.log("called!"); 
+      ok(!widget.selector.is(":visible"), "the widget is hidden after the timeout has passed."); 
+      start(); 
+      }, 100);
+  */
+  });
+}; 
\ No newline at end of file