86 lines
3.3 KiB
JavaScript
86 lines
3.3 KiB
JavaScript
import { formatBytes } from "./filebrowser-utils.js";
|
|
import { concealElement, revealElement } from "./motion.js";
|
|
|
|
export function createTransferPanel({ onCancel }) {
|
|
const transferPanel = document.getElementById("transfer-panel");
|
|
const transferList = document.getElementById("transfer-list");
|
|
|
|
function addTransferToUI(transfer) {
|
|
if (!transferPanel || !transferList) return;
|
|
const transferItem = document.createElement("div");
|
|
transferItem.id = `transfer-${transfer.id}`;
|
|
transferItem.className =
|
|
"transfer-item bg-slate-800/50 border border-slate-700 rounded-lg p-3";
|
|
|
|
const icon = transfer.type === "upload" ? "fa-upload" : "fa-download";
|
|
const color = transfer.type === "upload" ? "text-blue-400" : "text-green-400";
|
|
|
|
transferItem.innerHTML = `
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-2 flex-1 min-w-0">
|
|
<i class="fa-solid ${icon} ${color}"></i>
|
|
<span class="text-sm truncate transfer-name"></span>
|
|
</div>
|
|
<button class="cancel-btn text-red-400 hover:text-red-300 px-2" type="button">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</button>
|
|
</div>
|
|
<div class="progress-bar-container w-full bg-slate-700 rounded-full h-2 mb-1">
|
|
<div class="progress-bar bg-blue-500 h-2 rounded-full transition-all duration-300" style="width: ${transfer.progress}%"></div>
|
|
</div>
|
|
<div class="flex justify-between text-xs text-slate-400">
|
|
<span class="progress-text">${transfer.progress}%</span>
|
|
<span class="size-text">${formatBytes(transfer.sent || transfer.received || 0)} / ${formatBytes(transfer.total)}</span>
|
|
</div>
|
|
`;
|
|
|
|
const nameEl = transferItem.querySelector(".transfer-name");
|
|
if (nameEl) {
|
|
nameEl.textContent = transfer.fileName;
|
|
}
|
|
const cancelBtn = transferItem.querySelector(".cancel-btn");
|
|
if (cancelBtn) {
|
|
cancelBtn.addEventListener("click", () => onCancel(transfer.id));
|
|
}
|
|
|
|
transferList.appendChild(transferItem);
|
|
if (transferPanel.classList.contains("hidden")) {
|
|
revealElement(transferPanel, { duration: 180, offset: 6 });
|
|
}
|
|
revealElement(transferItem, { duration: 190, offset: 7 });
|
|
}
|
|
|
|
function updateTransferProgress(transferId, progress, current, total) {
|
|
const transferItem = document.getElementById(`transfer-${transferId}`);
|
|
if (!transferItem) return;
|
|
|
|
const progressBar = transferItem.querySelector(".progress-bar");
|
|
const progressText = transferItem.querySelector(".progress-text");
|
|
const sizeText = transferItem.querySelector(".size-text");
|
|
|
|
if (progressBar) progressBar.style.width = `${progress}%`;
|
|
if (progressText) progressText.textContent = `${progress}%`;
|
|
if (sizeText) {
|
|
sizeText.textContent = `${formatBytes(current)} / ${formatBytes(total)}`;
|
|
}
|
|
}
|
|
|
|
async function removeTransfer(transferId) {
|
|
const transferItem = document.getElementById(`transfer-${transferId}`);
|
|
if (transferItem) {
|
|
await concealElement(transferItem, { duration: 130, offset: -5 });
|
|
transferItem.remove();
|
|
}
|
|
|
|
if (transferList && transferList.children.length === 0) {
|
|
await concealElement(transferPanel, { duration: 120, offset: 5 });
|
|
}
|
|
}
|
|
|
|
return {
|
|
addTransferToUI,
|
|
removeTransfer,
|
|
updateTransferProgress,
|
|
};
|
|
}
|