Experiment to rebuild Diffuse using web applets.
1<main class="container">
2 <h1>Input configuration</h1>
3 <p>
4 Here you can add your audio from various places.
5 <br />Add audio from:
6 </p>
7 <div id="options">
8 <p>
9 <!-- TODO: Need to check if supported on this device -->
10 <a href="../../input/native-fs/" class="with-icon">
11 <i class="iconoir-open-in-window"></i>
12 <strong>My device</strong>
13 </a>
14 <br />
15 <a href="../../input/opensubsonic/" class="with-icon">
16 <i class="iconoir-open-in-window"></i>
17 <strong>Opensubsonic server</strong>
18 </a>
19 <br />
20 <a href="../../input/s3/" class="with-icon">
21 <i class="iconoir-open-in-window"></i>
22 <strong>S3-compatible service</strong>
23 </a>
24 </p>
25 </div>
26</main>
27
28<style is:global>
29 iframe {
30 display: none;
31 }
32</style>
33
34<script>
35 import type { Track } from "@applets/core/types";
36 import type { Tasks } from "@scripts/configurator/input/worker";
37 import { applet, register, tunnel } from "@scripts/applet/common";
38 import { endpoint, transfer } from "@scripts/common";
39 import manifest from "./_manifest.json";
40
41 ////////////////////////////////////////////
42 // SETUP
43 ////////////////////////////////////////////
44 const worker = endpoint<Tasks>(
45 new Worker(new URL("../../../scripts/configurator/input/worker", import.meta.url), {
46 type: "module",
47 name: manifest.name,
48 }),
49 );
50
51 // Register applet + worker
52 const context = register({ worker });
53
54 // Applet connections
55 const input = {
56 "file+local": applet("/input/native-fs", { context: self }),
57 opensubsonic: applet("/input/opensubsonic", { context: self }),
58 s3: applet("/input/s3", { context: self }),
59 };
60
61 // Provide tunnel to worker
62 tunnel(worker, input);
63
64 ////////////////////////////////////////////
65 // ACTIONS
66 ////////////////////////////////////////////
67 const consult = async (fileUriOrScheme: string) => {
68 return await worker.consult(fileUriOrScheme);
69 };
70
71 const contextualize = async (cachedTracks: Track[]) => {
72 return await worker.contextualize(transfer(cachedTracks));
73 };
74
75 const groupConsult = async (tracks: Track[]) => {
76 return await worker.groupConsult(transfer(tracks));
77 };
78
79 const list = async (cachedTracks: Track[] = []) => {
80 return await worker.list(transfer(cachedTracks));
81 };
82
83 const resolve = async (args: { method: string; uri: string }) => {
84 return await worker.resolve(args);
85 };
86
87 context.setActionHandler("consult", consult);
88 context.setActionHandler("contextualize", contextualize);
89 context.setActionHandler("groupConsult", groupConsult);
90 context.setActionHandler("list", list);
91 context.setActionHandler("resolve", resolve);
92</script>