Impaczus/motif
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace copy button with text box for sharing

Browse Source 
Simple solution: show the link in a selectable text box
Works everywhere without clipboard API issues

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
b1rdmania
2025-12-29 12:59:34 +00:00
parent eb615b37f4
commit 31310a6ea3
2 changed files with 17 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+6 -3
View File
@@ -1100,9 +1100,12 @@
</div>
</div>
<div style="margin-top: 14px; display: flex; align-items: center; gap: 12px;">
<button id="copyLinkBtn" type="button" disabled>Copy link</button>
<span id="copyLinkConfirm" style="display: none; font-size: 8px; color: var(--gb-lightest);">Link copied!</span>
<div style="margin-top: 14px;">
<button id="copyLinkBtn" type="button" disabled>Share</button>
<div id="shareLinkBox" style="display: none; margin-top: 12px;">
<input type="text" id="shareLinkInput" readonly style="width: 100%; font-size: 8px; padding: 10px;" />
<div style="margin-top: 6px; font-size: 8px; color: var(--gb-dark);">Select and copy the link above</div>
</div>
</div>
</div>
src/main.ts
+11 -43
View File
@@ -58,7 +58,8 @@ class MotifApp {
private iosAudioState!: HTMLElement;
private copyLinkBtn!: HTMLButtonElement;
private copyLinkConfirm!: HTMLElement;
private shareLinkBox!: HTMLElement;
private shareLinkInput!: HTMLInputElement;
// Embed snippet UI
private embedSection: HTMLElement | null = null;
@@ -135,7 +136,8 @@ class MotifApp {
this.motifDuration = document.getElementById('motifDuration')!;
this.copyLinkBtn = document.getElementById('copyLinkBtn') as HTMLButtonElement;
this.copyLinkConfirm = document.getElementById('copyLinkConfirm') as HTMLElement;
this.shareLinkBox = document.getElementById('shareLinkBox') as HTMLElement;
this.shareLinkInput = document.getElementById('shareLinkInput') as HTMLInputElement;
// iOS audio unlock UI (Motif)
this.iosAudioBanner = document.getElementById('iosAudioBanner')!;
@@ -183,7 +185,7 @@ class MotifApp {
this.motifProgressBar.addEventListener('input', seekHandler);
this.motifProgressBar.addEventListener('change', seekHandler);
this.copyLinkBtn.addEventListener('click', () => void this.handleCopyLink());
this.copyLinkBtn.addEventListener('click', () => this.handleCopyLink());
// Embed snippet copy (may be disabled / not-live)
this.copyEmbedBtn?.addEventListener('click', () => void this.copyEmbedSnippet());
@@ -737,14 +739,12 @@ class MotifApp {
}
}
private async handleCopyLink(): Promise<void> {
private handleCopyLink(): void {
if (!this.hasGenerated) return;
const result = this.searchResults[this.selectedResultIndex];
if (!result?.midiUrl) return;
const title = this.cleanTitleForShare(result.title || 'WARIO SYNTH');
// Build share URL immediately (no async before copy/share!)
// Build share URL
let shareUrl: string;
if (result.source === 'bitmidi') {
const m = String(result.midiUrl).match(/\/uploads\/(\d+)\.mid/i);
@@ -757,42 +757,10 @@ class MotifApp {
shareUrl = `${window.location.origin}/play?u=${encodeURIComponent(result.midiUrl)}`;
}
// On mobile: use native share sheet (better UX)
if (navigator.share) {
try {
await navigator.share({
title: `${title} - WARIO SYNTH`,
url: shareUrl
});
this.copyLinkConfirm.style.display = 'inline';
this.copyLinkConfirm.textContent = 'Shared!';
window.setTimeout(() => {
this.copyLinkConfirm.style.display = 'none';
}, 2000);
return;
} catch {
// User cancelled or share failed - fall through to clipboard
}
}
// Desktop: copy to clipboard
try {
this.copyLinkBtn.disabled = true;
await navigator.clipboard.writeText(shareUrl);
this.copyLinkConfirm.style.display = 'inline';
this.copyLinkConfirm.textContent = 'Link copied!';
window.setTimeout(() => {
this.copyLinkConfirm.style.display = 'none';
}, 3000);
} catch (err) {
this.copyLinkConfirm.style.display = 'inline';
this.copyLinkConfirm.textContent = 'Copy failed';
window.setTimeout(() => {
this.copyLinkConfirm.style.display = 'none';
}, 3000);
} finally {
this.copyLinkBtn.disabled = false;
}
// Show the link in a text box for easy copying
this.shareLinkInput.value = shareUrl;
this.shareLinkBox.style.display = 'block';
this.shareLinkInput.select();
}
private setState(state: 'idle' | 'results' | 'selected' | 'generated'): void {