Experiment to rebuild Diffuse using web applets.
feat: Fade in audio UI
author
Steven Vandevelde
date
(Mar 18, 2025, 6:09 PM +0100)
commit
7c8b431f
7c8b431f3034677878acc3595484a65e82596491
parent
e81c0df1
e81c0df1a4118afcb926c9dd0f2fc35517f5fb49
+33
-4
+3
src/pages/themes/pilot/index.astro
+3
src/pages/themes/pilot/index.astro
···
5
5
<Page title="Diffuse">
6
6
<script src="../../../scripts/themes/pilot/index.js"></script>
7
7
8
+
<!-- Temporary filler to push audio UI down to the bottom -->
9
+
<div class="filler" style="flex: 1;"></div>
10
+
8
11
<!-- Theme applets -->
9
12
<iframe id="applet__ui__audio" src="ui/audio/" frameborder="0"></iframe>
10
13
+20
-3
src/scripts/themes/pilot/index.ts
+20
-3
src/scripts/themes/pilot/index.ts
···
20
20
reactive(
21
21
ui.audio,
22
22
"isPlaying",
23
-
(isPlaying: boolean) => engine.audio.sendAction(isPlaying ? "play" : "pause", null),
23
+
(isPlaying: boolean) =>
24
+
engine.audio.sendAction(isPlaying ? "play" : "pause", null),
24
25
);
25
26
26
27
reactive(
···
49
50
}
50
51
51
52
const applet = await applets.connect(frame.contentWindow);
53
+
52
54
if (opts.setHeight) {
53
-
applet.onresize = () => (frame.height = `${applet.height}px`);
55
+
applet.onresize = () => {
56
+
frame.height = `${applet.height}px`;
57
+
frame.classList.add("has-loaded");
58
+
};
59
+
} else {
60
+
if (frame.contentDocument?.readyState === "complete") {
61
+
frame.classList.add("has-loaded");
62
+
}
63
+
64
+
frame.addEventListener("load", () => {
65
+
frame.classList.add("has-loaded");
66
+
});
54
67
}
55
68
56
69
return applet;
···
60
73
// 🔮 Reactive state management
61
74
////////////////////////////////////////////
62
75
// TODO: Applet should have a subtype
63
-
function reactive<T>(applet: Applet, property: string, effectFn: (t: T) => void) {
76
+
function reactive<T>(
77
+
applet: Applet,
78
+
property: string,
79
+
effectFn: (t: T) => void,
80
+
) {
64
81
const [getter, setter] = signal(
65
82
(applet.data as any)[property] as T,
66
83
);
+10
-1
src/styles/themes/pilot/index.css
+10
-1
src/styles/themes/pilot/index.css
···
22
22
background-color: var(--delicate-cloud);
23
23
color: var(--made-in-the-shade);
24
24
display: flex;
25
+
flex-direction: column;
25
26
overflow: hidden;
26
27
height: 100dvh;
27
28
}
···
30
31
* Applets (UI)
31
32
***********************************/
32
33
#applet__ui__audio {
33
-
align-self: flex-end;
34
+
opacity: 0;
35
+
pointer-events: none;
36
+
transition: 375ms opacity;
37
+
transition-delay: 250ms;
34
38
width: 100%;
39
+
40
+
&.has-loaded {
41
+
opacity: 1;
42
+
pointer-events: initial;
43
+
}
35
44
}
36
45
37
46
/***********************************