A music player that connects to your cloud/distributed storage.
chore: webamp theme refactor
+250
-185
+4
-4
src/themes/webamp/browser/element.js
+4
-4
src/themes/webamp/browser/element.js
···
111
111
const tracks = this.#searchResults.value;
112
112
113
113
return html`
114
-
<link rel="stylesheet" href="../../styles/vendor/98.css" />
114
+
<link rel="stylesheet" href="styles/vendor/98.css" />
115
+
115
116
<style>
116
-
@import "./98-vars.css";
117
+
@import "./themes/webamp/98-vars.css";
117
118
118
119
/***********************************
119
120
* SEARCH
···
164
165
165
166
<search class="field-row">
166
167
<label for="search-input">Search</label>
167
-
<input id="search-input" type="search" @change="${this
168
-
.performSearch}" />
168
+
<input id="search-input" type="search" @change="${this.performSearch}" />
169
169
</search>
170
170
171
171
<div class="sunken-panel" style="width: 480px">
+29
src/themes/webamp/browser/index.vto
+29
src/themes/webamp/browser/index.vto
···
1
+
---
2
+
layout: layouts/diffuse.vto
3
+
base: ../../../
4
+
5
+
styles:
6
+
- styles/vendor/98.css
7
+
---
8
+
9
+
<!-- ELEMENTS -->
10
+
11
+
<dtw-window id="browser-window" open>
12
+
<span slot="title-icon"><img src="images/icons/windows_98/directory_explorer-4.png" height="14" /></span>
13
+
<span slot="title">Browse collection</span>
14
+
<dtw-browser
15
+
input-selector="#input"
16
+
output-selector="#output"
17
+
queue-engine-selector="de-queue"
18
+
search-processor-selector="dp-search"
19
+
></dtw-browser>
20
+
</dtw-window>
21
+
22
+
<!-- SCRIPTS -->
23
+
24
+
<script type="module">
25
+
import { config } from "./common/constituents/default.js"
26
+
27
+
// Prepare default constituents setup
28
+
const defaults = config()
29
+
</script>
+46
src/themes/webamp/configurators/output.js
+46
src/themes/webamp/configurators/output.js
···
1
+
import { DiffuseElement, query, whenElementsDefined } from "@common/element.js";
2
+
import { signal } from "@common/signal.js";
3
+
4
+
/**
5
+
* @import {RenderArg} from "@common/element.d.ts"
6
+
* @import {Track} from "@definitions/types.d.ts"
7
+
* @import {InputElement} from "@components/input/types.d.ts"
8
+
* @import {OutputElement} from "@components/output/types.d.ts"
9
+
*/
10
+
11
+
class OutputConfig extends DiffuseElement {
12
+
constructor() {
13
+
super();
14
+
this.attachShadow({ mode: "open" });
15
+
}
16
+
17
+
// RENDER
18
+
19
+
/**
20
+
* @param {RenderArg} _
21
+
*/
22
+
render({ html }) {
23
+
return html`
24
+
<link rel="stylesheet" href="styles/vendor/98.css" />
25
+
26
+
<form>
27
+
<p>Where do you want to keep your data?</p>
28
+
<div class="field-row">
29
+
<input id="idb-json" type="radio" checked />
30
+
<label for="idb-json">Local only</label>
31
+
</div>
32
+
</form>
33
+
`;
34
+
}
35
+
}
36
+
37
+
export default OutputConfig;
38
+
39
+
////////////////////////////////////////////
40
+
// REGISTER
41
+
////////////////////////////////////////////
42
+
43
+
export const CLASS = OutputConfig;
44
+
export const NAME = "dtw-output-config";
45
+
46
+
customElements.define(NAME, CLASS);
+13
src/themes/webamp/fonts.css
+13
src/themes/webamp/fonts.css
···
1
+
@font-face {
2
+
font-family: "Pixelated MS Sans Serif";
3
+
src: url("../../fonts/ms_sans_serif.woff2") format("woff2");
4
+
font-weight: normal;
5
+
font-style: normal;
6
+
}
7
+
8
+
@font-face {
9
+
font-family: "Pixelated MS Sans Serif";
10
+
src: url("../../fonts/ms_sans_serif_bold.woff2") format("woff2");
11
+
font-weight: 700;
12
+
font-style: normal;
13
+
}
-18
src/themes/webamp/index.css
-18
src/themes/webamp/index.css
···
1
-
/***********************************
2
-
* Fonts
3
-
***********************************/
4
-
5
-
@font-face {
6
-
font-family: "Pixelated MS Sans Serif";
7
-
src: url("../../fonts/ms_sans_serif.woff2") format("woff2");
8
-
font-weight: normal;
9
-
font-style: normal;
10
-
}
11
-
12
-
@font-face {
13
-
font-family: "Pixelated MS Sans Serif";
14
-
src: url("../../fonts/ms_sans_serif_bold.woff2") format("woff2");
15
-
font-weight: 700;
16
-
font-style: normal;
17
-
}
18
-
19
1
/***********************************
20
2
* 🪟
21
3
***********************************/
+2
src/themes/webamp/index.js
+2
src/themes/webamp/index.js
···
15
15
import { effect, signal, untracked } from "@common/signal.js";
16
16
17
17
import "./browser/element.js";
18
+
import "./configurators/output.js";
18
19
import "./window/element.js";
20
+
19
21
import WindowManager from "./window-manager/element.js";
20
22
import WebampElement from "./webamp/element.js";
21
23
+154
-75
src/themes/webamp/index.vto
+154
-75
src/themes/webamp/index.vto
···
1
-
<html lang="en">
2
-
<head>
3
-
<meta charset="UTF-8" />
4
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1
+
---
2
+
layout: layouts/diffuse.vto
3
+
base: ../../../
4
+
5
+
styles:
6
+
- themes/webamp/fonts.css
7
+
- themes/webamp/index.css
8
+
---
9
+
10
+
<!--
5
11
6
-
<title>Diffuse</title>
12
+
###################################
13
+
# UI
14
+
###################################
7
15
8
-
<link href="index.css" rel="stylesheet" />
9
-
</head>
10
-
<body>
11
-
<!--
16
+
-->
17
+
<main>
18
+
<!-- 🪟 -->
19
+
<section class="windows">
20
+
<style>
21
+
dtw-window-manager > * {
22
+
left: 12px;
23
+
position: absolute;
24
+
top: 12px;
25
+
z-index: 999;
26
+
27
+
/* Waiting on https://developer.mozilla.org/en-US/docs/Web/CSS/sibling-index#browser_compatibility */
28
+
&:nth-child(1) {
29
+
left: 24px;
30
+
top: 24px;
31
+
}
32
+
33
+
&:nth-child(2) {
34
+
left: 36px;
35
+
top: 36px;
36
+
}
37
+
38
+
&:nth-child(3) {
39
+
left: 48px;
40
+
top: 48px;
41
+
}
42
+
43
+
&:nth-child(4) {
44
+
left: 60px;
45
+
top: 60px;
46
+
}
47
+
48
+
&:nth-child(5) {
49
+
left: 72px;
50
+
top: 72px;
51
+
}
12
52
13
-
###################################
14
-
# UI
15
-
###################################
53
+
&:nth-child(6) {
54
+
left: 84px;
55
+
top: 84px;
56
+
}
16
57
17
-
-->
18
-
<main>
19
-
<!-- 🪟 -->
20
-
<section class="windows">
21
-
<dtw-window-manager></dtw-window-manager>
22
-
</section>
58
+
&:nth-child(7) {
59
+
left: 96px;
60
+
top: 96px;
61
+
}
23
62
63
+
&:nth-child(8) {
64
+
left: 108px;
65
+
top: 108px;
66
+
}
24
67
25
-
<!-- 🛋️ -->
26
-
<section class="desktop">
27
-
<!-- WINAMP -->
28
-
<a class="button desktop__item" id="desktop-winamp">
29
-
<img src="../../images/icons/windows_98/winamp2-32x32.png" height="32" />
30
-
<label>Winamp</label>
31
-
</a>
68
+
&:nth-child(9) {
69
+
left: 120px;
70
+
top: 120px;
71
+
}
72
+
}
73
+
</style>
32
74
75
+
<dtw-window-manager>
33
76
<!-- INPUT -->
34
-
<a class="button desktop__item">
35
-
<img src="../../images/icons/windows_98/cd_audio_cd_a-4.png" height="32" />
36
-
<label for="input-window">Manage audio inputs</label>
37
-
</a>
77
+
<dtw-window id="input-window">
78
+
<span slot="title-icon"><img src="images/icons/windows_98/cd_audio_cd_a-0.png" height="14" /></span>
79
+
<span slot="title">Manage audio inputs</span>
80
+
<p>👀</p>
81
+
</dtw-window>
38
82
39
83
<!-- OUTPUT -->
40
-
<a class="button desktop__item">
41
-
<img src="../../images/icons/windows_98/computer_user_pencil-0.png" height="32" />
42
-
<label for="output-window">Manage user data</label>
43
-
</a>
84
+
<dtw-window id="output-window">
85
+
<span slot="title-icon"><img src="images/icons/windows_98/computer_user_pencil-0.png" height="14" /></span>
86
+
<span slot="title">Manage user data</span>
87
+
88
+
<dtw-output-config></dtw-output-config>
89
+
</dtw-window>
90
+
91
+
<!-- BROWSER -->
92
+
<dtw-window id="browser-window" open>
93
+
<span slot="title-icon"><img src="images/icons/windows_98/directory_explorer-4.png" height="14" /></span>
94
+
<span slot="title">Browse collection</span>
95
+
<dtw-browser
96
+
input-selector="#input"
97
+
output-selector="#output"
98
+
queue-engine-selector="de-queue"
99
+
search-processor-selector="dp-search"
100
+
></dtw-browser>
101
+
</dtw-window>
102
+
</dtw-window-manager>
103
+
</section>
44
104
45
-
<!-- BROWSE -->
46
-
<a class="button desktop__item">
47
-
<img src="../../images/icons/windows_98/directory_explorer-5.png" height="32" />
48
-
<label for="browser-window">Browse collection</label>
49
-
</a>
50
-
</section>
51
-
<!-- ⚡️ -->
52
-
<dtw-webamp></dtw-webamp>
53
-
</main>
105
+
<!-- 🛋️ -->
106
+
<section class="desktop">
107
+
<!-- WINAMP -->
108
+
<a class="button desktop__item" id="desktop-winamp">
109
+
<img src="images/icons/windows_98/winamp2-32x32.png" height="32" />
110
+
<label>Winamp</label>
111
+
</a>
54
112
55
-
<!--
113
+
<!-- INPUT -->
114
+
<a class="button desktop__item">
115
+
<img src="images/icons/windows_98/cd_audio_cd_a-4.png" height="32" />
116
+
<label for="input-window">Manage audio inputs</label>
117
+
</a>
56
118
57
-
###################################
58
-
# COMPONENTS
59
-
###################################
119
+
<!-- OUTPUT -->
120
+
<a class="button desktop__item">
121
+
<img src="images/icons/windows_98/computer_user_pencil-0.png" height="32" />
122
+
<label for="output-window">Manage user data</label>
123
+
</a>
60
124
61
-
-->
62
-
<de-queue></de-queue>
125
+
<!-- BROWSE -->
126
+
<a class="button desktop__item">
127
+
<img src="images/icons/windows_98/directory_explorer-5.png" height="32" />
128
+
<label for="browser-window">Browse collection</label>
129
+
</a>
130
+
</section>
63
131
64
-
<!-- Processors -->
65
-
<dp-metadata></dp-metadata>
66
-
<dp-search></dp-search>
132
+
<!-- ⚡️ -->
133
+
<dtw-webamp></dtw-webamp>
134
+
</main>
67
135
68
-
<!-- Orchestrators -->
69
-
<do-input id="input"></do-input>
70
-
<do-output id="output"></do-output>
136
+
<!--
137
+
138
+
###################################
139
+
# COMPONENTS
140
+
###################################
141
+
142
+
-->
143
+
<de-queue></de-queue>
144
+
145
+
<!-- Processors -->
146
+
<dp-metadata></dp-metadata>
147
+
<dp-search></dp-search>
148
+
149
+
<!-- Orchestrators -->
150
+
<do-input id="input"></do-input>
151
+
<do-output id="output"></do-output>
71
152
72
-
<do-process-tracks
73
-
input-selector="#input"
74
-
metadata-processor-selector="dp-metadata"
75
-
output-selector="#output"
76
-
></do-process-tracks>
153
+
<do-process-tracks
154
+
input-selector="#input"
155
+
metadata-processor-selector="dp-metadata"
156
+
output-selector="#output"
157
+
></do-process-tracks>
77
158
78
-
<do-queue-tracks
79
-
input-selector="#input"
80
-
output-selector="#output"
81
-
queue-engine-selector="de-queue"
82
-
></do-queue-tracks>
159
+
<do-queue-tracks
160
+
input-selector="#input"
161
+
output-selector="#output"
162
+
queue-engine-selector="de-queue"
163
+
></do-queue-tracks>
83
164
84
-
<do-search-tracks
85
-
input-selector="#input"
86
-
output-selector="#output"
87
-
search-processor-selector="dp-search"
88
-
></do-search-tracks>
165
+
<do-search-tracks
166
+
input-selector="#input"
167
+
output-selector="#output"
168
+
search-processor-selector="dp-search"
169
+
></do-search-tracks>
89
170
90
-
<!--
171
+
<!--
91
172
92
-
SCRIPTS
173
+
SCRIPTS
93
174
94
-
-->
95
-
<script src="index.js" type="module"></script>
96
-
</body>
97
-
</html>
175
+
-->
176
+
<script src="themes/webamp/index.js" type="module"></script>
+2
-88
src/themes/webamp/window-manager/element.js
+2
-88
src/themes/webamp/window-manager/element.js
···
155
155
* @param {string} id
156
156
*/
157
157
toggleWindow(id) {
158
-
const w = this.root().querySelector(`dtw-window#${id}`)
158
+
const w = this.querySelector(`dtw-window#${id}`)
159
159
if (w instanceof WindowElement === false) return
160
160
161
161
w.toggleAttribute("open")
···
174
174
*/
175
175
render({ html }) {
176
176
return html`
177
-
<link rel="stylesheet" href="../../styles/vendor/98.css" />
178
-
179
177
<style>
180
178
:host {
181
179
user-select: none;
182
180
}
183
-
184
-
dtw-window {
185
-
left: 12px;
186
-
position: absolute;
187
-
top: 12px;
188
-
z-index: 999;
189
-
190
-
/* Waiting on https://developer.mozilla.org/en-US/docs/Web/CSS/sibling-index#browser_compatibility */
191
-
&:nth-child(1) {
192
-
left: 24px;
193
-
top: 24px;
194
-
}
195
-
196
-
&:nth-child(2) {
197
-
left: 36px;
198
-
top: 36px;
199
-
}
200
-
201
-
&:nth-child(3) {
202
-
left: 48px;
203
-
top: 48px;
204
-
}
205
-
206
-
&:nth-child(4) {
207
-
left: 60px;
208
-
top: 60px;
209
-
}
210
-
211
-
&:nth-child(5) {
212
-
left: 72px;
213
-
top: 72px;
214
-
}
215
-
216
-
&:nth-child(6) {
217
-
left: 84px;
218
-
top: 84px;
219
-
}
220
-
221
-
&:nth-child(7) {
222
-
left: 96px;
223
-
top: 96px;
224
-
}
225
-
226
-
&:nth-child(8) {
227
-
left: 108px;
228
-
top: 108px;
229
-
}
230
-
231
-
&:nth-child(9) {
232
-
left: 120px;
233
-
top: 120px;
234
-
}
235
-
}
236
181
</style>
237
182
238
-
<!-- INPUT -->
239
-
<dtw-window id="input-window">
240
-
<span slot="title-icon"><img src="../../images/icons/windows_98/cd_audio_cd_a-0.png" height="14" /></span>
241
-
<span slot="title">Manage audio inputs</span>
242
-
<p>👀</p>
243
-
</dtw-window>
244
-
245
-
<!-- OUTPUT -->
246
-
<dtw-window id="output-window">
247
-
<span slot="title-icon"><img src="../../images/icons/windows_98/computer_user_pencil-0.png" height="14" /></span>
248
-
<span slot="title">Manage user data</span>
249
-
250
-
<form>
251
-
<p>Where do you want to keep your data?</p>
252
-
<div class="field-row">
253
-
<input id="idb-json" type="radio" checked />
254
-
<label for="idb-json">Local only</label>
255
-
</div>
256
-
</form>
257
-
</dtw-window>
258
-
259
-
<!-- BROWSER -->
260
-
<dtw-window id="browser-window" open>
261
-
<span slot="title-icon"><img src="../../images/icons/windows_98/directory_explorer-4.png" height="14" /></span>
262
-
<span slot="title">Browse collection</span>
263
-
<dtw-browser
264
-
input-selector="#input"
265
-
output-selector="#output"
266
-
queue-engine-selector="de-queue"
267
-
search-processor-selector="dp-search"
268
-
></dtw-browser>
269
-
</dtw-window>
183
+
<slot></slot>
270
184
`;
271
185
}
272
186
}