diff --git a/public/app.js b/public/app.js index 8a35496..0a01eb8 100644 --- a/public/app.js +++ b/public/app.js @@ -582,7 +582,7 @@ function createDownloadCard(download) { const header = document.createElement('div'); header.className = 'download-header'; - + const type = document.createElement('span'); type.className = `download-type ${download.type}`; if (download.type === 'series') { @@ -595,11 +595,11 @@ function createDownloadCard(download) { } else { type.textContent = download.type; } - + const status = document.createElement('span'); status.className = `download-status ${download.status}`; status.textContent = download.status; - + header.appendChild(type); header.appendChild(status); @@ -619,6 +619,58 @@ function createDownloadCard(download) { blBtn.addEventListener('click', () => handleBlocklistSearch(blBtn, download)); header.appendChild(blBtn); } + + // Right side container for user badge and client logo + const rightSide = document.createElement('div'); + rightSide.className = 'download-header-right'; + + if (showAll && download.tagBadges && download.tagBadges.length > 0) { + // In showAll mode: render all tags classified by whether they match an Emby user. + // Unmatched (no known Emby user) → amber, leftmost. + // Matched → show Emby display name in accent colour, rightmost. + const unmatched = download.tagBadges.filter(b => !b.matchedUser); + const matched = download.tagBadges.filter(b => b.matchedUser); + for (const b of unmatched) { + const badge = document.createElement('span'); + badge.className = 'download-user-badge unmatched'; + badge.textContent = b.label; + rightSide.appendChild(badge); + } + for (const b of matched) { + const badge = document.createElement('span'); + badge.className = 'download-user-badge'; + badge.textContent = b.matchedUser; + rightSide.appendChild(badge); + } + } else if (download.matchedUserTag) { + // Normal (non-showAll) view: show only the current user's matched tag + const matchedBadge = document.createElement('span'); + matchedBadge.className = 'download-user-badge'; + matchedBadge.textContent = download.matchedUserTag; + rightSide.appendChild(matchedBadge); + } + + // Add client logo + if (download.client) { + const clientLogoWrapper = document.createElement('span'); + clientLogoWrapper.className = 'download-client-logo-wrapper'; + + const clientLogo = document.createElement('img'); + clientLogo.className = 'download-client-logo'; + clientLogo.src = `/images/clients/${download.client}.svg`; + clientLogo.alt = `${download.instanceName || download.client} icon`; + clientLogo.title = download.instanceName || download.client; + clientLogo.onerror = () => { + // Fallback to text if image fails to load + clientLogoWrapper.textContent = download.client.charAt(0).toUpperCase(); + clientLogoWrapper.classList.add('fallback'); + }; + + clientLogoWrapper.appendChild(clientLogo); + rightSide.appendChild(clientLogoWrapper); + } + + header.appendChild(rightSide); const title = document.createElement('h3'); title.className = 'download-title'; @@ -676,6 +728,26 @@ function createDownloadCard(download) { matchedBadge.textContent = download.matchedUserTag; header.appendChild(matchedBadge); } + + // Add client logo + if (download.client) { + const clientLogoWrapper = document.createElement('span'); + clientLogoWrapper.className = 'download-client-logo-wrapper'; + + const clientLogo = document.createElement('img'); + clientLogo.className = 'download-client-logo'; + clientLogo.src = `/images/clients/${download.client}.svg`; + clientLogo.alt = `${download.instanceName || download.client} icon`; + clientLogo.title = download.instanceName || download.client; + clientLogo.onerror = () => { + // Fallback to text if image fails to load + clientLogoWrapper.textContent = download.client.charAt(0).toUpperCase(); + clientLogoWrapper.classList.add('fallback'); + }; + + clientLogoWrapper.appendChild(clientLogo); + header.appendChild(clientLogoWrapper); + } const details = document.createElement('div'); details.className = 'download-details'; diff --git a/public/style.css b/public/style.css index cfe9d05..91c26f3 100644 --- a/public/style.css +++ b/public/style.css @@ -1402,7 +1402,6 @@ body { text-transform: capitalize; background: var(--accent-light); color: var(--accent); - margin-left: auto; white-space: nowrap; } @@ -1412,6 +1411,38 @@ body { margin-left: 0; } +/* Download client logo in card */ +.download-header-right { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 2px; + margin-left: auto; +} + +.download-client-logo-wrapper { + width: 16px; + height: 16px; + flex-shrink: 0; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.download-client-logo { + width: 100%; + height: 100%; + object-fit: contain; +} + +.download-client-logo-wrapper.fallback { + font-size: 10px; + font-weight: bold; + background: var(--surface-alt); + border-radius: 2px; + color: var(--text-primary); +} + /* ===== Status Button ===== */ .status-btn { padding: 4px 12px;