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