diff --git a/client/src/ui/downloads.js b/client/src/ui/downloads.js index 407b542..1d1738f 100644 --- a/client/src/ui/downloads.js +++ b/client/src/ui/downloads.js @@ -32,6 +32,24 @@ export function renderTagBadges(tagBadges, showAll, matchedUserTag) { return fragment; } +function createClientLogo(download) { + const clientLogoWrapper = document.createElement('span'); + clientLogoWrapper.className = 'download-client-logo-wrapper download-card-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 = () => { + clientLogoWrapper.textContent = download.client.charAt(0).toUpperCase(); + clientLogoWrapper.classList.add('fallback'); + }; + + clientLogoWrapper.appendChild(clientLogo); + return clientLogoWrapper; +} + export function renderDownloads() { const downloadsList = document.getElementById('downloads-list'); const noDownloads = document.getElementById('no-downloads'); @@ -133,21 +151,7 @@ export function updateDownloadCard(card, download) { // Add client logo to card (positioned at bottom right via CSS) if (download.client && !card.querySelector('.download-card-logo-wrapper')) { - const clientLogoWrapper = document.createElement('span'); - clientLogoWrapper.className = 'download-client-logo-wrapper download-card-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 = () => { - clientLogoWrapper.textContent = download.client.charAt(0).toUpperCase(); - clientLogoWrapper.classList.add('fallback'); - }; - - clientLogoWrapper.appendChild(clientLogo); - card.appendChild(clientLogoWrapper); + card.appendChild(createClientLogo(download)); } // Update status @@ -317,24 +321,9 @@ export function createDownloadCard(download) { // Add client logo to card (positioned at bottom right via CSS) if (download.client) { - const clientLogoWrapper = document.createElement('span'); - clientLogoWrapper.className = 'download-client-logo-wrapper download-card-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); - card.appendChild(clientLogoWrapper); + card.appendChild(createClientLogo(download)); } - + const title = document.createElement('h3'); title.className = 'download-title'; title.textContent = download.title; @@ -366,26 +355,6 @@ export function createDownloadCard(download) { infoDiv.appendChild(movie); } - // Add client logo - if (download.client) { - const clientLogoWrapper = document.createElement('span'); - clientLogoWrapper.className = 'download-client-logo-wrapper download-card-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';