aherman
/
SoulSync
mirror of https://github.com/Nezreka/SoulSync.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add play button to repair findings & increase finding image sizes

Browse Source 
- Play button on acoustid_mismatch, acoustid_no_match, track_number_mismatch, fake_lossless, dead_file, orphan_file findings
- Uses playLibraryTrack() for proper media player integration (track info, sidebar, album art)
- Data attributes for safe escaping instead of inline onclick strings
- Finding images increased from 56px to 150px with hover effects
- Improved detail panel spacing and media card layout
pull/253/head
Broque Thomas 2 months ago
parent 078b1130f8
commit 186671aa2e
2 changed files with 87 additions and 22 deletions
Show Stats Download Patch File Download Diff File

38
webui/static/script.js
Unescape View File

@ -50535,6 +50535,33 @@ function _formatFileSize(bytes) {
return (bytes / 1048576).toFixed(1) + ' MB';
}
function _renderPlayButton(f) {
const d = f.details || {};
const filePath = f.file_path || d.file_path || d.original_path;
if (!filePath) return '';
const title = d.expected_title || d.title || d.file_title || d.matched_title || '';
const artist = d.expected_artist || d.artist || d.artist_name || '';
const album = d.album || d.album_title || '';
const albumArt = d.album_thumb_url || '';
return `<button class="repair-finding-play-btn" onclick="event.stopPropagation(); playFindingTrack(this)"
data-path="${_escFinding(filePath)}" data-title="${_escFinding(title)}"
data-artist="${_escFinding(artist)}" data-album="${_escFinding(album)}"
data-art="${_escFinding(albumArt)}" data-entity-id="${_escFinding(f.entity_id || '')}" title="Play this track">
<svg viewBox="0 0 24 24"><polygon points="5,3 19,12 5,21"/></svg> Play
</button>`;
}
function playFindingTrack(btn) {
const track = {
file_path: btn.dataset.path,
title: btn.dataset.title || 'Unknown Track',
id: btn.dataset.entityId || null
};
const albumTitle = btn.dataset.album || '';
const artistName = btn.dataset.artist || '';
playLibraryTrack(track, albumTitle, artistName);
}
function _renderFindingMedia(d) {
const albumUrl = d.album_thumb_url;
const artistUrl = d.artist_thumb_url;
@ -50572,7 +50599,7 @@ function _renderFindingDetail(f) {
if (d.title) rows.push(['Title', d.title]);
if (d.track_id) rows.push(['Track ID', d.track_id]);
if (d.original_path) rows.push(['Original Path', d.original_path, 'path']);
return media + _gridRows(rows);
return media + _gridRows(rows) + _renderPlayButton(f);
case 'orphan_file':
if (d.folder) rows.push(['Folder', d.folder, 'path']);
@ -50580,7 +50607,7 @@ function _renderFindingDetail(f) {
if (d.file_size) rows.push(['File Size', _formatFileSize(d.file_size)]);
if (d.modified) rows.push(['Last Modified', d.modified]);
if (f.file_path) rows.push(['Full Path', f.file_path, 'path']);
return _gridRows(rows);
return _gridRows(rows) + _renderPlayButton(f);
case 'acoustid_mismatch': {
let html = media + '<div style="margin-bottom:8px">';
@ -50593,14 +50620,14 @@ function _renderFindingDetail(f) {
rows.push(['AcoustID Title', d.acoustid_title || '-', 'highlight']);
rows.push(['AcoustID Artist', d.acoustid_artist || '-', 'highlight']);
if (f.file_path) rows.push(['File', f.file_path, 'path']);
return html + _gridRows(rows);
return html + _gridRows(rows) + _renderPlayButton(f);
}
case 'acoustid_no_match':
if (d.expected_title) rows.push(['Expected Title', d.expected_title]);
if (d.expected_artist) rows.push(['Expected Artist', d.expected_artist]);
if (f.file_path) rows.push(['File', f.file_path, 'path']);
return media + _gridRows(rows);
return media + _gridRows(rows) + _renderPlayButton(f);
case 'fake_lossless': {
const cutoff = d.detected_cutoff_khz || 0;
@ -50628,7 +50655,7 @@ function _renderFindingDetail(f) {
if (d.bitrate) rows.push(['Bitrate', `${d.bitrate} kbps`]);
if (d.file_size) rows.push(['File Size', _formatFileSize(d.file_size)]);
if (f.file_path) rows.push(['File', f.file_path, 'path']);
return flHtml + _gridRows(rows);
return flHtml + _gridRows(rows) + _renderPlayButton(f);
}
case 'duplicate_tracks':
@ -50736,6 +50763,7 @@ function _renderFindingDetail(f) {
tnHtml += `<div class="repair-detail-sublist">${d.changes.map(c => `
<div class="repair-detail-subitem"><strong>${_escFinding(c)}</strong></div>`).join('')}</div>`;
}
tnHtml += _renderPlayButton(f);
return tnHtml;
default:

71
webui/static/style.css
Unescape View File

@ -40547,10 +40547,10 @@ tr.tag-diff-same {
border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.repair-finding-detail-inner {
padding: 12px 14px 14px;
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
gap: 10px;
gap: 12px;
}
/* Detail key-value rows */
@ -40646,41 +40646,78 @@ tr.tag-diff-same {
/* Finding media thumbnails (album art + artist image) */
.repair-finding-media {
display: flex;
gap: 14px;
margin-bottom: 12px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.03);
border-radius: 10px;
gap: 18px;
margin-bottom: 14px;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.025);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.06);
align-items: flex-start;
}
.repair-finding-media-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
gap: 8px;
min-width: 0;
}
.repair-finding-media-img {
width: 56px;
height: 56px;
border-radius: 8px;
width: 150px;
height: 150px;
border-radius: 10px;
object-fit: cover;
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.1);
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.repair-finding-media-img:hover {
transform: scale(1.03);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}
.repair-finding-media-img.artist {
border-radius: 50%;
}
.repair-finding-media-label {
font-size: 10px;
color: rgba(255, 255, 255, 0.45);
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
text-align: center;
max-width: 72px;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.2;
line-height: 1.3;
font-weight: 500;
}
/* Play button for findings */
.repair-finding-play-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: rgba(var(--accent-rgb, 99, 102, 241), 0.12);
border: 1px solid rgba(var(--accent-rgb, 99, 102, 241), 0.25);
border-radius: 8px;
color: rgb(var(--accent-light-rgb, 129, 140, 248));
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
margin-top: 4px;
}
.repair-finding-play-btn:hover {
background: rgba(var(--accent-rgb, 99, 102, 241), 0.2);
border-color: rgba(var(--accent-rgb, 99, 102, 241), 0.4);
transform: translateY(-1px);
}
.repair-finding-play-btn:active {
transform: translateY(0);
}
.repair-finding-play-btn svg {
width: 14px;
height: 14px;
fill: currentColor;
}
/* Artwork preview (for missing cover art) */

Write Preview
Loading…
Cancel
Save