A music player that connects to your cloud/distributed storage.
feat: queue-tracks orchestrator
+96
-2
+5
src/component/orchestrator/process-tracks/element.js
+5
src/component/orchestrator/process-tracks/element.js
···
11
11
// ELEMENT
12
12
////////////////////////////////////////////
13
13
14
+
/**
15
+
* Processes inputs into tracks whenever
16
+
* the already existing tracks are loaded
17
+
* from the assigned output element.
18
+
*/
14
19
class ProcessTracksOrchestrator extends DiffuseElement {
15
20
constructor() {
16
21
super();
+78
src/component/orchestrator/queue-tracks/element.js
+78
src/component/orchestrator/queue-tracks/element.js
···
1
+
import { DiffuseElement, query } from "@common/element.js";
2
+
3
+
/**
4
+
* @import {InputElement, OutputElement, Track} from "@component/core/types.d.ts"
5
+
*/
6
+
7
+
////////////////////////////////////////////
8
+
// ELEMENT
9
+
////////////////////////////////////////////
10
+
11
+
/**
12
+
* Fill the queue automatically with tracks
13
+
* whenever tracks have been loaded,
14
+
* or the tracks collection changes.
15
+
*/
16
+
class QueueTracksOrchestrator extends DiffuseElement {
17
+
constructor() {
18
+
super();
19
+
20
+
/** @type {InputElement} */
21
+
this.input = query(this, "input-selector");
22
+
23
+
/** @type {OutputElement} */
24
+
this.output = query(this, "output-selector");
25
+
26
+
/** @type {import("@component/engine/queue/element.js").CLASS} */
27
+
this.queue = query(this, "queue-engine-selector");
28
+
}
29
+
30
+
// LIFECYCLE
31
+
32
+
/**
33
+
* @override
34
+
*/
35
+
async connectedCallback() {
36
+
super.connectedCallback();
37
+
38
+
// Wait until defined
39
+
await customElements.whenDefined(this.output.localName);
40
+
41
+
// ...
42
+
this.effect(() => {
43
+
const tracks = this.output.tracks.collection();
44
+
this.poolAvailable(tracks);
45
+
});
46
+
}
47
+
48
+
// 🌊
49
+
50
+
/**
51
+
* @param {Track[]} cachedTracks
52
+
*/
53
+
async poolAvailable(cachedTracks) {
54
+
const groups = await this.input.groupConsult(cachedTracks);
55
+
56
+
/** @type {Track[]} */
57
+
let availableTracks = [];
58
+
59
+
Object.values(groups).forEach((value) => {
60
+
if (value.available === false) return;
61
+
availableTracks = availableTracks.concat(value.tracks);
62
+
}, []);
63
+
64
+
// Set pool
65
+
await this.queue.pool(availableTracks);
66
+
}
67
+
}
68
+
69
+
export default QueueTracksOrchestrator;
70
+
71
+
////////////////////////////////////////////
72
+
// REGISTER
73
+
////////////////////////////////////////////
74
+
75
+
export const CLASS = QueueTracksOrchestrator;
76
+
export const NAME = "do-queue-tracks";
77
+
78
+
customElements.define(NAME, QueueTracksOrchestrator);
+13
-2
src/theme/blur/index.vto
+13
-2
src/theme/blur/index.vto
···
4
4
<link rel="stylesheet" href="../../styles/theme/blur/index.css" />
5
5
</head>
6
6
<body>
7
+
<!-- UI -->
8
+
<main>
9
+
</main>
10
+
11
+
<!-- Engines -->
7
12
<de-audio></de-audio>
8
13
<de-queue></de-queue>
9
14
15
+
<!-- Inputs, Outputs & Processors -->
10
16
<di-opensubsonic></di-opensubsonic>
11
17
<do-indexed-db></do-indexed-db>
12
18
<dp-metadata></dp-metadata>
13
19
20
+
<!-- Orchestrators -->
14
21
<do-process-tracks
15
22
input-selector="di-opensubsonic"
16
23
metadata-processor-selector="dp-metadata"
17
24
output-selector="do-indexed-db"
18
25
></do-process-tracks>
19
26
20
-
<main>
21
-
</main>
27
+
<do-queue-tracks
28
+
input-selector="di-opensubsonic"
29
+
output-selector="do-indexed-db"
30
+
queue-selector="de-queue"
31
+
></do-queue-tracks>
22
32
33
+
<!-- Scripts -->
23
34
<script src="index.js" type="module"></script>
24
35
</body>
25
36
</html>