tokono.ma
A music player that connects to your cloud/distributed storage.
1import foundation from "~/common/foundation.js";
2import { effect } from "~/common/signal.js";
3
4import { NAME as ATPROTO_OUTPUT_NAME } from "~/components/output/raw/atproto/element.js";
5import { NAME as ATPROTO_SYNC_NAME } from "~/components/transformer/output/raw/atproto-sync/element.js";
6import { NAME as ATPROTO_PASSKEY_NAME } from "~/components/transformer/output/refiner/track-uri-passkey/element.js";
7
8import { NAME as S3_OUTPUT_NAME } from "~/components/output/bytes/s3/element.js";
9import { NAME as S3_SYNC_NAME } from "~/components/transformer/output/bytes/dasl-sync/element.js";
10
11
12/**
13 * @import OutputOrchestrator from "~/components/orchestrator/output/element.js"
14 */
15
16/** @type {Set<string>} */
17let previouslyActivated = new Set();
18
19/**
20 * Setup DOM elements when needed.
21 */
22effect(() => {
23 const output = foundation.signals.orchestrator.output();
24 if (!output) return;
25
26 atproto(output);
27 s3(output);
28
29 output.loadSelected();
30});
31
32/**
33 * Dynamically import custom elements when needed.
34 */
35effect(() => {
36 const output = foundation.signals.orchestrator.output();
37 if (!output) return;
38
39 const set = output.activated();
40 const newlyActicated = set.difference(previouslyActivated);
41
42 previouslyActivated = set;
43
44 Array.from(newlyActicated).map((id) => {
45 switch (id) {
46 case "do-output__dc-output__atproto":
47 return atprotoCustomElements();
48 case "do-output__dc-output__s3":
49 return s3CustomElements();
50 }
51 });
52});
53
54////////////////////////////////////////////
55// AT PROTOCOL
56////////////////////////////////////////////
57
58/**
59 * Adds a few extra layers of functionality to the AT Protocol output,
60 * optional passkey encryption and local-first syncing.
61 *
62 * @param {OutputOrchestrator} output
63 */
64export function atproto(output) {
65 const out = document.createElement(ATPROTO_OUTPUT_NAME);
66 out.setAttribute("group", foundation.GROUP);
67 out.setAttribute("id", "do-output__dor-atproto");
68
69 const sync = document.createElement(ATPROTO_SYNC_NAME);
70 sync.setAttribute("group", foundation.GROUP);
71 sync.setAttribute("id", "do-output__dtor-atproto-sync");
72 sync.setAttribute("namespace", "atproto");
73 sync.setAttribute("output-selector", "#do-output__dor-atproto");
74
75 const passkey = document.createElement(ATPROTO_PASSKEY_NAME);
76 passkey.setAttribute("group", foundation.GROUP);
77 passkey.setAttribute("id", "do-output__dc-output__atproto");
78 passkey.setAttribute("label", "AT Protocol");
79 passkey.setAttribute("namespace", "atproto");
80 passkey.setAttribute(
81 "output-selector",
82 "#do-output__dtor-atproto-sync",
83 );
84
85 // Add elements to DOM, make sure the transformer
86 // is added to the configurator so the user can select it.
87 output.append(out);
88 output.append(sync);
89 output.outputConfigurator.append(passkey);
90}
91
92export function atprotoCustomElements() {
93 import("~/components/output/raw/atproto/element.js");
94 import(
95 "~/components/transformer/output/raw/atproto-sync/element.js"
96 );
97 import(
98 "~/components/transformer/output/refiner/track-uri-passkey/element.js"
99 );
100}
101
102////////////////////////////////////////////
103// S3
104////////////////////////////////////////////
105
106/**
107 * Wraps user data in a custom CBOR encode data structure
108 * which tracks what identifiers are removed.
109 * The transformer used here allows for merging of data.
110 *
111 * @param {OutputOrchestrator} output
112 */
113export function s3(output) {
114 const out = document.createElement(S3_OUTPUT_NAME);
115 out.setAttribute("group", foundation.GROUP);
116 out.setAttribute("id", "do-output__dob-s3");
117
118 const sync = document.createElement(S3_SYNC_NAME);
119 sync.setAttribute("group", foundation.GROUP);
120 sync.setAttribute("id", "do-output__dc-output__s3");
121 sync.setAttribute("label", "S3");
122 sync.setAttribute("namespace", "s3");
123 sync.setAttribute("output-selector", "#do-output__dob-s3");
124
125 // Add elements to DOM, make sure the transformer
126 // is added to the configurator so the user can select it.
127 output.append(out);
128 output.outputConfigurator.append(sync);
129}
130
131export function s3CustomElements() {
132 import("~/components/output/bytes/s3/element.js");
133 import(
134 "~/components/transformer/output/bytes/dasl-sync/element.js"
135 );
136}