--- 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
--- 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 ?
+ }
};
--- 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) {
--- /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
--- /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
--- 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:{
--- 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:{
--- 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>
--- 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
--- 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() {
--- /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