-
Speed: --
-
Size: --
+
+
`;
listbox.parentElement.appendChild(progressArea);
- // Initialize progress bar to 0%
- const progressBarInit = document.getElementById('server-download-progress-bar');
- if (progressBarInit) {
- progressBarInit.style.width = '0%';
- }
-
- // Setup button handlers
- let currentDownloadId = null;
-
- const pauseBtn = document.getElementById('server-download-pause-btn');
- const resumeBtn = document.getElementById('server-download-resume-btn');
- const cancelBtn = document.getElementById('server-download-cancel-btn');
-
- if (pauseBtn) {
- pauseBtn.onclick = async () => {
- if (currentDownloadId) {
- await pauseDownload(currentDownloadId);
- }
- };
- }
-
- if (resumeBtn) {
- resumeBtn.onclick = async () => {
- if (currentDownloadId) {
- await resumeDownload(currentDownloadId);
- }
- };
- }
-
- if (cancelBtn) {
- cancelBtn.onclick = async () => {
- if (currentDownloadId && confirm('Are you sure you want to cancel this download?')) {
- await cancelDownload(currentDownloadId);
- // Clear queue
- downloadQueue = [];
- isDownloadingAll = false;
- }
- };
- }
-
// Listen for updates
const updateHandler = (event) => {
const { download_id, status, progress, downloaded, total, speed } = event.detail;
- if (!isDownloadingAll) return;
-
- currentDownloadId = download_id;
-
- const currentFile = document.getElementById('server-download-current-file');
- const overallProgress = document.getElementById('server-download-overall-progress');
- const progressBar = document.getElementById('server-download-progress-bar');
- const speedInfo = document.getElementById('server-download-speed');
- const sizeInfo = document.getElementById('server-download-size');
-
- if (currentFile) {
- currentFile.textContent = `Current: ${download_id}`;
+ if (!isDownloadingAll) {
+ return;
}
+ // Update overall progress
+ const overallProgress = document.getElementById('server-download-overall-progress');
if (overallProgress) {
overallProgress.textContent = `Overall: ${completedDownloads}/${totalDownloads} models completed`;
}
- if (progressBar) {
- if (status === 'downloading' && progress !== undefined) {
- progressBar.style.width = `${progress}%`;
- } else if (status === 'completed') {
- progressBar.style.width = '100%';
- } else if (status === 'error' || status === 'cancelled') {
- progressBar.style.width = '0%';
- }
- }
-
- if (speedInfo && speed) {
- speedInfo.textContent = `Speed: ${speed}`;
- }
-
- if (sizeInfo && downloaded && total) {
- sizeInfo.textContent = `Size: ${formatBytes(downloaded)} / ${formatBytes(total)}`;
- }
-
- // Update button visibility based on status
- if (pauseBtn && resumeBtn && cancelBtn) {
- if (status === 'downloading') {
- pauseBtn.style.display = 'inline-flex';
- resumeBtn.style.display = 'none';
- cancelBtn.style.display = 'inline-flex';
- } else if (status === 'paused') {
- pauseBtn.style.display = 'none';
- resumeBtn.style.display = 'inline-flex';
- cancelBtn.style.display = 'inline-flex';
- } else {
- pauseBtn.style.display = 'none';
- resumeBtn.style.display = 'none';
- cancelBtn.style.display = 'none';
- }
- }
+ // Update or create individual progress item
+ updateDownloadProgressItem(download_id, status, progress, downloaded, total, speed);
};
window.addEventListener('serverDownloadUpdate', updateHandler);
}
+// Update or create a progress item for a specific download
+function updateDownloadProgressItem(download_id, status, progress, downloaded, total, speed) {
+ // Declare variables at function scope so they're accessible across try blocks
+ let item = null;
+ let container = null;
+ const itemId = `download-item-${download_id.replace(/\//g, '-')}`;
+
+ try {
+ container = document.getElementById('server-download-items-container');
+ if (!container) return;
+
+ item = document.getElementById(itemId);
+
+ // Don't show queued items
+ if (status === 'queued') {
+ if (item) item.remove();
+ return;
+ }
+
+ // Remove completed/error items after a delay
+ if (status === 'completed' || status === 'error') {
+ if (item && !item.dataset.removing) {
+ item.dataset.removing = 'true';
+ setTimeout(() => {
+ try {
+ if (item && item.parentNode) item.remove();
+ } catch (e) {
+ console.error('[RunpodDirect] Error removing progress item:', e);
+ }
+ }, 2000);
+ }
+ }
+
+ // Create new item if it doesn't exist
+ if (!item) {
+ item = document.createElement('div');
+ item.id = itemId;
+ item.style.cssText = `
+ padding: 12px;
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 6px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ `;
+ container.appendChild(item);
+ }
+ } catch (e) {
+ console.error('[RunpodDirect] Error in updateDownloadProgressItem:', e);
+ return;
+ }
+
+ try {
+ // Status icon and color (no priority badge needed - downloading one at a time)
+ let statusIcon = '';
+ let statusColor = '#2196F3';
+ if (status === 'downloading') {
+ statusIcon = '
';
+ statusColor = '#2196F3';
+ } else if (status === 'completed') {
+ statusIcon = '
';
+ statusColor = '#4CAF50';
+ } else if (status === 'error') {
+ statusIcon = '
';
+ statusColor = '#ef4444';
+ } else if (status === 'paused') {
+ statusIcon = '
';
+ statusColor = '#FF9800';
+ }
+
+ const progressPercent = progress || 0;
+ const speedText = speed || '--';
+ const sizeText = downloaded && total ? `${formatBytes(downloaded)} / ${formatBytes(total)}` : '--';
+
+ if (item) {
+ item.innerHTML = `
+
+
+ ${statusIcon}${download_id}
+
+
+ ${progressPercent.toFixed(1)}%
+
+
+
+
+ Speed: ${speedText}
+ ${sizeText}
+
+ `;
+ }
+ } catch (e) {
+ console.error('[RunpodDirect] Error updating progress item HTML:', e);
+ }
+}
+
// Export functions for use in other modules
window.serverDownload = {
start: startServerDownload,
@@ -602,9 +643,10 @@ function injectServerDownloadButtons() {
const result = await startServerDownload(url, directory, filename);
if (result.success) {
- btnLabel.textContent = 'Downloading';
- statusIcon.className = 'pi pi-spin pi-spinner';
+ btnLabel.textContent = 'Queued';
+ statusIcon.className = 'pi pi-clock';
statusIcon.style.display = 'inline';
+ statusIcon.style.color = '#FF9800';
} else {
btnLabel.textContent = 'Error';
statusIcon.className = 'pi pi-times-circle';
@@ -619,7 +661,14 @@ function injectServerDownloadButtons() {
if (event.detail.download_id === download_id) {
const { status, error } = event.detail;
- if (status === 'downloading') {
+ if (status === 'queued') {
+ serverDownloadBtn.disabled = true;
+ btnLabel.textContent = 'Queued';
+ statusIcon.className = 'pi pi-clock';
+ statusIcon.style.display = 'inline';
+ statusIcon.style.color = '#FF9800';
+ } else if (status === 'downloading') {
+ serverDownloadBtn.disabled = true;
btnLabel.textContent = 'Downloading';
statusIcon.className = 'pi pi-spin pi-spinner';
statusIcon.style.display = 'inline';