A music player that connects to your cloud/distributed storage.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

chore: blur-search custom el

+36 -18
+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 })