feat: implement multi-language support and localization system with dynamic UI updates
This commit is contained in:
Ümit Tunç
+26
-9
@@ -218,16 +218,33 @@
|
||||
<div class="action-panel">
|
||||
<!-- Progress Section (Active during download) -->
|
||||
<div id="download-progress-panel" class="progress-panel" style="display: none;">
|
||||
<div class="progress-header">
|
||||
<span id="download-status">Bağlantı kuruluyor...</span>
|
||||
<span id="download-percent">0%</span>
|
||||
<!-- Overall Playlist Progress -->
|
||||
<div class="overall-progress-group" style="margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 6px;">
|
||||
<div class="progress-header" style="margin-bottom: 2px;">
|
||||
<span id="overall-status-label" data-i18n="overall_status_label" style="font-size: 0.76rem; color: #a49fc0; font-weight: 500;">Genel İlerleme</span>
|
||||
<span id="overall-percent" style="color: #00dfd8; font-weight: 800; font-size: 0.76rem;">0%</span>
|
||||
</div>
|
||||
<div class="progress-bar-container" style="height: 5px; background: rgba(0, 0, 0, 0.35);">
|
||||
<div id="overall-progress-bar" class="progress-bar-fill" style="width: 0%; height: 100%; background: linear-gradient(90deg, #7928ca 0%, #ff0080 100%);"></div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 3px;">
|
||||
<span id="overall-count-text" style="font-size: 0.72rem; color: #8c88a5;">Tamamlanan: 0 / 0</span>
|
||||
<span id="overall-remaining-text" style="font-size: 0.72rem; color: #8c88a5;">Kalan: 0</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-bar-container">
|
||||
<div id="download-progress-bar" class="progress-bar-fill" style="width: 0%"></div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- Active Item Progress -->
|
||||
<div class="active-track-progress-group">
|
||||
<div class="progress-header">
|
||||
<span id="download-status" style="font-size: 0.76rem; font-weight: 600; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 190px;">Bağlantı kuruluyor...</span>
|
||||
<span id="download-percent" style="font-size: 0.76rem;">0%</span>
|
||||
</div>
|
||||
<div class="progress-bar-container" style="height: 5px; background: rgba(0, 0, 0, 0.35);">
|
||||
<div id="download-progress-bar" class="progress-bar-fill" style="width: 0%"></div>
|
||||
</div>
|
||||
<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; font-size: 0.7rem;">Lütfen bekleyin...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
+2
-1
@@ -70,5 +70,6 @@
|
||||
"hr_suffix": "ساعات",
|
||||
"min_suffix_short": "د",
|
||||
"sec_suffix_short": "ث",
|
||||
"hr_suffix_short": "س"
|
||||
"hr_suffix_short": "س",
|
||||
"overall_status_label": "التقدم الإجمالي"
|
||||
}
|
||||
|
||||
+2
-1
@@ -70,5 +70,6 @@
|
||||
"hr_suffix": "Stunden",
|
||||
"min_suffix_short": "Min.",
|
||||
"sec_suffix_short": "Sek.",
|
||||
"hr_suffix_short": "Std."
|
||||
"hr_suffix_short": "Std.",
|
||||
"overall_status_label": "Gesamtfortschritt"
|
||||
}
|
||||
|
||||
+2
-1
@@ -70,5 +70,6 @@
|
||||
"hr_suffix": "hours",
|
||||
"min_suffix_short": "min",
|
||||
"sec_suffix_short": "sec",
|
||||
"hr_suffix_short": "hr"
|
||||
"hr_suffix_short": "hr",
|
||||
"overall_status_label": "Overall Progress"
|
||||
}
|
||||
|
||||
+2
-1
@@ -70,5 +70,6 @@
|
||||
"hr_suffix": "ч.",
|
||||
"min_suffix_short": "мин.",
|
||||
"sec_suffix_short": "сек.",
|
||||
"hr_suffix_short": "ч."
|
||||
"hr_suffix_short": "ч.",
|
||||
"overall_status_label": "Общий прогресс"
|
||||
}
|
||||
|
||||
+2
-1
@@ -70,5 +70,6 @@
|
||||
"hr_suffix": "saat",
|
||||
"min_suffix_short": "dk",
|
||||
"sec_suffix_short": "sn",
|
||||
"hr_suffix_short": "sa"
|
||||
"hr_suffix_short": "sa",
|
||||
"overall_status_label": "Genel İlerleme"
|
||||
}
|
||||
|
||||
+40
-9
@@ -30,7 +30,10 @@ 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 overallPercent = document.getElementById('overall-percent');
|
||||
const overallProgressBar = document.getElementById('overall-progress-bar');
|
||||
const overallCountText = document.getElementById('overall-count-text');
|
||||
const overallRemainingText = document.getElementById('overall-remaining-text');
|
||||
|
||||
const languageSelect = document.getElementById('language-select');
|
||||
|
||||
@@ -686,6 +689,26 @@ downloadBtn.addEventListener('click', async () => {
|
||||
downloadProgressBar.style.width = '0%';
|
||||
downloadSubtext.textContent = t('subtext_wait');
|
||||
|
||||
// Initialize overall progress bar UI values
|
||||
overallPercent.textContent = '0%';
|
||||
overallProgressBar.style.width = '0%';
|
||||
if (currentLang === 'tr') {
|
||||
overallCountText.textContent = `Tamamlanan: 0 / ${selectedItems.length}`;
|
||||
overallRemainingText.textContent = `Kalan: ${selectedItems.length}`;
|
||||
} else if (currentLang === 'de') {
|
||||
overallCountText.textContent = `Abgeschlossen: 0 / ${selectedItems.length}`;
|
||||
overallRemainingText.textContent = `Verbleibend: ${selectedItems.length}`;
|
||||
} else if (currentLang === 'ru') {
|
||||
overallCountText.textContent = `Завершено: 0 / ${selectedItems.length}`;
|
||||
overallRemainingText.textContent = `Осталось: ${selectedItems.length}`;
|
||||
} else if (currentLang === 'ar') {
|
||||
overallCountText.textContent = `اكتمل: 0 / ${selectedItems.length}`;
|
||||
overallRemainingText.textContent = `المتبقي: ${selectedItems.length}`;
|
||||
} else {
|
||||
overallCountText.textContent = `Completed: 0 / ${selectedItems.length}`;
|
||||
overallRemainingText.textContent = `Remaining: ${selectedItems.length}`;
|
||||
}
|
||||
|
||||
// Disable UI interactive components during download
|
||||
document.querySelectorAll('.track-checkbox, .format-badge-btn, .quality-pill, .format-btn').forEach(el => {
|
||||
el.disabled = true;
|
||||
@@ -758,21 +781,29 @@ downloadBtn.addEventListener('click', async () => {
|
||||
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;
|
||||
|
||||
// Calculate smooth continuous overall progress percentage
|
||||
const overallVal = ((completedCount + (percent / 100)) / totalSelected) * 100;
|
||||
const overallRound = Math.min(100, Math.round(overallVal));
|
||||
overallPercent.textContent = `${overallRound}%`;
|
||||
overallProgressBar.style.width = `${overallRound}%`;
|
||||
|
||||
let overallText = '';
|
||||
if (currentLang === 'tr') {
|
||||
overallText = `Tamamlanan: ${completedCount}/${totalSelected} · Kalan: ${remainingCount}${failedCount > 0 ? ` · Hata: ${failedCount}` : ''}`;
|
||||
overallCountText.textContent = `Tamamlanan: ${completedCount} / ${totalSelected}`;
|
||||
overallRemainingText.textContent = `Kalan: ${remainingCount}${failedCount > 0 ? ` · Hata: ${failedCount}` : ''}`;
|
||||
} else if (currentLang === 'de') {
|
||||
overallText = `Abgeschlossen: ${completedCount}/${totalSelected} · Verbleibend: ${remainingCount}${failedCount > 0 ? ` · Fehler: ${failedCount}` : ''}`;
|
||||
overallCountText.textContent = `Abgeschlossen: ${completedCount} / ${totalSelected}`;
|
||||
overallRemainingText.textContent = `Verbleibend: ${remainingCount}${failedCount > 0 ? ` · Fehler: ${failedCount}` : ''}`;
|
||||
} else if (currentLang === 'ru') {
|
||||
overallText = `Завершено: ${completedCount}/${totalSelected} · Осталось: ${remainingCount}${failedCount > 0 ? ` · Ошибки: ${failedCount}` : ''}`;
|
||||
overallCountText.textContent = `Завершено: ${completedCount} / ${totalSelected}`;
|
||||
overallRemainingText.textContent = `Осталось: ${remainingCount}${failedCount > 0 ? ` · Ошибки: ${failedCount}` : ''}`;
|
||||
} else if (currentLang === 'ar') {
|
||||
overallText = `اكتمل: ${completedCount}/${totalSelected} · المتبقي: ${remainingCount}${failedCount > 0 ? ` · خطأ: ${failedCount}` : ''}`;
|
||||
overallCountText.textContent = `اكتمل: ${completedCount} / ${totalSelected}`;
|
||||
overallRemainingText.textContent = `المتبقي: ${remainingCount}${failedCount > 0 ? ` · خطأ: ${failedCount}` : ''}`;
|
||||
} else {
|
||||
overallText = `Completed: ${completedCount}/${totalSelected} · Remaining: ${remainingCount}${failedCount > 0 ? ` · Error: ${failedCount}` : ''}`;
|
||||
overallCountText.textContent = `Completed: ${completedCount} / ${totalSelected}`;
|
||||
overallRemainingText.textContent = `Remaining: ${remainingCount}${failedCount > 0 ? ` · Error: ${failedCount}` : ''}`;
|
||||
}
|
||||
|
||||
downloadOverallStatus.textContent = overallText;
|
||||
});
|
||||
|
||||
try {
|
||||
|
||||
Reference in New Issue
Block a user