Add New search reset after generation.

Keeps the generated artifact view intact but provides a footer New search button that stops audio, resets state, scrolls to top, and focuses the search input.
This commit is contained in:
b1rdmania
2025-12-26 21:26:23 +00:00
parent 7cbf582fa1
commit 9c6a47ab4e
2 changed files with 34 additions and 0 deletions
+3
View File
@@ -571,6 +571,8 @@
margin-top: calc(var(--spacing-unit) * 6);
display: flex;
justify-content: center;
gap: calc(var(--spacing-unit) * 1.5);
flex-wrap: wrap;
}
.player-section {
@@ -1133,6 +1135,7 @@
<div class="footer">
<button id="faqBtnFooter" class="faq-link" type="button">FAQ</button>
<button id="newSearchBtn" class="faq-link" type="button">New search</button>
</div>
<div id="faqModalBackdrop" class="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="faqTitle">
+31
View File
@@ -70,6 +70,7 @@ class MotifApp {
// FAQ modal
private faqBtn!: HTMLButtonElement;
private faqBtnFooter: HTMLButtonElement | null = null;
private newSearchBtn: HTMLButtonElement | null = null;
private faqBackdrop!: HTMLElement;
private faqCloseBtn!: HTMLButtonElement;
@@ -152,6 +153,7 @@ class MotifApp {
// FAQ modal
this.faqBtn = document.getElementById('faqBtn') as HTMLButtonElement;
this.faqBtnFooter = document.getElementById('faqBtnFooter') as HTMLButtonElement | null;
this.newSearchBtn = document.getElementById('newSearchBtn') as HTMLButtonElement | null;
this.faqBackdrop = document.getElementById('faqModalBackdrop')!;
this.faqCloseBtn = document.getElementById('faqCloseBtn') as HTMLButtonElement;
}
@@ -199,6 +201,7 @@ class MotifApp {
// FAQ
this.faqBtn.addEventListener('click', () => this.openFaq());
this.faqBtnFooter?.addEventListener('click', () => this.openFaq());
this.newSearchBtn?.addEventListener('click', () => this.resetToNewSearch());
this.faqCloseBtn.addEventListener('click', () => this.closeFaq());
this.faqBackdrop.addEventListener('click', (e) => {
if (e.target === this.faqBackdrop) this.closeFaq();
@@ -218,6 +221,34 @@ class MotifApp {
this.faqBackdrop.classList.remove('open');
}
private resetToNewSearch(): void {
// Stop all audio and return to the search workbench.
this.stopPreview();
this.handleMotifStop();
this.hasGenerated = false;
this.isMotifPlaying = false;
this.motifResumeProgress = 0;
this.currentMIDI = null;
this.setState('idle');
this.updateStatus('Ready. Enter a song name to search for MIDI files.');
try {
window.scrollTo({ top: 0, behavior: 'smooth' });
} catch {
// ignore
}
// Focus search field for immediate next query
window.setTimeout(() => {
try {
this.songInput.focus();
this.songInput.select();
} catch {
// ignore
}
}, 150);
}
private isIOSLike(): boolean {
const ua = navigator.userAgent || '';
const iOS = /iPad|iPhone|iPod/.test(ua);