Experiment to rebuild Diffuse using web applets.
feat: improve cycling through tracks using queue
author
Steven Vandevelde
date
(Jun 14, 2025, 7:38 PM +0200)
commit
a9cf2668
a9cf2668d4e2dd27a521c636bffa9140ded7326e
parent
4cc022bf
4cc022bfc22d9fe333f88ba84c647b84f3f59526
+28
-15
+8
-3
src/pages/constituents/blur/artwork-controller/_applet.astro
+8
-3
src/pages/constituents/blur/artwork-controller/_applet.astro
···
383
383
384
384
reactive(
385
385
engine.audio,
386
-
(data) => data.items[engine.queue.data.now?.id ?? Infinity]?.isPlaying ?? false,
386
+
(data) =>
387
+
data.isPlaying && (data.items[engine.queue.data.now?.id ?? Infinity]?.isPlaying ?? false),
387
388
(isPlaying) => setTimeout(() => setIsPlaying(isPlaying), 0),
388
389
);
389
390
···
409
410
engine.queue,
410
411
(data) => comparable(data.future),
411
412
async () => {
412
-
const track = engine.queue.data.now || engine.queue.data.future[0];
413
+
const track = engine.queue.data.now;
414
+
413
415
if (!track) {
414
416
setActiveTrack(undefined);
415
417
setArtwork([]);
···
582
584
}
583
585
}
584
586
585
-
function previous() {}
587
+
function previous() {
588
+
// TODO:
589
+
// engine.queue.sendAction("shift");
590
+
}
586
591
587
592
function next() {
588
593
engine.queue.sendAction("shift");
+3
src/pages/engine/audio/_applet.astro
+3
src/pages/engine/audio/_applet.astro
···
27
27
28
28
// Initial state
29
29
context.data = {
30
+
isPlaying: false,
30
31
items: {},
31
32
volume: {
32
33
default: vol ? parseFloat(vol) : 0.5,
···
267
268
function pauseEvent(event: Event) {
268
269
const audio = event.target as HTMLAudioElement;
269
270
updateItems(audio.id, { isPlaying: false });
271
+
update({ isPlaying: false });
270
272
}
271
273
272
274
function playEvent(event: Event) {
273
275
const audio = event.target as HTMLAudioElement;
274
276
updateItems(audio.id, { isPlaying: true });
277
+
update({ isPlaying: true });
275
278
276
279
// In case audio was preloaded:
277
280
if (audio.readyState === 4) finishedLoading(event);
+1
src/pages/engine/audio/types.d.ts
+1
src/pages/engine/audio/types.d.ts
+4
-2
src/pages/engine/queue/_applet.astro
+4
-2
src/pages/engine/queue/_applet.astro
···
1
1
<script>
2
-
import type { QueueItem, State } from "./types.d.ts";
2
+
import type { Track } from "@applets/core/types";
3
+
import type { State } from "./types.d.ts";
4
+
3
5
import { register } from "@scripts/applets/common";
4
6
5
7
////////////////////////////////////////////
···
25
27
context.setActionHandler("add", add);
26
28
context.setActionHandler("shift", shift);
27
29
28
-
function add(items: QueueItem[]) {
30
+
function add(items: Track[]) {
29
31
update({ future: [...context.data.future, ...items] });
30
32
}
31
33
+12
-10
src/pages/orchestrator/queue-audio-tracks/_applet.astro
+12
-10
src/pages/orchestrator/queue-audio-tracks/_applet.astro
···
34
34
await engine.queue.sendAction("add", tracks, {
35
35
timeoutDuration: 60000,
36
36
});
37
+
38
+
// Automatically insert track if there isn't any
39
+
if (!engine.queue.data.now) {
40
+
await engine.queue.sendAction("shift");
41
+
}
37
42
}
38
43
39
44
////////////////////////////////////////////
···
81
86
engine.queue,
82
87
(data) => data.now?.id,
83
88
async () => {
84
-
const playingNow = engine.queue.data.now;
89
+
const activeTrack = engine.queue.data.now;
90
+
const isPlaying = engine.audio.data.isPlaying;
85
91
86
92
// Play new active queue item
87
93
// TODO: Take URL expiration timestamp into account
···
89
95
engine.audio.sendAction(
90
96
"render",
91
97
{
92
-
audio: playingNow
98
+
audio: activeTrack
93
99
? [
94
100
{
95
-
id: playingNow.id,
101
+
id: activeTrack.id,
96
102
isPreload: false,
97
-
url: await inputUrl(configurator.input, playingNow.uri).then((a) => a?.url),
103
+
url: await inputUrl(configurator.input, activeTrack.uri).then((a) => a?.url),
98
104
},
99
105
]
100
106
: // NOTE: This probably isn't correct, keep preloads?
101
107
[],
102
-
play: playingNow
103
-
? {
104
-
audioId: playingNow.id,
105
-
}
106
-
: undefined,
108
+
play: activeTrack && isPlaying ? { audioId: activeTrack.id } : undefined,
107
109
},
108
110
{
109
111
timeoutDuration: 60000,
···
111
113
);
112
114
113
115
// Add more tracks to the queue if needed
114
-
if (playingNow) fill();
116
+
if (activeTrack) fill();
115
117
},
116
118
);
117
119