A music player that connects to your cloud/distributed storage.
chore: update index page
+72
-94
-64
src/component/constituent/blur/browser-list/element.js
-64
src/component/constituent/blur/browser-list/element.js
···
1
-
import { DiffuseElement } from "@common/element.js";
2
-
import { signal } from "@common/signal.js";
3
-
4
-
/**
5
-
* @import {RenderArg} from "@common/element.d.ts"
6
-
* @import {State} from "./types.d.ts"
7
-
* @import {Track} from "@component/core/types.d.ts"
8
-
*/
9
-
10
-
////////////////////////////////////////////
11
-
// ELEMENT
12
-
////////////////////////////////////////////
13
-
14
-
class BrowserList extends DiffuseElement {
15
-
tracks = signal(/** @type {Track[]} */ ([]));
16
-
17
-
// STATE
18
-
19
-
get state() {
20
-
return {
21
-
tracks: this.tracks.get,
22
-
};
23
-
}
24
-
25
-
// RENDER
26
-
27
-
/**
28
-
* @param {RenderArg<State>} _
29
-
*/
30
-
render({ html, state }) {
31
-
console.log("Rendering", state.tracks());
32
-
33
-
const list = state.tracks().map(
34
-
/**
35
-
* @param {Track} t
36
-
* @param {number} idx
37
-
*/
38
-
(t, idx) =>
39
-
html`
40
-
<div id="track-${idx}">${t}</div>
41
-
`,
42
-
).join("");
43
-
44
-
return html`
45
-
<style>
46
-
:host {
47
-
color: blue;
48
-
}
49
-
</style>
50
-
<section>${list}</section>
51
-
`;
52
-
}
53
-
}
54
-
55
-
export default BrowserList;
56
-
57
-
////////////////////////////////////////////
58
-
// REGISTER
59
-
////////////////////////////////////////////
60
-
61
-
export const CLASS = BrowserList;
62
-
export const NAME = "dcb-browser-list";
63
-
64
-
customElements.define(NAME, BrowserList);
-4
src/component/constituent/blur/browser-list/types.d.ts
-4
src/component/constituent/blur/browser-list/types.d.ts
+72
-26
src/index.vto
+72
-26
src/index.vto
···
4
4
themes:
5
5
- url: "theme/blur/"
6
6
title: "Blur"
7
+
- url: "theme/webamp/"
8
+
title: "Webamp"
7
9
8
10
engines:
9
11
- url: "engine/audio/"
10
12
title: "Audio"
11
13
- url: "engine/queue/"
12
14
title: "Queue"
15
+
16
+
input:
17
+
- url: "input/opensubsonic/"
18
+
title: "Opensubsonic"
19
+
- url: "input/s3/"
20
+
title: "S3 (TODO)"
21
+
22
+
orchestrators:
23
+
- url: "orchestrator/process-tracks/"
24
+
title: "Process inputs into tracks"
25
+
- url: "orchestrator/queue-audio/"
26
+
title: "Queue ⭤ Audio"
27
+
- url: "orchestrator/queue-tracks/"
28
+
title: "Queue ⭤ Tracks"
29
+
30
+
output:
31
+
- url: "output/indexed-db/"
32
+
title: "IndexedDB"
33
+
34
+
processors:
35
+
- url: "processor/artwork/"
36
+
title: "Artwork"
37
+
- url: "processor/metadata/"
38
+
title: "Metadata"
39
+
- url: "processor/search/"
40
+
title: "Search"
13
41
14
42
---
15
43
<link rel="stylesheet" href="index.css" />
···
69
97
70
98
<div class="columns">
71
99
{{ await comp.element({
100
+
title: "Configurators",
101
+
items: configurators,
102
+
content: `
103
+
Elements that serve as an intermediate in order to make a particular kind of element configurable. In other words, these allow for an applet to be swapped out with another that takes the same, or a subset of the actions and data output.
104
+
`
105
+
}) }}
106
+
107
+
{{ await comp.element({
72
108
title: "Engines",
73
109
items: engines,
74
110
content: `
75
-
Elements with each a singular purpose and don't have any UI. There are specialised UI and
76
-
orchestrator elements that control these.
111
+
Elements with each a singular purpose and don't have any UI. There are specialised UI and orchestrator elements that control these.
77
112
`
78
113
}) }}
79
114
80
-
<!--<Applet title="Configurators" list={configurators}>
81
-
Applets that serve as an intermediate in order to make a particular kind of applet
82
-
configurable. In other words, these allow for an applet to be swapped out with another
83
-
that takes the same, or a subset of the actions and data output.
84
-
</Applet>
85
-
86
-
<Applet title="Input" list={input}>
87
-
Inputs are sources of audio tracks. Each track is an entry in the list of possible items
88
-
to play. These can be files or streams, static or dynamic.
89
-
</Applet>
115
+
{{ await comp.element({
116
+
title: "Input",
117
+
items: input,
118
+
content: `
119
+
Inputs are sources of audio tracks. Each track is an entry in the list of possible items to play. These can be files or streams, static or dynamic.
120
+
`
121
+
}) }}
90
122
91
-
<Applet title="Orchestrators" list={orchestrators}>
92
-
These too are applet compositions. However, unlike themes, these are purely logical.
93
-
Mostly exist in order to construct sensible defaults to use across themes and
94
-
abstractions.
95
-
</Applet>
123
+
{{ await comp.element({
124
+
title: "Orchestrators",
125
+
items: orchestrators,
126
+
content: `
127
+
These too are element compositions. However, unlike themes, these are purely logical. Mostly exist in order to construct sensible defaults to use across themes and other compositions.
128
+
`
129
+
}) }}
96
130
97
-
<Applet title="Output" list={output}>
98
-
Output is application-derived data such as playlists. These applets can receive such data
99
-
and keep it around.
100
-
</Applet>
131
+
{{ await comp.element({
132
+
title: "Output",
133
+
items: output,
134
+
content: `
135
+
Output is application-derived data such as playlists. These elements can receive such data and keep it around.
136
+
`
137
+
}) }}
101
138
102
-
<Applet title="Processors" list={processors}>
103
-
These applets work with the tracks generated by the input applets to add more data to
104
-
them, or process them in some other way.
105
-
</Applet>
139
+
{{ await comp.element({
140
+
title: "Processors",
141
+
items: processors,
142
+
content: `
143
+
These elements work with the tracks generated by the input applets to add more data to them, or process them in some other way.
144
+
`
145
+
}) }}
106
146
107
-
<Applet title="Supplements" list={[]}>Additional applets, such as scrobblers.</Applet>-->
147
+
{{ await comp.element({
148
+
title: "Supplements",
149
+
items: supplements,
150
+
content: `
151
+
Additional elements, such as scrobblers.
152
+
`
153
+
}) }}
108
154
</div>
109
155
</section>
110
156