A music player that connects to your cloud/distributed storage.
feat: add-source and process buttons on sources facet
+62
-7
-2
src/_data/facets.json
-2
src/_data/facets.json
···
11
11
"url": "facets/playback/auto-queue/index.html",
12
12
"title": "Automatic Queue",
13
13
"category": "Playback",
14
-
"featured": true,
15
14
"desc": "Automatically put tracks into the queue when this interface is opened. Also allows for controlling shuffle, repeat, search, sorting and playlist selection."
16
15
},
17
16
{
···
155
154
"url": "facets/data/process-tracks/index.html",
156
155
"title": "Process Tracks",
157
156
"category": "Data",
158
-
"featured": true,
159
157
"desc": "Process all your audio sources into tracks. Shows a progress bar when processing is occuring."
160
158
},
161
159
{
+1
src/common/facets/constants.js
+1
src/common/facets/constants.js
+13
-1
src/facets/data/sources/index.html
+13
-1
src/facets/data/sources/index.html
···
76
76
</div>
77
77
<h1>Sources</h1>
78
78
<p>
79
-
An overview of all audio inputs. Disable a source to hide its tracks without removing them.
79
+
An overview of all your audio inputs. Remember that these need to be processed into tracks
80
+
before they become useful. This should happen automatically when you have that feature enabled
81
+
(on by default), otherwise click the button below.
82
+
</p>
83
+
<p class="button-row" style="margin-top: var(--space-md)">
84
+
<a href="../../l/?path=facets/connect/index.html" class="button button--accent">
85
+
<i class="ph-fill ph-plugs"></i>
86
+
Add a source
87
+
</a>
88
+
<button id="process-btn">
89
+
<i id="process-icon" class="ph-fill ph-arrows-clockwise"></i>
90
+
<span id="process-label">Process</span>
91
+
</button>
80
92
</p>
81
93
</div>
82
94
+26
-1
src/facets/data/sources/index.inline.js
+26
-1
src/facets/data/sources/index.inline.js
···
27
27
// SETUP
28
28
////////////////////////////////////////////
29
29
30
-
const [inputConfigurator, sourcesOrchestrator, outputOrchestrator] =
30
+
const [inputConfigurator, sourcesOrchestrator, outputOrchestrator, processOrchestrator] =
31
31
await Promise.all([
32
32
foundation.configurator.input(),
33
33
foundation.orchestrator.sources(),
34
34
foundation.orchestrator.output(),
35
+
foundation.orchestrator.processTracks({ disableWhenReady: true }),
35
36
]);
36
37
37
38
await Promise.all([
···
40
41
customElements.whenDefined(outputOrchestrator.localName),
41
42
]);
42
43
44
+
45
+
////////////////////////////////////////////
46
+
// PROCESS BUTTON
47
+
////////////////////////////////////////////
48
+
49
+
const processBtn = /** @type {HTMLButtonElement} */ (document.querySelector("#process-btn"));
50
+
const processIcon = /** @type {HTMLElement} */ (document.querySelector("#process-icon"));
51
+
const processLabel = /** @type {HTMLElement} */ (document.querySelector("#process-label"));
52
+
53
+
effect(() => {
54
+
const isProcessing = processOrchestrator.isProcessing();
55
+
56
+
processBtn.disabled = isProcessing;
57
+
processIcon.className = isProcessing
58
+
? "ph-fill ph-arrows-clockwise animate-spin"
59
+
: "ph-fill ph-arrows-clockwise";
60
+
processLabel.textContent = isProcessing ? "Processing" : "Process";
61
+
});
62
+
63
+
processBtn.addEventListener("click", async () => {
64
+
const output = await foundation.orchestrator.output();
65
+
await Output.data(output.tracks);
66
+
await processOrchestrator.process();
67
+
});
43
68
44
69
////////////////////////////////////////////
45
70
// UI
+1
-1
src/guide.vto
+1
-1
src/guide.vto
···
105
105
</li>
106
106
107
107
<li>
108
-
<a class="with-icon" href="{{ ('facets/data/process-tracks/index.html') |> facetLoaderURL }}">
108
+
<a class="with-icon" href="{{ ('facets/data/sources/index.html') |> facetLoaderURL }}">
109
109
<i class="ph-fill ph-number-circle-two" style="opacity: 0.25"></i>
110
110
<i class="ph-fill ph-gear-fine"></i>
111
111
<span>Wait until processed</span>
+21
-2
src/styles/diffuse/facet.css
+21
-2
src/styles/diffuse/facet.css
···
7
7
padding: var(--space-2xl) var(--space-xl);
8
8
9
9
@media (min-width: 48rem) {
10
-
align-items: center;
11
10
display: flex;
12
11
flex-direction: row;
13
12
gap: var(--space-2xl);
···
16
15
}
17
16
}
18
17
18
+
ul,
19
+
ol,
20
+
p {
21
+
text-wrap: balance;
22
+
}
23
+
19
24
.facet__left {
20
25
container-type: inline-size;
21
26
flex: 1;
···
23
28
max-width: 24rem;
24
29
25
30
@media (min-width: 48rem) {
31
+
align-self: stretch;
32
+
display: flex;
33
+
flex-direction: column;
34
+
justify-content: center;
26
35
margin-bottom: 0;
36
+
max-height: calc(100vh - 2 * var(--space-2xl));
27
37
}
28
38
29
39
p:last-child {
···
34
44
.facet__right {
35
45
flex: 1;
36
46
max-width: 24rem;
47
+
48
+
@media (min-width: 48rem) {
49
+
display: flex;
50
+
flex-direction: column;
51
+
justify-content: center;
52
+
}
37
53
38
54
p:first-child {
39
55
margin-top: 0;
···
122
138
opacity: 1;
123
139
}
124
140
125
-
button {
141
+
button,
142
+
.button {
126
143
align-items: center;
127
144
background: var(--form-color);
128
145
border: 1px solid var(--border-color);
···
134
151
font-size: var(--fs-sm);
135
152
gap: var(--space-2xs);
136
153
padding: var(--space-2xs) var(--space-sm);
154
+
text-decoration: none;
137
155
transition-duration: 250ms;
138
156
transition-property: opacity;
139
157
···
142
160
opacity: 0.4;
143
161
}
144
162
163
+
&.button--accent,
145
164
&.button--brand {
146
165
background: var(--accent);
147
166
border-color: transparent;