A music player that connects to your cloud/distributed storage.
chore: add some default interfaces
+54
-46
+10
-36
src/common/facets/constants.js
+10
-36
src/common/facets/constants.js
···
1
-
import * as TID from "@atcute/tid";
2
-
import facets from "../../_data/facets.json" with {
3
-
type: "json",
4
-
};
5
-
6
-
/**
7
-
* @import {Facet} from "~/definitions/types.d.ts"
8
-
*/
9
-
10
1
export const TYPE = /** @type {const} */ ("sh.diffuse.output.facet");
11
2
12
-
/** @type {Facet[]} */
13
-
export const STARTING_SET = facets.flatMap((facet) => {
14
-
const properties = {
15
-
$type: TYPE,
16
-
description: facet.desc,
17
-
kind: facet.kind === "prelude"
18
-
? /** @type {const} */ ("prelude")
19
-
: /** @type {const} */ ("interactive"),
20
-
name: facet.title,
21
-
uri: "diffuse://" + facet.url,
22
-
};
23
-
24
-
if (
25
-
[
26
-
"facets/data/input-bundle/index.html",
27
-
"facets/data/output-bundle/index.html",
28
-
"facets/data/process-tracks/prelude/index.html",
29
-
"facets/playback/auto-queue/prelude/index.html",
30
-
].includes(facet.url)
31
-
) {
32
-
return [{
33
-
...properties,
34
-
id: TID.now(),
35
-
}];
36
-
}
3
+
export const STARTING_SET_URIS = [
4
+
// INTERACTIVE
5
+
"facets/connect/index.html",
6
+
"themes/blur/artwork-controller/facet/index.html",
37
7
38
-
return [];
39
-
});
8
+
// PRELUDES
9
+
"facets/data/input-bundle/index.html",
10
+
"facets/data/output-bundle/index.html",
11
+
"facets/data/process-tracks/prelude/index.html",
12
+
"facets/playback/auto-queue/prelude/index.html",
13
+
];
+4
-4
src/common/loader.js
+4
-4
src/common/loader.js
···
163
163
export function renderError(container, error, options) {
164
164
container.innerHTML = `
165
165
<div class="diffuse">
166
-
<div class="flex">
167
-
<i class="ph-fill ph-warning"></i>
168
-
<span>${error}</span>
169
-
</div>
166
+
<a href="./" class="flex" style="color: inherit; text-decoration: none;">
167
+
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16h64a8,8,0,0,0,7.59-5.47l14.83-44.48L163,151.43a8.07,8.07,0,0,0,4.46-4.46l14.62-36.55,44.48-14.83A8,8,0,0,0,232,88V56A16,16,0,0,0,216,40ZM117,152.57a8,8,0,0,0-4.62,4.9L98.23,200H40V160.69l46.34-46.35a8,8,0,0,1,11.32,0l32.84,32.84Zm115-30.84V200a16,16,0,0,1-16,16H137.73a8,8,0,0,1-7.59-10.53l7.94-23.8a8,8,0,0,1,4.61-4.9l35.77-14.31,14.31-35.77a8,8,0,0,1,4.9-4.61l23.8-7.94A8,8,0,0,1,232,121.73Z"></path></svg>
168
+
<span style="font-size: var(--fs-base); font-weight: 700;">${error}</span>
169
+
</a>
170
170
</div>
171
171
`;
172
172
+32
-2
src/components/transformer/output/refiner/initial-contents/element.js
+32
-2
src/components/transformer/output/refiner/initial-contents/element.js
···
1
1
import * as IDB from "idb-keyval";
2
+
import { xxh32r } from "xxh32/dist/raw.js";
2
3
3
4
import { batch, computed, signal, untracked } from "~/common/signal.js";
4
5
import { OutputTransformer } from "../../base.js";
5
-
import { STARTING_SET } from "~/common/facets/constants.js";
6
+
7
+
import { STARTING_SET_URIS, TYPE } from "~/common/facets/constants.js";
8
+
import facets from "~/_data/facets.json" with {
9
+
type: "json",
10
+
};
6
11
7
12
/**
8
13
* @import {OutputManagerDeputy} from "~/components/output/types.d.ts"
···
57
62
this.#initialized.value = true;
58
63
IDB.set(IDB_KEY, true); // fire-and-forget
59
64
}
65
+
60
66
return { state: "loaded", data: col.data };
61
67
}
62
68
···
66
72
return { state: "loaded", data: col.data };
67
73
}
68
74
69
-
return { state: "loaded", data: STARTING_SET };
75
+
// Determine starting set
76
+
const data = facets.flatMap((facet) => {
77
+
if (STARTING_SET_URIS.includes(facet.url)) {
78
+
return [{
79
+
$type: TYPE,
80
+
id: uriToRkey("diffuse://" + facet.url),
81
+
description: facet.desc,
82
+
kind: facet.kind === "prelude"
83
+
? /** @type {const} */ ("prelude")
84
+
: /** @type {const} */ ("interactive"),
85
+
name: facet.title,
86
+
uri: "diffuse://" + facet.url,
87
+
}];
88
+
}
89
+
90
+
return [];
91
+
});
92
+
93
+
return { state: "loaded", data };
70
94
}),
71
95
72
96
save: async (newFacets) => {
···
76
100
this.#initialized.value = true;
77
101
IDB.set(IDB_KEY, true); // fire-and-forget
78
102
}
103
+
79
104
await base.facets.save(newFacets);
80
105
},
81
106
},
···
93
118
}
94
119
95
120
export default InitialContentsTransformer;
121
+
122
+
/** @param {string} uri */
123
+
function uriToRkey(uri) {
124
+
return xxh32r(new TextEncoder().encode(uri)).toString(16).padStart(8, "0");
125
+
}
96
126
97
127
////////////////////////////////////////////
98
128
// REGISTER
-3
src/l/index.vto
-3
src/l/index.vto
+8
-1
src/styles/loader.css
+8
-1
src/styles/loader.css
···
1
+
@import "./variables.css" layer(base.variables);
2
+
@import "./animations.css" layer(base.animations);
3
+
4
+
@import "./diffuse/colors.css" layer(diffuse.colors);
5
+
@import "./diffuse/font-faces.css" layer(diffuse.font-faces);
6
+
@import "./diffuse/fonts.css" layer(diffuse.fonts);
7
+
1
8
body {
2
9
background: var(--bg-color);
3
10
color: var(--text-color);
···
8
15
color: var(--text-color);
9
16
font-size: var(--fs-md);
10
17
left: 50%;
11
-
pointer-events: none;
12
18
position: absolute;
13
19
top: 50%;
14
20
transform: translate(-50%, -50%);
···
22
28
}
23
29
24
30
#diffuse-loader {
31
+
pointer-events: none;
25
32
transition: opacity 500ms ease;
26
33
27
34
&.loaded {