Merge with popcorn-port tweet-widget
authorhamidouk
Fri, 18 Nov 2011 16:32:32 +0100
branchtweet-widget
changeset 280 3da58bd31096
parent 278 ff20c80c6845 (diff)
parent 279 2c65775623cb (current diff)
child 281 7edd686a2b2a
Merge with popcorn-port
test/integration/polemic-youtube.htm
test/integration/polemic.htm
--- a/src/css/LdtPlayer.css	Fri Nov 18 16:26:52 2011 +0100
+++ b/src/css/LdtPlayer.css	Fri Nov 18 16:32:32 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
--- a/src/js/site.js	Fri Nov 18 16:26:52 2011 +0100
+++ b/src/js/site.js	Fri Nov 18 16:32:32 2011 +0100
@@ -20,6 +20,9 @@
 
 IriSP.widgetsDefaults = {
   "PlayerWidget" : {},
-  "AnnotationsWidget": {}
+  "AnnotationsWidget": {},
+  "TweetsWidget" : {
+      default_profile_picture : "https://twimg0-a.akamaihd.net/sticky/default_profile_images/default_profile_3_bigger.png"
+  }
 };
 
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/js/widgets/tweetsWidget.js	Fri Nov 18 16:32:32 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 = 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").text(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), 10000);
+};
+
+
+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
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/templates/tweetWidget.html	Fri Nov 18 16:32:32 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
--- a/test/integration/polemic-youtube.htm	Fri Nov 18 16:26:52 2011 +0100
+++ b/test/integration/polemic-youtube.htm	Fri Nov 18 16:32:32 2011 +0100
@@ -71,7 +71,13 @@
 						  format:'cinelab',
 						  src:'polemic_fr.json',
 						  type:'json'}
-						},					  	
+						},
+            {type: "TweetsWidget",
+						 metadata:{
+						  format:'cinelab',
+						  src:'polemic_fr.json',
+						  type:'json'}
+						}
 					  ]
 			  },
 			player:{
--- a/test/integration/polemic.htm	Fri Nov 18 16:26:52 2011 +0100
+++ b/test/integration/polemic.htm	Fri Nov 18 16:32:32 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:{
--- a/unittests/index.html	Fri Nov 18 16:26:52 2011 +0100
+++ b/unittests/index.html	Fri Nov 18 16:32:32 2011 +0100
@@ -40,6 +40,7 @@
 	<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(){ 
@@ -62,6 +63,7 @@
 		test_tooltip_widget();
 		test_polemic_widget();
     test_slider_widget();
+    test_tweets_widget();
 });
 </script>	
 <body>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/unittests/tests/widgets/tweetsWidget.js	Fri Nov 18 16:32:32 2011 +0100
@@ -0,0 +1,43 @@
+/* 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.children(".Ldt-tweetAvatar").length, 1, "test if the div has been added correctly");
+    equal(widget.selector.children(".Ldt-tweetContents").length, 1, "test if sub-div has been added correctly");
+  });
+  
+  test("test tweet display function", function() {
+    var widget = new IriSP.TweetsWidget(this.Popcorn, this.config, this.ser);    
+    widget.draw();
+    var annotation = {content: {"title": "title", "description": "description", "keywords": "keywords"}};
+    widget.displayTweet(annotation);
+    
+    equal(widget.selector.find(".Ldt-tweetContents").text(), "title", "title set correctly");
+    // equal(widget.selector.find(".Ldt-SaDescription").text(), "description", "description set correctly");
+    // equal(widget.selector.find(".Ldt-SaKeywordText").text(), "", "keywords field set correctly");
+  });
+}; 
\ No newline at end of file