forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
chore: fade in most facets + improve loading anim
+97
-12
+5
src/_includes/layouts/diffuse.vto
+5
src/_includes/layouts/diffuse.vto
···
28
28
<meta name="msapplication-TileColor" content="#8a90a9" />
29
29
<meta name="theme-color" content="#8a90a9" />
30
30
31
+
<!-- Preloads -->
32
+
{{ for url of (preloads ?? []) }}
33
+
<link rel="preload" href="{{ url.href }}" as="{{ url.as }}" type="{{ url.type }}" crossorigin />
34
+
{{ /for }}
35
+
31
36
<!-- Styles -->
32
37
{{ for url of styles }}
33
38
<link rel="stylesheet" href="{{ url }}" />
+11
src/common/facets/loader.js
+11
src/common/facets/loader.js
+8
src/facets/data/export-import/index.html
+8
src/facets/data/export-import/index.html
+4
-1
src/facets/data/export-import/index.inline.js
+4
-1
src/facets/data/export-import/index.inline.js
···
5
5
// Set doc title
6
6
document.title = "Export & Import | Diffuse";
7
7
8
+
// Doc loader
9
+
const main = /** @type {HTMLElement} */ (document.querySelector("main"));
10
+
main.classList.add("has-loaded");
11
+
8
12
// Setup
9
13
const output = await foundation.orchestrator.output();
10
14
···
151
155
showStatus(`Import failed: ${/** @type {Error} */ (err).message}`, "error");
152
156
}
153
157
};
154
-
+12
-2
src/facets/data/process-tracks/index.html
+12
-2
src/facets/data/process-tracks/index.html
···
1
-
<div id="container">
1
+
<main>
2
2
<div class="window" style="height: auto">
3
3
<div class="title-bar">
4
4
<div class="title-bar-icon">
···
13
13
<div id="placeholder"></div>
14
14
</div>
15
15
</div>
16
-
</div>
16
+
</main>
17
17
18
18
<style>
19
19
@import "./styles/variables.css";
···
23
23
@import "./vendor/98.css";
24
24
@import "./themes/winamp/98-vars.css";
25
25
@import "./themes/winamp/98-extra.css";
26
+
27
+
main {
28
+
opacity: 0;
29
+
pointer-events: none;
30
+
31
+
&.has-loaded {
32
+
opacity: 1;
33
+
pointer-events: auto;
34
+
}
35
+
}
26
36
</style>
27
37
28
38
<script type="module" src="facets/data/process-tracks/index.inline.js"></script>
+3
src/facets/data/process-tracks/index.inline.js
+3
src/facets/data/process-tracks/index.inline.js
···
3
3
import { effect } from "~/common/signal.js";
4
4
import foundation from "~/common/foundation.js";
5
5
6
+
const main = /** @type {HTMLElement} */ (document.querySelector("main"));
7
+
main.classList.add("has-loaded");
8
+
6
9
const orchestrator = await foundation.orchestrator.processTracks({
7
10
disableWhenReady: true,
8
11
});
+8
src/facets/data/v3-import/index.html
+8
src/facets/data/v3-import/index.html
+3
src/facets/data/v3-import/index.inline.js
+3
src/facets/data/v3-import/index.inline.js
+8
src/facets/playback/auto-queue/index.html
+8
src/facets/playback/auto-queue/index.html
+5
-1
src/facets/playback/auto-queue/index.inline.js
+5
-1
src/facets/playback/auto-queue/index.inline.js
···
2
2
import { effect } from "~/common/signal.js";
3
3
import * as Playlist from "~/common/playlist.js";
4
4
5
+
const ACTIVE_CLASS = "button--active";
6
+
5
7
// Set doc title
6
8
document.title = "Automatic Queue | Diffuse";
7
9
8
-
const ACTIVE_CLASS = "button--active";
10
+
// Doc load
11
+
const main = /** @type {HTMLElement} */ (document.querySelector("main"));
12
+
main.classList.add("has-loaded");
9
13
10
14
// Setup
11
15
await foundation.orchestrator.autoQueue();
+4
-6
src/l/index.js
+4
-6
src/l/index.js
···
3
3
import * as Output from "~/common/output.js";
4
4
import { createLoader, renderError } from "~/common/loader.js";
5
5
import { insertPreludes } from "~/common/facets/prelude.js";
6
+
import { removeLoader } from "~/common/facets/loader.js";
6
7
7
8
// Output element
8
9
const output = await foundation.orchestrator.output();
···
36
37
}
37
38
}
38
39
39
-
// Remove loading animation
40
-
container.innerHTML = "";
40
+
await insertPreludes(facets, document.body);
41
41
42
-
// Execute all the prelude facets
43
-
await insertPreludes(facets, container);
44
-
45
-
// Execute main facet
46
42
const range = document.createRange();
47
43
range.selectNode(container);
48
44
const documentFragment = range.createContextualFragment(facet.html ?? "");
49
45
container.append(documentFragment);
46
+
47
+
removeLoader();
50
48
},
51
49
});
+1
-2
src/l/index.vto
+1
-2
src/l/index.vto
···
3
3
base: ../
4
4
5
5
styles:
6
-
- vendor/@phosphor-icons/web/fill/style.css
7
6
- styles/diffuse/colors.css
8
7
- styles/variables.css
9
8
- styles/animations.css
···
16
15
<div id="container">
17
16
<div class="diffuse">
18
17
<div id="diffuse-loader" class="flex">
19
-
<i class="ph-fill ph-music-notes animate-bounce"></i>
18
+
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256" class="animate-bounce"><path d="M212.92,17.71a7.89,7.89,0,0,0-6.86-1.46l-128,32A8,8,0,0,0,72,56V166.1A36,36,0,1,0,88,196V102.25l112-28V134.1A36,36,0,1,0,216,164V24A8,8,0,0,0,212.92,17.71Z"></path></svg>
20
19
</div>
21
20
</div>
22
21
</div>
+11
src/styles/loader.css
+11
src/styles/loader.css
···
9
9
font-size: var(--fs-base);
10
10
font-weight: 500;
11
11
left: 50%;
12
+
pointer-events: none;
12
13
position: absolute;
13
14
top: 50%;
14
15
transform: translate(-50%, -50%);
···
25
26
font-size: var(--fs-md);
26
27
letter-spacing: var(--leading-loose);
27
28
text-transform: uppercase;
29
+
transition: opacity 500ms ease;
30
+
31
+
&.loaded {
32
+
opacity: 0;
33
+
}
34
+
35
+
svg {
36
+
height: var(--fs-md);
37
+
width: var(--fs-md);
38
+
}
28
39
}
29
40
}
+10
src/themes/winamp/browser/facet/index.html
+10
src/themes/winamp/browser/facet/index.html
···
17
17
@import "./themes/winamp/fonts.css";
18
18
@import "./themes/winamp/facet.css";
19
19
@import "./vendor/98.css";
20
+
21
+
.window {
22
+
opacity: 0;
23
+
pointer-events: none;
24
+
25
+
&.has-loaded {
26
+
opacity: 1;
27
+
pointer-events: auto;
28
+
}
29
+
}
20
30
</style>
21
31
22
32
<script type="module" src="themes/winamp/browser/facet/index.inline.js"></script>
+4
src/themes/winamp/browser/facet/index.inline.js
+4
src/themes/winamp/browser/facet/index.inline.js
···
4
4
// Set doc title
5
5
document.title = "Browser | Winamp | Diffuse";
6
6
7
+
// Doc loader
8
+
const window = /** @type {HTMLElement} */ (document.querySelector(".window"));
9
+
window.classList.add("has-loaded");
10
+
7
11
const [out, que, scp, trc] = await Promise.all([
8
12
foundation.orchestrator.output(),
9
13
foundation.engine.queue(),