WIP - integrating the various changes samuel requested. popcorn-port
authorhamidouk
Wed, 23 Nov 2011 15:16:28 +0100
branchpopcorn-port
changeset 311 43a1b7d95317
parent 310 a8b9e3b6e31c
child 312 228b27fd2a7c
WIP - integrating the various changes samuel requested.
src/css/LdtPlayer.css
src/css/imgs/play_button.png
src/css/imgs/player_gradient.png
src/js/widgets/playerWidget.js
src/templates/player.html
--- 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'>&nbsp;</div>
-</div>
\ No newline at end of file
+</div>