import { lufi } from "~/lib/lufi.js"; import { filesize } from "~/lib/filesize.esm.min.js"; import { notify, escapeHtml } from "~/lib/utils.js"; document.addEventListener("DOMContentLoaded", () => { const passwordFormDOM = document.getElementById("password-form"); /** * Update the DOM depending on the situation * * @param {string} type Can be aborted, success or ongoing * @param {Node} existingCard Existing card to be replaced with the new one * @returns */ const updateDOM = (type) => { const blockDOM = document .querySelector(`template#block-download-${type}`) .content.cloneNode(true).children[0]; blockDOM.querySelector(".size").innerText = filesize( blockDOM.querySelector(".size").dataset.filesize ); if (blockDOM.querySelector(".description").dataset.isZipped === "true") { blockDOM .querySelector(".icon") .classList.replace("fa-file", "fa-file-zipper"); } document.getElementById("download-container").replaceChildren(blockDOM); if (type === "success") { document.getElementById("download-button").focus(); } return blockDOM; }; const isPasswordNeeded = () => passwordFormDOM !== null; const onPasswordEvents = () => { passwordFormDOM.onsubmit = (event) => { event.preventDefault(); passwordFormDOM.classList.add("is-hidden"); startDownload(); }; }; const showZipContent = (zipFile) => { const zipContainerDOM = document.getElementById("zip-container"); const showZipButtonDOM = document.getElementById("show-zip-button"); zipContainerDOM.classList.remove("is-hidden"); showZipButtonDOM.href = window.location; // Avoid removing the client key from URL when clicking showZipButtonDOM.onclick = () => { const zipContentDOM = zipContainerDOM.querySelector(".content"); document.body.style.cursor = "wait"; showZipButtonDOM.style.cursor = "wait"; lufi .decompress(zipFile) .andThen((job) => job.waitForCompletion()) .map((job) => { zipContentDOM.replaceChildren(); zipContentDOM.classList.remove("has-text-centered"); job.archiveFiles.forEach((file) => { const itemDOM = document .querySelector("template#card-zipped-item") .content.cloneNode(true).children[0]; itemDOM.querySelector(".name").innerText = escapeHtml(file.name); itemDOM.querySelector(".size").innerText = filesize(file.size); const downloadItemDOM = itemDOM.querySelector(".action-download"); downloadItemDOM.download = escapeHtml(file.name); downloadItemDOM.href = URL.createObjectURL(file); zipContentDOM.append(itemDOM); }); document.body.style.cursor = "auto"; }) .mapErr((error) => { console.error(error); }); }; }; const startDownload = () => { lufi .download(window.location, document.getElementById("password")?.value) .andThen((job) => { const blockDOM = updateDOM("ongoing"); warnOnReload(); job.onProgress(() => { const percent = Math.round( (job.lufiFile.chunksReady * 100) / job.lufiFile.totalChunks ); blockDOM.querySelector(".progress").value = percent; blockDOM.querySelector(".progress").innerText = percent; blockDOM.querySelector(".progress-text").innerText = percent + "%"; }); document.getElementById("abort-button").onclick = () => { job.terminate(); warnOnReload(false); updateDOM("aborted"); document.getElementById("reload-button").onclick = (event) => { event.preventDefault(); window.location.reload(); }; }; return job.waitForCompletion(); }) .mapErr((error) => { updateDOM("error").querySelector(".message-body").innerText = error.message; warnOnReload(false); }) .andThen((job) => { notify(i18n.fileDownloaded, job.lufiFile.name); const downloadDOM = updateDOM("success"); const downloadButtonDOM = document.getElementById("download-button"); const blobURL = URL.createObjectURL(job.downloadedFile); downloadButtonDOM.href = blobURL; downloadButtonDOM.download = escapeHtml(job.lufiFile.name); const isZipped = downloadDOM.querySelector(".description").dataset.isZipped === "true"; let render; if (job.lufiFile.type.match(/^image\//) !== null) { render = `${escapeHtml(
            job.lufiFile.name
          )}`; } else if (job.lufiFile.type.match(/^video\//) !== null) { render = ``; } else if (job.lufiFile.type.match(/^audio\//) !== null) { render = ``; } if (render) { downloadDOM.querySelector(".render").innerHTML = render; } if (isZipped) { showZipContent(job.downloadedFile); } }); }; const warnOnReload = (toWarn = true) => { window.onbeforeunload = toWarn ? i18n.confirmExit : null; }; if (isPasswordNeeded()) { onPasswordEvents(); } else { startDownload(); } });