fix: add placeholder thumbnail for history items without images, fix garbled tooltip code
This commit is contained in:
parent
6a2b8513d4
commit
a2c5a71b4b
2 changed files with 22 additions and 8 deletions
|
|
@ -2870,16 +2870,16 @@ function _adlRenderBatchHistory() {
|
||||||
youtube: '255, 0, 0', tidal: '0, 255, 255', deezer: '162, 73, 255',
|
youtube: '255, 0, 0', tidal: '0, 255, 255', deezer: '162, 73, 255',
|
||||||
beatport: '148, 252, 19', listenbrainz: '255, 134, 0'
|
beatport: '148, 252, 19', listenbrainz: '255, 134, 0'
|
||||||
};
|
};
|
||||||
const dotColor = sourceColors[h.source] || sourceColors[h.source_page] || '255, 255, 255';
|
const dotSource = h.source || h.source_page || '';
|
||||||
const histDot = `<span class="adl-batch-history-dot" style="background:rgba(${dotColor}, 0.6)"></span>`;
|
|
||||||
|
|
||||||
// Optional thumbnail
|
|
||||||
const thumb = h.thumb_url
|
|
||||||
? `<img src="${_adlEsc(h.thumb_url)}" class="adl-batch-history-thumb" loading="lazy">`
|
|
||||||
: '';Source = h.source || h.source_page || '';
|
|
||||||
const dotColor = sourceColors[dotSource] || '255, 255, 255';
|
const dotColor = sourceColors[dotSource] || '255, 255, 255';
|
||||||
const dotTip = dotSource ? `Source: ${dotSource}` : 'Unknown source';
|
const dotTip = dotSource ? `Source: ${dotSource}` : 'Unknown source';
|
||||||
const histDot = `<span class="adl-batch-history-dot" style="background:rgba(${dotColor}, 0.6)" title="${dotTip}
|
const histDot = `<span class="adl-batch-history-dot" style="background:rgba(${dotColor}, 0.6)" title="${dotTip}"></span>`;
|
||||||
|
|
||||||
|
// Thumbnail with placeholder fallback
|
||||||
|
const thumb = h.thumb_url
|
||||||
|
? `<img src="${_adlEsc(h.thumb_url)}" class="adl-batch-history-thumb" loading="lazy" onerror="this.classList.add('adl-batch-history-thumb-placeholder');this.removeAttribute('src')">`
|
||||||
|
: `<span class="adl-batch-history-thumb adl-batch-history-thumb-placeholder"></span>`;
|
||||||
|
|
||||||
// Server push status indicator
|
// Server push status indicator
|
||||||
let pushBadge = '';
|
let pushBadge = '';
|
||||||
if (h.server_push_status) {
|
if (h.server_push_status) {
|
||||||
|
|
|
||||||
|
|
@ -57200,6 +57200,20 @@ body.reduce-effects *::after {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.adl-batch-history-thumb-placeholder {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.adl-batch-history-thumb-placeholder::after {
|
||||||
|
content: '♫';
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
.adl-batch-history-content {
|
.adl-batch-history-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue