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
+
-
-
-
-
-
-
-
-
-
-
-
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;
}