Experiment to rebuild Diffuse using web applets.
tokono.ma
1<main class="container">
2 <h1>S3-compatible input</h1>
3
4 <h4>Mounted buckets</h4>
5
6 <div id="buckets">
7 <p>
8 <span class="with-icon">
9 <i class="iconoir-bonfire"></i>
10 <small>Just a moment, loading mounted buckets.</small>
11 </span>
12 </p>
13 </div>
14
15 <h4>Add a new S3 bucket</h4>
16
17 <form id="form"></form>
18
19 <!-- Warning about hostnames/regions/buckets -->
20 <!-- <p>
21 <small>
22 <span class="with-icon">
23 <i class="iconoir-warning-triangle"></i>
24 <span
25 >The bucket name and region are not automatically prefixed/inserted into the hostname, you
26 must add them yourself to either the host or the path <strong>if needed</strong>.</span
27 >
28 </span>
29 </small>
30 </p> -->
31</main>
32
33<style is:global>
34 iframe {
35 display: none;
36 }
37</style>
38
39<script>
40 import type { Track } from "@applets/core/types.d.ts";
41 import type { Tasks } from "@scripts/input/s3/worker";
42 import type { Bucket } from "@scripts/input/s3/types";
43 import { register } from "@scripts/applet/common";
44 import { endpoint, inIframe, transfer } from "@scripts/common";
45 import manifest from "./_manifest.json";
46 import { bucketId, loadBuckets, saveBuckets } from "@scripts/input/s3/common";
47
48 ////////////////////////////////////////////
49 // SETUP
50 ////////////////////////////////////////////
51 const worker = endpoint<Tasks>(
52 new Worker(new URL("../../../scripts/input/s3/worker", import.meta.url), {
53 type: "module",
54 name: manifest.name,
55 }),
56 );
57
58 // Register applet
59 const context = register({ worker });
60
61 ////////////////////////////////////////////
62 // ACTIONS
63 ////////////////////////////////////////////
64 const consult = async (fileUriOrScheme: string) => {
65 return await worker.consult(fileUriOrScheme);
66 };
67
68 const contextualize = async (tracks: Track[]) => {
69 const s = await worker.contextualize(transfer(tracks));
70 ui?.setBuckets({ ...ui?.buckets(), ...s });
71 };
72
73 const groupConsult = async (tracks: Track[]) => {
74 return await worker.groupConsult(transfer(tracks));
75 };
76
77 const list = async (cachedTracks: Track[] = []) => {
78 return await worker.list(transfer(cachedTracks));
79 };
80
81 const resolve = async (args: { method: string; uri: string }) => {
82 return await worker.resolve(args);
83 };
84
85 const mount = async (bucket: Bucket) => {
86 // NOTE: This may, or may not, be a good idea.
87 const buckets = await loadBuckets();
88 const id = bucketId(bucket);
89
90 if (!buckets[id]) {
91 await saveBuckets({ ...buckets, [bucketId(bucket)]: bucket });
92 }
93 };
94
95 const unmount = async () => {};
96
97 context.setActionHandler("consult", consult);
98 context.setActionHandler("contextualize", contextualize);
99 context.setActionHandler("groupConsult", groupConsult);
100 context.setActionHandler("list", list);
101 context.setActionHandler("resolve", resolve);
102 context.setActionHandler("mount", mount);
103 context.setActionHandler("unmount", unmount);
104
105 ////////////////////////////////////////////
106 // UI
107 ////////////////////////////////////////////
108 const ui = inIframe() ? undefined : await import("@scripts/input/s3/ui");
109</script>