tokono.ma
A music player that connects to your cloud/distributed storage.
1# Architecture
2
3Diffuse provides a set of custom (DOM) elements (aka. web components) that can be combined into a working audio player or media browser living in a web view.
4
5
6## Components / Elements
7
8There are various categories of these elements, and may have subcategories. Each element lives in its own directory, containing the code, documentation and other assets associated with that element. The directory for the elements is `src/components/`, each subdirectory is a category which in turn may have one or more subcategories. If a directory has an `element.js` then that directory represents the element, not a subcategory.
9
10A few examples:
11- `src/components/engine/audio/element.js`: Category = engine, element = audio
12- `src/components/output/polymorphic/indexed-db/element.js`: Category = output, subcategory = polymorphic, element = indexed-db
13- `src/components/transformer/output/refiner/default/element.js`: Category = transformer, subcategory 1 = output, subcategory 2 = refiner, element = default
14
15Most categories of components are independent, they do not rely on other components. There are a few exceptions:
16
17- The category named 'orchestrator'. These are compositions of other components, meaning they consume other components. These have attributes ending with `-selector` which is a DOM selector that points at the component that is the dependency.
18- The category named 'configurator'. These take other components as DOM children with the same actions/methods as the configurator itself. They serve to delegate or combine.
19
20A lot of components will have a worker (located in `worker.js` besides the `element.js`) which is connected to the element using `this.workerProxy()` in the constructor. The proxy itself may be stored on the class instance, but it is usually not required.
21
22
23## Definitions
24
25`src/definitions/` are lexicons, JSON schemas that describe data in the system.
26
27
28## Other directories
29
30- `src/common`: Common Javascript code shared by various components and/or pages.
31- `src/styles`: Common CSS shared by pages or facets.
32- `src/favicons`, `src/fonts`, `src/images` are binary assets for facets and pages.
33- `src/_components` and `src/_includes` are templates used in `.vto` templates.