WIP - integrating the various changes samuel requested.
--- a/src/css/LdtPlayer.css Wed Nov 23 12:25:10 2011 +0100
+++ b/src/css/LdtPlayer.css Wed Nov 23 15:16:28 2011 +0100
@@ -12,14 +12,7 @@
float:left;
}
- .Ldt-controler {
- font-size: 62.5%;
- font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
- background-color:#eeeeee;
- height:35px;
- }
-
- .Ldt-AnnotationsWidget {
+ .Ldt-AnnotationsWidget {
font-size: 62.5%;
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
background-color:#eeeeee;
@@ -138,9 +131,19 @@
display:none
}
+ /* player */
+ .Ldt-controler {
+ font-size: 62.5%;
+ font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
+ background:url('imgs/player_gradient.png') repeat-x transparent ;
+ height: 27px;
+ border-top: 1px solid #b6b8b8;
+ border-bottom: 1px solid #b6b8b8;
+ }
+
+
.Ldt-LeftPlayerControls {
float:left;
- padding: 4px;
}
.Ldt-RightPlayerControls {
@@ -148,6 +151,34 @@
padding: 4px;
}
+ .Ldt-CtrlPlay {
+ background:url('imgs/play_button.png') no-repeat scroll 0 0 transparent ;
+ background-position: center;
+ width: 50px;
+ height: 23px;
+ border: 1px solid #b6b8b8;
+ float: left;
+ }
+
+ .Ldt-CtrlNext {
+ background:url('imgs/play_button.png') no-repeat scroll 0 0 transparent ;
+ background-position: center;
+ width: 50px;
+ height: 23px;
+ border: 1px solid #b6b8b8;
+ float: left;
+ }
+
+
+ .Ldt-CtrlSearch {
+ background:url('imgs/play_button.png') no-repeat scroll 0 0 transparent ;
+ background-position: center;
+ width: 50px;
+ height: 23px;
+ border: 1px solid #b6b8b8;
+ float: left;
+ }
+
.Ldt-Time {
float: left;
padding: 4px;
Binary file src/css/imgs/play_button.png has changed
Binary file src/css/imgs/player_gradient.png has changed
--- a/src/js/widgets/playerWidget.js Wed Nov 23 12:25:10 2011 +0100
+++ b/src/js/widgets/playerWidget.js Wed Nov 23 15:16:28 2011 +0100
@@ -26,37 +26,15 @@
this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeDisplayUpdater));
- this.selector.find(".ldt-CtrlPlay").button({
- icons: {
- primary: 'ui-icon-play'
- },
- text: false
- }).click(function() { self.playHandler.call(self); })
- .next().button({
- icons: {
- primary: 'ui-icon-seek-next'
- },
- text: false
- });
+ this.selector.find(".Ldt-CtrlPlay").click(function() { self.playHandler.call(self); });
+ this.selector.find(".Ldt-CtrlNext").click(function() { });
+ this.selector.find(".Ldt-CtrlSearch").click(function() { self.searchButtonHandler.call(self); });
- this.selector.find(".ldt-CtrlSearch").button({
- icons: {
- primary: 'ui-icon-search'//,
- //secondary: 'ui-icon-volume-off'
- },
- text: false
- }).click(function() { self.searchButtonHandler.call(self); });
+ this.selector.find('.Ldt-CtrlSound').click(function() { self.muteHandler.call(self); } );
+
+ this.selector.find(".Ldt-CtrlPlay").attr( "style", "background-color:#CD21C24;" );
- this.selector.find('.ldt-CtrlSound').button({
- icons: {
- primary: 'ui-icon-volume-on'
- },
- text: false
- }).click(function() { self.muteHandler.call(self); } );
-
- this.selector.find(".ldt-CtrlPlay").attr( "style", "background-color:#CD21C24;" );
-
- var searchButtonPos = this.selector.find(".ldt-CtrlSearch").position();
+ var searchButtonPos = this.selector.find(".Ldt-CtrlSearch").position();
var searchBox = Mustache.to_html(IriSP.search_template, {margin_left : searchButtonPos.left + "px"});
this.selector.append(searchBox);
@@ -95,10 +73,10 @@
if ( status == true ){
this.selector.find(".ui-icon-play").css( "background-position", "-16px -160px" );
- this.selector.find(".ldt-CtrlPlay").attr("title", "Play");
+ this.selector.find(".Ldt-CtrlPlay").attr("title", "Play");
} else {
this.selector.find(".ui-icon-play").css( "background-position","0px -160px" );
- this.selector.find(".ldt-CtrlPlay").attr("title", "Pause");
+ this.selector.find(".Ldt-CtrlPlay").attr("title", "Pause");
}
};
--- a/src/templates/player.html Wed Nov 23 12:25:10 2011 +0100
+++ b/src/templates/player.html Wed Nov 23 15:16:28 2011 +0100
@@ -1,12 +1,9 @@
{{! template for the radio player }}
<div class='Ldt-controler demo'>
<div class='Ldt-LeftPlayerControls'>
- <button class='ldt-CtrlPlay'>Lecture
- / Pause</button>
- <button class='ldt-CtrlNext'>Suivant</button>
- <button class='ldt-CtrlSearch'>
- Rechercher
- </button>
+ <div class='Ldt-CtrlPlay'></div>
+ <div class='Ldt-CtrlNext'></div>
+ <div class='Ldt-CtrlSearch'></div>
</div>
<div class='Ldt-RightPlayerControls'>
<span class='ldt-Time'>
@@ -14,7 +11,7 @@
/
<span class='Ldt-TotalTime'></span>
</span>
- <button class='ldt-CtrlSound'>Sound</button>
+ <button class='Ldt-CtrlSound'>Sound</button>
</div>
<div class='cleaner'> </div>
-</div>
\ No newline at end of file
+</div>