···11+export * as ShDiffuseOutputCollaboration from "./types/sh/diffuse/output/collaboration.ts";
22+export * as ShDiffuseOutputFacet from "./types/sh/diffuse/output/facet.ts";
33+export * as ShDiffuseOutputPlaylistItem from "./types/sh/diffuse/output/playlistItem.ts";
44+export * as ShDiffuseOutputTheme from "./types/sh/diffuse/output/theme.ts";
55+export * as ShDiffuseOutputTrack from "./types/sh/diffuse/output/track.ts";
66+export * as ShDiffuseOutputTrackBundle from "./types/sh/diffuse/output/trackBundle.ts";
···11+<html lang="en">
22+ <head>
33+ <meta charset="UTF-8" />
44+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
55+66+ <title>Diffuse</title>
77+88+ <!-- Base -->
99+ <base href="./" />
1010+1111+ <!-- Favicons & Mobile -->
1212+ <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
1313+ <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
1414+ <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
1515+ <!-- TODO: <link rel="manifest" href="site.webmanifest" />-->
1616+ <link rel="mask-icon" href="safari-pinned-tab.svg" color="#8a90a9" />
1717+ <meta name="msapplication-TileColor" content="#8a90a9" />
1818+ <meta name="theme-color" content="#8a90a9" />
1919+2020+ <!-- Styles -->
2121+ <link rel="stylesheet" href="styles/base.css" />
2222+ <link rel="stylesheet" href="styles/diffuse/page.css" />
2323+ <link rel="stylesheet" href="styles/vendor/phosphor/bold/style.css" />
2424+ <link rel="stylesheet" href="styles/vendor/phosphor/fill/style.css" />
2525+2626+ <!-- Scripts -->
2727+ <script src="index.js" type="module"></script>
2828+ </head>
2929+ <body>
3030+ <header>
3131+ <div>
3232+ <h1 class="diffuse-logo">
3333+ <svg viewBox="0 0 902 134" width="160">
3434+ <title>Diffuse</title>
3535+ <use
3636+ xlink:href="images/diffuse-current.svg#diffuse"
3737+ href="images/diffuse-current.svg#diffuse"></use>
3838+</svg>
3939+4040+ <span id="status">
4141+ <a href="/latest/" title="Upgrade to latest" class="animate-spin">
4242+ <i class="ph-bold ph-spinner"></i>
4343+ </a>
4444+ <a href="/chronicle/" title="Browse versions of Diffuse">
4545+ <i class="ph-fill ph-star-four"></i>
4646+ </a>
4747+ </span>
4848+ </h1>
4949+ <p class="construct dither-mask">
5050+ Your audio<br />your data<br />your rules
5151+ </p>
5252+ <p>
5353+ Diffuse is a collection of components and software that make it possible to listen to audio from various sources on your devices and the web, and to create the ideal digital audio listening experience for you.
5454+ </p>
5555+ <p style="align-items: center; display: flex; gap: var(--space-2xs); opacity: 0.55;">
5656+ <i class="ph-fill ph-crane"></i>
5757+ <strong style="font-weight: 700;">WORK IN PROGRESS</strong>
5858+ </p>
5959+ <ul class="table-of-contents">
6060+ <li><a href="#usage">Usage</a></li>
6161+ <li><a href="#themes">Themes</a></li>
6262+ <li><a href="#facets">Facets</a></li>
6363+ <li><a href="#agency">Agency</a></li>
6464+ <li><a href="#elements">Elements</a></li>
6565+ <li><a href="#definitions">Definitions</a></li>
6666+ </ul>
6767+ <p>
6868+ <small>Built by <a href="https://tokono.ma">tokono.ma</a></small>
6969+ </p>
7070+ </div>
7171+ <div class="dither-mask filler"></div>
7272+</header>
7373+<main>
7474+ <!-- USAGE -->
7575+ <section>
7676+ <h2 id="usage">Usage</h2>
7777+7878+ <div class="columns">
7979+ <div class="element">
8080+ <p>
8181+ The easiest way to start is by exploring the software. If you prefer a traditional pre­packaged application approach, you can check out <a href="themes/">themes</a>. Themes can look and function entirely different from each other, so make sure to explore!
8282+ </p>
8383+8484+ <p>
8585+ Alternatively, there's <a href="facets/">facets</a> which allows you to use any component from any theme interchange­ably, among pieces that are not in themes; each in a separate browser tab. Each tab talks to each other, so you can for example browse audio in one tab and play it in another.
8686+ </p>
8787+ </div>
8888+8989+ <div class="element">
9090+ <p>
9191+ <strong style="color: var(--accent); font-weight: 700;">Diffuse is not your typical streaming service though, you have to add sources of audio.</strong> To start you can try out the demo by clicking the button below, or, go to a <a href="themes/">theme</a> or <a href="facets/">facet</a> that lets you add your audio input.
9292+ </p>
9393+9494+ <p>
9595+ <button id="add-sample-content">
9696+ <span>Add sample content</span>
9797+ </button>
9898+ </p>
9999+ </div>
100100+ </div>
101101+ </section>
102102+103103+ <!-- THEMES & FACETS -->
104104+ <div class="columns">
105105+ <section>
106106+ <h2 id="themes">Themes</h2>
107107+108108+ <p>
109109+ Themes are element compositions and provide a traditional browser web application way of
110110+ using them. In other words, pretty much the whole thing, besides your data, lives inside a single browser tab.
111111+ </p>
112112+113113+ <p>
114114+ <a class="button button--alt" href="themes/">Explore</a>
115115+ </p>
116116+ </section>
117117+118118+ <section>
119119+ <h2 id="facets">Facets</h2>
120120+121121+ <p>
122122+ Facets are various interface components each loaded in their own web page. Every used component is configured so that it operates in broadcast mode, making all the pages communicate with each other.
123123+ </p>
124124+125125+ <p>
126126+ <a class="button button--alt" href="facets/">Explore</a>
127127+ </p>
128128+ </section>
129129+ </div>
130130+131131+ <!-- AGENCY -->
132132+ <section>
133133+ <h2 id="agency">Agency</h2>
134134+135135+ <p>
136136+ The goal is for every user, no matter their experience, to have agency over their data and their software. One can start with making small changes and gradually progress to making big changes.
137137+ </p>
138138+139139+ <p>
140140+ You can store your user-data in various places, and easily export, import and sync it.
141141+ </p>
142142+143143+ <h3>Take control</h3>
144144+145145+ <ul class="columns">
146146+ <div class="element">
147147+ <!-- 1 -->
148148+ <li>
149149+ <p>
150150+ <i class="ph-fill ph-storefront"></i> <strong>Level 1</strong>: Pick your restaurant, food comes in all shapes and sizes. The equivalent of choosing a Diffuse <a href="themes/">theme</a>.
151151+ </p>
152152+ </li>
153153+ <!-- 2 -->
154154+ <li>
155155+ <p>
156156+ <i class="ph-fill ph-basket"></i> <strong>Level 2</strong>: Take out food from various places, eg. cheese shop + bakery. You choose how you combine the foods and from where you order them. That's <a href="facets/">facets</a>.
157157+ </p>
158158+ </li>
159159+ <!-- 3 -->
160160+ <li>
161161+ <p>
162162+ <i class="ph-fill ph-pepper"></i> <strong>Level 3</strong>: Now that you know which food is good and how to make combinations, you might make a slight customization, add a little something of your own (eg. add some spice). However, you're not quite confident enough which spice to pick, so you hire some help.
163163+ </p>
164164+ <p>
165165+ This can be done using the <a href="facets/#builder">facets builder</a> which allows you to build on top of a familiar preconfigured foundation and load custom facets. People might share their own, or maybe you use an LLM to generate something for you (eg. an album art gallery).
166166+ </p>
167167+ </li>
168168+ <!-- 4 -->
169169+ <li>
170170+ <p>
171171+ <i class="ph-fill ph-knife"></i> <strong>Level 4</strong>: You learned a bit from watching and talking to the help you hired, so you decide to take things in your own hands.
172172+ </p>
173173+ <p>
174174+ You continue to use the <a href="facets/#builder">facets builder</a> but learn a bit of <a href="https://htmlforpeople.com">HTML</a>, <a href="https://javascript.info">Javascript</a> and <a href="https://htmlforpeople.com/css-basics/">CSS</a>; so you're able to write your own facet.
175175+ </p>
176176+ </li>
177177+ </div>
178178+ <div class="element">
179179+ <!-- 5 -->
180180+ <li>
181181+ <p>
182182+ <i class="ph-fill ph-cooking-pot"></i> <strong>Level 5</strong>: At this point you're confident enough to make a meal from scratch. You can start very simple, eg. just throwing a steak in the pan with some butter and some salt to it. Then later add some baked potatoes and go from there.
183183+ </p>
184184+ <p>
185185+ A similar tool comes into play here, the <a href="themes/#builder">themes builder</a>. Same concept as the facets builder, but now you need to specify the foundation yourself. You can use the <a href="#elements">elements</a> listed below to do so. The code for these is available from this website or through the <a href="https://jsr.io/@toko/diffuse">Javascript package</a>.
186186+ </p>
187187+ </li>
188188+ <!-- 6 -->
189189+ <li>
190190+ <p>
191191+ <i class="ph-fill ph-storefront"></i> <strong>Level 6</strong>: You open your own restaurant.
192192+ </p>
193193+ <p>
194194+ You can host the theme you made on any web server, it's only HTML after all. Only difference is that you'll have to create the entire HTML tree, not just the body element, as is the case with the theme builder.
195195+ </p>
196196+ </li>
197197+ <!-- 7 -->
198198+ <li>
199199+ <p>
200200+ <i class="ph-fill ph-chef-hat"></i> <strong>Level 7</strong>: You got promoted to master chef. Time to open your own restaurant chain.
201201+ </p>
202202+ <p>
203203+ You can self-host Diffuse, it's <a href="https://tangled.org/tokono.ma/diffuse/blob/v4/">open-source</a>! Or you present your own collection of elements.
204204+ </p>
205205+ </li>
206206+ </div>
207207+ </ul>
208208+ </section>
209209+210210+ <!-- ELEMENTS -->
211211+ <section>
212212+ <h2 id="elements">Elements</h2>
213213+214214+ <p>
215215+ The (web) components of the system. These custom elements are then recombined into an entire music player experience, or whatever you want to build.
216216+ </p>
217217+218218+ <p>
219219+ Consume these using the facets <a href="facets/#builder">builder</a>, the Javascript <a href="https://jsr.io/@toko/diffuse">package</a>, or the linked Javascript files down below.
220220+ </p>
221221+222222+ <div class="columns">
223223+ <div class="element">
224224+ <h3>Configurators</h3>
225225+226226+ <p>
227227+ <em>
228228+ Elements that serve as an intermediate in order to make a particular kind of element configurable. In other words, these allow for an element to be swapped out with another that takes the same set of the actions and data output.
229229+ </em>
230230+ </p>
231231+232232+ <ul>
233233+ <li>
234234+ <a href="components/configurator/input/element.js">Input</a>
235235+ <div class="list-description">Allows for multiple inputs to be used at once.</div>
236236+ </li>
237237+ <li>
238238+ <a href="components/configurator/output/element.js">Output</a>
239239+ <div class="list-description">Enables the user to configure a specific output. If no default output is set, it creates a temporary session by storing everything in memory.</div>
240240+ </li>
241241+ <li>
242242+ <span class="todo">[todo]</span>
243243+ <span>Scrobbles</span>
244244+ <div class="list-description">Configure multiple scrobblers (music trackers).</div>
245245+ </li>
246246+</ul>
247247+248248+</div>
249249+250250+251251+ <div class="element">
252252+ <h3>Engines</h3>
253253+254254+ <p>
255255+ <em>
256256+ Elements with each a singular purpose and don't have any UI. There are specialised UI and orchestrator elements that control these.
257257+ </em>
258258+ </p>
259259+260260+ <ul>
261261+ <li>
262262+ <a href="components/engine/audio/element.js">Audio</a>
263263+ <div class="list-description">Plays audio through audio elements.</div>
264264+ </li>
265265+ <li>
266266+ <a href="components/engine/queue/element.js">Queue</a>
267267+ <div class="list-description">A queue for tracks.</div>
268268+ </li>
269269+ <li>
270270+ <a href="components/engine/repeat-shuffle/element.js">Repeat & Shuffle</a>
271271+ <div class="list-description">Signals synced with local storage (classified by group) that decide if audio should be repeated and if the queue should be shuffled when filling it.</div>
272272+ </li>
273273+ <li>
274274+ <a href="components/engine/scope/element.js">Scope</a>
275275+ <div class="list-description">Signals that could influence the scope of a set of tracks.</div>
276276+ </li>
277277+</ul>
278278+279279+</div>
280280+281281+282282+ <div class="element">
283283+ <h3>Input</h3>
284284+285285+ <p>
286286+ <em>
287287+ 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.
288288+ </em>
289289+ </p>
290290+291291+ <ul>
292292+ <li>
293293+ <a href="components/input/opensubsonic/element.js">Opensubsonic</a>
294294+ <div class="list-description">Add any (open)subsonic server.</div>
295295+ </li>
296296+ <li>
297297+ <a href="components/input/https/element.js">HTTPS</a>
298298+ <div class="list-description">HTTPS URLs to audio files or streams.</div>
299299+ </li>
300300+ <li>
301301+ <span class="todo">[todo]</span>
302302+ <span>HTTPS (JSON)</span>
303303+ <div class="list-description">Generate tracks based on HTTPS servers that provide JSON (directory) listings.</div>
304304+ </li>
305305+ <li>
306306+ <a href="components/input/s3/element.js">S3</a>
307307+ <div class="list-description">AWS S3 and services that provide the same surface API such as Cloudflare R2.</div>
308308+ </li>
309309+ <li>
310310+ <span class="todo">[todo]</span>
311311+ <span>WebDAV</span>
312312+ <div class="list-description">Add any WebDAV server.</div>
313313+ </li>
314314+</ul>
315315+316316+</div>
317317+318318+319319+ <div class="element">
320320+ <h3>Orchestrators</h3>
321321+322322+ <p>
323323+ <em>
324324+ These too are element compositions. However, unlike themes, these are purely logical. Mostly exist in order to construct sensible defaults to use across themes and other compositions.
325325+ </em>
326326+ </p>
327327+328328+ <ul>
329329+ <li>
330330+ <a href="components/orchestrator/auto-queue/element.js">Automatic queue</a>
331331+ <div class="list-description">Fill the queue automatically with non-manual items (shuffled or regular, based on repeat-shuffle engine).</div>
332332+ </li>
333333+ <li>
334334+ <a href="components/orchestrator/favourites/element.js">Favourites</a>
335335+ <div class="list-description">Mark tracks as favourites. Automatically creates an unordered 'Favourites' playlist.</div>
336336+ </li>
337337+ <li>
338338+ <a href="components/orchestrator/input/element.js">Input</a>
339339+ <div class="list-description"><strong>A default input configuration.</strong> Contains all the inputs provided here.</div>
340340+ </li>
341341+ <li>
342342+ <a href="components/orchestrator/media-session/element.js">Media Session</a>
343343+ <div class="list-description">Keeps the browser/os media session in sync with queue and audio state. Adds handlers for previous, next, seek to, etc.</div>
344344+ </li>
345345+ <li>
346346+ <a href="components/orchestrator/output/element.js">Output</a>
347347+ <div class="list-description"><strong>A default output configuration.</strong> Contains all the outputs provided here along with the relevant transformers.</div>
348348+ </li>
349349+ <li>
350350+ <a href="components/orchestrator/process-tracks/element.js">Process inputs into tracks</a>
351351+ <div class="list-description">Whenever the cached tracks are initially loaded through the passed output element it will list tracks by using the passed input element. Afterwards it loops over all tracks and checks if metadata needs to be fetched. If anything has changed, it'll pass the results to the output element.</div>
352352+ </li>
353353+ <li>
354354+ <a href="components/orchestrator/queue-audio/element.js">Queue ⭤ Audio</a>
355355+ <div class="list-description">Connects the given queue engine to the given audio engine.</div>
356356+ </li>
357357+ <li>
358358+ <a href="components/orchestrator/sources/element.js">Sources</a>
359359+ <div class="list-description">Monitor tracks from the given output to form a list of sources based on the input's sources return value.</div>
360360+ </li>
361361+ <li>
362362+ <a href="components/orchestrator/scoped-tracks/element.js">Scoped Tracks</a>
363363+ <div class="list-description">Supplies the tracks from the given output to the given search processor whenever the tracks collection changes. Additionally it can perform a search and other ways to reduce the scope of tracks based on the given scope engine. Provides a <code>tracks</code> signal similar to <code>output.tracks.collection</code></div>
364364+ </li>
365365+</ul>
366366+367367+</div>
368368+369369+370370+ <div class="element">
371371+ <h3>Output</h3>
372372+373373+ <p>
374374+ <em>
375375+ Output is application-derived data such as playlists. These elements can receive such data and keep it around. These are categorised by the type of data they ingest, or many types in the case of polymorphic. Optionally use transformers to convert output into the expected format.
376376+ </em>
377377+ </p>
378378+379379+ <ul>
380380+ <li>
381381+ <a href="components/output/polymorphic/indexed-db/element.js">Polymorphic / IndexedDB</a>
382382+ <div class="list-description">Stores output into the local indexedDB. Supports any type of data that indexedDB supports.</div>
383383+ </li>
384384+ <li>
385385+ <a href="components/output/bytes/s3/element.js">Bytes / S3</a>
386386+ <div class="list-description">Store output data on AWS S3 or compatible services such as Cloudflare R2.</div>
387387+ </li>
388388+ <li>
389389+ <a href="components/output/raw/atproto/element.js">Raw / AT Protocol</a>
390390+ <div class="list-description">Store your user data on the storage associated with your ATProtocol identity. Data is lexicon shaped by default so this element takes in that data directly without any transformations.</div>
391391+ </li>
392392+</ul>
393393+394394+</div>
395395+396396+397397+ <div class="element">
398398+ <h3>Processors</h3>
399399+400400+ <p>
401401+ <em>
402402+ These elements work with the output generated by the input elements to add more data to them, or process them in some other way.
403403+ </em>
404404+ </p>
405405+406406+ <ul>
407407+ <li>
408408+ <a href="components/processor/artwork/element.js">Artwork</a>
409409+ <div class="list-description">Fetches cover art for a given set of tracks, stored locally in indexedDB. Checks the audio metadata first, then MusicBrainz and uses Last.fm as the fallback.</div>
410410+ </li>
411411+ <li>
412412+ <a href="components/processor/metadata/element.js">Metadata</a>
413413+ <div class="list-description">Fetch audio metadata for a given set of tracks, adding to the <code>Track</code> object.</div>
414414+ </li>
415415+ <li>
416416+ <a href="components/processor/search/element.js">Search</a>
417417+ <div class="list-description">Provides a way to search through a collection of tracks, powered by orama.js</div>
418418+ </li>
419419+</ul>
420420+421421+</div>
422422+423423+424424+ <div class="element">
425425+ <h3>Supplements</h3>
426426+427427+ <p>
428428+ <em>
429429+ Additional elements, such as scrobblers.
430430+ </em>
431431+ </p>
432432+433433+ <ul>
434434+ <li>
435435+ <span class="todo">[todo]</span>
436436+ <span>Last.fm scrobbler</span>
437437+ </li>
438438+ <li>
439439+ <span class="todo">[todo]</span>
440440+ <span>ListenBrainz scrobbler</span>
441441+ </li>
442442+ <li>
443443+ <span class="todo">[todo]</span>
444444+ <span>Rocksky scrobbler</span>
445445+ </li>
446446+ <li>
447447+ <span class="todo">[todo]</span>
448448+ <span>Teal.fm scrobbler</span>
449449+ </li>
450450+</ul>
451451+452452+</div>
453453+454454+455455+ <div class="element">
456456+ <h3>Transformers</h3>
457457+458458+ <p>
459459+ <em>
460460+ Transform data from one format or schema into another. See schema section below for more information. Just as configurators, these are intermediates and require to have the same set of actions as the element it targets.
461461+ </em>
462462+ </p>
463463+464464+ <ul>
465465+ <li>
466466+ <a href="components/transformer/output/bytes/automerge/element.js">Output / Bytes / Automerge</a>
467467+ <div class="list-description">Translate data to and from an Automerge CRDT.</div>
468468+ </li>
469469+ <li>
470470+ <span class="todo">[todo]</span>
471471+ <span>Output / Bytes / Cambria lenses</span>
472472+ <div class="list-description">Uses the Cambria library to seamlessly translate between data schemas so that no data migration is needed.</div>
473473+ </li>
474474+ <li>
475475+ <a href="components/transformer/output/bytes/json/element.js">Output / Bytes / JSON</a>
476476+ <div class="list-description">Raw data schema output ⇄ JSON Uint8Array.</div>
477477+ </li>
478478+ <li>
479479+ <a href="components/transformer/output/raw/atproto-sync/element.js">Output / Raw / AT Protocol Sync</a>
480480+ <div class="list-description">Wraps an AT Protocol output with a local IndexedDB cache. Uses the repo revision to skip unnecessary fetches and performs union merges with tombstone tracking when both local and remote have diverged.</div>
481481+ </li>
482482+ <li>
483483+ <a href="components/transformer/output/refiner/default/element.js">Output / Refiner / Default</a>
484484+ <div class="list-description">The task of a refiner transformer is to remove the output state that is not meant to be saved to storage. For example, ephemeral tracks; this transformer will keep them in memory, but they will not be present in the output. <strong>Ideally this is part of every theme, but you may swap it out with another transformer that might provide better defaults.</strong></div>
485485+ </li>
486486+ <li>
487487+ <a href="components/transformer/output/string/json/element.js">Output / String / JSON</a>
488488+ <div class="list-description">Raw data schema output ⇄ JSON UTF8 string.</div>
489489+ </li>
490490+</ul>
491491+492492+</div>
493493+494494+ </div>
495495+ </section>
496496+497497+ <!-- DEFINITIONS -->
498498+ <section>
499499+ <h2 id="definitions">Definitions</h2>
500500+501501+ <p>All of the elements here are built with these data definitions in mind. That said, you can mix elements that use different definitions; you just have to put a transformer between them in order to translate between them, if needed.</p>
502502+503503+ <ul>
504504+ <li>
505505+ <a href="definitions/output/facet.json">Output / Facet</a>
506506+ <div class="list-description">Facet pointer or HTML snippet.</div>
507507+ </li>
508508+ <li>
509509+ <a href="definitions/output/playlistItem.json">Output / Playlist Item</a>
510510+ <div class="list-description">Represents a single item in a playlist. Tracks are matched based on the given criteria. A playlist is formed by grouping items by their playlist property.</div>
511511+ </li>
512512+ <li>
513513+ <span class="todo">[todo]</span>
514514+ <span>Output / Progress</span>
515515+ <div class="list-description">Used to track progress of (long) audio playback.</div>
516516+ </li>
517517+ <li>
518518+ <a href="definitions/output/theme.json">Output / Theme</a>
519519+ <div class="list-description">Theme pointer or HTML snippet.</div>
520520+ </li>
521521+ <li>
522522+ <a href="definitions/output/track.json">Output / Track</a>
523523+ <div class="list-description">Represents audio that can be played, or a placeholder for a source of tracks. Contains a URI that will resolve to the audio.</div>
524524+ </li>
525525+ <li>
526526+ <a href="definitions/output/trackBundle.json">Output / Track Bundle</a>
527527+ <div class="list-description">A bundle of tracks.</div>
528528+ </li>
529529+</ul>
530530+531531+ </section>
532532+</main>
533533+534534+ </body>
535535+</html>