A music player that connects to your cloud/distributed storage.
chore: processing progress sources facet
+27
-16
+27
-16
src/facets/data/sources/index.inline.js
+27
-16
src/facets/data/sources/index.inline.js
···
29
29
// SETUP
30
30
////////////////////////////////////////////
31
31
32
-
const [inputConfigurator, sourcesOrchestrator, outputOrchestrator, processOrchestrator] =
33
-
await Promise.all([
34
-
foundation.configurator.input(),
35
-
foundation.orchestrator.sources(),
36
-
foundation.orchestrator.output(),
37
-
foundation.orchestrator.processTracks({ disableWhenReady: true }),
38
-
]);
32
+
const [
33
+
inputConfigurator,
34
+
sourcesOrchestrator,
35
+
outputOrchestrator,
36
+
processOrchestrator,
37
+
] = await Promise.all([
38
+
foundation.configurator.input(),
39
+
foundation.orchestrator.sources(),
40
+
foundation.orchestrator.output(),
41
+
foundation.orchestrator.processTracks({ disableWhenReady: true }),
42
+
]);
39
43
40
44
await Promise.all([
41
45
customElements.whenDefined(inputConfigurator.localName),
···
43
47
customElements.whenDefined(outputOrchestrator.localName),
44
48
]);
45
49
46
-
47
50
////////////////////////////////////////////
48
51
// PROCESS BUTTON
49
52
////////////////////////////////////////////
50
53
51
-
const processBtn = /** @type {HTMLButtonElement} */ (document.querySelector("#process-btn"));
52
-
const processIcon = /** @type {HTMLElement} */ (document.querySelector("#process-icon"));
53
-
const processLabel = /** @type {HTMLElement} */ (document.querySelector("#process-label"));
54
+
const processBtn =
55
+
/** @type {HTMLButtonElement} */ (document.querySelector("#process-btn"));
56
+
const processIcon =
57
+
/** @type {HTMLElement} */ (document.querySelector("#process-icon"));
58
+
const processLabel =
59
+
/** @type {HTMLElement} */ (document.querySelector("#process-label"));
54
60
55
61
effect(() => {
56
62
const isProcessing = processOrchestrator.isProcessing();
63
+
const { processed, total } = processOrchestrator.progress();
64
+
const pct = total > 0 ? Math.round((processed / total) * 100) : null;
57
65
58
66
processBtn.disabled = isProcessing;
59
67
processIcon.className = isProcessing
60
68
? "ph-fill ph-arrows-clockwise animate-spin"
61
69
: "ph-fill ph-arrows-clockwise";
62
-
processLabel.textContent = isProcessing ? "Processing" : "Process";
70
+
processLabel.textContent = isProcessing
71
+
? (pct !== null ? `Processing (${pct}%)` : "Listing")
72
+
: "Process";
63
73
});
64
74
65
75
processBtn.addEventListener("click", async () => {
···
78
88
/** @type {HTMLElement} */ (document.querySelector("#sources-empty"));
79
89
80
90
/** @param {string} uri */
81
-
const trackPrefix = (uri) => { const q = uri.indexOf("?"); return q === -1 ? uri : uri.slice(0, q); };
91
+
const trackPrefix = (uri) => {
92
+
const q = uri.indexOf("?");
93
+
return q === -1 ? uri : uri.slice(0, q);
94
+
};
82
95
83
96
effect(() => {
84
97
const sourcesRecord = sourcesOrchestrator.sources();
···
99
112
if (scheme === SCHEME_EPHEMERAL_CACHE) {
100
113
const uri = `${SCHEME_EPHEMERAL_CACHE}://`;
101
114
const isDisabled = sourcesOrchestrator.isDisabled(uri);
102
-
const trackCount = tracks.filter((t) =>
103
-
t.uri.startsWith(uri)
104
-
).length;
115
+
const trackCount = tracks.filter((t) => t.uri.startsWith(uri)).length;
105
116
return html`
106
117
<li class="sources-scheme">${SCHEME_NAMES[scheme] ?? scheme}</li>
107
118
<li class="sources-item ${isDisabled