forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
feat: playlist grouping in webamp browser
+29
-9
+29
-9
src/themes/webamp/browser/element.js
+29
-9
src/themes/webamp/browser/element.js
···
4
4
query,
5
5
whenElementsDefined,
6
6
} from "@common/element.js";
7
-
import { signal, untracked } from "@common/signal.js";
7
+
import { computed, signal, untracked } from "@common/signal.js";
8
8
9
9
/**
10
10
* @import {RenderArg} from "@common/element.d.ts"
···
41
41
);
42
42
43
43
$highlightedTrack = signal(/** @type {string | null} */ (null));
44
+
45
+
$groupedPlaylists = computed(() => {
46
+
const playlists = this.$output.value?.playlists.collection()
47
+
?.sort((a, b) => a.name.localeCompare(b.name));
48
+
if (!playlists) return [];
49
+
50
+
const ordered = playlists.filter((p) => !p.unordered);
51
+
const unordered = playlists.filter((p) => p.unordered);
52
+
53
+
return [
54
+
{ label: "Ordered", playlists: ordered },
55
+
{ label: "Unordered", playlists: unordered },
56
+
].filter((g) => g.playlists.length > 0);
57
+
});
44
58
45
59
// STATE
46
60
···
305
319
<select id="playlist-select" @change="${this.setSelectedPlaylistId}">
306
320
<option value="" ?selected="${!playlistId ||
307
321
playlistId === ``}">All tracks</option>
308
-
${this.$output.value?.playlists.collection().map((p) =>
322
+
${this.$groupedPlaylists().map((group) =>
309
323
html`
310
-
<option
311
-
value="${p.id}"
312
-
?selected="${p.id === playlistId}"
313
-
>
314
-
${p.name}
315
-
</option>
324
+
<optgroup label="${group.label}">
325
+
${group.playlists.map((p) =>
326
+
html`
327
+
<option
328
+
value="${p.id}"
329
+
?selected="${p.id === playlistId}"
330
+
>
331
+
${p.name}
332
+
</option>
333
+
`
334
+
)}
335
+
</optgroup>
316
336
`
317
-
) ?? nothing}
337
+
)}
318
338
</select>
319
339
</search>
320
340