forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
feat: add ability to select playlist
+65
-10
+7
-4
src/components/orchestrator/auto-queue/element.js
+7
-4
src/components/orchestrator/auto-queue/element.js
···
50
50
this.effect(() => {
51
51
const tracks = tracksElement.tracks();
52
52
53
-
this.isLeader().then((isLeader) => {
53
+
this.isLeader().then(async (isLeader) => {
54
54
if (!isLeader) return;
55
55
queue.supply({ tracks });
56
56
});
···
58
58
59
59
// Automatically fill queue
60
60
let lastShuffle = repeatShuffle.shuffle();
61
+
let lastFingerprint = queue.supplyFingerprint();
61
62
62
63
this.effect(() => {
63
64
const trigger = queue.now();
64
-
const _other_trigger = queue.supplyFingerprint();
65
+
const fingerprint = queue.supplyFingerprint();
65
66
const shuffled = repeatShuffle.shuffle();
66
67
67
68
this.isLeader().then((isLeader) => {
68
69
if (!isLeader) return;
69
70
70
71
// Clear non-manual items from the queue
71
-
// when 'shuffle' gets turned off or on.
72
-
if (shuffled !== lastShuffle) {
72
+
// when 'shuffle' gets turned off or on;
73
+
// or when queue supply changes.
74
+
if (shuffled !== lastShuffle || fingerprint !== lastFingerprint) {
73
75
lastShuffle = shuffled;
76
+
lastFingerprint = fingerprint;
74
77
queue.clear({ manualOnly: true });
75
78
}
76
79
+47
-3
src/facets/tools/auto-queue.html.txt
+47
-3
src/facets/tools/auto-queue.html.txt
···
11
11
<span class="with-icon"><i class="ph-bold ph-star"></i> Favourite</span>
12
12
</button>
13
13
</div>
14
+
<hr />
15
+
<div class="row">
16
+
<label class="with-icon" for="playlist">
17
+
<i class="ph-bold ph-playlist"></i>
18
+
<select id="playlist">
19
+
<option value="">All tracks</option>
20
+
</select>
21
+
</label>
22
+
</div>
14
23
</div>
15
24
</main>
16
25
···
26
35
height: 100dvh;
27
36
}
28
37
29
-
.row {
30
-
display: flex;
31
-
gap: var(--space-2xs);
38
+
main {
39
+
padding: var(--space-md);
40
+
}
41
+
42
+
label {
43
+
flex: 1;
44
+
letter-spacing: var(--leading-relaxed);
45
+
text-transform: uppercase;
46
+
}
47
+
48
+
label select {
49
+
flex: 1;
32
50
}
33
51
</style>
34
52
···
43
61
44
62
const queue = foundation.engine.queue();
45
63
const repeatShuffle = foundation.engine.repeatShuffle();
64
+
const scope = foundation.engine.scope();
46
65
const favourites = foundation.orchestrator.favourites();
66
+
const output = foundation.orchestrator.output();
47
67
48
68
// Elements
49
69
const repeatBtn = document.querySelector("#repeat");
50
70
const shuffleBtn = document.querySelector("#shuffle");
51
71
const favouriteBtn = document.querySelector("#favourite");
72
+
const playlistSelect = document.querySelector("#playlist");
52
73
53
74
// Repeat & Shuffle state
54
75
effect(() => {
···
85
106
favouriteBtn.onclick = () => {
86
107
const track = queue.now();
87
108
if (track) favourites.toggle(track);
109
+
};
110
+
111
+
// Playlist state
112
+
effect(() => {
113
+
const playlists = output.playlists.collection().sort((a, b) => {
114
+
a.name.localeCompare(b.name);
115
+
});
116
+
117
+
const currentId = scope.playlistId();
118
+
119
+
playlistSelect.innerHTML = `<option value="">All tracks</option>`;
120
+
121
+
for (const playlist of playlists) {
122
+
const option = document.createElement("option");
123
+
option.value = playlist.id;
124
+
option.textContent = playlist.name;
125
+
option.selected = playlist.id === currentId;
126
+
playlistSelect.appendChild(option);
127
+
}
128
+
});
129
+
130
+
playlistSelect.onchange = () => {
131
+
scope.setPlaylistId(playlistSelect.value.length ? playlistSelect.value : undefined);
88
132
};
89
133
</script>
+10
-2
src/styles/wireframe/ui.css
+10
-2
src/styles/wireframe/ui.css
···
6
6
.panel {
7
7
border: 2px solid var(--form-color);
8
8
border-radius: var(--radius-md);
9
+
display: flex;
10
+
flex-direction: column;
11
+
gap: var(--space-sm);
9
12
padding: var(--space-sm);
10
13
}
11
14
···
23
26
display: inline-block;
24
27
font-size: var(--fs-xs);
25
28
font-family: inherit;
26
-
font-weight: 400;
29
+
font-weight: 500;
27
30
letter-spacing: var(--leading-relaxed);
28
31
line-height: 1;
29
32
padding: var(--space-xs) var(--space-sm);
···
126
129
.separator {
127
130
border: 0;
128
131
border-top: 2px solid var(--form-color);
129
-
margin: var(--space-md) 0;
132
+
}
133
+
134
+
.row {
135
+
display: flex;
136
+
flex-wrap: wrap;
137
+
gap: var(--space-xs);
130
138
}
131
139
132
140
/**