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