Fall back for searching for artist/album art. Minor layout changes

Fallback: Search for Artist ID, if can not find search by name in
LastFM API.

Good to go for a merge…

Need to change to default template? :)

data/interfaces/lossless/album.html

@@ -26,7 +26,7 @@
 	<div class="table_wrapper">
 		<div id="albumheader" class="clearfix">	
 			<div id="albumImg">
-				<img src="http://ec1.images-amazon.com/images/P/${album['AlbumASIN']}.01.LZZZZZZZ.jpg" height="200" width="200" alt="albumart" class="albumArt">
+				<img src="http://ec1.images-amazon.com/images/P/${album['AlbumASIN']}.01.LZZZZZZZ.jpg" height="200" width="200" alt="albumart" class="albumArt" rel="dialog">
 			</div>
 			
 			<h1><a href="http://musicbrainz.org/release-group/${album['AlbumID']}">${album['AlbumTitle']}</a></h1>
@@ -129,16 +129,18 @@
 	<script src="js/libs/jquery.dataTables.min.js"></script>
 	<script>
 	$(document).ready(function()	{
-		getAlbumInfo("${album['ArtistName']}","${album['AlbumTitle']}","#albumheader .albumArt");
+		getAlbumInfo("${album['ArtistName']}","${album['AlbumTitle']}","#albumheader .albumArt",1);
 		initActions();
 		
-		$('#track_table').dataTable(
+		$('#track_table').dataTable({
-			{
+			"aaSorting": [],
-				"aaSorting": [],
+			"bFilter": false,
-				"bFilter": false,
+			"bInfo": false,
-				"bInfo": false,
+			"bPaginate": false
-				"bPaginate": false
-			});
 		});
+	});
+	$(window).load(function(){
+		initFancybox();
+	});
 	</script>
 </%def>

data/interfaces/lossless/artist.html

@@ -176,7 +176,7 @@
 	}
 	
 	$(document).ready(function() {		
-		getArtistInfo("${artist['ArtistName']}","#artistImg img",3);
+		getArtistInfo("${artist['ArtistName']}","#artistImg img",3,"${artist['ArtistID']}");
 		initActions();
 		initThisPage();
 	});

data/interfaces/lossless/base.html

@@ -76,13 +76,22 @@
 		</div>
 
 		<footer>
+			<div id="actions">
+				<small>
+				<a href="shutdown"><span class="ui-button-icon-primary ui-icon ui-icon-power"></span>Shutdown</a> |
+				<a href="restart"><span class="ui-button-icon-primary ui-icon ui-icon-power"></span>Restart</a> |
+				<a href="#" onclick="doAjaxCall('checkGithub',$(this))" data-success="Checking for update succesful" data-error="Error checking update"><span class="ui-icon ui-icon-refresh"></span>Check for new version</a>
+				</small>
+			</div>
+			<div id="donate">
+				<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=elmarkou%40gmail%2ecom&lc=NL&item_name=I%20Like%20to%20donate%20because%20of%20this%20awesome%20Headphones%20Template&no_note=0&currency_code=EUR&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHostedGuest" target="_blank"><img src="interfaces/lossless/images/icon_like.png" /><small> I like this template</small></a>
+			</div>
 			<div id="version">
 				Version: <em>${headphones.CURRENT_VERSION}</em>
 				%if version.HEADPHONES_VERSION != 'master':
 				(${version.HEADPHONES_VERSION})
 				%endif
-				<a href="#" onclick="doAjaxCall('checkGithub',$(this))" data-success="Checking for update succesful" data-error="Error checking update">Check for new version</a>
+			</div>			
-			</div>
 		</footer>
 		<a href="#main" id="toTop"><span>Back to top</span></a>
 	</div>

data/interfaces/lossless/css/data_table.css

@@ -108,8 +108,6 @@ table.display thead th {
 	background-color: white;
 	font-weight: bold;
 	font-size: 16px;
-	cursor: pointer;
-	* cursor: hand;
 }
 
 table.display tfoot th {
@@ -139,14 +137,20 @@ table.display td.center {
 
 .sorting_asc {
 	background: url('../images/sort_asc.png') no-repeat center right;
+	cursor: pointer;
+	* cursor: hand;
 }
 
 .sorting_desc {
 	background: url('../images/sort_desc.png') no-repeat center right;
+	cursor: pointer;
+	* cursor: hand;
 }
 
 .sorting {
 	background: url('../images/sort_both.png') no-repeat center right;
+	cursor: pointer;
+	* cursor: hand;
 }
 
 .sorting_asc_disabled {

data/interfaces/lossless/css/style.css

@@ -178,11 +178,30 @@ table th {
   background-image: -webkit-linear-gradient(#fafafa, #eaeaea) !important;
   filter: progid:dximagetransform.microsoft.gradient(startColorstr=#fafafa, endColorstr=#eaeaea) !important;
   -ms-filter: progid:dximagetransform.microsoft.gradient(startColorstr=#fafafa, endColorstr=#eaeaea) !important;
+  border-left: 1px solid #E0E0E0;
+  -moz-box-shadow: 1px 0 0 #fafafa;
+  -webkit-box-shadow: 1px 0 0 #fafafa;
+  box-shadow: 1px 0 0 #fafafa;
   text-shadow: 1px 1px 0 #FFFFFF ;
 }
 table th input[type="checkbox"] {
   vertical-align: middle;
 }
+table th:first-child {
+  border-left: 0;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+table th.sorting_desc,
+table th.sorting_asc {
+  background-image: -moz-linear-gradient(#fafbfd, #dce6ef) !important;
+  background-image: linear-gradient(#fafbfd, #dce6ef) !important;
+  background-image: -webkit-linear-gradient(#fafbfd, #dce6ef) !important;
+  filter: progid:dximagetransform.microsoft.gradient(startColorstr=#fafafa, endColorstr=#eaeaea) !important;
+  -ms-filter: progid:dximagetransform.microsoft.gradient(startColorstr=#fafafa, endColorstr=#eaeaea) !important;
+  color: #4183c4;
+}
 table td {
   vertical-align: top;
 }
@@ -468,8 +487,10 @@ header #logo {
 }
 footer {
   display: table;
-  margin: 20px auto;
+  margin: 60px auto 20px auto;
   width: 960px;
+  padding-top: 10px;
+  border-top: 1px solid #EEE;
 }
 #main {
   line-height: 24px;
@@ -1017,7 +1038,7 @@ div#artistheader h2 a {
 }
 #searchresults_table th#artistname {
   min-width: 325px;
-  text-align: center;
+  text-align: left;
 }
 #searchresults_table #artistImg {
   background: url("../images/loader_black.gif") no-repeat scroll center center #ffffff;
@@ -1039,6 +1060,9 @@ div#artistheader h2 a {
   text-align: left;
   vertical-align: middle;
 }
+#searchresults_table td#add {
+  vertical-align: middle;
+}
 #searchresults_table td#score .bar {
   width: 100px;
   margin: 0 auto;
@@ -1088,13 +1112,25 @@ div#artistheader h2 a {
   font-size: 10px;
   position: relative;
   z-index: 999;
-  margin: 20px auto;
+  margin: 0px auto;
   text-align: center;
-  width: 390px;
+  width: 400px;
 }
 #donate {
-  margin: 20px auto;
+  float: left;
-  text-align: center;
+  text-align: left;
+}
+#actions {
+  float: right;
+  text-align: right;
+  margin-right: 10px;
+  margin-top: -5px;
+  color: #cccccc;
+}
+#actions .ui-icon {
+  position: relative;
+  top: 4px;
+  background-image: url("../images/ui-icons_70b2e1_256x240.png");
 }
 #toTop {
   background: url("../images/toTop.gif") no-repeat scroll 10px center #f7f7f7;
@@ -1115,7 +1151,6 @@ div#artistheader h2 a {
 }
 .cloudtag {
   font-size: 16px;
-  padding-top: 30px;
 }
 .cloudtag #cloud {
   line-height: 1.5em;
@@ -1167,7 +1202,8 @@ div#artistheader h2 a {
   font-weight: 900;
 }
 .cloudtag #cloud li {
-  display: inline;
+  display: inline-block;
+  margin: 5px 10px;
 }
 .floatright {
   float: right;

data/interfaces/lossless/css/style.less

@@ -104,8 +104,15 @@ table {
     border-spacing: 0;
     th {
     	.gradient(#FAFAFA, #EAEAEA);
+    	border-left: 1px solid #E0E0E0;
+    	.shadow(1px 0 0 #FAFAFA);
     	text-shadow:1px 1px 0 #FFFFFF ;
     	input[type="checkbox"]{ vertical-align: middle;}
+    	&:first-child { border-left:0;.shadow(none)}
+    	&.sorting_desc,&.sorting_asc  {
+    		.gradient(#FAFBFD, #DCE6EF);
+    		color: @link-color;
+    	}
     }
     td {
     	vertical-align: top;
@@ -332,8 +339,10 @@ header {
 }
 footer {
     display: table;
-    margin: 20px auto;
+    margin: 60px auto 20px auto;
     width: 960px;
+    padding-top: 10px;
+    border-top: 1px solid #EEE;
 }
 #main {
     line-height: 24px;
@@ -819,7 +828,7 @@ div#artistheader {
     }
     th#artistname {
         min-width: 325px;
-        text-align: center;
+        text-align: left;
     }
     #artistImg {
     	background: url("../images/loader_black.gif") no-repeat scroll center center #FFFFFF;
@@ -841,6 +850,7 @@ div#artistheader {
         text-align: left;
         vertical-align: middle;
     }
+    td#add {vertical-align: middle;}
     td#score {
     	.bar {
     		width: 100px;
@@ -887,13 +897,25 @@ div#artistheader {
     font-size: 10px;
     position: relative;
     z-index: 999;
-    margin: 20px auto;
+    margin: 0px auto;
     text-align: center;
-    width: 390px;
+    width: 400px;
 }
 #donate {
-    margin: 20px auto;
+    float: left;
-    text-align: center;
+    text-align: left;
+}
+#actions {
+	float: right;
+	text-align: right;
+	margin-right: 10px;
+	margin-top: -5px;
+	color: @border-color;
+	.ui-icon {
+		position: relative;
+		top: 4px;
+		background-image: url("../images/ui-icons_70b2e1_256x240.png");
+	}
 }
 #toTop {
     background: url("../images/toTop.gif") no-repeat scroll 10px center #f7f7f7;
@@ -916,7 +938,6 @@ div#artistheader {
 }
 .cloudtag {
     font-size: 16px;
-    padding-top: 30px;
     #cloud {
         line-height: 1.5em;
         margin: 0;
@@ -965,7 +986,10 @@ div#artistheader {
                 font-weight: 900;
             }
         }
-        li { display: inline; }
+        li { 
+        	display: inline-block;
+        	margin: 5px 10px;
+         }
     }
 }
 

data/interfaces/lossless/index.html

@@ -1,4 +1,4 @@
-lossless<%inherit file="base.html"/>
+<%inherit file="base.html"/>
 <%!
 	from headphones import helpers
 %>
@@ -54,7 +54,7 @@ lossless<%inherit file="base.html"/>
 			%>
 			<tr class="grade${grade}">
 				<td id="albumart"><div id="artistImg"><img class="albumArt" src="http://ec1.images-amazon.com/images/P/${artist['AlbumID']}.01.MZZZZZZZ.jpg" height="50" width="50"></div></td>
-				<td id="name"><span title="${artist['ArtistSortName']}"></span><a href="artistPage?ArtistID=${artist['ArtistID']}">${artist['ArtistName']}</a></td>
+				<td id="name"><span title="${artist['ArtistSortName']}"></span><a href="artistPage?ArtistID=${artist['ArtistID']}" title="${artist['ArtistID']}">${artist['ArtistName']}</a></td>
 				<td id="status">${artist['Status']}</td>
 				<td id="album"><span title="${releasedate}"></span><a href="albumPage?AlbumID=${artist['AlbumID']}">${albumdisplay}</a></td>
 				<td id="have"><span title="${percent}"></span><div class="progress-container"><div style="width:${percent}%"><div class="havetracks">${havetracks}/${totaltracks}</div></div></div></td>
@@ -73,12 +73,16 @@ lossless<%inherit file="base.html"/>
 	<script>
 	$(document).ready(function() {
 		$("table#artist_table tr td#name").each(function(){	
+			var id = $(this).children('a').attr('title');
 			var artist = $(this).children('a').text();
 			var image = $(this).parent().find("td#albumart img");
-			getArtistInfo(artist,image,1);
+			getArtistInfo(artist,image,1,id);
 		});
 		
 		$('#artist_table').dataTable({
+			"aoColumnDefs": [
+			      { 'bSortable': false, 'aTargets': [ 0 ] }
+			],
 			"aoColumns": [
 				null,
 				{ "sType": "title-string"},
@@ -92,6 +96,7 @@ lossless<%inherit file="base.html"/>
 			"iDisplayLength": 50,
 			"sPaginationType": "full_numbers"				
 		});
+		resetFilters("artist or album");
 	});
 	$(window).load(function(){
 		initFancybox();

data/interfaces/lossless/js/script.js

@@ -1,50 +1,108 @@
-function getArtistInfo(name,imgElem,size) {
+function getArtistInfo(name,imgElem,size,artistID) {
 	var apikey = "690e1ed3bc00bc91804cd8f7fe5ed6d4";
-	var url = "http://ws.audioscrobbler.com/2.0/?method=artist.getInfo&artist="+ name +"&api_key="+ apikey+"&format=json&callback=?";
+	
-	// Get Data
+	// Get Data by Artist ID 	
-	$.getJSON(url, function(data) {
+	$.ajax({
-		var artist = data.artist.name;
+		url: "http://ws.audioscrobbler.com/2.0/?method=artist.getInfo&mbid="+ artistID +"&api_key="+ apikey+"&format=json",
-		var artistBio = data.artist.bio.summary;
+		dataType: "jsonp",
-		var artistBio = artistBio;		
+		cache: true,
-		var imageUrl = data.artist.image[size]['#text'];
+		success: function(data){
-		if (data.artist === undefined || imageUrl == "")  {
+			if ( data.artist !== undefined ) {
-			imageUrl = "interfaces/lossless/images/no-cover-artist.png";
+				var imageUrl = data.artist.image[size]['#text'];
-		} else {
+			}
-			imageUrl = data.artist.image[size]['#text'];						
+			if (data.error) {
-		// If Last.fm don't provide a cover then use standard
+				getArtistName();
-		}		
+			} else {
-		var imageLarge = data.artist.image[4]['#text'];	
+				if ( data.artist === undefined || imageUrl == "" || imageUrl == undefined ) {
-		var image = imgElem;
+					var imageLarge = "#";
-		var bio = $('#artistBio');	
+					var imageUrl = "interfaces/lossless/images/no-cover-artist.png";
-        $(image).attr("src",imageUrl).removeAttr("width").removeAttr("height");
+				} else {
-        if ( bio.length > 0 ) $(bio).append(artistBio);
+					var artist = data.artist.mbid;
-        $(image).wrap('<a href="'+ imageLarge +'" rel="dialog" title="' + artist + '"></a>');
+					var artistBio = data.artist.bio.summary;
+					var imageLarge = data.artist.image[4]['#text'];
+					var imageUrl = data.artist.image[size]['#text'];
+				}		
+				var artistBio = artistBio;				
+				var image = imgElem;
+				var bio = $('#artistBio');	
+				$(image).attr("src",imageUrl).removeAttr("width").removeAttr("height").hide().fadeIn();
+				if ( bio.length > 0 ) $(bio).append(artistBio);
+				$(image).wrap('<a href="'+ imageLarge +'" rel="dialog" title="' + name + '"></a>');
+			}
+		}				
 	});
+	// If not found get by Name
+	function getArtistName() {
+		$.ajax({
+			url: "http://ws.audioscrobbler.com/2.0/?method=artist.getInfo&artist="+ name +"&api_key="+ apikey+"&format=json",
+			dataType: "jsonp",
+			success: function(data){
+				if ( data.artist !== undefined ) {
+					var imageUrl = data.artist.image[size]['#text'];
+				}
+				if ( data.artist === undefined || imageUrl == "" ) {
+					var imageLarge = "#";
+					var imageUrl = "interfaces/lossless/images/no-cover-artist.png";
+				} else {
+					var artist = data.artist.name;
+					var artistBio = data.artist.bio.summary;
+					var imageLarge = data.artist.image[4]['#text'];
+					var imageUrl = data.artist.image[size]['#text'];
+				}		
+				var artistBio = artistBio;				
+				var image = imgElem;
+				var bio = $('#artistBio');	
+				$(image).attr("src",imageUrl).removeAttr("width").removeAttr("height").hide().fadeIn();
+				if ( bio.length > 0 ) $(bio).append(artistBio);
+				$(image).wrap('<a href="'+ imageLarge +'" rel="dialog" title="' + artist + '"></a>');
+			}				
+		});
+	}
 }
 
-function getAlbumInfo(name, album, elem) {
+function getAlbumInfo(name, album, elem,size) {
 	var apikey = "690e1ed3bc00bc91804cd8f7fe5ed6d4";	
-	var url = "http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=" + apikey + "&artist="+ name +"&album="+ album +"&format=json&callback=?";
 	var dimensions = getOriginalWidthOfImg(this);
 	var cover = $(elem);
+	
 	if ( dimensions <= 1) {
 		// Get Data
-		$.getJSON(url, function(data) {
+		$.ajax({
-			if (data.album === undefined)  {
+			url: "http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=" + apikey + "&artist="+ name +"&album="+ album +"&format=json&callback=?",
-				imageUrl = "interfaces/lossless/images/no-cover-art.png";
+			dataType: "jsonp",
-			} else {
+			success: function(data){
-				imageUrl = data.album.image[3]['#text'];						
+				if ( data.artist !== undefined ) {
-			// If Last.fm don't provide a cover then use standard
+					var imageUrl = data.artist.image[size]['#text'];
+				}
+				if (data.album === undefined || imageUrl == "")  {
+					if ( elem.width() == 50 ) {
+						var imageUrl = "interfaces/lossless/images/no-cover-artist.png";
+					} else {
+						var imageUrl = "interfaces/lossless/images/no-cover-art.png";
+					}
+				} else {
+					var imageUrl = data.album.image[size]['#text'];		
+					var imageLarge = data.album.image[3]['#text'];			
+				}
+				$(cover).error(function(){
+					if ( elem.width() == 50 ) {
+						var imageUrl = "interfaces/lossless/images/no-cover-artist.png";
+					} else {
+						var imageUrl = "interfaces/lossless/images/no-cover-art.png";
+					}
+					$(elem).css("background", "url("+ imageUrl+") center top no-repeat");
+				});
+				if ( imageUrl == "") {
+					if ( elem.width() == 50 ) {
+						var imageUrl = "interfaces/lossless/images/no-cover-artist.png";
+					} else {
+						var imageUrl = "interfaces/lossless/images/no-cover-art.png";
+					}
+					$(elem).css("background", "url("+ imageUrl+") center top no-repeat");
+				} 
+				$(elem).css("background", "url("+ imageUrl+") center top no-repeat");
+				$(elem).wrap('<a href="'+ imageLarge +'" rel="dialog" title="' + name + '"></a>');
 			}
-			$(cover).error(function(){
-				imageUrl = "interfaces/lossless/images/no-cover-art.png";
-				$('#albumImg img').css("background", "url("+ imageUrl+") center top no-repeat");
-			});
-			if ( imageUrl == "") {
-				imageUrl = "interfaces/lossless/images/no-cover-art.png";
-				$('#albumImg img').css("background", "url("+ imageUrl+") center top no-repeat");
-			} 
-			$('#albumImg img').css("background", "url("+ imageUrl+") center top no-repeat");
 		});
 	}
 }

data/interfaces/lossless/searchresults.html

@@ -1,4 +1,4 @@
-lossless<%inherit file="base.html" />
+<%inherit file="base.html" />
 
 <%def name="body()">
 	<div class="table_wrapper">
@@ -8,10 +8,10 @@ lossless<%inherit file="base.html" />
 	<table class="display" id="searchresults_table">
 		<thead>
 			<tr>
-			%if type == 'album':
-				<th id="albumname">Album Name</th>
-			%endif
 				<th id="albumart"></th>
+				%if type == 'album':
+					<th id="albumname">Album Name</th>
+				%endif
 				<th id="artistname">Artist Name</th>
 				<th id="score">Score</th>
 				<th id="add"></th>
@@ -26,12 +26,12 @@ lossless<%inherit file="base.html" />
 					else:
 						grade = 'Z'
 				%>
-				<tr class="grade${grade}">
+				<tr class="grade${grade}">			
+					<td id="albumart"><div id="artistImg"><img class="albumArt" src="http://ec1.images-amazon.com/images/P/${result['uniquename']}.01.MZZZZZZZ.jpg" height="50" width="50"></div></td>
 				%if type == 'album':
 					<td id="albumname"><a href="${result['albumurl']}">${result['title']}</a></td>
 				%endif
-					<td id="albumart"><div id="artistImg"><img class="albumArt" src="http://ec1.images-amazon.com/images/P/${result['uniquename']}.01.MZZZZZZZ.jpg" height="50" width="50"></div></td>
+					<td id="artistname"><a href="${result['url']}" title="${result['uniquename']}">${result['uniquename']}</a></td>
-					<td id="artistname"><a href="${result['url']}">${result['uniquename']}</a></td>
 					<td id="score"><div class="bar"><div class="score" style="width: ${result['score']}px">${result['score']}</div></div></td>
 				%if type == 'album':	
 					<td id="add"><a href="#" onclick="doAjaxCall('addReleaseById?rid=${result['albumid']}',$(this));" data-success="Album '${result['title']}' added"><span class="ui-icon ui-icon-plus"></span> Add this album</a></td>
@@ -51,16 +51,29 @@ lossless<%inherit file="base.html" />
 </%def>
 
 <%def name="javascriptIncludes()">
+
 	<script src="js/libs/jquery.dataTables.min.js"></script>
+	
 	<script>
 	$(document).ready(function(){
 		$("table#searchresults_table tr td#artistname").each(function(){	
-			var artist = $(this).children('a').text();
+			var artist = $(this).children('a').attr('title');
 			var image = $(this).parent().find("td#albumart img");
-			getArtistInfo(artist,image,1);
+			var album = $(this).prev().text();
+			var getId = $(this).children('a').attr('href');
+			var id = getId.substr(30);
+			%if type == 'artist':			
+				getArtistInfo(artist,image,1,id);
+			%endif
+			%if type == 'album':
+				getAlbumInfo(artist,album,image,1);				
+			%endif
 		});
 		$('#searchresults_table').dataTable(
 			{
+				"aoColumnDefs": [
+			          { 'bSortable': false, 'aTargets': [ 0,3 ] }
+				],	
 				"oLanguage": {
 					"sLengthMenu":"Show _MENU_ results per page",
 					"sEmptyTable": "No results",
@@ -71,8 +84,8 @@ lossless<%inherit file="base.html" />
 				"iDisplayLength": 25,
 				"sPaginationType": "full_numbers",
 				"aaSorting": []
-
 			});
+			resetFilters("album");
 	});
 	$(window).load(function(){
 		initFancybox();