forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
feat: output managers should be lazy
+57
-13
+18
-5
src/components/configurator/output/element.js
+18
-5
src/components/configurator/output/element.js
···
1
1
import { DiffuseElement } from "@common/element.js";
2
-
import { computed, signal } from "@common/signal.js";
2
+
import { batch, computed, signal } from "@common/signal.js";
3
3
4
4
/**
5
5
* @import {Track} from "@definitions/types.d.ts"
···
60
60
if (out) return out.tracks.state();
61
61
62
62
const def = this.#defaultOutput.value;
63
-
if (def) def.tracks.state();
63
+
if (def) return def.tracks.state();
64
64
65
-
return def === undefined ? "loading" : "loaded";
65
+
return this.#setupFinished.value ? "loaded" : "sleeping";
66
66
}),
67
67
},
68
68
};
···
85
85
/** @type {Output | null | undefined} */ (undefined),
86
86
);
87
87
88
+
#setupFinished = signal(false);
89
+
88
90
// LIFECYCLE
89
91
90
92
/**
···
93
95
async connectedCallback() {
94
96
super.connectedCallback();
95
97
98
+
/** @type {Output | null | undefined} */
99
+
let defaultOutput = undefined;
100
+
96
101
const def_ault = this.getAttribute("default");
97
-
if (def_ault) this.#defaultOutput.value = await this.#findOutput(def_ault);
102
+
if (def_ault) {
103
+
defaultOutput = await this.#findOutput(def_ault);
104
+
}
105
+
106
+
const selectedOutput = await this.#findSelectedOutput();
98
107
99
-
this.#selectedOutput.value = await this.#findSelectedOutput();
108
+
batch(() => {
109
+
this.#defaultOutput.value = defaultOutput;
110
+
this.#selectedOutput.value = selectedOutput;
111
+
this.#setupFinished.value = true;
112
+
});
100
113
}
101
114
102
115
// MISC
+10
-5
src/components/output/common.js
+10
-5
src/components/output/common.js
···
1
-
import { effect, signal } from "@common/signal.js";
1
+
import { computed, effect, signal, untracked } from "@common/signal.js";
2
2
3
3
/**
4
4
* @import {OutputManager, OutputManagerProperties} from "./types.d.ts"
···
11
11
*/
12
12
export function outputManager({ init, tracks }) {
13
13
const t = signal(/** @type {Tracks} */ (tracks.empty()));
14
-
const ts = signal(/** @type {"loading" | "loaded"} */ ("loading"));
14
+
const ts = signal(
15
+
/** @type {"loading" | "loaded" | "sleeping"} */ ("sleeping"),
16
+
);
15
17
16
18
async function loadTracks() {
17
19
if (init && (await init()) === false) return;
20
+
ts.value = "loading";
18
21
t.value = await tracks.get();
19
22
ts.value = "loaded";
20
23
}
21
24
22
-
effect(loadTracks);
23
-
24
25
return {
25
26
tracks: {
26
-
collection: t.get,
27
+
collection: computed(() => {
28
+
if (untracked(() => ts.value === "sleeping")) loadTracks();
29
+
return t.value;
30
+
}),
27
31
reload: loadTracks,
28
32
save: async (newTracks) => {
33
+
if (untracked(() => ts.value === "sleeping")) loadTracks();
29
34
t.value = newTracks;
30
35
await tracks.put(newTracks);
31
36
},
+1
-1
src/components/output/polymorphic/indexed-db/element.js
+1
-1
src/components/output/polymorphic/indexed-db/element.js
+1
-1
src/components/output/types.d.ts
+1
-1
src/components/output/types.d.ts
+1
-1
src/components/transformer/output/base.js
+1
-1
src/components/transformer/output/base.js
+14
src/testing/output.js
+14
src/testing/output.js
···
1
+
import Output from "@components/configurator/output/element.js";
2
+
import { effect } from "@common/signal.js";
3
+
4
+
const output = new Output();
5
+
6
+
document.body.append(output);
7
+
8
+
effect(() => {
9
+
console.log(output.tracks.state());
10
+
});
11
+
12
+
effect(() => {
13
+
console.log(output.tracks.collection());
14
+
});