diff --git a/js/ui/components/VideoModal.js b/js/ui/components/VideoModal.js index 96be58b1..089c8062 100644 --- a/js/ui/components/VideoModal.js +++ b/js/ui/components/VideoModal.js @@ -331,6 +331,10 @@ export class VideoModal { if (this.modalZapForm) { this.modalZapForm.addEventListener("submit", (event) => { event?.preventDefault?.(); + if (this.modalZapSendBtn?.dataset.completed === "true") { + this.closeZapDialog(); + return; + } if (this.modalZapSendBtn?.disabled) { return; } @@ -342,6 +346,15 @@ export class VideoModal { }); } + if (this.modalZapSendBtn) { + this.modalZapSendBtn.addEventListener("click", (event) => { + if (this.modalZapSendBtn?.dataset.completed === "true") { + event?.preventDefault?.(); + this.closeZapDialog(); + } + }); + } + if (this.modalZapAmountInput) { const amountHandler = () => { this.dispatch("zap:amount-change", { @@ -712,6 +725,7 @@ export class VideoModal { this.setZapStatus("", "neutral"); this.clearZapReceipts(); this.setZapRetryPending(false); + this.setZapCompleted(false); } setZapSplitSummary(text) { @@ -894,21 +908,67 @@ export class VideoModal { } if (pending) { + delete this.modalZapSendBtn.dataset.completed; this.modalZapSendBtn.dataset.retryPending = "true"; + if (summary) { + this.modalZapSendBtn.dataset.retrySummary = summary; + } else { + delete this.modalZapSendBtn.dataset.retrySummary; + } + } else { + delete this.modalZapSendBtn.dataset.retryPending; + delete this.modalZapSendBtn.dataset.retrySummary; + } + + this.applyZapSendButtonState(); + } + + setZapCompleted(completed) { + if (!this.modalZapSendBtn) { + return; + } + + if (completed) { + delete this.modalZapSendBtn.dataset.retryPending; + delete this.modalZapSendBtn.dataset.retrySummary; + this.modalZapSendBtn.dataset.completed = "true"; + } else { + delete this.modalZapSendBtn.dataset.completed; + } + + this.applyZapSendButtonState(); + } + + applyZapSendButtonState() { + if (!this.modalZapSendBtn) { + return; + } + + if (this.modalZapSendBtn.dataset.completed === "true") { + this.modalZapSendBtn.textContent = "Done"; + this.modalZapSendBtn.setAttribute("aria-label", "Close zap dialog"); + this.modalZapSendBtn.title = "Close zap dialog"; + return; + } + + if (this.modalZapSendBtn.dataset.retryPending === "true") { this.modalZapSendBtn.textContent = "Retry"; this.modalZapSendBtn.setAttribute( "aria-label", "Retry failed zap shares" ); + const summary = this.modalZapSendBtn.dataset.retrySummary; if (summary) { this.modalZapSendBtn.title = summary; + } else { + this.modalZapSendBtn.removeAttribute("title"); } - } else { - delete this.modalZapSendBtn.dataset.retryPending; - this.modalZapSendBtn.textContent = "Send"; - this.modalZapSendBtn.setAttribute("aria-label", "Send a zap"); - this.modalZapSendBtn.removeAttribute("title"); + return; } + + this.modalZapSendBtn.textContent = "Send"; + this.modalZapSendBtn.setAttribute("aria-label", "Send a zap"); + this.modalZapSendBtn.removeAttribute("title"); } getViewCountElement() { diff --git a/js/ui/zapController.js b/js/ui/zapController.js index a65155c1..d3b95da6 100644 --- a/js/ui/zapController.js +++ b/js/ui/zapController.js @@ -104,6 +104,7 @@ export default class ZapController { this.modalZapInFlight = false; this.resetRetryState(); if (this.videoModal) { + this.videoModal.setZapCompleted(false); this.videoModal.resetZapForm({ amount: preserveAmount ? this.modalZapAmountValue || "" : "", comment: "", @@ -150,6 +151,8 @@ export default class ZapController { return; } + this.videoModal?.setZapCompleted(false); + const numericAmount = Number.isFinite(Number(amount)) ? Number(amount) : this.modalZapAmountValue; @@ -182,10 +185,15 @@ export default class ZapController { Array.isArray(this.modalZapRetryState?.shares) && this.modalZapRetryState.shares.length ) { - await this.executeRetry({ + const retrySuccess = await this.executeRetry({ walletSettings, comment: trimmedComment, }); + if (retrySuccess) { + this.modalZapCommentValue = ""; + this.videoModal?.resetZapForm({ amount: "", comment: "" }); + this.videoModal?.setZapCompleted(true); + } this.applyDefaultAmount(); return; } @@ -215,6 +223,7 @@ export default class ZapController { this.resetRetryState(); this.modalZapCommentValue = ""; this.videoModal?.resetZapForm({ amount: "", comment: "" }); + this.videoModal?.setZapCompleted(true); this.applyDefaultAmount(); } catch (error) { this.handleZapError({ error, amount: roundedAmount, comment: trimmedComment, walletSettings }); @@ -240,6 +249,7 @@ export default class ZapController { if (!this.videoModal) { return; } + this.videoModal.setZapCompleted(false); this.videoModal.setZapStatus("", "neutral"); this.videoModal.clearZapReceipts(); this.videoModal.setZapRetryPending(false);