forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
chore: improve index page
+52
-100
+45
-58
src/index.vto
+45
-58
src/index.vto
···
220
220
</span>
221
221
</h1>
222
222
<p class="construct dither-mask">
223
-
Construct your audio player.
223
+
Your audio<br />your data<br />your rules
224
224
</p>
225
225
<p>
226
-
Diffuse is a collection of components and software that make it possible to listen to audio from various sources on your devices and the web, and to create the ideal digital
227
-
audio listening experience for you.
226
+
Diffuse is a collection of components and software that make it possible to listen to audio from various sources on your devices and the web, and to create the ideal digital audio listening experience for you.
228
227
</p>
229
228
<p style="align-items: center; display: flex; gap: var(--space-2xs); opacity: 0.55;">
230
229
<i class="ph-fill ph-crane"></i>
···
232
231
</p>
233
232
<ul class="table-of-contents">
234
233
<li><a href="#usage">Usage</a></li>
235
-
<li><a href="#demo">Demo</a></li>
236
234
<li><a href="#themes">Themes</a></li>
237
235
<li><a href="#constituents">Constituents</a></li>
238
-
<li><a href="#take-control">Take control</a></li>
236
+
<li><a href="#agency">Agency</a></li>
239
237
<li><a href="#elements">Elements</a></li>
240
238
<li><a href="#definitions">Definitions</a></li>
241
239
</ul>
···
246
244
<div class="dither-mask filler"></div>
247
245
</header>
248
246
<main>
249
-
<div class="columns">
250
-
<!-- USAGE -->
251
-
<section>
252
-
<h2 id="usage">Usage</h2>
253
-
254
-
<p>
255
-
The easiest way to start is by exploring the software. If you prefer a traditional pre­packaged web application approach, you can check out <a href="#themes">themes</a>.
256
-
</p>
247
+
<!-- USAGE -->
248
+
<section>
249
+
<h2 id="usage">Usage</h2>
257
250
258
-
<p>
259
-
Alternatively, there's <a href="#constituents">constituents</a> which allows you to use any component from any theme interchange­ably, each in a separate browser tab. Each tab talks to each other, so you can for example browse audio in one tab and play it in another.
260
-
</p>
251
+
<div class="columns">
252
+
<div class="element">
253
+
<p>
254
+
The easiest way to start is by exploring the software. If you prefer a traditional pre­packaged application approach, you can check out <a href="themes/">themes</a>. Themes can look and function entirely different from each other, so make sure to explore!
255
+
</p>
261
256
262
-
<p>
263
-
The goal is for every user, no matter their experience with web software, to have agency over their software. One can start with making small changes and gradually progress to making big changes.
264
-
</p>
265
-
</section>
257
+
<p>
258
+
Alternatively, there's <a href="constituents/">constituents</a> which allows you to use any component from any theme interchange­ably, among pieces that are not in themes; each in a separate browser tab. Each tab talks to each other, so you can for example browse audio in one tab and play it in another.
259
+
</p>
260
+
</div>
266
261
267
-
<!-- DEMO -->
268
-
<section>
269
-
<h2 id="demo">Demo</h2>
262
+
<div class="element">
263
+
<p>
264
+
<strong style="color: var(--accent); font-weight: 700;">Diffuse is not your typical streaming service though, you have to add sources of audio.</strong> To start you can try out the demo by clicking the button below, or, go to a <a href="themes/">theme</a> or <a href="constituents/">constituent</a> that lets you add your audio input.
265
+
</p>
270
266
271
-
<p>Diffuse is not your typical streaming service, you have to add sources of audio. This button here adds a few sample audio files.</p>
267
+
<p>
268
+
<button id="add-sample-content">
269
+
<span>Add sample content</span>
270
+
</button>
271
+
</p>
272
+
</div>
273
+
</div>
274
+
</section>
272
275
273
-
<p>
274
-
<button id="add-sample-content">
275
-
<span>Add sample content</span>
276
-
</button>
277
-
</p>
278
-
279
-
<p>
280
-
Next, select any <a href="#themes">theme</a> from below to play the audio. Or any of the other options suggested in the usage section.
281
-
</p>
282
-
</section>
283
-
</div>
276
+
<!-- THEMES & CONSTITUENTS -->
284
277
<div class="columns">
285
-
<!-- THEMES -->
286
278
<section>
287
279
<h2 id="themes">Themes</h2>
288
280
···
292
284
</p>
293
285
294
286
<p>
295
-
<small>
296
-
<strong><i class="ph-fill ph-info"></i></strong>
297
-
Each theme is unique, not just a skin; each one might have a totally different feature set.
298
-
</small>
287
+
<a class="button button--alt" href="themes/">Explore</a>
299
288
</p>
300
-
301
-
{{ await comp.list({ items: themes }) }}
302
289
</section>
303
290
304
-
<!-- CONSTITUENTS -->
305
291
<section>
306
292
<h2 id="constituents">Constituents</h2>
307
293
···
310
296
</p>
311
297
312
298
<p>
313
-
<small>
314
-
<strong><i class="ph-fill ph-info"></i></strong>
315
-
It also allows non-browser web environments, such as WebViews, to display UI components separately. For example, to enable moveable web views on the desktop.
316
-
</small>
299
+
<a class="button button--alt" href="constituents/">Explore</a>
317
300
</p>
318
-
319
-
{{ await comp.list({ items: constituents }) }}
320
301
</section>
321
302
</div>
322
303
323
-
<!-- TAKE CONTROL -->
304
+
<!-- AGENCY -->
324
305
<section>
325
-
<h2 id="take-control">Take control</h2>
306
+
<h2 id="agency">Agency</h2>
326
307
327
308
<p>
328
-
<em>Diffuse ranges from “eating out at a great restaurant” all the way to “making your favourite meal at home”</em>
309
+
The goal is for every user, no matter their experience, to have agency over their data and their software. One can start with making small changes and gradually progress to making big changes.
329
310
</p>
330
311
312
+
<h3>Take control</h3>
313
+
331
314
<ul class="columns">
332
315
<div class="element">
333
316
<!-- 1 -->
334
317
<li>
335
318
<p>
336
-
<i class="ph-fill ph-storefront"></i> <strong>Level 1</strong>: Pick your restaurant, food comes in all shapes and sizes. The equivalent of choosing a Diffuse <a href="#themes">theme</a>.
319
+
<i class="ph-fill ph-storefront"></i> <strong>Level 1</strong>: Pick your restaurant, food comes in all shapes and sizes. The equivalent of choosing a Diffuse <a href="themes/">theme</a>.
337
320
</p>
338
321
</li>
339
322
<!-- 2 -->
340
323
<li>
341
324
<p>
342
-
<i class="ph-fill ph-basket"></i> <strong>Level 2</strong>: Take out food from various places, eg. cheese shop + bakery. You choose how you combine the foods and from where you order them. That's <a href="#constituents">constituents</a>.
325
+
<i class="ph-fill ph-basket"></i> <strong>Level 2</strong>: Take out food from various places, eg. cheese shop + bakery. You choose how you combine the foods and from where you order them. That's <a href="constituents/">constituents</a>.
343
326
</p>
344
327
</li>
345
328
<!-- 3 -->
···
348
331
<i class="ph-fill ph-pepper"></i> <strong>Level 3</strong>: Now that you know which food is good and how to make combinations, you might make a slight customization, add a little something of your own (eg. add some spice). However, you're not quite confident enough which spice to pick, so you hire some help.
349
332
</p>
350
333
<p>
351
-
This can be done using the <a href="#constituents-loader">constituents loader</a> which allows you to build on top of a familiar preconfigured foundation and load custom constituents. People might share their own, or maybe you use an LLM to generate something for you (eg. an album art gallery).
334
+
This can be done using the <a href="constituents/#builder">constituents builder</a> which allows you to build on top of a familiar preconfigured foundation and load custom constituents. People might share their own, or maybe you use an LLM to generate something for you (eg. an album art gallery).
352
335
</p>
353
336
</li>
354
337
<!-- 4 -->
···
357
340
<i class="ph-fill ph-knife"></i> <strong>Level 4</strong>: You learned a bit from watching and talking to the help you hired, so you decide to take things in your own hands.
358
341
</p>
359
342
<p>
360
-
You continue to use the <a href="#constituents-loader">constituents loader</a> but learn a bit of <a href="https://htmlforpeople.com">HTML</a>, <a href="https://javascript.info">Javascript</a> and <a href="https://htmlforpeople.com/css-basics/">CSS</a>; so you're able to write your own constituent.
343
+
You continue to use the <a href="constituents/#builder">constituents builder</a> but learn a bit of <a href="https://htmlforpeople.com">HTML</a>, <a href="https://javascript.info">Javascript</a> and <a href="https://htmlforpeople.com/css-basics/">CSS</a>; so you're able to write your own constituent.
361
344
</p>
362
345
</li>
363
346
</div>
···
368
351
<i class="ph-fill ph-cooking-pot"></i> <strong>Level 5</strong>: At this point you're confident enough to make a meal from scratch. You can start very simple, eg. just throwing a steak in the pan with some butter and some salt to it. Then later add some baked potatoes and go from there.
369
352
</p>
370
353
<p>
371
-
A similar tool comes into play here, the <a href="#themes-loader">themes loader</a>. Same concept as the constituents loader, but now you need to specify the foundation yourself. You can use the <a href="#elements">elements</a> listed below to do so. The code for these is available from this website or through the <a href="https://jsr.io/@toko/diffuse">Javascript package</a>.
354
+
A similar tool comes into play here, the <a href="themes/#builder">themes builder</a>. Same concept as the constituents builder, but now you need to specify the foundation yourself. You can use the <a href="#elements">elements</a> listed below to do so. The code for these is available from this website or through the <a href="https://jsr.io/@toko/diffuse">Javascript package</a>.
372
355
</p>
373
356
</li>
374
357
<!-- 6 -->
···
377
360
<i class="ph-fill ph-storefront"></i> <strong>Level 6</strong>: You open your own restaurant.
378
361
</p>
379
362
<p>
380
-
You can host the theme you made on any web server, it's only HTML after all. Only difference is that you'll have to create the entire HTML tree, not just the body element, as is the case with the theme loader.
363
+
You can host the theme you made on any web server, it's only HTML after all. Only difference is that you'll have to create the entire HTML tree, not just the body element, as is the case with the theme builder.
381
364
</p>
382
365
</li>
383
366
<!-- 7 -->
···
399
382
400
383
<p>
401
384
The (web) components of the system. These custom elements are then recombined into an entire music player experience, or whatever you want to build.
385
+
</p>
386
+
387
+
<p>
388
+
Consume these using the constituents <a href="constituents/#builder">builder</a>, the Javascript <a href="https://jsr.io/@toko/diffuse">package</a>, or the linked Javascript files down below.
402
389
</p>
403
390
404
391
<div class="columns">
+7
-6
src/styles/diffuse/page.css
+7
-6
src/styles/diffuse/page.css
···
205
205
* Forms
206
206
*/
207
207
208
-
/*select,
209
-
::picker(select) {
210
-
appearance: base-select;
211
-
}*/
212
-
213
208
input,
214
209
textarea {
215
210
background: transparent;
···
274
269
a {
275
270
color: inherit;
276
271
text-underline-offset: 6px;
272
+
273
+
&.button {
274
+
text-decoration: none;
275
+
}
277
276
}
278
277
279
-
button {
278
+
button,
279
+
a.button {
280
280
background: var(--accent);
281
281
border: 0;
282
282
border-radius: var(--radius-md);
283
283
color: var(--bg-color);
284
284
cursor: pointer;
285
+
display: inline-block;
285
286
font-family: inherit;
286
287
font-weight: 500;
287
288
line-height: var(--leading-tight);
-24
src/themes/blur/artwork-controller/index.js
-24
src/themes/blur/artwork-controller/index.js
···
1
-
import foundation from "@common/constituents/foundation.js";
2
-
import ArtworkController from "@themes/blur/artwork-controller/element.js";
3
-
4
-
// Setup the prerequisite elements
5
-
foundation.features.fillQueueAutomatically();
6
-
foundation.features.playAudioFromQueue();
7
-
foundation.features.processInputs();
8
-
9
-
const aud = foundation.engine.audio();
10
-
const art = foundation.processor.artwork();
11
-
const inp = foundation.orchestrator.input();
12
-
const que = foundation.engine.queue();
13
-
const rse = foundation.engine.repeatShuffle();
14
-
15
-
// Controller
16
-
const dac = new ArtworkController();
17
-
dac.setAttribute("artwork-processor-selector", art.selector);
18
-
dac.setAttribute("audio-engine-selector", aud.selector);
19
-
dac.setAttribute("input-selector", inp.selector);
20
-
dac.setAttribute("queue-engine-selector", que.selector);
21
-
dac.setAttribute("repeat-shuffle-engine-selector", rse.selector);
22
-
23
-
// Add to DOM
24
-
document.body.append(dac);
-12
src/themes/blur/artwork-controller/index.vto
-12
src/themes/blur/artwork-controller/index.vto