Add fallback for iOS share when copy fails
When clipboard copy fails, shows a text input with the share link so users can manually select and copy it. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1220,6 +1220,10 @@
|
|||||||
<button id="copyLinkBtn" type="button" disabled>Copy link</button>
|
<button id="copyLinkBtn" type="button" disabled>Copy link</button>
|
||||||
<button id="shareToXBtn" type="button" disabled>Share to X</button>
|
<button id="shareToXBtn" type="button" disabled>Share to X</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="shareFallback" style="display: none; margin-top: 12px;">
|
||||||
|
<p style="font-size: 8px; margin: 0 0 8px 0; color: var(--gb-light);">Sorry, copy doesn't work on your device. Here's the link:</p>
|
||||||
|
<input id="shareFallbackInput" type="text" readonly style="width: 100%; padding: 8px; font-size: 8px; font-family: 'Press Start 2P', monospace; background: var(--gb-darkest); color: var(--gb-lightest); border: 2px solid var(--gb-light);" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+17
-1
@@ -55,6 +55,8 @@ class MotifApp {
|
|||||||
|
|
||||||
private copyLinkBtn!: HTMLButtonElement;
|
private copyLinkBtn!: HTMLButtonElement;
|
||||||
private shareToXBtn!: HTMLButtonElement;
|
private shareToXBtn!: HTMLButtonElement;
|
||||||
|
private shareFallback!: HTMLElement;
|
||||||
|
private shareFallbackInput!: HTMLInputElement;
|
||||||
|
|
||||||
// Embed snippet UI
|
// Embed snippet UI
|
||||||
private embedSection: HTMLElement | null = null;
|
private embedSection: HTMLElement | null = null;
|
||||||
@@ -127,6 +129,8 @@ class MotifApp {
|
|||||||
|
|
||||||
this.copyLinkBtn = document.getElementById('copyLinkBtn') as HTMLButtonElement;
|
this.copyLinkBtn = document.getElementById('copyLinkBtn') as HTMLButtonElement;
|
||||||
this.shareToXBtn = document.getElementById('shareToXBtn') as HTMLButtonElement;
|
this.shareToXBtn = document.getElementById('shareToXBtn') as HTMLButtonElement;
|
||||||
|
this.shareFallback = document.getElementById('shareFallback')!;
|
||||||
|
this.shareFallbackInput = document.getElementById('shareFallbackInput') as HTMLInputElement;
|
||||||
|
|
||||||
// iOS audio unlock UI (Motif)
|
// iOS audio unlock UI (Motif)
|
||||||
this.iosAudioBanner = document.getElementById('iosAudioBanner')!;
|
this.iosAudioBanner = document.getElementById('iosAudioBanner')!;
|
||||||
@@ -745,11 +749,21 @@ class MotifApp {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Show feedback
|
// Show feedback
|
||||||
|
if (copied) {
|
||||||
const originalText = this.copyLinkBtn.textContent;
|
const originalText = this.copyLinkBtn.textContent;
|
||||||
this.copyLinkBtn.textContent = copied ? 'Copied!' : 'Failed';
|
this.copyLinkBtn.textContent = 'Copied!';
|
||||||
|
this.shareFallback.style.display = 'none';
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.copyLinkBtn.textContent = originalText;
|
this.copyLinkBtn.textContent = originalText;
|
||||||
}, 1500);
|
}, 1500);
|
||||||
|
} else {
|
||||||
|
// Show fallback with the link for manual copying
|
||||||
|
this.shareFallbackInput.value = shareUrl;
|
||||||
|
this.shareFallback.style.display = 'block';
|
||||||
|
// Select the text so user can easily copy
|
||||||
|
this.shareFallbackInput.focus();
|
||||||
|
this.shareFallbackInput.select();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private async handleShareToX(): Promise<void> {
|
private async handleShareToX(): Promise<void> {
|
||||||
@@ -818,6 +832,8 @@ class MotifApp {
|
|||||||
this.copyLinkBtn.disabled = !(state === 'generated' && this.hasGenerated);
|
this.copyLinkBtn.disabled = !(state === 'generated' && this.hasGenerated);
|
||||||
this.shareToXBtn.style.display = state === 'generated' ? 'inline-block' : 'none';
|
this.shareToXBtn.style.display = state === 'generated' ? 'inline-block' : 'none';
|
||||||
this.shareToXBtn.disabled = !(state === 'generated' && this.hasGenerated);
|
this.shareToXBtn.disabled = !(state === 'generated' && this.hasGenerated);
|
||||||
|
// Hide share fallback when state changes
|
||||||
|
this.shareFallback.style.display = 'none';
|
||||||
|
|
||||||
// New search button only after generation
|
// New search button only after generation
|
||||||
if (this.newSearchBtn) {
|
if (this.newSearchBtn) {
|
||||||
|
|||||||
Reference in New Issue
Block a user