# HG changeset patch # User hamidouk # Date 1319013493 -7200 # Node ID 8c066a79a14f3e55975840aff12af7204a43b38f # Parent e03b41037be142e1942eebf2b41642e9586590f0 WIP - adding a widget to display annotations. diff -r e03b41037be1 -r 8c066a79a14f src/js/widgets.js --- a/src/js/widgets.js Wed Oct 19 10:37:47 2011 +0200 +++ b/src/js/widgets.js Wed Oct 19 10:38:13 2011 +0200 @@ -19,9 +19,10 @@ }; -IriSP.PlayerWidget.prototype = IriSP.Widget; +IriSP.PlayerWidget.prototype = new IriSP.Widget; IriSP.PlayerWidget.prototype.draw = function() { + var _this = this; var width = this._config.gui.width; var height = this._config.gui.height; var heightS = this._config.gui.height-20; @@ -58,12 +59,6 @@ if(this._config.gui.mode=='radio'){ IriSP.jQuery("#Ldt-load-container").attr("width",this._config.gui.width); } - // Show or not the output - if(this._config.gui.debug===true){ - IriSP.jQuery("#Ldt-output").show(); - } else { - IriSP.jQuery("#Ldt-output").hide(); - } IriSP.jQuery( "#Ldt-controler" ).show(); //__IriSP.jQuery("#Ldt-Root").css('display','visible'); @@ -79,14 +74,16 @@ min: 1, max: this._serializer.currentMedia().meta["dc:duration"]/1000,//1:54:52.66 = 3600+3240+ step: 0.1, - slide: function(event, ui) { - - //__IriSP.jQuery("#amount").val(ui.value+" s"); - //player.sendEvent('SEEK', ui.value) - IriSP.MyApiPlayer.seek(ui.value); - //changePageUrlOffset(ui.value); - //player.sendEvent('PAUSE') + slide: function(event, ui) { + _this._Popcorn.currentTime(ui.value); + }, + /* change event is similar to slide, but it happens when the slider position is + modified programatically. We use it for unit tests */ + /* + change: function(event, ui) { + _this._Popcorn.currentTime(ui.value); } + */ } ); IriSP.jQuery("#amount").val(IriSP.jQuery("#slider-range-min").slider("value")+" s"); @@ -95,7 +92,7 @@ primary: 'ui-icon-play' }, text: false - }).click(IriSP.wrap(this, this.playEvent)) + }).click(function() { _this.playHandler.call(_this); }) .next().button({ icons: { primary: 'ui-icon-seek-next' @@ -113,7 +110,7 @@ primary: 'ui-icon-volume-on' }, text: false - }); + }).click(function() { _this.muteHandler.call(_this); } ); // /!\ PB A MODIFIER //__IriSP.MyTags.draw(); @@ -124,21 +121,86 @@ if( this._config.gui.mode=="radio" & IriSP.jQuery.browser.msie != true ) { IriSP.jQuery( "#Ldtplayer1" ).attr( "height", "0" ); } - IriSP.trace( "__IriSP.createInterface" , "3" ); + + this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater)); +}; + +IriSP.PlayerWidget.prototype.playHandler = function() { + var status = this._Popcorn.media.paused; + + if ( status == true ){ + this._Popcorn.play(); + IriSP.jQuery( ".ui-icon-play" ).css( "background-position", "-16px -160px" ); + IriSP.jQuery( "#ldt-CtrlPlay" ).attr("title", "Play"); + } else { + this._Popcorn.pause(); + IriSP.jQuery( ".ui-icon-play" ).css( "background-position","0px -160px" ); + IriSP.jQuery( "#ldt-CtrlPlay" ).attr("title", "Pause"); + } +}; - IriSP.trace( "__IriSP.createInterface", "END" ); - +IriSP.PlayerWidget.prototype.muteHandler = function() { + if (!this._Popcorn.muted()) { + this._Popcorn.mute(true); + IriSP.jQuery(" .ui-icon-volume-on ").css("background-position", "-130px -160px"); + } else { + this._Popcorn.mute(false); + IriSP.jQuery( ".ui-icon-volume-on" ).css("background-position", "-144px -160px" ); + } +}; + +IriSP.PlayerWidget.prototype.sliderUpdater = function() { + var currentPosition = this._Popcorn.currentTime(); + IriSP.jQuery( "#slider-range-min" ).slider( "value", currentPosition); +}; + + +IriSP.AnnotationsWidget = function(Popcorn, config, Serializer) { + IriSP.Widget.call(this, Popcorn, config, Serializer); }; -IriSP.PlayerWidget.prototype.playEvent = function() { - var status = this._Popcorn.media.paused; - - if ( status == true ){ - this._Popcorn.play(); - } else { - this._Popcorn.pause(); + +IriSP.AnnotationsWidget.prototype = new IriSP.Widget; + +IriSP.AnnotationsWidget.prototype.clear = function() { + IriSP.jQuery("#Ldt-SaTitle").text(""); + IriSP.jQuery("#Ldt-SaDescription").text(""); + IriSP.jQuery("#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; + var end = +annotation.end; + var duration = +this._serializer.currentMedia().meta["dc:duration"]; + + IriSP.jQuery("#Ldt-SaTitle").text(title); + IriSP.jQuery("#Ldt-SaDescription").text(description); + IriSP.jQuery("#Ldt-SaKeywordText").text("Mots clefs : "+ keywords); + var startPourcent = parseInt(Math.round((begin*1+(end*1-begin*1)/2) / (duration*1)) / 100); + IriSP.jQuery("#Ldt-Show-Arrow").animate({left:startPourcent+'%'},1000); + //IriSP.jQuery("#"+annotationTempo.id).animate({alpha:'100%'},1000); + +}; + +IriSP.AnnotationsWidget.prototype.draw = function() { + var _this = this; + + var annotationMarkup = Mustache.to_html(IriSP.annotationWidget_template, {"share_template" : IriSP.share_template}); + IriSP.jQuery("#Ldt-Ligne").append(annotationMarkup); + console.dir(this._serializer); + + var annotations = this._serializer._data.annotations; + for (i in annotations) { + var annotation = annotations[i]; + var begin = Math.round((+ annotation.begin) / 1000); + var end = Math.round((+ annotation.end) / 1000); + + this._Popcorn = this._Popcorn.code({start: begin, end: end, + onStart: function() { console.log(begin, end); _this.displayAnnotation(annotation); }, + onEnd: function() { console.log("end", end); }}); } - - this._Popcorn.trigger("mulz"); -}; \ No newline at end of file +}; diff -r e03b41037be1 -r 8c066a79a14f unittests/tests/annotationsWidget.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/unittests/tests/annotationsWidget.js Wed Oct 19 10:38:13 2011 +0200 @@ -0,0 +1,50 @@ +/* annotationsWidget.js */ + +function test_annotations_widget() { + module("annotations 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("
"); + 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.AnnotationsWidget(this.Popcorn, this.config, this.ser); + widget.draw(); + + equal(IriSP.jQuery("#Ldt-Ligne").length, 1, "test if the div has been added correctly"); + equal(IriSP.jQuery("#Ldt-Ligne #Ldt-SaKeyword").length, 1, "test if sub-div has 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