diff -r 03b03865eb9b -r 4357aac4eb19 src/js/widgets/playerWidget.js --- a/src/js/widgets/playerWidget.js Mon Mar 26 19:18:04 2012 +0200 +++ b/src/js/widgets/playerWidget.js Wed Mar 28 17:37:49 2012 +0200 @@ -12,7 +12,9 @@ "annotate": "Annotate", "search": "Search", "elapsed_time": "Elapsed time", - "total_time": "Total time" + "total_time": "Total time", + "volume": "Volume", + "volume_control": "Volume control" }, "fr": { "play_pause": "Lecture/Pause", @@ -24,7 +26,9 @@ "annotate": "Annoter", "search": "Rechercher", "elapsed_time": "Durée écoulée", - "total_time": "Durée totale" + "total_time": "Durée totale", + "volume": "Niveau sonore", + "volume_control": "Réglage du niveau sonore" } } ); @@ -54,7 +58,7 @@ this._Popcorn.listen("play", IriSP.wrap(this, this.playButtonUpdater)); this._Popcorn.listen("pause", IriSP.wrap(this, this.playButtonUpdater)); - this._Popcorn.listen("volumechange", IriSP.wrap(this, this.muteButtonUpdater)); + 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. @@ -70,7 +74,20 @@ { self._Popcorn.trigger("IriSP.PlayerWidget.AnnotateButton.clicked"); }); this.selector.find(".Ldt-CtrlSearch").click(function() { self.searchButtonHandler.call(self); }); - this.selector.find('.Ldt-CtrlSound').click(function() { self.muteHandler.call(self); } ); + var _volctrl = this.selector.find(".Ldt-Ctrl-Volume-Control"); + this.selector.find('.Ldt-CtrlSound') + .click(function() { self.muteHandler.call(self); } ) + .mouseover(function() { + _volctrl.show(); + }) + .mouseout(function() { + _volctrl.hide(); + }); + _volctrl.mouseover(function() { + _volctrl.show(); + }).mouseout(function() { + _volctrl.hide(); + }); /* var searchButtonPos = this.selector.find(".Ldt-CtrlSearch").position(); @@ -81,8 +98,19 @@ // 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" + }); - this.muteButtonUpdater(); /* some player - jwplayer notable - save the state of the mute button between sessions */ + setTimeout(function() { + self.volumeUpdater(); + }, 1000); /* some player - jwplayer notable - save the state of the mute button between sessions */ }; /* Update the elasped time div */ @@ -139,25 +167,28 @@ }; IriSP.PlayerWidget.prototype.muteHandler = function() { - if (!this._Popcorn.muted()) { - this._Popcorn.mute(true); - } else { - this._Popcorn.mute(false); - } + this._Popcorn.mute(!this._Popcorn.muted()); }; -IriSP.PlayerWidget.prototype.muteButtonUpdater = function() { - var status = this._Popcorn.media.muted; - - if ( status == true ){ - this.selector.find(".Ldt-CtrlSound").attr("title", IriSP.i18n.getMessage('unmute')); - this.selector.find(".Ldt-CtrlSound").removeClass("Ldt-CtrlSound-MuteState").addClass("Ldt-CtrlSound-SoundState"); - } else { - this.selector.find(".Ldt-CtrlSound").attr("title", IriSP.i18n.getMessage('mute')); - this.selector.find(".Ldt-CtrlSound").removeClass("Ldt-CtrlSound-SoundState").addClass("Ldt-CtrlSound-MuteState"); - } - - return; +IriSP.PlayerWidget.prototype.volumeUpdater = function() { + var _muted = this._Popcorn.muted(), + _vol = this._Popcorn.volume(); + if (_vol === false) { + _vol = .5; + } + var _soundCtl = this.selector.find(".Ldt-CtrlSound"); + _soundCtl.removeClass("Ldt-CtrlSound-Mute Ldt-CtrlSound-Half Ldt-CtrlSound-Full"); + if (_muted) { + _soundCtl.attr("title", IriSP.i18n.getMessage('unmute')) + .addClass("Ldt-CtrlSound-Mute"); + } else { + _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" + }) }; IriSP.PlayerWidget.prototype.showSearchBlock = function() {