added a new widget and the tests which come with it. popcorn-port
authorhamidouk
Thu, 20 Oct 2011 10:19:36 +0200
branchpopcorn-port
changeset 100 dbd302a995f5
parent 99 912f100fecb0
child 101 c63f56e4bc21
added a new widget and the tests which come with it.
src/js/widgets/segmentsWidget.js
unittests/index.html
unittests/tests/segmentsWidget.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/js/widgets/segmentsWidget.js	Thu Oct 20 10:19:36 2011 +0200
@@ -0,0 +1,45 @@
+IriSP.SegmentsWidget = function(Popcorn, config, Serializer) {
+  IriSP.Widget.call(this, Popcorn, config, Serializer);  
+};
+
+IriSP.SegmentsWidget.prototype = new IriSP.Widget;
+
+IriSP.SegmentsWidget.prototype.draw = function() {
+
+  var annotations = this._serializer._data.annotations;
+  
+	for (i in annotations) {    
+    var annotation = annotations[i];
+    console.log(annotation);
+    var begin = Math.round((+ annotation.begin) / 1000);
+    var end = Math.round((+ annotation.end) / 1000);
+    var duration = (annotation.end - annotation.begin);
+    var id = annotation.id;    
+    var startPourcent 	= IriSP.timeToPourcent(begin, duration);
+    var endPourcent 	= IriSP.timeToPourcent(end, duration) - startPourcent;
+    var divTitle		= annotation.content.title.substr(0,55);
+    var color = annotation.content.color
+      
+    var annotationTemplate = Mustache.to_html(IriSP.annotation_template,
+        {"divTitle" : divTitle, "id" : id, "startPourcent" : startPourcent,
+        "endPourcent" : endPourcent, "hexa_color" : IriSP.DEC_HEXA_COLOR(color),
+        "seekPlace" : Math.round(begin/1000)});
+    
+    var toolTipTemplate = Mustache.to_html(IriSP.tooltip_template, 
+          {"title" : divTitle, "begin" : begin, "end" : end,
+          "description": annotation.content.description});
+    
+    
+    IriSP.jQuery("<div>" + annotationTemplate + "</div>").appendTo("#Ldt-Annotations");
+    // TOOLTIP BUG ! 
+    
+    IriSP.jQuery("#" + id).tooltip({ effect: 'slide'});
+    
+    IriSP.jQuery("#" + id).fadeTo(0,0.3);
+    IriSP.jQuery("#" + id).mouseover(function() {
+      IriSP.jQuery("#" + id).animate({opacity: 0.6}, 5);
+    }).mouseout(function(){		
+      IriSP.jQuery("#" + id).animate({opacity: 0.3}, 5);
+    });  
+  }
+};
\ No newline at end of file
--- a/unittests/index.html	Thu Oct 20 10:19:00 2011 +0200
+++ b/unittests/index.html	Thu Oct 20 10:19:36 2011 +0200
@@ -23,6 +23,7 @@
 	<script src="tests/widget.js" type="text/javascript"></script>
 	<script src="tests/playerWidget.js" type="text/javascript"></script>
 	<script src="tests/annotationsWidget.js" type="text/javascript"></script>
+	<script src="tests/segmentsWidget.js" type="text/javascript"></script>
 </head>
 <script>
  $(document).ready(function(){ 
@@ -37,6 +38,7 @@
 		test_widget();
 		test_player_widget();
 		test_annotations_widget();
+		test_segments_widget();
 });
 </script>	
 <body>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/unittests/tests/segmentsWidget.js	Thu Oct 20 10:19:36 2011 +0200
@@ -0,0 +1,53 @@
+/* segmentsWidget.js */
+
+function test_segments_widget() {
+  module("segments 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.MockSerializer(this.dt, "/url"); /* dummy serializer */
+    
+    
+    IriSP.jQuery("#widget-div").append("<div id='Ldt-Annotations'></div>");
+    this.config = {
+						metadata:{
+							format:'cinelab',
+							src:'test.json',
+							load:'json'},
+						gui:{
+							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.SegmentsWidget(this.Popcorn, this.config, this.ser);    
+    widget.draw();
+  
+    console.dir(IriSP.jQuery("#Ldt-Annotations").get(0));
+    equal(IriSP.jQuery("#Ldt-Annotations").length, 1, "test if the div has been added correctly");
+    equal(IriSP.jQuery("#Ldt-Annotations").children().length, this.ser._data.annotations.length, "test if children have been added correctly");     
+  });
+  
+  test("test annotation display function", function() {
+  /*
+    var widget = new IriSP.AnnotationsWidget(this.Popcorn, this.config, this.ser);    
+    widget.draw();
+    var annotation = {content: {"title": "title", "description": "description", "keywords": "keywords"}};
+    widget.displayAnnotation(annotation);
+    equal(IriSP.jQuery("#Ldt-SaTitle").text(), "title", "title set correctly");
+    equal(IriSP.jQuery("#Ldt-SaDescription").text(), "description", "description set correctly");
+    equal(IriSP.jQuery("#Ldt-SaKeywordText").text(), "Mots clefs : ", "keywords field set correctly");
+  */
+  });
+}; 
\ No newline at end of file