forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
feat: blur theme
+223
-115
+14
-7
src/_data/facets.json
+14
-7
src/_data/facets.json
···
15
15
"desc": "Automatically put tracks into the queue when this interface is opened. Also allows for controlling shuffle, repeat, search, sorting and playlist selection."
16
16
},
17
17
{
18
+
"url": "themes/blur/facet/index.html",
19
+
"title": "Blur",
20
+
"category": "Themes",
21
+
"featured": true,
22
+
"desc": "A modern, blurred glass-style theme for the audio player."
23
+
},
24
+
{
18
25
"url": "themes/blur/artwork-controller/facet/index.html",
19
26
"title": "Blur / Artwork Controller",
20
27
"category": "Playback",
···
124
131
"desc": "Export all data as a JSON snapshot, or restore from a previously exported file."
125
132
},
126
133
{
134
+
"url": "facets/data/playlists/index.html",
135
+
"title": "Playlists",
136
+
"category": "Data",
137
+
"featured": true,
138
+
"desc": "An overview of all playlists and their contents."
139
+
},
140
+
{
127
141
"url": "facets/playback/preload/prelude/index.html",
128
142
"title": "Preload Tracks",
129
143
"kind": "prelude",
···
168
182
"title": "Scrobble / Rocksky",
169
183
"category": "Miscellaneous",
170
184
"desc": "Connect to Rocksky to setup the Rocksky scrobbler."
171
-
},
172
-
{
173
-
"url": "facets/data/playlists/index.html",
174
-
"title": "Playlists",
175
-
"category": "Data",
176
-
"featured": true,
177
-
"desc": "An overview of all playlists and their contents."
178
185
},
179
186
{
180
187
"url": "facets/data/sources/index.html",
src/fonts/PublicSans-Italic[wght].woff2
src/fonts/PublicSans-Italic[wght].woff2
This is a binary file and will not be displayed.
src/fonts/PublicSans[wght].woff2
src/fonts/PublicSans[wght].woff2
This is a binary file and will not be displayed.
+9
-10
src/themes/blur/artwork-controller/element.css
+9
-10
src/themes/blur/artwork-controller/element.css
···
1
1
:host {
2
2
--transition-durition: 750ms;
3
+
font-size: var(--fs-sm);
3
4
}
4
5
5
6
main {
···
7
8
color: white;
8
9
display: flex;
9
10
flex-direction: column;
10
-
font-size: var(--fs-sm);
11
11
height: 100%;
12
12
opacity: 1 !important;
13
13
overflow: hidden;
···
44
44
background: oklch(0 0 0);
45
45
border-radius: var(--radius-sm);
46
46
box-shadow: var(--box-shadow-lg);
47
-
font-size: var(--fs-2xs);
47
+
font-size: 64%;
48
48
font-weight: 600;
49
49
left: var(--space-xs);
50
50
letter-spacing: var(--tracking-wide);
51
-
line-height: 1;
52
-
padding: 8px 6px;
51
+
line-height: 0.75;
52
+
padding: 8px 6px 7px;
53
53
position: absolute;
54
54
text-box: trim-both cap alphabetic;
55
55
text-transform: uppercase;
···
125
125
border: 0;
126
126
color: color-mix(in oklch, currentColor 50%, transparent);
127
127
cursor: pointer;
128
-
font-size: var(--fs-base);
129
-
font-size: calc(var(--fs-base) * 0.9);
128
+
font-size: 113%;
130
129
padding: calc(var(--space-2xs) + 1px) var(--space-sm) var(--space-2xs);
131
130
132
131
&[data-enabled="t"] {
···
176
175
177
176
.timestamps {
178
177
display: flex;
179
-
font-size: var(--fs-2xs);
178
+
font-size: 60%;
180
179
font-weight: 500;
181
180
justify-content: space-between;
182
181
margin-top: var(--space-3xs);
···
193
192
.controller menu {
194
193
align-items: center;
195
194
display: flex;
196
-
font-size: var(--fs-lg);
195
+
font-size: 230%;
197
196
gap: var(--space-lg);
198
197
justify-content: center;
199
198
margin: var(--space-md) 0;
···
217
216
.controller .ph-pause,
218
217
.controller .ph-play,
219
218
.controller .menu__loader {
220
-
font-size: var(--fs-xl);
219
+
font-size: 130%;
221
220
}
222
221
223
222
/* Volume */
···
225
224
.volume {
226
225
align-items: center;
227
226
display: flex;
228
-
font-size: var(--fs-xs);
227
+
font-size: 75%;
229
228
gap: var(--space-2xs);
230
229
justify-content: space-between;
231
230
}
+1
-1
src/themes/blur/artwork-controller/element.js
+1
-1
src/themes/blur/artwork-controller/element.js
+1
-1
src/themes/blur/artwork-controller/facet/index.html
+1
-1
src/themes/blur/artwork-controller/facet/index.html
-10
src/themes/blur/browser/element.css
-10
src/themes/blur/browser/element.css
···
1
1
:host {
2
-
--bg-color: oklch(100% 0 0);
3
-
--text-color: oklch(14% 0 0);
4
-
5
2
background: var(--bg-color);
6
3
color: var(--text-color);
7
4
display: flex;
···
9
6
font-size: calc(var(--fs-sm) * 0.85);
10
7
height: 100%;
11
8
overflow: hidden;
12
-
}
13
-
14
-
@media (prefers-color-scheme: dark) {
15
-
:host {
16
-
--bg-color: oklch(19% 0.006 265);
17
-
--text-color: oklch(86% 0 0);
18
-
}
19
9
}
20
10
21
11
/***********************************
+1
src/themes/blur/browser/element.js
+1
src/themes/blur/browser/element.js
···
360
360
<link rel="stylesheet" href="styles/diffuse/facet.css" />
361
361
<link rel="stylesheet" href="vendor/@phosphor-icons/web/bold/style.css" />
362
362
<link rel="stylesheet" href="vendor/@phosphor-icons/web/fill/style.css" />
363
+
<link rel="stylesheet" href="themes/blur/variables.css" />
363
364
<link rel="stylesheet" href="themes/blur/browser/element.css" />
364
365
365
366
<div class="toolbar">
+2
-1
src/themes/blur/browser/facet/index.html
+2
-1
src/themes/blur/browser/facet/index.html
···
3
3
@import "./vendor/@phosphor-icons/web/fill/style.css";
4
4
@import "./styles/base.css";
5
5
@import "./styles/diffuse/facet.css";
6
+
@import "./themes/blur/variables.css";
6
7
@import "./themes/blur/font-faces.css";
7
8
8
9
db-browser {
9
-
font-family: "Figtree", "Intervariable", sans-serif;
10
+
font-family: "Public Sans", "Intervariable", sans-serif;
10
11
height: 100vh;
11
12
}
12
13
</style>
+80
src/themes/blur/facet/index.css
+80
src/themes/blur/facet/index.css
···
1
+
body {
2
+
/*background-color: oklch(from var(--bg-color) calc(l - 0.025) c h);*/
3
+
background-color: var(--color-2);
4
+
color: var(--text-color);
5
+
display: flex;
6
+
flex-direction: column;
7
+
overflow: hidden;
8
+
height: 100dvh;
9
+
10
+
@media (prefers-color-scheme: dark) {
11
+
background-color: var(--color-3);
12
+
}
13
+
}
14
+
15
+
/***********************************
16
+
* Main
17
+
***********************************/
18
+
19
+
main {
20
+
display: grid;
21
+
gap: var(--space-sm);
22
+
grid-template-columns: repeat(3, 1fr);
23
+
grid-template-rows: 1fr;
24
+
height: 100dvh;
25
+
overflow: hidden;
26
+
padding: var(--space-md) var(--space-md);
27
+
}
28
+
29
+
/***********************************
30
+
* Elements
31
+
***********************************/
32
+
33
+
db-artwork-controller,
34
+
db-browser {
35
+
border-radius: var(--radius-md);
36
+
height: 100%;
37
+
justify-self: end;
38
+
overflow: hidden;
39
+
width: 100%;
40
+
}
41
+
42
+
db-artwork-controller {
43
+
grid-column: 3;
44
+
grid-row: 1;
45
+
}
46
+
47
+
db-browser {
48
+
box-shadow: var(--box-shadow-md);
49
+
grid-column: 1 / span 2;
50
+
grid-row: 1 / span 2;
51
+
}
52
+
53
+
#shortcuts {
54
+
border-radius: var(--radius-md);
55
+
box-shadow: var(--box-shadow-md);
56
+
display: flex;
57
+
font-size: var(--fs-sm);
58
+
gap: 1px;
59
+
overflow: hidden;
60
+
61
+
button,
62
+
a {
63
+
align-items: center;
64
+
background-color: var(--bg-color);
65
+
border: 0;
66
+
color: var(--text-color);
67
+
cursor: pointer;
68
+
display: flex;
69
+
flex: 1;
70
+
gap: var(--space-3xs);
71
+
line-height: 0.75;
72
+
justify-content: center;
73
+
overflow: hidden;
74
+
padding: var(--space-sm) var(--space-3xs);
75
+
text-box: trim-both cap alphabetic;
76
+
text-decoration: none;
77
+
text-overflow: ellipsis;
78
+
white-space: nowrap;
79
+
}
80
+
}
+49
src/themes/blur/facet/index.html
+49
src/themes/blur/facet/index.html
···
1
+
<link rel="stylesheet" href="styles/base.css" />
2
+
<link rel="stylesheet" href="themes/blur/font-faces.css" />
3
+
<link rel="stylesheet" href="themes/blur/variables.css" />
4
+
<link rel="stylesheet" href="themes/blur/facet/index.css" />
5
+
<link rel="stylesheet" href="vendor/@phosphor-icons/web/bold/style.css" />
6
+
<link rel="stylesheet" href="vendor/@phosphor-icons/web/fill/style.css" />
7
+
8
+
<style>
9
+
html {
10
+
font-size: 16px;
11
+
}
12
+
13
+
main,
14
+
db-artwork-controller,
15
+
db-browser {
16
+
font-family: "Public Sans", "Intervariable", sans-serif;
17
+
}
18
+
</style>
19
+
20
+
<main>
21
+
<db-browser
22
+
output-selector="#output"
23
+
tracks-selector="do-scoped-tracks"
24
+
queue-engine-selector="de-queue"
25
+
scope-engine-selector="de-scope"
26
+
favourites-orchestrator-selector="do-favourites"
27
+
></db-browser>
28
+
29
+
<db-artwork-controller
30
+
artwork-selector="do-artwork"
31
+
controller-orchestrator-selector="do-controller"
32
+
input-selector="#input"
33
+
favourites-orchestrator-selector="do-favourites"
34
+
repeat-shuffle-engine-selector="de-repeat-shuffle"
35
+
></db-artwork-controller>
36
+
37
+
<div id="shortcuts">
38
+
<button id="btn-new-deck">
39
+
<i class="ph-bold ph-browsers"></i>
40
+
<span>New Deck</span>
41
+
</button>
42
+
<a href="l/?path=facets%2Fdata%2Fsources%2Findex.html" target="_blank">
43
+
<i class="ph-bold ph-hard-drives"></i>
44
+
<span>Sources</span>
45
+
</a>
46
+
</div>
47
+
</main>
48
+
49
+
<script type="module" src="themes/blur/facet/index.inline.js"></script>
+51
src/themes/blur/facet/index.inline.js
+51
src/themes/blur/facet/index.inline.js
···
1
+
import foundation from "~/common/foundation.js";
2
+
3
+
// Set doc title
4
+
foundation.setup({ title: "Blur | Diffuse" });
5
+
6
+
////////////////////////////////////////////
7
+
// 🚀
8
+
////////////////////////////////////////////
9
+
10
+
await foundation.engine.queue();
11
+
await foundation.engine.repeatShuffle();
12
+
await foundation.engine.scope();
13
+
await foundation.orchestrator.scopedTracks();
14
+
15
+
await foundation.orchestrator.sources();
16
+
await foundation.orchestrator.processTracks({ disableWhenReady: true });
17
+
await foundation.orchestrator.queueAudio();
18
+
await foundation.orchestrator.controller();
19
+
await foundation.orchestrator.artwork();
20
+
await foundation.orchestrator.favourites();
21
+
22
+
await import("~/themes/blur/artwork-controller/element.js");
23
+
await import("~/themes/blur/browser/element.js");
24
+
25
+
const group = foundation.GROUP === "facets" ? "Deck A" : foundation.GROUP;
26
+
document.querySelector("db-artwork-controller")?.setAttribute("group", group);
27
+
document.querySelector("db-browser")?.setAttribute("group", group);
28
+
29
+
////////////////////////////////////////////
30
+
// SHORTCUTS
31
+
////////////////////////////////////////////
32
+
33
+
document.querySelector("#btn-new-deck")?.addEventListener("click", async () => {
34
+
const state = await navigator.locks.query();
35
+
const held = (state.held ?? []).map((l) => l.name);
36
+
37
+
let nextGroup;
38
+
if (!held.some((n) => n.includes("/Deck B"))) {
39
+
nextGroup = "Deck B";
40
+
} else if (!held.some((n) => n.includes("/Deck C"))) {
41
+
nextGroup = "Deck C";
42
+
} else {
43
+
return;
44
+
}
45
+
46
+
const url = new URL(document.location.href);
47
+
url.searchParams.set("group", nextGroup);
48
+
window.open(url.toString(), "_blank");
49
+
});
50
+
51
+
foundation.ready();
+4
-4
src/themes/blur/font-faces.css
+4
-4
src/themes/blur/font-faces.css
···
1
1
@font-face {
2
2
font-display: swap;
3
-
font-family: Figtree;
3
+
font-family: "Public Sans";
4
4
font-style: normal;
5
5
font-weight: 100 900;
6
-
src: url("../../fonts/Figtree-VariableFont_wght.woff2") format("woff2");
6
+
src: url("../../fonts/PublicSans[wght].woff2") format("woff2");
7
7
}
8
8
9
9
@font-face {
10
10
font-display: swap;
11
-
font-family: Figtree;
11
+
font-family: "Public Sans";
12
12
font-style: italic;
13
13
font-weight: 100 900;
14
-
src: url("../../fonts/Figtree-Italic-VariableFont_wght.woff2") format("woff2");
14
+
src: url("../../fonts/PublicSans-Italic[wght].woff2") format("woff2");
15
15
}
-41
src/themes/blur/index.css
-41
src/themes/blur/index.css
···
1
-
body {
2
-
background-color: oklch(from var(--bg-color) calc(l - 0.025) c h);
3
-
color: var(--text-color);
4
-
display: flex;
5
-
flex-direction: column;
6
-
overflow: hidden;
7
-
height: 100dvh;
8
-
}
9
-
10
-
/***********************************
11
-
* Main
12
-
***********************************/
13
-
main {
14
-
display: grid;
15
-
gap: var(--space-2xs);
16
-
grid-template-columns: repeat(3, 1fr);
17
-
grid-template-rows: auto;
18
-
height: 100dvh;
19
-
overflow: hidden;
20
-
padding: var(--space-md) var(--space-md);
21
-
}
22
-
23
-
/***********************************
24
-
* Elements
25
-
***********************************/
26
-
27
-
iframe[src*="/artwork-controller/"] {
28
-
grid-column: 3;
29
-
height: 100%;
30
-
justify-self: end;
31
-
max-width: var(--container-3xs);
32
-
width: 100%;
33
-
}
34
-
35
-
iframe[src*="/browser/"] {
36
-
grid-column: 1 / span 2;
37
-
grid-row: 1 / span 2;
38
-
height: 100%;
39
-
justify-self: end;
40
-
width: 100%;
41
-
}
src/themes/blur/index.js
src/themes/blur/index.js
This is a binary file and will not be displayed.
-15
src/themes/blur/index.vto
-15
src/themes/blur/index.vto
+11
-24
src/themes/blur/variables.css
+11
-24
src/themes/blur/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;
1
+
:root,
2
+
:host {
3
+
--bg-color: oklch(100% 0 0);
4
+
--text-color: oklch(14% 0 0);
5
+
}
10
6
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;
7
+
@media (prefers-color-scheme: dark) {
8
+
:root,
9
+
:host {
10
+
--bg-color: oklch(19% 0.006 265);
11
+
--text-color: oklch(86% 0 0);
12
+
}
26
13
}