A music player that connects to your cloud/distributed storage.
feat: shared queue if enabled
+30
-7
+18
-6
src/component/engine/queue/element.js
+18
-6
src/component/engine/queue/element.js
···
18
18
constructor() {
19
19
super();
20
20
21
-
// Setup shared worker
22
-
const worker = new SharedWorker(new URL("./worker.js", import.meta.url), {
23
-
type: "module",
24
-
});
21
+
// Setup worker
22
+
const group = this.getAttribute("group") || crypto.randomUUID();
23
+
const isShared = this.hasAttribute("shared");
24
+
const name = `diffuse/engine/queue/${group}`;
25
+
const url = new URL("./worker.js", import.meta.url);
25
26
26
-
const port = worker.port;
27
-
port.start();
27
+
let port;
28
+
29
+
if (isShared) {
30
+
const worker = new SharedWorker(url, { name, type: "module" });
31
+
port = worker.port;
32
+
port.start();
33
+
} else {
34
+
const worker = new Worker(url, { name, type: "module" });
35
+
port = worker;
36
+
}
28
37
29
38
// Sync data with worker
30
39
listen("future", this.future, port);
···
33
42
34
43
// Worker proxy
35
44
this.add = use("add", port);
45
+
this.pool = use("pool", port);
46
+
this.shift = use("shift", port);
47
+
this.unshift = use("unshift", port);
36
48
}
37
49
38
50
// SIGNALS
+1
src/component/engine/queue/worker.js
+1
src/component/engine/queue/worker.js
+6
src/index.vto
+6
src/index.vto
···
1
1
---
2
2
layout: layouts/diffuse.vto
3
3
4
+
themes:
5
+
- url: "theme/blur/"
6
+
title: "Blur"
7
+
4
8
engines:
5
9
- url: "engine/audio/"
6
10
title: "Audio"
···
43
47
For example, most themes here will limit the currently playing audio tracks to one item,
44
48
but you might as well create a DJ theme that can play multiple items at the same time.
45
49
</p>
50
+
51
+
{{ await comp.list({ items: themes }) }}
46
52
</section>
47
53
48
54
<!-- ABSTRACTIONS -->
+5
-1
src/theme/blur/index.vto
+5
-1
src/theme/blur/index.vto
···
4
4
<link rel="stylesheet" href="../../styles/theme/blur/index.css" />
5
5
</head>
6
6
<body>
7
-
<de-queue></de-queue>
7
+
<de-queue group="deck-a" shared></de-queue>
8
8
9
9
<script type="module">
10
10
import * as Queue from "../../component/engine/queue/element.js";
···
14
14
15
15
effect(() => {
16
16
console.log("Future:", queue.future())
17
+
})
18
+
19
+
effect(() => {
20
+
console.log("Now:", queue.now())
17
21
})
18
22
</script>
19
23
</body>