A music player that connects to your cloud/distributed storage.
feat: json bytes transformer
+71
-10
+68
src/components/transformer/output/bytes/json/element.js
+68
src/components/transformer/output/bytes/json/element.js
···
1
+
import { computed } from "@common/signal.js";
2
+
import { OutputTransformer } from "../../base.js";
3
+
4
+
/**
5
+
* @import { OutputManagerDeputy } from "@components/output/types.d.ts"
6
+
* @import { Track } from "@definitions/types.d.ts"
7
+
*/
8
+
9
+
/**
10
+
* @extends {OutputTransformer<Uint8Array>}
11
+
*/
12
+
class JsonStringOutputTransformer extends OutputTransformer {
13
+
constructor() {
14
+
super();
15
+
16
+
const base = this.base();
17
+
18
+
/** @type {OutputManagerDeputy<Track[]>} */
19
+
const manager = {
20
+
tracks: {
21
+
...base.tracks,
22
+
collection: computed(() => {
23
+
let data = base.tracks.collection();
24
+
25
+
let json;
26
+
27
+
if (data instanceof Uint8Array) {
28
+
const decoder = new TextDecoder();
29
+
json = decoder.decode(data);
30
+
}
31
+
32
+
if (typeof data !== "string") json = "[]";
33
+
else json = data;
34
+
35
+
// Try parsing JSON
36
+
try {
37
+
return JSON.parse(json);
38
+
} catch (err) {
39
+
console.error(
40
+
"components/transformer/output/string/json: Failed to parse JSON",
41
+
);
42
+
return [];
43
+
}
44
+
}),
45
+
save: async (newTracks) => {
46
+
const json = JSON.stringify(newTracks);
47
+
const encoder = new TextEncoder();
48
+
const bytes = encoder.encode(json);
49
+
await base.tracks.save(bytes);
50
+
},
51
+
},
52
+
};
53
+
54
+
// Assign manager properties to class
55
+
this.tracks = manager.tracks;
56
+
}
57
+
}
58
+
59
+
export default JsonStringOutputTransformer;
60
+
61
+
////////////////////////////////////////////
62
+
// REGISTER
63
+
////////////////////////////////////////////
64
+
65
+
export const CLASS = JsonStringOutputTransformer;
66
+
export const NAME = "dtos-json";
67
+
68
+
customElements.define(NAME, CLASS);
+1
-1
src/components/transformer/output/string/json/element.js
+1
-1
src/components/transformer/output/string/json/element.js
+2
-9
src/index.vto
+2
-9
src/index.vto
···
162
162
todo: true
163
163
- title: "Output / Bytes / JSON"
164
164
desc: "Raw data schema output ⇄ JSON Uint8Array."
165
-
todo: true
165
+
url: "components/transformer/output/bytes/json/element.js"
166
166
- title: "Output / Refiner / Default"
167
167
desc: "The task of a refiner transformer is to remove the output state that is not meant to be saved to storage. For example, ephemeral tracks; this transformer will keep them in memory, but they will not be present in the output. **Ideally this is part of every theme, but you may swap it out with another transformer that might provide better defaults.**"
168
168
url: "components/transformer/output/refiner/default/element.js"
···
250
250
<p>
251
251
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.
252
252
</p>
253
-
254
-
<p>
255
-
<small>
256
-
<strong><i class="ph-fill ph-warning"></i></strong>
257
-
The items are added to the default "IndexedDB" (local-only) output, so make sure that output is configured.
258
-
</small>
259
-
</p>
260
253
</section>
261
254
</div>
262
255
<div class="columns">
···
303
296
<h2 id="take-control">Take control</h2>
304
297
305
298
<p>
306
-
<em>Diffuse ranges from “eating out at a great restaurant” all the way to “making your favourite meal at home”.</em>
299
+
<em>Diffuse ranges from “eating out at a great restaurant” all the way to “making your favourite meal at home”</em>
307
300
</p>
308
301
309
302
<ul class="columns">