feat: implement renderer logic for format selection, dependency management, and i18n support
This commit is contained in:
Ümit Tunç
+8
-5
@@ -163,11 +163,11 @@
|
||||
<span class="summary-stat-label" data-i18n="summary_total_tracks">Toplam Dosya:</span>
|
||||
<span id="summary-total-count" class="summary-stat-value">0</span>
|
||||
</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 id="summary-total-duration" class="summary-stat-value">0 sn</span>
|
||||
</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>
|
||||
<select id="summary-speed-select" class="summary-speed-select">
|
||||
<option value="100">100 Mbps (Fiber)</option>
|
||||
@@ -177,11 +177,11 @@
|
||||
<option value="8">8 Mbps (Temel)</option>
|
||||
</select>
|
||||
</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 id="summary-est-size" class="summary-stat-value">0 MB</span>
|
||||
</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 id="summary-est-time" class="summary-stat-value">~0 sn</span>
|
||||
</div>
|
||||
@@ -225,7 +225,10 @@
|
||||
<div class="progress-bar-container">
|
||||
<div id="download-progress-bar" class="progress-bar-fill" style="width: 0%"></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>
|
||||
|
||||
<button id="download-btn" class="glow-button full-width">
|
||||
|
||||
+76
-28
@@ -30,6 +30,7 @@ const downloadStatus = document.getElementById('download-status');
|
||||
const downloadPercent = document.getElementById('download-percent');
|
||||
const downloadProgressBar = document.getElementById('download-progress-bar');
|
||||
const downloadSubtext = document.getElementById('download-subtext');
|
||||
const downloadOverallStatus = document.getElementById('download-overall-status');
|
||||
|
||||
const languageSelect = document.getElementById('language-select');
|
||||
|
||||
@@ -369,46 +370,72 @@ function updateSummaryStats() {
|
||||
document.getElementById('summary-total-duration').textContent = formatSecondsToReadable(0);
|
||||
document.getElementById('summary-est-size').textContent = '0 MB';
|
||||
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;
|
||||
}
|
||||
|
||||
// Calculate total count
|
||||
document.getElementById('summary-total-count').textContent = checkedTracks.length;
|
||||
|
||||
// Calculate total duration
|
||||
let totalSeconds = 0;
|
||||
checkedTracks.forEach(track => {
|
||||
totalSeconds += parseDurationToSeconds(track.duration);
|
||||
// Check if any of the checked tracks has unknown duration
|
||||
const hasUnknownDuration = checkedTracks.some(track => {
|
||||
const secs = 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
|
||||
let totalSizeMB = 0;
|
||||
checkedTracks.forEach(track => {
|
||||
const duration = parseDurationToSeconds(track.duration);
|
||||
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`;
|
||||
if (hasUnknownDuration) {
|
||||
// Hide duration-related items completely
|
||||
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';
|
||||
} else {
|
||||
// Show duration-related items
|
||||
document.getElementById('summary-item-duration').style.display = 'flex';
|
||||
document.getElementById('summary-item-speed').style.display = 'flex';
|
||||
document.getElementById('summary-item-size').style.display = 'flex';
|
||||
document.getElementById('summary-item-time').style.display = 'flex';
|
||||
|
||||
// Calculate estimated download time based on selected internet speed
|
||||
const speedSelect = document.getElementById('summary-speed-select');
|
||||
const speedMbps = parseFloat(speedSelect.value) || 24;
|
||||
// Calculate total duration
|
||||
let totalSeconds = 0;
|
||||
checkedTracks.forEach(track => {
|
||||
totalSeconds += parseDurationToSeconds(track.duration);
|
||||
});
|
||||
document.getElementById('summary-total-duration').textContent = formatSecondsToReadable(totalSeconds);
|
||||
|
||||
const sizeMegabits = totalSizeMB * 8;
|
||||
let estSeconds = sizeMegabits / speedMbps;
|
||||
// Calculate estimated size in MB
|
||||
let totalSizeMB = 0;
|
||||
checkedTracks.forEach(track => {
|
||||
const duration = parseDurationToSeconds(track.duration);
|
||||
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`;
|
||||
|
||||
// Realism factor: connection handshake / conversion overhead
|
||||
estSeconds += checkedTracks.length * 1.5;
|
||||
// Calculate estimated download time based on selected internet speed
|
||||
const speedSelect = document.getElementById('summary-speed-select');
|
||||
const speedMbps = parseFloat(speedSelect.value) || 24;
|
||||
|
||||
document.getElementById('summary-est-time').textContent = `~${formatSecondsToReadable(Math.round(estSeconds))}`;
|
||||
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)
|
||||
@@ -725,6 +752,27 @@ downloadBtn.addEventListener('click', async () => {
|
||||
downloadPercent.textContent = `${percent}%`;
|
||||
downloadProgressBar.style.width = `${percent}%`;
|
||||
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 {
|
||||
|
||||
Reference in New Issue
Block a user