Album Search Results Changes

- mb findRelease
get additional info incl Date, Formats, Tracks, Rgid etc, pass to
searchresults
added optional artist to findrelease, if searching by album can now
enter album:artist in the search bar, went for this for now as I didn’t
want to change the design too much but maybe in the future we could
have 2 boxes, artist album and then there’s no need for the dropdown
artist, album

- base
position at search box and persist selected option (uses local storage)
when refreshing, useful if entering multiple albums
increased the search box size a little

- searchresults
album results - new fields from mb, fall back to cover art archive rgid
url if last.fm not found (should get more results), musicbrainz album
icon link, pass mb rgid to addReleaseById to redirect to album page
artist results - musicbrainz artist icon

- importer
addreleaseById - added rgid param to create the album record upfront
with status Loading if from searchresults

- webserve
redirect to album page using rgid from searchresults

- album
spinner while album is loading

data/interfaces/default/album.html

@@ -89,9 +89,15 @@
 			<div id="albumImg">
 				<img height="200" alt="" class="albumArt" src="artwork/album/${album['AlbumID']}">
 			</div>
-			
-			<h1><a href="http://musicbrainz.org/release-group/${album['AlbumID']}">${album['AlbumTitle']}</a></h1>
-			<h2><a href="http://musicbrainz.org/artist/${album['ArtistID']}">${album['ArtistName']}</a></h2>
+
+            <h1 id="albumname">
+                <a href="http://musicbrainz.org/release-group/${album['AlbumID']}" id="albumnamelink">${album['AlbumTitle']}</a>
+            </h1>
+
+            <h2 id="artistname">
+                <a href="http://musicbrainz.org/artist/${album['ArtistID']}" id="artistnamelink">${album['ArtistName']}</a>
+            </h2>
+
 			<%
 				totalduration = myDB.action("SELECT SUM(TrackDuration) FROM tracks WHERE AlbumID=?", [album['AlbumID']]).fetchone()[0]
 				totaltracks = len(myDB.select("SELECT TrackTitle from tracks WHERE AlbumID=?", [album['AlbumID']]))
@@ -275,9 +281,58 @@
 		feedback.fadeIn();
 	}
 
+    var loadingMessage = false;
+    var spinner_active = false;
+    var loadingtext_active = false;
+    var refreshInterval;
+    var wasLoading = false;
+    var x = 0;
+
+    function checkAlbumStatus() {
+        $.getJSON("getAlbumjson?AlbumID=${album['AlbumID']}", function(data) {
+            if (data['Status'] == "Loading"){
+                wasLoading = true;
+                $('#albumnamelink').text(data["AlbumTitle"]);
+                $('#artistnamelink').text(data["ArtistName"]);
+                if (loadingMessage == false){
+                    $("#ajaxMsg").after( "<div id='ajaxMsg2' class='ajaxMsg'></div>" );
+                    showArtistMsg("Getting album information");
+                    loadingMessage = true;
+                }
+                if (spinner_active == false){
+                    $('#albumname').prepend('<i class="fa fa-refresh fa-spin" id="albumnamespinner"></i>')
+                    spinner_active = true;
+                }
+                if (loadingtext_active == false){
+                    $('#albumname').append('<h3 id="loadingtext"><i>(Album information is currently being loaded)</i></h3>')
+                    loadingtext_active = true;
+                }
+            }
+            else{
+                if (++x === 5) {
+                    clearInterval(refreshInterval);
+                }
+                var sts = $("#artistname").text();
+                if (wasLoading == true || sts == "Loading"){
+                    location.reload();
+                $('#albumnamespinner').remove()
+                $('#loadingtext').remove()
+                $('#ajaxMsg2').remove()
+                spinner_active = false
+                loadingtext_active = false
+                loadingMessage = false
+                }
+            }
+        });
+    }
+
 	$(document).ready(function()	{
 		getAlbumInfo();
 		initThisPage();
+        checkAlbumStatus();
+        refreshInterval = setInterval(function(){
+            checkAlbumStatus();
+        }, 3000);
 	});
 
 	</script>

data/interfaces/default/base.html

@@ -58,7 +58,7 @@
 				<form action="search" method="get">
 					<input type="text" value="" placeholder="Search" onfocus="if(this.value==this.defaultValue) this.value='';" name="name" />
 					<i class='fa fa-search mini-icon'></i>
-					<select name="type">
+					<select name="type" id="search_type">
 						<option value="artist">Artist</option>
 						<option value="album">Album</option>
 					</select>
@@ -115,3 +115,25 @@
 <%def name="javascriptIncludes()"></%def>
 <%def name="headIncludes()"></%def>
 <%def name="headerIncludes()"></%def>
+
+<!--persist search type using local storage-->
+<script type="text/javascript">
+
+    $(document).ready(function() {
+        $('form:first *:input[type!=hidden]:first').focus();
+        try{
+            var type = window.localStorage.getItem('search_type');
+            $("#search_type").val(type);
+        } catch(e) {
+        }
+    });
+
+    $('select[id=search_type]').change(function() {
+        var type = $(this).val()
+        try{
+            window.localStorage.setItem('search_type', type);
+        } catch(e) {
+        }
+    });
+
+</script>

data/interfaces/default/css/style.css

@@ -758,7 +758,7 @@ div#searchbar input[type=text] {
   line-height: normal;
   margin-right: 5px;
   padding: 4px 5px 4px 25px;
-  width: 150px;
+  width: 200px;
 }
 div#searchbar .mini-icon {
   color: #999;
@@ -1126,13 +1126,34 @@ div#artistheader h2 a {
   padding: 2px 10px;
 }
 #searchresults_table th#albumname {
-  min-width: 225px;
+  min-width: 250px;
   text-align: left;
+  font-size: 14px;
 }
 #searchresults_table th#artistname {
   min-width: 325px;
   text-align: left;
 }
+#searchresults_table th#artistnamesmall {
+    min-width: 125px;
+    text-align: left;
+    font-size: 14px;
+}
+#searchresults_table th#reldate {
+    min-width: 80px;
+    text-align: center;
+    font-size: 14px;
+}
+#searchresults_table th#format {
+    min-width: 50px;
+    text-align: left;
+    font-size: 14px;
+}
+#searchresults_table th#tracks {
+    min-width: 50px;
+    text-align: left;
+    font-size: 14px;
+}
 #searchresults_table #artistImg {
   background: url("../images/loader_black.gif") no-repeat scroll center center #ffffff;
   border: 3px solid #FFFFFF;
@@ -1144,15 +1165,40 @@ div#artistheader h2 a {
   width: 50px;
 }
 #searchresults_table td#albumname {
-  min-width: 200px;
+  min-width: 250px;
   text-align: left;
   vertical-align: middle;
+  font-size: 14px;
 }
 #searchresults_table td#artistname {
   min-width: 300px;
   text-align: left;
   vertical-align: middle;
 }
+#searchresults_table td#artistnamesmall {
+    min-width: 100px;
+    text-align: left;
+    vertical-align: middle;
+    font-size: 14px;
+}
+#searchresults_table td#reldate {
+    min-width: 80px;
+    text-align: center;
+    vertical-align: middle;
+    font-size: 14px;
+}
+#searchresults_table td#format {
+    min-width: 50px;
+    text-align: left;
+    vertical-align: middle;
+    font-size: 14px;
+}
+#searchresults_table td#tracks {
+    min-width: 50px;
+    text-align: left;
+    vertical-align: middle;
+    font-size: 12px;
+}
 #searchresults_table td#add {
   vertical-align: middle;
 }
@@ -1416,6 +1462,11 @@ div#artistheader h3 span {
   min-width: 75px;
   text-align: center;
 }
+#searchresults_table th#scoresmall {
+    min-width: 50px;
+    text-align: center;
+    font-size: 14px;
+}
 #track_table td#bitrate,
 #track_table td#format {
   font-size: 12px;

data/interfaces/default/searchresults.html

@@ -11,37 +11,51 @@
 				<th id="albumart"></th>
 				%if type == 'album':
 					<th id="albumname">Album Name</th>
+                    <th id="artistnamesmall">Artist Name</th>
+                    <th id="format">Format</th>
+                    <th id="tracks">Tracks</th>
+                    <th id="reldate">Date</th>
+                    <th id="scoresmall">Score</th>
+                %else:
+                    <th id="artistname">Artist Name</th>
+                    <th id="score">Score</th>
 				%endif
-				<th id="artistname">Artist Name</th>
-				<th id="score">Score</th>
-				<th id="add"></th>
+                <th id="mb"></th>
 			</tr>
 		</thead>
 		<tbody>
 			%if searchresults:
-				%for result in searchresults:
-				<%
-					if result['score'] == 100:
-						grade = 'A'
-					else:
-						grade = 'Z'
-				%>
+                %for result in searchresults:
+                <%
+                    if result['score'] == 100:
+                        grade = 'A'
+                    else:
+                        grade = 'Z'
+
+                    if type == 'album':
+                        albuminfo = 'Type: ' + result['rgtype'] + ', Country: ' + result['country']
+                        caa_group_url = "http://coverartarchive.org/release-group/%s/front-250.jpg" %result['rgid']
+                %>
 				<tr class="grade${grade}">
 				%if type == 'album':
-					<td id="albumart"><div id="artistImg"><img title="${result['albumid']}" class="albumArt" height="50" width="50"></div></td>
+					<td id="albumart" style=" text-align: center; vertical-align: middle;"><div id="artistImg"><img title="${result['albumid']}" class="albumArt" height="50" width="50" onerror="this.src='${caa_group_url}'"></div></td>
 				%else:
 					<td id="albumart"><div id="artistImg"><img title="${result['id']}" class="albumArt" height="50" width="50"></div></td>
 				%endif
 				%if type == 'album':
-					<td id="albumname"><a href="${result['albumurl']}">${result['title']}</a></td>
-				%endif
-					<td id="artistname"><a href="${result['url']}" title="${result['uniquename']}">${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="addReleaseById?rid=${result['albumid']}"><i class="fa fa-plus"></i> Add this album</a></td>
-				%else:
-					<td id="add"><a href="addArtist?artistid=${result['id']}"><i class="fa fa-plus"></i> Add this artist</a></td>
+					<td id="albumname"><a href="addReleaseById?rid=${result['albumid']}&rgid=${result['rgid']}" title="${albuminfo}">${result['title']}</a></td>
+                    <td id="artistnamesmall"><a href="addArtist?artistid=${result['id']}" title="${result['uniquename']}">${result['uniquename']}</a></td>
+                    <td id="format">${result['formats']}</td>
+                    <td id="tracks">${result['tracks']}</td>
+                    <td id="reldate">${result['date']}</td>
+                    <td id="score"><a href="${result['albumurl']} "title="View on MusicBrainz"><div class="bar"><div class="score" style="width: ${result['score']}px">${result['score']}</div></div></a></td>
+                    <td id="musicbrainz" style=" text-align: center; line-height: 0; vertical-align: middle;"><a href="${result['albumurl']}"><img src="interfaces/default/images/MusicBrainz_Album_Icon.png" title="View on MusicBrainz" height="20" width="20"></a></td>
+                %else:
+                    <td id="artistname"><a href="addArtist?artistid=${result['id']}" title="${result['uniquename']}">${result['uniquename']}</a></td>
+                    <td id="score"><a href="${result['url']} "title="View on MusicBrainz"><div class="bar"><div class="score" style="width: ${result['score']}px">${result['score']}</div></div></a></td>
+                    <td id="musicbrainz" style=" text-align: center; line-height: 0; vertical-align: middle;"><a href="${result['url']}"><img src="interfaces/default/images/MusicBrainz_Artist_Icon.png" title="View on MusicBrainz" height="20" width="20"></a></td>
 				%endif
+
 				</tr>
 				%endfor
 			%endif
@@ -75,7 +89,7 @@
 			{
 				"bDestroy": true,
 				"aoColumnDefs": [
-			          { 'bSortable': false, 'aTargets': [ 0,3 ] }
+			          { 'bSortable': false, 'aTargets': [ 0 ] }
 				],	
 				"oLanguage": {
 					"sLengthMenu":"Show _MENU_ results per page",
@@ -91,7 +105,7 @@
 			resetFilters("album");
 	}
 	$(document).ready(function(){
-			initThisPage();		
+			initThisPage();
 	});
 	$(window).load(function(){
 		initFancybox();