Experiment to rebuild Diffuse using web applets.
feat: placeholder stuff for the desktop theme
author
Steven Vandevelde
date
(Jun 5, 2025, 7:50 PM +0200)
commit
9069756c
9069756c554be1ee845cecf7a351948ac5fbd804
parent
dfc146b2
dfc146b247779100826f49ed1999da5b29ab779a
+217
-3
+45
src/pages/constituents/desktop/artwork-controller/_applet.astro
+45
src/pages/constituents/desktop/artwork-controller/_applet.astro
···
1
+
---
2
+
import "@styles/reset.css";
3
+
import "@styles/variables.css";
4
+
import "@styles/fonts.css";
5
+
import "@styles/icons.css";
6
+
---
7
+
8
+
<main>Nothing here yet.</main>
9
+
10
+
<script>
11
+
import scope from "astro:scope";
12
+
import { applets } from "@web-applets/sdk";
13
+
import { State } from "./types";
14
+
15
+
const context = applets.register<State>();
16
+
17
+
////////////////////////////////////////////
18
+
// Initial state
19
+
////////////////////////////////////////////
20
+
context.data = {
21
+
isPlaying: false,
22
+
};
23
+
24
+
////////////////////////////////////////////
25
+
// Actions
26
+
////////////////////////////////////////////
27
+
context.setActionHandler("modifyIsPlaying", (isPlaying: boolean) => {
28
+
// NOTE: Doesn't trigger a `data` event
29
+
context.data.isPlaying = isPlaying;
30
+
render();
31
+
});
32
+
33
+
context.setActionHandler("modifyProgress", (progress: number) => {
34
+
// TODO
35
+
});
36
+
37
+
////////////////////////////////////////////
38
+
// DOM
39
+
////////////////////////////////////////////
40
+
// TODO: Events
41
+
42
+
function render() {
43
+
// TODO
44
+
}
45
+
</script>
+21
src/pages/constituents/desktop/artwork-controller/_manifest.json
+21
src/pages/constituents/desktop/artwork-controller/_manifest.json
···
1
+
{
2
+
"name": "diffuse/constituents/desktop/artwork-controller",
3
+
"title": "",
4
+
"entrypoint": "index.html",
5
+
"actions": {
6
+
"modifyIsPlaying": {
7
+
"title": "Set is-playing state",
8
+
"description": "Indicate if audio is playing or not.",
9
+
"params_schema": {
10
+
"type": "boolean"
11
+
}
12
+
},
13
+
"modifyProgress": {
14
+
"title": "Set progress",
15
+
"description": "Indicate how far the audio has progressed.",
16
+
"params_schema": {
17
+
"type": "number"
18
+
}
19
+
}
20
+
}
21
+
}
+9
src/pages/constituents/desktop/artwork-controller/index.astro
+9
src/pages/constituents/desktop/artwork-controller/index.astro
+4
src/pages/constituents/desktop/artwork-controller/types.d.ts
+4
src/pages/constituents/desktop/artwork-controller/types.d.ts
+3
-1
src/pages/index.astro
+3
-1
src/pages/index.astro
···
25
25
// TODO
26
26
27
27
// Constituents
28
-
const constituents = [{ url: "constituents/desktop/", title: "(WIP) Desktop" }];
28
+
const constituents = [
29
+
{ url: "constituents/desktop/artwork-controller", title: "(WIP) Desktop ⦚ Artwork Controller" },
30
+
];
29
31
30
32
// Applets
31
33
const configurators = [
+9
src/pages/themes/desktop/index.astro
+9
src/pages/themes/desktop/index.astro
+38
src/scripts/themes/desktop/index.ts
+38
src/scripts/themes/desktop/index.ts
···
1
+
import { applet, reactive } from "@scripts/applets/common";
2
+
3
+
////////////////////////////////////////////
4
+
// 🎨 Styles
5
+
////////////////////////////////////////////
6
+
import "@styles/themes/desktop/index.css";
7
+
8
+
////////////////////////////////////////////
9
+
// 🗂️ Applets
10
+
////////////////////////////////////////////
11
+
import type * as AudioEngine from "@applets/engine/audio/types.d.ts";
12
+
import type * as QueueEngine from "@applets/engine/queue/types.d.ts";
13
+
14
+
const engine = {
15
+
audio: await applet<AudioEngine.State>("../../engine/audio"),
16
+
queue: await applet<QueueEngine.State>("../../engine/queue"),
17
+
};
18
+
19
+
const _orchestrator = {
20
+
input: await applet("../../orchestrator/input-cache"),
21
+
queue: await applet("../../orchestrator/single-queue"),
22
+
};
23
+
24
+
const ui = {};
25
+
26
+
////////////////////////////////////////////
27
+
// ⚙️ [Connections → Engines]
28
+
// 🔉 AUDIO
29
+
////////////////////////////////////////////
30
+
31
+
// TODO
32
+
33
+
////////////////////////////////////////////
34
+
// 🌅 [Connections → UI]
35
+
// 🔉 AUDIO
36
+
////////////////////////////////////////////
37
+
38
+
// TODO
-2
src/scripts/themes/pilot/index.ts
-2
src/scripts/themes/pilot/index.ts
+62
src/styles/themes/desktop/index.css
+62
src/styles/themes/desktop/index.css
···
1
+
@import "./variables.css";
2
+
3
+
/***********************************
4
+
* Fonts
5
+
***********************************/
6
+
:root {
7
+
font-family: "Inter", sans-serif;
8
+
font-size: var(--fs-base);
9
+
}
10
+
11
+
@supports (font-variation-settings: normal) {
12
+
:root {
13
+
font-family: "InterVariable", sans-serif;
14
+
font-feature-settings:
15
+
"ss03" 2,
16
+
"ss02" 2;
17
+
font-optical-sizing: auto;
18
+
}
19
+
}
20
+
21
+
body {
22
+
background-color: var(--delicate-cloud);
23
+
color: var(--made-in-the-shade);
24
+
display: flex;
25
+
flex-direction: column;
26
+
overflow: hidden;
27
+
height: 100dvh;
28
+
}
29
+
30
+
iframe {
31
+
border: 0;
32
+
}
33
+
34
+
/***********************************
35
+
* Applets (No UI)
36
+
***********************************/
37
+
iframe[src*="/configurator/"],
38
+
iframe[src*="/engine/"],
39
+
iframe[src*="/input/"],
40
+
iframe[src*="/orchestrator/"],
41
+
iframe[src*="/processor/"],
42
+
iframe[src*="/output/"] {
43
+
height: 0;
44
+
left: 110vw;
45
+
opacity: 0;
46
+
overflow: hidden;
47
+
pointer-events: none;
48
+
position: absolute;
49
+
top: 110vh;
50
+
width: 0;
51
+
}
52
+
53
+
/* Audio is special case, iframe needs to be "visible" in order to play the audio. */
54
+
#applet__engine__audio {
55
+
height: 1px;
56
+
left: 0;
57
+
opacity: 0;
58
+
pointer-events: none;
59
+
position: absolute;
60
+
top: 0;
61
+
width: 1px;
62
+
}
+26
src/styles/themes/desktop/variables.css
+26
src/styles/themes/desktop/variables.css
···
1
+
:root {
2
+
/* Colors */
3
+
/* https://farbvelo.elastiq.ch/?s=eyJzIjoiZTBjNjIyMTdiNTcxZSIsImEiOjYsImNnIjo0LCJoZyI6dHJ1ZSwiaGIiOmZhbHNlLCJobyI6ZmFsc2UsImhjIjpmYWxzZSwiaHQiOmZhbHNlLCJiIjpmYWxzZSwicCI6MC4xNzUsIm1kIjo2MCwiY20iOiJsYWIiLCJmIjoiTGVnYWN5IiwiYyI6ImhzbHV2Iiwic2MiOmZhbHNlLCJidyI6dHJ1ZSwiYWgiOmZhbHNlLCJpdSI6IiIsImxtIjp0cnVlLCJzbSI6ZmFsc2UsImN2IjoiaGV4IiwicW0iOiJhcnQtcGFsZXR0ZSIsIm5sIjoiYmVzdE9mIn0= */
4
+
--moonscape: #7f6c71;
5
+
--grandma’s-pink-tiles: #e1bac0;
6
+
--cinderella: #f8d1c6;
7
+
--young-apricot: #f8d7b6;
8
+
--cereal-flake: #f0d8ad;
9
+
--oatmeal: #cdc5b9;
10
+
11
+
/* https://farbvelo.elastiq.ch/?s=eyJzIjoiZmZjY2JkZDg2ZjEzYiIsImEiOjYsImNnIjo0LCJoZyI6dHJ1ZSwiaGIiOmZhbHNlLCJobyI6ZmFsc2UsImhjIjpmYWxzZSwiaHQiOmZhbHNlLCJiIjpmYWxzZSwicCI6MC4xNzgzMDcwODQxNjMzNDY2LCJtZCI6NjAsImNtIjoibGFiIiwiZiI6IkxlZ2FjeSIsImMiOiJoc2x1diIsInNjIjpmYWxzZSwiYnciOnRydWUsImFoIjpmYWxzZSwiaXUiOiIiLCJsbSI6dHJ1ZSwic20iOmZhbHNlLCJjdiI6ImhzbCIsInFtIjoiYXJ0LXBhbGV0dGUiLCJubCI6ImJlc3RPZiJ9 */
12
+
--made-in-the-shade: #67717c;
13
+
--misty-mountains: #b8cce0;
14
+
--lucid-dreams: #c7e6f4;
15
+
--icy-breeze: #c2eff1;
16
+
--crushed-ice: #bdf5ed;
17
+
--water-leaf: #b7efe7;
18
+
19
+
/* https://farbvelo.elastiq.ch/?s=eyJzIjoiODJiN2FjMjU1ODRiOCIsImEiOjYsImNnIjo0LCJoZyI6dHJ1ZSwiaGIiOmZhbHNlLCJobyI6ZmFsc2UsImhjIjpmYWxzZSwiaHQiOmZhbHNlLCJiIjpmYWxzZSwicCI6MC4yMTkxOTgyMDcxNzEzMTQ3LCJtZCI6NjAsImNtIjoibGFiIiwiZiI6IkxlZ2FjeSIsImMiOiJoc2x1diIsInNjIjpmYWxzZSwiYnciOnRydWUsImFoIjpmYWxzZSwiaXUiOiIiLCJsbSI6dHJ1ZSwic20iOmZhbHNlLCJjdiI6ImhleCIsInFtIjoiYXJ0LXBhbGV0dGUiLCJubCI6ImJlc3RPZiJ9 */
20
+
--wizards-brew: #9d8bb3;
21
+
--innocent-snowdrop: #cec0fa;
22
+
--foggy-plateau: #d5d2fb;
23
+
--puffy-cloud: #dce3fb;
24
+
--diamond-white: #e1f4fb;
25
+
--delicate-cloud: #d9dbe4;
26
+
}