Experiment to rebuild Diffuse using web applets.
1---
2import Applet from "../components/Applet.astro";
3import List from "../components/List.astro";
4import Page from "../layouts/page.astro";
5
6import "../styles/page/index.css";
7
8// Types
9type Ref = {
10 url: string;
11 title: string;
12};
13
14// Links
15const WEB_APPLETS_HREF = "https://unternet.co/docs/web-applets/introduction";
16
17// Themes
18const themes = [
19 { url: "theme/blur/", title: "(WIP) Blur" },
20 { url: "theme/pilot/", title: "(WIP) Pilot" },
21 { url: "theme/webamp/", title: "Webamp" },
22];
23
24// Abstractions
25// TODO
26
27// Constituents
28const constituents = [
29 { url: "constituent/blur/artwork-controller/", title: "(WIP) Blur ⦚ Artwork Controller" },
30];
31
32// Applets
33const configurators = [
34 { url: "configurator/input/", title: "Input" },
35 { url: "configurator/output/", title: "Output" },
36];
37
38const engines = [
39 { url: "engine/audio/", title: "Audio" },
40 { url: "engine/queue/", title: "Queue" },
41];
42
43const input = [
44 { url: "input/native-fs/", title: "Native File System" },
45 { url: "input/opensubsonic/", title: "Opensubsonic" },
46 { url: "input/s3/", title: "S3-Compatible API" },
47];
48
49const orchestrators = [{ url: "orchestrator/primary/", title: "Primary (Queue, audio, tracks)" }];
50
51const output = [
52 { url: "output/indexed-db/", title: "IndexedDB" },
53 { url: "output/native-fs/", title: "Native File System" },
54 { url: "output/storacha-automerge/", title: "(WIP) Storacha Storage + Automerge CRDT" },
55 { url: "output/todo/", title: "(TODO) Keyhive/Beelay" },
56 { url: "output/todo/", title: "(TODO) Dialog DB" },
57];
58
59const processors = [
60 { url: "processor/artwork/", title: "Artwork retrieval" },
61 { url: "processor/metadata/", title: "Metadata retrieval" },
62 { url: "processor/search/", title: "Search" },
63];
64---
65
66<Page title="Diffuse">
67 <header>
68 <h1>
69 <svg viewBox="0 0 902 134" width="160">
70 <title>Diffuse</title>
71 <use
72 xlink:href="/images/diffuse-current.svg#diffuse"
73 href="/images/diffuse-current.svg#diffuse"></use>
74 </svg>
75 </h1>
76 <p>
77 Diffuse is a collection of <a href={WEB_APPLETS_HREF}>web applets</a> that make it possible to
78 listen to audio from various sources on your devices and the web, and to create the ideal digital
79 listening experience for you.
80 </p>
81 <p>
82 These applets can be used in various ways. The main ways so far are: (a) through <a
83 href="#themes">themes</a
84 >, a traditional browser (web application) approach, and (b) <a href="#abstractions"
85 >abstractions</a
86 > for non-browser systems.
87 </p>
88 <p>
89 <strong
90 >TODO: Figure out how to present this to users who just want to use the damn thing.</strong
91 >
92 </p>
93 </header>
94 <main>
95 <div class="columns">
96 <!-- THEMES -->
97 <section>
98 <h2 id="themes">Themes</h2>
99
100 <p>
101 Themes are “applet compositions” and provide a traditional browser web application way of
102 using them. Each theme is unique, not just a skin (eg. not like winamp skins).
103 </p>
104
105 <p>
106 For example, most themes here will limit the currently playing audio tracks to one item,
107 but you might as well create a DJ theme that can play multiple items at the same time.
108 </p>
109
110 <List items={themes} />
111 </section>
112
113 <!-- ABSTRACTIONS -->
114 <section>
115 <h2 id="abstractions">Abstractions</h2>
116
117 <p>
118 These are applet configurations that enable certain use cases outside the traditional web
119 app experience. Just like themes, these include various assumptions of how certain parts
120 of the system should interact.
121 </p>
122
123 <p><em>TODO: Enable intelligent user (ai) agent use-case.</em></p>
124
125 <List items={[]} />
126 </section>
127 </div>
128
129 <!-- CONSTITUENTS -->
130 <section>
131 <h2 id="constituents">Constituents</h2>
132
133 <p>
134 Constituents are UI applets that are used in themes and abstractions. These are organised
135 per theme or abstraction, but that doesn't mean they are restricted to that theme or
136 abstraction, you can mix and match as you like. You can even use them on their own.
137 </p>
138
139 <p>
140 Some themes may be constructed out of various applets that are not listed here. The reason
141 for that is those applets cannot be used solely on their own, they require an external
142 context to coordinate them.
143 </p>
144
145 <p>
146 There's tradeoffs to both approaches. A particular tradeoff to keep in mind for constituents
147 is that they'll have nested dependencies. So when overriding applets dependencies, the
148 overrides need to passed down the tree.
149 </p>
150
151 <List items={constituents} />
152 </section>
153
154 <!-- APPLETS -->
155 <section>
156 <h2 id="applets">Applets</h2>
157
158 <p>
159 Applets are <a href={WEB_APPLETS_HREF}>web applets</a>, the components of the system. These
160 are then recombined into an entire music player experience, or whatever you want to build.
161 </p>
162
163 <div class="columns">
164 <Applet title="Configurators" list={configurators}>
165 Applets that serve as an intermediate in order to make a particular kind of applet
166 configurable. In other words, these allow for an applet to be swapped out with another
167 that takes the same, or a subset of the actions and data output.
168 </Applet>
169
170 <Applet title="Engines" list={engines}>
171 Applets with each a singular purpose and don't have any UI. There are specialised UI and
172 orchestrators applets that control these.
173 </Applet>
174
175 <Applet title="Input" list={input}>
176 Inputs are sources of audio tracks. Each track is an entry in the list of possible items
177 to play. These can be files or streams, static or dynamic.
178 </Applet>
179
180 <Applet title="Orchestrators" list={orchestrators}>
181 These too are applet compositions. However, unlike themes, these are purely logical.
182 Mostly exist in order to construct sensible defaults to use across themes and
183 abstractions.
184 </Applet>
185
186 <Applet title="Output" list={output}>
187 Output is application-derived data such as playlists. These applets can receive such data
188 and keep it around.
189 </Applet>
190
191 <Applet title="Processors" list={processors}>
192 These applets work with the tracks generated by the input applets to add more data to
193 them, or process them in some other way.
194 </Applet>
195
196 <Applet title="Supplements" list={[]}>Additional applets, such as scrobblers.</Applet>
197 </div>
198 </section>
199
200 <!-- BUILD YOUR OWN -->
201 <section>
202 <h2 id="yours">Build your own</h2>
203
204 <p>
205 Ideally you'd be able to mix and match these applets to build your own music player. There
206 are still a few todos and unknowns here:
207 </p>
208
209 <ul>
210 <li>
211 Haven't tested this idea cross-origin. No idea if the applets work when included on a
212 different origin (though it should).
213 </li>
214 <li>
215 Currently using a fork of the web applets SDK that adds a few features (waiting on PRs).
216 Meaning that it won't be as easy to write your own applets in the same way as done here.
217 </li>
218 <li>
219 I wrote some custom code on top of the web applets SDK that makes the applets talk to each
220 other over a broadcast channel. This should ideally become a JS library or added to the
221 web applets SDK. Though you can just copy-paste from the Diffuse repo if you want (it's
222 not that much code).
223 </li>
224 <li><em>... Probably a bunch of stuff I'm forgetting, teaching materials, ...</em></li>
225 </ul>
226 </section>
227 </main>
228</Page>