luahttp: sprite buttons

Make them share a common palette and save 41K (78%)

share/Makefile.am

@@ -266,7 +266,7 @@ DIST_http_lua = \
 	lua/http/flash.html \
 	lua/http/vlm.html \
 	lua/http/images/loop.png \
-	lua/http/images/button_pause-48.png \
+	lua/http/images/buttons.png \
 	lua/http/images/speaker-32.png \
 	lua/http/images/fullscreen.png \
 	lua/http/images/vlc-48.png \
@@ -285,17 +285,10 @@ DIST_http_lua = \
 	lua/http/images/info.png \
 	lua/http/images/refresh.png \
 	lua/http/images/sout.png \
-	lua/http/images/button_stop-48.png \
-	lua/http/images/button_help-48.png \
-	lua/http/images/button-equalizer-48.png \
-	lua/http/images/button_ffw-48.png \
 	lua/http/images/sort.png \
-	lua/http/images/button_play-48.png \
 	lua/http/images/white_cross_small.png \
-	lua/http/images/button_full-48.png \
 	lua/http/images/shuffle.png \
 	lua/http/images/Other-48.png \
-	lua/http/images/button_repeat-48.png \
 	lua/http/images/repeat.png \
 	lua/http/images/slow.png \
 	lua/http/images/slider_left.png \
@@ -303,20 +296,14 @@ DIST_http_lua = \
 	lua/http/images/stop.png \
 	lua/http/images/sd.png \
 	lua/http/images/speaker.png \
-	lua/http/images/button_first-48.png \
-	lua/http/images/button_stream-48.png \
-	lua/http/images/button_rew-48.png \
-	lua/http/images/button_rec-48.png \
 	lua/http/images/delete.png \
 	lua/http/images/Back-48.png \
-	lua/http/images/button_eject-48.png \
 	lua/http/images/Video-48.png \
 	lua/http/images/playlist_small.png \
 	lua/http/images/eject.png \
 	lua/http/images/playlist.png \
 	lua/http/images/volume_up.png \
 	lua/http/images/next.png \
-	lua/http/images/button_last-48.png \
 	lua/http/images/volume_down.png \
 	lua/http/images/slider_bar.png \
 	lua/http/images/vlc16x16.png \

share/lua/http/css/main.css

@@ -85,37 +85,39 @@ body{
 	border: none;
 	display: inline-block;
 	cursor: pointer;
+	background-image: url("../images/buttons.png");
+	background-repeat: no-repeat;
 }
 .button{
 	cursor: pointer;
 	display: inline-block;
 }
 #buttonOpen{
-	background-image: url("../images/button_eject-48.png");
+	background-position: 0px 0px;
 }
 #buttonStop{
-	background-image: url("../images/button_stop-48.png");
+	background-position: -576px 0px;
 }
-#buttonPlay{
-	background-image: url("../images/button_play-48.png") ;
+.playing {
+	background-position: -336px 0px;
 }
-#buttonPause{
-	background-image: url("../images/button_pause-48.png") ;
+.paused {
+	background-position: -384px 0px;
 }
 #buttonPrev{
-	background-image: url("../images/button_first-48.png") ;
+	background-position: -144px 0px;
 }
 #buttonNext{
-	background-image: url("../images/button_last-48.png") ;
+	background-position: -288px 0px;
 }
 #buttonFull{
-	background-image: url("../images/button_full-48.png") ;
+	background-position: -192px 0px;
 }
 #buttonSout{
-	background-image: url("../images/button_stream-48.png") ;
+	background-position: -624px 0px;
 }
 #buttonEQ{
-	background-image: url("../images/button-equalizer-48.png") ;
+	background-position: -48px 0px;
 }
 #window_browse ol{
 	list-style-type: none;

share/lua/http/index.html

@@ -202,7 +202,7 @@
 					<tr>
 						<td id="controlButtons">
 							<div id="buttonPrev" class="button48  ui-corner-all" title="Previous"></div>
-							<div id="buttonPlay" class="button48  ui-corner-all" title="Play"></div>
+							<div id="buttonPlay" class="button48  ui-corner-all paused" title="Play"></div>
 							<div id="buttonNext" class="button48  ui-corner-all" title="Next"></div>
 							<div id="buttonOpen" class="button48  ui-corner-all" title="Open Media"></div>
 							<div id="buttonStop" class="button48  ui-corner-all" title="Stop"></div>

share/lua/http/js/controlers.js

@@ -23,13 +23,11 @@ function updateStatus(){
 				$('#buttonPlay').attr('state',$('state',data).text());
 				$('#buttonPlay').attr('mrl',$('[name="filename"]',data).text());
 				if($('state',data).text()=='playing'){
-					$('#buttonPlay').css({
-						'background-image':'url("images/button_pause-48.png")'
-					});
+					$('#buttonPlay').removeClass('paused');
+					$('#buttonPlay').addClass('playing');
 				}else{
-					$('#buttonPlay').css({
-						'background-image':'url("images/button_play-48.png")'
-					});
+					$('#buttonPlay').removeClass('playing');
+					$('#buttonPlay').addClass('paused');
 				}
 				if($('random',data).text()=='true'){
 					$('#buttonShuffle').removeClass('ui-state-default');
@@ -313,13 +311,11 @@ function updateStreams(){
 				$('#seekSlider').attr('totalLength',$('[name="Current"] instance',data).attr('length')/1000000);
 				$('#buttonPlay').attr('state',$('[name="Current"] instance',data).length>0 ? $('[name="Current"] instance',data).attr('state') : 'stopped');
 				if($('[name="Current"] instance',data).attr('state')=='playing'){
-					$('#buttonPlay').css({
-						'background-image':'url("images/button_pause-48.png'
-					});
+					$('#buttonPlay').removeClass('paused');
+					$('#buttonPlay').addClass('playing');
 				}else{
-					$('#buttonPlay').css({
-						'background-image':'url("images/button_play-48.png'
-					});
+					$('#buttonPlay').removeClass('playing');
+					$('#buttonPlay').addClass('paused');
 				}
 				setTimeout( updateStreams, 1000 );
 			}

share/lua/http/mobile.html

@@ -95,7 +95,7 @@
 					<td id="controlButtons" colspan="2" valign="bottom" height="108px;" class="ui-widget-content">
 						<div align="center">
 							<div id="buttonPrev" class="button48  ui-corner-all" title="Previous"></div>
-							<div id="buttonPlay" class="button48  ui-corner-all" title="Play"></div>
+							<div id="buttonPlay" class="button48  ui-corner-all paused" title="Play"></div>
 							<div id="buttonNext" class="button48  ui-corner-all" title="Next"></div>
 							<div id="buttonStop" class="button48  ui-corner-all" title="Stop"></div>
 						</div>