forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
refactor: constituents foundation
+152
-127
+1
-2
deno.jsonc
+1
-2
deno.jsonc
···
63
63
},
64
64
"exports": {
65
65
// .js
66
-
"./common/constituents/default.js": "./src/common/constituents/default.js",
67
-
"./common/constituents/default/config.js": "./src/common/constituents/default/config.js",
66
+
"./common/constituents/foundation.js": "./src/common/constituents/foundation.js",
68
67
"./common/element.js": "./src/common/element.js",
69
68
"./common/signal.js": "./src/common/signal.js",
70
69
"./common/worker.js": "./src/common/worker.js",
+62
-21
src/common/constituents/default.js
src/common/constituents/foundation.js
+62
-21
src/common/constituents/default.js
src/common/constituents/foundation.js
···
21
21
/**
22
22
* Default config for constituents.
23
23
*/
24
-
export function config() {
25
-
// Pre-instantiated
26
-
const instantiated = {
24
+
export const config = {
25
+
GROUP,
26
+
27
+
/* Some predefined activity groups */
28
+
assemblage: {
29
+
addItemsToQueue,
30
+
playAudioFromQueue,
31
+
searchThroughCollection,
32
+
},
33
+
34
+
// Elements
35
+
engine: {
36
+
audio,
37
+
queue,
38
+
},
39
+
orchestrator: {
40
+
input,
41
+
output,
42
+
queueAudio,
43
+
queueTracks,
44
+
processTracks,
45
+
repeatShuffle,
46
+
searchTracks,
47
+
sources,
48
+
},
49
+
processor: {
50
+
artwork,
51
+
metadata,
52
+
search,
53
+
},
54
+
};
55
+
56
+
export default config;
57
+
58
+
// 📦️
59
+
60
+
function addItemsToQueue() {
61
+
return {
27
62
engine: {
28
63
queue: queue(),
29
64
},
30
65
orchestrator: {
31
66
input: input(),
32
67
output: output(),
68
+
processTracks: processTracks(),
33
69
queueTracks: queueTracks(),
34
-
processTracks: processTracks(),
35
70
repeatShuffle: repeatShuffle(),
36
71
},
37
72
processor: {
38
73
metadata: metadata(),
39
74
},
40
75
};
76
+
}
41
77
42
-
// Return elements
78
+
function playAudioFromQueue() {
79
+
const base = addItemsToQueue();
80
+
43
81
return {
44
-
GROUP,
82
+
...base,
83
+
engine: {
84
+
...base.engine,
85
+
audio: audio(),
86
+
},
87
+
orchestrator: {
88
+
...base.orchestrator,
89
+
queueAudio: queueAudio(),
90
+
},
91
+
};
92
+
}
45
93
46
-
instantiated,
47
-
48
-
lazy: {
49
-
engine: {
50
-
audio,
51
-
},
52
-
orchestrator: {
53
-
queueAudio,
54
-
searchTracks,
55
-
sources,
56
-
},
57
-
processor: {
58
-
artwork,
59
-
search,
60
-
},
94
+
function searchThroughCollection() {
95
+
return {
96
+
orchestrator: {
97
+
output: output(),
98
+
searchTracks: searchTracks(),
99
+
},
100
+
processor: {
101
+
search: search(),
61
102
},
62
103
};
63
104
}
-3
src/common/constituents/default/config.js
-3
src/common/constituents/default/config.js
+1
-1
src/index.js
+1
-1
src/index.js
+4
src/styles/diffuse/page.css
+4
src/styles/diffuse/page.css
+15
-18
src/themes/blur/artwork-controller/index.js
+15
-18
src/themes/blur/artwork-controller/index.js
···
1
-
import defaults from "@common/constituents/default/config.js";
1
+
import foundation from "@common/constituents/foundation.js";
2
2
import { effect } from "@common/signal.js";
3
3
4
4
import ArtworkController from "@themes/blur/artwork-controller/element.js";
5
5
6
-
// Prerequisites
7
-
const aud = defaults.lazy.engine.audio();
8
-
const art = defaults.lazy.processor.artwork();
9
-
const oqa = defaults.lazy.orchestrator.queueAudio();
6
+
// Setup the prerequisite elements
7
+
const assemblage = foundation.assemblage.playAudioFromQueue();
8
+
9
+
const aud = assemblage.engine.audio;
10
+
const inp = assemblage.orchestrator.input;
11
+
const oqa = assemblage.orchestrator.queueAudio;
12
+
const ors = assemblage.orchestrator.repeatShuffle;
13
+
const que = assemblage.engine.queue;
14
+
15
+
const art = foundation.processor.artwork();
10
16
11
17
// Controller
12
18
const dac = new ArtworkController();
13
19
dac.setAttribute("artwork-processor-selector", art.selector);
14
20
dac.setAttribute("audio-engine-selector", aud.selector);
15
-
dac.setAttribute(
16
-
"input-selector",
17
-
defaults.instantiated.orchestrator.input.selector,
18
-
);
19
-
dac.setAttribute(
20
-
"queue-engine-selector",
21
-
defaults.instantiated.engine.queue.selector,
22
-
);
23
-
dac.setAttribute(
24
-
"repeat-shuffle-orchestrator-selector",
25
-
defaults.instantiated.orchestrator.repeatShuffle.selector,
26
-
);
21
+
dac.setAttribute("input-selector", inp.selector);
22
+
dac.setAttribute("queue-engine-selector", que.selector);
23
+
dac.setAttribute("repeat-shuffle-orchestrator-selector", ors.selector);
27
24
28
25
// Add to DOM
29
26
document.body.append(dac);
30
27
31
28
// Effect - Link the repeat/shuffle & queue-audio orchestrators
32
29
effect(() => {
33
-
const repeat = rso.repeat();
30
+
const repeat = ors.repeat();
34
31
35
32
if (repeat && !oqa.hasAttribute("repeat")) {
36
33
oqa.toggleAttribute("repeat");
+55
-61
src/themes/loader/constituent/index.vto
+55
-61
src/themes/loader/constituent/index.vto
···
110
110
</section>
111
111
112
112
<!-- FOUNDATION -->
113
-
<section>
114
-
<h2 id="foundation">Foundation</h2>
115
-
116
-
<div class="columns">
117
-
<div class="flex">
118
-
<p>
119
-
The default configuration for constituents includes the following elements which are loaded automatically:
120
-
</p>
121
-
<ul>
122
-
<li>
123
-
<span>Orchestrator / Input</span>
124
-
<div class="list-description">
125
-
<small>A prebuilt input configuration with all inputs Diffuse has to offer.</small>
126
-
</div>
127
-
</li>
128
-
<li>
129
-
<span>Orchestrator / Output</span>
130
-
<div class="list-description">
131
-
<small>A prebuilt output configuration with all outputs and their appropriate transformers.</small>
132
-
</div>
133
-
</li>
134
-
<li>
135
-
<span>Orchestrator / Process inputs into tracks<br /><small>(processing on launch)</small></span>
136
-
<div class="list-description">
137
-
<small>Lists all inputs, gathers metadata and then creates tracks where needed.</small>
138
-
</div>
139
-
</li>
140
-
<li>
141
-
<span>Processor / Metadata</span>
142
-
<div class="list-description">
143
-
<small>Processor that fetches metadata of audio files and streams.</small>
144
-
</div>
145
-
</li>
146
-
</ul>
147
-
</div>
113
+
<div class="columns" style="margin-top: var(--space-2xl);">
114
+
<section style="flex-grow: 10; max-width: var(--container-xl);">
115
+
<h2 id="foundation" style="margin-top: 0;">Foundation</h2>
148
116
149
-
<div class="flex">
150
-
<p>
151
-
Besides this the foundation provides most other elements preconfigured. These are lazy loaded so you do need to call the method in order to load it.
152
-
</p>
117
+
<p>
118
+
Diffuse comes with a foundation that preconfigures all elements so you don't have to set them up yourself, along with an assemblage of elements for certain activities. It internally tracks the DOM addition of the custom elements, so no need to worry about setting up an element multiple times.
119
+
</p>
120
+
<p>
121
+
<small><i class="ph-fill ph-info"></i> Refer to the <a href="#elements">elements index</a> to find out what each element does.</small>
122
+
</p>
123
+
<div class="code-block">
124
+
<code>
125
+
{{- echo -}}
126
+
import foundation from "common/constituents/foundation.js"
127
+
{{ /echo }}
128
+
{{ echo -}}foundation.engine.audio(){{- /echo }}
129
+
{{ echo -}}foundation.engine.queue(){{- /echo }}
153
130
154
-
<div class="code-block">
155
-
<code>
156
-
{{- echo -}}
157
-
import { lazy } from "common/constituents/default/config.js"
158
-
{{ /echo }}
159
-
{{ echo -}}lazy.engine.audio(){{- /echo }}
160
-
{{ echo -}}lazy.engine.queue(){{- /echo }}
131
+
{{ echo -}}foundation.orchestrator.input(){{- /echo }}
132
+
{{ echo -}}foundation.orchestrator.output(){{- /echo }}
133
+
{{ echo -}}foundation.orchestrator.queueAudio(){{- /echo }}
134
+
{{ echo -}}foundation.orchestrator.queueTracks(){{- /echo }}
135
+
{{ echo -}}foundation.orchestrator.processTracks(){{- /echo }}
136
+
{{ echo -}}foundation.orchestrator.repeatShuffle(){{- /echo }}
137
+
{{ echo -}}foundation.orchestrator.searchTracks(){{- /echo }}
138
+
{{ echo -}}foundation.orchestrator.sources(){{- /echo }}
161
139
162
-
{{ echo -}}lazy.orchestrator.queueAudio(){{- /echo }}
163
-
{{ echo -}}lazy.orchestrator.queueTracks(){{- /echo }}
164
-
{{ echo -}}lazy.orchestrator.repeatShuffle(){{- /echo }}
165
-
{{ echo -}}lazy.orchestrator.searchTracks(){{- /echo }}
166
-
{{ echo -}}lazy.orchestrator.sources(){{- /echo }}
140
+
{{ echo -}}foundation.processor.artwork(){{- /echo }}
141
+
{{ echo -}}foundation.processor.metadata(){{- /echo }}
142
+
{{ echo -}}foundation.processor.search(){{- /echo -}}
143
+
</code>
144
+
</div>
167
145
168
-
{{ echo -}}lazy.processor.artwork(){{- /echo }}
169
-
{{ echo -}}lazy.processor.search(){{- /echo -}}
170
-
</code>
171
-
</div>
146
+
<p>
147
+
<small>Assemblages:</small>
148
+
</p>
149
+
<ul style="margin-bottom: 0;">
150
+
<li>
151
+
<span>Add items to the queue</span>
152
+
<div class="list-description">
153
+
<code>foundation.assemblage.addItemsToQueue()</code>
154
+
</div>
155
+
</li>
156
+
<li>
157
+
<span>Play audio from the queue</span>
158
+
<div class="list-description">
159
+
<code>foundation.assemblage.playAudioFromQueue()</code>
160
+
</div>
161
+
</li>
162
+
<li>
163
+
<span>Search through your collection</span>
164
+
<div class="list-description" style="margin-bottom: 0;">
165
+
<code>foundation.assemblage.searchThroughCollection()</code>
166
+
</div>
167
+
</li>
168
+
</ul>
169
+
</section>
172
170
173
-
<p>
174
-
<i class="ph-fill ph-info"></i> Refer to the <a href="#elements">elements index</a> to find out what each element does.
175
-
</p>
176
-
</div>
177
-
</div>
178
-
</section>
171
+
<div class="dither-mask filler"></div>
172
+
</div>
179
173
</main>
+7
-16
src/themes/webamp/browser/index.js
+7
-16
src/themes/webamp/browser/index.js
···
1
-
import defaults from "@common/constituents/default/config.js";
1
+
import foundation from "@common/constituents/foundation.js";
2
2
import BrowserElement from "@themes/webamp/browser/element.js";
3
3
4
-
const search = defaults.lazy.processor.search();
5
-
defaults.lazy.orchestrator.searchTracks();
4
+
const que = foundation.assemblage.addItemsToQueue();
5
+
const sea = foundation.assemblage.searchThroughCollection();
6
6
7
7
const el = new BrowserElement();
8
-
el.setAttribute(
9
-
"input-selector",
10
-
defaults.instantiated.orchestrator.input.selector,
11
-
);
12
-
el.setAttribute(
13
-
"output-selector",
14
-
defaults.instantiated.orchestrator.output.selector,
15
-
);
16
-
el.setAttribute(
17
-
"queue-engine-selector",
18
-
defaults.instantiated.engine.queue.selector,
19
-
);
20
-
el.setAttribute("search-processor-selector", search.selector);
8
+
el.setAttribute("input-selector", que.orchestrator.input.selector);
9
+
el.setAttribute("output-selector", que.orchestrator.output.selector);
10
+
el.setAttribute("queue-engine-selector", que.engine.queue.selector);
11
+
el.setAttribute("search-processor-selector", sea.processor.search.selector);
21
12
22
13
document.querySelector("#placeholder")?.replaceWith(el);
+7
-5
src/themes/webamp/configurators/input/index.js
+7
-5
src/themes/webamp/configurators/input/index.js
···
1
-
import defaults from "@common/constituents/default/config.js";
1
+
import foundation from "@common/constituents/foundation.js";
2
2
import InputConfigElement from "@themes/webamp/configurators/input/element.js";
3
3
4
-
const sources = defaults.lazy.orchestrator.sources();
4
+
const inp = foundation.orchestrator.input();
5
+
const out = foundation.orchestrator.output();
6
+
const sou = foundation.orchestrator.sources();
5
7
6
8
const el = new InputConfigElement();
7
-
el.setAttribute("input-selector", defaults.orchestrator.input.selector);
8
-
el.setAttribute("output-selector", defaults.orchestrator.output.selector);
9
-
el.setAttribute("sources-orchestrator-selector", sources.selector);
9
+
el.setAttribute("input-selector", inp.selector);
10
+
el.setAttribute("output-selector", out.selector);
11
+
el.setAttribute("sources-orchestrator-selector", sou.selector);
10
12
11
13
document.querySelector("#placeholder")?.replaceWith(el);