diff -r 3ab36f402b0c -r 198c2b79f5e1 src/widgets/Controller.js --- a/src/widgets/Controller.js Thu Jan 02 16:40:25 2014 +0100 +++ b/src/widgets/Controller.js Thu Jan 02 16:49:20 2014 +0100 @@ -1,17 +1,17 @@ /* Displays Play and Pause buttons, Search Button and Form, Volume Control */ IriSP.Widgets.Controller = function(player, config) { - IriSP.Widgets.Widget.call(this, player, config); - this.lastSearchValue = ""; + IriSP.Widgets.Widget.call(this, player, config); + + this._searchLastValue = ""; }; IriSP.Widgets.Controller.prototype = new IriSP.Widgets.Widget(); IriSP.Widgets.Controller.prototype.defaults = { disable_annotate_btn: false, - disable_search_btn: false, - disable_ctrl_f: false -}; + disable_search_btn: false +} IriSP.Widgets.Controller.prototype.template = '
' @@ -56,7 +56,7 @@ annotate: "Annotate", search: "Search", elapsed_time: "Elapsed time", - total_time: "Total duration", + total_time: "Total time", volume: "Volume", volume_control: "Volume control" }, @@ -69,7 +69,7 @@ unmute: "Activer le son", annotate: "Annoter", search: "Rechercher", - elapsed_time: "Temps écoulé", + elapsed_time: "Durée écoulée", total_time: "Durée totale", volume: "Niveau sonore", volume_control: "Réglage du niveau sonore" @@ -87,21 +87,25 @@ this.$volumeBar = this.$.find(".Ldt-Ctrl-Volume-Bar"); // handle events - this.onMediaEvent("play","playButtonUpdater"); - this.onMediaEvent("pause","playButtonUpdater"); - this.onMediaEvent("volumechange","volumeUpdater"); - this.onMediaEvent("timeupdate","timeDisplayUpdater"); - this.onMediaEvent("loadedmetadata","volumeUpdater"); + this.bindPopcorn("play","playButtonUpdater"); + this.bindPopcorn("pause","playButtonUpdater"); + this.bindPopcorn("volumechange","volumeUpdater"); + this.bindPopcorn("timeupdate","timeDisplayUpdater"); + this.bindPopcorn("loadedmetadata","timeDisplayUpdater"); + this.bindPopcorn("loadedmetadata","volumeUpdater"); + 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-Ctrl-Annotate").click(function() { - _this.player.trigger("CreateAnnotation.toggle"); + _this.player.popcorn.trigger("IriSP.CreateAnnotation.toggle"); }); this.$.find(".Ldt-Ctrl-SearchBtn").click(this.functionWrapper("searchButtonHandler")); - this.$searchInput.keyup(this.functionWrapper("searchHandler")); + this.$searchInput.keyup(this.functionWrapper("searchHandler") ); var _volctrl = this.$.find(".Ldt-Ctrl-Volume-Control"); this.$.find('.Ldt-Ctrl-Sound') @@ -117,28 +121,13 @@ }).mouseout(function() { _volctrl.hide(); }); - - // Handle CTRL-F - if (!this.disable_ctrl_f) { - var _fKey = "F".charCodeAt(0), - _lastCtrlFTime = 0; - IriSP.jQuery(document).keydown(function(_event) { - if (_event.keyCode === _fKey && (_event.ctrlKey || _event.metaKey)) { - var _time = IriSP.jQuery.now(); - if (_time - _lastCtrlFTime > 2000) { - _this.searchButtonHandler(); - } - _lastCtrlFTime = _time; - return false; - } - }); - } + // Allow Volume Cursor Dragging this.$volumeBar.slider({ slide: function(event, ui) { _this.$volumeBar.attr("title",_this.l10n.volume+': ' + ui.value + '%'); - _this.media.setVolume(ui.value / 100); + _this.player.popcorn.volume(ui.value / 100); }, stop: this.functionWrapper("volumeUpdater") }); @@ -146,38 +135,33 @@ // trigger an IriSP.Player.MouseOver to the widgets that are interested (i.e : sliderWidget) this.$.hover( function() { - _this.player.trigger("Player.MouseOver"); + _this.player.popcorn.trigger("IriSP.Player.MouseOver"); }, function() { - _this.player.trigger("Player.MouseOut"); + _this.player.popcorn.trigger("IriSP.Player.MouseOut"); }); - - this.timeDisplayUpdater(new IriSP.Model.Time(0)); - - var annotations = this.source.getAnnotations(); - annotations.on("search", function(_text) { - _this.$searchInput.val(_text); - _this.showSearchBlock(); - }); - annotations.on("found", function(_text) { - _this.$searchInput.css('background-color','#e1ffe1'); - }); - annotations.on("not-found", function(_text) { - _this.$searchInput.css('background-color', "#d62e3a"); - }); - annotations.on("search-cleared", function() { - _this.hideSearchBlock(); - }); + /* some players - including jwplayer - save the state of the mute button between sessions */ + + window.setTimeout(this.functionWrapper("volumeUpdater"), 1000); }; /* Update the elasped time div */ -IriSP.Widgets.Controller.prototype.timeDisplayUpdater = function(_time) { +IriSP.Widgets.Controller.prototype.timeDisplayUpdater = function() { + var _curTime = this.player.popcorn.roundTime(); + if (typeof this._previousSecond !== "undefined" && _curTime === this._previousSecond) { + return; + } // we get it at each call because it may change. - var _totalTime = this.media.duration; - this.$.find(".Ldt-Ctrl-Time-Elapsed").html(_time.toString()); + var _totalTime = this.source.getDuration(), + _elapsedTime = new IriSP.Model.Time(); + + _elapsedTime.setSeconds(_curTime); + + this.$.find(".Ldt-Ctrl-Time-Elapsed").html(_elapsedTime.toString()); this.$.find(".Ldt-Ctrl-Time-Total").html(_totalTime.toString()); + this._previousSecond = _curTime; }; /* update the icon of the button - separate function from playHandler @@ -185,7 +169,10 @@ the jwplayer window) we have to change the icon without playing/pausing */ IriSP.Widgets.Controller.prototype.playButtonUpdater = function() { - if (this.media.getPaused()) { + + var status = this.player.popcorn.media.paused; + + if (status) { /* the background sprite is changed by adding/removing the correct classes */ this.$playButton .attr("title", this.l10n.play) @@ -201,20 +188,23 @@ IriSP.Widgets.Controller.prototype.playHandler = function() { - if (this.media.getPaused()) { - this.media.play(); + + var status = this.player.popcorn.media.paused; + + if (status) { + this.player.popcorn.play(); } else { - this.media.pause(); + this.player.popcorn.pause(); } }; IriSP.Widgets.Controller.prototype.muteHandler = function() { - this.media.setMuted(!this.media.getMuted()); + this.player.popcorn.muted(!this.player.popcorn.muted()); }; IriSP.Widgets.Controller.prototype.volumeUpdater = function() { - var _muted = this.media.getMuted(), - _vol = this.media.getVolume(); + var _muted = this.player.popcorn.muted(), + _vol = this.player.popcorn.volume(); if (_vol === false) { _vol = .5; } @@ -225,29 +215,43 @@ .addClass("Ldt-Ctrl-Sound-Mute"); } else { _soundCtl.attr("title", this.l10n.mute) - .addClass(_vol < .5 ? "Ldt-Ctrl-Sound-Half" : "Ldt-Ctrl-Sound-Full" ); + .addClass(_vol < .5 ? "Ldt-Ctrl-Sound-Half" : "Ldt-Ctrl-Sound-Full" ) } this.$volumeBar.slider("value", _muted ? 0 : 100 * _vol); }; IriSP.Widgets.Controller.prototype.showSearchBlock = function() { - this.$searchBlock.animate({ width:"160px" }, 200); + this.$searchBlock.show("blind", { direction: "horizontal"}, 100); this.$searchInput.css('background-color','#fff'); + this.$searchInput.focus(); + + // 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.player.popcorn.trigger("IriSP.search.open"); }; IriSP.Widgets.Controller.prototype.hideSearchBlock = function() { - this.$searchBlock.animate( { width: 0 }, 200); + this._searchLastValue = this.$searchInput.val(); + this.$searchInput.val(''); + this.$searchBlock.hide("blind", { direction: "horizontal"}, 75); + + this._positiveMatch = false; + + this.player.popcorn.trigger("IriSP.search.closed"); }; /** react to clicks on the search button */ IriSP.Widgets.Controller.prototype.searchButtonHandler = function() { - if ( !this.$searchBlock.width() ) { + if ( this.$searchBlock.is(":hidden") ) { this.showSearchBlock(); - var _val = this.$searchInput.val(); - if (_val) { - this.source.getAnnotations().search(_val); - } + this.$searchInput.val(this._searchLastValue); + this.player.popcorn.trigger("IriSP.search", this._searchLastValue); // trigger the search to make it more natural. } else { this.hideSearchBlock(); } @@ -256,22 +260,40 @@ /** this handler is called whenever the content of the search field changes */ IriSP.Widgets.Controller.prototype.searchHandler = function() { - if ( !this.$searchBlock.width() ) { - this.$searchBlock.css({ width:"160px" }); - this.$searchInput.css('background-color','#fff'); - } - var _val = this.$searchInput.val(); + this._searchLastValue = this.$searchInput.val(); this._positiveMatch = false; - + // do nothing if the search field is empty, instead of highlighting everything. - if (_val !== this.lastSearchValue) { - if (_val) { - this.source.getAnnotations().search(_val); - } else { - this.source.getAnnotations().trigger("clear-search"); - this.$searchInput.css('background-color',''); - } + if (this._searchLastValue == "") { + this.player.popcorn.trigger("IriSP.search.cleared"); + this.$searchInput.css('background-color',''); + } else { + this.player.popcorn.trigger("IriSP.search", this._searchLastValue); } - this.lastSearchValue = _val; }; +/** + handler for the IriSP.search.found message, which is sent by some views when they + highlight a match. +*/ +IriSP.Widgets.Controller.prototype.searchMatch = function() { + this._positiveMatch = true; + this.$searchInput.css('background-color','#e1ffe1'); +}; + +/** the same, except that no value could be found */ +IriSP.Widgets.Controller.prototype.searchNoMatch = function() { + if (this._positiveMatch !== true) { + this.$searchInput.css('background-color', "#d62e3a"); + } +}; + +/** react to an IriSP.Player.triggeredSearch - that is, when + a widget ask the.Player to do a search on his behalf */ +IriSP.Widgets.Controller.prototype.triggeredSearch = function(searchString) { + this.showSearchBlock(); + this.$searchInput.attr('value', searchString); + this.player.popcorn.trigger("IriSP.search", searchString); // trigger the search to make it more natural. +}; + +