A music player that connects to your cloud/distributed storage.
1import { defineElement, DiffuseElement } from "~/common/element.js";
2import { signal } from "~/common/signal.js";
3import { listen } from "~/common/worker.js";
4
5/**
6 * @import {ProxiedActions} from "~/common/worker.d.ts";
7 * @import {Actions, Item, State} from "./types.d.ts"
8 */
9
10////////////////////////////////////////////
11// ELEMENT
12////////////////////////////////////////////
13
14/**
15 * @implements {ProxiedActions<Actions>}
16 */
17class QueueEngine extends DiffuseElement {
18 static NAME = "diffuse/engine/queue";
19 static WORKER_URL = "components/engine/queue/worker.js";
20
21 constructor() {
22 super();
23
24 /** @type {ProxiedActions<Actions & State>} */
25 this.proxy = this.workerProxy();
26
27 this.add = this.proxy.add;
28 this.clear = this.proxy.clear;
29 this.expel = this.proxy.expel;
30 this.fill = this.proxy.fill;
31 this.move = this.proxy.move;
32 this.shift = this.proxy.shift;
33 this.supply = this.proxy.supply;
34 this.unshift = this.proxy.unshift;
35 }
36
37 // SIGNALS
38
39 #future = signal(/** @type {Array<Item>} */ ([]));
40 #now = signal(/** @type {Item | null} */ (null));
41 #past = signal(/** @type {Array<Item>} */ ([]));
42 #supplyFingerprint = signal(/** @type {string | undefined} */ (undefined));
43
44 // STATE
45
46 future = this.#future.get;
47 now = this.#now.get;
48 past = this.#past.get;
49 supplyFingerprint = this.#supplyFingerprint.get;
50
51 // LIFECYCLE
52
53 /**
54 * @override
55 */
56 connectedCallback() {
57 super.connectedCallback();
58
59 // Sync data with worker
60 const link = this.workerLink();
61
62 // Listen for remote data changes
63 listen("future", this.#future.set, link);
64 listen("now", this.#now.set, link);
65 listen("past", this.#past.set, link);
66 listen("supplyFingerprint", this.#supplyFingerprint.set, link);
67
68 // Fetch current data state
69 this.proxy.future().then(this.#future.set);
70 this.proxy.now().then(this.#now.set);
71 this.proxy.past().then(this.#past.set);
72 this.proxy.supplyFingerprint().then(this.#supplyFingerprint.set);
73 }
74}
75
76export default QueueEngine;
77
78////////////////////////////////////////////
79// REGISTER
80////////////////////////////////////////////
81
82export const CLASS = QueueEngine;
83export const NAME = "de-queue";
84
85defineElement(NAME, QueueEngine);