--- 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;
}
Binary file src/css/imgs/player-sprites.png has changed
--- 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();
--- 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);
--- 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;
--- 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) {
--- 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() {
--- 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 @@
<div class='Ldt-TotalTime' title='{{l10n.total_time}}'>00:00</div>
</div>
<div class='Ldt-Ctrl-spacer'></div>
- <div class='Ldt-Ctrl-button Ldt-CtrlSound Ldt-CtrlSound-MuteState Ldt-TraceMe' title='{{l10n.mute_unmute}}'></div>
+ <div class='Ldt-Ctrl-button Ldt-CtrlSound Ldt-CtrlSound-Full Ldt-TraceMe' title='{{l10n.mute_unmute}}'></div>
+ </div>
+ <div class='Ldt-Ctrl-Volume-Control' title='{{l10n.volume_control}}'>
+ <div class='Ldt-Ctrl-Volume-Bar'></div>
+ <div class='Ldt-Ctrl-Volume-Cursor'></div>
</div>
</div>
--- 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;
}
/* */
Binary file test/integration/allocine_dossier_independant/css/img-cinecast/player-sprites.png has changed
--- 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
