A music player that connects to your cloud/distributed storage.
chore: blur-search custom el
+36
-18
+36
-18
src/pages/constituent/blur/browser/_applet.astro
+36
-18
src/pages/constituent/blur/browser/_applet.astro
···
10
10
---
11
11
12
12
<main>
13
-
<search>
14
-
<form>
15
-
<input type="search" placeholder="Search" />
16
-
</form>
17
-
</search>
18
-
19
-
<blur-list> </blur-list>
13
+
<blur-search></blur-search>
14
+
<blur-list></blur-list>
20
15
</main>
21
16
22
17
<!-- STYLE -->
···
51
46
display: block;
52
47
flex: 1;
53
48
overflow: hidden;
49
+
user-select: none;
54
50
55
51
& ul {
56
52
height: 100%;
···
100
96
101
97
// Applet connections
102
98
const orchestrator = {
103
-
// processTracks: isMainGroup() ? applet("/orchestrator/process-tracks") : undefined,
99
+
processTracks: isMainGroup() ? applet("/orchestrator/process-tracks") : undefined,
104
100
searchTracks: isMainGroup()
105
101
? applet("/orchestrator/search-tracks", { groupId: context.groupId })
106
102
: undefined,
···
115
111
////////////////////////////////////////////
116
112
117
113
processor.search.then((search) => {
118
-
reactive(
119
-
search,
120
-
(data) => data.cacheId,
121
-
async () => {
122
-
console.log("Search cache id:", search.data.cacheId);
123
-
const tracks = await search.sendAction("search", $searchTerm().trim(), { worker: true });
124
-
$tracks(tracks);
125
-
},
126
-
);
114
+
async function fn() {
115
+
const tracks = await search.sendAction("search", $searchTerm().trim(), { worker: true });
116
+
$tracks(tracks);
117
+
}
118
+
119
+
reactive(search, (data) => data.cacheId, fn);
120
+
effect(fn);
127
121
});
128
122
129
123
////////////////////////////////////////////
···
134
128
const scope = `data-astro-cid-${astroScope}`;
135
129
136
130
////////////////////////////////////////////
131
+
// UI ░ SEARCH
132
+
////////////////////////////////////////////
133
+
134
+
liftAlien("blur-search", {
135
+
async init() {
136
+
// const input = document.createElement("input");
137
+
// input.type = "search";
138
+
// input.placeholder = "Search";
139
+
140
+
// const form = document.createElement("form");
141
+
// // form
142
+
// form.appendChild(input);
143
+
144
+
// const search = document.createElement("search");
145
+
// search.appendChild();
146
+
147
+
// const search = h("search", {}, []);
148
+
149
+
effect(() => {
150
+
//
151
+
});
152
+
},
153
+
});
154
+
155
+
////////////////////////////////////////////
137
156
// UI ░ LIST
138
157
////////////////////////////////////////////
139
158
···
147
166
this.innerHTML = html`
148
167
<ul ${scope}>
149
168
${$tracks()
150
-
.slice(0, 100)
151
169
.map((track: Track) => {
152
170
return html`<li ${scope}>${track.tags?.artist} - ${track.tags?.title}</li>`;
153
171
})