diff --git a/index.html b/index.html index e2c7157..30cc27c 100644 --- a/index.html +++ b/index.html @@ -399,41 +399,24 @@ } } - .results-controls { + .results-header { display: flex; - gap: calc(var(--spacing-unit) * 1.5); align-items: center; + justify-content: space-between; + gap: calc(var(--spacing-unit) * 2); flex-wrap: wrap; - padding: calc(var(--spacing-unit) * 2); - background: var(--color-surface); - border-radius: var(--radius); - border: 1px solid var(--color-border); - box-shadow: var(--shadow-sm); - margin-top: calc(var(--spacing-unit) * 2); + margin: 0 0 calc(var(--spacing-unit) * 2) 0; } - .results-controls .volume-control { - flex: 1; - min-width: 220px; + .results-header h3 { + margin: 0; + } + .results-header .volume-control { margin-top: 0; + min-width: 260px; + flex: 0 1 360px; } - .results-controls .actions { - margin-left: auto; - display: inline-flex; - gap: calc(var(--spacing-unit) * 1.25); - align-items: center; - flex-wrap: wrap; - } - @media (max-width: 768px) { - .results-controls { - flex-direction: column; - align-items: stretch; - } - .results-controls .actions { - margin-left: 0; - width: 100%; - display: flex; - flex-direction: column; - } + .results-header .volume-control label { + font-size: 12px; } .confidence-bar { @@ -887,7 +870,13 @@
Ready. Enter a song name to search for MIDI files.
-

Search Results

+
+

Search Results

+
+ + +
+
@@ -900,17 +889,6 @@
- -
-
- - -
-
- - -
-
diff --git a/src/main.ts b/src/main.ts index f669937..6acbaac 100644 --- a/src/main.ts +++ b/src/main.ts @@ -27,7 +27,6 @@ class MotifApp { private selectedMeta!: HTMLElement; // Preview player controls - private soundfontStopBtn!: HTMLButtonElement; private soundfontVolumeSlider!: HTMLInputElement; // Motif controls @@ -46,7 +45,6 @@ class MotifApp { private enableAudioBtn!: HTMLButtonElement; private iosAudioState!: HTMLElement; - private nextResultBtn!: HTMLButtonElement; private copyLinkBtn!: HTMLButtonElement; // Embed snippet UI @@ -102,7 +100,6 @@ class MotifApp { this.selectedMeta = document.getElementById('selectedMeta')!; // Preview player controls - this.soundfontStopBtn = document.getElementById('soundfontStopBtn') as HTMLButtonElement; this.soundfontVolumeSlider = document.getElementById('soundfontVolume') as HTMLInputElement; // Motif controls @@ -115,7 +112,6 @@ class MotifApp { this.motifCurrentTime = document.getElementById('motifCurrentTime')!; this.motifDuration = document.getElementById('motifDuration')!; - this.nextResultBtn = document.getElementById('nextResultBtn') as HTMLButtonElement; this.copyLinkBtn = document.getElementById('copyLinkBtn') as HTMLButtonElement; // iOS audio unlock UI (Motif) @@ -145,7 +141,6 @@ class MotifApp { }); // Preview player (row buttons in results table) - this.soundfontStopBtn.addEventListener('click', () => this.stopPreview(true)); this.soundfontVolumeSlider.addEventListener('input', (e) => { const volume = parseFloat((e.target as HTMLInputElement).value); this.soundfontPlayer?.setVolume(volume); @@ -166,7 +161,6 @@ class MotifApp { this.motifProgressBar.addEventListener('input', seekHandler); this.motifProgressBar.addEventListener('change', seekHandler); - this.nextResultBtn.addEventListener('click', () => this.handleNextResult()); this.copyLinkBtn.addEventListener('click', () => void this.handleCopyLink()); // Embed snippet copy (may be disabled / not-live) @@ -361,7 +355,6 @@ class MotifApp { await player.play(); this.playingPreviewIndex = index; - this.soundfontStopBtn.disabled = false; this.updatePreviewButtons(); this.updateStatus('Previewing MIDI…'); @@ -387,7 +380,6 @@ class MotifApp { } this.soundfontPlayer?.stop(); this.playingPreviewIndex = null; - this.soundfontStopBtn.disabled = true; this.updatePreviewButtons(); if (updateStatus) this.updateStatus('Preview stopped.'); } @@ -544,11 +536,6 @@ class MotifApp { return `${mins}:${secs.toString().padStart(2, '0')}`; } - private handleNextResult(): void { - const nextIndex = (this.selectedResultIndex + 1) % this.searchResults.length; - this.selectResult(nextIndex); - } - private hideResults(): void { this.resultsSection.classList.remove('visible'); this.playerSection.classList.remove('visible'); @@ -556,15 +543,12 @@ class MotifApp { private enablePlayerControls(): void { this.motifBtn.disabled = false; - this.nextResultBtn.disabled = this.searchResults.length <= 1; this.copyLinkBtn.disabled = this.searchResults.length === 0; } private disablePlayerControls(): void { - this.soundfontStopBtn.disabled = true; this.motifBtn.disabled = true; this.motifStopBtn.disabled = true; - this.nextResultBtn.disabled = true; this.copyLinkBtn.disabled = true; }