forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
feat: webamp input config overview tab
+96
-37
+1
-1
.env
+1
-1
.env
+22
src/themes/webamp/98-extra.css
+22
src/themes/webamp/98-extra.css
···
1
+
fieldset + fieldset,
2
+
fieldset + form {
3
+
margin-top: var(--grouped-element-spacing);
4
+
}
5
+
6
+
form {
7
+
margin-bottom: var(--grouped-element-spacing);
8
+
}
9
+
10
+
p {
11
+
margin: var(--grouped-element-spacing) 0;
12
+
}
13
+
14
+
.with-icon {
15
+
align-items: center;
16
+
display: inline-flex;
17
+
gap: var(--space-3xs);
18
+
19
+
&.with-icon--large {
20
+
gap: var(--space-xs);
21
+
}
22
+
}
+65
-2
src/themes/webamp/configurators/input/element.js
+65
-2
src/themes/webamp/configurators/input/element.js
···
1
-
import { DiffuseElement, query } from "@common/element.js";
1
+
import { DiffuseElement, query, queryOptional } from "@common/element.js";
2
2
import { signal } from "@common/signal.js";
3
3
4
4
import { buildURI as buildOpenSubsonicURI } from "@components/input/opensubsonic/common.js";
···
40
40
/** @type {import("@components/orchestrator/sources/element.js").CLASS | undefined} */ (undefined),
41
41
);
42
42
43
+
$processTracksOrchestrator = signal(
44
+
/** @type {import("@components/orchestrator/process-tracks/element.js").CLASS | undefined} */ (undefined),
45
+
);
46
+
43
47
// LIFECYCLE
44
48
45
49
/**
···
57
61
/** @type {import("@components/orchestrator/sources/element.js").CLASS} */
58
62
const sourcesOrchestrator = query(this, "sources-orchestrator-selector");
59
63
64
+
/** @type {import("@components/orchestrator/process-tracks/element.js").CLASS | null} */
65
+
const processTracksOrchestrator = queryOptional(
66
+
this,
67
+
"process-tracks-orchestrator-selector",
68
+
);
69
+
60
70
await customElements.whenDefined(input.localName);
61
71
await customElements.whenDefined(output.localName);
62
72
await customElements.whenDefined(sourcesOrchestrator.localName);
63
73
74
+
if (processTracksOrchestrator) {
75
+
await customElements.whenDefined(processTracksOrchestrator.localName);
76
+
}
77
+
64
78
this.$input.value = input;
65
79
this.$output.value = output;
66
80
this.$sourcesOrchestrator.value = sourcesOrchestrator;
81
+
82
+
if (processTracksOrchestrator) {
83
+
this.$processTracksOrchestrator.value = processTracksOrchestrator;
84
+
}
67
85
}
68
86
69
87
// EVENTS
···
242
260
243
261
return html`
244
262
<link rel="stylesheet" href="styles/vendor/98.css" />
263
+
<link rel="stylesheet" href="themes/webamp/98-extra.css" />
245
264
246
265
<style>
247
266
@import "./themes/webamp/98-vars.css";
···
291
310
display: none
292
311
}
293
312
313
+
#tabbed:has(#overview-tab:checked) #overview-contents { display: block }
294
314
#tabbed:has(#opensubsonic-tab:checked) #opensubsonic-contents { display: block }
295
315
#tabbed:has(#s3-tab:checked) #s3-contents { display: block }
296
316
#tabbed:has(#https-tab:checked) #https-contents { display: block }
···
321
341
<div id="tabbed">
322
342
<menu role="tablist" class="multirows">
323
343
<li role="tab">
344
+
<label for="overview-tab">
345
+
<span>Overview</span>
346
+
<input name="input-tab" id="overview-tab" type="radio" checked="" />
347
+
</label>
348
+
</li>
349
+
<li role="tab">
324
350
<label for="https-tab">
325
351
<span>HTTPS</span>
326
352
<input name="input-tab" id="https-tab" type="radio" />
···
335
361
<li role="tab">
336
362
<label for="s3-tab">
337
363
<span>S3</span>
338
-
<input name="input-tab" id="s3-tab" type="radio" checked="" />
364
+
<input name="input-tab" id="s3-tab" type="radio" />
339
365
</label>
340
366
</li>
341
367
</menu>
342
368
343
369
<div class="window" role="tabpanel">
370
+
<!-- Overview -->
371
+
<div class="window-body" id="overview-contents">
372
+
<fieldset>
373
+
<span class="with-icon with-icon--large">
374
+
<img
375
+
src="images/icons/windows_98/cd_audio_cd_a-0.png"
376
+
width="24"
377
+
/>
378
+
<span>Here you can configure where your audio comes from.<br />Add
379
+
sources using the tabs above, then tracks will be processed
380
+
automatically.
381
+
</span>
382
+
</span>
383
+
</fieldset>
384
+
385
+
${this.$processTracksOrchestrator.value?.isProcessing()
386
+
? html`
387
+
<fieldset>
388
+
<legend>Processing tracks</legend>
389
+
<div class="with-icon with-icon--large">
390
+
<img
391
+
src="images/icons/windows_98/gears-0.png"
392
+
width="24"
393
+
/>
394
+
<span>Gathering metadata from your sources ...</span>
395
+
</div>
396
+
<div
397
+
class="progress-indicator segmented"
398
+
style="margin-top: var(--grouped-element-spacing);"
399
+
>
400
+
<div class="progress-indicator-bar" style="width: 100%"></div>
401
+
</div>
402
+
</fieldset>
403
+
`
404
+
: ""}
405
+
</div>
406
+
344
407
<!-- HTTPS -->
345
408
<div class="window-body" id="https-contents">
346
409
<fieldset>
+5
-7
src/themes/webamp/configurators/input/facet.html.txt
+5
-7
src/themes/webamp/configurators/input/facet.html.txt
···
1
1
<div class="window">
2
-
<div
3
-
class="title-bar"
4
-
>
2
+
<div class="title-bar">
5
3
<div class="title-bar-icon">
6
4
<img src="images/icons/windows_98/directory_explorer-4.png" height="14" />
7
5
</div>
8
-
<div class="title-bar-text" draggable="false">
9
-
Input configurator
10
-
</div>
6
+
<div class="title-bar-text" draggable="false">Input configurator</div>
11
7
<div class="title-bar-controls">
12
8
<button aria-label="Close" onclick="window.close()"></button>
13
9
</div>
···
18
14
</div>
19
15
20
16
<style>
17
+
@import "./styles/variables.css";
21
18
@import "./styles/vendor/98.css";
22
19
@import "./themes/webamp/fonts.css";
23
20
@import "./themes/webamp/facet.css";
···
30
27
31
28
const inp = foundation.orchestrator.input();
32
29
const out = foundation.orchestrator.output();
33
-
const pro = foundation.orchestrator.processTracks({ disableWhenReady: true });
30
+
const pro = foundation.orchestrator.processTracks({ disableWhenReady: false });
34
31
const sou = foundation.orchestrator.sources();
35
32
36
33
const el = new InputConfigElement();
37
34
el.setAttribute("input-selector", inp.selector);
38
35
el.setAttribute("output-selector", out.selector);
39
36
el.setAttribute("sources-orchestrator-selector", sou.selector);
37
+
el.setAttribute("process-tracks-orchestrator-selector", pro.selector);
40
38
41
39
document.querySelector("#placeholder")?.replaceWith(el);
42
40
+1
-1
src/themes/webamp/configurators/output/element.js
+1
-1
src/themes/webamp/configurators/output/element.js
+1
src/themes/webamp/configurators/output/facet.html.txt
+1
src/themes/webamp/configurators/output/facet.html.txt
-26
src/themes/webamp/facet.css
-26
src/themes/webamp/facet.css
···
1
-
@import "../../styles/variables.css";
2
-
@import "./98-vars.css";
3
-
4
1
body {
5
2
background: #3a6ea5;
6
3
margin: 0;
7
4
}
8
5
9
-
fieldset + fieldset,
10
-
fieldset + form {
11
-
margin-top: var(--grouped-element-spacing);
12
-
}
13
-
14
-
form {
15
-
margin-bottom: var(--grouped-element-spacing);
16
-
}
17
-
18
-
p {
19
-
margin: var(--grouped-element-spacing) 0;
20
-
}
21
-
22
6
#container {
23
7
align-items: center;
24
8
display: flex;
···
45
29
flex: 1;
46
30
overflow: hidden;
47
31
}
48
-
49
-
.with-icon {
50
-
align-items: center;
51
-
display: inline-flex;
52
-
gap: var(--space-3xs);
53
-
54
-
&.with-icon--large {
55
-
gap: var(--space-xs);
56
-
}
57
-
}