forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
chore: `foundation.setup` function to set doc title and fade out loader
+46
-41
-11
src/common/facets/loader.js
-11
src/common/facets/loader.js
+26
src/common/foundation.js
+26
src/common/foundation.js
···
152
152
search: signals.processor.search.get,
153
153
},
154
154
},
155
+
156
+
// Utilities
157
+
158
+
container: () => {
159
+
return document.body.querySelector("#container");
160
+
},
161
+
162
+
hideLoader: () => {
163
+
const loader = document.querySelector("#diffuse-loader");
164
+
165
+
if (loader) {
166
+
loader.classList.add("loaded");
167
+
setTimeout(() => {
168
+
loader.remove();
169
+
loader.parentElement?.remove();
170
+
}, 750);
171
+
}
172
+
},
173
+
174
+
/**
175
+
* @param {{ title: string }} options
176
+
*/
177
+
setup: ({ title }) => {
178
+
document.title = title;
179
+
config.hideLoader();
180
+
},
155
181
};
156
182
157
183
export default config;
+1
-2
src/facets/connect/atproto/index.inline.js
+1
-2
src/facets/connect/atproto/index.inline.js
···
10
10
11
11
import { setup } from "~/facets/connect/common.js";
12
12
13
-
document.title = "Connect AT Protocol | Diffuse";
13
+
foundation.setup({ title: "Connect AT Protocol | Diffuse" });
14
14
15
15
/**
16
16
* @import { default as WaInput } from "@awesome.me/webawesome/dist/components/input/input.js"
···
23
23
////////////////////////////////////////////
24
24
25
25
const outputOrchestrator = await foundation.orchestrator.output();
26
-
27
26
await customElements.whenDefined(outputOrchestrator.localName);
28
27
29
28
const atprotoOption = (await outputOrchestrator.options()).find(
+1
-1
src/facets/connect/https/index.inline.js
+1
-1
src/facets/connect/https/index.inline.js
···
15
15
* @import { default as WaInput } from "@awesome.me/webawesome/dist/components/input/input.js"
16
16
*/
17
17
18
-
document.title = "Connect HTTPS | Diffuse";
18
+
foundation.setup({ title: "Connect HTTPS | Diffuse" });
19
19
20
20
////////////////////////////////////////////
21
21
// SETUP
+1
-1
src/facets/connect/icecast/index.inline.js
+1
-1
src/facets/connect/icecast/index.inline.js
···
15
15
* @import { default as WaInput } from "@awesome.me/webawesome/dist/components/input/input.js"
16
16
*/
17
17
18
-
document.title = "Connect Icecast | Diffuse";
18
+
foundation.setup({ title: "Connect Icecast | Diffuse" });
19
19
20
20
////////////////////////////////////////////
21
21
// SETUP
+2
-1
src/facets/connect/index.inline.js
+2
-1
src/facets/connect/index.inline.js
···
8
8
import "~/common/webawesome/phosphor/fill.js";
9
9
10
10
import { data as facetsData } from "~/facets/index.js";
11
+
import foundation from "~/common/foundation.js";
11
12
12
-
document.title = "Connect | Diffuse";
13
+
foundation.setup({ title: "Connect | Diffuse" });
13
14
14
15
/** @param {string} path */
15
16
const loaderHref = (path) => `l/?path=${encodeURIComponent(path)}`;
+1
-1
src/facets/connect/local/index.inline.js
+1
-1
src/facets/connect/local/index.inline.js
+1
-1
src/facets/connect/opensubsonic/index.inline.js
+1
-1
src/facets/connect/opensubsonic/index.inline.js
+1
-1
src/facets/connect/s3/index.inline.js
+1
-1
src/facets/connect/s3/index.inline.js
+1
-1
src/facets/data/export-import/index.inline.js
+1
-1
src/facets/data/export-import/index.inline.js
+2
src/facets/data/process-tracks/index.inline.js
+2
src/facets/data/process-tracks/index.inline.js
+1
-1
src/facets/data/v3-import/index.inline.js
+1
-1
src/facets/data/v3-import/index.inline.js
···
1
1
import * as TID from "@atcute/tid";
2
2
import foundation from "~/common/foundation.js";
3
3
4
-
document.title = "V3.x Import | Diffuse";
4
+
foundation.setup({ title: "V3.x Import | Diffuse" });
5
5
6
6
const main = /** @type {HTMLElement} */ (document.querySelector("main"));
7
7
main.classList.add("has-loaded");
+1
-1
src/facets/examples/generate-playlist/index.inline.js
+1
-1
src/facets/examples/generate-playlist/index.inline.js
···
1
1
import foundation from "~/common/foundation.js";
2
2
3
3
// Set doc title
4
-
document.title = "Generate Playlist | Diffuse";
4
+
foundation.setup({ title: "Generate Playlist | Diffuse" });
5
5
6
6
const output = await foundation.orchestrator.output();
7
7
const queue = await foundation.engine.queue();
+1
-1
src/facets/examples/now-playing/index.inline.js
+1
-1
src/facets/examples/now-playing/index.inline.js
+1
-1
src/facets/misc/scrobble/last.fm/index.inline.js
+1
-1
src/facets/misc/scrobble/last.fm/index.inline.js
···
11
11
import { effect } from "~/common/signal.js";
12
12
13
13
// Set doc title
14
-
document.title = "Last.fm | Scrobble | Diffuse";
14
+
foundation.setup({ title: "Last.fm | Scrobble | Diffuse" });
15
15
16
16
/**
17
17
* @import { default as WaDrawer } from "@awesome.me/webawesome/dist/components/drawer/drawer.js"
+1
-1
src/facets/misc/split-view/index.inline.js
+1
-1
src/facets/misc/split-view/index.inline.js
···
13
13
import * as Output from "~/common/output.js";
14
14
15
15
// Set doc title
16
-
document.title = "Split View | Diffuse";
16
+
foundation.setup({ title: "Split View | Diffuse" });
17
17
18
18
/**
19
19
* @import { default as WaSplitPanel } from "@awesome.me/webawesome/dist/components/split-panel/split-panel.js"
+1
-1
src/facets/playback/auto-queue/index.inline.js
+1
-1
src/facets/playback/auto-queue/index.inline.js
-3
src/l/index.js
-3
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";
7
6
8
7
// Output element
9
8
const output = await foundation.orchestrator.output();
···
47
46
range.selectNode(container);
48
47
const documentFragment = range.createContextualFragment(facet.html ?? "");
49
48
container.append(documentFragment);
50
-
51
-
removeLoader();
52
49
},
53
50
});
+1
-1
src/l/index.vto
+1
-1
src/l/index.vto
···
15
15
<div id="container">
16
16
<div class="diffuse">
17
17
<div id="diffuse-loader" class="flex">
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>
18
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
19
19
</div>
20
20
</div>
21
21
</div>
+1
-10
src/styles/loader.css
+1
-10
src/styles/loader.css
···
6
6
@scope (.diffuse) {
7
7
:scope {
8
8
color: var(--text-color);
9
-
font-size: var(--fs-base);
10
-
font-weight: 500;
9
+
font-size: var(--fs-md);
11
10
left: 50%;
12
11
pointer-events: none;
13
12
position: absolute;
···
23
22
}
24
23
25
24
#diffuse-loader {
26
-
font-size: var(--fs-md);
27
-
letter-spacing: var(--leading-loose);
28
-
text-transform: uppercase;
29
25
transition: opacity 500ms ease;
30
26
31
27
&.loaded {
32
28
opacity: 0;
33
-
}
34
-
35
-
svg {
36
-
height: var(--fs-md);
37
-
width: var(--fs-md);
38
29
}
39
30
}
40
31
}
+1
-1
src/themes/blur/artwork-controller/facet/index.inline.js
+1
-1
src/themes/blur/artwork-controller/facet/index.inline.js
···
2
2
import ArtworkController from "~/themes/blur/artwork-controller/element.js";
3
3
4
4
// Set doc title
5
-
document.title = "Artwork controller | Blur | Diffuse";
5
+
foundation.setup({ title: "Artwork controller | Blur | Diffuse" });
6
6
7
7
// Setup the prerequisite elements
8
8
await foundation.orchestrator.queueAudio();