forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
fix: constituent loader examples
+25
-6
+2
-1
src/themes/loader/constituent/examples/generate-playlist.txt
+2
-1
src/themes/loader/constituent/examples/generate-playlist.txt
+7
-4
src/themes/loader/constituent/examples/now-playing.txt
+7
-4
src/themes/loader/constituent/examples/now-playing.txt
···
1
1
<main>
2
-
<div id="now-playing">Loading tracks ...</div>
2
+
<p id="now-playing">Loading tracks ...</p>
3
3
<button>⏭</button>
4
4
</main>
5
5
···
12
12
import foundation from "./common/constituents/foundation.js";
13
13
import { computed, effect } from "./common/signal.js";
14
14
15
-
const components = foundation.assemblage.queueManagement();
16
-
const queue = components.engine.queue;
15
+
foundation.features.processInputs();
16
+
foundation.features.fillQueueAutomatically();
17
+
18
+
const output = foundation.orchestrator.output();
19
+
const queue = foundation.engine.queue();
17
20
18
21
const isLoadingTracks = computed(() => {
19
-
return components.orchestrator.output.tracks.state() !== "loaded";
22
+
return output.tracks.state() !== "loaded";
20
23
});
21
24
22
25
effect(() => {
+16
-1
src/themes/loader/constituent/index.js
+16
-1
src/themes/loader/constituent/index.js
···
92
92
const editor = new EditorView({
93
93
parent: editorContainer,
94
94
doc: `
95
+
<main>
96
+
<h1 id="now-playing">
97
+
Waiting on tracks & queue to load ...
98
+
</h1>
99
+
</main>
100
+
101
+
<style>
102
+
@import "./styles/base.css";
103
+
@import "./styles/diffuse/page.css";
104
+
</style>
105
+
95
106
<script type="module">
96
107
import foundation from "./common/constituents/foundation.js";
97
108
import { effect } from "./common/signal.js";
98
109
99
-
const components = foundation.assemblage.queueManagement();
110
+
const components = foundation.features.fillQueueAutomatically();
111
+
const myHtmlElement = document.querySelector("#now-playing");
100
112
101
113
effect(() => {
102
114
const currentlyPlaying = components.engine.queue.now();
115
+
if (currentlyPlaying && myHtmlElement) {
116
+
myHtmlElement.innerText = \`\$\{currentlyPlaying.tags.artist} - \$\{currentlyPlaying.tags.title}\`;
117
+
}
103
118
})
104
119
</script>
105
120
`.trim(),