feat: implement renderer logic for format selection, dependency management, and i18n support
This commit is contained in:
+8
-5
@@ -163,11 +163,11 @@
|
|||||||
<span class="summary-stat-label" data-i18n="summary_total_tracks">Toplam Dosya:</span>
|
<span class="summary-stat-label" data-i18n="summary_total_tracks">Toplam Dosya:</span>
|
||||||
<span id="summary-total-count" class="summary-stat-value">0</span>
|
<span id="summary-total-count" class="summary-stat-value">0</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="summary-stat-item">
|
<div class="summary-stat-item" id="summary-item-duration">
|
||||||
<span class="summary-stat-label" data-i18n="summary_total_duration">Toplam Süre:</span>
|
<span class="summary-stat-label" data-i18n="summary_total_duration">Toplam Süre:</span>
|
||||||
<span id="summary-total-duration" class="summary-stat-value">0 sn</span>
|
<span id="summary-total-duration" class="summary-stat-value">0 sn</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="summary-stat-item summary-stat-speed-item">
|
<div class="summary-stat-item summary-stat-speed-item" id="summary-item-speed">
|
||||||
<span class="summary-stat-label" data-i18n="summary_speed_label">Hız:</span>
|
<span class="summary-stat-label" data-i18n="summary_speed_label">Hız:</span>
|
||||||
<select id="summary-speed-select" class="summary-speed-select">
|
<select id="summary-speed-select" class="summary-speed-select">
|
||||||
<option value="100">100 Mbps (Fiber)</option>
|
<option value="100">100 Mbps (Fiber)</option>
|
||||||
@@ -177,11 +177,11 @@
|
|||||||
<option value="8">8 Mbps (Temel)</option>
|
<option value="8">8 Mbps (Temel)</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="summary-stat-item">
|
<div class="summary-stat-item" id="summary-item-size">
|
||||||
<span class="summary-stat-label" data-i18n="summary_est_size">Tahmini Boyut:</span>
|
<span class="summary-stat-label" data-i18n="summary_est_size">Tahmini Boyut:</span>
|
||||||
<span id="summary-est-size" class="summary-stat-value">0 MB</span>
|
<span id="summary-est-size" class="summary-stat-value">0 MB</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="summary-stat-item">
|
<div class="summary-stat-item" id="summary-item-time">
|
||||||
<span class="summary-stat-label" data-i18n="summary_est_time">Tahmini Süre:</span>
|
<span class="summary-stat-label" data-i18n="summary_est_time">Tahmini Süre:</span>
|
||||||
<span id="summary-est-time" class="summary-stat-value">~0 sn</span>
|
<span id="summary-est-time" class="summary-stat-value">~0 sn</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -225,7 +225,10 @@
|
|||||||
<div class="progress-bar-container">
|
<div class="progress-bar-container">
|
||||||
<div id="download-progress-bar" class="progress-bar-fill" style="width: 0%"></div>
|
<div id="download-progress-bar" class="progress-bar-fill" style="width: 0%"></div>
|
||||||
</div>
|
</div>
|
||||||
<p id="download-subtext" class="subtext">Lütfen bekleyin...</p>
|
<div class="progress-footer" style="display: flex; justify-content: space-between; align-items: center; margin-top: 4px;">
|
||||||
|
<p id="download-subtext" class="subtext" style="margin-top: 0;">Lütfen bekleyin...</p>
|
||||||
|
<p id="download-overall-status" class="subtext" style="margin-top: 0; font-weight: 600; color: #00dfd8;"></p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button id="download-btn" class="glow-button full-width">
|
<button id="download-btn" class="glow-button full-width">
|
||||||
|
|||||||
+77
-29
@@ -30,6 +30,7 @@ const downloadStatus = document.getElementById('download-status');
|
|||||||
const downloadPercent = document.getElementById('download-percent');
|
const downloadPercent = document.getElementById('download-percent');
|
||||||
const downloadProgressBar = document.getElementById('download-progress-bar');
|
const downloadProgressBar = document.getElementById('download-progress-bar');
|
||||||
const downloadSubtext = document.getElementById('download-subtext');
|
const downloadSubtext = document.getElementById('download-subtext');
|
||||||
|
const downloadOverallStatus = document.getElementById('download-overall-status');
|
||||||
|
|
||||||
const languageSelect = document.getElementById('language-select');
|
const languageSelect = document.getElementById('language-select');
|
||||||
|
|
||||||
@@ -369,46 +370,72 @@ function updateSummaryStats() {
|
|||||||
document.getElementById('summary-total-duration').textContent = formatSecondsToReadable(0);
|
document.getElementById('summary-total-duration').textContent = formatSecondsToReadable(0);
|
||||||
document.getElementById('summary-est-size').textContent = '0 MB';
|
document.getElementById('summary-est-size').textContent = '0 MB';
|
||||||
document.getElementById('summary-est-time').textContent = '~0 ' + (t('sec_suffix_short') || 'sn');
|
document.getElementById('summary-est-time').textContent = '~0 ' + (t('sec_suffix_short') || 'sn');
|
||||||
|
|
||||||
|
// Hide duration items when empty
|
||||||
|
document.getElementById('summary-item-duration').style.display = 'none';
|
||||||
|
document.getElementById('summary-item-speed').style.display = 'none';
|
||||||
|
document.getElementById('summary-item-size').style.display = 'none';
|
||||||
|
document.getElementById('summary-item-time').style.display = 'none';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Calculate total count
|
// Calculate total count
|
||||||
document.getElementById('summary-total-count').textContent = checkedTracks.length;
|
document.getElementById('summary-total-count').textContent = checkedTracks.length;
|
||||||
|
|
||||||
// Calculate total duration
|
// Check if any of the checked tracks has unknown duration
|
||||||
let totalSeconds = 0;
|
const hasUnknownDuration = checkedTracks.some(track => {
|
||||||
checkedTracks.forEach(track => {
|
const secs = parseDurationToSeconds(track.duration);
|
||||||
totalSeconds += parseDurationToSeconds(track.duration);
|
return secs <= 0 || !track.duration || track.duration.includes('Bilinmiyor') || track.duration === 'Unknown';
|
||||||
});
|
});
|
||||||
document.getElementById('summary-total-duration').textContent = formatSecondsToReadable(totalSeconds);
|
|
||||||
|
|
||||||
// Calculate estimated size in MB
|
if (hasUnknownDuration) {
|
||||||
let totalSizeMB = 0;
|
// Hide duration-related items completely
|
||||||
checkedTracks.forEach(track => {
|
document.getElementById('summary-item-duration').style.display = 'none';
|
||||||
const duration = parseDurationToSeconds(track.duration);
|
document.getElementById('summary-item-speed').style.display = 'none';
|
||||||
if (track.format === 'mp3') {
|
document.getElementById('summary-item-size').style.display = 'none';
|
||||||
const kbps = parseInt(track.quality) || 320;
|
document.getElementById('summary-item-time').style.display = 'none';
|
||||||
totalSizeMB += (duration * kbps) / 8388.608;
|
} else {
|
||||||
} else {
|
// Show duration-related items
|
||||||
let bitrate = 1500;
|
document.getElementById('summary-item-duration').style.display = 'flex';
|
||||||
if (track.quality === '1080') bitrate = 3000;
|
document.getElementById('summary-item-speed').style.display = 'flex';
|
||||||
else if (track.quality === '480') bitrate = 750;
|
document.getElementById('summary-item-size').style.display = 'flex';
|
||||||
totalSizeMB += (duration * bitrate) / 8388.608;
|
document.getElementById('summary-item-time').style.display = 'flex';
|
||||||
}
|
|
||||||
});
|
|
||||||
document.getElementById('summary-est-size').textContent = `${totalSizeMB.toFixed(1)} MB`;
|
|
||||||
|
|
||||||
// Calculate estimated download time based on selected internet speed
|
// Calculate total duration
|
||||||
const speedSelect = document.getElementById('summary-speed-select');
|
let totalSeconds = 0;
|
||||||
const speedMbps = parseFloat(speedSelect.value) || 24;
|
checkedTracks.forEach(track => {
|
||||||
|
totalSeconds += parseDurationToSeconds(track.duration);
|
||||||
|
});
|
||||||
|
document.getElementById('summary-total-duration').textContent = formatSecondsToReadable(totalSeconds);
|
||||||
|
|
||||||
const sizeMegabits = totalSizeMB * 8;
|
// Calculate estimated size in MB
|
||||||
let estSeconds = sizeMegabits / speedMbps;
|
let totalSizeMB = 0;
|
||||||
|
checkedTracks.forEach(track => {
|
||||||
// Realism factor: connection handshake / conversion overhead
|
const duration = parseDurationToSeconds(track.duration);
|
||||||
estSeconds += checkedTracks.length * 1.5;
|
if (track.format === 'mp3') {
|
||||||
|
const kbps = parseInt(track.quality) || 320;
|
||||||
|
totalSizeMB += (duration * kbps) / 8388.608;
|
||||||
|
} else {
|
||||||
|
let bitrate = 1500;
|
||||||
|
if (track.quality === '1080') bitrate = 3000;
|
||||||
|
else if (track.quality === '480') bitrate = 750;
|
||||||
|
totalSizeMB += (duration * bitrate) / 8388.608;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.getElementById('summary-est-size').textContent = `${totalSizeMB.toFixed(1)} MB`;
|
||||||
|
|
||||||
document.getElementById('summary-est-time').textContent = `~${formatSecondsToReadable(Math.round(estSeconds))}`;
|
// Calculate estimated download time based on selected internet speed
|
||||||
|
const speedSelect = document.getElementById('summary-speed-select');
|
||||||
|
const speedMbps = parseFloat(speedSelect.value) || 24;
|
||||||
|
|
||||||
|
const sizeMegabits = totalSizeMB * 8;
|
||||||
|
let estSeconds = sizeMegabits / speedMbps;
|
||||||
|
|
||||||
|
// Realism factor: connection handshake / conversion overhead
|
||||||
|
estSeconds += checkedTracks.length * 1.5;
|
||||||
|
|
||||||
|
document.getElementById('summary-est-time').textContent = `~${formatSecondsToReadable(Math.round(estSeconds))}`;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 5. Back Button (Step 2 to Step 1 Transition)
|
// 5. Back Button (Step 2 to Step 1 Transition)
|
||||||
@@ -725,6 +752,27 @@ downloadBtn.addEventListener('click', async () => {
|
|||||||
downloadPercent.textContent = `${percent}%`;
|
downloadPercent.textContent = `${percent}%`;
|
||||||
downloadProgressBar.style.width = `${percent}%`;
|
downloadProgressBar.style.width = `${percent}%`;
|
||||||
downloadSubtext.textContent = `${t('swal_file_size')}: ${stat}`;
|
downloadSubtext.textContent = `${t('swal_file_size')}: ${stat}`;
|
||||||
|
|
||||||
|
// Overall progress, completed vs remaining items live calculator
|
||||||
|
const totalSelected = playlistTracks.filter(t => t.checked).length;
|
||||||
|
const completedCount = playlistTracks.filter(t => t.checked && t.status === 'completed').length;
|
||||||
|
const failedCount = playlistTracks.filter(t => t.checked && t.status === 'error').length;
|
||||||
|
const remainingCount = totalSelected - completedCount - failedCount;
|
||||||
|
|
||||||
|
let overallText = '';
|
||||||
|
if (currentLang === 'tr') {
|
||||||
|
overallText = `Tamamlanan: ${completedCount}/${totalSelected} · Kalan: ${remainingCount}${failedCount > 0 ? ` · Hata: ${failedCount}` : ''}`;
|
||||||
|
} else if (currentLang === 'de') {
|
||||||
|
overallText = `Abgeschlossen: ${completedCount}/${totalSelected} · Verbleibend: ${remainingCount}${failedCount > 0 ? ` · Fehler: ${failedCount}` : ''}`;
|
||||||
|
} else if (currentLang === 'ru') {
|
||||||
|
overallText = `Завершено: ${completedCount}/${totalSelected} · Осталось: ${remainingCount}${failedCount > 0 ? ` · Ошибки: ${failedCount}` : ''}`;
|
||||||
|
} else if (currentLang === 'ar') {
|
||||||
|
overallText = `اكتمل: ${completedCount}/${totalSelected} · المتبقي: ${remainingCount}${failedCount > 0 ? ` · خطأ: ${failedCount}` : ''}`;
|
||||||
|
} else {
|
||||||
|
overallText = `Completed: ${completedCount}/${totalSelected} · Remaining: ${remainingCount}${failedCount > 0 ? ` · Error: ${failedCount}` : ''}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
downloadOverallStatus.textContent = overallText;
|
||||||
});
|
});
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
|||||||
Reference in New Issue
Block a user