A music player that connects to your cloud/distributed storage. diffuse.sh
Something went wrong. Try again.
JavaScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153import { html, render as litRender } from "lit-html";
import { effect, signal } from "~/common/signal.js";import { insertPreludes } from "~/common/facets/prelude.js";import foundation from "~/common/foundation.js";import * as Output from "~/common/output.js";
foundation.setup({ title: "Setup | Diffuse" });
/** @param {string} path */const loaderHref = (path) => `./l/?path=${encodeURIComponent(path)}`;
////////////////////////////////////////////// SETUP////////////////////////////////////////////
const [sourcesOrchestrator, outputOrchestrator, processOrchestrator] = await Promise.all([ foundation.orchestrator.sources(), foundation.orchestrator.output(), foundation.orchestrator.processTracks({ disableWhenReady: true }), ]);
await Promise.all([ customElements.whenDefined(sourcesOrchestrator.localName), customElements.whenDefined(outputOrchestrator.localName),]);
const right = /** @type {HTMLElement} */ (document.querySelector("#setup-right"));
////////////////////////////////////////////// DEMO////////////////////////////////////////////
const demoAdding = signal(false);
async function addDemo() { if (demoAdding.get()) return; demoAdding.set(true);
try { const input = await foundation.configurator.input(); await insertPreludes(await Output.data(outputOrchestrator.facets));
const s3 = /** @type {import("~/components/input/s3/element.js").CLASS | null} */ ( input.querySelector("di-s3") ); if (!s3) throw new Error("S3 input not found");
const demo = await s3.demo(); await outputOrchestrator.tracks.save([ ...(await Output.data(outputOrchestrator.tracks)), demo.track, ]); await processOrchestrator.process(); } catch (err) { console.error(err); } finally { demoAdding.set(false); }}
////////////////////////////////////////////// UI////////////////////////////////////////////
effect(() => { const sourcesRecord = sourcesOrchestrator.sources(); const hasSources = Object.values(sourcesRecord).some((s) => s.length > 0);
const tracksCol = outputOrchestrator.tracks.collection(); const hasTracks = tracksCol.state === "loaded" && tracksCol.data.length > 0;
const isProcessing = processOrchestrator.isProcessing(); const { processed, total } = processOrchestrator.progress(); const pct = total > 0 ? Math.round((processed / total) * 100) : null;
const hasContent = hasSources || hasTracks;
let content;
if (isProcessing) { content = html` <p class="setup-desc"> Hold on for a bit, translating audio into tracks. This might take a while; you can come back to this later though, progress is saved. </p> <ul class="setup-actions"> <li> <span class="setup-action"> <i class="ph-fill ph-arrows-clockwise animate-spin"></i> <span>${pct !== null ? `Processing (${pct}%)` : "Listing…"}</span> </span> </li> </ul> `; } else if (!hasContent) { content = html` <p class="setup-desc"> The first step is to add audio. You can introduce some from a number of different sources. </p> <ul class="setup-actions"> <li> <a class="setup-action" href="${loaderHref( "facets/connect/index.html", )}" target="_blank"> <i class="ph-fill ph-file-audio"></i> <span>Add some audio</span> </a> </li> <li> <button class="setup-action" @click="${addDemo}"> <i class="ph-fill ph-flask"></i> <span>Or add demo content</span> </button> </li> </ul> `; } else { content = html` <p class="setup-desc"> Audio was added succesfully, time to play some! Let's explore some interfaces to do so. </p> <ul class="setup-actions"> <li> <a class="setup-action" href="./featured/?filter=interface" target="_blank"> <i class="ph-fill ph-swatches"></i> <span>Try out interfaces</span> </a> </li> <li> <a class="setup-action" href="./featured/?filter=prelude" target="_blank"> <i class="ph-fill ph-sparkle"></i> <span>Enable additional features</span> </a> </li> </ul> `; }
litRender(content, right);});
////////////////////////////////////////////// 🚀////////////////////////////////////////////
foundation.ready();