Something went wrong. Try again.
Experiment to rebuild Diffuse using web applets.
Something went wrong. Try again.
8.3 kB · 244 lines
Astro
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245---import Applet from "../components/Applet.astro";import List from "../components/List.astro";import Page from "../layouts/page.astro";
import "../styles/page/index.css";
// Typestype Ref = { url: string; title: string;};
// Linksconst WEB_APPLETS_HREF = "https://unternet.co/docs/web-applets/introduction";
// Themesconst themes = [ { url: "theme/blur/", title: "(WIP) Blur" }, { url: "theme/pilot/", title: "(WIP) Pilot" }, { url: "theme/webamp/", title: "Webamp" },];
// Abstractions// TODO
// Constituentsconst constituents = [ { url: "constituent/blur/artwork-controller/", title: "(WIP) Blur ⦚ Artwork Controller" },];
// Appletsconst configurators = [ { url: "configurator/input/", title: "Input" }, { url: "configurator/output/", title: "Output" },];
const engines = [ { url: "engine/audio/", title: "Audio" }, { url: "engine/queue/", title: "Queue" },];
const input = [ { url: "input/native-fs/", title: "Native File System" }, { url: "input/opensubsonic/", title: "Opensubsonic" }, { url: "input/s3/", title: "S3-Compatible API" },];
const orchestrators = [ { url: "orchestrator/queue-audio/", title: "Queue ⭤ Audio" }, { url: "orchestrator/queue-tracks/", title: "Queue ⭤ Tracks" }, { url: "orchestrator/process-tracks/", title: "Process inputs into tracks" },];
const output = [ { url: "output/indexed-db/", title: "IndexedDB" }, { url: "output/native-fs/", title: "Native File System" }, { url: "output/storacha-automerge/", title: "(WIP) Storacha Storage + Automerge CRDT" }, { url: "output/todo/", title: "(TODO) Keyhive/Beelay" }, { url: "output/todo/", title: "(TODO) Dialog DB" },];
const processors = [ { url: "processor/artwork/", title: "Artwork retrieval" }, { url: "processor/metadata/", title: "Metadata retrieval" }, { url: "processor/search/", title: "Search" },];
// Demosconst demos = [{ url: "demo/s3-tracks/", title: "Add sample S3 music" }];---
<Page title="Diffuse"> <header> <h1> <svg viewBox="0 0 902 134" width="160"> <title>Diffuse</title> <use xlink:href="/images/diffuse-current.svg#diffuse" href="/images/diffuse-current.svg#diffuse"></use> </svg> </h1> <p> Diffuse is a collection of <a href={WEB_APPLETS_HREF}>web applets</a> that make it possible to listen to audio from various sources on your devices and the web, and to create the ideal digital listening experience for you. </p> <p> These applets can be used in various ways. The main ways so far are: (a) through <a href="#themes">themes</a >, a traditional browser (web application) approach, and (b) <a href="#abstractions" >abstractions</a > for non-browser systems. </p> <p> <strong >TODO: Figure out how to present this to users who just want to use the damn thing.</strong > </p> </header> <main> <div class="columns"> <!-- THEMES --> <section> <h2 id="themes">Themes</h2>
<p> Themes are “applet compositions” and provide a traditional browser web application way of using them. Each theme is unique, not just a skin (eg. not like winamp skins). </p>
<p> For example, most themes here will limit the currently playing audio tracks to one item, but you might as well create a DJ theme that can play multiple items at the same time. </p>
<List items={themes} /> </section>
<!-- ABSTRACTIONS --> <section> <h2 id="abstractions">Abstractions</h2>
<p> These are applet configurations that enable certain use cases outside the traditional web app experience. Just like themes, these include various assumptions of how certain parts of the system should interact. </p>
<p><em>TODO: Enable intelligent user (ai) agent use-case.</em></p>
<List items={[]} /> </section> </div>
<!-- CONSTITUENTS --> <section> <h2 id="constituents">Constituents</h2>
<p> Constituents are UI applets that are used in themes and abstractions. These are organised per theme or abstraction, but that doesn't mean they are restricted to that theme or abstraction, you can mix and match as you like. You can even use them on their own. </p>
<p> Some themes may be constructed out of various applets that are not listed here. The reason for that is those applets cannot be used solely on their own, they require an external context to coordinate them. </p>
<p> There's tradeoffs to both approaches. A particular tradeoff to keep in mind for constituents is that they'll have nested dependencies. So when overriding applets dependencies, the overrides need to be passed down the tree. </p>
<List items={constituents} /> </section>
<!-- APPLETS --> <section> <h2 id="applets">Applets</h2>
<p> Applets are <a href={WEB_APPLETS_HREF}>web applets</a>, the components of the system. These are then recombined into an entire music player experience, or whatever you want to build. </p>
<div class="columns"> <Applet title="Configurators" list={configurators}> Applets that serve as an intermediate in order to make a particular kind of applet configurable. In other words, these allow for an applet to be swapped out with another that takes the same, or a subset of the actions and data output. </Applet>
<Applet title="Engines" list={engines}> Applets with each a singular purpose and don't have any UI. There are specialised UI and orchestrators applets that control these. </Applet>
<Applet title="Input" list={input}> Inputs are sources of audio tracks. Each track is an entry in the list of possible items to play. These can be files or streams, static or dynamic. </Applet>
<Applet title="Orchestrators" list={orchestrators}> These too are applet compositions. However, unlike themes, these are purely logical. Mostly exist in order to construct sensible defaults to use across themes and abstractions. </Applet>
<Applet title="Output" list={output}> Output is application-derived data such as playlists. These applets can receive such data and keep it around. </Applet>
<Applet title="Processors" list={processors}> These applets work with the tracks generated by the input applets to add more data to them, or process them in some other way. </Applet>
<Applet title="Supplements" list={[]}>Additional applets, such as scrobblers.</Applet> </div> </section>
<!-- DEMOS --> <section> <h2 id="demos">Demos</h2>
<p>Just some utility web pages to help demo the system.</p>
<List items={demos} /> </section>
<!-- BUILD YOUR OWN --> <section> <h2 id="yours">Build your own</h2>
<p> Ideally you'd be able to mix and match these applets to build your own music player. There are still a few todos and unknowns here: </p>
<ul> <li> Haven't tested this idea cross-origin. No idea if the applets work when included on a different origin (though it should). </li> <li> Currently using a fork of the web applets SDK that adds a few features (waiting on PRs). Meaning that it won't be as easy to write your own applets in the same way as done here. </li> <li> I wrote some custom code on top of the web applets SDK that makes the applets talk to each other over a broadcast channel. This should ideally become a JS library or added to the web applets SDK. Though you can just copy-paste from the Diffuse repo if you want (it's not that much code). </li> <li><em>... Probably a bunch of stuff I'm forgetting, teaching materials, ...</em></li> </ul> </section> </main></Page>