diff --git a/src/renderer.js b/src/renderer.js index 5b00151..6e598f8 100644 --- a/src/renderer.js +++ b/src/renderer.js @@ -198,12 +198,16 @@ function renderTrackList(info) { trackList.innerHTML = `
- Thumbnail + + + + + Thumbnail

${info.title}

${info.uploader}

- Süre: ${info.duration} + Süre: ${info.duration || 'Bilinmiyor'}
Hazır @@ -322,6 +326,12 @@ downloadBtn.addEventListener('click', async () => { // Helper: Show Error Alert inside Step 1 function showError(msg) { - errorMessage.textContent = `Hata: ${msg}`; + let friendlyMsg = msg; + if (msg.includes('Could not copy') && msg.includes('cookie database')) { + friendlyMsg = 'Seçtiğiniz tarayıcı (Chrome/Edge/Brave vb.) şu anda arka planda açık olduğu için çerez veritabanı kilitlendi. Lütfen tarayıcı pencerelerinizi tamamen kapatıp ardından tekrar "Analiz Et" butonuna basın.'; + } else if (msg.includes('You need to log in to access this content')) { + friendlyMsg = 'Bu özel içeriğe erişmek için giriş yapılması gerekiyor. Lütfen aşağıdaki çerez seçeneğini aktif edip giriş yapmış olduğunuz tarayıcıyı seçin.'; + } + errorMessage.textContent = `Hata: ${friendlyMsg}`; errorCard.style.display = 'flex'; } diff --git a/src/style.css b/src/style.css index be04ad7..6569560 100644 --- a/src/style.css +++ b/src/style.css @@ -450,12 +450,28 @@ input[type="text"]:focus { border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 12px rgba(0,0,0,0.3); flex-shrink: 0; + position: relative; + background: linear-gradient(135deg, rgba(121, 40, 202, 0.25) 0%, rgba(255, 0, 128, 0.25) 100%); + display: flex; + align-items: center; + justify-content: center; +} + +.track-thumb-fallback { + color: rgba(255, 255, 255, 0.4); + width: 28px; + height: 28px; + z-index: 1; } .track-thumb img { + position: absolute; + top: 0; + left: 0; width: 100%; height: 100%; object-fit: cover; + z-index: 2; } .track-details {