Experiment to rebuild Diffuse using web applets.
feat: shuffle queue
+38
-19
+3
-3
src/pages/constituent/blur/artwork-controller/_applet.astro
+3
-3
src/pages/constituent/blur/artwork-controller/_applet.astro
···
170
170
.controller menu {
171
171
align-items: center;
172
172
display: flex;
173
-
font-size: var(--fs-md);
173
+
font-size: var(--fs-lg);
174
174
gap: var(--space-lg);
175
175
justify-content: center;
176
-
margin: var(--space-sm) 0;
176
+
margin: var(--space-md) 0;
177
177
padding: 0;
178
178
text-align: center;
179
179
}
···
185
185
186
186
.controller .ph-pause,
187
187
.controller .ph-play {
188
-
font-size: var(--fs-lg);
188
+
font-size: var(--fs-xl);
189
189
}
190
190
191
191
/* Volume */
+7
-3
src/scripts/engine/queue/types.d.ts
+7
-3
src/scripts/engine/queue/types.d.ts
···
1
1
import type { Track } from "@applets/core/types";
2
2
3
+
export type Item<Stats = TrackStats, Tags = TrackTags> = Track & {
4
+
manualEntry?: boolean;
5
+
};
6
+
3
7
export interface State<Stats = TrackStats, Tags = TrackTags> {
4
-
past: Track<Stats, Tags>[];
5
-
now: Track<Stats, Tags> | null;
6
-
future: Track<Stats, Tags>[];
8
+
past: Item<Stats, Tags>[];
9
+
now: Item<Stats, Tags> | null;
10
+
future: Item<Stats, Tags>[];
7
11
}
+28
-13
src/scripts/engine/queue/worker.ts
+28
-13
src/scripts/engine/queue/worker.ts
···
1
1
import type { Track } from "@applets/core/types.js";
2
-
import type { State } from "./types";
3
-
import { expose, transfer } from "@scripts/common.ts";
2
+
import type { Item, State } from "./types";
3
+
import { arrayShuffle, expose, transfer } from "@scripts/common.ts";
4
4
5
5
////////////////////////////////////////////
6
6
// STATE
···
26
26
27
27
// Actions
28
28
29
-
function add(state: State, items: Track[]): State {
29
+
function add(state: State, items: Item[]): State {
30
30
return transfer({ ...state, future: [...state.future, ...items] });
31
31
}
32
32
···
67
67
68
68
// 🛠️
69
69
70
-
// TODO: Shuffle, limit track amount, etc.
70
+
// TODO: Most likely there's a more performant solution
71
71
function fill(state: State): State {
72
-
return state.future.length < QUEUE_SIZE
73
-
? add(
74
-
state,
75
-
internal.pool.slice(
76
-
state.past.length,
77
-
state.past.length + (QUEUE_SIZE - state.future.length),
78
-
),
79
-
)
80
-
: state;
72
+
if (state.future.length >= QUEUE_SIZE) return state;
73
+
74
+
let reducedPool = internal.pool.reduce(
75
+
({ past, pool }: { past: Set<string>; pool: Track[] }, track: Track) => {
76
+
if (past.has(track.id))
77
+
return {
78
+
past: past.difference(new Set(track.id)),
79
+
pool,
80
+
};
81
+
82
+
return {
83
+
past,
84
+
pool: [...pool, track],
85
+
};
86
+
},
87
+
{ past: new Set(state.past.map((t) => t.id)), pool: [] },
88
+
).pool;
89
+
90
+
if (reducedPool.length === 0) {
91
+
reducedPool = internal.pool;
92
+
}
93
+
94
+
const poolSelection = arrayShuffle(reducedPool).slice(0, QUEUE_SIZE - state.future.length);
95
+
return add(state, poolSelection);
81
96
}