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

Add iOS 'Enable Audio' CTA for Motif playback.

Browse Source
This commit is contained in:
b1rdmania
2025-12-18 23:21:41 +00:00
parent 234f6e38b5
commit 9eb40ce614
4 changed files with 186 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+57
View File
@@ -429,6 +429,53 @@
font-size: 0.85em;
min-width: 55px;
}
/* iOS audio unlock (Motif) */
.ios-audio-banner {
margin-top: calc(var(--spacing-unit) * 2);
padding: calc(var(--spacing-unit) * 2);
border-radius: var(--radius);
border: 1px solid rgba(255, 170, 68, 0.22);
background: rgba(0, 0, 0, 0.25);
box-shadow: var(--shadow-sm);
display: none; /* toggled by JS */
}
.ios-audio-banner .row {
display: flex;
gap: calc(var(--spacing-unit) * 1.5);
align-items: center;
flex-wrap: wrap;
}
.ios-audio-banner .copy {
font-size: 12px;
color: var(--color-text-dim);
line-height: 1.35;
flex: 1;
min-width: 220px;
}
.ios-audio-banner .copy strong {
color: var(--color-text);
font-weight: 600;
}
.ios-audio-banner .state {
margin-top: calc(var(--spacing-unit) * 1);
font-size: 12px;
color: rgba(255, 170, 68, 0.85);
display: none;
}
.ios-audio-banner button {
padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 2);
border-radius: var(--radius);
border: 1px solid rgba(255, 170, 68, 0.35);
background: rgba(255, 170, 68, 0.12);
color: var(--color-text);
box-shadow: var(--shadow-sm);
font-weight: 600;
}
.ios-audio-banner button:hover:not(:disabled) {
border-color: rgba(255, 170, 68, 0.55);
box-shadow: var(--glow-secondary), var(--shadow-md);
}
.motif-kicker {
font-size: 0.85em;
color: #b6b6b6;
@@ -687,6 +734,16 @@
</div>
</div>
<div id="iosAudioBanner" class="ios-audio-banner" aria-live="polite">
<div class="row">
<div class="copy">
<strong>iOS Safari:</strong> tap once to enable audio, then press <strong>Generate &amp; Play</strong>.
</div>
<button id="enableAudioBtn" type="button">Enable Audio</button>
</div>
<div id="iosAudioState" class="state">Audio: …</div>
</div>
<div class="motif-progress-container" id="motifProgressContainer" style="display: none;">
<div class="progress-time">
<span id="motifCurrentTime">0:00</span>