diff --git a/src/main.ts b/src/main.ts
index 2a02605..fd4e4c3 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -112,10 +112,13 @@ class MotifApp {
const volume = parseFloat((e.target as HTMLInputElement).value);
this.motifEngine.setVolume(volume);
});
- this.motifProgressBar.addEventListener('input', (e) => {
+ // Use both input and change for iOS compatibility
+ const seekHandler = (e: Event) => {
const progress = parseFloat((e.target as HTMLInputElement).value) / 100;
this.handleMotifSeek(progress);
- });
+ };
+ this.motifProgressBar.addEventListener('input', seekHandler);
+ this.motifProgressBar.addEventListener('change', seekHandler);
this.nextResultBtn.addEventListener('click', () => this.handleNextResult());
}
@@ -160,31 +163,27 @@ class MotifApp {
private displayResults(): void {
this.resultsBody.innerHTML = '';
-
+
this.searchResults.forEach((result, index) => {
const row = document.createElement('tr');
if (index === this.selectedResultIndex) {
row.classList.add('selected');
}
-
+
row.innerHTML = `
| ${result.title} |
- ${result.source} |
-
-
- |
- ${result.parsed ? Math.round(result.parsed.durationSec) + 's' : '?'} |
- ${result.parsed ? result.parsed.tracks.length : '?'} |
- |
+ ${result.parsed ? Math.round(result.parsed.durationSec) + 's' : '?'} |
+ ${result.parsed ? result.parsed.tracks.length : '?'} |
`;
-
+
+ // Make entire row clickable
+ row.addEventListener('click', () => this.selectResult(index));
+
this.resultsBody.appendChild(row);
});
-
+
this.resultsSection.classList.add('visible');
-
+
// Auto-select first result
if (this.searchResults.length > 0) {
this.selectResult(0);