# HG changeset patch # User veltr # Date 1332949069 -7200 # Node ID 4357aac4eb19c4bf3ce2884184c41c30a1085329 # Parent 03b03865eb9bc8af92976d1d1617654266685726 Added volume support diff -r 03b03865eb9b -r 4357aac4eb19 src/css/LdtPlayer.css --- a/src/css/LdtPlayer.css Mon Mar 26 19:18:04 2012 +0200 +++ b/src/css/LdtPlayer.css Wed Mar 28 17:37:49 2012 +0200 @@ -161,6 +161,7 @@ background:url('imgs/player_gradient.png') repeat-x transparent ; height: 25px; border: 1px solid #b6b8b8; + position: relative; } @@ -274,30 +275,69 @@ margin: 0 2px; } -.Ldt-CtrlSound-SoundState { +.Ldt-CtrlSound-Full { background-position: -120px 0; } -.Ldt-CtrlSound-SoundState:hover { +.Ldt-CtrlSound-Full:hover { background-position: -120px -25px; } -.Ldt-CtrlSound-SoundState:active { +.Ldt-CtrlSound-Full:active { background-position: -120px -50px; } -.Ldt-CtrlSound-MuteState { +.Ldt-CtrlSound-Mute { background-position: -150px 0; } -.Ldt-CtrlSound-MuteState:hover { +.Ldt-CtrlSound-Mute:hover { background-position: -150px -25px; } -.Ldt-CtrlSound-MuteState:active { +.Ldt-CtrlSound-Mute:active { background-position: -150px -50px; } +.Ldt-CtrlSound-Half { + background-position: -180px 0; +} + +.Ldt-CtrlSound-Half:hover { + background-position: -180px -25px; +} + +.Ldt-CtrlSound-Half:active { + background-position: -180px -50px; +} + +.Ldt-Ctrl-Volume-Control { + display: none; + position: absolute; + background:url('imgs/player_gradient.png') repeat-x transparent ; + height: 25px; + width: 100px; top: 25px; right: -1px; z-index: 100; + padding: 0 2px; + border: 1px solid #b6b8b8; +} + +.Ldt-Ctrl-Volume-Bar { + height: 5px; margin: 9px 3px 0; background: #cccccc; border: 1px solid #999999; border-radius: 2px; +} + +.Ldt-Ctrl-Volume-Cursor { + position: absolute; top: 2px; width: 6px; height: 19px; background: #a8a8a8; border: 1px solid #999999; border-radius: 2px; + cursor: pointer; +} + +.Ldt-Ctrl-Volume-Cursor:hover { + background: #cccccc; +} + +.Ldt-Ctrl-Volume-Cursor.ui-draggable-dragging { + background: #999999; +} + .Ldt-cleaner { clear:both; } diff -r 03b03865eb9b -r 4357aac4eb19 src/css/imgs/player-sprites.png Binary file src/css/imgs/player-sprites.png has changed diff -r 03b03865eb9b -r 4357aac4eb19 src/js/players/player.allocine.js --- a/src/js/players/player.allocine.js Mon Mar 26 19:18:04 2012 +0200 +++ b/src/js/players/player.allocine.js Wed Mar 28 17:37:49 2012 +0200 @@ -60,7 +60,7 @@ } window.onReady = IriSP.wrap(this, this.ready); - //NOT CALLED window.onAllocineStateChange = IriSP.wrap(this, this.stateHandler); + window.onAllocineStateChange = IriSP.wrap(this, this.stateHandler); window.onTime = IriSP.wrap(this, this.progressHandler); var _videoUrl = ( @@ -102,7 +102,7 @@ IriSP.PopcornReplacement.allocine.prototype.stateHandler = function(state) { - + console.log("stateHandler"); switch(state) { case 1: this.callbacks.onPlay(); diff -r 03b03865eb9b -r 4357aac4eb19 src/js/players/player.dailymotion.js --- a/src/js/players/player.dailymotion.js Mon Mar 26 19:18:04 2012 +0200 +++ b/src/js/players/player.dailymotion.js Wed Mar 28 17:37:49 2012 +0200 @@ -49,11 +49,26 @@ }, setMute : function(p) { if (_this.player) { - return p ? _this.player.mute() : _this.player.unMute(); + if (p) { + _this.player.mute(); + } + else { + _this.player.unMute(); + } + } + }, + getVolume : function() { + if (_this.player) { + return _this.player.getVolume() / 100; } else { return false; } - } + }, + setVolume : function(p) { + if (_this.player) { + _this.player.setVolume(Math.floor(100 * p)); + } + }, } window.onDailymotionPlayerReady = IriSP.wrap(this, this.ready); diff -r 03b03865eb9b -r 4357aac4eb19 src/js/players/player.jwplayer.js --- a/src/js/players/player.jwplayer.js Mon Mar 26 19:18:04 2012 +0200 +++ b/src/js/players/player.jwplayer.js Wed Mar 28 17:37:49 2012 +0200 @@ -3,7 +3,6 @@ /** jwplayer player wrapper */ IriSP.PopcornReplacement.jwplayer = function(container, options) { - /* appel du parent pour initialiser les structures communes à tous les players */ IriSP.PopcornReplacement.player.call(this, container, options); @@ -16,7 +15,9 @@ getPosition: function() { return jwplayer(this.container).getPosition(); }, seek: function(pos) { return jwplayer(this.container).seek(pos); }, getMute: function() { return jwplayer(this.container).getMute() }, - setMute: function(p) { return jwplayer(this.container).setMute(p); } + setMute: function(p) { return jwplayer(this.container).setMute(p); }, + getVolume: function() { return jwplayer(this.container).getVolume() / 100; }, + setVolume: function(p) { return jwplayer(this.container).setVolume(Math.floor(100*p)); } } options.events = this.callbacks; diff -r 03b03865eb9b -r 4357aac4eb19 src/js/pop.js --- a/src/js/pop.js Mon Mar 26 19:18:04 2012 +0200 +++ b/src/js/pop.js Wed Mar 28 17:37:49 2012 +0200 @@ -144,6 +144,22 @@ } }; +IriSP.PopcornReplacement.player.prototype.volume = function(val) { + if (typeof this.playerFns.getVolume == "undefined" || typeof this.playerFns.setVolume == "undefined") { + return false; + } + var _vol = this.playerFns.getVolume(); + if (typeof(val) !== "undefined" && parseFloat(val) !== NaN) { + val = Math.max(0, Math.min(1, val)); + if (parseFloat(val) != parseFloat(_vol)) { + this.playerFns.setVolume(val); + this.trigger("volumechange"); + _vol = this.playerFns.getVolume(); + } + } + return _vol; +}; + IriSP.PopcornReplacement.player.prototype.mute = IriSP.PopcornReplacement.player.prototype.muted; IriSP.PopcornReplacement.player.prototype.code = function(options) { 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() { diff -r 03b03865eb9b -r 4357aac4eb19 src/templates/player.html --- a/src/templates/player.html Mon Mar 26 19:18:04 2012 +0200 +++ b/src/templates/player.html Wed Mar 28 17:37:49 2012 +0200 @@ -23,6 +23,10 @@
00:00
-
+
+ +
+
+
diff -r 03b03865eb9b -r 4357aac4eb19 test/integration/allocine_dossier_independant/css/LdtPlayer.css --- a/test/integration/allocine_dossier_independant/css/LdtPlayer.css Mon Mar 26 19:18:04 2012 +0200 +++ b/test/integration/allocine_dossier_independant/css/LdtPlayer.css Wed Mar 28 17:37:49 2012 +0200 @@ -480,14 +480,14 @@ .Ldt-createAnnotation-userAvatar { float: right; - width: 64px; + width: 80px; height: 64px; border: 1px #ffffff; margin: 5px 0; } .Ldt-createAnnotation-userAvatar img { - float: right; + margin: 0 auto; display: block; max-width: 100%; max-height: 100%; @@ -512,26 +512,26 @@ /* */ .Ldt-createAnnotation-btnblock { - float: left; width: 450px; margin: 5px 0; + float: left; width: 480px; margin: 5px 0; } .Ldt-createAnnotation-btnblock label { - float: left; margin: 2px 8px 2px 0; + float: left; margin-top: 8px; width: 120px; font-size: 12px; height: 20px; } /* CINECAST SPECIFIC TAG BUTTONS */ .Ldt-createAnnotation-keywords li { - border: none; margin: 0 0 0 5px; height: 23px; padding: 0 0 0 20px; + border: none; margin: 5px 10px 0 0; height: 23px; padding: 0 0 0 15px; background: url(img-cinecast/tag.png) left top no-repeat; cursor: pointer; } .Ldt-createAnnotation-keyword-button { - font-size: 14px; color: #ffffff; + font-size: 13px; color: #ffffff; width: 95px; height: 23px; padding: 0 5px 0 0; border: none; margin: 0; background: url(img-cinecast/tag.png) right top no-repeat; - cursor: pointer; + cursor: pointer; } .Ldt-createAnnotation-keywords li:hover { @@ -543,11 +543,11 @@ } .Ldt-createAnnotation-keywords li.Ldt-createAnnotation-active-button { - background-position: left -46px; + background-position: left -46px; margin: 5px 0 0 0; } .Ldt-createAnnotation-keywords li.Ldt-createAnnotation-active-button .Ldt-createAnnotation-keyword-button { - background-position: right -46px; padding: 0 15px 0 0; + background-position: right -46px; padding: 0 15px 0 0; width: 105px; } /* */ diff -r 03b03865eb9b -r 4357aac4eb19 test/integration/allocine_dossier_independant/css/img-cinecast/player-sprites.png Binary file test/integration/allocine_dossier_independant/css/img-cinecast/player-sprites.png has changed diff -r 03b03865eb9b -r 4357aac4eb19 test/integration/allocine_dossier_independant/polemic-allocine.htm --- a/test/integration/allocine_dossier_independant/polemic-allocine.htm Mon Mar 26 19:18:04 2012 +0200 +++ b/test/integration/allocine_dossier_independant/polemic-allocine.htm Wed Mar 28 17:37:49 2012 +0200 @@ -21,7 +21,7 @@ name : 'awesome_user_name', avatar : 'allocine_test/avatar.png' }; - IriSP.libdir = "js/libs/"; + IriSP.libdir = "/metadataplayer/src/js/libs/"; IriSP.defaults.user = function() { return IriSP.user; }; @@ -65,15 +65,15 @@ }, { type : "createAnnotationWidget", polemic_mode : false, - keywords : ['#vodkaster', '#allocine', '#universcine'], + keywords : ['#vodkaster', '#allocine', '#universcine', '#FauxRaccord', '#SceneCulte', '#navet'], api_endpoint_template : "coucou/{{id}}.json", api_method : 'POST' - } /*, { + }, { type: "TraceWidget", url: "http://192.168.56.101:5000/", requestmode: 'GET', syncmode: "sync" - } */] + }] }, player : { type : 'allocine', // player type