forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
1# Diffuse
2
3_Diffuse is a few things:_
4
5- A collection of custom DOM elements (aka. framework-agnostic web components) that allow you to build an audio player, do audio metadata processing and browsing, list audio files and streams from various sources/APIs/servers, define how to save or sync user-data, etc.
6- A HTML loader that loads "interfaces" from the local user-data cache, the default set from Diffuse, HTTP(S) URLs, or [AT Protocol](https://atproto.com) URIs. When you load an interface, it's supplied with optional "features" which are also pieces of HTML. These pieces are called "facets" and are loaded from the local user-data cache as well.
7- A default configuration of the custom elements that's called "the foundation". This is used throughout the default set of facets. This foundation is configured so that the facets can communicate across tabs/frames; this is done by setting the element's `group` attribute.
8- A collection of data schemas in the form of atproto [lexicons](https://atproto.com/specs/lexicon). These live in the `definitions` directory.
9
10Putting all of this together to make cooperative and [malleable](https://www.inkandswitch.com/essay/malleable-software/) software. More information on the [website](https://elements.diffuse.sh/).
11
12
13## Developer usage
14
15You can either consume the Diffuse library via the [deployed instance](https://elements.diffuse.sh/elements/) (the listed elements link to Javascript files) or the [Javascript package](https://jsr.io/@toko/diffuse). From there you can use the custom elements as with any other custom DOM element, by writing HTML or creating a `Class` instance.
16
17```html
18<script src="https://elements.diffuse.sh/latest/components/engine/queue/element.js"></script>
19
20<de-queue></de-queue>
21```
22
23```js
24import QueueEngine from "@toko/diffuse/components/engine/queue/element.js"
25
26const queue = new QueueEngine()
27queue.setAttribute("group", "facets")
28
29document.body.append(queue)
30````
31
32
33## Build it yourself
34
35Install [Deno](https://docs.deno.com/runtime/getting_started/installation/).
36
37```shell
38deno run gen:defs:types
39deno run build # or deno run serve
40```
41
42Diffuse is built with:
43- [Deno](https://deno.com)
44- Web components (custom elements)
45- Web workers (also: shared + service workers)
46- Signals (currently [alien-signals](https://github.com/stackblitz/alien-signals), but hopefully [TC39](https://github.com/tc39/proposal-signals) in the future)
47- [`lit-html`](https://lit.dev/docs/libraries/standalone-templates/)
48- [`music-metadata`](https://github.com/Borewit/music-metadata)
49- [Lume](https://lume.land) & [ESBuild](https://esbuild.github.io)