icecast

css/player.css

@@ -1,73 +1,23 @@
-div.jp-audio-stream {
-	background: #eee;
-	padding: 2px;
-	width: 44px;
-}
-div.jp-interface {
-	
-}
-div.jp-audio-stream ul.jp-controls {
-	padding:0px !important;
-	margin:0px !important;
-}
-div.jp-interface ul.jp-controls li {
-	padding:0px !important;
-	margin:0px !important;
-}
-div.jp-interface ul.jp-controls a {
-	display:block;
-	overflow:hidden;
-	text-indent:-9999px;
-}
-a.jp-play,
-a.jp-pause {
-	width:40px;
-	height:40px;
-}
-a.jp-play {
-	background: url("../img/jplayer.jpg") 0 0 no-repeat;
-}
-a.jp-play:hover {
-	background: url("../img/jplayer.jpg") -41px 0 no-repeat;
-}
-a.jp-pause {
-	background: url("../img/jplayer.jpg") 0 -42px no-repeat;
-	display: none;
-}
-a.jp-pause:hover {
-	background: url("../img/jplayer.jpg") -41px -42px no-repeat;
-}
-div.jp-current-time {
-	margin: 0px 0px 0 5px;
-}
+/* @override http://macs.local/david/wp-content/themes/dw/css/player.css */
 
 div#player-container{
 	width: 100%;
 }
 
 div#player{
-	padding: 20px;
-	height: 50px;
-	width: 250px;
-	background-color: white;
+	width: 100%;
 	color: #555555;
+	font-family: 'PT Sans', sans-serif;
+	font-weight: 700;
+	font-size: 12px;
 }
 #song-information{
-	width: 50%;
-	float: left;
 	text-align: left;
+	margin: 0 0 10px;
 }
 #controls{
 	float: left;
-	text-align: left;
 }
-div#amplitude-album-art{
-	height: 90px;
-	width: 90px;
-	background-color: black;
-	float: left;
-}
-
 #amplitude-play-pause{
     width: 15px;
     height: 17px;
@@ -88,14 +38,16 @@ div#amplitude-album-art{
 	float: right;
 }
 #amplitude-now-playing-name{
-	font-family: 'PT Sans', sans-serif;
-	font-weight: 700;
-	font-size: 12px;
+	font-size: 10px;
+	margin: -20px 0 0;
+	float: right;
+	width: 60%;
 }
-#amplitude-now-playing-album{
-	font-family: 'PT Sans', sans-serif;
-	font-weight: 400;
-	font-size: 12px;
+#amplitude-now-playing-listeners{
+	width: 30%;
+}
+#amplitude-now-playing-bitrate{
+	width: 30%;
 }
 #amplitude-current-time{
 	font-family: 'PT Sans', sans-serif;

js/last.fm.js

@@ -599,7 +599,8 @@ function radioTitle() {
           dataType: 'jsonp',
           success: function (json) {
             $('#track').text(json[mountpoint].title);
-            $('#listeners').text(json[mountpoint].listeners); 
+            $('#listeners').text(json[mountpoint].listeners);
+			$('#peak-listeners').text(json[mountpoint].peak_listeners); 
 			$('#bitrate').text(json[mountpoint].bitrate);  
         },
           error: function (e) {    console.log(e.message);  
@@ -620,5 +621,5 @@ amplitude_config = {
 			"live": true
 		}
 	],
-	"amplitude_volume": 100
+	"amplitude_volume": 70
 }	

page-music.php

@@ -138,7 +138,12 @@ get_header(); ?>
 							<div class="panel panel-default">
 								<div class="panel-body">
 									<div id="player">
-										<input class="bar" type="range" id="amplitude-volume-slider" value="0"/>
+										<div id="song-information">
+											<span id="amplitude-now-playing-listeners">Listeners: <span id="listeners">00</span> - Peak: <span id="peak-listeners">00</span></span><br>
+											<span id="amplitude-now-playing-bitrate">Bitrate: <span id="bitrate">bitrate</span> Kbps 44.100 Khz</span>
+											<span id="amplitude-now-playing-name">Current track: <span id="track">Off Air</span></span><br>
+										</div>
+										<input class="bar" type="range" id="amplitude-volume-slider" value="50"/>
 									<div id="controls">
 										<div id="amplitude-play-pause" class="amplitude-paused"></div><br>
 											<span id="amplitude-current-time">0:00</span>
@@ -149,10 +154,6 @@ get_header(); ?>
 								<div class="panel-footer">
 									<h5><?php echo $nowPlaying->getNowPlaying(); ?></h5>
 								</div>
-								<p>Listeners: <span id="listeners">00</span></p>
-								<p>Current track: <span id="track-title">Off Air</span></p>
-								<p>Bitrate: <span id="bitrate">bitrate</span> Kbps 44.100 Khz</p>
-								<!-- <ul class="mounts"></ul> -->
 							</div>
 						</div>
 					</div>