import { ipcRenderer } from "electron"; function domReady( condition: DocumentReadyState[] = ["complete", "interactive"], ) { return new Promise((resolve) => { if (condition.includes(document.readyState)) { resolve(true); } else { document.addEventListener("readystatechange", () => { if (condition.includes(document.readyState)) { resolve(true); } }); } }); } const safeDOM = { append(parent: HTMLElement, child: HTMLElement) { if (!Array.from(parent.children).find((e) => e === child)) { return parent.appendChild(child); } }, remove(parent: HTMLElement, child: HTMLElement) { if (Array.from(parent.children).find((e) => e === child)) { return parent.removeChild(child); } }, }; /** * https://tobiasahlin.com/spinkit * https://connoratherton.com/loaders * https://projects.lukehaas.me/css-loaders * https://matejkustec.github.io/SpinThatShit */ function useLoading() { const className = `loaders-css__square-spin`; const styleContent = ` @keyframes square-spin { 0% { transform: rotate(0deg); background-image: url('icon_cube_border.png'); /* Replace with the URL of your image */ background-size: cover; /* Scale the image to cover the entire container */ } 25% { transform: perspective(100px) rotateX(180deg) rotateY(0); background-image: url('icon_cube_border.png'); /* Replace with the URL of your image */ background-size: cover; /* Scale the image to cover the entire container */ } 50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); background-image: url('icon_cube_border.png'); /* Replace with the URL of your image */ background-size: cover; /* Scale the image to cover the entire container */ } 75% { transform: perspective(100px) rotateX(0) rotateY(180deg); background-image: url('icon_cube_border.png'); /* Replace with the URL of your image */ background-size: cover; /* Scale the image to cover the entire container */ } 100% { transform: perspective(100px) rotateX(0) rotateY(0); background-image: url('icon_cube_border.png'); /* Replace with the URL of your image */ background-size: cover; /* Scale the image to cover the entire container */ } } .${className} > div { animation-fill-mode: both; width: 50px; height: 50px; background: #fff; animation: square-spin 6s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; } .app-loading-wrap { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background: #282c34; z-index: 99999; } `; const oStyle = document.createElement("style"); const oDiv = document.createElement("div"); oStyle.id = "app-loading-style"; oStyle.innerHTML = styleContent; oDiv.className = "app-loading-wrap"; oDiv.innerHTML = `
`; return { appendLoading() { safeDOM.append(document.head, oStyle); safeDOM.append(document.body, oDiv); }, removeLoading() { safeDOM.remove(document.head, oStyle); safeDOM.remove(document.body, oDiv); }, }; } // ---------------------------------------------------------------------- const { appendLoading, removeLoading } = useLoading(); domReady().then(appendLoading); window.onmessage = (ev) => { ev.data.payload === "removeLoading" && removeLoading(); }; setTimeout(removeLoading, 4999); window.addEventListener("DOMContentLoaded", () => { // we are using this area for implementing the electron runUpdater // we need access to DOM for displaying updater results in GUI // close app, update and restart document .getElementById("update_and_install") .addEventListener("click", () => { ipcRenderer.send("request-restart-and-install-update"); }); }); // IPC ACTION FOR AUTO UPDATER ipcRenderer.on("action-updater", (event, arg) => { if (arg.status == "download-progress") { var progressinfo = "(" + Math.round(arg.progress.transferred / 1024) + "kB /" + Math.round(arg.progress.total / 1024) + "kB)" + " @ " + Math.round(arg.progress.bytesPerSecond / 1024) + "kByte/s"; document.getElementById("UpdateProgressInfo").innerHTML = progressinfo; document .getElementById("UpdateProgressBar") .setAttribute("aria-valuenow", arg.progress.percent); document .getElementById("UpdateProgressBar") .setAttribute("style", "width:" + arg.progress.percent + "%;"); } if (arg.status == "checking-for-update") { //document.title = document.title + ' - v' + arg.version; //updateTitle( // config.myCall, // config.tnc_host, // config.tnc_port, // " -v " + arg.version, //); document.getElementById("updater_status").innerHTML = ''; document.getElementById("updater_status").className = "btn btn-secondary btn-sm"; document.getElementById("update_and_install").style.display = "none"; } if (arg.status == "update-downloaded") { document.getElementById("update_and_install").removeAttribute("style"); document.getElementById("updater_status").innerHTML = ''; document.getElementById("updater_status").className = "btn btn-success btn-sm"; // HERE WE NEED TO RUN THIS SOMEHOW... //mainLog.info('quit application and install update'); //autoUpdater.quitAndInstall(); } if (arg.status == "update-not-available") { document.getElementById("updater_last_version").innerHTML = arg.info.releaseName; document.getElementById("updater_last_update").innerHTML = arg.info.releaseDate; document.getElementById("updater_release_notes").innerHTML = arg.info.releaseNotes; document.getElementById("updater_status").innerHTML = ''; document.getElementById("updater_status").className = "btn btn-success btn-sm"; document.getElementById("update_and_install").style.display = "none"; } if (arg.status == "update-available") { document.getElementById("updater_status").innerHTML = ''; document.getElementById("updater_status").className = "btn btn-warning btn-sm"; document.getElementById("update_and_install").style.display = "none"; } if (arg.status == "error") { document.getElementById("updater_status").innerHTML = ''; document.getElementById("updater_status").className = "btn btn-danger btn-sm"; document.getElementById("update_and_install").style.display = "none"; } });