A music player that connects to your cloud/distributed storage.
1import * as Output from "~/common/output.js";
2import { html, render as litRender } from "lit-html";
3import { effect } from "~/common/signal.js";
4import foundation from "~/common/foundation.js";
5
6foundation.setup({ title: "Process Tracks | Diffuse" });
7
8const main = /** @type {HTMLElement} */ (document.querySelector("main"));
9
10const orchestrator = await foundation.orchestrator.processTracks({
11 disableWhenReady: true,
12});
13
14const placeholder = document.querySelector("#placeholder");
15if (!placeholder) throw new Error("No #placeholder element");
16
17/**
18 * Wait until tracks are loaded and only then start processing.
19 */
20async function process() {
21 const output = await foundation.orchestrator.output();
22
23 await Output.data(output.tracks);
24 await orchestrator.process();
25}
26
27effect(() => {
28 const isProcessing = orchestrator.isProcessing();
29 const { processed, total } = orchestrator.progress();
30 const percentage = total > 0 ? Math.round((processed / total) * 100) : 0;
31
32 litRender(
33 isProcessing
34 ? html`
35 <fieldset>
36 <legend>Processing tracks</legend>
37 <div class="with-icon with-icon--large">
38 <img src="images/icons/windows_98/gears-0.png" width="24" />
39 <span>
40 ${total === 0
41 ? "Going through all the inputs and gathering the tracks ..."
42 : `Making sure each track has metadata & statistics (${processed} / ${total}) ...`}
43 </span>
44 </div>
45 <div
46 class="progress-indicator"
47 style="margin-top: var(--grouped-element-spacing);"
48 >
49 <div
50 class="progress-indicator-bar"
51 style="width: ${percentage}%"
52 >
53 </div>
54 </div>
55 </fieldset>
56 `
57 : html`
58 <fieldset>
59 <div class="with-icon with-icon--large">
60 <img src="images/icons/windows_98/gears-0.png" width="24" />
61 <div>
62 <p>
63 Go through all the inputs you've added and get the last audio files and
64 their metadata.
65 </p>
66 <p>
67 <button @click="${process}">
68 Process sources
69 </button>
70 </p>
71 </div>
72 </div>
73 </fieldset>
74 `,
75 /** @type {HTMLElement} */ (placeholder),
76 );
77});
78
79////////////////////////////////////////////
80// 🚀
81////////////////////////////////////////////
82
83foundation.ready();