Experiment to rebuild Diffuse using web applets.
1<main class="container">
2 <h1>Native file system input</h1>
3 <p>
4 Add music from your device.
5 <br />Music added so far:
6 </p>
7 <div id="directories">
8 <p>
9 <span class="with-icon">
10 <i class="iconoir-bonfire"></i>
11 <small>Just a moment, loading mounted directories.</small>
12 </span>
13 </p>
14 </div>
15 <button id="mount">Mount directory</button>
16</main>
17
18<script>
19 import type { Tasks } from "@scripts/input/native-fs/worker";
20 import type { Track } from "@applets/core/types.d.ts";
21 import { register } from "@scripts/applet/common";
22 import { endpoint, inIframe, SharedWorker, transfer } from "@scripts/common";
23 import * as Mounting from "@scripts/input/native-fs/mounting";
24 import manifest from "./_manifest.json";
25
26 ////////////////////////////////////////////
27 // SETUP
28 ////////////////////////////////////////////
29 const worker = endpoint<Tasks>(
30 new Worker(new URL("../../../scripts/input/native-fs/worker", import.meta.url), {
31 type: "module",
32 name: manifest.name,
33 }),
34 );
35
36 // Register applet
37 const context = register({ worker });
38
39 ////////////////////////////////////////////
40 // ACTIONS
41 ////////////////////////////////////////////
42 const consult = async (fileUriOrScheme: string) => {
43 return await worker.consult(fileUriOrScheme);
44 };
45
46 const contextualize = async (cachedTracks: Track[]) => {
47 return await worker.contextualize(transfer(cachedTracks));
48 };
49
50 const groupConsult = async (tracks: Track[]) => {
51 return await worker.groupConsult(transfer(tracks));
52 };
53
54 const list = async (cachedTracks: Track[] = []) => {
55 return await worker.list(transfer(cachedTracks));
56 };
57
58 const resolve = async (args: { method: string; uri: string }) => {
59 return await worker.resolve(args);
60 };
61
62 const mount = async () => {
63 return Mounting.mount();
64 };
65
66 const unmount = async (handleId: string) => {
67 return Mounting.unmount(handleId);
68 };
69
70 context.setActionHandler("consult", consult);
71 context.setActionHandler("contextualize", contextualize);
72 context.setActionHandler("groupConsult", groupConsult);
73 context.setActionHandler("list", list);
74 context.setActionHandler("resolve", resolve);
75 context.setActionHandler("mount", mount);
76 context.setActionHandler("unmount", unmount);
77
78 ////////////////////////////////////////////
79 // UI
80 ////////////////////////////////////////////
81 const ui = inIframe() ? undefined : await import("@scripts/input/native-fs/ui");
82</script>