A music player that connects to your cloud/distributed storage.
feat: webamp add shuffled batch
+51
-17
src/images/icons/windows_98/cd_drive-0.png
src/images/icons/windows_98/cd_drive-0.png
This is a binary file and will not be displayed.
src/images/icons/windows_98/cd_drive_purple-3.png
src/images/icons/windows_98/cd_drive_purple-3.png
This is a binary file and will not be displayed.
src/images/icons/windows_98/cd_drive_purple-5.png
src/images/icons/windows_98/cd_drive_purple-5.png
This is a binary file and will not be displayed.
src/images/icons/windows_98/multimedia-4.png
src/images/icons/windows_98/multimedia-4.png
This is a binary file and will not be displayed.
+45
-17
src/themes/webamp/index.js
+45
-17
src/themes/webamp/index.js
···
6
6
import "@components/orchestrator/queue-tracks/element.js";
7
7
import "@components/orchestrator/search-tracks/element.js";
8
8
import "@components/processor/metadata/element.js";
9
-
import "@components/processor/search/element.js";
10
9
11
10
import * as Input from "@components/configurator/input/element.js";
12
11
import * as Queue from "@components/engine/queue/element.js";
12
+
import * as Search from "@components/processor/search/element.js";
13
13
14
14
import { component } from "@common/element.js";
15
15
import { effect, signal, untracked } from "@common/signal.js";
···
20
20
21
21
import WindowManager from "./window-manager/element.js";
22
22
import WebampElement from "./webamp/element.js";
23
+
24
+
/**
25
+
* @import {OutputElement} from "@components/output/types.d.ts"
26
+
* @import {Track} from "@definitions/types.d.ts"
27
+
*/
23
28
24
29
const input = component(Input);
25
30
const queue = component(Queue);
31
+
const search = component(Search);
32
+
33
+
/** @type {OutputElement<Track[]> | null} */
34
+
const output = document.querySelector("#output");
35
+
if (!output) throw new Error("Missing output element");
26
36
27
37
globalThis.queue = queue;
28
-
globalThis.output = document.querySelector("#output");
38
+
globalThis.output = output;
29
39
30
40
////////////////////////////////////////////
31
41
// 📡
···
82
92
}
83
93
});
84
94
95
+
////////////////////////////////////////////
96
+
// 📡
97
+
////////////////////////////////////////////
98
+
85
99
/**
86
100
* Whenever the queue changes update the playlist.
87
101
*/
···
133
147
}
134
148
});
135
149
136
-
/**
137
-
* AUTOPLAY:
138
-
* Make sure there's always some random tracks in the queue.
139
-
*/
140
-
effect(() => {
141
-
const _trigger = queue.now();
142
-
queue.fill({ amount: 10, shuffled: true });
143
-
});
150
+
/** */
151
+
const tracksPromise = Promise.withResolvers();
144
152
145
153
effect(() => {
146
-
const _trigger = queue.poolHash();
147
-
queue.fill({ amount: 10, shuffled: true });
154
+
const state = output.tracks.state();
155
+
if (state !== "loaded") return;
156
+
157
+
const cacheId = search.cacheId();
158
+
if (cacheId === "") return;
148
159
149
-
// Automatically insert track if there isn't any
150
-
if (!queue.now()) queue.shift();
160
+
tracksPromise.resolve("loaded");
151
161
});
152
162
153
163
////////////////////////////////////////////
···
159
169
if (element instanceof HTMLElement) {
160
170
element.addEventListener("dblclick", () => {
161
171
const f = element.querySelector("label")?.getAttribute("for");
162
-
if (f) windowManager()?.toggleWindow(f);
172
+
if (f) return windowManager()?.toggleWindow(f);
163
173
});
164
174
}
165
175
});
166
176
177
+
// Add batch
178
+
document.body.querySelector("#desktop-batch")?.addEventListener(
179
+
"dblclick",
180
+
() => {
181
+
tracksPromise.promise.then(() => {
182
+
addBatch();
183
+
});
184
+
},
185
+
);
186
+
167
187
// Toggle Winamp if click that desktop item
168
188
let winampIsShown = true;
169
189
170
190
document.body.querySelector("#desktop-winamp")?.addEventListener(
171
191
"dblclick",
172
192
() => {
173
-
if (winampIsShown) amp.close();
174
-
else {
193
+
if (winampIsShown) {
194
+
amp.close();
195
+
} else {
175
196
amp.reopen();
176
197
winampIsShown = true;
177
198
}
···
186
207
////////////////////////////////////////////
187
208
// 🛠️
188
209
////////////////////////////////////////////
210
+
211
+
function addBatch() {
212
+
queue.fill({ augment: true, amount: 50, shuffled: true });
213
+
214
+
// Automatically insert track if there isn't any
215
+
if (!queue.now()) queue.shift();
216
+
}
189
217
190
218
function windowManager() {
191
219
const w = document.body.querySelector("dtw-window-manager");
+6
src/themes/webamp/index.vto
+6
src/themes/webamp/index.vto
···
127
127
<img src="images/icons/windows_98/directory_explorer-5.png" height="32" />
128
128
<label for="browser-window">Browse collection</label>
129
129
</a>
130
+
131
+
<!-- INSERT -->
132
+
<a class="button desktop__item" id="desktop-batch">
133
+
<img src="images/icons/windows_98/multimedia-4.png" height="32" />
134
+
<label>Add shuffled batch</label>
135
+
</a>
130
136
</section>
131
137
132
138
<!-- ⚡️ -->