A music player that connects to your cloud/distributed storage.
feat: add search input to auto-queue facet
+18
-1
+17
src/facets/tools/auto-queue.html.txt
+17
src/facets/tools/auto-queue.html.txt
···
17
17
</select>
18
18
</label>
19
19
</div>
20
+
<div class="row">
21
+
<label class="with-icon" for="search">
22
+
<i class="ph-bold ph-magnifying-glass"></i>
23
+
<input id="search" type="search" placeholder="Search" />
24
+
</label>
25
+
</div>
20
26
</div>
21
27
</main>
22
28
···
42
48
text-transform: uppercase;
43
49
}
44
50
51
+
label input,
45
52
label select {
46
53
flex: 1;
47
54
}
···
66
73
// Elements
67
74
const repeatBtn = document.querySelector("#repeat");
68
75
const shuffleBtn = document.querySelector("#shuffle");
76
+
const searchInput = document.querySelector("#search");
69
77
const playlistSelect = document.querySelector("#playlist");
70
78
71
79
// Repeat & Shuffle state
···
84
92
85
93
shuffleBtn.onclick = () => {
86
94
repeatShuffle.setShuffle(!repeatShuffle.shuffle());
95
+
};
96
+
97
+
// Search state
98
+
effect(() => {
99
+
searchInput.value = scope.searchTerm() ?? "";
100
+
});
101
+
102
+
searchInput.oninput = () => {
103
+
scope.setSearchTerm(searchInput.value.trim() || undefined);
87
104
};
88
105
89
106
// Playlist state
+1
-1
src/themes/webamp/browser/element.js
+1
-1
src/themes/webamp/browser/element.js