diff -r 8f99b0df3278 -r 6008172a0592 src/js/widgets/playerWidget.js --- a/src/js/widgets/playerWidget.js Mon Nov 14 16:12:13 2011 +0100 +++ b/src/js/widgets/playerWidget.js Mon Nov 14 17:19:26 2011 +0100 @@ -1,198 +1,199 @@ -IriSP.PlayerWidget = function(Popcorn, config, Serializer) { - IriSP.Widget.call(this, Popcorn, config, Serializer); - - this._searchBlockOpen = false; - this._searchLastValue = ""; -}; - -IriSP.PlayerWidget.prototype = new IriSP.Widget(); +define(["IriSP", "widgets", "util"], function() { + IriSP.PlayerWidget = function(Popcorn, config, Serializer) { + IriSP.Widget.call(this, Popcorn, config, Serializer); + + this._searchBlockOpen = false; + this._searchLastValue = ""; + }; -IriSP.PlayerWidget.prototype.draw = function() { - var self = this; - var width = this.width; - var height = this.height; - var heightS = this.height-20; - - var searchBox = Mustache.to_html(IriSP.search_template); - this.selector.append(searchBox); - - if (this._config.mode=="radio") { - var radioPlayer = Mustache.to_html(IriSP.radio_template, {"share_template" : IriSP.share_template}); - this.selector.append(radioPlayer); + IriSP.PlayerWidget.prototype = new IriSP.Widget(); + + IriSP.PlayerWidget.prototype.draw = function() { + var self = this; + var width = this.width; + var height = this.height; + var heightS = this.height-20; + + var searchBox = Mustache.to_html(IriSP.search_template); + this.selector.append(searchBox); - // special tricks for IE 7 - if (IriSP.jQuery.browser.msie == true && IriSP.jQuery.browser.version == "7.0"){ - //__IriSP.jQuery("#LdtPlayer").attr("margin-top","50px"); - this.selector.children("#Ldt-Root").css("padding-top","25px"); - } - } else if (this._config.mode == "video") { - - var videoPlayer = Mustache.to_html(IriSP.video_template, {"share_template" : IriSP.share_template, "heightS" : heightS}); - this.selector.append(videoPlayer); - } - - this.selector.children("#Ldt-Annotations").width(width - (75 * 2)); - this.selector.children("#Ldt-Show-Arrow-container").width(width - (75 * 2)); - this.selector.children("#Ldt-ShowAnnotation-audio").width(width - 10); - this.selector.children("#Ldt-ShowAnnotation-video").width(width - 10); - this.selector.children("#Ldt-SaKeyword").width(width - 10); - this.selector.children("#Ldt-controler").width(width - 10); - this.selector.children("#Ldt-Control").attr("z-index", "100"); - this.selector.children("#Ldt-controler").hide(); - - this.selector.children("#Ldt-ShowAnnotation-audio").append(IriSP.annotation_loading_template); + if (this._config.mode=="radio") { + var radioPlayer = Mustache.to_html(IriSP.radio_template, {"share_template" : IriSP.share_template}); + this.selector.append(radioPlayer); + + // special tricks for IE 7 + if (IriSP.jQuery.browser.msie == true && IriSP.jQuery.browser.version == "7.0"){ + //__IriSP.jQuery("#LdtPlayer").attr("margin-top","50px"); + this.selector.children("#Ldt-Root").css("padding-top","25px"); + } + } else if (this._config.mode == "video") { + + var videoPlayer = Mustache.to_html(IriSP.video_template, {"share_template" : IriSP.share_template, "heightS" : heightS}); + this.selector.append(videoPlayer); + } + + this.selector.children("#Ldt-Annotations").width(width - (75 * 2)); + this.selector.children("#Ldt-Show-Arrow-container").width(width - (75 * 2)); + this.selector.children("#Ldt-ShowAnnotation-audio").width(width - 10); + this.selector.children("#Ldt-ShowAnnotation-video").width(width - 10); + this.selector.children("#Ldt-SaKeyword").width(width - 10); + this.selector.children("#Ldt-controler").width(width - 10); + this.selector.children("#Ldt-Control").attr("z-index", "100"); + this.selector.children("#Ldt-controler").hide(); + + this.selector.children("#Ldt-ShowAnnotation-audio").append(IriSP.annotation_loading_template); - if(this._config.mode=='radio'){ - this.selector.children("#Ldt-load-container").attr("width",this.width); - } - - this.selector.children("#Ldt-controler").show(); - //__IriSP.jQuery("#Ldt-Root").css('display','visible'); - this.selector.children("#Ldt-ShowAnnotation").click( function () { - //__IriSP.jQuery(this).slideUp(); - } ); + if(this._config.mode=='radio'){ + this.selector.children("#Ldt-load-container").attr("width",this.width); + } + + this.selector.children("#Ldt-controler").show(); + //__IriSP.jQuery("#Ldt-Root").css('display','visible'); + this.selector.children("#Ldt-ShowAnnotation").click( function () { + //__IriSP.jQuery(this).slideUp(); + } ); - var LdtpPlayerY = this.selector.children("#Ldt-PlaceHolder").attr("top"); - var LdtpPlayerX = this.selector.children("#Ldt-PlaceHolder").attr("left"); + var LdtpPlayerY = this.selector.children("#Ldt-PlaceHolder").attr("top"); + var LdtpPlayerX = this.selector.children("#Ldt-PlaceHolder").attr("left"); + + // handle clicks by the user on the video. + this._Popcorn.listen("play", IriSP.wrap(this, this.playButtonUpdater)); + this._Popcorn.listen("pause", IriSP.wrap(this, this.playButtonUpdater)); - // handle clicks by the user on the video. - this._Popcorn.listen("play", IriSP.wrap(this, this.playButtonUpdater)); - this._Popcorn.listen("pause", IriSP.wrap(this, this.playButtonUpdater)); - - this.selector.children("#amount").val(this.selector.children("#slider-range-min").slider("value")+" s"); - this.selector.children(".Ldt-Control1 button:first").button({ - icons: { - primary: 'ui-icon-play' - }, - text: false - }).click(function() { self.playHandler.call(self); }) - .next().button({ - icons: { - primary: 'ui-icon-seek-next' - }, - text: false - }); - this.selector.children(".Ldt-Control2 button:first").button({ - icons: { - primary: 'ui-icon-search'//, - //secondary: 'ui-icon-volume-off' - }, - text: false - }).click(function() { self.searchButtonHandler.call(self); }) - .next().button({ - icons: { - primary: 'ui-icon-volume-on' - }, - text: false - }).click(function() { self.muteHandler.call(self); } ); + this.selector.children("#amount").val(this.selector.children("#slider-range-min").slider("value")+" s"); + this.selector.children(".Ldt-Control1 button:first").button({ + icons: { + primary: 'ui-icon-play' + }, + text: false + }).click(function() { self.playHandler.call(self); }) + .next().button({ + icons: { + primary: 'ui-icon-seek-next' + }, + text: false + }); + this.selector.children(".Ldt-Control2 button:first").button({ + icons: { + primary: 'ui-icon-search'//, + //secondary: 'ui-icon-volume-off' + }, + text: false + }).click(function() { self.searchButtonHandler.call(self); }) + .next().button({ + icons: { + primary: 'ui-icon-volume-on' + }, + text: false + }).click(function() { self.muteHandler.call(self); } ); - this.selector.children("#ldt-CtrlPlay").attr( "style", "background-color:#CD21C24;" ); - - this.selector.children("#Ldt-load-container").hide(); - - if( this._config.mode=="radio" & IriSP.jQuery.browser.msie != true ) { - IriSP.jQuery( "#Ldtplayer1" ).attr( "height", "0" ); - } + this.selector.children("#ldt-CtrlPlay").attr( "style", "background-color:#CD21C24;" ); + + this.selector.children("#Ldt-load-container").hide(); + + if( this._config.mode=="radio" & IriSP.jQuery.browser.msie != true ) { + IriSP.jQuery( "#Ldtplayer1" ).attr( "height", "0" ); + } -}; + }; -/* update the icon of the button - separate function from playHandler - because in some cases (for instance, when the user directly clicks on - the jwplayer window) we have to change the icon without playing/pausing -*/ -IriSP.PlayerWidget.prototype.playButtonUpdater = function() { - var status = this._Popcorn.media.paused; - - if ( status == true ){ - this.selector.find(".ui-icon-play").css( "background-position", "-16px -160px" ); - this.selector.find("#ldt-CtrlPlay").attr("title", "Play"); - } else { - this.selector.find(".ui-icon-play").css( "background-position","0px -160px" ); - this.selector.find("#ldt-CtrlPlay").attr("title", "Pause"); - } -}; + /* update the icon of the button - separate function from playHandler + because in some cases (for instance, when the user directly clicks on + the jwplayer window) we have to change the icon without playing/pausing + */ + IriSP.PlayerWidget.prototype.playButtonUpdater = function() { + var status = this._Popcorn.media.paused; + + if ( status == true ){ + this.selector.find(".ui-icon-play").css( "background-position", "-16px -160px" ); + this.selector.find("#ldt-CtrlPlay").attr("title", "Play"); + } else { + this.selector.find(".ui-icon-play").css( "background-position","0px -160px" ); + this.selector.find("#ldt-CtrlPlay").attr("title", "Pause"); + } + }; -IriSP.PlayerWidget.prototype.playHandler = function() { - var status = this._Popcorn.media.paused; - - this.playButtonUpdater(); - - if ( status == true ){ - this._Popcorn.play(); - } else { - this._Popcorn.pause(); - } -}; + IriSP.PlayerWidget.prototype.playHandler = function() { + var status = this._Popcorn.media.paused; + + this.playButtonUpdater(); + + if ( status == true ){ + this._Popcorn.play(); + } else { + this._Popcorn.pause(); + } + }; -IriSP.PlayerWidget.prototype.muteHandler = function() { - if (!this._Popcorn.muted()) { - this._Popcorn.mute(true); - this.selector.find(" .ui-icon-volume-on ").css("background-position", "-130px -160px"); - } else { - this._Popcorn.mute(false); - this.selector.find( ".ui-icon-volume-on" ).css("background-position", "-144px -160px" ); - } -}; + IriSP.PlayerWidget.prototype.muteHandler = function() { + if (!this._Popcorn.muted()) { + this._Popcorn.mute(true); + this.selector.find(" .ui-icon-volume-on ").css("background-position", "-130px -160px"); + } else { + this._Popcorn.mute(false); + this.selector.find( ".ui-icon-volume-on" ).css("background-position", "-144px -160px" ); + } + }; -IriSP.PlayerWidget.prototype.searchButtonHandler = function() { - var self = this; + IriSP.PlayerWidget.prototype.searchButtonHandler = function() { + var self = this; - /* show the search field if it is not shown */ - if ( this._searchBlockOpen == false ) { - this.selector.find( ".ui-icon-search" ).css( "background-position", "-144px -112px" ); - - this.selector.find("#LdtSearch").show(100); - - this.selector.find("#LdtSearchInput").css('background-color','#fff'); - this.selector.find("#LdtSearchInput").focus(); - this.selector.find("#LdtSearchInput").attr('value', this._searchLastValue); - this._Popcorn.trigger("IriSP.search", this._searchLastValue); // trigger the search to make it more natural. - - this._searchBlockOpen = true; - this.selector.find("#LdtSearchInput").bind('keyup', null, function() { self.searchHandler.call(self); } ); - - // tell the world the field is open - this._Popcorn.trigger("IriSP.search.open"); - - } else { - this._searchLastValue = this.selector.find("#LdtSearchInput").attr('value'); - this.selector.find("#LdtSearchInput").attr('value',''); - this.selector.find(".ui-icon-search").css("background-position","-160px -112px"); - this.selector.find("#LdtSearch").hide(100); - - // unbind the watcher event. - this.selector.find("#LdtSearchInput").unbind('keypress set'); - this._searchBlockOpen = false; - - this._Popcorn.trigger("IriSP.search.closed"); + /* show the search field if it is not shown */ + if ( this._searchBlockOpen == false ) { + this.selector.find( ".ui-icon-search" ).css( "background-position", "-144px -112px" ); + + this.selector.find("#LdtSearch").show(100); + + this.selector.find("#LdtSearchInput").css('background-color','#fff'); + this.selector.find("#LdtSearchInput").focus(); + this.selector.find("#LdtSearchInput").attr('value', this._searchLastValue); + this._Popcorn.trigger("IriSP.search", this._searchLastValue); // trigger the search to make it more natural. + + this._searchBlockOpen = true; + this.selector.find("#LdtSearchInput").bind('keyup', null, function() { self.searchHandler.call(self); } ); + + // tell the world the field is open + this._Popcorn.trigger("IriSP.search.open"); + + } else { + this._searchLastValue = this.selector.find("#LdtSearchInput").attr('value'); + this.selector.find("#LdtSearchInput").attr('value',''); + this.selector.find(".ui-icon-search").css("background-position","-160px -112px"); + this.selector.find("#LdtSearch").hide(100); + + // unbind the watcher event. + this.selector.find("#LdtSearchInput").unbind('keypress set'); + this._searchBlockOpen = false; + + this._Popcorn.trigger("IriSP.search.closed"); + } + }; + + /* this handler is called whenever the content of the search + field changes */ + IriSP.PlayerWidget.prototype.searchHandler = function() { + this._searchLastValue = this.selector.find("#LdtSearchInput").attr('value'); + + // do nothing if the search field is empty, instead of highlighting everything. + if (this._searchLastValue == "") { + this._Popcorn.trigger("IriSP.search.cleared"); + } else { + this._Popcorn.trigger("IriSP.search", this._searchLastValue); + } + }; + + /* + handler for the IriSP.search.found message, which is sent by some views when they + highlight a match. + */ + IriSP.PlayerWidget.prototype.searchMatch = function() { + this.selector.find("#LdtSearchInput").css('background-color','#e1ffe1'); } -}; -/* this handler is called whenever the content of the search - field changes */ -IriSP.PlayerWidget.prototype.searchHandler = function() { - this._searchLastValue = this.selector.find("#LdtSearchInput").attr('value'); - - // do nothing if the search field is empty, instead of highlighting everything. - if (this._searchLastValue == "") { - this._Popcorn.trigger("IriSP.search.cleared"); - } else { - this._Popcorn.trigger("IriSP.search", this._searchLastValue); + /* the same, except that no value could be found */ + IriSP.PlayerWidget.prototype.searchNoMatch = function() { + this.selector.find("#LdtSearchInput").css('background-color','#e1ffe1'); } -}; - -/* - handler for the IriSP.search.found message, which is sent by some views when they - highlight a match. -*/ -IriSP.PlayerWidget.prototype.searchMatch = function() { - this.selector.find("#LdtSearchInput").css('background-color','#e1ffe1'); -} - -/* the same, except that no value could be found */ -IriSP.PlayerWidget.prototype.searchNoMatch = function() { - this.selector.find("#LdtSearchInput").css('background-color','#e1ffe1'); -} - +});