118 lines
5.8 KiB
Plaintext
118 lines
5.8 KiB
Plaintext
<style>
|
|
.components-reconnect-first-attempt-visible,
|
|
.components-reconnect-repeated-attempt-visible,
|
|
.components-reconnect-failed-visible,
|
|
.components-pause-visible,
|
|
.components-resume-failed-visible,
|
|
.components-rejoining-animation {
|
|
display: none;
|
|
}
|
|
|
|
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
|
|
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
|
|
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
|
|
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
|
|
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
|
|
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
|
|
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
|
|
display: block;
|
|
}
|
|
</style>
|
|
|
|
<dialog id="components-reconnect-modal" class="bg-white w-80 my-[20vh] mx-auto p-8 rounded-lg shadow-lg opacity-0 transition-all duration-500 backdrop:bg-black/40 backdrop:animate-[fadeIn_0.5s_ease-in-out] open:animate-[slideUp_1.5s_cubic-bezier(0.05,0.89,0.25,1.02)_0.3s,fadeIn_0.5s_ease-in-out_0.3s]" data-nosnippet>
|
|
<div class="flex flex-col items-center gap-4">
|
|
<div class="components-rejoining-animation relative w-20 h-20" aria-hidden="true">
|
|
<div class="absolute border-[3px] border-[#0087ff] rounded-full animate-[ping_1.5s_cubic-bezier(0,0.2,0.8,1)_infinite]"></div>
|
|
<div class="absolute border-[3px] border-[#0087ff] rounded-full animate-[ping_1.5s_cubic-bezier(0,0.2,0.8,1)_infinite] -delay-500"></div>
|
|
</div>
|
|
<p class="components-reconnect-first-attempt-visible m-0 text-center">
|
|
Rejoining the server...
|
|
</p>
|
|
<p class="components-reconnect-repeated-attempt-visible m-0 text-center">
|
|
Rejoin failed... trying again in <span id="components-seconds-to-next-attempt"></span> seconds.
|
|
</p>
|
|
<p class="components-reconnect-failed-visible m-0 text-center">
|
|
Failed to rejoin.<br />Please retry or reload the page.
|
|
</p>
|
|
<button id="components-reconnect-button" class="components-reconnect-failed-visible border-0 bg-[#6b9ed2] text-white py-1 px-6 rounded hover:bg-[#3b6ea2] active:bg-[#6b9ed2]">
|
|
Retry
|
|
</button>
|
|
<p class="components-pause-visible m-0 text-center">
|
|
The session has been paused by the server.
|
|
</p>
|
|
<p class="components-resume-failed-visible m-0 text-center">
|
|
Failed to resume the session.<br />Please retry or reload the page.
|
|
</p>
|
|
<button id="components-resume-button" class="components-pause-visible components-resume-failed-visible border-0 bg-[#6b9ed2] text-white py-1 px-6 rounded hover:bg-[#3b6ea2] active:bg-[#6b9ed2]">
|
|
Resume
|
|
</button>
|
|
</div>
|
|
</dialog>
|
|
|
|
<script>
|
|
(function () {
|
|
// Set up event handlers
|
|
const reconnectModal = document.getElementById("components-reconnect-modal");
|
|
reconnectModal.addEventListener("components-reconnect-state-changed", handleReconnectStateChanged);
|
|
|
|
const retryButton = document.getElementById("components-reconnect-button");
|
|
retryButton.addEventListener("click", retry);
|
|
|
|
const resumeButton = document.getElementById("components-resume-button");
|
|
resumeButton.addEventListener("click", resume);
|
|
|
|
function handleReconnectStateChanged(event) {
|
|
if (event.detail.state === "show") {
|
|
reconnectModal.showModal();
|
|
} else if (event.detail.state === "hide") {
|
|
reconnectModal.close();
|
|
} else if (event.detail.state === "failed") {
|
|
document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
|
|
} else if (event.detail.state === "rejected") {
|
|
location.reload();
|
|
}
|
|
}
|
|
|
|
async function retry() {
|
|
document.removeEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
|
|
|
|
try {
|
|
// Reconnect will asynchronously return:
|
|
// - true to mean success
|
|
// - false to mean we reached the server, but it rejected the connection (e.g., unknown circuit ID)
|
|
// - exception to mean we didn't reach the server (this can be sync or async)
|
|
const successful = await Blazor.reconnect();
|
|
if (!successful) {
|
|
// We have been able to reach the server, but the circuit is no longer available.
|
|
// We'll reload the page so the user can continue using the app as quickly as possible.
|
|
const resumeSuccessful = await Blazor.resumeCircuit();
|
|
if (!resumeSuccessful) {
|
|
location.reload();
|
|
} else {
|
|
reconnectModal.close();
|
|
}
|
|
}
|
|
} catch (err) {
|
|
// We got an exception, server is currently unavailable
|
|
document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
|
|
}
|
|
}
|
|
|
|
async function resume() {
|
|
try {
|
|
const successful = await Blazor.resumeCircuit();
|
|
if (!successful) {
|
|
location.reload();
|
|
}
|
|
} catch {
|
|
reconnectModal.classList.replace("components-reconnect-paused", "components-reconnect-resume-failed");
|
|
}
|
|
}
|
|
|
|
async function retryWhenDocumentBecomesVisible() {
|
|
if (document.visibilityState === "visible") {
|
|
await retry();
|
|
}
|
|
}
|
|
})();
|
|
</script> |