Experiment to rebuild Diffuse using web applets.
feat: Audio UI styling and various fixes
+89
-24
-5
astro.config.mjs
-5
astro.config.mjs
+77
-15
src/applets/themes/pilot/ui/audio/applet.astro
+77
-15
src/applets/themes/pilot/ui/audio/applet.astro
···
3
3
href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css"
4
4
/>
5
5
6
-
<div>
7
-
<button>▶️</button>
8
-
<progress max="100" value="0"></progress>
9
-
</div>
6
+
<main>
7
+
<div class="queue-entry"></div>
8
+
<div class="playback-info">
9
+
<div class="controls">
10
+
<button class="controls__playpause">
11
+
<i class="iconoir-play-solid"></i>
12
+
</button>
13
+
</div>
14
+
<div class="time">
15
+
<progress max="100" value="0"></progress>
16
+
</div>
17
+
</div>
18
+
<div class="additional"></div>
19
+
</main>
10
20
11
21
<style>
12
22
@import "../../../../../styles/themes/pilot/variables.css";
13
23
14
-
div {
15
-
/* 5% darker version */
16
-
background: oklch(from var(--delicate-cloud) calc(l - 0.1) c h);
17
-
18
-
height: 100px;
19
-
line-height: 100px;
24
+
main {
25
+
align-items: center;
26
+
background: var(--made-in-the-shade);
27
+
color: oklch(from var(--made-in-the-shade) calc(l + 0.375) c h);
28
+
display: flex;
29
+
justify-content: center;
20
30
text-align: center;
21
31
}
22
32
23
33
button {
24
-
line-height: 1.5;
34
+
background: transparent;
35
+
border: 0;
36
+
color: inherit;
37
+
display: inline-block;
38
+
line-height: 0;
39
+
}
40
+
41
+
/***********************************
42
+
* Playback info
43
+
***********************************/
44
+
.playback-info {
45
+
align-items: center;
46
+
display: flex;
47
+
flex: 1;
48
+
flex-direction: column;
49
+
max-width: var(--container-lg);
50
+
padding: var(--space-sm) var(--space-md);
51
+
}
52
+
53
+
.controls {
54
+
align-items: center;
55
+
display: flex;
56
+
justify-content: center;
57
+
margin-bottom: var(--space-2xs);
58
+
59
+
& .controls__playpause {
60
+
font-size: var(--fs-lg);
61
+
}
62
+
}
63
+
64
+
.time {
65
+
align-self: stretch;
66
+
display: flex;
67
+
}
68
+
69
+
progress {
70
+
appearance: none;
71
+
border: 0;
72
+
flex: 1;
73
+
height: 4px;
74
+
}
75
+
76
+
progress::-webkit-progress-bar {
77
+
background-color: oklch(from var(--made-in-the-shade) calc(l + 0.15) c h);
78
+
overflow: hidden;
79
+
border-radius: 4px;
80
+
}
81
+
82
+
progress::-webkit-progress-value {
83
+
background-color: oklch(from var(--made-in-the-shade) calc(l + 0.3) c h);
84
+
border-radius: 4px;
85
+
}
86
+
87
+
progress::-moz-progress-bar {
25
88
}
26
89
</style>
27
90
···
51
114
52
115
context.setActionHandler("set_progress", (progress: number) => {
53
116
document.body.querySelector("progress").value = Math.round(progress * 100);
54
-
render();
55
117
});
56
118
57
119
////////////////////////////////////////////
···
62
124
};
63
125
64
126
function render() {
65
-
document.body.querySelector("button").innerText = context.data.isPlaying ? "⏸️" : "▶️";
127
+
document.body.querySelector("button").innerHTML = context.data.isPlaying
128
+
? `<i class="iconoir-pause-solid"></i>`
129
+
: `<i class="iconoir-play-solid"></i>`;
66
130
}
67
-
68
-
render();
69
131
</script>
+2
-2
src/pages/themes/pilot/index.astro
+2
-2
src/pages/themes/pilot/index.astro
···
6
6
<script src="../../../scripts/themes/pilot/index.js"></script>
7
7
8
8
<!-- Theme applets -->
9
-
<iframe id="#applet__ui__audio" src="ui/audio/" frameborder="0" style="width: 100%"></iframe>
9
+
<iframe id="applet__ui__audio" src="ui/audio/" frameborder="0"></iframe>
10
10
11
11
<!-- Other applets -->
12
-
<iframe id="#applet__engine__audio" src="../../engine/audio/" frameborder="0" height="0" width="0"
12
+
<iframe id="applet__engine__audio" src="../../engine/audio/" frameborder="0" height="0" width="0"
13
13
></iframe>
14
14
</Page>
+10
-2
src/styles/themes/pilot/index.css
+10
-2
src/styles/themes/pilot/index.css
···
21
21
body {
22
22
background-color: var(--delicate-cloud);
23
23
color: var(--made-in-the-shade);
24
+
display: flex;
24
25
overflow: hidden;
26
+
height: 100dvh;
25
27
}
26
28
27
29
/***********************************
28
-
* Applets | Position
30
+
* Applets (UI)
29
31
***********************************/
30
32
#applet__ui__audio {
33
+
align-self: flex-end;
34
+
width: 100%;
31
35
}
32
36
33
-
/* Position engines outside the viewframe (no UI for these) */
37
+
/***********************************
38
+
* Applets (No UI)
39
+
* ---------------
40
+
* Position engines outside the viewframe
41
+
***********************************/
34
42
#applet__engine__audio {
35
43
left: 110vw;
36
44
position: absolute;