mirror of
https://github.com/rembo10/headphones.git
synced 2026-03-21 12:19:27 +00:00
241 lines
13 KiB
HTML
241 lines
13 KiB
HTML
<%inherit file="base.html" />
|
|
|
|
<%def name="body()">
|
|
<div class="table_wrapper">
|
|
<div id="paddingheader">
|
|
<h1 class="clearfix"><i class="fa fa-search"></i> Search Result</h1>
|
|
</div>
|
|
<table class="display" id="searchresults_table">
|
|
<thead>
|
|
<tr>
|
|
<th class="column-albumart"></th> <%-- Changed ID to class --%>
|
|
%if type == 'album':
|
|
<th class="column-albumname">Album Name</th>
|
|
<th class="column-artistname-small">Artist Name</th>
|
|
<th class="column-format">Format</th>
|
|
<th class="column-tracks">Tracks</th>
|
|
<th class="column-reldate">Date</th>
|
|
<th class="column-score-small">Score</th>
|
|
<th class="column-mbrelid" style="display:none;"</th> <%-- Move display:none to CSS if always hidden --%>
|
|
%elif type == 'artist':
|
|
<th class="column-artistname">Artist Name</th>
|
|
<th class="column-score">Score</th>
|
|
%else:
|
|
<th class="column-seriesname">Series Name</th>
|
|
<th class="column-type">Type</th>
|
|
<th class="column-score">Score</th>
|
|
%endif
|
|
<th class="column-mb"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
%if searchresults:
|
|
%for result in searchresults:
|
|
<%
|
|
if result['score'] == 100:
|
|
grade = 'A'
|
|
else:
|
|
grade = 'Z'
|
|
|
|
if type == 'album':
|
|
albuminfo = 'Type: ' + result['rgtype'] + ', Country: ' + result['country']
|
|
# Constructing CAA URL for fallback, will be used as data-src for unveiling
|
|
caa_group_url = "http://coverartarchive.org/release-group/%s/front-250.jpg" %result['rgid']
|
|
# MusicBrainz album art URL (assuming it's a direct link to the image)
|
|
# If result['image'] provides a direct image URL, use it. Otherwise, rely on CAA or generic.
|
|
# For this modernization, let's assume getAlbumArtURL is available or build a generic one.
|
|
# For now, will prioritize getImageLinks.
|
|
%>
|
|
<tr class="grade${grade}">
|
|
%if type == 'album':
|
|
<td class="column-albumart album-art-cell"> <%-- Changed ID to class --%>
|
|
<div class="artwork-container">
|
|
<%-- Using data-src for lazy loading. onerror will handle the tryCCA fallback. --%>
|
|
<img title="${result['albumid']}" class="albumArt search-result-albumart"
|
|
data-src="" <%-- Will be populated by getImageLinks --%>
|
|
onerror="tryCCA(this, '${caa_group_url}', 'album')"
|
|
alt="Cover art for ${result['title']}" loading="lazy">
|
|
</div>
|
|
</td>
|
|
%elif type == 'artist':
|
|
<td class="column-albumart artist-art-cell"> <%-- Changed ID to class --%>
|
|
<div class="artwork-container">
|
|
<%-- Assuming artists might also have an image, or it will be a generic icon. --%>
|
|
<img title="${result['id']}" class="albumArt search-result-artistart"
|
|
data-src="" <%-- Will be populated by getImageLinks --%>
|
|
onerror="this.onerror=null;this.src='interfaces/default/images/no-cover-art.png';"
|
|
alt="Image for ${result['uniquename']}" loading="lazy">
|
|
</div>
|
|
</td>
|
|
%else:
|
|
<td class="column-albumart series-art-cell"></td> <%-- No artwork for series --%>
|
|
%endif
|
|
%if type == 'album':
|
|
<td class="column-albumname"><a href="addReleaseById?rid=${result['albumid']}&rgid=${result['rgid']}" title="${albuminfo}">${result['title']}</a></td>
|
|
<td class="column-artistname-small"><a href="addArtist?artistid=${result['id']}" title="${result['uniquename']}">${result['uniquename']}</a></td>
|
|
<td class="column-format">${result['formats']}</td>
|
|
<td class="column-tracks">${result['tracks']}</td>
|
|
<td class="column-reldate">${result['date']}</td>
|
|
<td class="column-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 class="column-musicbrainz musicbrainz-link-cell"><a href="${result['albumurl']}" target="_blank" rel="noopener noreferrer"><img src="interfaces/default/images/MusicBrainz_Album_Icon.png" title="View on MusicBrainz" height="20" width="20" alt="MusicBrainz Link"></a></td>
|
|
<td class="column-mbrelid" style="display:none;">${result['albumid']}</td> <%-- Move display:none to CSS if always hidden --%>
|
|
%elif type == 'artist':
|
|
<td class="column-artistname"><a href="addArtist?artistid=${result['id']}" title="${result['uniquename']}">${result['uniquename']}</a></td>
|
|
<td class="column-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 class="column-musicbrainz musicbrainz-link-cell"><a href="${result['url']}" target="_blank" rel="noopener noreferrer"><img src="interfaces/default/images/MusicBrainz_Artist_Icon.png" title="View on MusicBrainz" height="20" width="20" alt="MusicBrainz Link"></a></td>
|
|
%else:
|
|
<td class="column-seriesname"><a href="addSeries?seriesid=${result['id']}" title="${result['uniquename']}">${result['uniquename']}</a></td>
|
|
<td class="column-type">${result['type']}</td>
|
|
<td class="column-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 class="column-musicbrainz musicbrainz-link-cell"><a href="${result['url']}" target="_blank" rel="noopener noreferrer"><img src="interfaces/default/images/MusicBrainz_Artist_Icon.png" title="View on MusicBrainz" height="20" width="20" alt="MusicBrainz Link"></a></td>
|
|
%endif
|
|
</tr>
|
|
%endfor
|
|
%endif
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</%def>
|
|
|
|
<%def name="headIncludes()">
|
|
${parent.headIncludes()} <%-- Ensure parent head includes are kept --%>
|
|
<link rel="stylesheet" href="interfaces/default/css/data_table.css">
|
|
<style>
|
|
/* Basic CSS for album art thumbnail, consistent with other pages */
|
|
.search-result-albumart, .search-result-artistart {
|
|
height: 50px;
|
|
width: 50px;
|
|
object-fit: cover; /* Ensures image covers the area without distortion */
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* MusicBrainz icon styling */
|
|
.musicbrainz-link-cell img {
|
|
height: 20px;
|
|
width: 20px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Score bar styling (if not already in data_table.css) */
|
|
.bar {
|
|
width: 100px; /* Or a fixed width */
|
|
background-color: #eee;
|
|
border: 1px solid #ccc;
|
|
height: 18px; /* Adjust as needed */
|
|
line-height: 18px;
|
|
text-align: right;
|
|
border-radius: 3px;
|
|
overflow: hidden; /* Hide overflow if score > 100px */
|
|
}
|
|
.score {
|
|
height: 100%;
|
|
background-color: #5cb85c; /* Green for score */
|
|
color: #fff;
|
|
padding-right: 5px;
|
|
font-size: 0.8em;
|
|
box-sizing: border-box; /* Include padding in width calculation */
|
|
}
|
|
</style>
|
|
</%def>
|
|
|
|
<%def name="javascriptIncludes()">
|
|
${parent.javascriptIncludes()} <%-- Ensure parent javascript includes are kept --%>
|
|
<script src="js/libs/jquery.unveil.min.js"></script>
|
|
<script src="js/libs/jquery.dataTables.min.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
// Global function to try Cover Art Archive or generic fallback
|
|
function tryCCA(element, url, type) {
|
|
element.onerror = function() {
|
|
element.onerror = null; // Prevent infinite loops
|
|
element.src = "interfaces/default/images/no-cover-art.png"; // Fallback generic image
|
|
if (type === 'artist') {
|
|
// Specific fallback for artists if different
|
|
// element.src = "interfaces/default/images/no-artist-art.png";
|
|
}
|
|
};
|
|
if (url) {
|
|
element.src = url; // Try the provided URL (e.g., CAA)
|
|
} else {
|
|
element.src = "interfaces/default/images/no-cover-art.png"; // Fallback if no specific URL provided
|
|
}
|
|
}
|
|
|
|
// Encapsulate page-specific logic
|
|
var SearchResultsPage = SearchResultsPage || {};
|
|
|
|
SearchResultsPage.initDataTable = function() {
|
|
$('#searchresults_table').dataTable({
|
|
"bDestroy": true,
|
|
"aoColumnDefs": [
|
|
{ 'bSortable': false, 'aTargets': [ 0, 7 ] } // Disable sorting for albumart (0) and MusicBrainz icon (7) columns
|
|
],
|
|
"oLanguage": {
|
|
"sLengthMenu":"Show _MENU_ results per page",
|
|
"sEmptyTable": "No results",
|
|
"sInfo":"Showing _START_ to _END_ of _TOTAL_ results",
|
|
"sInfoEmpty":"Showing 0 to 0 of 0 results",
|
|
"sInfoFiltered":"(filtered from _MAX_ total results)",
|
|
"sSearch" : ""},
|
|
"iDisplayLength": 25,
|
|
"sPaginationType": "full_numbers",
|
|
"aaSorting": [], // No initial sorting specified, DataTables default
|
|
"fnDrawCallback": function (o) {
|
|
// Jump to top of page
|
|
$('html,body').scrollTop(0);
|
|
// Re-unveil images after each draw for lazy loading
|
|
$("img.search-result-albumart, img.search-result-artistart").unveil();
|
|
// Re-populate art for new rows
|
|
SearchResultsPage.getArt();
|
|
}
|
|
});
|
|
};
|
|
|
|
// Custom function to get image links and apply them to data-src
|
|
SearchResultsPage.getArt = function() {
|
|
// Target all relevant image elements that are not yet "done"
|
|
$("img.search-result-albumart:not(.done), img.search-result-artistart:not(.done)").each(function(){
|
|
var $image = $(this);
|
|
var id = $image.attr('title'); // Use title as ID for getImageLinks
|
|
|
|
// Add 'done' class immediately to prevent re-processing
|
|
$image.addClass('done');
|
|
|
|
// Assuming getImageLinks is a global function that fetches the actual image URL
|
|
// and sets it to the data-src attribute.
|
|
// If getImageLinks directly sets the src, unveil() will still work, but
|
|
// this setup aims for data-src first.
|
|
if (typeof getImageLinks === 'function') {
|
|
// getImageLinks should ideally return a promise or accept a callback
|
|
// and then set $image.attr('data-src', actualImageUrl);
|
|
// For now, assuming it handles it internally or synchronously.
|
|
getImageLinks($image, id, "${type}", true); // Assuming this sets data-src or src
|
|
} else {
|
|
console.warn("getImageLinks function is not defined. Image loading might be impacted.");
|
|
// Fallback to a generic image if getImageLinks is not available and no data-src is set.
|
|
// This might be handled by onerror, but adding here for explicit safety.
|
|
if (!$image.attr('data-src') && !$image.attr('src')) {
|
|
$image.attr('src', "interfaces/default/images/no-cover-art.png");
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
$(document).ready(function(){
|
|
initFancybox(); // Assuming initFancybox is a global function
|
|
SearchResultsPage.initDataTable();
|
|
SearchResultsPage.getArt(); // Initial call to load images on page load
|
|
|
|
// This part sets search parameters based on backend data.
|
|
// Assuming searchbar and its inputs exist globally.
|
|
$("#searchbar input[name=name]").val(${name | json.dumps});
|
|
$("#searchbar select[name=type]").val(${type | json.dumps});
|
|
|
|
// Assuming resetFilters is a global function from common.js
|
|
if (typeof resetFilters === 'function') {
|
|
resetFilters("album"); // Or adjust based on 'type' if needed
|
|
}
|
|
});
|
|
</script>
|
|
</%def>
|