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

Adjust 'Use on your website' UX to coming soon.

Browse Source
This commit is contained in:
b1rdmania
2025-12-18 21:08:08 +00:00
parent d0be58296e
commit 02914bdcd0
2 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+7 -6
View File
@@ -697,23 +697,24 @@
</div>
</div>
<div class="section" id="embedSection" style="display:none;">
<div class="section" id="embedSection" data-not-live="true" style="display:none;">
<div class="section-header">
<h3 class="section-title">Use on your website</h3>
<p class="section-subtitle">Embed this generator as a widget.</p>
<h3 class="section-title">Use on your website <span style="color: rgba(255,255,255,0.5); font-weight: 500;">(Coming soon)</span></h3>
<p class="section-subtitle">Embeddable widget + multiple synth engines.</p>
</div>
<div class="divider"></div>
<div class="embed-card">
<div class="embed-card" style="opacity:0.55; filter: grayscale(20%); position:relative;">
<div style="position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0)); pointer-events:none;"></div>
<div class="embed-row">
<pre class="codeblock"><code id="embedCode">&lt;iframe src=&quot;...&quot;&gt;&lt;/iframe&gt;</code></pre>
<div style="display:flex; flex-direction:column; gap: calc(var(--spacing-unit) * 1.5);">
<button id="copyEmbedBtn" class="primary" type="button">Copy embed</button>
<button id="copyEmbedBtn" class="primary" type="button" disabled>Copy embed</button>
<span id="copyToast" class="copy-toast">Copied</span>
</div>
</div>
<div class="embed-hint">
<strong>Tip:</strong> iOS/Safari requires a tap before audio can start. Add <code>allow=&quot;autoplay&quot;</code> and expect a user gesture.
<strong>Note:</strong> This is not live yet. We’ll ship a dedicated <code>/embed</code> widget + style presets next.
</div>
</div>
</div>
src/main.ts
+8 -3
View File
@@ -134,7 +134,7 @@ class MotifApp {
this.nextResultBtn.addEventListener('click', () => this.handleNextResult());
// Embed snippet copy
// Embed snippet copy (may be disabled / not-live)
this.copyEmbedBtn?.addEventListener('click', () => void this.copyEmbedSnippet());
}
@@ -396,8 +396,9 @@ class MotifApp {
private updateEmbedSnippet(songTitle: string): void {
if (!this.embedSection || !this.embedCodeEl) return;
const origin = window.location.origin;
const url = `${origin}/embed?song=${encodeURIComponent(songTitle)}`;
const notLive = this.embedSection.getAttribute('data-not-live') === 'true';
const base = notLive ? 'https://YOUR_DOMAIN' : window.location.origin;
const url = `${base}/embed?song=${encodeURIComponent(songTitle)}`;
const snippet = `<iframe\n src=\"${url}\"\n width=\"420\"\n height=\"260\"\n style=\"border:0;border-radius:12px;overflow:hidden\"\n allow=\"autoplay\"\n></iframe>`;
@@ -408,6 +409,10 @@ class MotifApp {
private async copyEmbedSnippet(): Promise<void> {
if (!this.embedCodeEl) return;
if (this.embedSection?.getAttribute('data-not-live') === 'true') {
this.updateStatus('Embed is coming soon.');
return;
}
const text = this.embedCodeEl.textContent || '';
if (!text.trim()) return;