diff -r a525cc2214e7 -r 2c025db10a10 src/js/widgets/playerWidget.js --- a/src/js/widgets/playerWidget.js Tue Apr 17 20:19:46 2012 +0200 +++ b/src/js/widgets/playerWidget.js Wed Apr 18 18:58:44 2012 +0200 @@ -34,49 +34,49 @@ ); -IriSP.PlayerWidget = function(Popcorn, config, Serializer) { - IriSP.Widget.call(this, Popcorn, config, Serializer); +IriSP.PlayerWidget = function(player, config) { + IriSP.Widget.call(this, player, config); - this._searchBlockOpen = false; this._searchLastValue = ""; }; 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 playerTempl = IriSP.templToHTML(IriSP.player_template, this._config); - this.selector.append(playerTempl); - - this.selector.children(".Ldt-controler").show(); + var _this = this, + _html = IriSP.templToHTML(IriSP.player_template, this); + + this.$.append(_html); + + // Define blocks + this.$playButton = this.$.find(".Ldt-CtrlPlay"); + this.$searchBlock = this.$.find(".LdtSearch"); + this.$searchInput = this.$.find(".LdtSearchInput"); + this.$volumeBar = this.$.find(".Ldt-Ctrl-Volume-Bar"); - // 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 events + this.bindPopcorn("play","playButtonUpdater"); + this.bindPopcorn("pause","playButtonUpdater"); + this.bindPopcorn("volumechange","volumeUpdater"); + this.bindPopcorn("timeupdate","timeDisplayUpdater"); + this.bindPopcorn("loadedmetadata","timeDisplayUpdater"); + this.bindPopcorn("IriSP.search.matchFound","searchMatch"); + this.bindPopcorn("IriSP.search.noMatchFound","searchNoMatch"); + this.bindPopcorn("IriSP.search.triggeredSearch","triggeredSearch"); + + // handle clicks + this.$playButton.click(this.functionWrapper("playHandler")); + + this.$.find(".Ldt-CtrlAnnotate").click(function() { + _this.player.popcorn.trigger("IriSP.PlayerWidget.AnnotateButton.clicked"); + }); + this.$.find(".Ldt-CtrlSearch").click(this.functionWrapper("searchButtonHandler")); + + this.$searchInput.keyup(this.functionWrapper("searchHandler") ); - this._Popcorn.listen("volumechange", IriSP.wrap(this, this.volumeUpdater)); - - this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeDisplayUpdater)); - // update the time display for the first time. - this._Popcorn.listen("loadedmetadata", IriSP.wrap(this, this.timeDisplayUpdater)); - - this._Popcorn.listen("IriSP.search.matchFound", IriSP.wrap(this, this.searchMatch)); - this._Popcorn.listen("IriSP.search.noMatchFound", IriSP.wrap(this, this.searchNoMatch)); - this._Popcorn.listen("IriSP.search.triggeredSearch", IriSP.wrap(this, this.triggeredSearch)); - - - this.selector.find(".Ldt-CtrlPlay").click(function() { self.playHandler.call(self); }); - this.selector.find(".Ldt-CtrlAnnotate").click(function() - { self._Popcorn.trigger("IriSP.PlayerWidget.AnnotateButton.clicked"); }); - this.selector.find(".Ldt-CtrlSearch").click(function() { self.searchButtonHandler.call(self); }); - - var _volctrl = this.selector.find(".Ldt-Ctrl-Volume-Control"); - this.selector.find('.Ldt-CtrlSound') - .click(function() { self.muteHandler.call(self); } ) + var _volctrl = this.$.find(".Ldt-Ctrl-Volume-Control"); + this.$.find('.Ldt-CtrlSound') + .click(this.functionWrapper("muteHandler")) .mouseover(function() { _volctrl.show(); }) @@ -89,51 +89,44 @@ _volctrl.hide(); }); - /* - var searchButtonPos = this.selector.find(".Ldt-CtrlSearch").position(); - var searchBox = Mustache.to_html(IriSP.search_template, {margin_left : searchButtonPos.left + "px"}); - this.selector.find(".Ldt-CtrlSearch").after(searchBox); - */ - - // trigger an IriSP.PlayerWidget.MouseOver to the widgets that are interested (i.e : sliderWidget) - this.selector.hover(function() { self._Popcorn.trigger("IriSP.PlayerWidget.MouseOver"); }, - function() { self._Popcorn.trigger("IriSP.PlayerWidget.MouseOut"); }); - this.selector.find(".Ldt-Ctrl-Volume-Cursor").draggable({ - axis: "x", - drag: function(event, ui) { - var _vol = Math.max(0, Math.min( 1, ui.position.left / (ui.helper.parent().width() - ui.helper.outerWidth()))); - ui.helper.attr("title",IriSP.i18n.getMessage('volume')+': ' + Math.floor(100*_vol) + '%'); - self._Popcorn.volume(_vol); - }, - containment: "parent" - }); - - setTimeout(function() { - self.volumeUpdater(); - }, 1000); /* some player - jwplayer notable - save the state of the mute button between sessions */ + + // Allow Volume Cursor Dragging + this.$volumeBar.slider({ + slide: function(event, ui) { + _this.$volumeBar.attr("title",IriSP.i18n.getMessage('volume')+': ' + ui.value + '%'); + _this.player.popcorn.volume(ui.value / 100); + }, + stop: this.functionWrapper("volumeUpdater") + }); + + // trigger an IriSP.PlayerWidget.MouseOver to the widgets that are interested (i.e : sliderWidget) + this.$.hover( + function() { + _this.player.popcorn.trigger("IriSP.PlayerWidget.MouseOver"); + }, + function() { + _this.player.popcorn.trigger("IriSP.PlayerWidget.MouseOut"); + }); + setTimeout(this.functionWrapper("volumeUpdater"), 1000); + /* some players - including jwplayer - save the state of the mute button between sessions */ }; /* Update the elasped time div */ IriSP.PlayerWidget.prototype.timeDisplayUpdater = function() { + var _curTime = this.player.popcorn.roundTime(); + if (typeof this._previousSecond !== "undefined" && _curTime === this._previousSecond) { + return; + } - if (this._previousSecond === undefined) { - this._previousSecond = this._Popcorn.roundTime(); - } - else { - /* we're still in the same second, so it's not necessary to update time */ - if (this._Popcorn.roundTime() == this._previousSecond) - return; - - } + // we get it at each call because it may change. + var _totalTime = this.source.getDuration(), + _elapsedTime = new IriSP.Model.Time(); + + _elapsedTime.setSeconds(_curTime); - // we get it at each call because it may change. - var duration = this.getDuration() / 1000; - var totalTime = IriSP.secondsToTime(duration); - var elapsedTime = IriSP.secondsToTime(this._Popcorn.currentTime()); - - this.selector.find(".Ldt-ElapsedTime").html(elapsedTime.toString()); - this.selector.find(".Ldt-TotalTime").html(totalTime.toString()); - this._previousSecond = this._Popcorn.roundTime(); + this.$.find(".Ldt-ElapsedTime").html(_elapsedTime.toString()); + this.$.find(".Ldt-TotalTime").html(_totalTime.toString()); + this._previousSecond = _curTime; }; /* update the icon of the button - separate function from playHandler @@ -141,42 +134,46 @@ the jwplayer window) we have to change the icon without playing/pausing */ IriSP.PlayerWidget.prototype.playButtonUpdater = function() { - var status = this._Popcorn.media.paused; + + var status = this.player.popcorn.media.paused; - if ( status == true ){ + if (status) { /* the background sprite is changed by adding/removing the correct classes */ - this.selector.find(".Ldt-CtrlPlay").attr("title", IriSP.i18n.getMessage('play')); - this.selector.find(".Ldt-CtrlPlay").removeClass("Ldt-CtrlPlay-PauseState").addClass("Ldt-CtrlPlay-PlayState"); - } else { - this.selector.find(".Ldt-CtrlPlay").attr("title", IriSP.i18n.getMessage('pause')); - this.selector.find(".Ldt-CtrlPlay").removeClass("Ldt-CtrlPlay-PlayState").addClass("Ldt-CtrlPlay-PauseState"); - } - - return; + this.$playButton + .attr("title", IriSP.i18n.getMessage('play')) + .removeClass("Ldt-CtrlPlay-PauseState") + .addClass("Ldt-CtrlPlay-PlayState"); + } else { + this.$playButton + .attr("title", IriSP.i18n.getMessage('pause')) + .removeClass("Ldt-CtrlPlay-PlayState") + .addClass("Ldt-CtrlPlay-PauseState"); + } }; IriSP.PlayerWidget.prototype.playHandler = function() { - var status = this._Popcorn.media.paused; + + var status = this.player.popcorn.media.paused; - if ( status == true ){ - this._Popcorn.play(); - } else { - this._Popcorn.pause(); - } + if (status) { + this.player.popcorn.play(); + } else { + this.player.popcorn.pause(); + } }; IriSP.PlayerWidget.prototype.muteHandler = function() { - this._Popcorn.mute(!this._Popcorn.muted()); + this.player.popcorn.mute(!this.player.popcorn.muted()); }; IriSP.PlayerWidget.prototype.volumeUpdater = function() { - var _muted = this._Popcorn.muted(), - _vol = this._Popcorn.volume(); + var _muted = this.player.popcorn.muted(), + _vol = this.player.popcorn.volume(); if (_vol === false) { _vol = .5; } - var _soundCtl = this.selector.find(".Ldt-CtrlSound"); + var _soundCtl = this.$.find(".Ldt-CtrlSound"); _soundCtl.removeClass("Ldt-CtrlSound-Mute Ldt-CtrlSound-Half Ldt-CtrlSound-Full"); if (_muted) { _soundCtl.attr("title", IriSP.i18n.getMessage('unmute')) @@ -185,77 +182,60 @@ _soundCtl.attr("title", IriSP.i18n.getMessage('mute')) .addClass(_vol < .5 ? "Ldt-CtrlSound-Half" : "Ldt-CtrlSound-Full" ) } - var _cursor = this.selector.find(".Ldt-Ctrl-Volume-Cursor"); - _cursor.css({ - "left": ( _muted ? 0 : Math.floor(_vol * (_cursor.parent().width() - _cursor.outerWidth())) ) + "px" - }) + this.$volumeBar.slider("value", _muted ? 0 : 100 * _vol); }; IriSP.PlayerWidget.prototype.showSearchBlock = function() { - var self = this; - - if (this._searchBlockOpen == false) { - this.selector.find(".LdtSearch").show("blind", { direction: "horizontal"}, 100); - this.selector.find(".LdtSearchInput").css('background-color','#fff'); + this.$searchBlock.show("blind", { direction: "horizontal"}, 100); + this.$searchInput.css('background-color','#fff'); - this._searchBlockOpen = true; - this.selector.find(".LdtSearchInput").bind('keyup', null, function() { self.searchHandler.call(self); } ); - this.selector.find(".LdtSearchInput").focus(); + this.$searchInput.focus(); - // we need this variable because some widget can find a match in - // their data while at the same time other's don't. As we want the + // we need this variable because some widgets can find a match in + // their data while at the same time others don't. As we want the // search field to become green when there's a match, we need a // variable to remember that we had one. this._positiveMatch = false; // tell the world the field is open - this._Popcorn.trigger("IriSP.search.open"); - } + this.player.popcorn.trigger("IriSP.search.open"); }; IriSP.PlayerWidget.prototype.hideSearchBlock = function() { - if (this._searchBlockOpen == true) { - this._searchLastValue = this.selector.find(".LdtSearchInput").attr('value'); - this.selector.find(".LdtSearchInput").attr('value',''); - this.selector.find(".LdtSearch").hide("blind", { direction: "horizontal"}, 75); - - // unbind the watcher event. - this.selector.find(".LdtSearchInput").unbind('keypress set'); - this._searchBlockOpen = false; + this._searchLastValue = this.$searchInput.val(); + this.$searchInput.val(''); + this.$searchBlock.hide("blind", { direction: "horizontal"}, 75); this._positiveMatch = false; - this._Popcorn.trigger("IriSP.search.closed"); - } + this.player.popcorn.trigger("IriSP.search.closed"); }; /** react to clicks on the search button */ IriSP.PlayerWidget.prototype.searchButtonHandler = function() { - var self = this; - - /* show the search field if it is not shown */ - if ( this._searchBlockOpen == false ) { - this.showSearchBlock(); - this.selector.find(".LdtSearchInput").attr('value', this._searchLastValue); - this._Popcorn.trigger("IriSP.search", this._searchLastValue); // trigger the search to make it more natural. + + if ( this.$searchBlock.is(":hidden") ) { + this.showSearchBlock(); + this.$searchInput.val(this._searchLastValue); + this.player.popcorn.trigger("IriSP.search", this._searchLastValue); // trigger the search to make it more natural. } else { - this.hideSearchBlock(); - } + this.hideSearchBlock(); + } }; /** 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'); - this._positiveMatch = false; + this._searchLastValue = this.$searchInput.val(); + this._positiveMatch = false; - // do nothing if the search field is empty, instead of highlighting everything. - if (this._searchLastValue == "") { - this._Popcorn.trigger("IriSP.search.cleared"); - this.selector.find(".LdtSearchInput").css('background-color',''); - } else { - this._Popcorn.trigger("IriSP.search", this._searchLastValue); - } + // do nothing if the search field is empty, instead of highlighting everything. + if (this._searchLastValue == "") { + this.player.popcorn.trigger("IriSP.search.cleared"); + this.$searchInput.css('background-color',''); + } else { + this.player.popcorn.trigger("IriSP.search", this._searchLastValue); + } }; /** @@ -263,22 +243,23 @@ highlight a match. */ IriSP.PlayerWidget.prototype.searchMatch = function() { - this._positiveMatch = true; - this.selector.find(".LdtSearchInput").css('background-color','#e1ffe1'); + this._positiveMatch = true; + this.$searchInput.css('background-color','#e1ffe1'); }; /** the same, except that no value could be found */ IriSP.PlayerWidget.prototype.searchNoMatch = function() { - if (this._positiveMatch !== true) - this.selector.find(".LdtSearchInput").css('background-color', "#d62e3a"); + if (this._positiveMatch !== true) { + this.$searchInput.css('background-color', "#d62e3a"); + } }; /** react to an IriSP.Player.triggeredSearch - that is, when a widget ask the PlayerWidget to do a search on his behalf */ IriSP.PlayerWidget.prototype.triggeredSearch = function(searchString) { - this.showSearchBlock(); - this.selector.find(".LdtSearchInput").attr('value', searchString); - this._Popcorn.trigger("IriSP.search", searchString); // trigger the search to make it more natural. + this.showSearchBlock(); + this.$searchInput.attr('value', searchString); + this.player.popcorn.trigger("IriSP.search", searchString); // trigger the search to make it more natural. };