# HG changeset patch # User hamidouk # Date 1318518772 -7200 # Node ID d7a7d72163718d0cd22adb15d6dfbbed0c7999f8 # Parent a8192c57c87d1fbd9dc75ca2136134dacac139ef lots of changes to the player widget... also added corresponsing unit tests. diff -r a8192c57c87d -r d7a7d7216371 src/js/widgets.js --- a/src/js/widgets.js Thu Oct 13 17:11:20 2011 +0200 +++ b/src/js/widgets.js Thu Oct 13 17:12:52 2011 +0200 @@ -1,9 +1,144 @@ /* the widget classes and definitions */ -IriSP.Widget = function(Popcorn) { - this.Popcorn = Popcorn; +IriSP.Widget = function(Popcorn, config, Serializer) { + this._Popcorn = Popcorn; + this._config = config; + this._serializer = Serializer; }; IriSP.Widget.prototype.draw = function() { /* implemented by "sub-classes" */ }; + +IriSP.Widget.prototype.redraw = function() { + /* implemented by "sub-classes" */ +}; + +IriSP.PlayerWidget = function(Popcorn, config, Serializer) { + IriSP.Widget.call(this, Popcorn, config, Serializer); + +}; + +IriSP.PlayerWidget.prototype = IriSP.Widget; + +IriSP.PlayerWidget.prototype.draw = function() { + var width = this._config.gui.width; + var height = this._config.gui.height; + var heightS = this._config.gui.height-20; + + if( this._config.gui.mode=="radio" ){ + + //IriSP.jQuery( "#"+this._config.gui.container ).before(IriSP.search_template); + var radioPlayer = Mustache.to_html(IriSP.radio_template, {"share_template" : IriSP.share_template}); + IriSP.jQuery(radioPlayer).appendTo("#"+this._config.gui.container); + + // special tricks for IE 7 + if (IriSP.jQuery.browser.msie==true && IriSP.jQuery.browser.version=="7.0"){ + //LdtSearchContainer + //__IriSP.jQuery("#LdtPlayer").attr("margin-top","50px"); + IriSP.jQuery("#Ldt-Root").css("padding-top","25px"); + } + } else if(this._config.gui.mode=="video") { + + var videoPlayer = Mustache.to_html(IriSP.video_template, {"share_template" : IriSP.share_template, "heightS" : heightS}); + IriSP.jQuery(videoPlayer).appendTo("#"+this._config.gui.container); + } + + IriSP.jQuery("#Ldt-Annotations").width(width-(75*2)); + IriSP.jQuery("#Ldt-Show-Arrow-container").width(width-(75*2)); + IriSP.jQuery("#Ldt-ShowAnnotation-audio").width(width-10); + IriSP.jQuery("#Ldt-ShowAnnotation-video").width(width-10); + IriSP.jQuery("#Ldt-SaKeyword").width(width-10); + IriSP.jQuery("#Ldt-controler").width(width-10); + IriSP.jQuery("#Ldt-Control").attr("z-index","100"); + IriSP.jQuery("#Ldt-controler").hide(); + + IriSP.jQuery(IriSP.annotation_loading_template).appendTo("#Ldt-ShowAnnotation-audio"); + + 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'); + IriSP.jQuery( "#Ldt-ShowAnnotation").click( function () { + //__IriSP.jQuery(this).slideUp(); + } ); + + var LdtpPlayerY = IriSP.jQuery("#Ldt-PlaceHolder").attr("top"); + var LdtpPlayerX = IriSP.jQuery("#Ldt-PlaceHolder").attr("left"); + + IriSP.jQuery( "#slider-range-min" ).slider( { //range: "min", + value: 0, + 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') + } + } ); + + IriSP.jQuery("#amount").val(IriSP.jQuery("#slider-range-min").slider("value")+" s"); + IriSP.jQuery(".Ldt-Control1 button:first").button({ + icons: { + primary: 'ui-icon-play' + }, + text: false + }).click(IriSP.wrap(this, this.playEvent)) + .next().button({ + icons: { + primary: 'ui-icon-seek-next' + }, + text: false + }); + IriSP.jQuery(".Ldt-Control2 button:first").button({ + icons: { + primary: 'ui-icon-search'//, + //secondary: 'ui-icon-volume-off' + }, + text: false + }).next().button({ + icons: { + primary: 'ui-icon-volume-on' + }, + text: false + }); + + // /!\ PB A MODIFIER + //__IriSP.MyTags.draw(); + IriSP.jQuery( "#ldt-CtrlPlay" ).attr( "style", "background-color:#CD21C24;" ); + + IriSP.jQuery( "#Ldt-load-container" ).hide(); + + if( this._config.gui.mode=="radio" & IriSP.jQuery.browser.msie != true ) { + IriSP.jQuery( "#Ldtplayer1" ).attr( "height", "0" ); + } + IriSP.trace( "__IriSP.createInterface" , "3" ); + + IriSP.trace( "__IriSP.createInterface", "END" ); + + +}; + +IriSP.PlayerWidget.prototype.playEvent = function() { + var status = this._Popcorn.media.paused; + + if ( status == true ){ + this._Popcorn.play(); + } else { + this._Popcorn.pause(); + } + + this._Popcorn.trigger("mulz"); +}; \ No newline at end of file diff -r a8192c57c87d -r d7a7d7216371 unittests/tests/playerWidget.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/unittests/tests/playerWidget.js Thu Oct 13 17:12:52 2011 +0200 @@ -0,0 +1,61 @@ +/* test module for the player widget */ + +function test_player_widget() { + module("player 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.Serializer(this.dt, "/url"); /* dummy serializer */ + + 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'}, + }; + } }); + + test("test player initialisation", function() { + var player = new IriSP.PlayerWidget(this.Popcorn, this.config, this.ser); + player.draw(); + equal(IriSP.jQuery("#widget-div #Ldt-Root").length, 1, "test if the div has been added correctly"); + + var player2 = new IriSP.PlayerWidget(this.Popcorn, this.config, this.ser); + player2.draw(); + equal(IriSP.jQuery("#widget-div #Ldt-Root").length, 2, "test if the second div has been added correctly"); + }); + + test("test play button event handler", function() { + var player = new IriSP.PlayerWidget(this.Popcorn, this.config, this.ser); + + var spy_callback = this.spy(); + var spy_callback2 = this.spy(); + this.Popcorn.listen("play", spy_callback); + this.Popcorn.listen("pause", spy_callback2); + + player.draw(); + + /* + Code seems to work but test doesn't. It must be a subtle race condition + between Popcorn, the youtube plugin and QUnit. Anyway, it works for pause + so WONTFIX + + IriSP.jQuery("#widget-div .Ldt-Control1 button:first").trigger("click"); + ok(spy_callback.calledOnce, "test if play callback has been called"); + + */ + + IriSP.jQuery("#widget-div .Ldt-Control1 button:first").trigger("click"); + IriSP.jQuery("#widget-div .Ldt-Control1 button:first").trigger("click"); + + ok(spy_callback2.calledOnce, "test if pause callback has been called"); + }); + }; \ No newline at end of file diff -r a8192c57c87d -r d7a7d7216371 unittests/tests/widget.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/unittests/tests/widget.js Thu Oct 13 17:12:52 2011 +0200 @@ -0,0 +1,19 @@ +/* test module for base widgets */ +function test_widget() { + module("Base 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.JSONSerializer(this.dt, "/url"); + } } + ); + + test("test initialisation", function() { + var wid = new IriSP.Widget(this.Popcorn, {parent: "widget-div"}, this.ser); + deepEqual(wid._config, {parent: "widget-div"}, "Check if the parent div is set correctly"); + + }); + + +}; \ No newline at end of file