A music player that connects to your cloud/distributed storage.
1import foundation from "~/common/foundation.js";
2import * as CID from "~/common/cid.js";
3import * as Output from "~/common/output.js";
4import { createLoader, renderError } from "~/common/loader.js";
5import { insertPreludes } from "~/common/facets/prelude.js";
6
7// Output element
8const output = await foundation.orchestrator.output();
9
10// Contaienr
11const container = /** @type {HTMLDivElement} */ (
12 document.querySelector("#container")
13);
14
15// Preludes
16const facets = await Output.data(output.facets);
17let preludesInserted = false;
18
19// Load
20createLoader({
21 $type: "sh.diffuse.output.facet",
22 label: "Facet",
23 source: () => output.facets,
24 async render(facet) {
25 if (facet.cid) {
26 const valid = await CID.verify(
27 new TextEncoder().encode(facet.html ?? ""),
28 facet.cid,
29 );
30
31 if (!valid) {
32 renderError(
33 container,
34 "CID mismatch: HTML content does not match the CID",
35 );
36 return;
37 }
38 }
39
40 if (!preludesInserted) {
41 preludesInserted = true;
42 await insertPreludes(facets, document.body);
43 }
44
45 const range = document.createRange();
46 range.selectNode(container);
47 const documentFragment = range.createContextualFragment(facet.html ?? "");
48 container.append(documentFragment);
49 },
50});