tokono.ma
A music player that connects to your cloud/distributed storage.
1import { GROUP } from "~/common/facets/foundation.js";
2import * as Output from "~/common/output.js";
3
4import InputConfigurator from "~/components/configurator/input/element.js";
5import MetadataProcessor from "~/components/processor/metadata/element.js";
6import OutputOrchestrator from "~/components/orchestrator/output/element.js";
7import ProcessTracksOrchestrator from "~/components/orchestrator/process-tracks/element.js";
8import S3Input from "~/components/input/s3/element.js";
9
10// Add components to DOM
11const s3 = new S3Input();
12const input = new InputConfigurator();
13input.setAttribute("group", GROUP);
14input.append(s3);
15
16const output = new OutputOrchestrator();
17output.setAttribute("group", GROUP);
18
19const metadataProcessor = new MetadataProcessor();
20metadataProcessor.setAttribute("group", GROUP);
21
22document.body.append(input, output, metadataProcessor);
23
24const pto = new ProcessTracksOrchestrator();
25pto.setAttribute("group", GROUP);
26pto.setAttribute("input-selector", input.selector);
27pto.setAttribute("output-selector", output.selector);
28pto.setAttribute("metadata-processor-selector", metadataProcessor.selector);
29
30document.body.append(pto);
31
32// Demo
33const addDemoBtn = document.querySelector("#add-sample-content");
34
35async function addSampleContent() {
36 if (!addDemoBtn) return;
37
38 addDemoBtn.setAttribute("disabled", "");
39 addDemoBtn.innerHTML = `<span>
40 <i class="ph-fill ph-hourglass-medium"></i>
41 Adding source
42 </span>`;
43
44 const demo = await s3.demo();
45
46 await output.tracks.save([
47 ...(await Output.data(output.tracks)),
48 demo.track,
49 ]);
50
51 addDemoBtn.innerHTML = `<span>
52 <i class="ph-fill ph-hourglass-medium"></i>
53 Processing source
54 </span>`;
55
56 await pto.process();
57
58 addDemoBtn.innerHTML = `<span>
59 <i class="ph-fill ph-check-fat"></i> Added
60 </span>`;
61}
62
63addDemoBtn?.addEventListener("click", addSampleContent);