A music player that connects to your cloud/distributed storage.
chore: skill improvements
+26
-38
+6
_config.ts
+6
_config.ts
···
299
299
);
300
300
301
301
site.remoteFile(
302
+
"skills/diffuse-facet/docs/foundation.js",
303
+
import.meta.resolve("./src/common/foundation.js"),
304
+
);
305
+
306
+
site.remoteFile(
302
307
"skills/diffuse-facet/example/index.html",
303
308
import.meta.resolve("./src/facets/data/sources/index.html"),
304
309
);
305
310
306
311
site.add("skills/diffuse-facet/docs/architecture.txt");
312
+
site.add("skills/diffuse-facet/docs/foundation.js");
307
313
site.add("skills/diffuse-facet/example/index.html");
308
314
site.add("/definitions", "/skills/diffuse-facet/docs/definitions");
309
315
site.copy("skills/diffuse-facet/SKILL.md");
+19
-38
src/skills/diffuse-facet/SKILL.md
+19
-38
src/skills/diffuse-facet/SKILL.md
···
2
2
name: diffuse-facet
3
3
description: Create an interface or feature facet for Diffuse
4
4
user-invocable: true
5
-
version: 0.1.0
5
+
version: 0.2.0
6
6
---
7
7
8
8
Create a Diffuse facet and produce the HTML ready to paste into the `create/` page.
···
13
13
14
14
- `docs/architecture.txt` — system overview, facet rules, foundation API
15
15
- `docs/elements.txt` — all available custom elements with code examples
16
+
- `docs/foundation.js` — the foundation code mentioned throughout this document
16
17
- `example/index.html` — a representative interface facet to use as a reference
17
18
- Any specific definition you need (e.g. `docs/definitions/output/track.json` for the track schema)
18
19
- `docs/definitions/index.ts` — TypeScript types for all data structures
···
85
86
86
87
For a centered or full-screen layout (player, dialog, etc.) override `body` and `main` in the facet's `<style>` block directly.
87
88
88
-
### Foundation API quick reference
89
-
90
-
```js
91
-
// Engines
92
-
const audio = await foundation.engine.audio();
93
-
const queue = await foundation.engine.queue();
94
-
const repeatShuffle = await foundation.engine.repeatShuffle();
95
-
96
-
// Configurators
97
-
const inputCfg = await foundation.configurator.input();
98
-
const metadataCfg = await foundation.configurator.metadata();
99
-
100
-
// Orchestrators
101
-
const output = await foundation.orchestrator.output();
102
-
const sources = await foundation.orchestrator.sources();
103
-
const controller = await foundation.orchestrator.controller();
104
-
const queueAudio = await foundation.orchestrator.queueAudio();
105
-
const mediaSession = await foundation.orchestrator.mediaSession();
106
-
const processTracks = await foundation.orchestrator.processTracks({ disableWhenReady: false });
107
-
const favourites = await foundation.orchestrator.favourites();
108
-
const artwork = await foundation.orchestrator.artwork();
109
-
const scopedTracks = await foundation.orchestrator.scopedTracks();
110
-
const autoQueue = await foundation.orchestrator.autoQueue();
111
-
```
112
-
113
-
Though make sure to check the mentioned foundation js file for the latest code.
114
-
115
-
Typical playback bootstrap:
89
+
### Example foundation usage
116
90
117
91
```js
118
92
await foundation.orchestrator.queueAudio();
···
133
107
134
108
```js
135
109
effect(() => {
136
-
const track = ctl.currentTrack(); // computed — call like a fn
137
-
const isPlaying = ctl.isPlaying();
138
-
const audioState = ctl.audio(); // AudioStateReadOnly | undefined
110
+
const track = ctl.currentTrack(); // computed — call like a fn
111
+
const isPlaying = ctl.isPlaying();
112
+
const audioState = ctl.audio(); // AudioStateReadOnly | undefined
139
113
140
114
if (audioState) {
141
-
const progress = audioState.progress(); // 0–1
142
-
const current = audioState.currentTime();
115
+
const progress = audioState.progress(); // 0–1
116
+
const current = audioState.currentTime();
143
117
const duration = audioState.duration();
144
118
}
145
119
146
-
const now = queue.now(); // SignalReader — call like a fn
147
-
const past = queue.past();
120
+
const now = queue.now(); // SignalReader — call like a fn
121
+
const past = queue.past();
148
122
const future = queue.future();
149
123
});
150
124
```
···
155
129
audio.play({ audioId: queue.now().id });
156
130
audio.pause({ audioId: queue.now().id });
157
131
audio.seek({ audioId: queue.now().id, percentage: 0.5 }); // 0–1
158
-
queue.shift(); // next track
159
-
queue.unshift(); // previous track
132
+
queue.shift(); // next track
133
+
queue.unshift(); // previous track
160
134
```
135
+
136
+
### Additional requirements and notes
137
+
138
+
- When working with track lists, realise that there could be a huge number of tracks that you need to work with (eg. 20000 tracks). You can use `~/vendor/@tanstack/virtual-core/index.js` for this.
139
+
- Prefer the lit-html library as the templating/rendering engine. It is available from `~/vendor/lit-html/index.js` (among some other libraries such as: `idb-keyval`, `throttle-debounce`, several `@atcute` libraries, and `kmenu-core`). Always make sure to use the `~/vendor/` prefix for libraries, you're not working in an enviroment that bundles code.
140
+
- Prefer to fetch the tracks from the `scoped-tracks` orchestrator element.
141
+
- Talking about orchestrators, always prefer to use an orchestrator or another component instead of reimplementing logic yourself.
161
142
162
143
## Step 4 — Deliver
163
144
+1
src/vendor/@tanstack/virtual-core/index.js
+1
src/vendor/@tanstack/virtual-core/index.js
···
1
+
export * from "@tanstack/virtual-core";